setup modulepreload anticipating vinxi update

solidjs · Dec 15, 2023 · e789de1 · e789de1
1 parent 78a7373
commit e789de1
Show file tree

Hide file tree

Showing 21 changed files with 107 additions and 43 deletions.
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@solidjs/meta": "^0.29.2",
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "solid-js": "^1.8.7",
     "vinxi": "0.0.51"

diff --git a/examples/experiments/package.json b/examples/experiments/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@solidjs/meta": "^0.29.2",
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "solid-js": "^1.8.7",
     "vinxi": "0.0.51"

diff --git a/examples/experiments/src/entry-client.tsx b/examples/experiments/src/entry-client.tsx
@@ -1,10 +1,10 @@
 import { mount, StartClient } from "@solidjs/start/client";
 
-async function hello(name: string) {
-  "use server";
-  console.log("hello", name);
-}
+// async function hello(name: string) {
+//   "use server";
+//   console.log("hello", name);
+// }
 
-await hello("John");
+// await hello("John");
 
 mount(() => <StartClient />, document.getElementById("app"));
diff --git a/examples/experiments/src/routes/(group).tsx b/examples/experiments/src/routes/(group).tsx
@@ -0,0 +1,8 @@
+import { RouteSectionProps } from "@solidjs/router";
+
+export default function(props: RouteSectionProps) {
+  return <>
+    <h1>Group</h1>
+    {props.children}
+  </>
+}
diff --git a/examples/experiments/src/routes/(group)/other.tsx b/examples/experiments/src/routes/(group)/other.tsx
@@ -0,0 +1,3 @@
+export default function() {
+  return <section>OTHER</section>
+}
diff --git a/examples/experiments/src/routes/test.tsx b/examples/experiments/src/routes/test.tsx
@@ -0,0 +1,10 @@
+import { RouteSectionProps } from "@solidjs/router";
+
+export default function (props: RouteSectionProps) {
+  return (
+    <>
+      <h1>Layout</h1>
+      {props.children}
+    </>
+  );
+}
diff --git a/examples/experiments/src/routes/test/(hi).tsx b/examples/experiments/src/routes/test/(hi).tsx
@@ -0,0 +1,3 @@
+export default function() {
+  return <section>CONTENT</section>
+}
diff --git a/examples/experiments/src/routes/test/[name].tsx b/examples/experiments/src/routes/test/[name].tsx
@@ -0,0 +1,5 @@
+import { RouteSectionProps } from "@solidjs/router";
+
+export default function(props: RouteSectionProps) {
+  return <section>{props.params.name}</section>
+}
diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json
@@ -7,7 +7,7 @@
     "start": "node ./.output/server/index.mjs"
   },
   "dependencies": {
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "solid-js": "^1.8.7",
     "vinxi": "0.0.51"

diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json
@@ -7,7 +7,7 @@
     "start": "node ./.output/server/index.mjs"
   },
   "dependencies": {
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "solid-js": "^1.8.7",
     "unstorage": "1.10.1",

diff --git a/examples/with-auth/package.json b/examples/with-auth/package.json
@@ -10,7 +10,7 @@
     "@types/node": "^20.10.1"
   },
   "dependencies": {
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "solid-js": "^1.8.7",
     "vinxi": "0.0.51"

diff --git a/examples/with-mdx/package.json b/examples/with-mdx/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@mdx-js/mdx": "^2.3.0",
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "@vinxi/plugin-mdx": "^3.6.5",
     "solid-js": "^1.8.7",

diff --git a/examples/with-prisma/package.json b/examples/with-prisma/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@prisma/client": "^5.7.0",
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "prisma": "^5.7.0",
     "solid-js": "^1.8.7",

diff --git a/examples/with-solid-styled/package.json b/examples/with-solid-styled/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@solidjs/meta": "^0.29.2",
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "solid-js": "^1.8.7",
     "solid-styled": "^0.8.2",

diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
@@ -7,7 +7,7 @@
     "start": "node ./.output/server/index.mjs"
   },
   "dependencies": {
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.26",

diff --git a/examples/with-trpc/package.json b/examples/with-trpc/package.json
@@ -11,7 +11,7 @@
     "@trpc/client": "^10.44.1",
     "@trpc/server": "^10.44.1",
     "@solidjs/meta": "^0.29.2",
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@solidjs/start": "^0.4.0-alpha.6",
     "solid-js": "^1.8.7",
     "valibot": "^0.23.0",

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@solidjs/meta": "^0.29.0",
-    "@solidjs/router": "^0.10.2",
+    "@solidjs/router": "^0.10.3",
     "@tailwindcss/typography": "^0.5.9",
     "@trpc/client": "^9.27.4",
     "@trpc/server": "^9.27.4",

diff --git a/packages/start/server/StartServer.tsx b/packages/start/server/StartServer.tsx
@@ -1,7 +1,14 @@
 // @ts-ignore
 import App from "#start/app";
 import type { Component } from "solid-js";
-import { Hydration, HydrationScript, NoHydration, getRequestEvent, ssr } from "solid-js/web";
+import {
+  Hydration,
+  HydrationScript,
+  NoHydration,
+  getRequestEvent,
+  ssr,
+  useAssets
+} from "solid-js/web";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { renderAsset } from "./renderAsset";
 import type { DocumentComponentProps } from "./types";
@@ -10,6 +17,32 @@ const docType = ssr("<!DOCTYPE html>");
 
 export function StartServer(props: { document: Component<DocumentComponentProps> }) {
   const context = getRequestEvent() as any;
+
+  let assets = [];
+  Promise.resolve().then(async () => {
+    let current = context.routes;
+    if (context.routerMatches[0]) {
+      for (let i = 0; i < context.routerMatches[0].length; i++) {
+        const match = context.routerMatches[0][i];
+        if (match.metadata && match.metadata.filesystem) {
+          const segment = current.find(r => r.path === match.path);
+          const part = import.meta.env.MANIFEST["client"].inputs[segment["$component"].src];
+          const asset = await part.assets();
+          assets.push.apply(assets, asset);
+          current = segment.children;
+        }
+      }
+    }
+    // dedupe assets
+    assets = [...new Map(assets.map(item => [item.attrs.key, item])).values()].filter(
+      asset =>
+        asset.attrs.rel === "modulepreload" &&
+        !context.assets.find(a => a.attrs.key === asset.attrs.key)
+    );
+  });
+
+  useAssets(() => assets.map(m => renderAsset(m)));
+
   return (
     <NoHydration>
       {docType as unknown as any}

diff --git a/packages/start/shared/FileRoutes.tsx b/packages/start/shared/FileRoutes.tsx
@@ -10,6 +10,7 @@ export function createRoutes() {
     return {
       ...route,
       ...(route.$$route ? route.$$route.require().route : undefined),
+      metadata: { ...(route.$$route ? route.$$route.require().route.metadata : {}), filesystem: true },
       component: lazyRoute(
         route.$component,
         import.meta.env.START_ISLANDS
@@ -26,5 +27,5 @@ export function createRoutes() {
 
 let routes;
 export const FileRoutes = () => {
-  return isServer ? (getRequestEvent() as PageEvent).routes : (routes || (routes = createRoutes()));
+  return isServer ? (getRequestEvent() as PageEvent).routes : routes || (routes = createRoutes());
 };
diff --git a/packages/start/shared/lazyRoute.tsx b/packages/start/shared/lazyRoute.tsx
@@ -47,9 +47,10 @@ export default function lazyRoute(
 			const mod = await component.import();
 			const Component = mod[exported];
 			let assets = await clientManifest.inputs?.[component.src].assets();
+			const styles = assets.filter((asset) => asset.tag === "style" || asset.attrs.rel === "stylesheet");
 			const Comp = (props) => {
 				return [
-					...assets.map((asset) => renderAsset(asset)),
+					...styles.map((asset) => renderAsset(asset)),
 					createComponent(Component, props),
 				];
 			};

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml