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.

	"use client";

	import React, { useEffect, useId, useState } from "react";
	import { motion, AnimatePresence, MotionConfig } from "framer-motion";
	import { PlusIcon, XIcon } from "lucide-react";
	import { createPortal } from "react-dom";
	import { cn } from "@/lib/utils";
	import { buttonVariants } from "../button";

	const transition = {

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html dir="ltr" lang="en">

	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200;12..96,300;12..96,400;12..96,500;12..96,700;12..96,800&display=swap');
	</style>
	</head>
	<div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Explore Login - A New Cult Template<div> ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏

	{
	"name": "rocket-science-setup",
	"version": "1.0.0",
	"description": "This is the common setup script for rocket-science",
	"bin": "./setup.js"
	}

	{
	"name": "rocket-science-computer-validator",
	"version": "1.0.0",
	"description": "I use this to validate people's computers have the proper versions of node and npm installed for rocket-science",
	"bin": "./validate-system.js",
	"dependencies": {
	"semver": "7.1.3"
	}
	}

	%253Cscript%253Ealert('XSS')%253C%252Fscript%253E
	<IMG SRC=x onload="alert(String.fromCharCode(88,83,83))">
	<IMG SRC=x onafterprint="alert(String.fromCharCode(88,83,83))">
	<IMG SRC=x onbeforeprint="alert(String.fromCharCode(88,83,83))">
	<IMG SRC=x onbeforeunload="alert(String.fromCharCode(88,83,83))">
	<IMG SRC=x onerror="alert(String.fromCharCode(88,83,83))">
	<IMG SRC=x onhashchange="alert(String.fromCharCode(88,83,83))">
	<IMG SRC=x onload="alert(String.fromCharCode(88,83,83))">
	<IMG SRC=x onmessage="alert(String.fromCharCode(88,83,83))">
	<IMG SRC=x ononline="alert(String.fromCharCode(88,83,83))">

	/* ________ RENDER "FACTORY" ________
	-> lower level react methods allow more control over child rendering
	-> cloneElement is necessary to ensure immutability
	-> ugly but allows us to handle use-cases with one component or many
	-> cloneElement ensures referential equality & immutability :)
	-> ugly but allows us to handle use-cases with one child component or many
	*/

	let elements = React.Children.toArray(props.children);
	if (elements.length === 1) {

	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 />

	import React from "react";
	import ComponentB from "mfe-b/Component"; // <- these are remote modules,
	import ComponentC from "mfe-c/Component"; // <- but they are used as usual packages
	import { de } from "date-fns/locale";

	// remote modules can also be used with import() which lazy loads them as usual
	const ComponentD = React.lazy(() => import("mfe-c/Component2"));

	const App = () => (
	<article>


	const not = fn => (...args) => !fn.apply(null, args);
	const isZero = (context, event) => event.key === 0;
	const isNotZero = not(isZero);
	const isMinus = (context, event) => event.operator === "-";
	const isNotMinus = not(isMinus);
	const divideByZero = (context, event) =>
	context.operand2 === "0." && context.operator === "/";
	const notDivideByZero = not(divideByZero);