16 files changed, 161 insertions, 45 deletions
diff --git a/demos/css-stress-test/nexty/client.development.tsx b/demos/css-stress-test/nexty/client.development.tsx
index f15ccee28..778df6f12 100644
--- a/demos/css-stress-test/nexty/client.development.tsx
+++ b/demos/css-stress-test/nexty/client.development.tsx
@@ -1,10 +1,43 @@
 globalThis.process = {
   platform: "posix",
   env: {},
+  browser: true,
 };
 
 import * as ReactDOM from "react-dom";
 import App from "next/app";
+import mitt, { MittEmitter } from "next/dist/shared/lib/mitt";
+import { RouterContext } from "next/dist/shared/lib/router-context";
+import Router, {
+  AppComponent,
+  AppProps,
+  delBasePath,
+  hasBasePath,
+  PrivateRouteInfo,
+} from "next/dist/shared/lib/router/router";
+import { isDynamicRoute } from "next/dist/shared/lib/router/utils/is-dynamic";
+import {
+  urlQueryToSearchParams,
+  assign,
+} from "next/dist/shared/lib/router/utils/querystring";
+import { setConfig } from "next/dist/shared/lib/runtime-config";
+import {
+  getURL,
+  loadGetInitialProps,
+  NEXT_DATA,
+  ST,
+} 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 measureWebVitals from "next/dist/client/performance-relayer";
+import { RouteAnnouncer } from "next/dist/client/route-announcer";
+import {
+  createRouter,
+  makePublicRouterInstance,
+} from "next/dist/client/router";
+import "./renderDocument";
+export const emitter: MittEmitter<string> = mitt();
 
 export default function boot(EntryPointNamespace, loader) {
   _boot(EntryPointNamespace);
@@ -26,6 +59,7 @@ function _boot(EntryPointNamespace) {
   }
 
   const props = { ...globalThis.NEXT_DATA.props };
+
   const PageComponent = EntryPointNamespace.default;
   ReactDOM.hydrate(
     <App Component={PageComponent} pageProps={props.pageProps}></App>,
diff --git a/demos/css-stress-test/nexty/package.json b/demos/css-stress-test/nexty/package.json
index bfcec7c16..e2394eec5 100644
--- a/demos/css-stress-test/nexty/package.json
+++ b/demos/css-stress-test/nexty/package.json
@@ -12,6 +12,7 @@
       ]
     },
     "static": "public",
