@bouygues-telecom/staticjs 0.1.15 → 1.0.1

package/_build/helpers/cachePages.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Load styles cache for a given project directory
+ * @param projectDir - The template directory path (e.g., "templates/react")
+ * @returns The styles cache object mapping page names to their style file paths
+ */
+export declare const loadStylesCache: (projectDir: string) => {
+    [key: string]: string[];
+};
 /**
  * Load cache entries with error handling and auto-generation
  * @param projectDir - The template directory path (e.g., "templates/react")

package/_build/helpers/cachePages.js

@@ -2,6 +2,7 @@ import fs from "fs";
 import path from "path";
 import { readPages } from "./readPages.js";
 import { CONFIG } from "../server/config/index.js";
+import { findStyleFiles } from "./styleDiscovery.js";
 const generateExcludedFiles = (entries) => {
     const excludedFiles = [];
     Object.entries(entries).forEach(([name, path]) => {
@@ -26,6 +27,33 @@ const generateExcludedFiles = (entries) => {
         throw error; // Re-throw to handle it in the caller
     }
 };
+/**
+ * Generate styles cache for all pages
+ * Maps each page name to its collected style files (from root layout to page)
+ */
+const generateStylesCache = (entries, projectDir) => {
+    const stylesCache = {};
+    const rootDir = path.resolve(projectDir, "src");
+    Object.entries(entries).forEach(([pageName, pagePath]) => {
+        const styleFiles = findStyleFiles(pagePath, rootDir);
+        if (styleFiles.length > 0) {
+            stylesCache[pageName] = styleFiles;
+        }
+    });
+    try {
+        const cacheDir = path.resolve(projectDir, CONFIG.BUILD_DIR, "cache");
+        const stylesCachePath = path.resolve(cacheDir, "stylesCache.json");
+        if (!fs.existsSync(cacheDir)) {
+            fs.mkdirSync(cacheDir, { recursive: true });
+        }
+        fs.writeFileSync(stylesCachePath, JSON.stringify(stylesCache, null, 2), "utf8");
+    }
+    catch (error) {
+        console.error("Error generating styles cache:", error);
+        throw error;
+    }
+    return stylesCache;
+};
 /**
  * Generate cache entries for a given template directory
  * @param projectDir - The template directory path (e.g., "templates/react")
@@ -56,12 +84,30 @@ const generateCacheEntries = (projectDir, verbose = false) => {
     // Write cache file
     fs.writeFileSync(cacheFilePath, JSON.stringify(entries, null, 2), "utf8");
     generateExcludedFiles(entries);
+    generateStylesCache(entries, projectDir);
     if (verbose) {
         console.log(`   Generated cache file: ${cacheFilePath}`);
         console.log(`   Found ${Object.keys(entries).length} page(s)\n`);
     }
     return entries;
 };
+/**
+ * Load styles cache for a given project directory
+ * @param projectDir - The template directory path (e.g., "templates/react")
+ * @returns The styles cache object mapping page names to their style file paths
+ */
+export const loadStylesCache = (projectDir) => {
+    const stylesCachePath = path.resolve(projectDir, CONFIG.BUILD_DIR, "cache/stylesCache.json");
+    try {
+        if (fs.existsSync(stylesCachePath)) {
+            return JSON.parse(fs.readFileSync(stylesCachePath, 'utf8'));
+        }
+    }
+    catch (error) {
+        // Styles cache doesn't exist or is invalid, return empty object
+    }
+    return {};
+};
 /**
  * Load cache entries with error handling and auto-generation
  * @param projectDir - The template directory path (e.g., "templates/react")

package/_build/helpers/createPage.d.ts

@@ -11,8 +11,9 @@ interface IcreatePage {
     rootId: string;
     pageName: string;
     JSfileName: string | false;
+    CSSfileName?: string | false;
     returnHtml?: boolean;
     pageData?: any;
 }
-export declare const createPage: ({ data, AppComponent, PageComponent, initialDatasId, rootId, pageName, JSfileName, returnHtml, pageData, }: IcreatePage) => Promise<string | void>;
+export declare const createPage: ({ data, AppComponent, PageComponent, initialDatasId, rootId, pageName, JSfileName, CSSfileName, returnHtml, pageData, }: IcreatePage) => Promise<string | void>;
 export {};

package/_build/helpers/createPage.js

@@ -3,10 +3,12 @@ import path from "path";
 import React from "react";
 import ReactDOMServer from "react-dom/server";
 import { CONFIG } from "../server/config/index.js";
-export const createPage = async ({ data, AppComponent, PageComponent, initialDatasId, rootId, pageName, JSfileName, returnHtml = false, // Default to false for backward compatibility
+export const createPage = async ({ data, AppComponent, PageComponent, initialDatasId, rootId, pageName, JSfileName, CSSfileName = false, // Default to false for backward compatibility
+returnHtml = false, // Default to false for backward compatibility
 pageData = {}, // Default to empty object
  }) => {
     const template = `{{html}}
+${CSSfileName ? `<link rel="stylesheet" href="{{stylePath}}">` : ""}
 ${data ? `<script id=initial-data-{{initialDatasId}} type="application/json">${JSON.stringify(data)}</script>` : ""}
 ${JSfileName ? `<script type="module" src="{{scriptPath}}"></script>` : ""}
 `;
@@ -19,10 +21,15 @@ ${JSfileName ? `<script type="module" src="{{scriptPath}}"></script>` : ""}
         props: { data },
         pageData, // Pass pageData to AppComponent
     });
+    // Use JSfileName for script path if it's a string (for dynamic routes), otherwise use pageName
+    const scriptPath = typeof JSfileName === 'string' ? `/${JSfileName}.js` : `/${pageName}.js`;
+    // Use CSSfileName for style path if it's a string, otherwise use pageName
+    const stylePath = typeof CSSfileName === 'string' ? `/${CSSfileName}.css` : `/${pageName}.css`;
     const htmlContent = template
         .replace("{{initialDatasId}}", initialDatasId)
         .replace("{{html}}", ReactDOMServer.renderToString(component))
-        .replace("{{scriptPath}}", `/${pageName}.js`);
+        .replace("{{scriptPath}}", scriptPath)
+        .replace("{{stylePath}}", stylePath);
     // Return HTML string for runtime rendering or write to file for build time
     if (returnHtml) {
         return htmlContent;

package/_build/helpers/renderPageRuntime.js

@@ -1,4 +1,3 @@
-process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
 import fs from "fs/promises";
 import crypto from "node:crypto";
 import path from "path";
@@ -7,6 +6,7 @@ import { createPage } from "./createPage.js";
 import { readPages } from "./readPages.js";
 import { CONFIG } from "../server/config/index.js";
 import { findClosestLayout } from "./layoutDiscovery.js";
+import { hasStyles } from "./styleDiscovery.js";
 const rootDir = path.resolve(process.cwd(), "./src");
 async function loadJson(filePath) {
     try {
@@ -163,8 +163,9 @@ async function processPageRuntime(page, excludedJSFiles, params = {}) {
             throw new Error(`Failed to import PageComponent from ${page.pageName}.tsx`);
         }
         // Handle getStaticProps with or without dynamic params
+        const isDynamicRoute = Object.keys(params).length > 0;
         if (getStaticProps) {
-            if (Object.keys(params).length > 0) {
+            if (isDynamicRoute) {
                 // Dynamic route with params
                 const { props } = await getStaticProps({ params });
                 data = props.data;
@@ -175,6 +176,15 @@ async function processPageRuntime(page, excludedJSFiles, params = {}) {
                 data = props.data;
             }
         }
+        // Determine JS file path: for dynamic routes, use parent path (e.g., partials/dynamic/1 -> partials/dynamic)
+        const jsFilePath = isDynamicRoute
+            ? page.pageName.replace(/\/[^/]+$/, '')
+            : page.pageName;
+        // Check if this page has styles (from page or layouts)
+        const pageHasStyles = hasStyles(absolutePath, rootDir);
+        const cssFilePath = pageHasStyles
+            ? (isDynamicRoute ? page.pageName.replace(/\/[^/]+$/, '') : page.pageName)
+            : false;
         // Generate HTML using createPage helper with returnHtml flag
         // Use dynamic import to load createPage from the template directory
         let htmlContent;
@@ -189,7 +199,8 @@ async function processPageRuntime(page, excludedJSFiles, params = {}) {
                 initialDatasId,
                 rootId,
                 pageName: page.pageName,
-                JSfileName: injectJS && fileName,
+                JSfileName: injectJS && jsFilePath,
+                CSSfileName: cssFilePath,
                 returnHtml: true,
             });
         }
@@ -202,7 +213,8 @@ async function processPageRuntime(page, excludedJSFiles, params = {}) {
                 initialDatasId,
                 rootId,
                 pageName: page.pageName,
-                JSfileName: injectJS && fileName,
+                JSfileName: injectJS && jsFilePath,
+                CSSfileName: cssFilePath,
                 returnHtml: true,
             });
         }

package/_build/helpers/styleDiscovery.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Discovers all style files (style.scss or style.css) by walking up the directory tree
+ * from the given page path. Returns files in order from root to page for proper CSS cascade.
+ */
+export declare function findStyleFiles(pagePath: string, rootDir: string): string[];
+/**
+ * Checks if a page has any styles (either direct or inherited from layouts)
+ */
+export declare function hasStyles(pagePath: string, rootDir: string): boolean;
+/**
+ * Gets style files as relative paths for use in Vite entries
+ */
+export declare function getStyleFilesRelative(pagePath: string, rootDir: string, projectRoot: string): string[];

