fusee-framework 1.7.0 → 1.9.0

package/framework/core/compiler/ast.js

@@ -0,0 +1,167 @@
+export const NodeType = {
+    ROOT: 'Root',
+    ELEMENT: 'Element',
+    COMPONENT: 'Component',
+    TEXT: 'Text',
+    INTERPOLATION: 'Interpolation',
+    EXPRESSION: 'Expression',
+    ATTRIBUTE: 'Attribute',
+    BINDING: 'Binding',
+    EVENT: 'Event',
+    DIRECTIVE: 'Directive',
+    SLOT_OUTLET: 'SlotOutlet',
+    SLOT_CONTENT: 'SlotContent'
+}
+
+export function createLoc(start, end, source) {
+    return { start, end, source }
+}
+
+export function createPos(line, col, offset) {
+    return { line, col, offset }
+}
+
+export function createRoot(children = [], loc = null) {
+    return { type: NodeType.ROOT, children, loc }
+}
+
+export function createElement(tag, props = [], children = [], selfClosing = false, loc = null) {
+    return {
+        type: NodeType.ELEMENT,
+        tag,
+        props,
+        children,
+        selfClosing,
+        isStatic: false,
+        hoisted: false,
+        loc
+    }
+}
+
+export function createComponent(name, props = [], slots = {}, loc = null) {
+    return {
+        type: NodeType.COMPONENT,
+        name,
+        props,
+        slots,
+        loc
+    }
+}
+
+export function createText(content, loc = null) {
+    return { type: NodeType.TEXT, content, loc }
+}
+
+export function createInterpolation(expression, loc = null) {
+    return {
+        type: NodeType.INTERPOLATION,
+        expression,
+        loc
+    }
+}
+
+export function createExpression(content, isStatic = false, loc = null) {
+    return {
+        type: NodeType.EXPRESSION,
+        content,
+        isStatic,
+        loc
+    }
+}
+
+export function createAttribute(name, value, loc = null) {
+    return {
+        type: NodeType.ATTRIBUTE,
+        name,
+        value,
+        loc
+    }
+}
+
+export function createBinding(name, expression, isProp = false, loc = null) {
+    return {
+        type: NodeType.BINDING,
+        name,
+        expression,
+        isProp,
+        loc
+    }
+}
+
+export function createEvent(name, expression, modifiers = [], loc = null) {
+    return {
+        type: NodeType.EVENT,
+        name,
+        expression,
+        modifiers,
+        loc
+    }
+}
+
+export function createDirective(name, expression = null, arg = null, loc = null) {
+    return {
+        type: NodeType.DIRECTIVE,
+        name,
+        expression,
+        arg,
+        loc
+    }
+}
+
+export function createSlotOutlet(slotName = 'default', fallback = [], loc = null) {
+    return {
+        type: NodeType.SLOT_OUTLET,
+        slotName,
+        fallback,
+        loc
+    }
+}
+
+export function createSlotContent(slotName = 'default', children = [], loc = null) {
+    return {
+        type: NodeType.SLOT_CONTENT,
+        slotName,
+        children,
+        loc
+    }
+}
+
+export function createForArg(item, source, index = null, loc = null) {
+    return { item, source, index, loc }
+}
+
+export function isElement(node) {
+    return node?.type === NodeType.ELEMENT
+}
+
+export function isComponent(node) {
+    return node?.type === NodeType.COMPONENT
+}
+
+export function isText(node) {
+    return node?.type === NodeType.TEXT
+}
+
+export function isInterpolation(node) {
+    return node?.type === NodeType.INTERPOLATION
+}
+
+export function isDirective(node, name) {
+    return node?.type === NodeType.DIRECTIVE && (name == null || node.name === name)
+}
+
+export function isStaticText(node) {
+    return node?.type === NodeType.TEXT || (node?.type === NodeType.INTERPOLATION && node.expression?.isStatic)
+}
+
+export function findDirective(element, name) {
+    return element.props.find(p => isDirective(p, name)) ?? null
+}
+
+export function getEvents(element) {
+    return element.props.filter(p => p.type === NodeType.EVENT)
+}
+
+export function cloneNode(node) {
+    return { ...node, props: node.props ? [...node.props] : undefined, children: node.children ? [...node.children] : undefined }
+}

