Henrik Wenz HaNdTriX

## UseRouterExample.next.js
// 🤫The following code is experimental and might break in the future!
// Don't use it if you are using some kind of side-effect patterns like: Helmet, GraphQL or react-side-effect.

import { useRouter } from 'next/router'

function Home() {
  const {
    // `String` of the actual path (including the query) shows in the browser
    asPath,
    // `String` Current route

## head.js
import React from 'react'
import ReactDOM from 'react-dom'

const isServer = typeof window === 'undefined'
const Context = React.createContext([])

export const HeadProvider = ({ head, children }) => (
  <Context.Provider value={head}>
    {children}
  </Context.Provider>

## removeAllSWCaches.js
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
          return true
        }).map(function(cacheName) {

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>

    <button id='audioMutedTrue'>audioMuted true</button>
    <button id='setAudioMutedTrue'>setAudioMuted true</button>

## useElementResize.ts
import { useState, useEffect, RefObject } from "react";
import ResizeObserver from "resize-observer-polyfill";

const useElementResize = (ref: RefObject<HTMLElement>) => {
  const [rect, setRect] = useState({});

  useEffect(() => {
    if (!ref.current) return
    const ro = new ResizeObserver((entries, observer) => {
      for (const entry of entries) {

## useFont.js
function wrapPromise(promise) {
  let status = "pending";
  let result;
  let suspender = promise.then(
    r => {
      status = "success";
      result = r;
    },
    e => {
      status = "error";

## apollo.logLink.js
import { ApolloLink } from 'apollo-link';

const logLink = new ApolloLink((operation, forward) => {
  console.time(operation.operationName);
  return forward(operation).map(result => {
    console.timeEnd(operation.operationName);
    return result;
  });
});

## pages-_error.js
import React from 'react'

function Error({ statusCode }) {
  return (
    <>
      <h1>{statusCode}</h1>
      <h2>This is the Next.js _error.js page</h2>
      <p>Choose the status code by changing the url param above</p>
      <p>
        This page supports the 7.x.x status code range{' '}

## asyncRetry.js
/**
 * Allows to repeatedly call
 * an async code block
 *
 * @callback callback
 * @callback [filterError] Allows to differentiate beween different type of errors
 * @param {number} [maxRetries=Infinity]
 */
function asyncRetry(
  callback,

## StripeTextField.js
import React, { useImperativeHandle } from "react";
import PropTypes from "prop-types";
import TextField from "@material-ui/core/TextField";
import { fade, useTheme } from "@material-ui/core/styles";

function StripeInput(props) {
  const {
    component: Component,
    inputRef,
    /* eslint-disable no-unused-vars */
	// 🤫The following code is experimental and might break in the future!
	// Don't use it if you are using some kind of side-effect patterns like: Helmet, GraphQL or react-side-effect.

	import { useRouter } from 'next/router'

	function Home() {
	const {
	// `String` of the actual path (including the query) shows in the browser
	asPath,
	// `String` Current route
	import React from 'react'
	import ReactDOM from 'react-dom'

	const isServer = typeof window === 'undefined'
	const Context = React.createContext([])

	export const HeadProvider = ({ head, children }) => (
	<Context.Provider value={head}>
	{children}
	</Context.Provider>
	self.addEventListener('activate', function(event) {
	event.waitUntil(
	caches.keys().then(function(cacheNames) {
	return Promise.all(
	cacheNames.filter(function(cacheName) {
	// Return true if you want to remove this cache,
	// but remember that caches are shared across
	// the whole origin
	return true
	}).map(function(cacheName) {
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	</head>
	<body>

	<button id='audioMutedTrue'>audioMuted true</button>
	<button id='setAudioMutedTrue'>setAudioMuted true</button>
	import { useState, useEffect, RefObject } from "react";
	import ResizeObserver from "resize-observer-polyfill";

	const useElementResize = (ref: RefObject<HTMLElement>) => {
	const [rect, setRect] = useState({});

	useEffect(() => {
	if (!ref.current) return
	const ro = new ResizeObserver((entries, observer) => {
	for (const entry of entries) {
	function wrapPromise(promise) {
	let status = "pending";
	let result;
	let suspender = promise.then(
	r => {
	status = "success";
	result = r;
	},
	e => {
	status = "error";
	import { ApolloLink } from 'apollo-link';

	const logLink = new ApolloLink((operation, forward) => {
	console.time(operation.operationName);
	return forward(operation).map(result => {
	console.timeEnd(operation.operationName);
	return result;
	});
	});
	import React from 'react'

	function Error({ statusCode }) {
	return (
	<>
	<h1>{statusCode}</h1>
	<h2>This is the Next.js _error.js page</h2>
	<p>Choose the status code by changing the url param above</p>
	<p>
	This page supports the 7.x.x status code range{' '}
	/**
	* Allows to repeatedly call
	* an async code block
	*
	* @callback callback
	* @callback [filterError] Allows to differentiate beween different type of errors
	* @param {number} [maxRetries=Infinity]
	*/
	function asyncRetry(
	callback,
	import React, { useImperativeHandle } from "react";
	import PropTypes from "prop-types";
	import TextField from "@material-ui/core/TextField";
	import { fade, useTheme } from "@material-ui/core/styles";

	function StripeInput(props) {
	const {
	component: Component,
	inputRef,
	/* eslint-disable no-unused-vars */