package/_build/helpers/styleDiscovery.js

@@ -0,0 +1,61 @@
+import fs from "fs";
+import path from "path";
+/**
+ * Discovers all style files (style.scss or style.css) by walking up the directory tree
+ * from the given page path. Returns files in order from root to page for proper CSS cascade.
+ */
+export function findStyleFiles(pagePath, rootDir) {
+    const styleFiles = [];
+    // Get the directory containing the page
+    const pageDir = path.dirname(pagePath);
+    // Collect all directories from root to page
+    const directories = [];
+    let currentDir = pageDir;
+    while (currentDir.startsWith(rootDir) || currentDir === rootDir) {
+        directories.unshift(currentDir); // Add to beginning for root-first order
+        const parentDir = path.dirname(currentDir);
+        if (parentDir === currentDir)
+            break; // Reached filesystem root
+        currentDir = parentDir;
+    }
+    // Also check the root src directory itself
+    if (!directories.includes(rootDir)) {
+        directories.unshift(rootDir);
+    }
+    // Check each directory for style files
+    for (const dir of directories) {
+        const styleFile = findStyleFileInDir(dir);
+        if (styleFile) {
+            styleFiles.push(styleFile);
+        }
+    }
+    return styleFiles;
+}
+/**
+ * Finds a style file in a directory, preferring .scss over .css
+ */
+function findStyleFileInDir(dir) {
+    const scssPath = path.join(dir, "style.scss");
+    const cssPath = path.join(dir, "style.css");
+    // Prefer .scss over .css
+    if (fs.existsSync(scssPath)) {
+        return scssPath;
+    }
+    if (fs.existsSync(cssPath)) {
+        return cssPath;
+    }
+    return null;
+}
+/**
+ * Checks if a page has any styles (either direct or inherited from layouts)
+ */
+export function hasStyles(pagePath, rootDir) {
+    return findStyleFiles(pagePath, rootDir).length > 0;
+}
+/**
+ * Gets style files as relative paths for use in Vite entries
+ */
+export function getStyleFilesRelative(pagePath, rootDir, projectRoot) {
+    const absolutePaths = findStyleFiles(pagePath, rootDir);
+    return absolutePaths.map(p => path.relative(projectRoot, p));
+}

