@solidjs/start 0.6.1 → 0.7.1

package/client/index.tsx

@@ -1,5 +1,3 @@
-// @refresh skip
-// TODO rename to index.tsx?
 import "vinxi/client";
 export { StartClient } from "./StartClient";
 export { mount } from "./mount";

package/config/index.d.ts

@@ -1,19 +1,28 @@
 import type { AppOptions } from "vinxi";
 import type { CustomizableConfig } from "vinxi/dist/types/lib/vite-dev";
+import { InlineConfig } from "vite";
 import type { Options } from "vite-plugin-solid";
 
+// atleast until we sort which server options are good to use
+type ViteCustomizableConfig = CustomizableConfig & {
+  server?: InlineConfig["server"];
+}
+
 type SolidStartInlineConfig = {
   ssr?: boolean;
   solid?: Options;
   extensions?: string[];
   server?: AppOptions["server"];
   appRoot?: string;
+  routeDir?: string;
   middleware?: string;
-  islands?: boolean;
   devOverlay?:  boolean;
+  experimental?: {
+    islands?: boolean;
+  }
   vite?:
-    | CustomizableConfig
-    | ((options: { router: "server" | "client" | "server-function" }) => CustomizableConfig);
+    | ViteCustomizableConfig
+    | ((options: { router: "server" | "client" | "server-function" }) => ViteCustomizableConfig);
 };
 
 export declare function defineConfig(baseConfig?: SolidStartInlineConfig): any;

package/config/index.js

