@fluixi/compiler 1.0.0-alpha.73 → 1.0.0-alpha.74

package/dist/integrations.js

@@ -2,370 +2,18 @@
  * @fileoverview Bundler integrations for the Fluixi compiler.
  * @module @fluixi/compiler/integrations
  *
- * Build-tool adapters (vite/webpack/rollup/esbuild) plus the prop/template
- * analysis helpers that drive them. These wrap the babel front-end so a single
- * package owns all compile-time code. @fluixi/core re-exports
+ * vite, webpack, rollup and esbuild adapters. Each is a few lines around
+ * `compileModule`, which rewrites the source in place — JSX and `` html`` `` both
+ * lower to the shared IR and the imperative backend. @fluixi/core re-exports
  * createVitePlugin from here.
  *
- * Helpers:
- * - Detecting reactive expressions
- * - Wrapping signals for optimal updates
- * - Template optimization
- * - Static vs dynamic prop detection
+ * `babel: true` routes through the babel front-end instead, for a project whose
+ * own babel plugins have to see the output. It is the only thing that needs
+ * @babel/core, and it says so rather than degrading: source that was not compiled
+ * is source whose templates never became DOM calls, and a build that ships it
+ * looks successful until the page is opened.
  */
 // ============================================================================
-// Constants
-// ============================================================================
-const STATIC_PROPS = new Set(['key', 'ref', 'children']);
-const REACTIVE_PATTERNS = [
-    // Signal accessor patterns
-    /\(\)\s*=>/, // Arrow function
-    /function\s*\(\)/, // Function expression
-    /\w+\(\)/, // Function call that might be accessor
-    // Store patterns
-    /\w+\.\w+/, // Property access (might be store proxy)
-    /\w+\[.+\]/, // Bracket notation
-    // Reactive operators
-    /createSignal/,
-    /createStore/,
-    /createMemo/,
-    /createEffect/,
-];
-const EVENT_PATTERN = /^on[A-Z]/;
-// ============================================================================
-// Prop Analysis
-// ============================================================================
-/**
- * Analyze a prop to determine if it's static or dynamic
- */
-export function analyzeProp(name, value) {
-    const analysis = {
-        name,
-        isStatic: true,
-        isReactive: false,
-        isEvent: EVENT_PATTERN.test(name),
-        isRef: name === 'ref',
-        isSpread: name.startsWith('...'),
-    };
-    // Static props are always static
-    if (STATIC_PROPS.has(name)) {
-        return analysis;
-    }
-    // Events and refs are handled specially
-    if (analysis.isEvent || analysis.isRef) {
-        analysis.isStatic = false;
-        return analysis;
-    }
-    // Check if value appears reactive
-    if (typeof value === 'string') {
-        const code = value;
-        // Check for reactive patterns
-        for (const pattern of REACTIVE_PATTERNS) {
-            if (pattern.test(code)) {
-                analysis.isStatic = false;
-                analysis.isReactive = true;
-                break;
-            }
-        }
-        // Check for template literals with expressions
-        if (code.includes('${')) {
-            analysis.isStatic = false;
-            analysis.isReactive = true;
-        }
-    }
-    else if (typeof value === 'function') {
-        // Functions are potentially reactive
-        analysis.isStatic = false;
-        analysis.isReactive = true;
-    }
-    else if (typeof value === 'object' && value !== null) {
-        // Objects might contain reactive values
-        analysis.isStatic = false;
-    }
-    return analysis;
-}
-/**
- * Analyze all props on an element
- */
-export function analyzeProps(props) {
-    const analyses = new Map();
-    for (const [name, value] of Object.entries(props)) {
-        analyses.set(name, analyzeProp(name, value));
-    }
-    return analyses;
-}
-// ============================================================================
-// Template Detection
-// ============================================================================
-/**
- * Check if JSX should be compiled to lit-html template
- */
-export function shouldUseLitTemplate(tag, props, children) {
-    // Native elements can use lit-html
-    if (typeof tag !== 'string') {
-        return false;
-    }
-    // Check if all props are compatible with lit-html
-    const propAnalyses = analyzeProps(props);
-    for (const analysis of propAnalyses.values()) {
-        // Spread props require native JSX
-        if (analysis.isSpread) {
-            return false;
-        }
-        // Complex reactive props might be better in native JSX
-        if (analysis.isReactive && !analysis.isEvent) {
-            // Allow simple reactive bindings in lit-html
-            // but complex ones are better in native JSX
-        }
-    }
-    return true;
-}
-/**
- * Check if a value is a lit-html template
- */
-export function isLitTemplate(value) {
-    return value && typeof value === 'object' && '_$litType$' in value;
-}
-// ============================================================================
-// Code Generation Helpers
-// ============================================================================
-/**
- * Generate code for creating an element
- */
-export function generateCreateElement(tag, props, children, options = {}) {
-    const isSVG = ['svg', 'path', 'circle', 'rect', 'g'].includes(tag);
-    // Generate props code
-    const propsCode = generatePropsCode(props, options);
-    // Generate children code
-    const childrenCode = children.length > 0 ? `, ${generateChildrenCode(children)}` : '';
-    if (options.useLitHTML !== false &&
-        shouldUseLitTemplate(tag, props, children)) {
-        return generateLitHTMLTemplate(tag, props, children, isSVG);
-    }
-    return `jsx('${tag}', ${propsCode}${childrenCode})`;
-}
-/**
- * Generate code for props object
- */
-export function generatePropsCode(props, options = {}) {
-    if (Object.keys(props).length === 0) {
-        return '{}';
-    }
-    const propAnalyses = analyzeProps(props);
-    const entries = [];
-    for (const [name, value] of Object.entries(props)) {
-        const analysis = propAnalyses.get(name);
-        if (analysis.isReactive && !analysis.isStatic) {
-            // Wrap reactive values
-            entries.push(`${name}: () => ${value}`);
-        }
-        else if (typeof value === 'string') {
-            entries.push(`${name}: "${value}"`);
-        }
-        else if (typeof value === 'number' || typeof value === 'boolean') {
-            entries.push(`${name}: ${value}`);
-        }
-        else {
-            entries.push(`${name}: ${value}`);
-        }
-    }
-    return `{ ${entries.join(', ')} }`;
-}
-/**
- * Generate code for children
- */
-export function generateChildrenCode(children) {
-    if (children.length === 0) {
-        return 'undefined';
-    }
-    if (children.length === 1) {
-        return String(children[0]);
-    }
-    return `[${children.join(', ')}]`;
-}
-/**
- * Generate lit-html template code
- */
-export function generateLitHTMLTemplate(tag, props, children, isSVG = false) {
-    const templateFunc = isSVG ? 'svg' : 'html';
-    // Build template string
-    let template = `<${tag}`;
-    const values = [];
-    // Add props
-    for (const [name, value] of Object.entries(props)) {
-        if (name === 'children' || name === 'key' || name === 'ref') {
-            continue;
-        }
-        const analysis = analyzeProp(name, value);
-        if (analysis.isEvent) {
-            const eventName = name.slice(2).toLowerCase();
-            template += ` @${eventName}=\${${values.length}}`;
-            values.push(String(value));
-        }
-        else if (analysis.isReactive) {
-            template += ` ${name}=\${${values.length}}`;
-            values.push(`signal(() => ${value})`);
-        }
-        else if (typeof value === 'string') {
-            template += ` ${name}="${value}"`;
-        }
-        else {
-            template += ` ${name}=\${${values.length}}`;
-            values.push(String(value));
-        }
-    }
-    template += '>';
-    // Add children
-    if (children.length > 0) {
-        for (const child of children) {
-            if (typeof child === 'string') {
-                template += child;
-            }
-            else {
-                template += `\${${values.length}}`;
-                values.push(String(child));
-            }
-        }
-    }
-    template += `</${tag}>`;
-    // Generate template literal
-    return `${templateFunc}\`${template}\`${values.length > 0 ? `, ${values.join(', ')}` : ''}`;
-}
-// ============================================================================
-// Optimization Passes
-// ============================================================================
-/**
- * Optimize static content
- */
-export function optimizeStatic(code) {
-    // Combine consecutive static strings
-    code = code.replace(/jsx\('([^']+)',\s*{},\s*"([^"]+)"\s*\)/g, (_, tag, text) => `_$staticNode('${tag}', '${text}')`);
-    return code;
-}
-/**
- * Optimize prop spreads
- */
-export function optimizeSpreads(code) {
-    // DISABLED: This string-based transformation was incorrectly transforming JSX spreads
-    // The babel plugin handles spread attributes properly using Object.assign
-    // This was causing spread(storeProxy) to be called instead of proper prop merging
-    return code;
-}
-/**
- * Hoist static elements
- */
-export function hoistStatic(code) {
-    const hoisted = [];
-    let counter = 0;
-    // Find static JSX elements
-    code = code.replace(/jsx\('([^']+)',\s*{([^}]*)},\s*([^)]*)\)/g, (match, tag, props, children) => {
-        // Simple heuristic: if no reactive props, hoist
-        if (!props.includes('()') && !props.includes('=>')) {
-            const varName = `_$static${counter++}`;
-            hoisted.push(`const ${varName} = ${match};`);
-            return varName;
-        }
-        return match;
-    });
-    if (hoisted.length > 0) {
-        return hoisted.join('\n') + '\n' + code;
-    }
-    return code;
-}
-// ============================================================================
-// Event Delegation
-// ============================================================================
-/**
- * Generate event delegation setup
- */
-export function generateEventDelegation(events, options = {}) {
-    const delegatedEvents = options.delegatedEvents || [
-        'click',
-        'input',
-        'change',
-        'submit',
-    ];
-    const filtered = events.filter((e) => delegatedEvents.includes(e.toLowerCase()));
-    if (filtered.length === 0) {
-        return '';
-    }
-    return `delegateEvents([${filtered.map((e) => `'${e}'`).join(', ')}]);`;
-}
-// ============================================================================
-// Transform Pipeline
-// ============================================================================
-/**
- * Transform JSX code with optimizations
- */
-export function transform(code, options = {}) {
-    const metadata = {
-        hasSignals: /createSignal|signal\(/.test(code),
-        hasStores: /createStore|store\(/.test(code),
-        hasLitHTML: /html`|svg`/.test(code),
-        staticProps: new Set(),
-        dynamicProps: new Set(),
-        components: new Set(),
-    };
-    let transformed = code;
-    // Apply optimizations
-    if (options.optimize !== false) {
-        transformed = optimizeStatic(transformed);
-        // optimizeSpreads is disabled - babel plugin handles spreads correctly
-        // transformed = optimizeSpreads(transformed);
-        transformed = hoistStatic(transformed);
-    }
-    // Add event delegation if needed
-    if (options.delegateEvents !== false) {
-        const events = extractEvents(code);
-        const delegation = generateEventDelegation(events, options);
-        if (delegation) {
-            transformed = delegation + '\n' + transformed;
-        }
-    }
-    // Add imports if needed
-    transformed = addImports(transformed, metadata, options);
-    return {
-        code: transformed,
-        metadata,
-    };
-}
-/**
- * Extract event names from code
- */
-function extractEvents(code) {
-    const events = new Set();
-    const regex = /on([A-Z][a-z]+)/g;
-    let match;
-    while ((match = regex.exec(code)) !== null) {
-        events.add(match[1].toLowerCase());
-    }
-    return Array.from(events);
-}
-/**
- * Add necessary imports
- */
-function addImports(code, metadata, options) {
-    const imports = [];
-    const source = options.importSource || '@fluixi/jsx';
-    // Always import jsx basics
-    imports.push(`import { jsx, jsxs, Fragment, spread } from '${source}';`);
-    // Import signal directive if needed
-    if (metadata.hasSignals) {
-        imports.push(`import { signal } from '@fluixi/dom/reactive';`);
-    }
-    // Import control flow if used
-    if (code.includes('<Show') ||
-        code.includes('<For') ||
-        code.includes('<Switch')) {
-        imports.push(`import { Show, For, Index, Switch, Match } from '@fluixi/dom/control-flow';`);
-    }
-    // Import event delegation if used
-    if (options.delegateEvents !== false) {
-        imports.push(`import { delegateEvents } from '@fluixi/dom/runtime';`);
-    }
-    return imports.join('\n') + '\n\n' + code;
-}
-// ============================================================================
 // Babel Plugin Helpers
 // ============================================================================
 /**
@@ -387,26 +35,9 @@ export async function createBabelPlugin(options = {}) {
         // Provide options mapping
         getOptions() {
             return {
-                runtime: 'automatic',
                 importSource: options.importSource || '@fluixi/jsx',
-                pragma: options.pragma || 'jsx',
-                pragmaFrag: options.pragmaFrag || 'Fragment',
                 development: options.development || false,
-                detectReactivity: true,
-                useLitHTML: options.useLitHTML !== false,
-                hoistStatics: options.optimize !== false,
                 delegateEvents: options.delegateEvents !== false,
-                delegatedEvents: options.delegatedEvents || [
-                    'click',
-                    'input',
-                    'change',
-                    'submit',
-                ],
-                optimizeControlFlow: options.optimize !== false,
-                sourceMaps: options.sourceMaps !== false,
-                // Codegen backend selection (default 'imperative').
-                backend: options.backend || 'imperative',
-                ...(options.codegen ? { codegen: options.codegen } : {}),
                 ...(options.format ? { format: options.format } : {}),
                 // Forwarded explicitly: getOptions() is an allowlist, so an option missing
                 // here is silently dropped rather than rejected.
@@ -499,26 +130,24 @@ export function createVitePlugin(options = {}) {
                 console.warn(outcome.warning);
         },
         async transform(code, id) {
-            // Load babel plugin dynamically on first transform
-            const babelPlugin = await createBabelPlugin(options);
             // Only process JSX/TSX files
-            // if (!/\.[jt]sx$/.test(id)) {
             if (!/\.(jsx|tsx|ts)$/i.test(id)) {
                 return null;
             }
-            // console.log('[createVitePlugin] Transforming file:', id);
+            if (!options.babel)
+                return compileModule(code, id, options);
+            const babelPlugin = await createBabelPlugin(options);
             try {
                 // Use dynamic import instead of require for ESM compatibility
                 const babel = await import('@babel/core').catch(() => null);
                 if (!babel) {
-                    // console.log('[createVitePlugin] Babel not found, using fallback');
-                    // Fallback to simple transform
-                    return {
-                        code: transform(code, options).code,
-                        map: null,
-                    };
+                    // No silent fallback. This front-end compiles through babel; without it
+                    // there is no transform, and emitting the source unchanged would ship a
+                    // build whose JSX and html`` templates were never compiled — a failure
+                    // that looks exactly like success until the page is opened.
+                    throw new Error(`[fluixi] @babel/core is required to compile ${id} but could not be loaded. ` +
+                        `Install it alongside @fluixi/compiler.`);
                 }
-                // console.log('[createVitePlugin] Using babel transformation');
                 const isTSX = /\.tsx$/.test(id);
                 const isTS = /\.ts$/.test(id);
                 const presets = [];
@@ -535,8 +164,8 @@ export function createVitePlugin(options = {}) {
                                 isTSX: isTSX,
                                 allExtensions: true,
                                 // Important: preserve JSX so our plugin can transform it
-                                jsxPragma: options.pragma || 'jsx',
-                                jsxPragmaFrag: options.pragmaFrag || 'Fragment',
+                                jsxPragma: 'jsx',
+                                jsxPragmaFrag: 'Fragment',
                                 onlyRemoveTypeImports: true,
                             },
                         ]);
@@ -569,22 +198,48 @@ export function createVitePlugin(options = {}) {
                 };
             }
             catch (e) {
-                console.error('Transform error:', e);
-                // Return fallback transform on error
-                try {
-                    return {
-                        code: transform(code, options).code,
-                        map: null,
-                    };
-                }
-                catch (fallbackError) {
-                    console.error('Fallback transform also failed:', fallbackError);
-                    return null;
-                }
+                // Let it through to Vite. Swallowing a compile error here and returning
+                // half-transformed source turns a diagnosable failure into a mystery at
+                // runtime; the build should stop where the problem is.
+                throw e;
             }
         },
     };
 }
+/** CompilerOptions as the transform wants them. Shared by every adapter. */
+function transformOptions(options) {
+    return {
+        resolve: options.resolve,
+        litTag: options.litTag,
+        templateClone: options.templateClone,
+        partialTemplates: options.partialTemplates,
+        runtimeModule: options.signalModule,
+        controlFlowModule: options.controlFlowModule,
+        routerModule: options.routerModule,
+        reactiveModule: options.reactiveModule,
+    };
+}
+/** Compile one module, through babel only when asked for it. */
+async function compileModule(code, id, options) {
+    if (!options.babel) {
+        const { transformTemplates } = await import('./transform/index.js');
+        return transformTemplates(code, id, transformOptions(options));
+    }
+    const babel = await import('@babel/core').catch(() => null);
+    const plugin = await createBabelPlugin(options);
+    if (!babel || !plugin.plugin) {
+        throw new Error(`[fluixi] babel: true needs @babel/core, which could not be loaded for ${id}. ` +
+            `Install it, or drop the option to use the built-in compiler.`);
+    }
+    const result = await babel.transformAsync(code, {
+        filename: id,
+        configFile: false,
+        babelrc: false,
+        plugins: [[plugin.plugin, plugin.getOptions()]],
+        sourceMaps: options.sourceMaps !== false,
+    });
+    return result?.code ? { code: result.code, map: result.map } : null;
+}
 // ============================================================================
 // Webpack Loader
 // ============================================================================
@@ -594,20 +249,7 @@ export function createVitePlugin(options = {}) {
 export function createWebpackLoader(options = {}) {
     return async function (source) {
         const callback = this.async();
-        const babel = tryRequire('@babel/core');
-        const babelPlugin = await createBabelPlugin(options);
-        if (!babel || !babelPlugin.plugin) {
-            // Fallback to simple transform
-            const result = transform(source, options);
-            callback(null, result.code);
-            return;
-        }
-        babel
-            .transformAsync(source, {
-            filename: this.resourcePath,
-            plugins: [[babelPlugin.plugin, babelPlugin.getOptions()]],
-            sourceMaps: options.sourceMaps !== false,
-        })
+        compileModule(source, this.resourcePath, options)
             .then((result) => {
             callback(null, result?.code, result?.map);
         })
@@ -626,33 +268,9 @@ export function createRollupPlugin(options = {}) {
     return {
         name: 'rollup-fluixi-jsx',
         async transform(code, id) {
-            const babelPlugin = await createBabelPlugin(options);
-            if (!/\.[jt]sx$/.test(id)) {
-                return null;
-            }
-            try {
-                const babel = tryRequire('@babel/core');
-                if (!babel || !babelPlugin.plugin) {
-                    const result = transform(code, options);
-                    return {
-                        code: result.code,
-                        map: null,
-                    };
-                }
-                const result = await babel.transformAsync(code, {
-                    filename: id,
-                    plugins: [[babelPlugin.plugin, babelPlugin.getOptions()]],
-                    sourceMaps: options.sourceMaps !== false,
-                });
-                return {
-                    code: result?.code || code,
-                    map: result?.map,
-                };
-            }
-            catch (e) {
-                console.error('Transform error:', e);
+            if (!/\.[jt]sx?$/.test(id))
                 return null;
-            }
+            return compileModule(code, id, options);
         },
     };
 }
@@ -666,27 +284,15 @@ export function createESBuildPlugin(options = {}) {
     return {
         name: 'esbuild-fluixi-jsx',
         setup(build) {
-            build.onLoad({ filter: /\.[jt]sx$/ }, async (args) => {
-                const babel = tryRequire('@babel/core');
-                const babelPlugin = await createBabelPlugin(options);
-                const fs = require('fs');
-                const source = fs.readFileSync(args.path, 'utf8');
+            build.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
+                const { readFileSync } = await import('node:fs');
+                const source = readFileSync(args.path, 'utf8');
                 try {
-                    if (!babel || !babelPlugin.plugin) {
-                        const result = transform(source, options);
-                        return {
-                            contents: result.code,
-                            loader: 'js',
-                        };
-                    }
-                    const result = await babel.transformAsync(source, {
-                        filename: args.path,
-                        plugins: [[babelPlugin.plugin, babelPlugin.getOptions()]],
-                        sourceMaps: false,
-                    });
+                    const result = await compileModule(source, args.path, options);
+                    // esbuild still has to strip the types the transform leaves in place.
                     return {
-                        contents: result?.code || source,
-                        loader: 'js',
+                        contents: result?.code ?? source,
+                        loader: args.path.endsWith('x') ? 'tsx' : 'ts',
                     };
                 }
                 catch (e) {
@@ -702,14 +308,6 @@ export function createESBuildPlugin(options = {}) {
         },
     };
 }
-// ============================================================================
-// Exports
-// ============================================================================
-// ============================================================================
-// "use server" — server functions vite plugin
-// ============================================================================
-export { transformServerFunctions } from './frontend/babel/server-functions.js';
-import { transformServerFunctions as _txServerFns } from './frontend/babel/server-functions.js';
 import { writeComponentGlobals } from './resolve/write-globals.js';
 import { readdirSync, readFileSync } from 'node:fs';
 import { join as _join } from 'node:path';
@@ -749,7 +347,7 @@ function findServerFnModules(dir, out = []) {
  * register only when their chunk loads → an RPC registry miss). The client never imports
  * it. `enforce:'pre'` so it runs on the raw source before other transforms.
  */
-export function serverFunctionsVitePlugin() {
+export function serverFunctionsVitePlugin(options = {}) {
     let root = process.cwd();
     return {
         name: 'fluixi-server-functions',
@@ -758,7 +356,9 @@ export function serverFunctionsVitePlugin() {
             root = config.root || root;
         },
         resolveId(id) {
-            return id === SERVER_FNS_VMOD ? '\0' + SERVER_FNS_VMOD : null;
+            return id === SERVER_FNS_VMOD || id === '@fluixi/start/server-fns'
+                ? '\0' + SERVER_FNS_VMOD
+                : null;
         },
         load(id) {
             if (id !== '\0' + SERVER_FNS_VMOD)
@@ -773,34 +373,22 @@ export function serverFunctionsVitePlugin() {
             const dispatcher = `\nexport { isServerFnRequest, handleServerFn } from '@fluixi/start/server-fn';\n`;
             return setup + imports + dispatcher;
         },
-        transform(code, id, opts) {
+        async transform(code, id, opts) {
             if (!/\.[jt]sx?$/.test(id))
                 return null;
             if (!code.includes('use server'))
                 return null;
-            return _txServerFns(code, { ssr: !!opts?.ssr, filename: id, root });
+            const args = { ssr: !!opts?.ssr, filename: id, root };
+            if (options.babel) {
+                const { transformServerFunctions } = await import('./frontend/babel/server-functions.js');
+                return transformServerFunctions(code, args);
+            }
+            const { transformServerFns } = await import('./transform/server-fns.js');
+            return transformServerFns(code, args);
         },
     };
 }
 export default {
-    // Analysis
-    analyzeProp,
-    analyzeProps,
-    shouldUseLitTemplate,
-    isLitTemplate,
-    // Code generation
-    generateCreateElement,
-    generatePropsCode,
-    generateChildrenCode,
-    generateLitHTMLTemplate,
-    // Optimization
-    optimizeStatic,
-    optimizeSpreads,
-    hoistStatic,
-    generateEventDelegation,
-    // Transform
-    transform,
-    // Plugin creators
     createBabelPlugin,
     createTypeScriptTransformer,
     createVitePlugin,