driftjs-vite-plugin 0.0.1

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "driftjs-vite-plugin",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index-es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index-es.js",
+      "require": "./dist/index-cjs.js"
+    }
+  },
+  "license": "MIT",
+  "dependencies": {
+    "driftjs-compiler": "0.0.1"
+  },
+  "peerDependencies": {
+    "vite": "8.1.5"
+  },
+  "devDependencies": {
+    "typescript": "^7.0.2",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10",
+    "driftjs-dom": "0.0.1"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run"
+  }
+}

package/src/index.ts

@@ -0,0 +1,148 @@
+import type { Plugin } from 'vite';
+import {
+  compile,
+  type CompiledModule,
+} from 'driftjs-compiler';
+import { DRIFT_EXT, type DriftPluginOptions } from '../types/index.js';
+
+export type { DriftPluginOptions, DriftModule } from '../types/index.js';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ESM code generation
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Serializes constant values to JavaScript code literals.
+ */
+function serializeValueToJS(val: unknown): string {
+  if (val === null || val === undefined) return String(val);
+  if (typeof val === 'function') return val.toString();
+  if (typeof val === 'object') {
+    if ('__drift_fn__' in (val as any)) {
+      const fnStr = (val as any).__drift_fn__;
+      return `{ __drift_fn__: ${typeof fnStr === 'function' ? fnStr.toString() : fnStr} }`;
+    }
+    if (Array.isArray(val)) {
+      return `[${val.map(serializeValueToJS).join(', ')}]`;
+    }
+    const entries = Object.entries(val as Record<string, any>)
+      .filter(([k]) => k !== 'start' && k !== 'end' && k !== 'loc')
+      .map(([k, v]) => `${JSON.stringify(k)}: ${serializeValueToJS(v)}`);
+    return `{ ${entries.join(', ')} }`;
+  }
+  return JSON.stringify(val);
+}
+
+function serializeConstants(constants: readonly unknown[]): string {
+  return `[\n    ${constants.map(serializeValueToJS).join(',\n    ')}\n  ]`;
+}
+
+function generateESM(mod: CompiledModule, filePath: string): string {
+  const bytecodeJSON = JSON.stringify(Array.from(mod.bytecode));
+  const constantsJSON = serializeConstants(mod.constants);
+  const bindingsJSON = JSON.stringify(mod.reactiveBindings ?? []);
+  const declaredVarsJSON = JSON.stringify(mod.declaredVars ?? []);
+
+  const importStatements: string[] = [];
+  const scopeEntries: string[] = [];
+
+  if (mod.imports && mod.imports.length > 0) {
+    for (const imp of mod.imports) {
+      if (imp.isDefault) {
+        importStatements.push(`import ${imp.localName} from ${JSON.stringify(imp.source)};`);
+      } else if (imp.importedName) {
+        importStatements.push(`import { ${imp.importedName} as ${imp.localName} } from ${JSON.stringify(imp.source)};`);
+      }
+      scopeEntries.push(imp.localName);
+    }
+  }
+
+  const importsHeader = importStatements.length > 0 ? importStatements.join('\n') + '\n\n' : '';
+  const scopeObj = scopeEntries.length > 0 ? `{\n    ${scopeEntries.join(',\n    ')}\n  }` : '{}';
+
+  return `\
+// [DriftJS] Auto-generated from: ${filePath}
+// Do not edit — regenerated on every save / build.
+${importsHeader}/** @type {import('driftjs-compiler').CompiledModule} */
+const compiledModule = {
+  bytecode: new Uint32Array(${bytecodeJSON}),
+  constants: ${constantsJSON},
+  reactiveBindings: ${bindingsJSON},
+  declaredVars: ${declaredVarsJSON},
+  scope: ${scopeObj},
+};
+
+export default compiledModule;
+`;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Plugin factory
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Vite plugin that transforms `.drift` template files into ESM modules.
+ *
+ * Each `.drift` file is compiled at build / serve time through the DriftJS
+ * pipeline and emitted as an ESM module exposing `render()`, `mount()`, and
+ * the raw `compiledModule`.
+ *
+ * @example
+ * // vite.config.ts
+ * import { driftPlugin } from '@driftjs/vite-plugin';
+ * export default defineConfig({ plugins: [driftPlugin()] });
+ *
+ * @example
+ * // app.ts
+ * import { mount } from './hero.drift';
+ * mount(document.getElementById('app')!, { title: 'Hello' });
+ */
+export function driftPlugin(options: DriftPluginOptions = {}): Plugin {
+  const { debug = false } = options;
+
+  return {
+    name: 'vite-plugin-drift',
+
+    // Run before Vite's own asset / JSON transforms.
+    enforce: 'pre',
+
+    /**
+     * Transform hook: invoked for every file Vite processes.
+     * Compiles `.drift` source and returns synthetic ESM.
+     */
+    transform(src, id) {
+      const cleanId = id.split('?')[0] ?? id;
+      if (!cleanId.endsWith(DRIFT_EXT)) return null;
+
+      let mod: CompiledModule;
+      try {
+        mod = compile(src, debug);
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err);
+        this.error(`[DriftJS] Compilation failed in "${id}":\n${msg}`);
+      }
+
+      return {
+        code: generateESM(mod!, id),
+        // No meaningful source-map for generated code.
+        map: null,
+      };
+    },
+
+    /**
+     * HMR hook: invalidates and triggers a full-reload whenever a `.drift`
+     * source file is saved during `vite dev`.
+     */
+    handleHotUpdate({ file, server }) {
+      const cleanFile = file.split('?')[0] ?? file;
+      if (!cleanFile.endsWith(DRIFT_EXT)) return;
+
+      const mod = server.moduleGraph.getModuleById(file) || server.moduleGraph.getModuleById(cleanFile);
+      if (mod) server.moduleGraph.invalidateModule(mod);
+
+      server.ws.send({ type: 'full-reload', path: '*' });
+    },
+  };
+}
+
+export default driftPlugin;