package/framework/core/compiler/errors-list.js

@@ -0,0 +1,47 @@
+export const ErrorCode = {
+    UNEXPECTED_CHAR: 'E001',
+    UNTERMINATED_STRING: 'E002',
+    UNTERMINATED_MUSTACHE: 'E003',
+    UNTERMINATED_TAG: 'E004',
+    MALFORMED_COMMENT: 'E005',
+    UNEXPECTED_TOKEN: 'P001',
+    MISSING_CLOSING_TAG: 'P002',
+    UNEXPECTED_CLOSING_TAG: 'P003',
+    INVALID_DIRECTIVE_SYNTAX: 'P004',
+    INVALID_FOR_SYNTAX: 'P005',
+    DUPLICATE_KEY: 'P006',
+    V_ELSE_NO_IF: 'P007',
+    EMPTY_EXPRESSION: 'P008',
+    INVALID_SLOT_NAME: 'P009',
+    DUPLICATE_DIRECTIVE: 'T001',
+    FOR_MISSING_KEY: 'T002',
+    MODEL_ON_NON_INPUT: 'T003',
+    COMPONENT_NOT_REGISTERED: 'T004',
+    UNKNOWN_IDENTIFIER: 'S001',
+    STATIC_FOR_KEY: 'S002',
+    UNKNOWN_NODE_TYPE: 'G001',
+}
+
+export const ERROR_MESSAGES = {
+    [ErrorCode.UNEXPECTED_CHAR]: 'Unexpected character "{0}"',
+    [ErrorCode.UNTERMINATED_STRING]: 'Unterminated string literal',
+    [ErrorCode.UNTERMINATED_MUSTACHE]: 'Unterminated mustache expression "{0}"',
+    [ErrorCode.UNTERMINATED_TAG]: 'Unterminated tag "<{0}"',
+    [ErrorCode.MALFORMED_COMMENT]: 'Malformed HTML comment',
+    [ErrorCode.UNEXPECTED_TOKEN]: 'Unexpected token "{0}", expected "{1}"',
+    [ErrorCode.MISSING_CLOSING_TAG]: 'Missing closing tag for <{0}>',
+    [ErrorCode.UNEXPECTED_CLOSING_TAG]: 'Unexpected closing tag </{0}>',
+    [ErrorCode.INVALID_DIRECTIVE_SYNTAX]: 'Invalid directive syntax: "{0}"',
+    [ErrorCode.INVALID_FOR_SYNTAX]: 'Invalid f-for syntax: "{0}". Expected "(item, index) in source" or "item in source"',
+    [ErrorCode.DUPLICATE_KEY]: 'Duplicate attribute "{0}" on element <{1}>',
+    [ErrorCode.V_ELSE_NO_IF]: 'f-else / f-else-if has no matching f-if',
+    [ErrorCode.EMPTY_EXPRESSION]: 'Expression in "{0}" must not be empty',
+    [ErrorCode.INVALID_SLOT_NAME]: 'Invalid slot name "{0}"',
+    [ErrorCode.DUPLICATE_DIRECTIVE]: 'Duplicate directive "f-{0}" on element <{1}>',
+    [ErrorCode.FOR_MISSING_KEY]: 'f-for on <{0}> is missing a :key binding — add :key="<unique expr>"',
+    [ErrorCode.MODEL_ON_NON_INPUT]: 'f-model can only be used on <input>, <textarea> or <select>, got <{0}>',
+    [ErrorCode.COMPONENT_NOT_REGISTERED]: 'Component "{0}" is used in the template but not registered',
+    [ErrorCode.UNKNOWN_NODE_TYPE]: 'Unknown AST node type "{0}" encountered in generator',
+    [ErrorCode.UNKNOWN_IDENTIFIER]: 'Unknown identifier "{0}" in expression "{1}" — not found in component scope',
+    [ErrorCode.STATIC_FOR_KEY]: ':key="{0}" is a static literal — keys must be unique per item (use a dynamic expression like :key="item.id")',
+}