+    "assetPrefix": "_next/",
     "development": {
       "client": "client.development.tsx",
       "server": "server.development.tsx"
diff --git a/demos/css-stress-test/nexty/page-loader.ts b/demos/css-stress-test/nexty/page-loader.ts
new file mode 100644
index 000000000..fdc6f5f28
--- /dev/null
+++ b/demos/css-stress-test/nexty/page-loader.ts
@@ -0,0 +1,30 @@
+import NextPageLoader from "next/dist/client/page-loader";
+
+export default class PageLoader extends NextPageLoader {
+  public routeLoader: RouteLoader;
+
+  getPageList() {
+
+  }
+
+
+  loadPage(route: string): Promise<GoodPageCache> {
+    return this.routeLoader.loadRoute(route).then((res) => {
+      if ("component" in res) {
+        return {
+          page: res.component,
+          mod: res.exports,
+          styleSheets: res.styles.map((o) => ({
+            href: o.href,
+            text: o.content,
+          })),
+        };
+      }
+      throw res.error;
+    });
+  }
+
+  prefetch(route: string): Promise<void> {
+    return this.routeLoader.prefetch(route);
+  }
+}
diff --git a/demos/css-stress-test/nexty/renderDocument.tsx b/demos/css-stress-test/nexty/renderDocument.tsx
index 3ada60c86..e5261d4c2 100644
--- a/demos/css-stress-test/nexty/renderDocument.tsx
+++ b/demos/css-stress-test/nexty/renderDocument.tsx
@@ -20,6 +20,7 @@ import {
 import * as NextDocument from "next/document";
 import * as ReactDOMServer from "react-dom/server.browser";
 import * as url from "url";
+import * as React from "react";
 
 const dev = process.env.NODE_ENV === "development";
 
@@ -47,9 +48,7 @@ function getScripts(files: DocumentFiles) {
     return (
       <script
         key={file}
-        src={`${assetPrefix}/_next/${encodeURI(
-          file
-        )}${devOnlyCacheBusterQueryString}`}
+        src={`${encodeURI(file)}${devOnlyCacheBusterQueryString}`}
         nonce={props.nonce}
         async
         crossOrigin={props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN}
@@ -59,6 +58,33 @@ function getScripts(files: DocumentFiles) {
   });
 }
 
+// function fixLink(from: string) {
+//   if (from.startsWith("/_next/http://") || from.startsWith("/_next/https://"))
+//     return from.substring("/_next".length);
+//   return from;
+// }
+
+// function cloneWithOverwrittenLink(element: React.ReactElement<any>) {
+//   const props = { ...element.props };
+//   if ("href" in element.props) {
+//     props.href = fixLink(props.href);
+//   }
+
+//   if ("n-href" in element.props) {
+//     props["n-href"] = fixLink(props["n-href"]);
+//   }
+
+//   if ("n-src" in element.props) {
+//     props["n-src"] = fixLink(props["n-src"]);
+//   }
+
+//   if ("src" in element.props) {
+//     props["src"] = fixLink(props.src);
+//   }
+
+//   return React.cloneElement(element, props);
+// }
+
 interface DomainLocale {
   defaultLocale: string;
   domain: string;
@@ -161,6 +187,8 @@ function renderDocument(
             defaultLocale,
             domainLocales,
             isPreview,
+
+            pages: buildManifest.pages,
           },
           buildManifest,
           docComponentsRendered,
@@ -300,6 +328,7 @@ export async function render({
   pageStylesheets = [],
   DocumentNamespace = null,
   buildId,
+  routePaths = [],
 }: {
   buildId: number;
   route: any;
@@ -308,6 +337,7 @@ export async function render({
   DocumentNamespace: Object | null;
   appStylesheets: string[];
   pageStylesheets: string[];
+  routePaths: string[];
 }): Promise<Response> {
   const { default: Component, getStaticProps = null } = PageNamespace || {};
   const { default: AppComponent_ } = AppNamespace || {};
@@ -316,6 +346,25 @@ export async function render({
   // These are reversed in our Router versus Next.js...mostly due to personal preference.
   const pathname = "/" + route.name;
   var asPath = route.pathname;
+  const pages = {};
+
+  for (let path of routePaths) {
+    const filePath = path.substring(
+      path.indexOf("_next/pages/") + "_next/pages".length
+    );
+    const name = filePath.substring(0, filePath.indexOf("."));
+    pages[name] = [path];
+  }
+
+  pages[pathname] = [route.scriptSrc];
+
+  if (appStylesheets.length > 0) {
+    if (pages["/_app"]) {
+      pages["/_app"].push(...appStylesheets);
+    } else {
+      pages["/_app"] = appStylesheets;
+    }
+  }
 
   const AppComponent = AppComponent_ || App.default;
   const Document =
@@ -377,8 +426,8 @@ export async function render({
   }
 
   let head: JSX.Element[] = [
-    <meta charSet="utf-8" />,
-    <meta name="viewport" content="width=device-width" />,
+    // <meta charSet="utf-8" />,
+    // <meta name="viewport" content="width=device-width" />,
   ];
 
   const nextExport = isAutoExport || isFallback;
@@ -516,8 +565,10 @@ export async function render({
   //   query: origQuery,
   // });
   const docComponentsRendered: DocumentProps["docComponentsRendered"] = {};
+
   const isPreview = false;
   const getServerSideProps = PageNamespace.getServerSideProps;
+
   let html = renderDocument(Document, {
     docComponentsRendered,
     ...renderOpts,
@@ -528,10 +579,7 @@ export async function render({
       allFiles: [],
       polyfillFiles: [],
       lowPriorityFiles: [],
-      pages: {
-        "/_app": [Wundle.routesDir + "_app", ...appStylesheets],
-        [pathname]: [...pageStylesheets, route.scriptSrc],
-      },
+      pages: pages,
     },
     // Only enabled in production as development mode has features relying on HMR (style injection for example)
     unstable_runtimeJS: true,
@@ -563,6 +611,8 @@ export async function render({
     isPreview: isPreview === true ? true : undefined,
     autoExport: isAutoExport === true ? true : undefined,
     nextExport: nextExport === true ? true : undefined,
-  }).replaceAll("/_next//_next", "/_next");
+  })
+    .replaceAll("/_next/http://", "http://")
+    .replaceAll("/_next/https://", "https://");
   return new Response(html);
 }
diff --git a/demos/css-stress-test/nexty/route-loader.ts b/demos/css-stress-test/nexty/route-loader.ts
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/demos/css-stress-test/nexty/route-loader.ts
diff --git a/demos/css-stress-test/nexty/server.development.tsx b/demos/css-stress-test/nexty/server.development.tsx
index 78017f885..9dfa07168 100644
--- a/demos/css-stress-test/nexty/server.development.tsx
+++ b/demos/css-stress-test/nexty/server.development.tsx
@@ -25,8 +25,7 @@ addEventListener("fetch", async (event: FetchEvent) => {
   } catch (exception) {
     appRoute = null;
   }
-  const appStylesheets = Wundle.getImportedStyles() as string[];
-
+  const appStylesheets = (Wundle.getImportedStyles() as string[]).slice();
   var route = Wundle.match(event);
 
   // This imports the currently matched route.
@@ -34,7 +33,7 @@ addEventListener("fetch", async (event: FetchEvent) => {
 
   // This returns all .css files that were imported in the line above.
   // It's recursive, so any file that imports a CSS file will be included.
-  const pageStylesheets = Wundle.getImportedStyles() as string[];
+  const pageStylesheets = (Wundle.getImportedStyles() as string[]).slice();
 
   event.respondWith(
     await render({
@@ -45,6 +44,7 @@ addEventListener("fetch", async (event: FetchEvent) => {
       DocumentNamespace,
       AppNamespace: appRoute,
       buildId,
+      routePaths: Wundle.getRouteFiles(),
     })
   );
   buildId++;
diff --git a/demos/css-stress-test/package.json b/demos/css-stress-test/package.json
index fefc4d2b2..a4b3e1f91 100644
--- a/demos/css-stress-test/package.json
+++ b/demos/css-stress-test/package.json
@@ -7,13 +7,15 @@
     "@vitejs/plugin-react-refresh": "^1.3.3",
     "antd": "^4.16.1",
     "left-pad": "^1.3.0",
-    "next": "^11.0.0",
+    "next": "^11.0.1",
     "parcel": "2.0.0-beta.3",
+    "path-browserify": "^1.0.1",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
     "react-form": "^4.0.1",
-    "react-hook-form": "^7.8.3"
+    "react-hook-form": "^7.8.3",
+    "url": "^0.11.0"
   },
   "parcel": "parceldist/index.js",
   "targets": {
diff --git a/demos/css-stress-test/pages/[id]/boom.tsx b/demos/css-stress-test/pages/[id]/boom.tsx
index 05f9f34c4..1553592e4 100644
--- a/demos/css-stress-test/pages/[id]/boom.tsx
+++ b/demos/css-stress-test/pages/[id]/boom.tsx
@@ -1,9 +1,11 @@
 import { Main } from "../../src/main";
 
-export default function IndexRoute() {
+function IndexRoute() {
   return (
     <div>
       <Main productName={"Boom id"} />
     </div>
   );
 }
+
+export { IndexRoute as default };
diff --git a/demos/css-stress-test/pages/_app.tsx b/demos/css-stress-test/pages/_app.tsx
index d64d861db..04a911072 100644
--- a/demos/css-stress-test/pages/_app.tsx
+++ b/demos/css-stress-test/pages/_app.tsx
@@ -1,5 +1,6 @@
 import "../src/font.css";
 import "../src/index.css";
+
 import App from "next/app";
 
 class MyApp extends App {
diff --git a/demos/css-stress-test/pages/index.tsx b/demos/css-stress-test/pages/index.tsx
index a382a9ea0..aee3be2cf 100644
--- a/demos/css-stress-test/pages/index.tsx
+++ b/demos/css-stress-test/pages/index.tsx
@@ -1,14 +1,5 @@
-import { Main } from "../src/main";
-import { Button } from "../src/components/button";
+import { Main } from "src/main";
 
-export function getInitialProps() {
-  return {};
-}
-
-export default function IndexRoute() {
-  return (
-    <div>
-      <Main productName={"Next.js (Webpack 5)"} />;<Button>hello</Button>
-    </div>
-  );
+export default function IndexPage() {
+  return <Main />;
 }
diff --git a/demos/css-stress-test/pages/two.tsx b/demos/css-stress-test/pages/two.tsx
new file mode 100644
index 000000000..248385591
--- /dev/null
+++ b/demos/css-stress-test/pages/two.tsx
@@ -0,0 +1,13 @@
+import { Main } from "../src/main";
+
+export function getInitialProps() {
+  return {};
+}
+
+export default function IndexRoute() {
+  return (
+    <div>
+      <Main productName={"Page 2! Next.js (Webpack 5)"} />
+    </div>
+  );
+}
diff --git a/demos/css-stress-test/public/index.html b/demos/css-stress-test/public/index.html
deleted file mode 100644
index 2032ea287..000000000
--- a/demos/css-stress-test/public/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <link
-      rel="stylesheet"
-      crossorigin="anonymous"
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Space+Mono:wght@400;700&display=swap"
-    />
-  </head>
-  <body>
-    <div id="reactroot"></div>
-    <link rel="stylesheet" href="./src/index.css" />
-    <script src="./src/index.tsx" async type="module"></script>
-  </body>
-</html>
diff --git a/demos/css-stress-test/src/colors2.css b/demos/css-stress-test/src/colors2.css
new file mode 100644
index 000000000..ba280df46
--- /dev/null
+++ b/demos/css-stress-test/src/colors2.css
@@ -0,0 +1,3 @@
+body {
+  filter: sepia(50%) brightness(200%);
+}
diff --git a/demos/css-stress-test/src/font.css b/demos/css-stress-test/src/font.css
index 448775ef0..758eb6680 100644
--- a/demos/css-stress-test/src/font.css
+++ b/demos/css-stress-test/src/font.css
@@ -1 +1 @@
-@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Space+Mono:wght@400;700&display=swap";
+/* @import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Space+Mono:wght@400;700&display=swap"; */
diff --git a/demos/css-stress-test/test-pnpm.js b/demos/css-stress-test/test-pnpm.js
new file mode 100644
index 000000000..b494d82dd
--- /dev/null
+++ b/demos/css-stress-test/test-pnpm.js
@@ -0,0 +1 @@
+import jsx from "/Users/jarred/Code/esdev/demos/css-stress-test/node_modules/react/cjs/react-jsx-dev-runtime.development.js";
diff --git a/demos/css-stress-test/tsconfig.json b/demos/css-stress-test/tsconfig.json
index 37493d0a5..679268d71 100644
--- a/demos/css-stress-test/tsconfig.json
+++ b/demos/css-stress-test/tsconfig.json
@@ -13,7 +13,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "path": ["node_modules/path-browserify"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]