feat: implement css aware lazy and migrate routes, pt2

Author: katywings

packages/start/src/config/lazy.ts

@@ -4,6 +4,7 @@ import * as t from "@babel/types";
 import { sep as osSep } from "path";
 import { basename, relative, sep } from "path/posix";
 import { PluginOption } from "vite";
+import { VITE_ENVIRONMENTS } from "./constants";
 
 const idTransform = (id: string): PluginItem => {
   return {
@@ -33,7 +34,7 @@ const importTransform = (): PluginItem => {
             path.insertAfter(
               t.importDeclaration(
                 [t.importSpecifier(t.identifier("lazy"), t.identifier("lazy"))],
-                t.stringLiteral("@solidjs/start")
+                t.stringLiteral("@solidjs/start/server")
               )
             );
           }
@@ -50,6 +51,9 @@ const lazy = (): PluginOption => {
   return {
     name: "solid-lazy-css",
     enforce: "pre",
+    applyToEnvironment(env) {
+      return env.name === VITE_ENVIRONMENTS.server;
+    },
     async transform(src, id) {
       if (!id.match(fileEndingRegex)) return;
 

packages/start/src/index.ts

@@ -15,5 +15,4 @@ export type {
 export { default as clientOnly } from "./shared/clientOnly.ts";
 export { GET } from "./shared/GET.ts";
 export { HttpStatusCode } from "./shared/HttpStatusCode.ts";
-export { default as lazy } from "./shared/lazy.ts";
 export { getServerFunctionMeta } from "./shared/serverFunction.ts";

packages/start/src/router.tsx

@@ -1,9 +1,8 @@
-import type { Component } from "solid-js";
+import { lazy, type Component } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
 
 import { pageRoutes as routeConfigs } from "./server/routes.ts";
 import type { PageEvent } from "./server/types.ts";
-import lazy from "./shared/lazy.ts";
 
 const components: Record<string, Component> = {};
 

packages/start/src/server/index.tsx

@@ -1,3 +1,4 @@
+export { default as lazy } from "../shared/lazy.ts";
 export { getServerFunctionMeta } from "../shared/serverFunction.ts";
 export { StartServer } from "./StartServer.tsx";
 export { createHandler } from "./handler.ts";

packages/start/src/shared/lazy.ts

@@ -1,8 +1,8 @@
-import { Component, createComponent, lazy as solidLazy } from "solid-js";
-import { getRequestEvent } from "solid-js/web";
+import { Component, lazy as solidLazy } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
 import { getManifest } from "solid-start:get-manifest";
-import { Asset } from "../server/types.ts";
-import { useAssets } from "./assets.ts";
+import { useAssets } from "../server/assets/index.ts";
+import { Asset, PageEvent } from "../server/types.ts";
 
 const assetsById: Record<string, Asset[]> = {};
 
@@ -16,12 +16,12 @@ const getAssets = async (id: string) => {
   return assets;
 };
 
-const collectAssets = function <T extends () => Promise<{ default: Component<any> }>>(fn: T): T {
-  const wrapper: any = async () => {
+const withAssets = function <T extends () => Promise<{ default: Component<any> }>>(fn: T): T {
+  const wrapper = async () => {
     const mod = await fn();
 
     // This id$$ export is generated by the lazy vite plugin
-    const id = (mod as any).id$$;
+    const id: string = (mod as any).id$$;
     if (!id) return mod;
 
     if (!mod.default) {
@@ -34,19 +34,18 @@ const collectAssets = function <T extends () => Promise<{ default: Component<any
 
     return {
       default: (props: any) => {
-        // TODO: How to get nonce on the client
-        const { nonce } = (getRequestEvent() as any) ?? {};
+        const { nonce } = getRequestEvent() as PageEvent;
         useAssets(assets, nonce);
 
-        return createComponent(mod.default, props);
+        return mod.default(props);
       }
     };
   };
 
-  return wrapper;
+  return wrapper as T;
 };
 
-const lazy = <T extends Component<any>>(fn: () => Promise<{ default: T }>) =>
-  solidLazy(collectAssets(fn));
+const lazy = !isServer ? solidLazy: <T extends Component<any>>(fn: () => Promise<{ default: T }>) =>
+  solidLazy(withAssets(fn));
 
 export default lazy;