vite-plugin-sinwan 0.2.5 → 0.2.7

package/README.md

@@ -8,6 +8,14 @@ Vite plugin for [Sinwan](https://sinwanjs.com) — JSX transformation with templ
 bun add -d vite-plugin-sinwan
 ```
 
+## Compiler updates
+
+The plugin depends on `sinwan-compiler` with `>=0.2.5 <1.0.0` and does not bundle it. Publishing a new 0.x compiler does **not** require a plugin release.
+
+- New installs resolve the newest compatible compiler automatically.
+- Existing apps keep a lockfile pin until they run `bun update sinwan-compiler`.
+- Republish this plugin only when the plugin API itself changes, or when `sinwan-compiler` reaches 1.0.
+
 ## Usage
 
 ```ts
@@ -26,6 +34,8 @@ export default defineConfig({
 sinwan({
   // Enable template hoisting (default: true)
   hoist: true,
+  // Warn when hoisting is skipped (default: Vite mode !== "production")
+  dev: true,
   // Emit explicit binding descriptors (default: false)
   explicitBindings: false,
   // Path to reactive-props metadata from `sinwan analyze`
@@ -45,6 +55,7 @@ sinwan({
 | Option             | Type                            | Default     | Description                                           |
 | ------------------ | ------------------------------- | ----------- | ----------------------------------------------------- |
 | `hoist`            | `boolean`                       | `true`      | Hoist static DOM to module-level templates            |
+| `dev`              | `boolean`                       | Vite `mode !== "production"` | Warn when template hoisting is skipped |
 | `explicitBindings` | `boolean`                       | `false`     | Emit compiler-driven binding descriptors              |
 | `analyze`          | `string`                        | `undefined` | Path to reactive-props metadata from `sinwan analyze` |
 | `cache`            | `boolean \| SinwanCacheOptions` | `false`     | Enable incremental in-memory cross-file analysis      |

package/__tests__/plugin.test.ts

@@ -1,4 +1,6 @@
 import { describe, it, expect } from "bun:test";
+import * as fs from "fs";
+import * as path from "path";
 import { sinwan } from "../src/index";
 
 describe("sinwan vite plugin", () => {
@@ -30,3 +32,329 @@ describe("sinwan vite plugin", () => {
     expect(plugin.name).toBe("sinwan");
   });
 });
+
+const SPREAD_JSX = "const Card = (props) => <div {...props}><p>Hello</p></div>;";
+
+function collectWarns(run: () => void): string[] {
+  const warns: string[] = [];
+  const originalWarn = console.warn;
+  console.warn = (...args: unknown[]) => {
+    warns.push(String(args[0]));
+  };
+  try {
+    run();
+    return warns;
+  } finally {
+    console.warn = originalWarn;
+  }
+}
+
+describe("compiler dev warnings", () => {
+  it("does not warn about skipped hoists when dev is false", () => {
+    const plugin = sinwan({ cache: false, dev: false });
+    const warns = collectWarns(() => {
+      plugin.transform(SPREAD_JSX, "Card.tsx");
+    });
+    expect(warns.some((line) => line.includes("template hoisting skipped"))).toBe(
+      false,
+    );
+  });
+
+  it("warns about skipped hoists when dev is true", () => {
+    const plugin = sinwan({ cache: false, dev: true });
+    const warns = collectWarns(() => {
+      plugin.transform(SPREAD_JSX, "Card.tsx");
+    });
+    expect(warns.some((line) => line.includes("template hoisting skipped"))).toBe(
+      true,
+    );
+  });
+
+  it("uses Vite production mode after configResolved unless dev is set", () => {
+    const plugin = sinwan({ cache: false });
+    plugin.configResolved({ command: "build", mode: "production", root: "/app" });
+    const warns = collectWarns(() => {
+      plugin.transform(SPREAD_JSX, "Card.tsx");
+    });
+    expect(warns.some((line) => line.includes("template hoisting skipped"))).toBe(
+      false,
+    );
+  });
+
+  it("uses Vite development mode after configResolved unless dev is set", () => {
+    const plugin = sinwan({ cache: false });
+    plugin.configResolved({ command: "serve", mode: "development", root: "/app" });
+    const warns = collectWarns(() => {
+      plugin.transform(SPREAD_JSX, "Card.tsx");
+    });
+    expect(warns.some((line) => line.includes("template hoisting skipped"))).toBe(
+      true,
+    );
+  });
+
+  it("keeps an explicit dev option after configResolved production mode", () => {
+    const plugin = sinwan({ cache: false, dev: true });
+    plugin.configResolved({ command: "build", mode: "production", root: "/app" });
+    const warns = collectWarns(() => {
+      plugin.transform(SPREAD_JSX, "Card.tsx");
+    });
+    expect(warns.some((line) => line.includes("template hoisting skipped"))).toBe(
+      true,
+    );
+  });
+
+  it("defaults to quiet when NODE_ENV is production before configResolved", () => {
+    const previous = process.env.NODE_ENV;
+    process.env.NODE_ENV = "production";
+    try {
+      const plugin = sinwan({ cache: false });
+      const warns = collectWarns(() => {
+        plugin.transform(SPREAD_JSX, "Card.tsx");
+      });
+      expect(
+        warns.some((line) => line.includes("template hoisting skipped")),
+      ).toBe(false);
+    } finally {
+      if (previous === undefined) {
+        delete process.env.NODE_ENV;
+      } else {
+        process.env.NODE_ENV = previous;
+      }
+    }
+  });
+
+  it("does not override captured env when config.mode is not a string", () => {
+    const previous = process.env.NODE_ENV;
+    process.env.NODE_ENV = "production";
+    try {
+      const plugin = sinwan({ cache: false });
+      plugin.configResolved({ command: "serve", root: "/app" });
+      const warns = collectWarns(() => {
+        plugin.transform(SPREAD_JSX, "Card.tsx");
+      });
+      expect(
+        warns.some((line) => line.includes("template hoisting skipped")),
+      ).toBe(false);
+    } finally {
+      if (previous === undefined) {
+        delete process.env.NODE_ENV;
+      } else {
+        process.env.NODE_ENV = previous;
+      }
+    }
+  });
+});
+
+describe("vite transform, cache, and Fast Refresh", () => {
+  it("returns null for non-jsx files", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: false });
+    expect(plugin.transform("const x = 1;", "file.ts")).toBeNull();
+  });
+
+  it("transforms jsx and updates cache when bunfig exists", () => {
+    const tmpDir = fs.mkdtempSync(path.join(import.meta.dir, ".tmp-"));
+    const bunfig = path.join(tmpDir, "bunfig.toml");
+    fs.writeFileSync(bunfig, "[install]\n");
+    try {
+      const plugin = sinwan({
+        cache: {
+          root: tmpDir,
+          tsConfigPath: path.join(tmpDir, "tsconfig.json"),
+          cachePath: path.join(tmpDir, "cache.json"),
+          bunfigPath: bunfig,
+          workspaces: tmpDir,
+        },
+        fastRefresh: false,
+        dev: false,
+      });
+      plugin.configResolved({
+        command: "build",
+        mode: "production",
+        root: tmpDir,
+      });
+      const result = plugin.transform(
+        "export function Hello() { return <div>hi</div>; }",
+        path.join(tmpDir, "Hello.tsx"),
+      );
+      expect(result?.code).toContain("_$createTemplate");
+    } finally {
+      fs.rmSync(tmpDir, { recursive: true });
+    }
+  });
+
+  it("uses projectRoot when cache is a boolean", () => {
+    const plugin = sinwan({ cache: true, fastRefresh: false, dev: false });
+    plugin.configResolved({
+      command: "build",
+      mode: "production",
+      root: process.cwd(),
+    });
+    const result = plugin.transform("const App = () => <div>ok</div>;", "App.tsx");
+    expect(result?.code).toBeDefined();
+  });
+
+  it("falls back to cwd when cache is a boolean and root is omitted", () => {
+    const plugin = sinwan({ cache: true, fastRefresh: false, dev: false });
+    plugin.configResolved({ command: "build", mode: "production" });
+    const result = plugin.transform("const App = () => <div>ok</div>;", "App.tsx");
+    expect(result?.code).toBeDefined();
+  });
+
+  it("uses cache object defaults without root or bunfigPath", () => {
+    const plugin = sinwan({
+      cache: {},
+      fastRefresh: false,
+      dev: false,
+    });
+    plugin.configResolved({ command: "build", mode: "production", root: "/app" });
+    const result = plugin.transform("const App = () => <div>ok</div>;", "App.jsx");
+    expect(result?.code).toBeDefined();
+  });
+
+  it("uses cwd when a cache object has no root and config has no root", () => {
+    const plugin = sinwan({
+      cache: {},
+      fastRefresh: false,
+      dev: false,
+    });
+    plugin.configResolved({ command: "build", mode: "production" });
+    const result = plugin.transform("const App = () => <div>ok</div>;", "App.tsx");
+    expect(result?.code).toBeDefined();
+  });
+
+  it("injects Fast Refresh in serve for an exported component", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: true, dev: false });
+    plugin.configResolved({
+      command: "serve",
+      mode: "development",
+      root: "/app",
+    });
+    const result = plugin.transform(
+      "export function Hello() { return <div>hi</div>; }",
+      "/app/src/Hello.tsx",
+    );
+    expect(result?.code).toContain("$$sinwanReplace");
+  });
+
+  it("injects Fast Refresh using original source when the id has a query", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: true, dev: false });
+    plugin.configResolved({
+      command: "serve",
+      mode: "development",
+      root: "/app",
+    });
+    const result = plugin.transform(
+      "export function Hello() { return <div>hi</div>; }",
+      "/app/src/Hello.tsx?t=1",
+    );
+    expect(result?.code).toContain("$$sinwanReplace");
+  });
+
+  it("skips Fast Refresh for node_modules", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: true, dev: false });
+    plugin.configResolved({
+      command: "serve",
+      mode: "development",
+      root: "/app",
+    });
+    const result = plugin.transform(
+      "export function Hello() { return <div>hi</div>; }",
+      "/app/node_modules/lib/Hello.tsx",
+    );
+    expect(result?.code ?? "").not.toContain("$$sinwanReplace");
+  });
+
+  it("skips Fast Refresh for virtual modules", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: true, dev: false });
+    plugin.configResolved({
+      command: "serve",
+      mode: "development",
+      root: "/app",
+    });
+    const result = plugin.transform(
+      "export function Hello() { return <div>hi</div>; }",
+      "\0virtual/Hello.tsx",
+    );
+    expect(result?.code ?? "").not.toContain("$$sinwanReplace");
+  });
+
+  it("skips Fast Refresh when the module exports no component", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: true, dev: false });
+    plugin.configResolved({
+      command: "serve",
+      mode: "development",
+      root: "/app",
+    });
+    const result = plugin.transform("const x = 1;", "/app/src/util.tsx");
+    expect(result?.code ?? "").not.toContain("$$sinwanReplace");
+  });
+
+  it("does not inject Fast Refresh during build", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: true, dev: false });
+    plugin.configResolved({
+      command: "build",
+      mode: "production",
+      root: "/app",
+    });
+    const result = plugin.transform(
+      "export function Hello() { return <div>hi</div>; }",
+      "/app/src/Hello.tsx",
+    );
+    expect(result?.code ?? "").not.toContain("$$sinwanReplace");
+  });
+
+  it("does not inject Fast Refresh when disabled", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: false, dev: false });
+    plugin.configResolved({
+      command: "serve",
+      mode: "development",
+      root: "/app",
+    });
+    const result = plugin.transform(
+      "export function Hello() { return <div>hi</div>; }",
+      "/app/src/Hello.tsx",
+    );
+    expect(result?.code ?? "").not.toContain("$$sinwanReplace");
+  });
+
+  it("does not double-inject Fast Refresh", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: true, dev: false });
+    plugin.configResolved({
+      command: "serve",
+      mode: "development",
+      root: "/app",
+    });
+    const alreadyWired =
+      "export function Hello() { return <div>hi</div>; }\nconst $$sinwanReplace = 1;";
+    const result = plugin.transform(alreadyWired, "/app/src/Hello.tsx");
+    expect(result?.code).not.toContain("import.meta.hot.accept");
+  });
+
+  it("skips Fast Refresh when the refresh helper is already present", () => {
+    const plugin = sinwan({ cache: false, fastRefresh: true, dev: false });
+    plugin.configResolved({
+      command: "serve",
+      mode: "development",
+      root: "/app",
+    });
+    const alreadyWired =
+      "export function Hello() { return <div>hi</div>; }\nconst __$sinwanRefresh = 1;";
+    const result = plugin.transform(alreadyWired, "/app/src/Hello.tsx");
+    expect(result?.code).not.toContain("import.meta.hot.accept");
+  });
+});
+
+const COMPILER_RANGE = ">=0.2.5 <1.0.0";
+
+describe("sinwan-compiler dependency range", () => {
+  it("accepts any 0.x compiler without a plugin republish", () => {
+    const pkg = JSON.parse(
+      fs.readFileSync(path.join(import.meta.dir, "..", "package.json"), "utf8"),
+    ) as {
+      dependencies: Record<string, string>;
+      peerDependencies: Record<string, string>;
+    };
+    expect(pkg.dependencies["sinwan-compiler"]).toBe(COMPILER_RANGE);
+    expect(pkg.peerDependencies["sinwan-compiler"]).toBe(COMPILER_RANGE);
+  });
+});

