@solidjs/start 2.0.0-alpha.0 → 2.0.0-alpha.2

package/src/config/index.ts

@@ -1,9 +1,9 @@
 import { TanStackServerFnPlugin } from "@tanstack/server-functions-plugin";
 import { defu } from "defu";
 import { globSync } from "node:fs";
-import { extname, isAbsolute, join, normalize } from "node:path";
+import { extname, isAbsolute, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { type PluginOption } from "vite";
+import { normalizePath, type PluginOption } from "vite";
 import solid, { type Options as SolidOptions } from "vite-plugin-solid";
 
 import { DEFAULT_EXTENSIONS, VIRTUAL_MODULES, VITE_ENVIRONMENTS } from "./constants.ts";
@@ -33,10 +33,10 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
     ssr: true,
     devOverlay: true,
     experimental: {
-      islands: false
+      islands: false,
     },
     solid: {},
-    extensions: []
+    extensions: [],
   });
   const extensions = [...DEFAULT_EXTENSIONS, ...(start.extensions || [])];
   const routeDir = join(start.appRoot, start.routeDir);
@@ -48,7 +48,7 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
   const entryExtension = extname(appEntryPath);
   const handlers = {
     client: `${start.appRoot}/entry-client${entryExtension}`,
-    server: `${start.appRoot}/entry-server${entryExtension}`
+    server: `${start.appRoot}/entry-server${entryExtension}`,
   };
   return [
     {
@@ -56,13 +56,10 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
       enforce: "pre",
       configEnvironment(name) {
         return {
-          define: {
-            "import.meta.env.SSR": JSON.stringify(name === VITE_ENVIRONMENTS.server)
-          },
           resolve: {
             // remove when https://github.com/solidjs/vite-plugin-solid/pull/228 is released
-            externalConditions: ["solid", "node"]
-          }
+            externalConditions: ["solid", "node"],
+          },
         };
       },
       async config(_, env) {
@@ -93,9 +90,9 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
                 rollupOptions: {
                   input: clientInput,
                   treeshake: true,
-                  preserveEntrySignatures: "exports-only"
-                }
-              }
+                  preserveEntrySignatures: "exports-only",
+                },
+              },
             },
             [VITE_ENVIRONMENTS.server]: {
               consumer: "server",
@@ -105,14 +102,14 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
                 manifest: true,
                 copyPublicDir: false,
                 rollupOptions: {
-                  input: "~/entry-server.tsx"
+                  input: "~/entry-server.tsx",
                 },
                 outDir: "dist/server",
                 commonjsOptions: {
-                  include: [/node_modules/]
-                }
-              }
-            }
+                  include: [/node_modules/],
+                },
+              },
+            },
           },
           resolve: {
             alias: {
@@ -121,17 +118,19 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
               ...(!start.ssr
                 ? {
                     "@solidjs/start/server": "@solidjs/start/server/spa",
-                    "@solidjs/start/client": "@solidjs/start/client/spa"
+                    "@solidjs/start/client": "@solidjs/start/client/spa",
                   }
-                : {})
-            }
+                : {}),
+            },
           },
           define: {
             "import.meta.env.MANIFEST": `globalThis.MANIFEST`,
             "import.meta.env.START_SSR": JSON.stringify(start.ssr),
-            "import.meta.env.START_APP_ENTRY": `"${appEntryPath}"`,
-            "import.meta.env.START_CLIENT_ENTRY": `"${handlers.client}"`,
-            "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay)
+            // Use JSON.stringify so backslashes on Windows are escaped and
+            // esbuild receives a valid JS string literal for the define value
+            "import.meta.env.START_APP_ENTRY": JSON.stringify(appEntryPath),
+            "import.meta.env.START_CLIENT_ENTRY": JSON.stringify(handlers.client),
+            "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
           },
           builder: {
             sharedPlugins: true,
@@ -144,24 +143,24 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
 
               if (!client.isBuilt) await builder.build(client);
               if (!server.isBuilt) await builder.build(server);
-            }
-          }
+            },
+          },
         };