package/framework/core/compiler/errors.js

@@ -0,0 +1,107 @@
+import { ErrorCode, ERROR_MESSAGES } from './errors-list.js'
+
+export class CompileError extends Error {
+    constructor(code, loc, source, ...args) {
+        const template = ERROR_MESSAGES[code] ?? `Unknown compiler error (${code})`
+        const message  = _interpolate(template, args)
+        super(message)
+        this.name = 'CompileError'
+        this.code = code
+        this.loc = loc
+        this.source = source
+        this._snippet = null
+    }
+
+    format(filePath = '<template>') {
+        const { line, col } = this.loc?.start ?? { line: '?', col: '?' }
+        const header = `[fusée] ${this.name} ${this.code} at ${filePath}:${line}:${col}`
+        const snippet = this._buildSnippet()
+        return snippet ? `${header}\n${this.message}\n\n${snippet}` : `${header}\n${this.message}`
+    }
+
+    _buildSnippet() {
+        if (this._snippet !== null) return this._snippet
+        if (!this.source || !this.loc?.start) {
+            this._snippet = ''
+            return ''
+        }
+
+        const lines = this.source.split('\n')
+        const lineIdx = this.loc.start.line - 1
+        const col = this.loc.start.col
+        const CONTEXT = 2
+        const firstLine = Math.max(0, lineIdx - CONTEXT)
+        const lastLine = Math.min(lines.length - 1, lineIdx + CONTEXT)
+        const width = String(lastLine + 1).length
+        const parts = []
+
+        for (let i = firstLine; i <= lastLine; i++) {
+            const lineNo = String(i + 1).padStart(width, ' ')
+            const prefix = i === lineIdx ? '> ' : '  '
+            parts.push(`${prefix}${lineNo} | ${lines[i]}`)
+            if (i === lineIdx) {
+                const caretPad = ' '.repeat(width + 4 + (col - 1))
+                const caretLen = Math.max(1, (this.loc.end?.col ?? col) - col)
+                parts.push(`${caretPad}${'~'.repeat(caretLen)}`)
+            }
+        }
+
+        this._snippet = parts.join('\n')
+        return this._snippet
+    }
+}
+
+export class CompileWarning {
+    constructor(code, loc, source, ...args) {
+        const template = ERROR_MESSAGES[code] ?? `Unknown compiler warning (${code})`
+        this.message = _interpolate(template, args)
+        this.code = code
+        this.loc = loc
+        this.source = source
+    }
+
+    format(filePath = '<template>') {
+        const { line, col } = this.loc?.start ?? { line: '?', col: '?' }
+        return `[fusée] Warning ${this.code} at ${filePath}:${line}:${col}\n${this.message}`
+    }
+}
+
+export class ErrorCollector {
+    constructor(source) {
+        this.source = source
+        this.errors = []
+        this.warnings = []
+    }
+
+    error(code, loc, ...args) {
+        const err = new CompileError(code, loc, this.source, ...args)
+        this.errors.push(err)
+        return err
+    }
+
+    warn(code, loc, ...args) {
+        const w = new CompileWarning(code, loc, this.source, ...args)
+        this.warnings.push(w)
+        return w
+    }
+
+    throwIfAny() {
+        if (this.errors.length > 0) throw this.errors[0]
+    }
+
+    get hasErrors() {
+        return this.errors.length > 0
+    }
+
+    get hasWarnings() {
+        return this.warnings.length > 0
+    }
+}
+
+function _interpolate(template, args) {
+    return template.replace(/\{(\d+)\}/g, (_, i) => args[i] ?? '')
+}
+
+export function throwError(code, loc, source, ...args) {
+    throw new CompileError(code, loc, source, ...args)
+}

package/framework/core/compiler/generator.js

