@anaemia/bundler 0.3.6 → 0.4.0

package/LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright [2026] [colourlabs]
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,3 +1,3 @@
 # @anaemia/bundler
 
-the Rspack bundler pipelines for the [anaemia](https://github.com/colourlabs/anaemia) SolidJS SSR framework
+the Rspack bundler pipelines for the [anaemia](https://github.com/colourlabs/anaemia) SolidJS SSR framework

package/dist/aliases.js

@@ -1,4 +1,4 @@
-import path from "path";
+import path from "node:path";
 export function getAliases(appRoot) {
     return {
         "~": path.resolve(appRoot, "./src"),

package/dist/env-loader.d.ts

@@ -0,0 +1,2 @@
+export default function loadEnvFiles(appRoot: string, mode: string): void;
+//# sourceMappingURL=env-loader.d.ts.map

package/dist/env-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"env-loader.d.ts","sourceRoot":"","sources":["../src/env-loader.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAOjE"}

package/dist/env-loader.js

@@ -0,0 +1,10 @@
+import { config as loadDotenv } from "dotenv";
+import { expand as expandDotenv } from "dotenv-expand";
+import path from "node:path";
+export default function loadEnvFiles(appRoot, mode) {
+    const files = [`.env`, `.env.local`, `.env.${mode}`, `.env.${mode}.local`];
+    for (const file of files) {
+        const result = loadDotenv({ path: path.resolve(appRoot, file), override: true });
+        expandDotenv(result);
+    }
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Configuration } from "@rspack/core";
+import type { Configuration } from "@rspack/core";
 import type { AnaemiaConfig } from "@anaemia/core/config";
 export declare function getRspackConfig(appRoot: string, config?: AnaemiaConfig): Promise<[Configuration, Configuration]>;
 export { scanRoutes } from "./router/scan.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAU,MAAM,cAAc,CAAC;AAGrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAqB1D,wBAAsB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,GAAE,aAAkB,GAAG,OAAO,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC,CAgJ1H;AAED,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAIlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAsB1D,wBAAsB,eAAe,CACnC,OAAO,EAAE,MAAM,EACf,MAAM,GAAE,aAAkB,GACzB,OAAO,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC,CA4NzC;AAED,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { rspack } from "@rspack/core";
-import path from "path";
+import path from "node:path";
 import fs from "node:fs";
 import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
@@ -11,13 +11,15 @@ import { writeManifest } from "./router/manifest.js";
 import { generateRouterEntry } from "./router/generate-entry.js";
 import { generateServerRoutes } from "./router/generate-server-routes.js";
 import { getAliases } from "./aliases.js";
-import { createStyleRules, createBabelRule } from "./rules.js";
+import { createStyleRules, createBabelRule, createAssetRules } from "./rules.js";
 import { getClientOptimization, getPerformanceProfile } from "./optimization.js";
+import loadEnvFiles from "./env-loader.js";
 const require = createRequire(import.meta.url);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 export async function getRspackConfig(appRoot, config = {}) {
     const isDev = process.env.NODE_ENV !== "production";
+    loadEnvFiles(appRoot, process.env.NODE_ENV || "development");
     const coreRuntimeDir = path.dirname(require.resolve("@anaemia/core/package.json"));
     const runtimeDir = path.resolve(coreRuntimeDir, "./dist/runtime");
     const routes = await scanRoutes(appRoot);
@@ -27,17 +29,49 @@ export async function getRspackConfig(appRoot, config = {}) {
     if (!fs.existsSync(frameworkInternalDir)) {
         fs.mkdirSync(frameworkInternalDir, { recursive: true });
     }
+    // bootstrap config entries and generate necessary files for the router based on the scanned routes
     const entryFile = generateRouterEntry(appRoot, routes);
     const serverRoutesFile = generateServerRoutes(appRoot, serverRoutes);
     const styleRules = createStyleRules(config);
+    const assetRules = createAssetRules(isDev);
+    // allow users to inject additional babel plugins via the config, which is useful for things like macros or other code transforms that need to run at compile time
     const extraClientBabelPlugins = config.plugins?.flatMap((p) => p.babelPlugins?.client ?? []) ?? [];
     const extraServerBabelPlugins = config.plugins?.flatMap((p) => p.babelPlugins?.server ?? []) ?? [];
     const solidRefreshPlugin = [require.resolve("solid-refresh/babel"), { bundler: "rspack-esm", jsx: false }];
+    /**
+     * env processing:
+     *
+     * - we inject some default env vars like MODE, DEV, and PROD for convenience
+     * - for the server, we expose all env vars
+     * - for the client, we only expose vars that start with PUBLIC_, as well as the same defaults
+     * - users can also define additional compile-time constants via config.define.client and config.define.server, which are merged into the rspack DefinePlugin config
+     */
+    const serverEnv = {
+        MODE: JSON.stringify(process.env.NODE_ENV || "development"),
+        DEV: JSON.stringify(isDev),
+        PROD: JSON.stringify(!isDev),
+    };
+    for (const key in process.env) {
+        serverEnv[key] = JSON.stringify(process.env[key]);
+    }
+    const clientEnv = {
+        MODE: JSON.stringify(process.env.NODE_ENV || "development"),
+        DEV: JSON.stringify(isDev),
+        PROD: JSON.stringify(!isDev),
+    };
+    for (const key in process.env) {
+        if (key.startsWith("PUBLIC_")) {
+            clientEnv[key] = JSON.stringify(process.env[key]);
+        }
+    }
+    // shared resolve config
+    // we set up some shared resolve config between client and server here, like extension aliases and path aliases
     const sharedResolve = {
         extensions: [".tsx", ".ts", ".jsx", ".js", ".json", ".scss", ".css"],
         extensionAlias: { ".js": [".ts", ".js"], ".jsx": [".tsx", ".jsx"] },
         alias: { "anaemia-user-app": entryFile, ...getAliases(appRoot) },
     };
+    // client and server configurations
     let clientConfig = {
         name: "client",
         context: appRoot,
@@ -64,7 +98,14 @@ export async function getRspackConfig(appRoot, config = {}) {
                 "solid-refresh": require.resolve("solid-refresh"),
                 [path.resolve(coreRuntimeDir, "./dist/runtime/context.js")]: path.resolve(coreRuntimeDir, "./dist/runtime/context.browser.js"),
             },
-            fallback: { async_hooks: false, "node:async_hooks": false, fs: false, "node:fs": false, path: false, "node:path": false },
+            fallback: {
+                async_hooks: false,
+                "node:async_hooks": false,
+                fs: false,
+                "node:fs": false,
+                path: false,
+                "node:path": false,
+            },
         },
         devServer: isDev
             ? {
@@ -77,10 +118,19 @@ export async function getRspackConfig(appRoot, config = {}) {
             }
             : undefined,
         plugins: [
-            new rspack.HtmlRspackPlugin({ template: path.resolve(appRoot, "./index.html"), filename: "index.html", inject: false }),
+            new rspack.HtmlRspackPlugin({
+                template: path.resolve(appRoot, "./index.html"),
+                filename: "index.html",
+                inject: false,
+            }),
             new rspack.DefinePlugin({
-                __ANAEMIA_RUNTIME_CONFIG__: JSON.stringify({ port: config.port, assets: config.assets, styles: config.styles }),
+                __ANAEMIA_RUNTIME_CONFIG__: JSON.stringify({
+                    port: config.port,
+                    assets: config.assets,
+                    styles: config.styles,
+                }),
                 ...config.define?.client,
+                "import.meta.env": clientEnv,
             }),
             new rspack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
                 resource.request = resource.request.replace(/^node:/, "");
@@ -97,8 +147,13 @@ export async function getRspackConfig(appRoot, config = {}) {
             parser: { "css/auto": { namedExports: false } },
             rules: [
                 styleRules.client,
+                ...assetRules.client,
                 {
-                    ...createBabelRule({ isServer: false, isDev, plugins: [clientServerFnTransform, ...(isDev ? [solidRefreshPlugin] : []), ...extraClientBabelPlugins] }),
+                    ...createBabelRule({
+                        isServer: false,
+                        isDev,
+                        plugins: [clientServerFnTransform, ...(isDev ? [solidRefreshPlugin] : []), ...extraClientBabelPlugins],
+                    }),
                     exclude: (modulePath) => {
                         if (modulePath.includes("@anaemia") && modulePath.includes("core"))
                             return false;
@@ -116,7 +171,13 @@ export async function getRspackConfig(appRoot, config = {}) {
         context: appRoot,
         target: "node",
         entry: { server: path.resolve(runtimeDir, "entry-server.jsx") },
-        output: { path: path.resolve(appRoot, "./dist/server"), filename: "index.js", module: true, chunkFormat: "module", chunkLoading: "import" },
+        output: {
+            path: path.resolve(appRoot, "./dist/server"),
+            filename: "index.js",
+            module: true,
+            chunkFormat: "module",
+            chunkLoading: "import",
+        },
         optimization: { nodeEnv: false },
         resolve: {
             ...sharedResolve,
@@ -130,13 +191,18 @@ export async function getRspackConfig(appRoot, config = {}) {
                 __anaemia_server_routes__: serverRoutesFile,
             },
         },
-        plugins: [new rspack.DefinePlugin({ ...config.define?.server })],
+        plugins: [new rspack.DefinePlugin({ ...config.define?.server, "import.meta.env": serverEnv })],
         module: {
             parser: { "css/auto": { namedExports: false } },
             rules: [
                 styleRules.server,
+                ...assetRules.server,
                 {
-                    ...createBabelRule({ isServer: true, isDev, plugins: [serverHashInjector, ...extraServerBabelPlugins] }),
+                    ...createBabelRule({
+                        isServer: true,
+                        isDev,
+                        plugins: [serverHashInjector, ...extraServerBabelPlugins],
+                    }),
                     exclude: (modulePath) => {
                         if (modulePath.includes("@anaemia") && modulePath.includes("core"))
                             return false;
@@ -148,6 +214,7 @@ export async function getRspackConfig(appRoot, config = {}) {
             ],
         },
     };
+    // allow plugins to modify the client and server configurations before they are returned
     for (const plugin of config.plugins ?? []) {
         if (plugin.clientRspackConfig)
             clientConfig = plugin.clientRspackConfig(clientConfig);

package/dist/optimization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"optimization.d.ts","sourceRoot":"","sources":["../src/optimization.ts"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;uBAkC0wI,CAAC;;;;;EAN9zI;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO;;;;;;;;EAInD"}
+{"version":3,"file":"optimization.d.ts","sourceRoot":"","sources":["../src/optimization.ts"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;uBAgDwhI,CAAC;;;;;EAP5kI;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO;;;;;;;;EAInD"}

package/dist/optimization.js

@@ -1,8 +1,8 @@
 import { rspack } from "@rspack/core";
 export function getClientOptimization(isDev) {
     return {
-        sideEffects: true,
-        usedExports: true,
+        sideEffects: !isDev,
+        usedExports: !isDev,
         splitChunks: isDev
             ? false
             : {
@@ -13,7 +13,7 @@ export function getClientOptimization(isDev) {
                     framework: {
                         chunks: "all",
                         name: "framework",
-                        test: /[\\/]node_modules[\\/](solid-js|@solidjs[\\/]router)[\\/]/,
+                        test: /[\\/]node_modules[\\/](solid-js|@solidjs)[\\/]/,
                         priority: 40,
                         enforce: true,
                     },
@@ -25,7 +25,20 @@ export function getClientOptimization(isDev) {
                     },
                 },
             },
-        minimizer: isDev ? [] : [new rspack.SwcJsMinimizerRspackPlugin()],
+        minimizer: isDev
+            ? []
+            : [
+                new rspack.SwcJsMinimizerRspackPlugin({
+                    minimizerOptions: {
+                        mangle: {
+                            keep_fnames: true,
+                        },
+                        compress: {
+                            keep_fnames: true,
+                        },
+                    },
+                }),
+            ],
     };
 }
 export function getPerformanceProfile(isDev) {

package/dist/plugins/babel-transform-server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"babel-transform-server.d.ts","sourceRoot":"","sources":["../../src/plugins/babel-transform-server.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAY,SAAS,EAAE,UAAU,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,aAAa,CAAC;AAExF,UAAU,WAAY,SAAQ,UAAU;IACtC,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;IAAE,KAAK,EAAE,OAAO,UAAU,CAAA;CAAE,GAAG,SAAS,CAAC,WAAW,CAAC,CA6IlH"}
+{"version":3,"file":"babel-transform-server.d.ts","sourceRoot":"","sources":["../../src/plugins/babel-transform-server.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAY,SAAS,EAAE,UAAU,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,aAAa,CAAC;AAExF,UAAU,WAAY,SAAQ,UAAU;IACtC,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;IAAE,KAAK,EAAE,OAAO,UAAU,CAAA;CAAE,GAAG,SAAS,CAAC,WAAW,CAAC,CA0IlH"}

package/dist/plugins/babel-transform-server.js

@@ -19,14 +19,11 @@ export default function clientServerFnTransform({ types: t }) {
                 if (t.isIdentifier(path.node.callee) && path.node.callee.name === "runOnServer") {
                     state.hasRunOnServer = true;
                     const filename = state.file.opts.filename || "unknown";
-                    const serverFunctionCallback = path.node.arguments[0];
                     const explicitId = path.node.arguments[1];
                     const functionHash = t.isStringLiteral(explicitId)
                         ? explicitId.value
                         : createServerFunctionId(filename, path.node.start);
-                    if (serverFunctionCallback) {
-                        path.get('arguments.0').remove();
-                    }
+                    path.get('arguments.0').remove();
                     // this whole thing is just magic bro
                     // wtf is this ast manipulation
                     path.replaceWith(t.callExpression(t.arrowFunctionExpression([], t.blockStatement([

package/dist/router/generate-entry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-entry.d.ts","sourceRoot":"","sources":["../../src/router/generate-entry.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAiHpD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAqMzF"}
+{"version":3,"file":"generate-entry.d.ts","sourceRoot":"","sources":["../../src/router/generate-entry.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AA0HpD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAqMzF"}

package/dist/router/generate-entry.js

@@ -1,5 +1,5 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import { transform } from "sucrase";
 function buildTree(routes, strippedLayouts, routeIndices, routesDir, allLayouts, parentPrefix) {
     const nodes = [];
@@ -66,7 +66,7 @@ function renderTree(nodes, indent = 6) {
             }
             return `${pad}<Route path="${routePath}" component={Route${node.routeIdx}Wrapped} />`;
         }
-        let layoutPath = node.relativePath;
+        const layoutPath = node.relativePath;
         const inner = renderTree(node.children, indent + 2);
         return [`${pad}<Route path="${layoutPath}" component={Layout${node.layoutIdx}}>`, inner, `${pad}</Route>`].join("\n");
     })

package/dist/router/generate-server-routes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-server-routes.d.ts","sourceRoot":"","sources":["../../src/router/generate-server-routes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,MAAM,CA+BxF"}
+{"version":3,"file":"generate-server-routes.d.ts","sourceRoot":"","sources":["../../src/router/generate-server-routes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAGlD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,MAAM,CAyCxF"}

package/dist/router/generate-server-routes.js

@@ -1,11 +1,14 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
+import { transform } from "sucrase";
 export function generateServerRoutes(appRoot, routes) {
     const outDir = path.resolve(appRoot, "./.anaemia");
-    const outPath = path.resolve(outDir, "./__anaemia_server_routes__.ts");
+    const isTs = fs.existsSync(path.resolve(appRoot, "tsconfig.json"));
+    const ext = isTs ? "ts" : "js";
+    const outPath = path.resolve(outDir, "./__anaemia_server_routes__." + ext);
     const imports = routes.map((r, i) => `import * as ServerRoute${i} from "${r.filePath}";`).join("\n");
     const registrations = routes.map((r, i) => `  registerRoute(app, "${r.urlPattern}", ServerRoute${i});`).join("\n");
-    const code = `
+    const rawCode = `
 // @ts-nocheck
 // auto-generated by anaemia - do not edit!!
 import type { Hono } from "hono";
@@ -25,6 +28,13 @@ export function registerServerRoutes(app: Hono) {
 ${registrations}
 }
 `.trimStart();
-    fs.writeFileSync(outPath, code);
+    const finalCode = isTs
+        ? rawCode
+        : transform(rawCode.replace("// @ts-nocheck\n", ""), {
+            transforms: ["typescript", "jsx"],
+            jsxRuntime: "preserve",
+            production: true,
+        }).code;
+    fs.writeFileSync(outPath, finalCode);
     return outPath;
 }

package/dist/router/manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../../src/router/manifest.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAUpD,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CA6BjF"}
+{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../../src/router/manifest.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAUpD,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAwBjF"}

package/dist/router/manifest.js

@@ -1,5 +1,5 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 export function writeManifest(appRoot, routes) {
     const errors = {};
     for (const route of routes) {

package/dist/router/scan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scan.d.ts","sourceRoot":"","sources":["../../src/router/scan.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;AAezD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB,EAAE,CAYpE;AAUD,wBAAsB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAiE/E"}
+{"version":3,"file":"scan.d.ts","sourceRoot":"","sources":["../../src/router/scan.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;AAezD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB,EAAE,CAgBpE;AAUD,wBAAsB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAiE/E"}

package/dist/router/scan.js

@@ -1,5 +1,5 @@
 import { glob } from "glob";
-import path from "path";
+import path from "node:path";
 import { createJiti } from "jiti";
 import fs from "node:fs";
 import { getAliases } from "../aliases.js";
@@ -14,10 +14,11 @@ const CATCH_ALL_FILE = /^\[\.\.\.(.+?)\]\.(tsx|jsx)$/;
 const DYNAMIC_SEGMENT = /^\[(.+?)\]\.(tsx|jsx)$/;
 export function scanServerRoutes(appRoot) {
     const routesDir = path.resolve(appRoot, "./src/routes");
-    const files = glob.sync("**/_route.{ts,tsx}", { cwd: routesDir, posix: true });
+    const files = glob.sync("**/_route.{ts,tsx,js,jsx}", { cwd: routesDir, posix: true });
     return files.map((file) => {
         const dir = path.dirname(file);
-        const urlPattern = dir === "." ? "/" : `/${dir}`;
+        const normalizedDir = dir.replace(/\[\.\.\.(.+?)\]/g, "*").replace(/\[(.+?)\]/g, ":$1");
+        const urlPattern = normalizedDir === "." ? "/" : `/${normalizedDir}`;
         return {
             urlPattern,
             filePath: path.resolve(routesDir, file),
@@ -44,7 +45,7 @@ export async function scanRoutes(appRoot) {
             let layoutGuards = [];
             try {
                 const layoutModule = (await jiti.import(resolveConfigPath(absolutePath)));
-                if (layoutModule?.config?.guards) {
+                if (layoutModule.config?.guards) {
                     layoutGuards = layoutModule.config.guards;
                 }
             }
@@ -70,7 +71,7 @@ export async function scanRoutes(appRoot) {
         let pageGuards = [];
         try {
             const pageModule = (await jiti.import(resolveConfigPath(absolutePagePath)));
-            if (pageModule?.config?.guards) {
+            if (pageModule.config?.guards) {
                 pageGuards = pageModule.config.guards;
             }
         }
@@ -145,6 +146,7 @@ function parseFilePath(file) {
 function resolveLayoutChain(dir, layoutMap) {
     const layouts = [];
     let current = dir;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     while (true) {
         const layoutEntry = layoutMap.get(current);
         if (layoutEntry)

package/dist/rules.d.ts

@@ -1,5 +1,6 @@
 import type { AnaemiaConfig } from "@anaemia/core";
-import { PluginItem } from "@babel/core";
+import type { PluginItem } from "@babel/core";
+import type { RuleSetRule } from "@rspack/core";
 export declare function createStyleRules(config: AnaemiaConfig): {
     client: {
         test: RegExp;
@@ -10,6 +11,11 @@ export declare function createStyleRules(config: AnaemiaConfig): {
                 api: string;
             };
         }[];
+        parser: {
+            cssModules: {
+                localIdentName: string;
+            };
+        } | undefined;
     };
     server: {
         test: RegExp;
@@ -25,6 +31,11 @@ export declare function createStyleRules(config: AnaemiaConfig): {
                 api: string;
             };
         }[];
+        parser: {
+            cssModules: {
+                localIdentName: string;
+            };
+        } | undefined;
     };
 };
 export declare function createBabelRule({ isServer, isDev, plugins, }: {
@@ -45,4 +56,8 @@ export declare function createBabelRule({ isServer, isDev, plugins, }: {
         };
     }[];
 };
+export declare function createAssetRules(isDev: boolean): {
+    client: RuleSetRule[];
+    server: RuleSetRule[];
+};
 //# sourceMappingURL=rules.d.ts.map

package/dist/rules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../src/rules.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIzC,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBrD;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,OAAY,GACb,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;CACxB;;;;;;;;;;;;;EAkBA"}
+{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../src/rules.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAIhD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBrD;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,OAAY,GACb,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;CACxB;;;;;;;;;;;;;EAkBA;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO;;;EAsC9C"}

package/dist/rules.js

@@ -4,21 +4,21 @@ export function createStyleRules(config) {
     const useSass = config.styles?.sass !== false;
     const useModules = config.styles?.modules ?? true;
     const baseLoaders = useSass ? [{ loader: require.resolve("sass-loader"), options: { api: "modern" } }] : [];
+    const localIdentName = config.styles?.modulesLocalIdentName ?? "[name]__[local]__[hash:base64:5]";
+    const cssParser = useModules ? { cssModules: { localIdentName } } : undefined;
     return {
         client: {
             test: /\.(c|sc|sa)ss$/,
             type: useModules ? "css/auto" : "css",
             use: baseLoaders,
+            parser: cssParser,
         },
         server: {
             test: /\.(c|sc|sa)ss$/,
             type: useModules ? "css/auto" : "css",
-            generator: {
-                css: {
-                    exportOnlyLocals: true,
-                },
-            },
+            generator: { css: { exportOnlyLocals: true } },
             use: baseLoaders,
+            parser: cssParser,
         },
     };
 }
@@ -40,3 +40,35 @@ export function createBabelRule({ isServer, isDev, plugins = [], }) {
         ],
     };
 }
+export function createAssetRules(isDev) {
+    const filename = isDev ? "assets/[name][ext]" : "assets/[name].[contenthash:8][ext]";
+    const sharedRawRule = {
+        test: /\.(png|jpe?g|gif|webp|avif|ico|svg|json)$/i,
+        resourceQuery: /raw/,
+        type: "asset/source",
+    };
+    const sharedUrlRule = {
+        test: /\.(png|jpe?g|gif|webp|avif|ico|svg)$/i,
+        resourceQuery: /url/,
+        type: "asset/resource",
+        generator: { filename },
+    };
+    const sharedInlineRule = {
+        test: /\.(png|jpe?g|gif|webp|avif|ico|svg)$/i,
+        resourceQuery: /inline/,
+        type: "asset/inline",
+    };
+    const sharedAssetRules = [sharedRawRule, sharedUrlRule, sharedInlineRule];
+    const clientRules = [
+        ...sharedAssetRules,
+        { test: /\.(png|jpe?g|gif|webp|avif|ico)$/i, type: "asset/resource", generator: { filename } },
+        { test: /\.svg$/i, type: "asset", parser: { dataUrlCondition: { maxSize: 8192 } }, generator: { filename } },
+        { test: /\.json$/i, type: "json" },
+    ];
+    const serverRules = [
+        ...sharedAssetRules,
+        { test: /\.(png|jpe?g|gif|webp|avif|ico|svg)$/i, type: "asset/source" },
+        { test: /\.json$/i, type: "json" },
+    ];
+    return { client: clientRules, server: serverRules };
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@anaemia/bundler",
-  "version": "0.3.6",
+  "version": "0.4.0",
+  "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -11,12 +11,14 @@
     }
   },
   "dependencies": {
-    "@anaemia/core": "^0.3.6",
+    "@anaemia/core": "^0.4.0",
     "@babel/core": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
     "@rspack/core": "^2.0.5",
     "babel-loader": "^10.1.1",
     "babel-preset-solid": "^1.9.12",
+    "dotenv": "^17.4.2",
+    "dotenv-expand": "^13.0.0",
     "glob": "^13.0.6",
     "jiti": "^2.7.0",
     "sass": "^1.100.0",

package/src/aliases.ts

@@ -1,4 +1,4 @@
-import path from "path";
+import path from "node:path";
 
 export function getAliases(appRoot: string) {
   return {
@@ -8,4 +8,4 @@ export function getAliases(appRoot: string) {
     "@features": path.resolve(appRoot, "./src/features"),
     "@routes": path.resolve(appRoot, "./src/routes"),
   };
-}
+}

package/src/env-loader.ts

@@ -0,0 +1,13 @@
+import { config as loadDotenv } from "dotenv";
+import { expand as expandDotenv } from "dotenv-expand";
+
+import path from "node:path";
+
+export default function loadEnvFiles(appRoot: string, mode: string) {
+  const files = [`.env`, `.env.local`, `.env.${mode}`, `.env.${mode}.local`];
+
+  for (const file of files) {
+    const result = loadDotenv({ path: path.resolve(appRoot, file), override: true });
+    expandDotenv(result);
+  }
+}

package/src/index.ts

@@ -1,5 +1,6 @@
-import { Configuration, rspack } from "@rspack/core";
-import path from "path";
+import type { Configuration } from "@rspack/core";
+import { rspack } from "@rspack/core";
+import path from "node:path";
 import fs from "node:fs";
 import type { AnaemiaConfig } from "@anaemia/core/config";
 import { createRequire } from "node:module";
@@ -15,15 +16,21 @@ import { generateRouterEntry } from "./router/generate-entry.js";
 import { generateServerRoutes } from "./router/generate-server-routes.js";
 import { getAliases } from "./aliases.js";
 
-import { createStyleRules, createBabelRule } from "./rules.js";
+import { createStyleRules, createBabelRule, createAssetRules } from "./rules.js";
 import { getClientOptimization, getPerformanceProfile } from "./optimization.js";
+import loadEnvFiles from "./env-loader.js";
 
 const require = createRequire(import.meta.url);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {}): Promise<[Configuration, Configuration]> {
+export async function getRspackConfig(
+  appRoot: string,
+  config: AnaemiaConfig = {},
+): Promise<[Configuration, Configuration]> {
   const isDev = process.env.NODE_ENV !== "production";
+  loadEnvFiles(appRoot, process.env.NODE_ENV || "development");
+
   const coreRuntimeDir = path.dirname(require.resolve("@anaemia/core/package.json"));
   const runtimeDir = path.resolve(coreRuntimeDir, "./dist/runtime");
 
@@ -36,19 +43,57 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
     fs.mkdirSync(frameworkInternalDir, { recursive: true });
   }
 
+  // bootstrap config entries and generate necessary files for the router based on the scanned routes
   const entryFile = generateRouterEntry(appRoot, routes);
   const serverRoutesFile = generateServerRoutes(appRoot, serverRoutes);
+
   const styleRules = createStyleRules(config);
+  const assetRules = createAssetRules(isDev);
+
+  // allow users to inject additional babel plugins via the config, which is useful for things like macros or other code transforms that need to run at compile time
   const extraClientBabelPlugins = config.plugins?.flatMap((p) => p.babelPlugins?.client ?? []) ?? [];
   const extraServerBabelPlugins = config.plugins?.flatMap((p) => p.babelPlugins?.server ?? []) ?? [];
   const solidRefreshPlugin = [require.resolve("solid-refresh/babel"), { bundler: "rspack-esm", jsx: false }];
 
+  /**
+   * env processing:
+   *
+   * - we inject some default env vars like MODE, DEV, and PROD for convenience
+   * - for the server, we expose all env vars
+   * - for the client, we only expose vars that start with PUBLIC_, as well as the same defaults
+   * - users can also define additional compile-time constants via config.define.client and config.define.server, which are merged into the rspack DefinePlugin config
+   */
+  const serverEnv: Record<string, string> = {
+    MODE: JSON.stringify(process.env.NODE_ENV || "development"),
+    DEV: JSON.stringify(isDev),
+    PROD: JSON.stringify(!isDev),
+  };
+
+  for (const key in process.env) {
+    serverEnv[key] = JSON.stringify(process.env[key]);
+  }
+
+  const clientEnv: Record<string, string> = {
+    MODE: JSON.stringify(process.env.NODE_ENV || "development"),
+    DEV: JSON.stringify(isDev),
+    PROD: JSON.stringify(!isDev),
+  };
+
+  for (const key in process.env) {
+    if (key.startsWith("PUBLIC_")) {
+      clientEnv[key] = JSON.stringify(process.env[key]);
+    }
+  }
+
+  // shared resolve config
+  // we set up some shared resolve config between client and server here, like extension aliases and path aliases
   const sharedResolve = {
     extensions: [".tsx", ".ts", ".jsx", ".js", ".json", ".scss", ".css"],
     extensionAlias: { ".js": [".ts", ".js"], ".jsx": [".tsx", ".jsx"] },
     alias: { "anaemia-user-app": entryFile, ...getAliases(appRoot) },
   };
 
+  // client and server configurations
   let clientConfig: Configuration = {
     name: "client",
     context: appRoot,
@@ -73,9 +118,19 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
       alias: {
         ...sharedResolve.alias,
         "solid-refresh": require.resolve("solid-refresh"),
-        [path.resolve(coreRuntimeDir, "./dist/runtime/context.js")]: path.resolve(coreRuntimeDir, "./dist/runtime/context.browser.js"),
+        [path.resolve(coreRuntimeDir, "./dist/runtime/context.js")]: path.resolve(
+          coreRuntimeDir,
+          "./dist/runtime/context.browser.js",
+        ),
+      },
+      fallback: {
+        async_hooks: false,
+        "node:async_hooks": false,
+        fs: false,
+        "node:fs": false,
+        path: false,
+        "node:path": false,
       },
-      fallback: { async_hooks: false, "node:async_hooks": false, fs: false, "node:fs": false, path: false, "node:path": false },
     },
     devServer: isDev
       ? {
@@ -88,10 +143,19 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
         }
       : undefined,
     plugins: [
-      new rspack.HtmlRspackPlugin({ template: path.resolve(appRoot, "./index.html"), filename: "index.html", inject: false }),
+      new rspack.HtmlRspackPlugin({
+        template: path.resolve(appRoot, "./index.html"),
+        filename: "index.html",
+        inject: false,
+      }),
       new rspack.DefinePlugin({
-        __ANAEMIA_RUNTIME_CONFIG__: JSON.stringify({ port: config.port, assets: config.assets, styles: config.styles }),
+        __ANAEMIA_RUNTIME_CONFIG__: JSON.stringify({
+          port: config.port,
+          assets: config.assets,
+          styles: config.styles,
+        }),
         ...config.define?.client,
+        "import.meta.env": clientEnv,
       }),
       new rspack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
         resource.request = resource.request.replace(/^node:/, "");
@@ -103,7 +167,7 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
           if (fs.existsSync(srcPath)) return srcPath;
 
           return path.resolve(__dirname, "../src/runtime/empty-module.cjs");
-        })()
+        })(),
       ),
       new AnaemiaManifestHydrationPlugin({ appRoot }),
     ],
@@ -111,8 +175,13 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
       parser: { "css/auto": { namedExports: false } },
       rules: [
         styleRules.client,
+        ...assetRules.client,
         {
-          ...createBabelRule({ isServer: false, isDev, plugins: [clientServerFnTransform, ...(isDev ? [solidRefreshPlugin] : []), ...extraClientBabelPlugins] }),
+          ...createBabelRule({
+            isServer: false,
+            isDev,
+            plugins: [clientServerFnTransform, ...(isDev ? [solidRefreshPlugin] : []), ...extraClientBabelPlugins],
+          }),
           exclude: (modulePath: string) => {
             if (modulePath.includes("@anaemia") && modulePath.includes("core")) return false;
             if (modulePath.includes("@solidjs") && modulePath.includes("router")) return false;
@@ -129,7 +198,13 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
     context: appRoot,
     target: "node",
     entry: { server: path.resolve(runtimeDir, "entry-server.jsx") },
-    output: { path: path.resolve(appRoot, "./dist/server"), filename: "index.js", module: true, chunkFormat: "module", chunkLoading: "import" },
+    output: {
+      path: path.resolve(appRoot, "./dist/server"),
+      filename: "index.js",
+      module: true,
+      chunkFormat: "module",
+      chunkLoading: "import",
+    },
     optimization: { nodeEnv: false },
     resolve: {
       ...sharedResolve,
@@ -143,13 +218,18 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
         __anaemia_server_routes__: serverRoutesFile,
       },
     },
-    plugins: [new rspack.DefinePlugin({ ...config.define?.server })],
+    plugins: [new rspack.DefinePlugin({ ...config.define?.server, "import.meta.env": serverEnv })],
     module: {
       parser: { "css/auto": { namedExports: false } },
       rules: [
         styleRules.server,
+        ...assetRules.server,
         {
-          ...createBabelRule({ isServer: true, isDev, plugins: [serverHashInjector, ...extraServerBabelPlugins] }),
+          ...createBabelRule({
+            isServer: true,
+            isDev,
+            plugins: [serverHashInjector, ...extraServerBabelPlugins],
+          }),
           exclude: (modulePath: string) => {
             if (modulePath.includes("@anaemia") && modulePath.includes("core")) return false;
             if (modulePath.includes("@solidjs") && modulePath.includes("router")) return false;
@@ -160,6 +240,7 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
     },
   };
 
+  // allow plugins to modify the client and server configurations before they are returned
   for (const plugin of config.plugins ?? []) {
     if (plugin.clientRspackConfig) clientConfig = plugin.clientRspackConfig(clientConfig);
     if (plugin.serverRspackConfig) serverConfig = plugin.serverRspackConfig(serverConfig);

package/src/optimization.ts

@@ -2,8 +2,8 @@ import { rspack } from "@rspack/core";
 
 export function getClientOptimization(isDev: boolean) {
   return {
-    sideEffects: true,
-    usedExports: true,
+    sideEffects: !isDev,
+    usedExports: !isDev,
     splitChunks: isDev
       ? (false as const)
       : ({
@@ -14,7 +14,7 @@ export function getClientOptimization(isDev: boolean) {
             framework: {
               chunks: "all" as const,
               name: "framework",
-              test: /[\\/]node_modules[\\/](solid-js|@solidjs[\\/]router)[\\/]/,
+              test: /[\\/]node_modules[\\/](solid-js|@solidjs)[\\/]/,
               priority: 40,
               enforce: true,
             },
@@ -26,7 +26,20 @@ export function getClientOptimization(isDev: boolean) {
             },
           },
         } as const),
-    minimizer: isDev ? [] : [new rspack.SwcJsMinimizerRspackPlugin()],
+    minimizer: isDev
+      ? []
+      : [
+          new rspack.SwcJsMinimizerRspackPlugin({
+            minimizerOptions: {
+              mangle: {
+                keep_fnames: true,
+              },
+              compress: {
+                keep_fnames: true,
+              },
+            },
+          }),
+        ],
   };
 }
 
@@ -34,4 +47,4 @@ export function getPerformanceProfile(isDev: boolean) {
   return isDev
     ? { hints: false as const, maxAssetSize: 1000000, maxEntrypointSize: 1000000 }
     : { hints: "warning" as const, maxAssetSize: 307200, maxEntrypointSize: 512000 };
-}
+}

package/src/plugins/babel-transform-server.ts

@@ -28,16 +28,13 @@ export default function clientServerFnTransform({ types: t }: { types: typeof Ba
           state.hasRunOnServer = true;
           const filename = state.file.opts.filename || "unknown";
 
-          const serverFunctionCallback = path.node.arguments[0];
           const explicitId = path.node.arguments[1];
 
           const functionHash = t.isStringLiteral(explicitId)
             ? explicitId.value
             : createServerFunctionId(filename, path.node.start);
 
-          if (serverFunctionCallback) {
-            path.get('arguments.0').remove();
-          }
+          path.get('arguments.0').remove();
 
           // this whole thing is just magic bro
           // wtf is this ast manipulation

package/src/plugins/rspack-manifest-hydration.ts

@@ -32,11 +32,11 @@ export class AnaemiaManifestHydrationPlugin implements RspackPluginInstance {
           const files = Array.from(chunk.files);
 
           const jsFiles = files.filter(
-            (f) => f.endsWith(".js") && !f.includes(".hot-update.") && !f.endsWith(".js.map")
+            (f) => f.endsWith(".js") && !f.includes(".hot-update.") && !f.endsWith(".js.map"),
           );
 
           const cssFiles = files.filter(
-            (f) => f.endsWith(".css") && !f.includes(".hot-update.") && !f.endsWith(".css.map")
+            (f) => f.endsWith(".css") && !f.includes(".hot-update.") && !f.endsWith(".css.map"),
           );
 
           if (jsFiles.length > 0 || cssFiles.length > 0) {
@@ -54,4 +54,4 @@ export class AnaemiaManifestHydrationPlugin implements RspackPluginInstance {
       }
     });
   }
-}
+}

package/src/router/generate-entry.ts

@@ -1,5 +1,5 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import type { RouteManifestEntry } from "./scan.js";
 import { transform } from "sucrase";
 
@@ -21,7 +21,14 @@ type PageNode = {
 
 type TreeNode = LayoutNode | PageNode;
 
-function buildTree(routes: RouteManifestEntry[], strippedLayouts: string[][], routeIndices: number[], routesDir: string, allLayouts: Map<string, number>, parentPrefix: string): TreeNode[] {
+function buildTree(
+  routes: RouteManifestEntry[],
+  strippedLayouts: string[][],
+  routeIndices: number[],
+  routesDir: string,
+  allLayouts: Map<string, number>,
+  parentPrefix: string,
+): TreeNode[] {
   const nodes: TreeNode[] = [];
   const leafIndices = strippedLayouts.map((l, i) => (l.length === 0 ? i : -1)).filter((i) => i !== -1);
 
@@ -94,10 +101,12 @@ function renderTree(nodes: TreeNode[], indent = 6): string {
         return `${pad}<Route path="${routePath}" component={Route${node.routeIdx}Wrapped} />`;
       }
 
-      let layoutPath = node.relativePath;
+      const layoutPath = node.relativePath;
       const inner = renderTree(node.children, indent + 2);
 
-      return [`${pad}<Route path="${layoutPath}" component={Layout${node.layoutIdx}}>`, inner, `${pad}</Route>`].join("\n");
+      return [`${pad}<Route path="${layoutPath}" component={Layout${node.layoutIdx}}>`, inner, `${pad}</Route>`].join(
+        "\n",
+      );
     })
     .join("\n");
 }
@@ -193,7 +202,7 @@ const Route${i}Wrapped = (props) => (
     conventionalRoutes.map((_, i) => i),
     routesDir,
     allLayouts,
-    "/"
+    "/",
   );
 
   let routeJsx = renderTree(tree, 6);

package/src/router/generate-server-routes.ts

@@ -1,16 +1,19 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import type { ServerRouteEntry } from "./scan.js";
+import { transform } from "sucrase";
 
 export function generateServerRoutes(appRoot: string, routes: ServerRouteEntry[]): string {
   const outDir = path.resolve(appRoot, "./.anaemia");
-  const outPath = path.resolve(outDir, "./__anaemia_server_routes__.ts");
+  const isTs = fs.existsSync(path.resolve(appRoot, "tsconfig.json"));
+  const ext = isTs ? "ts" : "js";
+  const outPath = path.resolve(outDir, "./__anaemia_server_routes__." + ext);
 
   const imports = routes.map((r, i) => `import * as ServerRoute${i} from "${r.filePath}";`).join("\n");
 
   const registrations = routes.map((r, i) => `  registerRoute(app, "${r.urlPattern}", ServerRoute${i});`).join("\n");
 
-  const code = `
+  const rawCode = `
 // @ts-nocheck
 // auto-generated by anaemia - do not edit!!
 import type { Hono } from "hono";
@@ -31,6 +34,14 @@ ${registrations}
 }
 `.trimStart();
 
-  fs.writeFileSync(outPath, code);
+  const finalCode = isTs
+    ? rawCode
+    : transform(rawCode.replace("// @ts-nocheck\n", ""), {
+        transforms: ["typescript", "jsx"],
+        jsxRuntime: "preserve",
+        production: true,
+      }).code;
+
+  fs.writeFileSync(outPath, finalCode);
   return outPath;
 }

package/src/router/manifest.ts

@@ -1,5 +1,5 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import type { RouteManifestEntry } from "./scan.js";
 
 interface BuildManifest {
@@ -22,9 +22,7 @@ export function writeManifest(appRoot: string, routes: RouteManifestEntry[]): vo
     }
   }
 
-  const conventionalRoutes = routes.filter(
-    (r) => !r.filePath.endsWith("404.tsx") && !r.filePath.endsWith("500.tsx")
-  );
+  const conventionalRoutes = routes.filter((r) => !r.filePath.endsWith("404.tsx") && !r.filePath.endsWith("500.tsx"));
 
   const manifest: BuildManifest = {
     routes: conventionalRoutes,
@@ -35,8 +33,5 @@ export function writeManifest(appRoot: string, routes: RouteManifestEntry[]): vo
 
   const outDir = path.resolve(appRoot, "./dist");
   fs.mkdirSync(outDir, { recursive: true });
-  fs.writeFileSync(
-    path.resolve(outDir, "route-manifest.json"),
-    JSON.stringify(manifest, null, 2)
-  );
-}
+  fs.writeFileSync(path.resolve(outDir, "route-manifest.json"), JSON.stringify(manifest, null, 2));
+}

package/src/router/scan.ts

@@ -1,5 +1,5 @@
 import { glob } from "glob";
-import path from "path";
+import path from "node:path";
 import { createJiti } from "jiti";
 import fs from "node:fs";
 import { getAliases } from "../aliases.js";
@@ -50,11 +50,15 @@ const DYNAMIC_SEGMENT = /^\[(.+?)\]\.(tsx|jsx)$/;
 
 export function scanServerRoutes(appRoot: string): ServerRouteEntry[] {
   const routesDir = path.resolve(appRoot, "./src/routes");
-  const files = glob.sync("**/_route.{ts,tsx}", { cwd: routesDir, posix: true });
+  const files = glob.sync("**/_route.{ts,tsx,js,jsx}", { cwd: routesDir, posix: true });
 
   return files.map((file) => {
     const dir = path.dirname(file);
-    const urlPattern = dir === "." ? "/" : `/${dir}`;
+
+    const normalizedDir = dir.replace(/\[\.\.\.(.+?)\]/g, "*").replace(/\[(.+?)\]/g, ":$1");
+
+    const urlPattern = normalizedDir === "." ? "/" : `/${normalizedDir}`;
+
     return {
       urlPattern,
       filePath: path.resolve(routesDir, file),
@@ -86,7 +90,7 @@ export async function scanRoutes(appRoot: string): Promise<RouteManifestEntry[]>
 
       try {
         const layoutModule = (await jiti.import(resolveConfigPath(absolutePath))) as RouteModule;
-        if (layoutModule?.config?.guards) {
+        if (layoutModule.config?.guards) {
           layoutGuards = layoutModule.config.guards;
         }
       } catch {
@@ -116,7 +120,7 @@ export async function scanRoutes(appRoot: string): Promise<RouteManifestEntry[]>
 
     try {
       const pageModule = (await jiti.import(resolveConfigPath(absolutePagePath))) as RouteModule;
-      if (pageModule?.config?.guards) {
+      if (pageModule.config?.guards) {
         pageGuards = pageModule.config.guards;
       }
     } catch {
@@ -201,6 +205,7 @@ function resolveLayoutChain(dir: string, layoutMap: Map<string, LayoutManifestEn
   const layouts: LayoutManifestEntry[] = [];
   let current = dir;
 
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   while (true) {
     const layoutEntry = layoutMap.get(current);
     if (layoutEntry) layouts.unshift(layoutEntry);
@@ -209,4 +214,4 @@ function resolveLayoutChain(dir: string, layoutMap: Map<string, LayoutManifestEn
   }
 
   return layouts;
-}
+}

package/src/rules.ts

@@ -1,30 +1,30 @@
 import { createRequire } from "node:module";
 import type { AnaemiaConfig } from "@anaemia/core";
-import { PluginItem } from "@babel/core";
+import type { PluginItem } from "@babel/core";
+import type { RuleSetRule } from "@rspack/core";
 
 const require = createRequire(import.meta.url);
 
 export function createStyleRules(config: AnaemiaConfig) {
   const useSass = config.styles?.sass !== false;
   const useModules = config.styles?.modules ?? true;
-
   const baseLoaders = useSass ? [{ loader: require.resolve("sass-loader"), options: { api: "modern" } }] : [];
+  const localIdentName = config.styles?.modulesLocalIdentName ?? "[name]__[local]__[hash:base64:5]";
+  const cssParser = useModules ? { cssModules: { localIdentName } } : undefined;
 
   return {
     client: {
       test: /\.(c|sc|sa)ss$/,
       type: useModules ? "css/auto" : ("css" as const),
       use: baseLoaders,
+      parser: cssParser,
     },
     server: {
       test: /\.(c|sc|sa)ss$/,
       type: useModules ? "css/auto" : ("css" as const),
-      generator: {
-        css: {
-          exportOnlyLocals: true,
-        },
-      },
+      generator: { css: { exportOnlyLocals: true } },
       use: baseLoaders,
+      parser: cssParser,
     },
   };
 }
@@ -55,4 +55,44 @@ export function createBabelRule({
       },
     ],
   };
-}
+}
+
+export function createAssetRules(isDev: boolean) {
+  const filename = isDev ? "assets/[name][ext]" : "assets/[name].[contenthash:8][ext]";
+
+  const sharedRawRule: RuleSetRule = {
+    test: /\.(png|jpe?g|gif|webp|avif|ico|svg|json)$/i,
+    resourceQuery: /raw/,
+    type: "asset/source",
+  };
+
+  const sharedUrlRule: RuleSetRule = {
+    test: /\.(png|jpe?g|gif|webp|avif|ico|svg)$/i,
+    resourceQuery: /url/,
+    type: "asset/resource",
+    generator: { filename },
+  };
+
+  const sharedInlineRule: RuleSetRule = {
+    test: /\.(png|jpe?g|gif|webp|avif|ico|svg)$/i,
+    resourceQuery: /inline/,
+    type: "asset/inline",
+  };
+
+  const sharedAssetRules: RuleSetRule[] = [sharedRawRule, sharedUrlRule, sharedInlineRule];
+
+  const clientRules: RuleSetRule[] = [
+    ...sharedAssetRules,
+    { test: /\.(png|jpe?g|gif|webp|avif|ico)$/i, type: "asset/resource", generator: { filename } },
+    { test: /\.svg$/i, type: "asset", parser: { dataUrlCondition: { maxSize: 8192 } }, generator: { filename } },
+    { test: /\.json$/i, type: "json" },
+  ];
+
+  const serverRules: RuleSetRule[] = [
+    ...sharedAssetRules,
+    { test: /\.(png|jpe?g|gif|webp|avif|ico|svg)$/i, type: "asset/source" },
+    { test: /\.json$/i, type: "json" },
+  ];
+
+  return { client: clientRules, server: serverRules };
+}

package/test/rspack-config.test.mjs

@@ -9,7 +9,10 @@ async function createTmpProject(isTs = true) {
   const dir = fs.mkdtempSync(path.join(os.tmpdir(), "anaemia-bundler-test-"));
 
   fs.mkdirSync(path.join(dir, "src/routes"), { recursive: true });
-  fs.writeFileSync(path.join(dir, "src/routes/index.tsx"), `export default function Index() { return <div>hello</div>; }`);
+  fs.writeFileSync(
+    path.join(dir, "src/routes/index.tsx"),
+    `export default function Index() { return <div>hello</div>; }`,
+  );
   fs.writeFileSync(path.join(dir, "index.html"), `<html><body><div anaemia-entry></div></body></html>`);
 
   if (isTs) {
@@ -106,4 +109,4 @@ test("server config aliases point to dist not src", async () => {
   } finally {
     fs.rmSync(dir, { recursive: true, force: true });
   }
-});
+});

package/test/server-functions.test.mjs

@@ -15,12 +15,14 @@ const source = `
 `;
 
 function transform(plugin) {
-  return transformSync(source, {
-    filename,
-    plugins: [plugin],
-    configFile: false,
-    babelrc: false,
-  })?.code ?? "";
+  return (
+    transformSync(source, {
+      filename,
+      plugins: [plugin],
+      configFile: false,
+      babelrc: false,
+    })?.code ?? ""
+  );
 }
 
 test("client and server transforms generate the same server function id", () => {
@@ -42,36 +44,37 @@ test("client transform forwards call arguments to the RPC wrapper", () => {
 });
 
 test("client transform preserves explicit server function ids", () => {
-  const code = transformSync(
-    `
+  const code =
+    transformSync(
+      `
       import { runOnServer } from "@anaemia/core";
       export const ping = runOnServer(async () => "pong", "custom-id");
     `,
-    {
-      filename,
-      plugins: [clientServerFnTransform],
-      configFile: false,
-      babelrc: false,
-    }
-  )?.code ?? "";
+      {
+        filename,
+        plugins: [clientServerFnTransform],
+        configFile: false,
+        babelrc: false,
+      },
+    )?.code ?? "";
 
   assert.match(code, /\$\$executeClientRpc\("custom-id"\)/);
 });
 
 test("should guarantee server-side logic never leaks to client assets", async () => {
   const clientAssetDir = path.resolve(process.cwd(), "dist/client/assets");
-  
+
   if (!fs.existsSync(clientAssetDir)) return;
 
-  const files = fs.readdirSync(clientAssetDir).filter(f => f.endsWith(".js"));
+  const files = fs.readdirSync(clientAssetDir).filter((f) => f.endsWith(".js"));
 
   for (const file of files) {
     const content = fs.readFileSync(path.join(clientAssetDir, file), "utf-8");
-    
+
     assert.equal(
-      content.includes("SELECT * FROM users"), 
-      false, 
-      `CRITICAL SECURITY LEAK: server logic found inside client asset: ${file}`
+      content.includes("SELECT * FROM users"),
+      false,
+      `CRITICAL SECURITY LEAK: server logic found inside client asset: ${file}`,
     );
   }
-});
+});

package/tsconfig.json

@@ -10,4 +10,4 @@
     "paths": {}
   },
   "include": ["src/**/*"]
-}
+}