-      }
+      },
     },
     manifest(start),
     fsRoutes({
       routers: {
         client: new SolidStartClientFileRouter({
           dir: absolute(routeDir, root),
-          extensions
+          extensions,
         }),
         ssr: new SolidStartServerFileRouter({
           dir: absolute(routeDir, root),
           extensions,
-          dataOnly: !start.ssr
-        })
-      }
+          dataOnly: !start.ssr,
+        }),
+      },
     }),
     lazy(),
     // Must be placed after fsRoutes, as treeShake will remove the
@@ -176,29 +175,29 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
           envConsumer: "client",
           envName: VITE_ENVIRONMENTS.client,
           getRuntimeCode: () =>
-            `import { createServerReference } from "${normalize(
+            `import { createServerReference } from "${normalizePath(
               fileURLToPath(new URL("../server/server-runtime", import.meta.url))
             )}"`,
-          replacer: opts => `createServerReference('${opts.functionId}')`
+          replacer: opts => `createServerReference('${opts.functionId}')`,
         },
         {
           envConsumer: "server",
           envName: VITE_ENVIRONMENTS.server,
           getRuntimeCode: () =>
-            `import { createServerReference } from '${normalize(
+            `import { createServerReference } from '${normalizePath(
               fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url))
             )}'`,
-          replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`
-        }
+          replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
+        },
       ],
       provider: {
         envName: VITE_ENVIRONMENTS.server,
         getRuntimeCode: () =>
-          `import { createServerReference } from '${normalize(
+          `import { createServerReference } from '${normalizePath(
             fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url))
           )}'`,