@@ -0,0 +1,363 @@
+import { NodeType } from "./ast.js";
+import { ErrorCode } from "./errors-list.js";
+import { throwError } from "./errors.js";
+
+export function generate(ast, options = {}) {
+    const gen = new Generator(ast, options);
+    return gen.generate();
+}
+
+const RUNTIME = "fusee/runtime/h.js";
+
+class Generator {
+    constructor(ast, options) {
+        this.ast = ast;
+        this.source = options.source ?? "";
+        this.runtimePath = options.runtimePath ?? RUNTIME;
+        this.indent = 0;
+        this.lines = [];
+        this._hoistedIdx = 0;
+        this._hoistedMap = new Map();
+        this._imports = new Set([
+            "h",
+            "hText",
+            "createComponent",
+            "_effect",
+            "_batch",
+        ]);
+        this.localScopes = [];
+    }
+
+    generate() {
+        if (this.ast._hoisted) {
+            for (const node of this.ast._hoisted) {
+                const name = `_s${this._hoistedIdx++}`;
+                this._hoistedMap.set(node, name);
+            }
+        }
+
+        const bodyLines = [];
+        const children = this._genChildren(this.ast.children);
+
+        const hoistedDecls = [];
+        for (const [node, name] of this._hoistedMap) {
+            hoistedDecls.push(`const ${name} = ${this._genNode(node, true)}`);
+        }
+
+        const importList = [...this._imports].join(", ");
+        const output = [
+            `import { ${importList} } from '${this.runtimePath}'`,
+            "",
+            ...(hoistedDecls.length ? [...hoistedDecls, ""] : []),
+            `export function render(_ctx, _components) {`,
+            `    return [`,
+            children.map((l) => `        ${l}`).join(",\n"),
+            `    ]`,
+            `}`,
+        ];
+
+        return output.join("\n");
+    }
+
+    _genChildren(children) {
+        if (!children || children.length === 0) return [];
+        return children.flatMap((child) => {
+            const forDir = child.props?.find?.(
+                (p) => p.type === NodeType.DIRECTIVE && p.name === "for",
+            );
+            if (forDir) return [this._genForNode(child, forDir)];
+            return [this._genNode(child)];
+        });
+    }
+
+    _genNode(node, inHoist = false) {
+        if (!inHoist && this._hoistedMap.has(node)) {
+            return this._hoistedMap.get(node);
+        }
+
+        switch (node.type) {
+            case NodeType.TEXT:
+                return this._genText(node);
+            case NodeType.INTERPOLATION:
+                return this._genInterpolation(node);
+            case NodeType.ELEMENT:
+                return this._genElement(node);
+            case NodeType.COMPONENT:
+                return this._genComponent(node);
+            case NodeType.SLOT_OUTLET:
+                return this._genSlotOutlet(node);
+            case "If":
+                return this._genIf(node);
+            default:
+                throwError(
+                    ErrorCode.UNKNOWN_NODE_TYPE,
+                    node.loc,
+                    this.source,
+                    node.type,
+                );
+        }
+    }
+
+    _genText(node) {
+        return `hText(${JSON.stringify(node.content)})`;
+    }
+
+    _genInterpolation(node) {
+        this._imports.add("_effect");
+        const expr = node.expression.content;
+        if (node.expression.isStatic) {
+            return `hText(String(${expr}))`;
+        }
+        return `hText(() => String(${this._wrapExpr(expr)}))`;
+    }
+
+    _genElement(node) {
+        const tag = JSON.stringify(node.tag);
+        const props = this._genProps(node.props);
+        const children = this._genChildrenArray(node.children);
+        const args = [tag, props, children];
+
+        if (node.isStatic) args.push("true");
+
+        return `h(${args.join(", ")})`;
+    }
+
+    _genComponent(node) {
+        this._imports.add("createComponent");
+
+        const name = JSON.stringify(node.name);
+        const props = this._genComponentProps(node.props);
+        const slots = this._genSlots(node.slots);
+        return `createComponent(${name}, _components[${name}], ${props}, ${slots})`;
+    }
+
+    _genSlotOutlet(node) {
+        this._imports.add("hSlot");
+        const name = JSON.stringify(node.slotName);
+        const fallback = this._genChildrenArray(node.fallback);
+        return `hSlot(_ctx._slots, ${name}, ${fallback})`;
+    }
+
+    _genIf(node) {
+        this._imports.add("hIf");
+
+        const branches = node.branches.map((branch) => {
+            const cond = branch.condition
+                ? this._wrapExpr(branch.condition.content)
+                : "true";
+            const children = this._genChildrenArray(branch.node.children ?? []);
+            return `[() => ${cond}, () => ${children}]`;
+        });
+
+        return `hIf([\n        ${branches.join(",\n        ")}\n    ])`;
+    }
+
+    _genProps(props) {
+        if (!props || props.length === 0) return "{}";
+
+        const entries = [];
+
+        for (const prop of props) {
+            switch (prop.type) {
+                case NodeType.ATTRIBUTE:
+                    entries.push(this._genAttrEntry(prop));
+                    break;
+                case NodeType.BINDING:
+                    entries.push(this._genBindingEntry(prop));
+                    break;
+                case NodeType.EVENT:
+                    entries.push(this._genEventEntry(prop));
+                    break;
+                case NodeType.DIRECTIVE:
+                    this._genDirectiveEntries(prop, entries);
+                    break;
+            }
+        }
+
+        return `{\n        ${entries.join(",\n        ")}\n    }`;
+    }
+
+    _genAttrEntry(prop) {
+        return `${JSON.stringify(prop.name)}: ${JSON.stringify(prop.value ?? true)}`;
+    }
+
+    _genBindingEntry(prop) {
+        const expr = this._wrapExpr(prop.expression.content);
+        if (prop.isProp) {
+            return `${JSON.stringify("prop:" + prop.name)}: () => ${expr}`;
+        }
+        return `${JSON.stringify(prop.name)}: () => ${expr}`;
+    }
+
+    _genEventEntry(prop) {
+        const key = JSON.stringify("@" + prop.name);
+        const expr = prop.expression.content;
+        const mods = JSON.stringify(prop.modifiers);
+        const handlerJs = this._genHandlerExpr(expr);
+        return `${key}: { handler: ${handlerJs}, modifiers: ${mods} }`;
+    }
+
+    _genHandlerExpr(expr) {
+        if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(expr.trim())) {
+            return `_ctx.${expr.trim()}`;
+        }
+        return `($event) => { ${expr} }`;
+    }
+
+    _genDirectiveEntries(dir, entries) {
+        switch (dir.name) {
+            case "if":
+            case "else-if":
+            case "else":
+                break;
+            case "for":
+                break;
+            case "show": {
+                const expr = this._wrapExpr(dir.expression.content);
+                entries.push(`'f-show': () => ${expr}`);
+                break;
+            }
+
+            case "model": {
+                const expr = dir.expression.content;
+                entries.push(`'f-model': () => _ctx.${expr}`);
+                entries.push(
+                    `'@input': { handler: ($e) => { _ctx.${expr}($e.target.value) }, modifiers: [] }`,
+                );
+                break;
+            }
+
+            case "html": {
+                const expr = this._wrapExpr(dir.expression.content);
+                entries.push(`'f-html': () => ${expr}`);
+                break;
+            }
+
+            case "ref": {
+                const name = dir.expression.content.trim();
+                entries.push(`'f-ref': ${JSON.stringify(name)}`);
+                break;
+            }
+
+            case "once":
+                entries.push(`'f-once': true`);
+                break;
+
+            default:
+                entries.push(
+                    `${JSON.stringify("f-" + dir.name)}: ${dir.expression ? `() => ${this._wrapExpr(dir.expression.content)}` : "true"}`,
+                );
+        }
+    }
+
+    _genComponentProps(props) {
+        if (!props || props.length === 0) return "{}";
+
+        const entries = [];
+
+        for (const prop of props) {
+            if (prop.type === NodeType.ATTRIBUTE) {
+                entries.push(
+                    `${JSON.stringify(prop.name)}: ${JSON.stringify(prop.value ?? true)}`,
+                );
+            } else if (prop.type === NodeType.BINDING) {
+                entries.push(
+                    `${JSON.stringify(prop.name)}: () => ${this._wrapExpr(prop.expression.content)}`,
+                );
+            } else if (prop.type === NodeType.EVENT) {
+                const handlerJs = this._genHandlerExpr(prop.expression.content);
+                entries.push(`${JSON.stringify("on:" + prop.name)}: ${handlerJs}`);
+            }
+        }
+
+        return `{ ${entries.join(", ")} }`;
+    }
+
+    _genSlots(slots) {
+        if (!slots || Object.keys(slots).length === 0) return "{}";
+
+        const entries = Object.entries(slots).map(([name, children]) => {
+            const childrenJs = this._genChildrenArray(children);
+            return `${JSON.stringify(name)}: () => ${childrenJs}`;
+        });
+
+        return `{ ${entries.join(", ")} }`;
+    }
+
+    _genChildrenArray(children) {
+        if (!children || children.length === 0) return "[]";
+        const expanded = children.flatMap((child) => {
+            const forDir = child.props?.find?.(
+                (p) => p.type === NodeType.DIRECTIVE && p.name === "for",
+            );
+            if (forDir) return [this._genForNode(child, forDir)];
+            return [this._genNode(child)];
+        });
+
+        if (expanded.length === 1) return `[${expanded[0]}]`;
+        return `[\n        ${expanded.join(",\n        ")}\n    ]`;
+    }
+
+    _genForNode(node, forDir) {
+        this._imports.add("hFor");
+
+        const { item, source, index } = forDir.arg;
+        const sourceJs = this._wrapExpr(source);
+
+        this.localScopes.push(new Set([item, index].filter(Boolean)));
+
+        const innerProps = node.props.filter(
+            (p) => !(p.type === NodeType.DIRECTIVE && p.name === "for"),
+        );
+        const innerNode = { ...node, props: innerProps };
+        const keyBinding = innerProps.find(
+            (p) => p.type === NodeType.BINDING && p.name === "key",
+        );
+        const keyExpr = keyBinding ? keyBinding.expression.content : "undefined";
+        const itemParam = index ? `${item}, ${index}` : item;
+        const itemParamStr = `(${itemParam})`;
+        const innerJs = this._genNode(innerNode);
+        const keyJs = this._wrapExpr(keyExpr);
+
+        this.localScopes.pop();
+
+        return `hFor(\n        () => ${sourceJs},\n        ${itemParamStr} => ${innerJs},\n        ${itemParamStr} => ${keyJs}\n    )`;
+    }
+
+    isLocal(id) {
+        return this.localScopes.some((scope) => scope.has(id));
+    }
+
+    _wrapExpr(expr) {
+        if (expr.includes("_ctx.")) return expr;
+        if (/^[a-zA-Z_$][a-zA-Z0-9_$.]*$/.test(expr.trim())) {
+            const id = expr.trim();
+            if (this.isLocal(id)) return id;
+            return `(typeof _ctx.${id} === 'function' && _ctx.${id}.isSignal ? _ctx.${id}() : _ctx.${id})`;
+        }
+
+        return this._rewriteExpr(expr);
+    }
+
+    _rewriteExpr(expr) {
+        const GLOBALS = new Set([
+            'true', 'false', 'null', 'undefined', 'NaN', 'Infinity',
+            'Array', 'Object', 'String', 'Number', 'Boolean', 'Date',
+            'Math', 'JSON', 'Promise', 'Map', 'Set', 'Symbol',
+            'parseInt', 'parseFloat', 'isNaN', 'isFinite', 'console',
+            'typeof', 'instanceof', 'void', 'delete', 'new', 'return',
+            'if', 'else', 'for', 'while', 'do', 'switch', 'case',
+            'break', 'continue', 'function', 'class', 'const', 'let',
+            'var', 'import', 'export', 'default', 'this',
+        ]);
+
+        return expr.replace(
+            /(?<![.\w$])([a-zA-Z_$][a-zA-Z0-9_$]*)(?!\s*:)(?=\s*[\(\.\,\)\]\s+\|\&\!\?\+\-\*\/\%\=\<\>]|$)/g,
+            (match, id) => {
+                if (GLOBALS.has(id)) return match;
+                if (this.isLocal(id)) return match;
+                return `_ctx.${id}`;
+            }
+        );
+    }
+}