@@ -42,9 +42,12 @@ export function defineConfig(baseConfig = {}) {
   const extensions = [...DEFAULT_EXTENSIONS, ...(start.extensions || [])];
   start = defu(start, {
     appRoot: "./src",
+    routeDir: "./routes",
     ssr: true,
     devOverlay: true,
-    islands: false,
+    experimental: {
+      islands: false
+    },
     solid: {},
     server: {
       experimental: {
@@ -52,6 +55,7 @@ export function defineConfig(baseConfig = {}) {
       }
     }
   });
+  const routeDir = join(start.appRoot, start.routeDir);
   let server = start.server;
   if (!start.ssr) {
     server = { ...server, prerender: { routes: ["/"] } };
@@ -79,11 +83,11 @@ export function defineConfig(baseConfig = {}) {
         name: "ssr",
         type: "http",
         link: {
-          client: start.islands ? undefined : "client"
+          client: start.experimental.islands ? undefined : "client"
         },
         handler: `${start.appRoot}/entry-server${entryExtension}`,
         middleware: start.middleware,
-        routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
+        routes: solidStartServerFsRouter({ dir: routeDir, extensions }),
         extensions,
         target: "server",
         plugins: async () => {
@@ -106,7 +110,7 @@ export function defineConfig(baseConfig = {}) {
             serverTransform({
               runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.ts", import.meta.url)))
             }),
-            start.islands ? serverComponents.server() : null,
+            start.experimental.islands ? serverComponents.server() : null,
             solid({ ...start.solid, ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
             config("app-server", {
               resolve: {
@@ -123,7 +127,7 @@ export function defineConfig(baseConfig = {}) {
               },
               cacheDir: "node_modules/.vinxi/server",
               define: {
-                "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
+                "import.meta.env.START_ISLANDS": JSON.stringify(start.experimental.islands),
                 "import.meta.env.SSR": JSON.stringify(true),
                 "import.meta.env.START_SSR": JSON.stringify(start.ssr),
                 "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
@@ -138,10 +142,10 @@ export function defineConfig(baseConfig = {}) {
         type: "client",
         base: "/_build",
         handler: `${start.appRoot}/entry-client${entryExtension}`,
-        ...(start.islands
+        ...(start.experimental.islands
           ? {}
           : {
-              routes: solidStartClientFsRouter({ dir: `${start.appRoot}/routes`, extensions })
+              routes: solidStartClientFsRouter({ dir: routeDir, extensions })
             }),
         extensions,
         target: "browser",
@@ -165,14 +169,14 @@ export function defineConfig(baseConfig = {}) {
             serverFunctions.client({
               runtime: normalize(fileURLToPath(new URL("./server-runtime.ts", import.meta.url)))
             }),
-            start.islands ? serverComponents.client() : null,
+            start.experimental.islands ? serverComponents.client() : null,
             solid({ ...start.solid, ssr: start.ssr, extensions: extensions.map(ext => `.${ext}`) }),
             config("app-client", {
               resolve: {
                 alias: {
                   "#start/app": join(process.cwd(), start.appRoot, `app${entryExtension}`),
                   "~": join(process.cwd(), start.appRoot),
-                  ...(start.islands
+                  ...(start.experimental.islands
                     ? {
                         "@solidjs/start/client": "@solidjs/start/client/islands"
                       }
@@ -187,7 +191,7 @@ export function defineConfig(baseConfig = {}) {
               },
               cacheDir: "node_modules/.vinxi/client",
               define: {
-                "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
+                "import.meta.env.START_ISLANDS": JSON.stringify(start.experimental.islands),
                 "import.meta.env.SSR": JSON.stringify(false),
                 "import.meta.env.START_SSR": JSON.stringify(start.ssr),
                 "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
@@ -206,7 +210,7 @@ export function defineConfig(baseConfig = {}) {
         handler: normalize(fileURLToPath(new URL("./server-handler.ts", import.meta.url))),
         middleware: start.middleware,
         target: "server",
-        routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
+        routes: solidStartServerFsRouter({ dir: routeDir, extensions }),
         plugins: async () => {
           const userConfig = typeof vite === "function" ? await vite({ router: "server-function" }) : { ...vite };
           const plugins = userConfig.plugins || [];
@@ -243,7 +247,7 @@ export function defineConfig(baseConfig = {}) {
                 }
               },
               define: {
-                "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
+                "import.meta.env.START_ISLANDS": JSON.stringify(start.experimental.islands),
                 "import.meta.env.SSR": JSON.stringify(true),
                 "import.meta.env.START_SSR": JSON.stringify(start.ssr),
                 "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),

package/config/server-components.js

@@ -20,7 +20,7 @@ function client() {
 }
 
 function server() {
-  const runtime = normalize(fileURLToPath(new URL("./server-runtime.jsx", import.meta.url)));
+  const runtime = normalize(fileURLToPath(new URL("./server-runtime.ts", import.meta.url)));
   // export function serverComponents({
   // 	resolve = {
   // 		conditions: ["react-server"],

package/config/server-fns-runtime.ts

@@ -16,6 +16,9 @@ export function createServerReference(fn: Function, id: string, name: string) {
       const ogEvt = getRequestEvent();
       if (!ogEvt) throw new Error("Cannot call server function outside of a request");
       const evt = cloneEvent(ogEvt);
+      evt.locals.serverFunctionMeta = {
+        id: id + "#" + name,
+      };
       evt.serverOnly = true;
       return provideRequestEvent(evt, () => {
         return fn.apply(thisArg, args);

package/config/server-handler.ts

@@ -16,12 +16,11 @@ import {
 import { sharedConfig } from "solid-js";
 import { renderToString } from "solid-js/web";
 import { provideRequestEvent } from "solid-js/web/storage";
-import { eventHandler, setHeader, setResponseStatus, type H3Event } from "vinxi/http";
+import { eventHandler, setHeader, setResponseStatus, type HTTPEvent } from "vinxi/http";
 import invariant from "vinxi/lib/invariant";
 import { cloneEvent, getFetchEvent, mergeResponseHeaders } from "../server/fetchEvent";
 import { createPageEvent } from "../server/pageEvent";
 // @ts-ignore
-import App from "#start/app";
 import { FetchEvent, PageEvent } from "../server";
 
 function createChunk(data: string) {
@@ -64,7 +63,7 @@ function serializeToStream(id: string, value: any) {
   });
 }
 
-async function handleServerFunction(h3Event: H3Event) {
+async function handleServerFunction(h3Event: HTTPEvent) {
   const event = getFetchEvent(h3Event);
   const request = event.request;
 
@@ -72,7 +71,7 @@ async function handleServerFunction(h3Event: H3Event) {
   const instance = request.headers.get("X-Server-Instance");
   const singleFlight = request.headers.has("X-Single-Flight");
   const url = new URL(request.url);
-  let filepath, name;
+  let filepath: string | undefined | null, name: string | undefined | null;
   if (serverReference) {
     invariant(typeof serverReference === "string", "Invalid server function");
     [filepath, name] = serverReference.split("#");
@@ -131,6 +130,9 @@ async function handleServerFunction(h3Event: H3Event) {
     let result = await provideRequestEvent(event, async () => {
       /* @ts-ignore */
       sharedConfig.context = { event };
+      event.locals.serverFunctionMeta = {
+        id: filepath + "#" + name,
+      };
       return serverFunction(...parsed);
     });
 
@@ -142,6 +144,8 @@ async function handleServerFunction(h3Event: H3Event) {
     if (result instanceof Response && instance) {
       // forward headers
       if (result.headers) mergeResponseHeaders(h3Event, result.headers);
+      // forward non-redirect statuses
+      if (result.status && (result.status < 300 || result.status >= 400)) setResponseStatus(h3Event, result.status);
       if ((result as any).customBody) {
         result = await (result as any).customBody();
       } else if (result.body == undefined) result = null;
@@ -181,21 +185,26 @@ async function handleServerFunction(h3Event: H3Event) {
       if (singleFlight && instance) {
         x = await handleSingleFlight(event, x);
       }
-      if ((x as any).status === 302 && !instance) setResponseStatus(h3Event, 302);
       // forward headers
       if ((x as any).headers) mergeResponseHeaders(h3Event, (x as any).headers);
+      // forward non-redirect statuses
+      if ((x as any).status && (!instance || (x as any).status < 300 || (x as any).status >= 400)) setResponseStatus(h3Event, (x as any).status);
       if ((x as any).customBody) {
         x = (x as any).customBody();
       } else if ((x as any).body == undefined) x = null;
-      if (instance) {
-        setHeader(h3Event, "content-type", "text/javascript");
-        return serializeToStream(instance, x);
-      }
+    } else {
+      const error = x instanceof Error ? x.message : typeof x === "string" ? x : "true";
+      setHeader(h3Event, "X-Error", error);
+    }
+    if (instance) {
+      setHeader(h3Event, "content-type", "text/javascript");
+      return serializeToStream(instance, x);
     }
     return x;
   }
 }
 
+let App: any;
 async function handleSingleFlight(sourceEvent: FetchEvent, result: any): Promise<Response> {
   let revalidate: string[];
   let url = new URL(sourceEvent.request.headers.get("referer")!).toString();
@@ -213,6 +222,8 @@ async function handleSingleFlight(sourceEvent: FetchEvent, result: any): Promise
   return await provideRequestEvent(event, async () => {
     await createPageEvent(event);
     /* @ts-ignore */
+    App || (App = (await import("#start/app")).default);
+    /* @ts-ignore */
     event.router.dataOnly = revalidate || true;
     /* @ts-ignore */
     event.router.previousUrl = sourceEvent.request.headers.get("referer");

package/config/server-runtime.ts

@@ -177,12 +177,12 @@ async function fetchServerFunction(
   } else if (contentType && contentType.startsWith("application/json")) {
     result = await response.json();
   } else {
-    result = deserializeStream(instance, response);
+    result = await deserializeStream(instance, response);
   }
-  if (response.ok) {
-    return result;
+  if (response.headers.has("X-Error")) {
+    throw result;
   }
-  throw result;
+  return result;
 }
 
 export function createServerReference(fn: Function, id: string, name: string) {

package/middleware/index.ts

@@ -1,7 +1,7 @@
 import {
-    H3Event,
-    defineMiddleware,
-    sendWebResponse
+  HTTPEvent,
+  defineMiddleware,
+  sendWebResponse
 } from "vinxi/http";
 import { getFetchEvent } from "../server/fetchEvent";
 import type { FetchEvent } from "../server/types";
@@ -23,7 +23,7 @@ export type ResponseMiddleware = (
 ) => Response | Promise<Response> | void | Promise<void>;
 
 function wrapRequestMiddleware(onRequest: RequestMiddleware) {
-  return async (h3Event: H3Event) => {
+  return async (h3Event: HTTPEvent) => {
     const fetchEvent = getFetchEvent(h3Event);
     const response = await onRequest(fetchEvent);
     if (!response) {
@@ -35,7 +35,7 @@ function wrapRequestMiddleware(onRequest: RequestMiddleware) {
 }
 
 function wrapResponseMiddleware(onBeforeResponse: ResponseMiddleware) {
-  return async (h3Event: H3Event, response: ResponseMiddlewareResponseParam) => {
+  return async (h3Event: HTTPEvent, response: ResponseMiddlewareResponseParam) => {
     const fetchEvent = getFetchEvent(h3Event);
     const mwResponse = await onBeforeResponse(fetchEvent, response);
     if (!mwResponse) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "type": "module",
   "author": "Ryan Carniato",
   "license": "MIT",
@@ -11,29 +11,34 @@
     "client",
     "config",
     "middleware",
+    "router",
     "server",
     "shared",
     "*.d.ts"
   ],
-  "types": "./shared/index.tsx",
+  "types": "./shared/index.ts",
   "exports": {
-    ".": "./shared/index.tsx",
+    ".": "./shared/index.ts",
     "./config": "./config/index.js",
     "./middleware": "./middleware/index.ts",
+    "./router": "./router/index.ts",
     "./server": "./server/index.tsx",
     "./server/spa": "./server/spa/index.tsx",
     "./client": "./client/index.tsx",
-    "./client/islands": "./client/islands.tsx",
+    "./client/islands": "./client/islands.ts",
     "./client/spa": "./client/spa/index.tsx"
   },
   "typesVersions": {
     "*": {
       ".": [
-        "./shared/index.tsx"
+        "./shared/index.ts"
       ],
       "middleware": [
         "./middleware/index.ts"
       ],
+      "router": [
+        "./router/index.ts"
+      ],
       "server": [
         "./server/index.tsx"
       ],
@@ -44,12 +49,12 @@
   },
   "devDependencies": {
     "solid-js": "^1.8.15",
-    "vinxi": "^0.3.9"
+    "vinxi": "^0.3.10"
   },
   "dependencies": {
-    "@vinxi/plugin-directives": "^0.3.0",
-    "@vinxi/server-components": "^0.3.0",
-    "@vinxi/server-functions": "^0.3.0",
+    "@vinxi/plugin-directives": "^0.3.1",
+    "@vinxi/server-components": "^0.3.3",
+    "@vinxi/server-functions": "^0.3.2",
     "defu": "^6.1.2",
     "error-stack-parser": "^2.1.4",
     "html-to-image": "^1.11.11",

package/{shared/FileRoutes.tsx → router/FileRoutes.ts}

@@ -30,6 +30,6 @@ export function createRoutes() {
 }
 
 let routes: any[];
-export const FileRoutes = isServer 
+export const FileRoutes = isServer
   ? () => (getRequestEvent() as PageEvent).routes
   : () => routes || (routes = createRoutes());

package/router/index.ts

@@ -0,0 +1 @@
+export { FileRoutes } from "./FileRoutes";

package/{shared/lazyRoute.tsx → router/lazyRoute.ts}

@@ -1,5 +1,3 @@
-// @refresh skip
-// TODO rename to lazyRoute.ts?
 /// <reference types="vinxi/types/client" />
 import { createComponent, lazy, onCleanup, type Component, type JSX } from "solid-js";
 import { appendStyles, cleanupStyles, preloadStyles, updateStyles } from "vinxi/css";

package/{shared → router}/routes.ts

@@ -33,7 +33,7 @@ function defineRoutes(fileRoutes: Route[]) {
     });
 
     if (!parentRoute) {
-      routes.push({ ...route, id, path: id.replace(/\/\([^)/]+\)/g, "") });
+      routes.push({ ...route, id, path: id.replace(/\/\([^)/]+\)/g, "").replace(/\./g, "/") });
       return routes;
     }
     processRoute(

package/server/fetchEvent.ts

@@ -1,6 +1,5 @@
 import {
   H3Event,
-  HTTPEventSymbol,
   appendResponseHeader,
   getRequestIP,
   getResponseHeader,
@@ -11,7 +10,7 @@ import {
   removeResponseHeader,
   setHeader,
   setResponseHeader,
-  setResponseStatus,
+  setResponseStatus
 } from "vinxi/http";
 import type { FetchEvent, ResponseStub } from "./types";
 
@@ -23,15 +22,13 @@ export function createFetchEvent(event: H3Event): FetchEvent {
     response: createResponseStub(event),
     clientAddress: getRequestIP(event),
     locals: {},
-    nativeEvent: event,
-    [HTTPEventSymbol]: event
+    nativeEvent: event
   };
 }
 
 export function cloneEvent<T extends FetchEvent>(fetchEvent: T): T {
   return {
-    ...fetchEvent,
-    [HTTPEventSymbol]: fetchEvent[HTTPEventSymbol]
+    ...fetchEvent
   };
 }
 
@@ -54,7 +51,7 @@ class HeaderProxy {
   constructor(private event: H3Event) {}
   get(key: string) {
     const h = getResponseHeader(this.event, key);
-    return Array.isArray(h) ? h.join(", ") : h;
+    return Array.isArray(h) ? h.join(", ") : (h as string) || null;
   }
   has(key: string) {
     return this.get(key) !== undefined;
@@ -70,24 +67,27 @@ class HeaderProxy {
   }
   getSetCookie() {
     const cookies = getResponseHeader(this.event, "Set-Cookie");
-    return Array.isArray(cookies) ? cookies : [cookies];
+    return Array.isArray(cookies) ? cookies : [cookies as string];
   }
   forEach(fn: (value: string, key: string, object: Headers) => void) {
-    return Object.entries<string | string[]>(getResponseHeaders(this.event)).forEach(([key, value]) => fn(Array.isArray(value) ? value.join(", ") : value, key, this));
+    return Object.entries(getResponseHeaders(this.event)).forEach(([key, value]) =>
+      fn(Array.isArray(value) ? value.join(", ") : (value as string), key, this)
+    );
   }
   entries() {
-    return Object.entries<string | string[]>(getResponseHeaders(this.event)).map(([key, value]) => [
-      key,
-      Array.isArray(value) ? value.join(", ") : value
-    ] as [string, string])[Symbol.iterator]();
+    return Object.entries(getResponseHeaders(this.event))
+      .map(
+        ([key, value]) => [key, Array.isArray(value) ? value.join(", ") : value] as [string, string]
+      )
+      [Symbol.iterator]();
   }
   keys() {
     return Object.keys(getResponseHeaders(this.event))[Symbol.iterator]();
   }
   values() {
-    return Object.values<string | string[]>(getResponseHeaders(this.event)).map((value) =>
-      Array.isArray(value) ? value.join(", ") : value
-    )[Symbol.iterator]();
+    return Object.values(getResponseHeaders(this.event))
+      .map(value => (Array.isArray(value) ? value.join(", ") : (value as string)))
+      [Symbol.iterator]();
   }
   [Symbol.iterator]() {
     return this.entries()[Symbol.iterator]();

package/server/handler.ts

@@ -2,14 +2,13 @@ import { sharedConfig } from "solid-js";
 import { renderToStream, renderToString } from "solid-js/web";
 import { provideRequestEvent } from "solid-js/web/storage";
 import {
-  EventHandlerRequest,
-  H3Event,
   eventHandler,
   sendRedirect,
   setHeader,
-  setResponseStatus
+  setResponseStatus,
+  type HTTPEvent
 } from "vinxi/http";
-import { matchAPIRoute } from "../shared/routes";
+import { matchAPIRoute } from "../router/routes";
 import { getFetchEvent } from "./fetchEvent";
 import { createPageEvent } from "./pageEvent";
 import type { APIEvent, FetchEvent, HandlerOptions, PageEvent } from "./types";
@@ -20,7 +19,7 @@ export function createBaseHandler(
   options: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>) = {}
 ) {
   return eventHandler({
-    handler: (e: H3Event<EventHandlerRequest>) => {
+    handler: (e: HTTPEvent) => {
       const event = getFetchEvent(e);
 
       return provideRequestEvent(event, async () => {
@@ -53,7 +52,7 @@ export function createBaseHandler(
             return fn(context);
           }, options);
           if (context.response && context.response.headers.get("Location")) {
-            return sendRedirect(event, context.response.headers.get("Location")!);
+            return sendRedirect(e, context.response.headers.get("Location")!);
           }
           return html;
         }
@@ -77,7 +76,7 @@ export function createBaseHandler(
           return fn(context);
         }, cloned);
         if (context.response && context.response.headers.get("Location")) {
-          return sendRedirect(event, context.response.headers.get("Location")!);
+          return sendRedirect(e, context.response.headers.get("Location")!);
         }
         if (mode === "async") return stream;
         // fix cloudflare streaming
@@ -89,7 +88,7 @@ export function createBaseHandler(
   });
 }
 
-function handleShellCompleteRedirect(context: PageEvent, e: H3Event<EventHandlerRequest>) {
+function handleShellCompleteRedirect(context: PageEvent, e: HTTPEvent) {
   return () => {
     if (context.response && context.response.headers.get("Location")) {
       setResponseStatus(e, 302);

package/server/index.tsx

@@ -1,6 +1,4 @@
-// @refresh skip
-// TODO rename to index.ts?
 export { StartServer } from "./StartServer";
 export { createHandler } from "./handler";
+export { getServerFunctionMeta } from "./serverFunction";
 export * from "./types";
-

package/server/pageEvent.ts

@@ -2,16 +2,16 @@ import {
   getCookie,
   setCookie
 } from "vinxi/http";
-import { createRoutes } from "../shared/FileRoutes";
+import { createRoutes } from "../router/FileRoutes";
 import { FetchEvent, PageEvent } from "./types";
 
 function initFromFlash(ctx: FetchEvent) {
-  const flash = getCookie(ctx, "flash");
+  const flash = getCookie(ctx.nativeEvent, "flash");
   if (!flash) return;
   let param = JSON.parse(flash);
   if (!param || !param.result) return;
   const input = [...param.input.slice(0, -1), new Map(param.input[param.input.length - 1])];
-  setCookie(ctx, "flash", "", { maxAge: 0 });
+  setCookie(ctx.nativeEvent, "flash", "", { maxAge: 0 });
   return {
     input,
     url: param.url,

package/server/serverFunction.tsx

@@ -0,0 +1,6 @@
+import { getRequestEvent } from "solid-js/web";
+import type { ServerFunctionMeta } from "./types";
+
+export function getServerFunctionMeta(): ServerFunctionMeta | undefined {
+  return getRequestEvent()?.locals.serverFunctionMeta;
+}

package/server/spa/index.tsx

@@ -1,5 +1,3 @@
-// @refresh skip
-// TODO rename to index.ts?
 export * from "../types";
 export { StartServer } from "./StartServer";
 export { createHandler } from "./handler";

package/server/types.ts

@@ -1,6 +1,6 @@
 import type { JSX } from "solid-js";
 import { RequestEvent } from "solid-js/web";
-import { H3Event, HTTPEventSymbol } from "vinxi/http";
+import { HTTPEvent } from "vinxi/http";
 
 // export const FETCH_EVENT = "$FETCH";
 
@@ -47,8 +47,7 @@ export interface FetchEvent {
   response: ResponseStub;
   clientAddress?: string;
   locals: RequestEventLocals;
-  nativeEvent: H3Event;
-  [HTTPEventSymbol]: H3Event;
+  nativeEvent: HTTPEvent;
 }
 export interface RequestEventLocals {
   [key: string | symbol]: any;
@@ -71,6 +70,10 @@ export interface APIHandler {
   (event: APIEvent): Promise<any>;
 }
 
+export interface ServerFunctionMeta {
+  id: string;
+}
+
 declare module "solid-js/web" {
   interface RequestEvent extends FetchEvent {
     serverOnly?: boolean;

package/shared/dev-overlay/CodeView.tsx

@@ -58,11 +58,15 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
     .join('\n')
   ) ,async (value) => {
     const highlighter = await loadHighlighter();
-    const lang = props.fileName
+    const fileExtension = props.fileName
       .split(/[#?]/)[0]!
       .split('.')
       .pop()
-      ?.trim() as BuiltinLanguage;
+      ?.trim();
+    let lang = fileExtension as BuiltinLanguage;
+    if (fileExtension === 'mjs' || fileExtension === 'cjs') {
+      lang = 'js';
+    }
     return highlighter.codeToHtml(value, {
       theme: 'dark-plus',
       lang,

package/shared/{index.tsx → index.ts}

@@ -1,6 +1,3 @@
-// @refresh skip
-// TODO rename to index.ts?
-export { FileRoutes } from "./FileRoutes";
 export { GET } from "./GET";
 export { HttpHeader } from "./HttpHeader";
 export { HttpStatusCode } from "./HttpStatusCode";