Merge branch 'main' of github.com:Jarred-Sumner/esdev

Former-commit-id: f4062ec24c4368670a0f5bc336de32fe1df6e821

6 files changed, 134 insertions, 36 deletions

diff --git a/demos/hello-next/bun-framework-next/client.development.tsx b/demos/hello-next/bun-framework-next/client.development.tsx
index c4346913d..aaa505d9c 100644
--- a/demos/hello-next/bun-framework-next/client.development.tsx
+++ b/demos/hello-next/bun-framework-next/client.development.tsx
@@ -19,6 +19,7 @@ import Router, {
   hasBasePath,
   PrivateRouteInfo,
 } from "next/dist/shared/lib/router/router";
+
 import { isDynamicRoute } from "next/dist/shared/lib/router/utils/is-dynamic";
 import {
   urlQueryToSearchParams,
@@ -33,7 +34,8 @@ import {
 } from "next/dist/shared/lib/utils";
 // import { Portal } from "next/dist/client/portal";
 import initHeadManager from "next/dist/client/head-manager";
-import PageLoader, { StyleSheetTuple } from "next/dist/client/page-loader";
+import { HeadManagerContext } from "next/dist/shared/lib/head-manager-context";
+import PageLoader from "./page-loader";
 import measureWebVitals from "next/dist/client/performance-relayer";
 import { RouteAnnouncer } from "next/dist/client/route-announcer";
 import {
@@ -97,7 +99,7 @@ if (hasBasePath(asPath)) {
   asPath = delBasePath(asPath);
 }
 
-const pageLoader: PageLoader = new PageLoader(buildId, prefix);
+const pageLoader: PageLoader = new PageLoader(buildId, prefix, data.pages);
 
 const headManager: {
   mountedInstances: Set<unknown>;
@@ -195,14 +197,69 @@ class Container extends React.Component<{
 
 let CachedComponent: React.ComponentType;
 
+const wrapApp =
+  (App: AppComponent) =>
+  (wrappedAppProps: Record<string, any>): JSX.Element => {
+    const appProps: AppProps = {
+      ...wrappedAppProps,
+      Component: CachedComponent,
+      err: hydrateErr,
+      router,
+    };
+    return (
+      <AppContainer>
+        <App {...appProps} />
+      </AppContainer>
+    );
+  };
+
+function AppContainer({
+  children,
+}: React.PropsWithChildren<{}>): React.ReactElement {
+  return (
+    <Container fn={(error) => <div>{JSON.stringify(error)}</div>}>
+      <RouterContext.Provider value={makePublicRouterInstance(router)}>
+        <HeadManagerContext.Provider value={headManager}>
+          {children}
+        </HeadManagerContext.Provider>
+      </RouterContext.Provider>
+    </Container>
+  );
+}
+
+router = createRouter(page, query, asPath, {
+  initialProps: hydrateProps,
+  pageLoader,
+  App: CachedApp,
+  Component: CachedComponent,
+  wrapApp,
+  err: null,
+  isFallback: Boolean(isFallback),
+  subscription: (info, App, scroll) =>
+    render(
+      Object.assign<
+        {},
+        Omit<RenderRouteInfo, "App" | "scroll">,
+        Pick<RenderRouteInfo, "App" | "scroll">
+      >({}, info, {
+        App,
+        scroll,
+      }) as RenderRouteInfo
+    ),
+  locale,
+  locales,
+  defaultLocale: "",
+  domainLocales,
+  isPreview,
+});
+
 function _boot(EntryPointNamespace) {
   const PageComponent = EntryPointNamespace.default;
 
   ReactDOM.hydrate(
-    <Container fn={(error) => <div>{JSON.stringify(error)}</div>}>
+    <AppContainer>
       <App Component={PageComponent} pageProps={data.props}></App>
-    </Container>,
-
+    </AppContainer>,
     document.querySelector("#__next")
   );
 }
diff --git a/demos/hello-next/bun-framework-next/page-loader.ts b/demos/hello-next/bun-framework-next/page-loader.ts
index fdc6f5f28..62cfab583 100644
--- a/demos/hello-next/bun-framework-next/page-loader.ts
+++ b/demos/hello-next/bun-framework-next/page-loader.ts
@@ -3,10 +3,15 @@ import NextPageLoader from "next/dist/client/page-loader";
 export default class PageLoader extends NextPageLoader {
   public routeLoader: RouteLoader;
 
-  getPageList() {
+  constructor(_, __, pages) {
+    super(_, __);
 
+    this.pages = pages;
   }
 
+  getPageList() {
+    return Object.keys(this.pages);
+  }
 
   loadPage(route: string): Promise<GoodPageCache> {
     return this.routeLoader.loadRoute(route).then((res) => {
@@ -24,6 +29,7 @@ export default class PageLoader extends NextPageLoader {
     });
   }
 
+  // not used in development!
   prefetch(route: string): Promise<void> {
     return this.routeLoader.prefetch(route);
   }
diff --git a/demos/hello-next/pages/blue.tsx b/demos/hello-next/pages/blue.tsx
deleted file mode 100644
index fe72a744f..000000000
--- a/demos/hello-next/pages/blue.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Link from "next/link";
-
-export default function Blue({}) {
-  return (
-    <div>
-      <h1>Blue</h1>
-    </div>
-  );
-}
diff --git a/demos/hello-next/pages/foo/bar/third.tsx b/demos/hello-next/pages/foo/bar/third.tsx
new file mode 100644
index 000000000..9fbdada30
--- /dev/null
+++ b/demos/hello-next/pages/foo/bar/third.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+export default function Baz({}) {
+  return (
+    <div style={{ padding: 16 }}>
+      <h1>Third</h1>
+      <ul>
+        <li>
+          <a href="/">Root page</a>
+        </li>
+        <li>
+          <a href="/second">Second page</a>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/demos/hello-next/pages/index.tsx b/demos/hello-next/pages/index.tsx
index 621f2c401..0c5c1086f 100644
--- a/demos/hello-next/pages/index.tsx
+++ b/demos/hello-next/pages/index.tsx
@@ -2,48 +2,57 @@ import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
 import Link from "next/link";
+import { useRouter } from "next/router";
+
+import Title from "../components/Title";
 
 export default function Home() {
+  const router = useRouter();
   return (
     <div className={styles.container}>
       <Head>
-        <title>Create Next Ap123p</title>
+        <title>Fo</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <Title />
+
       <main className={styles.main}>
         <h1 className={styles.title}>
-          Welcom <a href="https://nextjs.org">Next.js!</a>
+          Welcome <a href="https://nextjs.org">Next.js!</a>
         </h1>
 
-        <Title />
-
-        <Link href="/blue">
-          <a>Blue page</a>
-        </Link>
-
         <p className={styles.description}>
           Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
         <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
+          <Link href="/second">
+            <div className={styles.card}>
+              <h2>Second Page &rarr;</h2>
+              <p>Link</p>
+            </div>
+          </Link>
+
+          <button
+            onClick={() => router.push("/foo/bar/third")}
+            className={styles.card}
+            style={{ backgroundColor: "white" }}
+          >
+            <h2>Third Page &rarr;</h2>
+            <p>button, router.push()</p>
+          </button>
 
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
+          <a
+            href="https://github.com/vercel/next.js/tree/master/examples"
+            className={styles.card}
+          >
+            <h2>Examples &rarr;</h2>
+            <p>Discover and deploy boilerplate example Next.js projects.</p>
           </a>
-          <Link href="/hi">
-            <a className={styles.card}>
-              <h2>Examples &rarr;</h2>
-              <p>Discover and deploy boilerplate example Next.js projects.</p>
-            </a>
-          </Link>
+
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
             className={styles.card}
diff --git a/demos/hello-next/pages/second.tsx b/demos/hello-next/pages/second.tsx
new file mode 100644
index 000000000..ae5fd5ec8
--- /dev/null
+++ b/demos/hello-next/pages/second.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export default function Second({}) {
+  return (
+    <div style={{ padding: 16 }}>
+      <h1>Second</h1>
+
+      <ul>
+        <li>
+          <a href="/">Root page</a>
+        </li>
+        <li>
+          <a href="/foo/bar/third">Third page</a>
+        </li>
+      </ul>
+    </div>
+  );
+}