fusee-framework 1.8.0 → 1.9.0

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}`;
+            }
+        );
+    }
+}

package/framework/core/compiler/lexer.js

@@ -0,0 +1,347 @@
+import { CompileError, throwError } from "./errors.js";
+import { ErrorCode } from "./errors-list.js";
+import { createPos, createLoc } from "./ast.js";
+
+export const TokenType = {
+    TAG_OPEN: "TAG_OPEN",
+    TAG_OPEN_CLOSE: "TAG_OPEN_CLOSE",
+    TAG_CLOSE: "TAG_CLOSE",
+    TAG_SELF_CLOSE: "TAG_SELF_CLOSE",
+    COMMENT: "COMMENT",
+    ATTR_NAME: "ATTR_NAME",
+    ATTR_EQUALS: "ATTR_EQUALS",
+    ATTR_VALUE: "ATTR_VALUE",
+    TEXT: "TEXT",
+    MUSTACHE_OPEN: "MUSTACHE_OPEN",
+    MUSTACHE_EXPR: "MUSTACHE_EXPR",
+    MUSTACHE_CLOSE: "MUSTACHE_CLOSE",
+    EOF: "EOF",
+};
+
+export function tokenize(source) {
+    const lexer = new Lexer(source);
+    return lexer.tokenize();
+}
+
+class Lexer {
+    constructor(source) {
+        this.source = source;
+        this.tokens = [];
+        this.pos = 0;
+        this.line = 1;
+        this.col = 1;
+        this._mode = "text";
+    }
+
+    tokenize() {
+        while (!this._eof()) {
+            if (this._mode === "text") {
+                this._readText();
+            } else if (this._mode === "tag") {
+                this._readInTag();
+            }
+        }
+        this._push(TokenType.EOF, "", this._startPos());
+        return this.tokens;
+    }
+
+    _readText() {
+        if (this._lookingAt("<!--")) {
+            this._readComment();
+            return;
+        }
+
+        if (this._lookingAt("</")) {
+            this._readClosingTag();
+            return;
+        }
+
+        if (this._peek() === "<" && this._isTagNameStart(this._peekAt(1))) {
+            this._readOpenTag();
+            return;
+        }
+
+        if (this._lookingAt("{{")) {
+            this._readMustache();
+            return;
+        }
+
+        const start = this._startPos();
+        let text = "";
+        while (!this._eof()) {
+            if (this._peek() === "<" || this._lookingAt("{{")) break;
+            text += this._advance();
+        }
+
+        if (text) this._push(TokenType.TEXT, text, start);
+    }
+
+    _readOpenTag() {
+        const start = this._startPos();
+        this._consume("<");
+        const name = this._readTagName();
+        this._pushAt(TokenType.TAG_OPEN, name, start);
+        this._mode = "tag";
+    }
+
+    _readClosingTag() {
+        const start = this._startPos();
+        this._consume("</");
+        const name = this._readTagName();
+        this._pushAt(TokenType.TAG_OPEN_CLOSE, name, start);
+        this._skipWhitespace();
+        if (!this._eof() && this._peek() === ">") {
+            const closeStart = this._startPos();
+            this._consume(">");
+            this._push(TokenType.TAG_CLOSE, ">", closeStart);
+        }
+    }
+
+    _readComment() {
+        const start = this._startPos();
+        this._consume("<!--");
+        let content = "";
+        while (!this._eof() && !this._lookingAt("-->")) {
+            content += this._advance();
+        }
+        if (this._eof()) {
+            throwError(
+                ErrorCode.MALFORMED_COMMENT,
+                createLoc(start, this._startPos()),
+                this.source,
+            );
+        }
+        this._consume("-->");
+        this._push(TokenType.COMMENT, content.trim(), start);
+    }
+
+    _readMustache() {
+        const openStart = this._startPos();
+        this._consume("{{");
+        this._push(TokenType.MUSTACHE_OPEN, "{{", openStart);
+
+        const exprStart = this._startPos();
+        let expr = "";
+        let depth = 0;
+        let inStr = false;
+        let strChar = null;
+
+        while (!this._eof()) {
+            const ch = this._peek();
+
+            if (inStr) {
+                if (ch === "\\") {
+                    expr += this._advance();
+                    expr += this._advance();
+                    continue;
+                }
+                if (ch === strChar) {
+                    inStr = false;
+                }
+                expr += this._advance();
+                continue;
+            }
+
+            if (ch === '"' || ch === "'" || ch === "`") {
+                inStr = true;
+                strChar = ch;
+                expr += this._advance();
+                continue;
+            }
+            if (ch === "{") {
+                depth++;
+                expr += this._advance();
+                continue;
+            }
+            if (ch === "}") {
+                if (depth > 0) {
+                    depth--;
+                    expr += this._advance();
+                    continue;
+                }
+                if (this._peekAt(1) === "}") {
+                    this._push(TokenType.MUSTACHE_EXPR, expr.trim(), exprStart);
+                    const closeStart = this._startPos();
+                    this._consume("}}");
+                    this._push(TokenType.MUSTACHE_CLOSE, "}}", closeStart);
+                    return;
+                }
+            }
+
+            expr += this._advance();
+        }
+
+        throwError(
+            ErrorCode.UNTERMINATED_MUSTACHE,
+            createLoc(openStart, this._startPos()),
+            this.source,
+            expr,
+        );
+    }
+
+    _readInTag() {
+        this._skipWhitespace();
+        if (this._eof()) return;
+
+        if (this._match("/>")) {
+            this._push(TokenType.TAG_SELF_CLOSE, "/>", this._startPos());
+            this._mode = "text";
+            return;
+        }
+
+        if (this._peek() === ">") {
+            this._consume(">");
+            this._push(TokenType.TAG_CLOSE, ">", this._startPos());
+            this._mode = "text";
+            return;
+        }
+
+        const start = this._startPos();
+        const name = this._readAttrName();
+        if (!name) return;
+
+        this._push(TokenType.ATTR_NAME, name, start);
+        this._skipWhitespace();
+
+        if (this._peek() === "=") {
+            this._consume("=");
+            this._push(TokenType.ATTR_EQUALS, "=", this._startPos());
+            this._skipWhitespace();
+            this._readAttrValue();
+        }
+    }
+
+    _readAttrName() {
+        let name = "";
+
+        if (this._peek() === "@") {
+            name += this._advance();
+        } else if (this._peek() === ":") {
+            name += this._advance();
+        }
+
+        while (!this._eof()) {
+            const ch = this._peek();
+            if (/[a-zA-Z0-9\-_.:]/.test(ch)) {
+                name += this._advance();
+            } else break;
+        }
+
+        return name || null;
+    }
+
+    _readAttrValue() {
+        if (this._eof()) return;
+        const quote = this._peek();
+        if (quote !== '"' && quote !== "'") {
+            const start = this._startPos();
+            let val = "";
+            while (!this._eof() && !/[\s>]/.test(this._peek())) {
+                val += this._advance();
+            }
+            this._push(TokenType.ATTR_VALUE, val, start);
+            return;
+        }
+
+        this._consume(quote);
+        const start = this._startPos();
+        let val = "";
+
+        while (!this._eof()) {
+            const ch = this._peek();
+            if (ch === quote) {
+                this._consume(quote);
+                break;
+            }
+            if (ch === "\\") {
+                this._advance();
+                val += this._advance();
+                continue;
+            }
+            val += this._advance();
+        }
+
+        this._push(TokenType.ATTR_VALUE, val, start);
+    }
+
+    _readTagName() {
+        let name = "";
+        while (!this._eof() && /[a-zA-Z0-9\-_.]/.test(this._peek())) {
+            name += this._advance();
+        }
+        return name;
+    }
+
+    _isTagNameStart(ch) {
+        return ch != null && /[a-zA-Z_]/.test(ch);
+    }
+
+    _eof() {
+        return this.pos >= this.source.length;
+    }
+
+    _peek() {
+        return this.source[this.pos];
+    }
+
+    _peekAt(n) {
+        return this.source[this.pos + n];
+    }
+
+    _lookingAt(str) {
+        return this.source.startsWith(str, this.pos);
+    }
+
+    _match(str) {
+        if (this._lookingAt(str)) {
+            for (const ch of str) this._advance();
+            return true;
+        }
+        return false;
+    }
+
+    _consume(expected) {
+        for (const ch of expected) {
+            if (this.source[this.pos] !== ch) {
+                throwError(
+                    ErrorCode.UNEXPECTED_CHAR,
+                    createLoc(this._startPos(), this._startPos()),
+                    this.source,
+                    this.source[this.pos],
+                );
+            }
+            this._advance();
+        }
+    }
+
+    _advance() {
+        const ch = this.source[this.pos++];
+        if (ch === "\n") {
+            this.line++;
+            this.col = 1;
+        } else {
+            this.col++;
+        }
+        return ch;
+    }
+
+    _skipWhitespace() {
+        while (!this._eof() && /\s/.test(this._peek())) this._advance();
+    }
+
+    _startPos() {
+        return createPos(this.line, this.col, this.pos);
+    }
+
+    _push(type, value, start) {
+        this.tokens.push({
+            type,
+            value,
+            loc: createLoc(start, this._startPos(), value),
+        });
+    }
+
+    _pushAt(type, value, start) {
+        this._push(type, value, start);
+    }
+}