package/dist/index.d.ts

@@ -31,6 +31,12 @@ export interface SinwanOptions {
      * Only active in `vite serve`; never affects production builds.
      */
     fastRefresh?: boolean;
+    /**
+     * Warn when template hoisting is skipped (spreads, enhancer tags, …).
+     * Default: Vite `config.mode !== "production"` after `configResolved`,
+     * otherwise `process.env.NODE_ENV !== "production"` when `sinwan()` runs.
+     */
+    dev?: boolean;
 }
 /**
  * Unified Sinwan Vite plugin.

package/dist/index.js

@@ -30,6 +30,9 @@ ${replaces}
 // src/index.ts
 import * as fs from "fs";
 import * as path from "path";
+function defaultCompilerDev() {
+  return process.env["NODE_ENV"] !== "production";
+}
 var DEFAULT_SINWAN_OPTIONS = {
   hoist: true,
   explicitBindings: false,
@@ -39,6 +42,8 @@ var DEFAULT_SINWAN_OPTIONS = {
 };
 function sinwan(options = {}) {
   const opts = { ...DEFAULT_SINWAN_OPTIONS, ...options };
+  const explicitDev = options.dev;
+  let compilerDev = explicitDev ?? defaultCompilerDev();
   let isServe = false;
   let projectRoot;
   let cache = null;
@@ -55,6 +60,9 @@ function sinwan(options = {}) {
     configResolved(config) {
       isServe = config?.command === "serve";
       projectRoot = config?.root;
+      if (explicitDev === undefined && typeof config?.mode === "string") {
+        compilerDev = config.mode !== "production";
+      }
       if (opts.cache) {
         const root = typeof opts.cache === "object" ? opts.cache.root ?? projectRoot ?? process.cwd() : projectRoot ?? process.cwd();
         const tsConfigPath = typeof opts.cache === "object" ? opts.cache.tsConfigPath : undefined;
@@ -79,7 +87,7 @@ function sinwan(options = {}) {
         result = transformJSX(code, id, {
           hoist: opts.hoist,
           explicitBindings: opts.explicitBindings,
-          dev: true,
+          dev: compilerDev,
           analyze: opts.analyze,
           analyzeMetadata: cache ? cache.reactiveProps : undefined,
           resolveImport: cache ? cache.resolve : undefined

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-sinwan",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Vite plugin for sinwan",
   "author": "Mohammed Ben Cheikh",
   "license": "MIT",
@@ -29,17 +29,19 @@
     "sinwan": "./dist/cli.js"
   },
   "scripts": {
-    "build": "bun run build.ts"
+    "build": "bun run build.ts",
+    "test": "bun test --coverage __tests__/plugin.test.ts"
   },
   "devDependencies": {
     "@types/bun": "latest",
     "typescript": "^5"
   },
   "dependencies": {
-    "sinwan-compiler": "^0.2.5"
+    "sinwan-compiler": ">=0.2.5 <1.0.0"
   },
   "peerDependencies": {
     "typescript": "^5",
-    "vite": "^5"
+    "vite": "^5",
+    "sinwan-compiler": ">=0.2.5 <1.0.0"
   }
 }

package/src/index.ts

@@ -38,6 +38,20 @@ export interface SinwanOptions {
    * Only active in `vite serve`; never affects production builds.
    */
   fastRefresh?: boolean;