package/tests/plugin.test.ts

@@ -0,0 +1,151 @@
+import { describe, it, expect, vi } from 'vitest';
+import { driftPlugin } from '../src/index.js';
+import type { Plugin } from 'vite';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function makePlugin(opts = {}): Plugin {
+  return driftPlugin(opts) as Plugin;
+}
+
+/**
+ * Calls the plugin's `transform` hook with a `.drift` source string.
+ * Returns the generated code string, or null if the plugin skipped the file.
+ */
+function transform(plugin: Plugin, src: string, id = 'test.drift'): string | null {
+  const hook = plugin.transform as (src: string, id: string) => { code: string; map: null } | null;
+  const result = hook.call({ error: (msg: string) => { throw new Error(msg); } } as any, src, id);
+  return result?.code ?? null;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tests
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('driftPlugin – identity', () => {
+  it('ignores non-.drift files', () => {
+    const plugin = makePlugin();
+    const result = transform(plugin, '<div>hello</div>', 'app.ts');
+    expect(result).toBeNull();
+  });
+
+  it('transforms .drift files', () => {
+    const plugin = makePlugin();
+    const code = transform(plugin, '<p>Hello</p>');
+    expect(code).not.toBeNull();
+  });
+});
+
+describe('driftPlugin – emitted ESM structure', () => {
+  it('exports default compiledModule', () => {
+    const plugin = makePlugin();
+    const code = transform(plugin, '<h1>Drift</h1>')!;
+
+    expect(code).toContain('const compiledModule =');
+    expect(code).toContain('export default compiledModule;');
+  });
+
+  it('includes the source file path in a comment', () => {
+    const plugin = makePlugin();
+    const code = transform(plugin, '<div/>', '/project/hero.drift')!;
+    expect(code).toContain('hero.drift');
+  });
+
+  it('compiledModule has bytecode and constants arrays', () => {
+    const plugin = makePlugin();
+    const code = transform(plugin, '<div>test</div>')!;
+    expect(code).toMatch(/bytecode:\s*(new Uint32Array\(|\[)/);
+    expect(code).toMatch(/constants:\s*\[/);
+  });
+});
+
+describe('driftPlugin – compilation correctness', () => {
+  it('compiles a static element without throwing', () => {
+    const plugin = makePlugin();
+    expect(() => transform(plugin, '<section class="hero"><h1>Title</h1></section>')).not.toThrow();
+  });
+
+  it('compiles @if / @else directives', () => {
+    const plugin = makePlugin();
+    const src = '@if show { <p>Visible</p> } @else { <p>Hidden</p> }';
+    expect(() => transform(plugin, src)).not.toThrow();
+  });
+
+  it('compiles @for loops', () => {
+    const plugin = makePlugin();
+    const src = '<ul>@for item in items { <li>{item}</li> }</ul>';
+    expect(() => transform(plugin, src)).not.toThrow();
+  });
+
+  it('compiles interpolations', () => {
+    const plugin = makePlugin();
+    const src = '<p>{greeting}, {name}!</p>';
+    expect(() => transform(plugin, src)).not.toThrow();
+  });
+
+  it('surfaces DriftJS compilation errors as Vite build errors', () => {
+    const plugin = makePlugin();
+    // Unclosed tag — should throw via this.error()
+    expect(() => transform(plugin, '<div>')).toThrow(/DriftJS.*Compilation failed/i);
+  });
+});
+
+describe('driftPlugin – debug option', () => {
+  it('calls console.log when debug: true', () => {
+    const spy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    const plugin = makePlugin({ debug: true });
+    transform(plugin, '<p>Debug</p>');
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  it('does not call console.log when debug: false (default)', () => {
+    const spy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    const plugin = makePlugin();
+    transform(plugin, '<p>Quiet</p>');
+    expect(spy).not.toHaveBeenCalled();
+    spy.mockRestore();
+  });
+});
+
+describe('driftPlugin – HMR', () => {
+  it('triggers a full-reload for .drift files', () => {
+    const plugin = makePlugin();
+    const send = vi.fn();
+    const invalidateModule = vi.fn();
+    const fakeModule = { id: '/project/hero.drift' };
+
+    const ctx = {
+      file: '/project/hero.drift',
+      server: {
+        moduleGraph: {
+          getModuleById: vi.fn().mockReturnValue(fakeModule),
+          invalidateModule,
+        },
+        ws: { send },
+      },
+    };
+
+    const hook = plugin.handleHotUpdate as (ctx: typeof ctx) => void;
+    hook(ctx as any);
+
+    expect(invalidateModule).toHaveBeenCalledWith(fakeModule);
+    expect(send).toHaveBeenCalledWith({ type: 'full-reload', path: '*' });
+  });
+
+  it('ignores non-.drift files in HMR', () => {
+    const plugin = makePlugin();
+    const send = vi.fn();
+
+    const ctx = {
+      file: '/project/app.ts',
+      server: { moduleGraph: { getModuleById: vi.fn() }, ws: { send } },
+    };
+
+    const hook = plugin.handleHotUpdate as (ctx: typeof ctx) => void;
+    hook(ctx as any);
+    expect(send).not.toHaveBeenCalled();
+  });
+});

package/tsconfig.json

@@ -0,0 +1 @@
+{ "extends": "../../tsconfig.json" }

package/types/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Options accepted by the `driftPlugin()` factory.
+ */
+
+export interface DriftPluginOptions {
+  /**
+   * Emit verbose compiler debug output (transformed AST + bytecode) to the
+   * Vite dev-server console for every transformed .drift file.
+   * @default false
+   */
+  debug?: boolean;
+}
+
+/**
+ * Shape of the ESM module emitted by the plugin for every `.drift` file.
+ * Consumers can import these types when working with `.drift` imports in TS.
+ *
+ * @example
+ * import type { DriftModule } from 'driftjs-vite-plugin';
+ * import * as tpl from './hero.drift';
+ * const m: DriftModule = tpl;
+ */
+export type DriftModule = import('driftjs-compiler').CompiledModule;
+
+/** File extension this plugin owns. */
+export const DRIFT_EXT = '.drift' as const;

package/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+  },
+  build: {
+    outDir: 'dist',
+    minify: true,
+    emptyOutDir: true,
+    lib: {
+      formats: ['es', 'cjs'],
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'DriftVitePlugin',
+      fileName: (format: string) => `index-${format}.js`,
+    },
+    rollupOptions: {
+      external: [
+        'vite',
+        /^node:/,
+        /^@driftjs\//,
+      ],
+    },
+  },
+});