@vizejs/vite-plugin 0.0.1-alpha.8

package/README.md

@@ -0,0 +1,214 @@
+# @vizejs/vite-plugin
+
+High-performance native Vite plugin for Vue SFC compilation powered by [Vize](https://github.com/ubugeeei/vize).
+
+## Features
+
+- **Native Performance**: Uses Rust-based compiler via Node.js native bindings (NAPI)
+- **Pre-compilation**: All `.vue` files are compiled at server startup for instant module resolution
+- **Virtual Modules**: Compiled code is served from memory as virtual modules
+- **HMR Support**: Hot Module Replacement with automatic re-compilation on file changes
+- **Vapor Mode**: Optional support for Vue Vapor mode compilation
+
+## Installation
+
+```bash
+# npm
+npm install @vizejs/vite-plugin
+
+# pnpm
+pnpm add @vizejs/vite-plugin
+
+# yarn
+yarn add @vizejs/vite-plugin
+```
+
+## Usage
+
+### Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { vizeNative } from '@vizejs/vite-plugin'
+
+export default defineConfig({
+  plugins: [
+    vizeNative({
+      // options
+    })
+  ]
+})
+```
+
+### Nuxt
+
+For Nuxt 3, add the plugin to your `nuxt.config.ts`:
+
+```ts
+// nuxt.config.ts
+import { vizeNative } from '@vizejs/vite-plugin'
+
+export default defineNuxtConfig({
+  vite: {
+    plugins: [
+      vizeNative({
+        // Exclude Nuxt's internal .vue files if needed
+        exclude: [/node_modules/, /#/, /\.nuxt/]
+      })
+    ]
+  },
+
+  // Disable the default Vue plugin
+  vue: {
+    propsDestructure: false
+  }
+})
+```
+
+**Note**: When using with Nuxt, you may need to disable Nuxt's built-in Vue plugin to avoid conflicts:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  hooks: {
+    'vite:extendConfig': (config) => {
+      // Remove @vitejs/plugin-vue from plugins
+      config.plugins = config.plugins?.filter(
+        (p) => p && (Array.isArray(p) ? p[0] : p).name !== 'vite:vue'
+      )
+    }
+  },
+  vite: {
+    plugins: [
+      vizeNative()
+    ]
+  }
+})
+```
+
+## Options
+
+```ts
+interface VizeNativeOptions {
+  /**
+   * Files to include in compilation
+   * @default /\.vue$/
+   */
+  include?: string | RegExp | (string | RegExp)[]
+
+  /**
+   * Files to exclude from compilation
+   * @default /node_modules/
+   */
+  exclude?: string | RegExp | (string | RegExp)[]
+
+  /**
+   * Force production mode
+   * @default auto-detected from Vite config
+   */
+  isProduction?: boolean
+
+  /**
+   * Enable SSR mode
+   * @default false
+   */
+  ssr?: boolean
+
+  /**
+   * Enable source map generation
+   * @default true in development, false in production
+   */
+  sourceMap?: boolean
+
+  /**
+   * Enable Vapor mode compilation
+   * @default false
+   */
+  vapor?: boolean
+
+  /**
+   * Root directory to scan for .vue files
+   * @default Vite's root
+   */
+  root?: string
+
+  /**
+   * Glob patterns to scan for .vue files during pre-compilation
+   * @default ['**\/*.vue']
+   */
+  scanPatterns?: string[]
+
+  /**
+   * Glob patterns to ignore during pre-compilation
+   * @default ['node_modules/**', 'dist/**', '.git/**']
+   */
+  ignorePatterns?: string[]
+}
+```
+
+## How It Works
+
+### Pre-compilation at Startup
+
+When the Vite dev server starts (or build begins), the plugin:
+
+1. Scans the project root for all `.vue` files matching the configured patterns
+2. Compiles each file using the native Vize compiler
+3. Stores the compiled JavaScript and CSS in an in-memory cache
+
+This approach leverages Vize's exceptional performance - compiling 15,000 SFC files in under 500ms with multi-threading.
+
+### Virtual Module Resolution
+
+When Vite requests a `.vue` file:
+
+1. The plugin intercepts the module resolution
+2. Returns the pre-compiled code from cache (or compiles on-demand if not cached)
+3. CSS is injected inline with deduplication support
+
+### HMR (Hot Module Replacement)
+
+When a `.vue` file changes:
+
+1. The plugin detects the change via `handleHotUpdate`
+2. Re-compiles only the changed file
+3. Updates the cache
+4. Vite handles the rest of the HMR flow
+
+## Performance
+
+Vize's native compiler is significantly faster than the official Vue compiler:
+
+| Benchmark (15,000 SFCs) | @vue/compiler-sfc | Vize | Speedup |
+|-------------------------|-------------------|------|---------|
+| Single-threaded | 16.21s | 6.65s | **2.4x** |
+| Multi-threaded | 4.13s | 498ms | **8.3x** |
+
+## Comparison with vite-plugin-vize
+
+| Feature | vite-plugin-vize | vite-plugin-vize |
+|---------|------------------|-------------------------|
+| Compiler | WASM | Native (NAPI) |
+| Pre-compilation | No | Yes |
+| Module Loading | Transform | Virtual Module (Load) |
+| Performance | Fast | Fastest |
+| Platform | Any | Node.js only |
+
+Use `vite-plugin-vize` (WASM-based) when you need:
+- Browser compatibility (e.g., StackBlitz, WebContainers)
+- Platform-independent deployment
+
+Use `vite-plugin-vize` when you need:
+- Maximum performance
+- Server-side only (standard Node.js environment)
+
+## Requirements
+
+- Node.js 18+
+- Vite 5.0+ / 6.0+ / 7.0+
+- Vue 3.x
+
+## License
+
+MIT

package/dist/compiler.d.ts

@@ -0,0 +1,6 @@
+import type { CompileSfcFn, CompiledModule } from './types.js';
+export declare function loadNative(): CompileSfcFn;
+export declare function compileFile(filePath: string, cache: Map<string, CompiledModule>, options: {
+    sourceMap: boolean;
+    ssr: boolean;
+}, source?: string): CompiledModule;

package/dist/compiler.js

@@ -0,0 +1,46 @@
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
+import { generateScopeId } from './utils.js';
+const require = createRequire(import.meta.url);
+let compileSfc = null;
+export function loadNative() {
+    if (compileSfc)
+        return compileSfc;
+    try {
+        const native = require('@vizejs/native');
+        compileSfc = native.compileSfc;
+        return compileSfc;
+    }
+    catch (e) {
+        throw new Error(`Failed to load @vizejs/native. Make sure it's installed and built:\n${e}`);
+    }
+}
+export function compileFile(filePath, cache, options, source) {
+    const compile = loadNative();
+    const content = source ?? fs.readFileSync(filePath, 'utf-8');
+    const scopeId = generateScopeId(filePath);
+    const hasScoped = /<style[^>]*\bscoped\b/.test(content);
+    const result = compile(content, {
+        filename: filePath,
+        sourceMap: options.sourceMap,
+        ssr: options.ssr,
+        scopeId: hasScoped ? `data-v-${scopeId}` : undefined,
+    });
+    if (result.errors.length > 0) {
+        const errorMsg = result.errors.join('\n');
+        console.error(`[vize] Compilation error in ${filePath}:\n${errorMsg}`);
+    }
+    if (result.warnings.length > 0) {
+        result.warnings.forEach((warning) => {
+            console.warn(`[vize] Warning in ${filePath}: ${warning}`);
+        });
+    }
+    const compiled = {
+        code: result.code,
+        css: result.css,
+        scopeId,
+        hasScoped,
+    };
+    cache.set(filePath, compiled);
+    return compiled;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vite';
+import type { VizeOptions, CompiledModule } from './types.js';
+export type { VizeOptions, CompiledModule };
+export declare function vize(options?: VizeOptions): Plugin;
+export default vize;

package/dist/index.js

@@ -0,0 +1,141 @@
+import path from 'node:path';
+import { glob } from 'tinyglobby';
+import { compileFile } from './compiler.js';
+import { createFilter, generateOutput } from './utils.js';
+const VIRTUAL_PREFIX = '\0vize:';
+export function vize(options = {}) {
+    const filter = createFilter(options.include, options.exclude);
+    const cache = new Map();
+    // Map from virtual ID to real file path
+    const virtualToReal = new Map();
+    let isProduction;
+    let root;
+    let server = null;
+    const scanPatterns = options.scanPatterns ?? ['**/*.vue'];
+    const ignorePatterns = options.ignorePatterns ?? [
+        'node_modules/**',
+        'dist/**',
+        '.git/**',
+    ];
+    async function compileAll() {
+        const startTime = performance.now();
+        const files = await glob(scanPatterns, {
+            cwd: root,
+            ignore: ignorePatterns,
+            absolute: true,
+        });
+        console.log(`[vize] Pre-compiling ${files.length} Vue files...`);
+        let successCount = 0;
+        let errorCount = 0;
+        for (const file of files) {
+            try {
+                compileFile(file, cache, {
+                    sourceMap: options.sourceMap ?? !isProduction,
+                    ssr: options.ssr ?? false,
+                });
+                successCount++;
+            }
+            catch (e) {
+                errorCount++;
+                console.error(`[vize] Failed to compile ${file}:`, e);
+            }
+        }
+        const elapsed = (performance.now() - startTime).toFixed(2);
+        console.log(`[vize] Pre-compilation complete: ${successCount} succeeded, ${errorCount} failed (${elapsed}ms)`);
+    }
+    function resolveVuePath(id, importer) {
+        let resolved;
+        if (path.isAbsolute(id)) {
+            resolved = id;
+        }
+        else if (importer) {
+            // Remove virtual prefix from importer if present
+            const realImporter = importer.startsWith(VIRTUAL_PREFIX)
+                ? virtualToReal.get(importer) ?? importer.slice(VIRTUAL_PREFIX.length)
+                : importer;
+            resolved = path.resolve(path.dirname(realImporter), id);
+        }
+        else {
+            resolved = path.resolve(root, id);
+        }
+        return path.normalize(resolved);
+    }
+    return {
+        name: 'vite-plugin-vize',
+        enforce: 'pre',
+        configResolved(resolvedConfig) {
+            isProduction = options.isProduction ?? resolvedConfig.isProduction;
+            root = options.root ?? resolvedConfig.root;
+        },
+        configureServer(devServer) {
+            server = devServer;
+        },
+        async buildStart() {
+            await compileAll();
+        },
+        resolveId(id, importer) {
+            if (id.includes('?vue&type=style')) {
+                return id;
+            }
+            if (id.endsWith('.vue')) {
+                const resolved = resolveVuePath(id, importer);
+                // Return virtual module ID if cached
+                if (cache.has(resolved)) {
+                    const virtualId = VIRTUAL_PREFIX + resolved;
+                    virtualToReal.set(virtualId, resolved);
+                    return virtualId;
+                }
+            }
+            return null;
+        },
+        load(id) {
+            if (id.includes('?vue&type=style')) {
+                const [filename] = id.split('?');
+                const realPath = filename.startsWith(VIRTUAL_PREFIX)
+                    ? virtualToReal.get(filename) ?? filename.slice(VIRTUAL_PREFIX.length)
+                    : filename;
+                const compiled = cache.get(realPath);
+                if (compiled?.css) {
+                    return compiled.css;
+                }
+                return '';
+            }
+            // Handle virtual module
+            if (id.startsWith(VIRTUAL_PREFIX)) {
+                const realPath = virtualToReal.get(id) ?? id.slice(VIRTUAL_PREFIX.length);
+                const compiled = cache.get(realPath);
+                if (compiled) {
+                    return {
+                        code: generateOutput(compiled, isProduction, server !== null),
+                        map: null,
+                    };
+                }
+            }
+            return null;
+        },
+        async handleHotUpdate(ctx) {
+            const { file, server, read } = ctx;
+            if (file.endsWith('.vue') && filter(file)) {
+                try {
+                    const source = await read();
+                    compileFile(file, cache, {
+                        sourceMap: options.sourceMap ?? !isProduction,
+                        ssr: options.ssr ?? false,
+                    }, source);
+                    console.log(`[vize] Re-compiled: ${path.relative(root, file)}`);
+                }
+                catch (e) {
+                    console.error(`[vize] Re-compilation failed for ${file}:`, e);
+                }
+                // Find the virtual module for this file
+                const virtualId = VIRTUAL_PREFIX + file;
+                const modules = server.moduleGraph.getModulesByFile(virtualId)
+                    ?? server.moduleGraph.getModulesByFile(file);
+                if (modules) {
+                    return [...modules];
+                }
+            }
+        },
+    };
+}
+export default vize;

package/dist/types.d.ts

@@ -0,0 +1,66 @@
+export interface SfcCompileOptionsNapi {
+    filename?: string;
+    sourceMap?: boolean;
+    ssr?: boolean;
+    scopeId?: string;
+}
+export interface SfcCompileResultNapi {
+    code: string;
+    css?: string;
+    errors: string[];
+    warnings: string[];
+}
+export type CompileSfcFn = (source: string, options?: SfcCompileOptionsNapi) => SfcCompileResultNapi;
+export interface VizeOptions {
+    /**
+     * Files to include in compilation
+     * @default /\.vue$/
+     */
+    include?: string | RegExp | (string | RegExp)[];
+    /**
+     * Files to exclude from compilation
+     * @default /node_modules/
+     */
+    exclude?: string | RegExp | (string | RegExp)[];
+    /**
+     * Force production mode
+     * @default auto-detected from Vite config
+     */
+    isProduction?: boolean;
+    /**
+     * Enable SSR mode
+     * @default false
+     */
+    ssr?: boolean;
+    /**
+     * Enable source map generation
+     * @default true in development, false in production
+     */
+    sourceMap?: boolean;
+    /**
+     * Enable Vapor mode compilation
+     * @default false
+     */
+    vapor?: boolean;
+    /**
+     * Root directory to scan for .vue files
+     * @default Vite's root
+     */
+    root?: string;
+    /**
+     * Glob patterns to scan for .vue files during pre-compilation
+     * @default ['**\/*.vue']
+     */
+    scanPatterns?: string[];
+    /**
+     * Glob patterns to ignore during pre-compilation
+     * @default ['node_modules/**', 'dist/**', '.git/**']
+     */
+    ignorePatterns?: string[];
+}
+export interface CompiledModule {
+    code: string;
+    css?: string;
+    scopeId: string;
+    hasScoped: boolean;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+import type { CompiledModule } from './types.js';
+export declare function generateScopeId(filename: string): string;
+export declare function createFilter(include?: string | RegExp | (string | RegExp)[], exclude?: string | RegExp | (string | RegExp)[]): (id: string) => boolean;
+export declare function generateOutput(compiled: CompiledModule, isProduction: boolean, isDev: boolean): string;

package/dist/utils.js

@@ -0,0 +1,71 @@
+import { createHash } from 'node:crypto';
+export function generateScopeId(filename) {
+    const hash = createHash('sha256').update(filename).digest('hex');
+    return hash.slice(0, 8);
+}
+export function createFilter(include, exclude) {
+    const includePatterns = include
+        ? Array.isArray(include)
+            ? include
+            : [include]
+        : [/\.vue$/];
+    const excludePatterns = exclude
+        ? Array.isArray(exclude)
+            ? exclude
+            : [exclude]
+        : [/node_modules/];
+    return (id) => {
+        const matchInclude = includePatterns.some((pattern) => typeof pattern === 'string' ? id.includes(pattern) : pattern.test(id));
+        const matchExclude = excludePatterns.some((pattern) => typeof pattern === 'string' ? id.includes(pattern) : pattern.test(id));
+        return matchInclude && !matchExclude;
+    };
+}
+export function generateOutput(compiled, isProduction, isDev) {
+    let output = compiled.code;
+    // Rewrite "export default" to named variable for HMR
+    const hasExportDefault = output.includes('export default');
+    if (hasExportDefault) {
+        output = output.replace('export default', 'const _sfc_main =');
+        output += '\nexport default _sfc_main;';
+    }
+    // Inject CSS
+    if (compiled.css) {
+        const cssCode = JSON.stringify(compiled.css);
+        const cssId = JSON.stringify(`vize-style-${compiled.scopeId}`);
+        output = `
+const __vize_css__ = ${cssCode};
+const __vize_css_id__ = ${cssId};
+(function() {
+  if (typeof document !== 'undefined') {
+    let style = document.getElementById(__vize_css_id__);
+    if (!style) {
+      style = document.createElement('style');
+      style.id = __vize_css_id__;
+      style.textContent = __vize_css__;
+      document.head.appendChild(style);
+    } else {
+      style.textContent = __vize_css__;
+    }
+  }
+})();
+${output}`;
+    }
+    // Add HMR support in development
+    if (!isProduction && isDev && hasExportDefault) {
+        output += `
+if (import.meta.hot) {
+  _sfc_main.__hmrId = ${JSON.stringify(compiled.scopeId)};
+  import.meta.hot.accept((mod) => {
+    if (!mod) return;
+    const { default: updated } = mod;
+    if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {
+      __VUE_HMR_RUNTIME__.reload(_sfc_main.__hmrId, updated);
+    }
+  });
+  if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {
+    __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main);
+  }
+}`;
+    }
+    return output;
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@vizejs/vite-plugin",
+  "version": "0.0.1-alpha.8",
+  "description": "High-performance native Vite plugin for Vue SFC compilation powered by Vize",
+  "publishConfig": {
+    "provenance": false,
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vite",
+    "vue",
+    "plugin",
+    "sfc",
+    "compiler",
+    "native",
+    "fast"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@vizejs/native": "workspace:*",
+    "tinyglobby": "^0.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "~5.6.0",
+    "vite": "^7.3.1"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+  }
+}