@swissjs/swite 0.3.5 → 0.4.2

package/src/dev-engine/handlers/base-handler.ts

@@ -6,8 +6,14 @@
 
 import type { Response } from "express";
 import { promises as fs } from "node:fs";
+import { UiCompiler } from "@swissjs/compiler";
+import chalk from "chalk";
 import { ModuleResolver } from "../../resolution/resolver.js";
 import { resolveFilePath } from "../../resolution/path/file-path-resolver.js";
+import { rewriteImports } from "../../resolution/rewriting/import-rewriter.js";
+import { inlineEnvReferences } from "../../config/env.js";
+import { compilationCache } from "../../internal/cache/compilation-cache.js";
+import { fixSwissLibPaths } from "../../resolution/path/path-fixup.js";
 import type { SwiteUserConfig } from "../../config/config.js";
 
 export interface HandlerContext {
@@ -29,12 +35,115 @@ export function setDevHeaders(res: Response): void {
   res.setHeader("Surrogate-Control", "no-store");
 }
 
+const BARE_IMPORT_RE = /(?:import|from|export).*['"](@[^'"]+\/[^'"]+)(?!\/)[^'"]*['"]/;
+
 /**
  * Base handler utilities
  */
 export class BaseHandler {
+  private compiler = new UiCompiler();
+
   constructor(protected context: HandlerContext) {}
 
+  /**
+   * Shared compile-and-serve pipeline used by UIHandler and UIXHandler.
+   * Compiles a .ui/.uix file, rewrites imports, applies path fixup, and sends the response.
+   */
+  protected async compileAndServe(
+    url: string,
+    filePath: string,
+    res: Response,
+    label: string,
+  ): Promise<void> {
+    const pathFixupEnabled = this.context.userConfig?.compilerPathFixup?.enabled !== false;
+    const pathFixupPatterns = this.context.userConfig?.compilerPathFixup?.patterns;
+    const applyPathFixup = (code: string) =>
+      pathFixupEnabled ? fixSwissLibPaths(code, pathFixupPatterns) : code;
+
+    // Cache hit
+    const cached = await compilationCache.get(filePath, (c) => this.getDependencies(c));
+    if (cached) {
+      const fixed = applyPathFixup(cached);
+      setDevHeaders(res);
+      res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+      res.setHeader("Content-Length", Buffer.byteLength(fixed, "utf-8"));
+      res.end(fixed, "utf-8");
+      return;
+    }
+
+    // Cache miss — compile
+    const source = await fs.readFile(filePath, "utf-8");
+    let compiled = await this.compiler.compileAsync(source, filePath);
+
+    const esbuild = await import("esbuild");
+    const tsResult = await esbuild.transform(compiled, {
+      loader: "ts",
+      format: "esm",
+      target: "esnext",
+      sourcefile: filePath,
+    });
+    compiled = tsResult.code;
+
+    compiled = applyPathFixup(compiled);
+    compiled = inlineEnvReferences(compiled, this.context.env);
+
+    // Handle CSS imports:
+    // - Named/default imports (CSS modules): replace with const binding to empty object
+    //   so that apps using `import styles from "./x.module.css"` get {} instead of undefined.
+    // - Side-effect imports (import "./x.css"): strip silently — no runtime value needed.
+    // - Dynamic imports (import("./x.css")): return empty object.
+    const beforeCss = compiled;
+    // Named/default imports → const <binding> = {}
+    compiled = compiled.replace(
+      /^[^\S\r\n]*import\s+((?:\w+\s*,?\s*)?(?:\{[^}]*\}\s*,?\s*)?(?:\*\s+as\s+\w+\s*)?)\bfrom\s*['"][^'"]*\.css['"]\s*;?[^\S\r\n]*$/gm,
+      (_match, binding) => {
+        // Extract identifiers from the binding clause and emit const declarations
+        const ids: string[] = [];
+        const defaultMatch = binding.match(/^(\w+)(?:\s*,|\s*$)/);
+        if (defaultMatch) ids.push(defaultMatch[1]);
+        const nsMatch = binding.match(/\*\s+as\s+(\w+)/);
+        if (nsMatch) ids.push(nsMatch[1]);
+        const namedMatch = binding.match(/\{([^}]+)\}/);
+        if (namedMatch) {
+          namedMatch[1].split(",").forEach((s: string) => {
+            const alias = s.trim().split(/\s+as\s+/).pop()?.trim();
+            if (alias) ids.push(alias);
+          });
+        }
+        return ids.length ? ids.map((id) => `const ${id} = {};`).join(" ") : "";
+      },
+    );
+    // Side-effect imports → strip
+    compiled = compiled.replace(/^[^\S\r\n]*import\s*['"][^'"]*\.css['"]\s*;?[^\S\r\n]*$/gm, "");
+    // Dynamic imports → empty object
+    compiled = compiled.replace(/\bimport\s*\(\s*['"][^'"]*\.css['"]\s*\)/g, "({})");
+    if (beforeCss !== compiled) {
+      const _debug = process.env["SWITE_DEBUG"] === "1";
+      if (_debug) console.log(chalk.blue(`[${label}] Handled CSS imports from ${url}`));
+    }
+
+    if (BARE_IMPORT_RE.test(compiled)) {
+      console.warn(`[${label}] Compiled output contains bare imports: ${url}`);
+    }
+
+    const rewritten = await rewriteImports(compiled, filePath, this.context.resolver);
+    const finalCode = applyPathFixup(rewritten);
+
+    await compilationCache.set(filePath, compiled, finalCode, (c) => this.getDependencies(c));
+
+    if (BARE_IMPORT_RE.test(finalCode)) {
+      console.error(`[${label}] Bare imports still present after rewriting: ${url}`);
+      for (const m of Array.from(rewritten.matchAll(/(?:import|from|export).*['"](@[^'"]+\/[^'"]+)(?!\/)[^'"]*['"]/g)).slice(0, 3)) {
+        console.error(`[${label}] Unresolved import: ${m[1]}`);
+      }
+    }
+
+    setDevHeaders(res);
+    res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+    res.setHeader("Content-Length", Buffer.byteLength(finalCode, "utf-8"));
+    res.end(finalCode, "utf-8");
+  }
+
   protected async resolveFilePath(url: string): Promise<string> {
     return resolveFilePath(url, this.context.root, this.context.workspaceRoot, this.context.userConfig);
   }

package/src/dev-engine/handlers/ui-handler.ts

@@ -1,110 +1,30 @@
-/*
- * Copyright (c) 2024 Themba Mzumara
- * SWITE - SWISS Development Server
- * Licensed under the MIT License.
- */
-
-import type { Response } from "express";
-import { promises as fs } from "node:fs";
-import { UiCompiler } from "@swissjs/compiler";
-import chalk from "chalk";
-import { rewriteImports } from "../../resolution/rewriting/import-rewriter.js";
-import { inlineEnvReferences } from "../../config/env.js";
-import { compilationCache } from "../../internal/cache/compilation-cache.js";
-import { fixSwissLibPaths } from "../../resolution/path/path-fixup.js";
-import {
-  BaseHandler,
-  setDevHeaders,
-  type HandlerContext,
-} from "./base-handler.js";
-
-export class UIHandler extends BaseHandler {
-  private compiler = new UiCompiler();
-
-  constructor(context: HandlerContext) {
-    super(context);
-  }
-
-  async handle(url: string, res: Response): Promise<void> {
-    const filePath = await this.resolveFilePath(url);
-    console.log(chalk.blue(`[.ui] ${url} → ${filePath}`));
-
-    try {
-      await fs.access(filePath);
-    } catch {
-      console.error(chalk.red(`[.ui] File not found: ${filePath}`));
-      throw new Error(`File not found: ${url} (resolved to: ${filePath})`);
-    }
-
-    const pathFixupEnabled = this.context.userConfig?.compilerPathFixup?.enabled !== false;
-    const pathFixupPatterns = this.context.userConfig?.compilerPathFixup?.patterns;
-    const applyPathFixup = (code: string) =>
-      pathFixupEnabled ? fixSwissLibPaths(code, pathFixupPatterns) : code;
-
-    // Cache hit
-    const cached = await compilationCache.get(filePath, (compiled) => this.getDependencies(compiled));
-    if (cached) {
-      const fixed = applyPathFixup(cached);
-      setDevHeaders(res);
-      res.setHeader("Content-Type", "application/javascript; charset=utf-8");
-      res.setHeader("Content-Length", Buffer.byteLength(fixed, "utf-8"));
-      res.end(fixed, "utf-8");
-      return;
-    }
-
-    // Cache miss — compile
-    const source = await fs.readFile(filePath, "utf-8");
-    let compiled = await this.compiler.compileAsync(source, filePath);
-
-    const esbuild = await import("esbuild");
-    const tsResult = await esbuild.transform(compiled, {
-      loader: "ts",
-      format: "esm",
-      target: "esnext",
-      sourcefile: filePath,
-    });
-    compiled = tsResult.code;
-
-    // Fix compiler-emitted wrong paths before import rewriting
-    compiled = applyPathFixup(compiled);
-
-    // Inline import.meta.env references before import rewriting
-    compiled = inlineEnvReferences(compiled, this.context.env);
-
-    // Strip CSS static-asset imports — they are not ES modules
-    compiled = stripCssImports(compiled, url);
-
-    const bareImportPattern = /(?:import|from|export).*['"](@[^'"]+\/[^'"]+)(?!\/)[^'"]*['"]/;
-    if (bareImportPattern.test(compiled)) {
-      console.warn(`[.ui] Compiled output contains bare imports: ${url}`);
-    }
-
-    const rewritten = await rewriteImports(compiled, filePath, this.context.resolver);
-    const finalCode = applyPathFixup(rewritten);
-
-    await compilationCache.set(filePath, compiled, finalCode, (c) => this.getDependencies(c));
-
-    if (bareImportPattern.test(finalCode)) {
-      console.error(`[.ui] Bare imports still present after rewriting: ${url}`);
-      for (const m of Array.from(rewritten.matchAll(/(?:import|from|export).*['"](@[^'"]+\/[^'"]+)(?!\/)[^'"]*['"]/g)).slice(0, 3)) {
-        console.error(`[.ui] Unresolved import: ${m[1]}`);
-      }
-    }
-
-    setDevHeaders(res);
-    res.setHeader("Content-Type", "application/javascript; charset=utf-8");
-    res.setHeader("Content-Length", Buffer.byteLength(finalCode, "utf-8"));
-    res.end(finalCode, "utf-8");
-  }
-}
-
-function stripCssImports(code: string, url: string): string {
-  // Single well-ordered pass: static imports first, then dynamic imports
-  const before = code;
-  code = code.replace(/^[^\S\r\n]*import\s[^'"]*['"][^'"]*\.css['"]\s*;?[^\S\r\n]*$/gm, "");
-  code = code.replace(/\bimport\s*\(\s*['"][^'"]*\.css['"]\s*\)/g, "undefined");
-  if (before !== code) {
-    console.log(chalk.blue(`[.ui] Stripped CSS imports from ${url}`));
-  }
-  return code;
-}
+/*
+ * Copyright (c) 2024 Themba Mzumara
+ * SWITE - SWISS Development Server
+ * Licensed under the MIT License.
+ */
+
+import type { Response } from "express";
+import { promises as fs } from "node:fs";
+import chalk from "chalk";
+import { BaseHandler, setDevHeaders, type HandlerContext } from "./base-handler.js";
+
+export class UIHandler extends BaseHandler {
+  constructor(context: HandlerContext) {
+    super(context);
+  }
+
+  async handle(url: string, res: Response): Promise<void> {
+    const filePath = await this.resolveFilePath(url);
+    console.log(chalk.blue(`[.ui] ${url} → ${filePath}`));
+
+    try {
+      await fs.access(filePath);
+    } catch {
+      console.error(chalk.red(`[.ui] File not found: ${filePath}`));
+      throw new Error(`File not found: ${url} (resolved to: ${filePath})`);
+    }
+
+    await this.compileAndServe(url, filePath, res, ".ui");
+  }
+}

package/src/dev-engine/handlers/uix-handler.ts

@@ -1,95 +1,21 @@
-/*
- * Copyright (c) 2024 Themba Mzumara
- * SWITE - SWISS Development Server
- * Licensed under the MIT License.
- */
-
-import type { Response } from "express";
-import { promises as fs } from "node:fs";
-import { UiCompiler } from "@swissjs/compiler";
-import chalk from "chalk";
-import { rewriteImports } from "../../resolution/rewriting/import-rewriter.js";
-import { inlineEnvReferences } from "../../config/env.js";
-import { compilationCache } from "../../internal/cache/compilation-cache.js";
-import { fixSwissLibPaths } from "../../resolution/path/path-fixup.js";
-import {
-  BaseHandler,
-  setDevHeaders,
-  type HandlerContext,
-} from "./base-handler.js";
-
-export class UIXHandler extends BaseHandler {
-  private compiler = new UiCompiler();
-
-  constructor(context: HandlerContext) {
-    super(context);
-  }
-
-  async handle(url: string, res: Response): Promise<void> {
-    const filePath = await this.resolveFilePath(url);
-    console.log(chalk.blue(`[.uix] ${url}`));
-
-    const pathFixupEnabled = this.context.userConfig?.compilerPathFixup?.enabled !== false;
-    const pathFixupPatterns = this.context.userConfig?.compilerPathFixup?.patterns;
-    const applyPathFixup = (code: string) =>
-      pathFixupEnabled ? fixSwissLibPaths(code, pathFixupPatterns) : code;
-
-    // Cache hit
-    const cached = await compilationCache.get(filePath, (compiled) => this.getDependencies(compiled));
-    if (cached) {
-      const fixed = applyPathFixup(cached);
-      setDevHeaders(res);
-      res.setHeader("Content-Type", "application/javascript; charset=utf-8");
-      res.send(fixed);
-      return;
-    }
-
-    // Cache miss — compile
-    const source = await fs.readFile(filePath, "utf-8");
-    let compiled = await this.compiler.compileAsync(source, filePath);
-
-    const esbuild = await import("esbuild");
-    const tsResult = await esbuild.transform(compiled, {
-      loader: "ts",
-      format: "esm",
-      target: "esnext",
-      sourcefile: filePath,
-    });
-    compiled = tsResult.code;
-
-    // Fix compiler-emitted wrong paths before import rewriting
-    compiled = applyPathFixup(compiled);
-
-    // Inline import.meta.env references before import rewriting
-    compiled = inlineEnvReferences(compiled, this.context.env);
-
-    // Strip CSS static-asset imports — they are not ES modules
-    const beforeCss = compiled;
-    compiled = compiled.replace(/^[^\S\r\n]*import\s[^'"]*['"][^'"]*\.css['"]\s*;?[^\S\r\n]*$/gm, "");
-    compiled = compiled.replace(/\bimport\s*\(\s*['"][^'"]*\.css['"]\s*\)/g, "undefined");
-    if (beforeCss !== compiled) {
-      console.log(chalk.blue(`[.uix] Stripped CSS imports from ${url}`));
-    }
-
-    const bareImportPattern = /(?:import|from|export).*['"](@[^'"]+\/[^'"]+)(?!\/)[^'"]*['"]/;
-    if (bareImportPattern.test(compiled)) {
-      console.warn(`[.uix] Compiled output contains bare imports: ${url}`);
-    }
-
-    const rewritten = await rewriteImports(compiled, filePath, this.context.resolver);
-    const finalCode = applyPathFixup(rewritten);
-
-    await compilationCache.set(filePath, compiled, finalCode, (c) => this.getDependencies(c));
-
-    if (bareImportPattern.test(finalCode)) {
-      console.error(`[.uix] Bare imports still present after rewriting: ${url}`);
-      for (const m of Array.from(rewritten.matchAll(/(?:import|from|export).*['"](@[^'"]+\/[^'"]+)(?!\/)[^'"]*['"]/g)).slice(0, 3)) {
-        console.error(`[.uix] Unresolved import: ${m[1]}`);
-      }
-    }
-
-    setDevHeaders(res);
-    res.setHeader("Content-Type", "application/javascript; charset=utf-8");
-    res.send(finalCode);
-  }
-}
+/*
+ * Copyright (c) 2024 Themba Mzumara
+ * SWITE - SWISS Development Server
+ * Licensed under the MIT License.
+ */
+
+import type { Response } from "express";
+import chalk from "chalk";
+import { BaseHandler, type HandlerContext } from "./base-handler.js";
+
+export class UIXHandler extends BaseHandler {
+  constructor(context: HandlerContext) {
+    super(context);
+  }
+
+  async handle(url: string, res: Response): Promise<void> {
+    const filePath = await this.resolveFilePath(url);
+    console.log(chalk.blue(`[.uix] ${url}`));
+    await this.compileAndServe(url, filePath, res, ".uix");
+  }
+}

package/src/dev-engine/hmr/hmr-client-template.ts

@@ -1,122 +1,122 @@
-/**
- * Build the HMR client script served to the browser at /__swite_hmr_client.
- *
- * The client is plain JavaScript (no TS syntax) because it is injected into
- * browser pages as-is. Keeping it in a separate module rather than embedded
- * inside hmr.ts makes it editable with syntax highlighting and avoids
- * template-literal escaping issues.
- */
-export function buildHmrClientScript(port: number): string {
-  return `// SWITE HMR Client
-console.log('[SWITE] HMR enabled');
-
-const socket = new WebSocket('ws://' + window.location.hostname + ':${port}');
-const moduleGraph = new Map();
-const hotModules = new Map();
-
-socket.addEventListener('open', () => {
-  console.log('[SWITE] HMR connected');
-});
-
-socket.addEventListener('message', async (event) => {
-  const data = JSON.parse(event.data);
-
-  if (data.type === 'update') {
-    console.log('[SWITE] Processing update:', data.path, 'Type:', data.updateType);
-
-    if (data.updateType === 'style') {
-      updateStyles();
-      console.log('[SWITE] Styles hot updated');
-    } else if (data.updateType === 'hot') {
-      const moduleName = extractModuleName(data.path);
-
-      if (moduleName && hotModules.has(moduleName)) {
-        try {
-          invalidateModule(moduleName);
-          invalidateDependents(moduleName);
-
-          const updatedModule = await import(data.path + '?t=' + Date.now());
-          hotModules.set(moduleName, updatedModule);
-
-          updateComponent(moduleName, updatedModule);
-          console.log('[SWITE] Component hot updated:', moduleName);
-        } catch (error) {
-          console.error('[SWITE] Hot update failed:', error);
-          window.location.reload();
-        }
-      } else {
-        console.log('[SWITE] New component detected, reloading page');
-        window.location.reload();
-      }
-    } else {
-      console.log('[SWITE] Full page reload required');
-      window.location.reload();
-    }
-  }
-});
-
-function updateStyles() {
-  const links = document.querySelectorAll('link[rel="stylesheet"]');
-  links.forEach(link => {
-    const href = link.getAttribute('href');
-    if (href) {
-      const base = href.replace(/[?&]t=\\d+/, '');
-      link.setAttribute('href', base + (base.includes('?') ? '&' : '?') + 't=' + Date.now());
-    }
-  });
-}
-
-function extractModuleName(filePath) {
-  const parts = filePath.split('/');
-  const fileName = parts[parts.length - 1];
-  return fileName ? fileName.replace(/\\.[^.]+$/, '') : null;
-}
-
-function invalidateModule(moduleName) {
-  if (window.__swiss_modules__) {
-    delete window.__swiss_modules__[moduleName];
-  }
-}
-
-function invalidateDependents(moduleName) {
-  const dependents = moduleGraph.get(moduleName);
-  if (dependents) {
-    for (const dependent of dependents) {
-      invalidateModule(dependent);
-    }
-  }
-}
-
-function updateComponent(moduleName, newModule) {
-  if (window.__swiss_instances__) {
-    const instances = window.__swiss_instances__[moduleName];
-    if (instances && Array.isArray(instances)) {
-      instances.forEach(instance => {
-        if (instance && typeof instance.update === 'function') {
-          instance.update(newModule.default || newModule);
-        }
-      });
-    }
-  }
-}
-
-socket.addEventListener('close', () => {
-  console.log('[SWITE] HMR disconnected');
-});
-
-socket.addEventListener('error', (error) => {
-  console.error('[SWITE] HMR error:', error);
-});
-
-window.__swiss_modules__ = window.__swiss_modules__ || {};
-window.__swiss_instances__ = window.__swiss_instances__ || {};
-
-const currentScript = document.currentScript;
-if (currentScript && currentScript.src) {
-  const moduleName = extractModuleName(currentScript.src);
-  if (moduleName) {
-    window.__swiss_modules__[moduleName] = true;
-  }
-}
-`;
-}
+/**
+ * Build the HMR client script served to the browser at /__swite_hmr_client.
+ *
+ * The client is plain JavaScript (no TS syntax) because it is injected into
+ * browser pages as-is. Keeping it in a separate module rather than embedded
+ * inside hmr.ts makes it editable with syntax highlighting and avoids
+ * template-literal escaping issues.
+ */
+export function buildHmrClientScript(port: number): string {
+  return `// SWITE HMR Client
+console.log('[SWITE] HMR enabled');
+
+const socket = new WebSocket('ws://' + window.location.hostname + ':${port}');
+const moduleGraph = new Map();
+const hotModules = new Map();
+
+socket.addEventListener('open', () => {
+  console.log('[SWITE] HMR connected');
+});
+
+socket.addEventListener('message', async (event) => {
+  const data = JSON.parse(event.data);
+
+  if (data.type === 'update') {
+    console.log('[SWITE] Processing update:', data.path, 'Type:', data.updateType);
+
+    if (data.updateType === 'style') {
+      updateStyles();
+      console.log('[SWITE] Styles hot updated');
+    } else if (data.updateType === 'hot') {
+      const moduleName = extractModuleName(data.path);
+
+      if (moduleName && hotModules.has(moduleName)) {
+        try {
+          invalidateModule(moduleName);
+          invalidateDependents(moduleName);
+
+          const updatedModule = await import(data.path + '?t=' + Date.now());
+          hotModules.set(moduleName, updatedModule);
+
+          updateComponent(moduleName, updatedModule);
+          console.log('[SWITE] Component hot updated:', moduleName);
+        } catch (error) {
+          console.error('[SWITE] Hot update failed:', error);
+          window.location.reload();
+        }
+      } else {
+        console.log('[SWITE] New component detected, reloading page');
+        window.location.reload();
+      }
+    } else {
+      console.log('[SWITE] Full page reload required');
+      window.location.reload();
+    }
+  }
+});
+
+function updateStyles() {
+  const links = document.querySelectorAll('link[rel="stylesheet"]');
+  links.forEach(link => {
+    const href = link.getAttribute('href');
+    if (href) {
+      const base = href.replace(/[?&]t=\\d+/, '');
+      link.setAttribute('href', base + (base.includes('?') ? '&' : '?') + 't=' + Date.now());
+    }
+  });
+}
+
+function extractModuleName(filePath) {
+  const parts = filePath.split('/');
+  const fileName = parts[parts.length - 1];
+  return fileName ? fileName.replace(/\\.[^.]+$/, '') : null;
+}
+
+function invalidateModule(moduleName) {
+  if (window.__swiss_modules__) {
+    delete window.__swiss_modules__[moduleName];
+  }
+}
+
+function invalidateDependents(moduleName) {
+  const dependents = moduleGraph.get(moduleName);
+  if (dependents) {
+    for (const dependent of dependents) {
+      invalidateModule(dependent);
+    }
+  }
+}
+
+function updateComponent(moduleName, newModule) {
+  if (window.__swiss_instances__) {
+    const instances = window.__swiss_instances__[moduleName];
+    if (instances && Array.isArray(instances)) {
+      instances.forEach(instance => {
+        if (instance && typeof instance.update === 'function') {
+          instance.update(newModule.default || newModule);
+        }
+      });
+    }
+  }
+}
+
+socket.addEventListener('close', () => {
+  console.log('[SWITE] HMR disconnected');
+});
+
+socket.addEventListener('error', (error) => {
+  console.error('[SWITE] HMR error:', error);
+});
+
+window.__swiss_modules__ = window.__swiss_modules__ || {};
+window.__swiss_instances__ = window.__swiss_instances__ || {};
+
+const currentScript = document.currentScript;
+if (currentScript && currentScript.src) {
+  const moduleName = extractModuleName(currentScript.src);
+  if (moduleName) {
+    window.__swiss_modules__[moduleName] = true;
+  }
+}
+`;
+}