+  /**
+   * Warn when template hoisting is skipped (spreads, enhancer tags, …).
+   * Default: Vite `config.mode !== "production"` after `configResolved`,
+   * otherwise `process.env.NODE_ENV !== "production"` when `sinwan()` runs.
+   */
+  dev?: boolean;
+}
+
+/**
+ * Bracket access so Bun.build cannot fold `process.env.NODE_ENV` into `true`
+ * when this plugin itself is bundled.
+ */
+function defaultCompilerDev(): boolean {
+  return process.env["NODE_ENV"] !== "production";
 }
 
 const DEFAULT_SINWAN_OPTIONS: Required<
@@ -66,6 +80,8 @@ const DEFAULT_SINWAN_OPTIONS: Required<
  */
 export function sinwan(options: SinwanOptions = {}) {
   const opts = { ...DEFAULT_SINWAN_OPTIONS, ...options };
+  const explicitDev = options.dev;
+  let compilerDev = explicitDev ?? defaultCompilerDev();
 
   // Whether we are running the dev server (`vite serve`). Fast Refresh
   // injection only happens here; production builds are never touched.
@@ -94,6 +110,9 @@ export function sinwan(options: SinwanOptions = {}) {
     configResolved(config: any) {
       isServe = config?.command === "serve";
       projectRoot = config?.root;
+      if (explicitDev === undefined && typeof config?.mode === "string") {
+        compilerDev = config.mode !== "production";
+      }
 
       if (opts.cache) {
         const root =
@@ -129,7 +148,7 @@ export function sinwan(options: SinwanOptions = {}) {
         result = transformJSX(code, id, {
           hoist: opts.hoist,
           explicitBindings: opts.explicitBindings,
-          dev: process.env.NODE_ENV !== "production",
+          dev: compilerDev,
           analyze: opts.analyze,
           analyzeMetadata: cache ? cache.reactiveProps : undefined,
           resolveImport: cache ? cache.resolve : undefined,