fusee-framework 1.7.0 → 1.9.0

package/framework/core/compiler/parser.js

@@ -0,0 +1,414 @@
+import { TokenType } from "./lexer.js";
+import { ErrorCode } from "./errors-list.js";
+import { throwError } from "./errors.js";
+import {
+    NodeType,
+    createRoot,
+    createElement,
+    createComponent,
+    createText,
+    createInterpolation,
+    createExpression,
+    createAttribute,
+    createBinding,
+    createEvent,
+    createDirective,
+    createSlotOutlet,
+    createSlotContent,
+    createForArg,
+    createLoc,
+    createPos,
+} from "./ast.js";
+
+const VOID_ELEMENTS = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr",
+]);
+const FOR_RE =
+    /^(?:\(\s*([^,)]+?)\s*(?:,\s*([^)]+?)\s*)?\))\s+in\s+(.+)$|^([^\s,]+)\s+in\s+(.+)$/;
+
+export function parse(tokens, source, components = new Set()) {
+    const parser = new Parser(tokens, source, components);
+    return parser.parse();
+}
+
+class Parser {
+    constructor(tokens, source, components) {
+        this.tokens = tokens;
+        this.source = source;
+        this.components = components;
+        this.pos = 0;
+        this.stack = [];
+    }
+
+    parse() {
+        const start = this._startLoc();
+        const children = this._parseChildren(null);
+        return createRoot(
+            children,
+            createLoc(start, this._startLoc(), this.source),
+        );
+    }
+
+    _parseChildren(parentTag) {
+        const children = [];
+
+        while (!this._eof()) {
+            const tok = this._peek();
+
+            if (tok.type === TokenType.EOF) break;
+            if (tok.type === TokenType.TAG_OPEN_CLOSE) break;
+
+            if (tok.type === TokenType.COMMENT) {
+                this._advance();
+                continue;
+            }
+
+            if (tok.type === TokenType.TEXT) {
+                children.push(this._parseText());
+                continue;
+            }
+
+            if (tok.type === TokenType.MUSTACHE_OPEN) {
+                children.push(this._parseMustache());
+                continue;
+            }
+
+            if (tok.type === TokenType.TAG_OPEN) {
+                const node = this._parseElement();
+                if (node) children.push(node);
+                continue;
+            }
+
+            this._advance();
+        }
+
+        return children;
+    }
+
+    _parseText() {
+        const tok = this._consume(TokenType.TEXT);
+        return createText(tok.value, tok.loc);
+    }
+
+    _parseMustache() {
+        const open = this._consume(TokenType.MUSTACHE_OPEN);
+        const expr = this._consume(TokenType.MUSTACHE_EXPR);
+        const close = this._consume(TokenType.MUSTACHE_CLOSE);
+
+        if (!expr.value.trim()) {
+            throwError(
+                ErrorCode.EMPTY_EXPRESSION,
+                expr.loc,
+                this.source,
+                "{{ }}",
+            );
+        }
+
+        const loc = createLoc(open.loc.start, close.loc.end);
+        return createInterpolation(
+            createExpression(expr.value, false, expr.loc),
+            loc,
+        );
+    }
+
+    _parseElement() {
+        const openTok = this._consume(TokenType.TAG_OPEN);
+        const tag = openTok.value;
+        const startLoc = openTok.loc.start;
+        const props = this._parseAttrs(tag);
+
+        let selfClosing = false;
+        if (this._peek()?.type === TokenType.TAG_SELF_CLOSE) {
+            this._advance();
+            selfClosing = true;
+        } else {
+            this._consume(TokenType.TAG_CLOSE);
+        }
+
+        if (tag === "slot") {
+            return this._buildSlotOutlet(props, startLoc, selfClosing);
+        }
+        const slotAttr = props.find(
+            (p) => p.type === NodeType.ATTRIBUTE && p.name === "slot",
+        );
+        if (tag === "template" && slotAttr) {
+            return this._buildSlotContent(
+                slotAttr,
+                props,
+                startLoc,
+                selfClosing,
+            );
+        }
+
+        if (selfClosing || VOID_ELEMENTS.has(tag.toLowerCase())) {
+            return this._buildNode(tag, props, [], true, startLoc);
+        }
+        this.stack.push(tag);
+        const children = this._parseChildren(tag);
+        this.stack.pop();
+
+        if (this._peek()?.type === TokenType.TAG_OPEN_CLOSE) {
+            const closeTok = this._advance();
+            if (closeTok.value.toLowerCase() !== tag.toLowerCase()) {
+                throwError(
+                    ErrorCode.UNEXPECTED_CLOSING_TAG,
+                    closeTok.loc,
+                    this.source,
+                    closeTok.value,
+                );
+            }
+            if (this._peek()?.type === TokenType.TAG_CLOSE) this._advance();
+        } else {
+            throwError(
+                ErrorCode.MISSING_CLOSING_TAG,
+                createLoc(startLoc, startLoc),
+                this.source,
+                tag,
+            );
+        }
+
+        const endLoc = this._startLoc();
+        return this._buildNode(tag, props, children, false, startLoc, endLoc);
+    }
+
+    _buildNode(tag, props, children, selfClosing, startLoc, endLoc = null) {
+        const loc = createLoc(startLoc, endLoc ?? startLoc);
+
+        if (this.components.has(tag) || /^[A-Z]/.test(tag)) {
+            const slots = this._extractSlots(children);
+            return createComponent(tag, props, slots, loc);
+        }
+
+        return createElement(tag, props, children, selfClosing, loc);
+    }
+
+    _buildSlotOutlet(props, startLoc, selfClosing) {
+        const nameAttr = props.find(
+            (p) => p.type === NodeType.ATTRIBUTE && p.name === "name",
+        );
+        const slotName = nameAttr?.value ?? "default";
+        let fallback = [];
+        if (!selfClosing) {
+            this.stack.push("slot");
+            fallback = this._parseChildren("slot");
+            this.stack.pop();
+            if (this._peek()?.type === TokenType.TAG_OPEN_CLOSE) {
+                this._advance();
+                if (this._peek()?.type === TokenType.TAG_CLOSE) this._advance();
+            }
+        }
+
+        return createSlotOutlet(
+            slotName,
+            fallback,
+            createLoc(startLoc, this._startLoc()),
+        );
+    }
+
+    _buildSlotContent(slotAttr, props, startLoc, selfClosing) {
+        const slotName = slotAttr.value ?? "default";
+        let children = [];
+
+        if (!selfClosing) {
+            this.stack.push("template");
+            children = this._parseChildren("template");
+            this.stack.pop();
+            if (this._peek()?.type === TokenType.TAG_OPEN_CLOSE) {
+                this._advance();
+                if (this._peek()?.type === TokenType.TAG_CLOSE) this._advance();
+            }
+        }
+
+        return createSlotContent(
+            slotName,
+            children,
+            createLoc(startLoc, this._startLoc()),
+        );
+    }
+
+    _extractSlots(children) {
+        const slots = { default: [] };
+
+        for (const child of children) {
+            if (child.type === NodeType.SLOT_CONTENT) {
+                slots[child.slotName] = child.children;
+            } else {
+                slots.default.push(child);
+            }
+        }
+
+        return slots;
+    }
+
+    _parseAttrs(tag) {
+        const props = [];
+        const seen = new Set();
+
+        while (!this._eof()) {
+            const tok = this._peek();
+            if (
+                tok.type === TokenType.TAG_CLOSE ||
+                tok.type === TokenType.TAG_SELF_CLOSE ||
+                tok.type === TokenType.EOF
+            )
+                break;
+
+            if (tok.type !== TokenType.ATTR_NAME) {
+                this._advance();
+                continue;
+            }
+
+            const nameTok = this._advance();
+            const rawName = nameTok.value;
+            if (seen.has(rawName)) {
+                throwError(
+                    ErrorCode.DUPLICATE_KEY,
+                    nameTok.loc,
+                    this.source,
+                    rawName,
+                    tag,
+                );
+            }
+            seen.add(rawName);
+
+            let value = null;
+            if (this._peek()?.type === TokenType.ATTR_EQUALS) {
+                this._advance();
+                const valTok = this._consume(TokenType.ATTR_VALUE);
+                value = valTok.value;
+            }
+
+            const loc = nameTok.loc;
+
+            if (rawName.startsWith("@")) {
+                props.push(this._parseEventAttr(rawName, value, loc));
+            } else if (rawName.startsWith(":")) {
+                props.push(this._parseBindingAttr(rawName, value, loc));
+            } else if (rawName.startsWith("f-")) {
+                props.push(this._parseDirectiveAttr(rawName, value, loc, tag));
+            } else {
+                props.push(createAttribute(rawName, value, loc));
+            }
+        }
+
+        return props;
+    }
+
+    _parseEventAttr(rawName, value, loc) {
+        const rest = rawName.slice(1);
+        const parts = rest.split(".");
+        const eventName = parts[0];
+        const modifiers = parts.slice(1);
+
+        if (!value || !value.trim()) {
+            throwError(ErrorCode.EMPTY_EXPRESSION, loc, this.source, rawName);
+        }
+
+        return createEvent(
+            eventName,
+            createExpression(value.trim(), false, loc),
+            modifiers,
+            loc,
+        );
+    }
+
+    _parseBindingAttr(rawName, value, loc) {
+        const name = rawName.slice(1);
+        const isProp = name.startsWith("prop-");
+
+        if (!value || !value.trim()) {
+            throwError(ErrorCode.EMPTY_EXPRESSION, loc, this.source, rawName);
+        }
+
+        return createBinding(
+            isProp ? name.slice(5) : name,
+            createExpression(value.trim(), false, loc),
+            isProp,
+            loc,
+        );
+    }
+
+    _parseDirectiveAttr(rawName, value, loc, tag) {
+        const name = rawName.slice(2);
+        const needsExpr = !["else", "once"].includes(name);
+
+        if (needsExpr && (!value || !value.trim())) {
+            throwError(ErrorCode.EMPTY_EXPRESSION, loc, this.source, rawName);
+        }
+
+        let expression = null;
+        let arg = null;
+
+        if (value) {
+            if (name === "for") {
+                arg = this._parseForExpression(value.trim(), loc);
+            } else {
+                expression = createExpression(value.trim(), false, loc);
+            }
+        }
+
+        return createDirective(name, expression, arg, loc);
+    }
+
+    _parseForExpression(raw, loc) {
+        const m = FOR_RE.exec(raw);
+        if (!m) {
+            throwError(ErrorCode.INVALID_FOR_SYNTAX, loc, this.source, raw);
+        }
+
+        const item = (m[1] ?? m[4]).trim();
+        const index = m[2] ? m[2].trim() : null;
+        const source = (m[3] ?? m[5]).trim();
+
+        return createForArg(item, source, index, loc);
+    }
+
+    _eof() {
+        return (
+            this.pos >= this.tokens.length ||
+            this._peek()?.type === TokenType.EOF
+        );
+    }
+
+    _peek() {
+        return this.tokens[this.pos];
+    }
+
+    _advance() {
+        const tok = this.tokens[this.pos];
+        if (tok?.type !== TokenType.EOF) this.pos++;
+        return tok;
+    }
+
+    _consume(expectedType) {
+        const tok = this._peek();
+        if (!tok || tok.type !== expectedType) {
+            throwError(
+                ErrorCode.UNEXPECTED_TOKEN,
+                tok?.loc ?? createLoc(this._startLoc(), this._startLoc()),
+                this.source,
+                tok?.type ?? "EOF",
+                expectedType,
+            );
+        }
+        return this._advance();
+    }
+
+    _startLoc() {
+        const tok = this._peek();
+        return tok?.loc?.start ?? createPos(0, 0, 0);
+    }
+}

