Nolansym Jordan-Gilliam

This middleware does a few interesting things:

Ensures a url shape in the zustand store, where we'll store URL information.
Assumes we will be storing our url state slice in the ?state search parameter after it has been stringified and base 64 encoded.
On creation, decodes stores state from the ?state search parameter into the url slice of our store.
After each state update, updates the ?state search parameter with the new url state slice.
Sets up an event listener that listens for popstate and re-decodes the state from the URL into our store.

var x = 5;
const name = 'Homer';

let homer = {
  first: name,
  last: 'Simpson'
};

	"use client";

	import { cache, unstable_postpone } from "react";
	import { preload } from "react-dom";

	const loadImage = cache((src: string) => {
	return new Promise<void>((resolve, reject) => {
	const img = new Image();
	img.src = src;


	/*
	* Stripe WebGl Gradient Animation
	* All Credits to Stripe.com
	* ScrollObserver functionality to disable animation when not scrolled into view has been disabled and
	* commented out for now.
	* https://kevinhufnagl.com
	*/

	import React from 'react';
	import { FederatedProvider } from './federated-provider';
	import { scopes } from './scopes';

	// This is an example app on how you would setup your Nextjs app

	const App = ({ Component }) => {
	return (
	<FederatedProvider scopes={scopes}>
	<Component />

	// hydrate.js
	function autoHydrate(Component, name) {
	if (isClient) {
	return Component;
	}

	return props => html`
	<component-root name=${name} />
	<${Component} ...${props} />
	<script

	import * as React from "react"
	import { useState, useEffect } from "react"

	// Hook
	let cachedScripts = []

	export function useScript(src) {
	// Keeping track of script loaded and error state
	const [state, setState] = useState({
	loaded: false,