package/_build/scripts/build-css.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Build CSS for all pages with styles
+ */
+declare function buildCss(): Promise<void>;
+export { buildCss };

package/_build/scripts/build-css.js

@@ -0,0 +1,79 @@
+import fs from "fs/promises";
+import fsSync from "fs";
+import path from "path";
+import { CONFIG } from "../server/config/index.js";
+import { loadStylesCache, loadCacheEntries } from "../helpers/cachePages.js";
+/**
+ * Compile a single SCSS/CSS file using Vite's internal sass handling
+ * Falls back to concatenating raw CSS if sass is not available
+ */
+async function compileScss(filePath) {
+    try {
+        // Try to use sass for SCSS compilation
+        const sass = await import("sass");
+        const result = sass.compile(filePath, {
+            loadPaths: [path.resolve(CONFIG.PROJECT_ROOT, "src")],
+            style: "compressed",
+        });
+        return result.css;
+    }
+    catch (error) {
+        // If sass import fails or file is .css, read and return raw content
+        if (filePath.endsWith(".css")) {
+            return await fs.readFile(filePath, "utf-8");
+        }
+        // Re-throw SCSS compilation errors
+        if (error.message && !error.message.includes("Cannot find module")) {
+            throw error;
+        }
+        // If sass is not installed, try reading as raw CSS
+        console.warn("sass package not found, reading file as raw CSS");
+        return await fs.readFile(filePath, "utf-8");
+    }
+}
+/**
+ * Build CSS for all pages with styles
+ */
+async function buildCss() {
+    // Ensure cache is generated
+    loadCacheEntries(CONFIG.PROJECT_ROOT);
+    const stylesCache = loadStylesCache(CONFIG.PROJECT_ROOT);
+    const pagesWithStyles = Object.keys(stylesCache);
+    if (pagesWithStyles.length === 0) {
+        console.log("No style files found, skipping CSS build.");
+        return;
+    }
+    console.log(`\nBuilding CSS for ${pagesWithStyles.length} page(s)...`);
+    for (const pageName of pagesWithStyles) {
+        const styleFiles = stylesCache[pageName];
+        try {
+            // Compile all style files and concatenate
+            const compiledStyles = [];
+            for (const styleFile of styleFiles) {
+                const compiled = await compileScss(styleFile);
+                compiledStyles.push(`/* Source: ${path.basename(styleFile)} */\n${compiled}`);
+            }
+            const finalCss = compiledStyles.join("\n\n");
+            // Determine output path (handle dynamic routes)
+            const outputName = pageName.replace(/\/\[[^\]]+\]$/, "");
+            const outputPath = path.join(CONFIG.PROJECT_ROOT, CONFIG.BUILD_DIR, `${outputName}.css`);
+            // Create directories if needed
+            const outputDir = path.dirname(outputPath);
+            if (!fsSync.existsSync(outputDir)) {
+                fsSync.mkdirSync(outputDir, { recursive: true });
+            }
+            // Write compiled CSS
+            await fs.writeFile(outputPath, finalCss, "utf-8");
+            console.log(`✓ ${outputName}.css`);
+        }
+        catch (error) {
+            console.error(`Error building CSS for ${pageName}:`, error);
+        }
+    }
+}
+// Run if executed directly
+const isMainModule = import.meta.url === `file://${process.argv[1]}`;
+if (isMainModule) {
+    buildCss().catch(console.error);
+}
+export { buildCss };