-        replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`
-      }
+        replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
+      },
     }),
     {
       name: "solid-start:virtual-modules",
@@ -217,20 +216,20 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
           if (query.size > 0) id += `?${query.toString()}`;
           return id;
         }
-      }
+      },
     },
     {
       name: "solid-start:capture-client-bundle",
       enforce: "post",
       generateBundle(_options, bundle) {
         globalThis.START_CLIENT_BUNDLE = bundle;
-      }
+      },
     },
     devServer(),
     solid({
       ...start.solid,
       ssr: true,
-      extensions: extensions.map(ext => `.${ext}`)
-    })
+      extensions: extensions.map(ext => `.${ext}`),
+    }),
   ];
 }

package/src/config/lazy.ts

@@ -13,12 +13,12 @@ const idTransform = (id: string): PluginItem => {
         path.node.body.unshift(
           t.exportNamedDeclaration(
             t.variableDeclaration("const", [
-              t.variableDeclarator(t.identifier("id$$"), t.stringLiteral(id))
-            ])
-          )
+              t.variableDeclarator(t.identifier("id$$"), t.stringLiteral(id)),
+            ]),
+          ),
         );
-      }
-    }
+      },
+    },
   };
 };
 
@@ -34,13 +34,13 @@ const importTransform = (): PluginItem => {
             path.insertAfter(
               t.importDeclaration(
                 [t.importSpecifier(t.identifier("lazy"), t.identifier("lazy"))],
-                t.stringLiteral("@solidjs/start/server")
-              )
+                t.stringLiteral("@solidjs/start/server"),
+              ),
             );
-          }
+          },
         });
-      }
-    }
+      },
+    },
   };
 };
 
@@ -48,13 +48,43 @@ const fileEndingRegex = /(ts|js)x(\?.*)?$/;
 
 const lazy = (): PluginOption => {
   const cwd = process.cwd().replaceAll(osSep, sep);
+
+  /**
+   * Maps module ids to their client-specific shared chunk names.
+   * Modules in shared chunks need to find their assets via the chunk name, instead of their module id.
+   *
+   * Vite includes assets of such modules in the manifest via the chunk name:
+   * https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L179
+   * https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L319
+   *
+   * Rollup occassionally creates shared chunks automatically,
+   * but they can also be manually created by the user via:
+   * https://rollupjs.org/configuration-options/#output-manualchunks
+   *
+   * More infos on Rollup's logic:
+   * https://github.com/rollup/rollup/issues/3772#issuecomment-689955168
+   */
+  const sharedChunkNames: Record<string, string> = {};
+
   return {
     name: "solid-lazy-css",
     enforce: "pre",
-    applyToEnvironment(env) {
-      return env.name === VITE_ENVIRONMENTS.server;
+    generateBundle(_, bundle) {
+      if (this.environment.name !== VITE_ENVIRONMENTS.client) return;
+
+      for (const chunk of Object.values(bundle)) {
+        if (chunk.type !== "chunk" || !chunk.isDynamicEntry || chunk.facadeModuleId) continue;
+
+        // Has to follow Vites implementation:
+        // https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L179
+        const chunkName = `_${basename(chunk.fileName)}`;
+        for (const id of chunk.moduleIds) {
+          sharedChunkNames[id] = chunkName;
+        }
+      }
     },
     async transform(src, id) {
+      if (this.environment.name !== VITE_ENVIRONMENTS.server) return;
       if (!id.match(fileEndingRegex)) return;
 
       // The transformed files either import "lazy" or css files
@@ -66,7 +96,8 @@ const lazy = (): PluginOption => {
       const hasDefaultExport = src.indexOf("export default") !== -1;
       if (hasDefaultExport) {
         const localId = relative(cwd, id);
-        plugins.push(idTransform(localId));
+        const chunkName = sharedChunkNames[id];
+        plugins.push(idTransform(chunkName ?? localId));
       }
 
       const hasLazy = src.indexOf("lazy(") !== -1;
@@ -79,21 +110,21 @@ const lazy = (): PluginOption => {
       const transformed = await babel.transformAsync(src, {
         plugins,
         parserOpts: {
-          plugins: ["jsx", "typescript"]
+          plugins: ["jsx", "typescript"],
         },
         filename: basename(id),
         ast: false,
         sourceMaps: true,
         configFile: false,
         babelrc: false,
-        sourceFileName: id
+        sourceFileName: id,
       });
 
       if (!transformed?.code) return;
 
       const { code, map } = transformed;
       return { code, map };
-    }
+    },
   };
 };
 

package/src/config/manifest.ts

@@ -3,6 +3,7 @@ import { type PluginOption, type ViteDevServer } from "vite";
 import { findStylesInModuleGraph } from "../server/collect-styles.ts";
 import { VIRTUAL_MODULES } from "./constants.ts";
 import { type SolidStartOptions } from "./index.ts";
+import { wrapId } from "./vite-utils.ts";
 
 export function manifest(start: SolidStartOptions): PluginOption {
   let devServer: ViteDevServer = undefined!;
@@ -17,7 +18,7 @@ export function manifest(start: SolidStartOptions): PluginOption {
         return `\0${VIRTUAL_MODULES.clientViteManifest}`;
       if (id === VIRTUAL_MODULES.getClientManifest)
         return this.resolve(
-          new URL("../server/manifest/client-manifest", import.meta.url).pathname
+          new URL("../server/manifest/client-manifest", import.meta.url).pathname,
         );
       if (id === VIRTUAL_MODULES.getManifest) {
         return this.environment.config.consumer === "client"
@@ -36,11 +37,11 @@ export function manifest(start: SolidStartOptions): PluginOption {
           clientViteManifest = {};
         } else {
           const entry = Object.values(globalThis.START_CLIENT_BUNDLE).find(
-            v => "isEntry" in v && v.isEntry
+            v => "isEntry" in v && v.isEntry,
           );
           if (!entry) throw new Error("No client entry found");
           clientViteManifest = JSON.parse(
-            (globalThis.START_CLIENT_BUNDLE[".vite/manifest.json"] as any).source
+            (globalThis.START_CLIENT_BUNDLE[".vite/manifest.json"] as any).source,
           );
         }
         return `export const clientViteManifest = ${JSON.stringify(clientViteManifest)};`;
@@ -69,16 +70,16 @@ export function manifest(start: SolidStartOptions): PluginOption {
 						tag: "style",
 						attrs: {
 							type: "text/css",
-							"data-vite-dev-id": "${key}",
+							"data-vite-dev-id": "${wrapId(key)}",
 							"data-vite-ref": "0",
 						},
-						children: () => import("${value}?inline").then(mod => mod.default),
-					}`
+						children: () => import("${wrapId(value)}?inline").then(mod => mod.default),
+					}`,
           );
 
           return `export default [${cssAssets.join(",")}]`;
         }
       }
-    }
+    },
   };
 }

package/src/config/vite-utils.ts

@@ -12,6 +12,7 @@ export const FS_PREFIX = `/@fs/`;
 export const VALID_ID_PREFIX = `/@id/`;
 
 export const NULL_BYTE_PLACEHOLDER = `__x00__`;
+const NULL_BYTE_REGEX = /^\0/;
 
 export function normalizeResolvedIdToUrl(
   environment: DevEnvironment,
@@ -52,10 +53,13 @@ export function normalizeResolvedIdToUrl(
   return url;
 }
 
+/**
+ * Inspired by:
+ * https://github.com/withastro/astro/blob/fddde5fad81007795eb263c7fd0cea096b8e2cba/packages/astro/src/core/util.ts#L115
+ * https://github.com/vitejs/vite/blob/130e7181a55c524383c63bbfb1749d0ff7185cad/packages/vite/src/shared/utils.ts#L11
+ */
 export function wrapId(id: string): string {
-  return id.startsWith(VALID_ID_PREFIX)
-    ? id
-    : VALID_ID_PREFIX + id.replace("\0", NULL_BYTE_PLACEHOLDER);
+  return id.replace(NULL_BYTE_REGEX, `${VALID_ID_PREFIX}${NULL_BYTE_PLACEHOLDER}`);
 }
 
 export function unwrapId(id: string): string {
@@ -64,10 +68,7 @@ export function unwrapId(id: string): string {
     : id;
 }
 
-export function normalizeViteImportAnalysisUrl(
-  environment: DevEnvironment,
-  id: string,
-): string {
+export function normalizeViteImportAnalysisUrl(environment: DevEnvironment, id: string): string {
   let url = normalizeResolvedIdToUrl(environment, id, { id });
 
   // https://github.com/vitejs/vite/blob/c18ce868c4d70873406e9f7d1b2d0a03264d2168/packages/vite/src/node/plugins/importAnalysis.ts#L416
@@ -101,8 +102,7 @@ export function slash(p: string): string {
   return p.replace(windowsSlashRE, "/");
 }
 
-const isWindows =
-  typeof process !== "undefined" && process.platform === "win32";
+const isWindows = typeof process !== "undefined" && process.platform === "win32";
 
 export function injectQuery(url: string, queryToInject: string): string {
   const { file, postfix } = splitFileAndPostfix(url);

package/src/env.d.ts

@@ -1,35 +1,17 @@
-// This file is an augmentation to the built-in ImportMeta interface
-// Thus cannot contain any top-level imports
-// <https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation>
-
-/* eslint-disable @typescript-eslint/consistent-type-imports */
-
-declare namespace App {
-	export interface RequestEventLocals {
-		[key: string | symbol]: any;
-	}
-}
+// This file contains global type definitions that are internal to SolidStart and are not exported
 
 declare module "solidstart:server-fn-manifest" {
-	type ServerFn = (...args: Array<any>) => Promise<any>;
-	export function getServerFnById(id: string): Promise<ServerFn>;
+  type ServerFn = (...args: Array<any>) => Promise<any>;
+  export function getServerFnById(id: string): Promise<ServerFn>;
 }
 
-interface ImportMetaEnv
-	extends Record<`VITE_${string}`, any>,
-		SolidStartMetaEnv {
-	BASE_URL: string;
-	MODE: string;
-	DEV: boolean;
-	PROD: boolean;
-	SSR: boolean;
-}
+interface ImportMetaEnv extends SolidStartMetaEnv {}
 
 interface SolidStartMetaEnv {
-	START_SSR: boolean;
-	START_APP_ENTRY: string;
-	START_CLIENT_ENTRY: string;
-	// START_ISLANDS: boolean;
-	// START_DEV_OVERLAY: boolean;
-	// SERVER_BASE_URL: string;
+  START_SSR: boolean;
+  START_APP_ENTRY: string;
+  START_CLIENT_ENTRY: string;
+  START_ISLANDS: boolean;
+  // START_DEV_OVERLAY: boolean;
+  // SERVER_BASE_URL: string;
 }