package/framework/core/compiler/plugins/actions-plugin.js

@@ -0,0 +1,263 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const ACTION_BASE_URL = '/__fusee/actions'
+const VIRTUAL_CLIENT_ID = 'virtual:fusee-actions'
+const VIRTUAL_SERVER_ID = 'virtual:fusee-action-routes'
+
+export function actionsPlugin(options = {}) {
+    const {
+        serverActionsFile = 'src/actions.server.js',
+        clientActionsFile = 'src/actions.js',
+        baseUrl = ACTION_BASE_URL,
+        typesOutput = 'src/types/actions.d.ts',
+    } = options
+
+    let resolvedServerFile = null
+    let resolvedClientFile = null
+
+    return {
+        name: 'vite-plugin-fusee-actions',
+
+        configResolved(config) {
+            resolvedServerFile = path.resolve(config.root, serverActionsFile)
+            resolvedClientFile = path.resolve(config.root, clientActionsFile)
+        },
+
+        resolveId(id) {
+            if (id === VIRTUAL_CLIENT_ID)
+                return '\0' + VIRTUAL_CLIENT_ID
+            if (id === VIRTUAL_SERVER_ID)
+                return '\0' + VIRTUAL_SERVER_ID
+        },
+
+        async load(id) {
+            if (id === '\0' + VIRTUAL_CLIENT_ID) {
+                const serverActions = _extractServerActions(resolvedServerFile)
+                const clientActions = resolvedClientFile ? _extractClientActions(resolvedClientFile) : []
+
+                const { warnings, errors } = validateActions(serverActions, clientActions)
+                for (const w of warnings)
+                    this.warn(w)
+                for (const e of errors)
+                    this.error(e)
+
+                return generateClientStubs(serverActions, { baseUrl })
+            }
+
+            if (id === '\0' + VIRTUAL_SERVER_ID) {
+                const serverActions = _extractServerActions(resolvedServerFile)
+                return generateServerRoutes(serverActions, { serverActionsFile, baseUrl })
+            }
+        },
+
+        async buildEnd() {
+            if (typesOutput && resolvedServerFile) {
+                const serverActions = _extractServerActions(resolvedServerFile)
+                const types = generateActionTypes(serverActions)
+                const absOutput = path.resolve(process.cwd(), typesOutput)
+                fs.mkdirSync(path.dirname(absOutput), { recursive: true })
+                fs.writeFileSync(absOutput, types, 'utf8')
+            }
+        },
+
+        handleHotUpdate({ file, server }) {
+            if (file === resolvedServerFile || file === resolvedClientFile) {
+                const mod = server.moduleGraph.getModuleById('\0' + VIRTUAL_CLIENT_ID)
+                if (mod) 
+                    server.moduleGraph.invalidateModule(mod)
+                server.ws.send({ type: 'full-reload' })
+            }
+        },
+    }
+}
+
+export function _extractServerActions(filePath) {
+    if (!filePath || !fs.existsSync(filePath)) 
+        return []
+
+    const source = fs.readFileSync(filePath, 'utf8')
+    const actions = []
+
+    const RE_EXPORT = /export\s+(?:const|let|var)\s+(\w+)\s*=\s*defineAction\s*\(/g
+    const RE_NAMED = /defineAction\s*\(\s*(?:async\s+)?function\s+(\w+)/g
+    const RE_OPTS = /defineAction\s*\([^,)]+,\s*\{[^}]*name\s*:\s*['"](\w+)['"]/g
+
+    const seen = new Set()
+
+    let m
+    while ((m = RE_EXPORT.exec(source)) !== null) {
+        const name = m[1]
+        if (!seen.has(name)) { seen.add(name); actions.push({ name, exportName: name }) }
+    }
+
+    while ((m = RE_NAMED.exec(source)) !== null) {
+        const name = m[1]
+        if (!seen.has(name)) { seen.add(name); actions.push({ name, exportName: name }) }
+    }
+
+    while ((m = RE_OPTS.exec(source)) !== null) {
+        const name = m[1]
+        if (!seen.has(name)) { seen.add(name); actions.push({ name, exportName: name }) }
+    }
+
+    return actions
+}
+
+export function _extractClientActions(filePath) {
+    if (!filePath || !fs.existsSync(filePath)) 
+        return []
+
+    const source = fs.readFileSync(filePath, 'utf8')
+    const names = []
+    const RE = /defineAction\s*\(\s*['"](\w+)['"]/g
+    let m
+
+    while ((m = RE.exec(source)) !== null) {
+        names.push(m[1])
+    }
+
+    return names
+}
+
+export function validateActions(serverActions, clientActions) {
+    const warnings = []
+    const errors = []
+
+    const serverNames = new Set(serverActions.map(a => a.name))
+    const clientNames = new Set(clientActions)
+
+    for (const name of clientNames) {
+        if (!serverNames.has(name)) {
+            errors.push(`[fusée] Action "${name}" is defined on the client but has no corresponding defineAction() in actions.server.js`)
+        }
+    }
+
+    for (const name of serverNames) {
+        if (!clientNames.has(name) && clientActions.length > 0) {
+            warnings.push(`[fusée] Action "${name}" is defined on the server but is not used in actions.js — it will still be accessible via HTTP POST /${name}`
+            )
+        }
+    }
+
+    return { warnings, errors }
+}
+
+export function generateClientStubs(actions, options = {}) {
+    const { baseUrl = ACTION_BASE_URL } = options
+
+    const lines = [
+        '// [fusée] Auto-generated action stubs — do not edit',
+        '// Generated by compiler/plugins/actions-plugin.js',
+        '',
+        `import { createActionProxy, useAction } from '../core/actions.js'`,
+        '',
+    ]
+
+    for (const action of actions) {
+        lines.push(`export const ${action.exportName} = createActionProxy(` +    `${JSON.stringify(action.name)}, { baseUrl: ${JSON.stringify(baseUrl)} })`)
+    }
+
+    lines.push('')
+    lines.push('export { useAction }')
+    lines.push('')
+
+    return lines.join('\n')
+}
+
+export function generateServerRoutes(actions, options = {}) {
+    const {
+        serverActionsFile = 'src/actions.server.js',
+        baseUrl = ACTION_BASE_URL,
+    } = options
+
+    const relPath = './' + serverActionsFile.replace(/^src\//, '')
+
+    const lines = [
+        '// [fusée] Auto-generated action routes — do not edit',
+        '// Generated by compiler/plugins/actions-plugin.js',
+        '',
+        `import { handleActionRequest, getRegisteredActions } from ${JSON.stringify(relPath)}`,
+        '',
+        '// Import side-effect: registers all actions in the registry',
+        `import ${JSON.stringify(relPath)}`,
+        '',
+        '/** Map of action name → request handler */',
+        'export const actionHandlers = {',
+    ]
+
+    for (const action of actions) {
+        lines.push(`  ${JSON.stringify(action.name)}: (req, res) => handleActionRequest(req, res),`)
+    }
+
+    lines.push('}')
+    lines.push('')
+    lines.push('/**')
+    lines.push(' * Mount all action routes on an Express app.')
+    lines.push(' * @param {import("express").Application} app')
+    lines.push(' */')
+    lines.push('export function mountActionRoutes(app) {')
+    lines.push(`  const base = ${JSON.stringify(baseUrl)}`)
+    lines.push('  for (const [name, handler] of Object.entries(actionHandlers)) {')
+    lines.push('    app.post(`${base}/${name}`, handler)')
+    lines.push('  }')
+    lines.push('}')
+    lines.push('')
+    lines.push('/**')
+    lines.push(' * Fetch API compatible dispatcher (Bun / Deno / CF Workers).')
+    lines.push(' * @param {Request} request')
+    lines.push(' */')
+    lines.push('export async function dispatchAction(request) {')
+    lines.push(`  const base = ${JSON.stringify(baseUrl)}`)
+    lines.push('  const url  = new URL(request.url)')
+    lines.push('  const name = url.pathname.slice(base.length + 1)')
+    lines.push('  const handler = actionHandlers[name]')
+    lines.push('  if (!handler) return new Response(JSON.stringify({ error: `Action "${name}" not found` }), { status: 404 })')
+    lines.push('  return handler(request, null)')
+    lines.push('}')
+    lines.push('')
+
+    return lines.join('\n')
+}
+
+export function generateActionTypes(actions) {
+    const lines = [
+        '// [fusée] Auto-generated action types — do not edit',
+        '// Generated by compiler/plugins/actions-plugin.js',
+        '',
+        "import type { useAction } from '../core/actions.js'",
+        '',
+        '/** All registered server action names */',
+        `export type ActionName = ${actions.map(a => JSON.stringify(a.name)).join(' | ') || 'never'}`,
+        '',
+        '/** Client proxy function for a server action */',
+        'export type ActionProxy<TArgs extends unknown[] = unknown[], TReturn = unknown> =',
+        '  ((...args: TArgs) => Promise<TReturn>) & {',
+        '    _isAction: true',
+        '    _actionName: string',
+        '  }',
+        '',
+        '/** useAction() result shape */',
+        'export type UseActionResult<TReturn = unknown> = {',
+        '  execute: (...args: unknown[]) => Promise<TReturn | undefined>',
+        '  pending: () => boolean',
+        '  data: () => TReturn | undefined',
+        '  error: () => Error | undefined',
+        '  reset: () => void',
+        '}',
+        '',
+        '/** Auto-generated action stubs */',
+        'export declare const actionStubs: Record<ActionName, ActionProxy>',
+        '',
+    ]
+
+    for (const action of actions) {
+        lines.push(`export declare const ${action.exportName}: ActionProxy`)
+    }
+
+    lines.push('')
+    lines.push("export { useAction } from '../core/actions.js'")
+    lines.push('')
+
+    return lines.join('\n')
+}

package/framework/core/compiler/plugins/compiler-plugin.d.ts

@@ -0,0 +1,5 @@
+export declare function fuseeCompilerPlugin(): {
+    name: 'vite-plugin-fusee-compiler'
+    enforce: 'pre'
+    transform(code: string, id: string): { code: string; map: null } | null
+}