package/_build/scripts/build-html.js

@@ -4,9 +4,8 @@ import path from "path";
 import React from "react";
 import { createPage } from "../helpers/createPage.js";
 import { CONFIG } from "../server/config/index.js";
-import { loadCacheEntries } from "../helpers/cachePages.js";
+import { loadCacheEntries, loadStylesCache } from "../helpers/cachePages.js";
 import { findClosestLayout } from "../helpers/layoutDiscovery.js";
-process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
 async function loadJson(filePath) {
     const data = await fs.readFile(filePath, "utf-8");
     return JSON.parse(data);
@@ -15,6 +14,7 @@ async function main() {
     loadCacheEntries(CONFIG.PROJECT_ROOT);
     const excludedJSFiles = await loadJson(path.join(CONFIG.PROJECT_ROOT, CONFIG.BUILD_DIR, "cache/excludedFiles.json"));
     const files = await loadJson(path.join(CONFIG.PROJECT_ROOT, CONFIG.BUILD_DIR, "cache/pagesCache.json"));
+    const stylesCache = loadStylesCache(CONFIG.PROJECT_ROOT);
     const processPage = async (page) => {
         try {
             let data;
@@ -57,6 +57,7 @@ async function main() {
             const getStaticProps = pageModule?.getStaticProps;
             const getStaticPaths = pageModule?.getStaticPaths;
             const injectJS = !excludedJSFiles.includes(page.pageName);
+            const hasStyles = stylesCache[page.pageName] && stylesCache[page.pageName].length > 0;
             const rootId = crypto
                 .createHash("sha256")
                 .update(`app-${absolutePath}`)
@@ -83,7 +84,10 @@ async function main() {
                             if (slug) {
                                 const { props } = await getStaticProps(param);
                                 const pageName = page.pageName.replace(/\[.*?\]/, slug);
-                                const JSfileName = injectJS && fileName.replace(/\[(.*?)\]/g, "_$1_");
+                                // For dynamic routes, JS file is at parent level (e.g., partials/dynamic.js)
+                                const JSfileName = injectJS && page.pageName.replace(/\/\[[^\]]+\]$/, '');
+                                // For dynamic routes, CSS file is at parent level like JS
+                                const CSSfileName = hasStyles && page.pageName.replace(/\/\[[^\]]+\]$/, '');
                                 createPage({
                                     data: props.data,
                                     AppComponent,
@@ -92,6 +96,7 @@ async function main() {
                                     rootId,
                                     pageName,
                                     JSfileName: JSfileName,
+                                    CSSfileName: CSSfileName,
                                     pageData,
                                 });
                                 console.log(`✓ ${pageName}.html`);
@@ -119,7 +124,8 @@ async function main() {
                     initialDatasId,
                     rootId,
                     pageName: page.pageName,
-                    JSfileName: injectJS && fileName,
+                    JSfileName: injectJS && page.pageName,
+                    CSSfileName: hasStyles && page.pageName,
                     pageData,
                 });
                 console.log(`✓ ${page.pageName}.html`);

package/_build/scripts/cli.js

@@ -45,14 +45,21 @@ program
             stdio: 'inherit',
             cwd: projectRoot
         });
-        console.log("\n2️⃣ Building assets with Vite...");
+        console.log("\n2️⃣ Building CSS from SCSS...");
+        const buildCssScript = path.join(libDir, 'scripts', 'build-css.js');
+        const cssBuildCommand = `npx tsx "${buildCssScript}"`;
+        execSync(cssBuildCommand, {
+            stdio: 'inherit',
+            cwd: projectRoot
+        });
+        console.log("\n3️⃣ Building assets with Vite...");
         const viteConfigPath = path.join(libDir, 'server', 'config', 'vite.config.js');
         const viteBuildCommand = `npx vite build --config "${viteConfigPath}"`;
         execSync(viteBuildCommand, {
             stdio: 'inherit',
             cwd: projectRoot
         });
-        console.log("\n3️⃣ Cleanup...");
+        console.log("\n4️⃣ Cleanup...");
         const cacheDir = path.join(projectRoot, '_build', 'cache');
         if (fs.existsSync(cacheDir)) {
             const cleanupCommand = process.platform === 'win32'

package/_build/server/config/index.d.ts

@@ -8,6 +8,8 @@ export interface ServerConfig {
     RATE_LIMIT_WINDOW: number;
     RATE_LIMIT_MAX: number;
     REVALIDATE_RATE_LIMIT_MAX: number;
+    REVALIDATE_API_KEY: string;
+    CORS_ORIGINS: string[];
     CACHE_MAX_AGE: number;
     HOT_RELOAD_ENABLED: boolean;
     WEBSOCKET_ENABLED: boolean;
@@ -15,6 +17,7 @@ export interface ServerConfig {
     WEBSOCKET_PATH: string;
     FILE_WATCH_DEBOUNCE: number;
 }
+export declare const DEFAULT_CONFIG: ServerConfig;
 export declare const CONFIG: ServerConfig;
 export declare const isDevelopment: boolean;
 export declare const isProduction: boolean;

package/_build/server/config/index.js

@@ -3,7 +3,31 @@
  * Centralized configuration for the StaticJS React template server
  */
 import * as path from "node:path";
-export const CONFIG = {
+import * as fs from "node:fs";
+/**
+ * Type validators for each config key
+ * Keys in this object define the whitelist of allowed configuration keys
+ */
+const CONFIG_VALIDATORS = {
+    PORT: (v) => typeof v === 'number' && v > 0 && v <= 65535,
+    NODE_ENV: (v) => typeof v === 'string' && ['development', 'production', 'test'].includes(v),
+    PROJECT_ROOT: (v) => typeof v === 'string' && v.length > 0 && v.length < 1024,
+    BUILD_DIR: (v) => typeof v === 'string' && /^[a-zA-Z0-9_-]+$/.test(v) && v.length < 64,
+    REQUEST_TIMEOUT: (v) => typeof v === 'number' && v > 0 && v <= 300000,
+    BODY_SIZE_LIMIT: (v) => typeof v === 'string' && /^\d+(kb|mb|gb)?$/i.test(v),
+    RATE_LIMIT_WINDOW: (v) => typeof v === 'number' && v > 0 && v <= 86400000,
+    RATE_LIMIT_MAX: (v) => typeof v === 'number' && v > 0 && v <= 10000,
+    REVALIDATE_RATE_LIMIT_MAX: (v) => typeof v === 'number' && v > 0 && v <= 1000,
+    REVALIDATE_API_KEY: (v) => typeof v === 'string' && v.length >= 16 && v.length <= 256,
+    CORS_ORIGINS: (v) => Array.isArray(v) && v.every((o) => typeof o === 'string' && /^https?:\/\/[a-zA-Z0-9.-]+(:\d+)?$/.test(o)),
+    CACHE_MAX_AGE: (v) => typeof v === 'number' && v >= 0 && v <= 31536000,
+    HOT_RELOAD_ENABLED: (v) => typeof v === 'boolean',
+    WEBSOCKET_ENABLED: (v) => typeof v === 'boolean',
+    FILE_WATCHING_ENABLED: (v) => typeof v === 'boolean',
+    WEBSOCKET_PATH: (v) => typeof v === 'string' && /^\/[a-zA-Z0-9_-]*$/.test(v),
+    FILE_WATCH_DEBOUNCE: (v) => typeof v === 'number' && v >= 0 && v <= 10000,
+};
+export const DEFAULT_CONFIG = {
     PORT: Number(process.env.PORT) || 3456,
     NODE_ENV: process.env.NODE_ENV || 'development',
     PROJECT_ROOT: path.resolve(process.cwd()),
@@ -13,6 +37,8 @@ export const CONFIG = {
     RATE_LIMIT_WINDOW: 15 * 60 * 1000, // 15 minutes
     RATE_LIMIT_MAX: 100, // requests per window
     REVALIDATE_RATE_LIMIT_MAX: 10, // stricter limit for revalidate endpoint
+    REVALIDATE_API_KEY: process.env.REVALIDATE_API_KEY || '', // API key for revalidate endpoint (required in production)
+    CORS_ORIGINS: process.env.CORS_ORIGINS?.split(',').filter(Boolean) || [], // Allowed CORS origins (empty = same-origin only in prod, localhost in dev)
     CACHE_MAX_AGE: process.env.NODE_ENV === 'production' ? 86400 : 0, // 1 day in prod, no cache in dev
     // Hot reload configuration
     HOT_RELOAD_ENABLED: process.env.NODE_ENV === 'development',
@@ -21,5 +47,86 @@ export const CONFIG = {
     WEBSOCKET_PATH: '/ws',
     FILE_WATCH_DEBOUNCE: 300, // milliseconds
 };
+/**
+ * Validate and sanitize user configuration
+ * Only allows whitelisted keys with valid types
+ */
+const validateUserConfig = (rawConfig) => {
+    if (typeof rawConfig !== 'object' || rawConfig === null) {
+        console.warn('[Config] Invalid config format: expected object');
+        return {};
+    }
+    const validatedConfig = {};
+    const configObj = rawConfig;
+    for (const [key, value] of Object.entries(configObj)) {
+        // Check if key is allowed (exists in validators)
+        if (!(key in CONFIG_VALIDATORS)) {
+            console.warn(`[Config] Ignoring unknown config key: ${key}`);
+            continue;
+        }
+        const typedKey = key;
+        const validator = CONFIG_VALIDATORS[typedKey];
+        // Validate value type
+        if (!validator(value)) {
+            console.warn(`[Config] Invalid value for ${key}: ${JSON.stringify(value)}`);
+            continue;
+        }
+        // Type assertion is safe here because we validated the value
+        validatedConfig[key] = value;
+    }
+    return validatedConfig;
+};
+/**
+ * Load user configuration from static.config.ts in the project root
+ * Validates all loaded values against a strict schema
+ */
+const loadUserConfig = async () => {
+    const projectRoot = path.resolve(process.cwd());
+    const configPath = path.join(projectRoot, 'static.config.ts');
+    if (!fs.existsSync(configPath)) {
+        return {};
+    }
+    try {
+        const imported = await import(configPath);
+        const rawConfig = imported.default || imported.CONFIG || {};
+        // Validate and sanitize the loaded configuration
+        const validatedConfig = validateUserConfig(rawConfig);
+        if (Object.keys(validatedConfig).length > 0) {
+            console.log('[Config] Loaded user configuration from static.config.ts');
+        }
+        return validatedConfig;
+    }
+    catch (error) {
+        console.warn(`[Config] Failed to load static.config.ts: ${error.message}`);
+        return {};
+    }
+};
+/**
+ * Merge default config with user config
+ */
+const mergeConfigs = (defaults, userConfig) => {
+    const merged = {
+        ...defaults,
+        ...userConfig,
+    };
+    // Recalculate derived values based on merged NODE_ENV if not explicitly set
+    const nodeEnv = merged.NODE_ENV;
+    if (userConfig.CACHE_MAX_AGE === undefined) {
+        merged.CACHE_MAX_AGE = nodeEnv === 'production' ? 86400 : 0;
+    }
+    if (userConfig.HOT_RELOAD_ENABLED === undefined) {
+        merged.HOT_RELOAD_ENABLED = nodeEnv === 'development';
+    }
+    if (userConfig.WEBSOCKET_ENABLED === undefined) {
+        merged.WEBSOCKET_ENABLED = nodeEnv === 'development';
+    }
+    if (userConfig.FILE_WATCHING_ENABLED === undefined) {
+        merged.FILE_WATCHING_ENABLED = nodeEnv === 'development';
+    }
+    return merged;
+};
+// Load user config and merge with defaults using top-level await
+const userConfig = await loadUserConfig();
+export const CONFIG = mergeConfigs(DEFAULT_CONFIG, userConfig);
 export const isDevelopment = CONFIG.NODE_ENV === 'development';
 export const isProduction = CONFIG.NODE_ENV === 'production';

package/_build/server/config/vite.config.js

@@ -5,6 +5,12 @@ import { loadCacheEntries } from "../../helpers/cachePages.js";
 import { CONFIG } from "./index";
 // Load cache entries using the refactored helper function
 const entries = loadCacheEntries(CONFIG.PROJECT_ROOT);
+// Sanitize entry keys for Rollup: strip dynamic segments [param] and use parent folder name
+// e.g., "partials/dynamic/[id]" -> "partials/dynamic"
+const sanitizedEntries = Object.fromEntries(Object.entries(entries).map(([key, value]) => [
+    key.replace(/\/\[[^\]]+\]$/, ''),
+    value
+]));
 export default defineConfig(({ mode }) => {
     // Load environment variables from .env files
     // const env = loadEnv(mode, CONFIG.PROJECT_ROOT, '');
@@ -15,11 +21,22 @@ export default defineConfig(({ mode }) => {
                 "@": path.resolve(CONFIG.PROJECT_ROOT, "src")
             },
         },
+        css: {
+            // Enable CSS source maps for development
+            devSourcemap: true,
+            preprocessorOptions: {
+                scss: {
+                    // Use modern API and allow importing from src directory
+                    api: "modern-compiler",
+                    loadPaths: [path.resolve(CONFIG.PROJECT_ROOT, "src")],
+                },
+            },
+        },
         build: {
             outDir: path.resolve(CONFIG.PROJECT_ROOT, CONFIG.BUILD_DIR),
             emptyOutDir: false,
             rollupOptions: {
-                input: entries,
+                input: sanitizedEntries,
                 output: {
                     entryFileNames: "[name].js",
                     chunkFileNames: "assets/vendor-[hash].js",

package/_build/server/index.d.ts

@@ -13,7 +13,7 @@ export declare const createApp: () => Promise<Express>;
  * @returns Promise<Express> - Running Express application
  */
 export declare const startStaticJSServer: () => Promise<Express>;
-export { isDevelopment } from "./config/index.js";
+export { CONFIG, DEFAULT_CONFIG, isDevelopment } from "./config/index.js";
 export type { ServerConfig } from "./config/index.js";
 export { initializeViteServer } from "./utils/vite.js";
 export { setupProcessHandlers, startServer } from "./utils/startup.js";

package/_build/server/index.js

@@ -39,12 +39,17 @@ export const createApp = async () => {
     applyRateLimiting(app);
     applyParsing(app);
     applyLogging(app);
-    // Hot reload middleware (development mode only) - MUST be before runtime
-    applyHotReload(app);
+    // Hot reload static middleware MUST be applied before Vite to ensure proper serving
+    if (isDevelopment) {
+        const { hotReloadStaticMiddleware } = await import('./middleware/hotReload.js');
+        app.use(hotReloadStaticMiddleware);
+    }
     // Initialize Vite server and register JavaScript routes BEFORE runtime middleware
     if (isDevelopment) {
         await initializeViteServer(app);
     }
+    // Hot reload injection middleware (development mode only) - MUST be before runtime
+    applyHotReload(app);
     // Runtime rendering middleware (development mode only)
     // JavaScript routes are now registered before this middleware
     applyRuntime(app);
@@ -105,7 +110,7 @@ export const startStaticJSServer = async () => {
     }
 };
 // Export additional utilities for external use
-export { isDevelopment } from "./config/index.js";
+export { CONFIG, DEFAULT_CONFIG, isDevelopment } from "./config/index.js";
 export { initializeViteServer } from "./utils/vite.js";
 export { setupProcessHandlers, startServer } from "./utils/startup.js";
 // Only start the server when this module is run directly (not when imported)