@fluffjs/cli 0.0.1

package/TemplateParser.js

@@ -0,0 +1,330 @@
+import * as parse5 from 'parse5';
+import { html as parse5Html } from 'parse5';
+import { ControlFlowParser } from './ControlFlowParser.js';
+import { expressionUsesVariable, parseInterpolations, transformInterpolation } from './ExpressionTransformer.js';
+export class TemplateParser {
+    bindingId = 0;
+    bindings = [];
+    controlFlows = [];
+    controlFlowParser = new ControlFlowParser();
+    templateRefs = new Set();
+    parse(html) {
+        this.bindingId = 0;
+        this.bindings = [];
+        this.controlFlows = [];
+        this.templateRefs = new Set();
+        let result = html;
+        result = this.processControlFlowBlocks(result);
+        result = this.processWithParse5(result);
+        return {
+            html: result,
+            bindings: this.bindings,
+            controlFlows: this.controlFlows,
+            templateRefs: Array.from(this.templateRefs)
+        };
+    }
+    processControlFlowBlocks(html) {
+        let result = this.processSwitchBlocksNew(html);
+        result = this.processForBlocksNew(result);
+        result = this.processIfBlocksNew(result);
+        return result;
+    }
+    processSwitchBlocksNew(html) {
+        const { result: parsed, blocks } = this.controlFlowParser.parseSwitchBlocks(html);
+        let result = parsed;
+        for (let i = 0; i < blocks.length; i++) {
+            const block = blocks[i];
+            if (!block)
+                continue;
+            const id = `l${this.bindingId++}`;
+            const processedCases = block.cases.map(c => ({
+                value: c.value,
+                content: this.processControlFlowBlocks(this.processControlFlowContent(c.content))
+                    .trim(),
+                fallthrough: c.fallthrough
+            }));
+            this.controlFlows.push({
+                id, type: 'switch', expression: block.expression, cases: processedCases
+            });
+            const placeholder = `__SWITCH_BLOCK_${i}__`;
+            const replacement = `<!--${id}--><!--/${id}-->`;
+            result = result.replace(placeholder, replacement);
+        }
+        return result;
+    }
+    processForBlocksNew(html) {
+        const { result: parsed, blocks } = this.controlFlowParser.parseForBlocks(html);
+        let result = parsed;
+        for (let i = 0; i < blocks.length; i++) {
+            const block = blocks[i];
+            if (!block)
+                continue;
+            const id = `l${this.bindingId++}`;
+            let content = this.processControlFlowBlocks(block.content);
+            content = this.processControlFlowContent(content, block.iterator);
+            const trimmedContent = content.trim();
+            const isOptionContent = trimmedContent.startsWith('<option');
+            this.controlFlows.push({
+                id,
+                type: 'for',
+                iterator: block.iterator,
+                iterable: block.iterable,
+                trackBy: block.trackBy,
+                content: trimmedContent
+            });
+            const placeholder = `__FOR_BLOCK_${i}__`;
+            const replacement = isOptionContent ? `<!--for-${id}--><!--/for-${id}-->` : `<!--${id}--><!--/${id}-->`;
+            result = result.replace(placeholder, replacement);
+        }
+        return result;
+    }
+    processIfBlocksNew(html) {
+        const { result: parsed, blocks } = this.controlFlowParser.parseIfBlocks(html);
+        let result = parsed;
+        for (let i = 0; i < blocks.length; i++) {
+            const block = blocks[i];
+            if (!block)
+                continue;
+            const id = `l${this.bindingId++}`;
+            let ifContent = this.processControlFlowBlocks(block.ifContent);
+            ifContent = this.processControlFlowContent(ifContent);
+            let elseContent = '';
+            if (block.elseContent) {
+                elseContent = this.processControlFlowBlocks(block.elseContent);
+                elseContent = this.processControlFlowContent(elseContent);
+            }
+            this.controlFlows.push({
+                id, type: 'if', condition: block.condition, ifContent: ifContent.trim(), elseContent: elseContent.trim()
+            });
+            const placeholder = `__IF_BLOCK_${i}__`;
+            const replacement = `<!--${id}--><!--/${id}-->`;
+            result = result.replace(placeholder, replacement);
+        }
+        return result;
+    }
+    processWithParse5(html) {
+        const fragment = parse5.parseFragment(html, { sourceCodeLocationInfo: true });
+        this.walkNodes(fragment.childNodes, html);
+        return parse5.serialize(fragment);
+    }
+    walkNodes(nodes, source) {
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (this.isElement(node)) {
+                this.processElement(node, source);
+                if (node.childNodes) {
+                    this.walkNodes(node.childNodes, source);
+                }
+            }
+            else if (this.isTextNode(node)) {
+                const newNodes = this.processTextNode(node);
+                if (newNodes.length > 0) {
+                    nodes.splice(i, 1, ...newNodes);
+                    i += newNodes.length - 1;
+                }
+            }
+        }
+    }
+    isTextNode(node) {
+        return 'value' in node && !('tagName' in node);
+    }
+    processTextNode(textNode, iteratorVar, inControlFlow = false) {
+        const text = textNode.value;
+        const interpolations = parseInterpolations(text);
+        if (interpolations.length === 0) {
+            return [textNode];
+        }
+        const nodes = [];
+        let lastIndex = 0;
+        for (const { start, end, expr } of interpolations) {
+            if (start > lastIndex) {
+                nodes.push(this.createTextNode(text.slice(lastIndex, start)));
+            }
+            if (inControlFlow) {
+                const usesIterator = iteratorVar && expressionUsesVariable(expr, iteratorVar);
+                const transformed = transformInterpolation(expr, iteratorVar);
+                if (usesIterator) {
+                    nodes.push(this.createTextNode(`\${${transformed}}`));
+                }
+                else {
+                    const id = `l${this.bindingId++}`;
+                    nodes.push(this.createSpanWithTextBind(transformed, id));
+                }
+            }
+            else {
+                const id = `l${this.bindingId++}`;
+                this.bindings.push({
+                    id, type: 'text', expression: expr
+                });
+                nodes.push(this.createSpanElement(id));
+            }
+            lastIndex = end;
+        }
+        if (lastIndex < text.length) {
+            nodes.push(this.createTextNode(text.slice(lastIndex)));
+        }
+        return nodes;
+    }
+    createTextNode(value) {
+        return {
+            nodeName: '#text',
+            value,
+            parentNode: null
+        };
+    }
+    createSpanElement(id) {
+        return {
+            nodeName: 'span',
+            tagName: 'span',
+            attrs: [{ name: 'data-lid', value: id }],
+            childNodes: [],
+            namespaceURI: parse5Html.NS.HTML,
+            parentNode: null
+        };
+    }
+    isElement(node) {
+        return 'tagName' in node;
+    }
+    getOriginalAttrName(element, attr, source) {
+        const attrLocations = 'sourceCodeLocation' in element && element.sourceCodeLocation &&
+            typeof element.sourceCodeLocation === 'object' && 'attrs' in element.sourceCodeLocation
+            ? element.sourceCodeLocation.attrs
+            : undefined;
+        if (attrLocations?.[attr.name]) {
+            const loc = attrLocations[attr.name];
+            if (loc) {
+                const [originalName] = source.slice(loc.startOffset, loc.endOffset)
+                    .split('=');
+                return originalName;
+            }
+        }
+        return attr.name;
+    }
+    processElement(element, source) {
+        const bindings = [];
+        const attrsToRemove = [];
+        for (const attr of element.attrs) {
+            if (attr.name.startsWith('[(') && attr.name.endsWith(')]')) {
+                const prop = attr.name.slice(2, -2);
+                const expr = attr.value;
+                bindings.push({ type: 'property', target: prop, expression: expr });
+                bindings.push({ type: 'event', eventName: 'input', expression: `${expr} = $event.target.${prop}` });
+                attrsToRemove.push(attr.name);
+            }
+            else if (attr.name.startsWith('[') && attr.name.endsWith(']')) {
+                const prop = attr.name.slice(1, -1);
+                const expr = attr.value;
+                if (prop.startsWith('class.')) {
+                    bindings.push({ type: 'class', className: prop.slice(6), expression: expr });
+                }
+                else if (prop.startsWith('style.')) {
+                    bindings.push({ type: 'style', styleProp: prop.slice(6), expression: expr });
+                }
+                else {
+                    const dangerousProps = ['innerHTML', 'outerHTML', 'href', 'src'];
+                    const isUnsafe = prop.endsWith('.unsafe');
+                    const baseProp = isUnsafe ? prop.slice(0, -7) : prop;
+                    if (dangerousProps.includes(baseProp) && !isUnsafe) {
+                        throw new Error(`XSS Protection: [${prop}] binding is blocked. ` + `Use [${prop}.unsafe] if you understand the security implications ` + 'and have sanitized user input.');
+                    }
+                    bindings.push({ type: 'property', target: baseProp, expression: expr });
+                }
+                attrsToRemove.push(attr.name);
+            }
+            else if (attr.name.startsWith('(') && attr.name.endsWith(')')) {
+                const eventName = attr.name.slice(1, -1);
+                bindings.push({ type: 'event', eventName, expression: attr.value });
+                attrsToRemove.push(attr.name);
+            }
+            else if (attr.name.startsWith('#')) {
+                const originalName = this.getOriginalAttrName(element, attr, source);
+                const refName = originalName.slice(1);
+                attrsToRemove.push(attr.name);
+                element.attrs.push({ name: 'data-ref', value: refName });
+                this.templateRefs.add(refName);
+            }
+        }
+        if (bindings.length > 0) {
+            const id = `l${this.bindingId++}`;
+            element.attrs = element.attrs.filter(a => !attrsToRemove.includes(a.name));
+            element.attrs.push({ name: 'data-lid', value: id });
+            for (const binding of bindings) {
+                this.bindings.push({ ...binding, id });
+            }
+        }
+    }
+    processControlFlowContent(html, iteratorVar) {
+        const fragment = parse5.parseFragment(html, { sourceCodeLocationInfo: true });
+        this.walkControlFlowNodes(fragment.childNodes, html, iteratorVar);
+        return parse5.serialize(fragment);
+    }
+    walkControlFlowNodes(nodes, source, iteratorVar) {
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (this.isElement(node)) {
+                this.processControlFlowElement(node, source, iteratorVar);
+                if (node.childNodes) {
+                    this.walkControlFlowNodes(node.childNodes, source, iteratorVar);
+                }
+            }
+            else if (this.isTextNode(node)) {
+                const newNodes = this.processTextNode(node, iteratorVar, true);
+                if (newNodes.length > 0) {
+                    nodes.splice(i, 1, ...newNodes);
+                    i += newNodes.length - 1;
+                }
+            }
+        }
+    }
+    processControlFlowElement(element, source, iteratorVar) {
+        for (const attr of element.attrs) {
+            const originalName = this.getOriginalAttrName(element, attr, source);
+            if (attr.name.startsWith('[') && attr.name.endsWith(']')) {
+                const lowercaseProp = attr.name.slice(1, -1);
+                const originalProp = originalName.slice(1, -1); // Remove [ ]
+                if (originalProp !== lowercaseProp) {
+                    attr.value = JSON.stringify([originalProp, attr.value]);
+                }
+            }
+            else if (attr.name.startsWith('(') && attr.name.endsWith(')')) {
+                const lowercaseEvent = attr.name.slice(1, -1);
+                const originalEvent = originalName.slice(1, -1); // Remove ( )
+                if (originalEvent !== lowercaseEvent) {
+                    attr.value = JSON.stringify([originalEvent, attr.value]);
+                }
+            }
+            else if (attr.name.startsWith('#')) {
+                const refName = originalName.slice(1);
+                attr.name = 'data-ref';
+                attr.value = refName;
+                this.templateRefs.add(refName);
+            }
+            const interpolations = parseInterpolations(attr.value);
+            if (interpolations.length > 0) {
+                let newValue = '';
+                let lastEnd = 0;
+                for (const { start, end, expr } of interpolations) {
+                    newValue += attr.value.slice(lastEnd, start);
+                    const transformed = transformInterpolation(expr, iteratorVar);
+                    newValue += `\${${transformed}}`;
+                    lastEnd = end;
+                }
+                newValue += attr.value.slice(lastEnd);
+                attr.value = newValue;
+            }
+        }
+    }
+    createSpanWithTextBind(expr, id) {
+        return {
+            nodeName: 'span',
+            tagName: 'span',
+            attrs: [
+                { name: 'data-text-bind', value: expr },
+                { name: 'data-lid', value: id }
+            ],
+            childNodes: [],
+            namespaceURI: parse5Html.NS.HTML,
+            parentNode: null
+        };
+    }
+}

package/babel-plugin-class-transform.d.ts

@@ -0,0 +1,20 @@
+import type { PluginObj } from '@babel/core';
+export interface ClassTransformOptions {
+    className: string;
+    originalSuperClass?: string;
+    newSuperClass?: string;
+    injectMethods?: {
+        name: string;
+        body: string;
+    }[];
+}
+interface PluginState {
+    opts: ClassTransformOptions;
+}
+export default function classTransformPlugin(): PluginObj<PluginState>;
+export declare function injectMethodBodies(code: string, methods: {
+    name: string;
+    body: string;
+}[]): string;
+export {};
+//# sourceMappingURL=babel-plugin-class-transform.d.ts.map

package/babel-plugin-class-transform.js

@@ -0,0 +1,40 @@
+import { types as t } from '@babel/core';
+export default function classTransformPlugin() {
+    return {
+        name: 'babel-plugin-class-transform', visitor: {
+            ClassDeclaration(path, state) {
+                const opts = state.opts || {};
+                const { className, originalSuperClass, newSuperClass, injectMethods } = opts;
+                if (!path.node.id?.name || path.node.id.name !== className) {
+                    return;
+                }
+                if (originalSuperClass && newSuperClass && path.node.superClass) {
+                    if (t.isIdentifier(path.node.superClass) && path.node.superClass.name === originalSuperClass) {
+                        path.node.superClass = t.identifier(newSuperClass);
+                    }
+                }
+                if (injectMethods && injectMethods.length > 0) {
+                    const newMethods = [];
+                    for (const method of injectMethods) {
+                        const methodNode = t.classMethod('method', t.identifier(method.name), [], t.blockStatement([
+                            t.expressionStatement(t.identifier(`__INJECT_${method.name}__`))
+                        ]));
+                        newMethods.push(methodNode);
+                    }
+                    for (const method of newMethods.reverse()) {
+                        path.get('body')
+                            .unshiftContainer('body', method);
+                    }
+                }
+            }
+        }
+    };
+}
+export function injectMethodBodies(code, methods) {
+    let result = code;
+    for (const method of methods) {
+        const placeholder = `__INJECT_${method.name}__;`;
+        result = result.replace(placeholder, method.body);
+    }
+    return result;
+}

package/babel-plugin-component.d.ts

@@ -0,0 +1,14 @@
+import type { PluginObj } from '@babel/core';
+export interface ComponentMetadata {
+    selector: string;
+    templateUrl: string;
+    styleUrl?: string;
+    className: string;
+}
+export declare const componentMetadataMap: Map<string, ComponentMetadata>;
+interface PluginState {
+    filename?: string;
+}
+export default function componentPlugin(): PluginObj<PluginState>;
+export {};
+//# sourceMappingURL=babel-plugin-component.d.ts.map

package/babel-plugin-component.js

@@ -0,0 +1,76 @@
+import { types as t } from '@babel/core';
+export const componentMetadataMap = new Map();
+export default function componentPlugin() {
+    return {
+        name: 'babel-plugin-component', visitor: {
+            ClassDeclaration(path, state) {
+                const decorators = path.node.decorators ?? [];
+                const componentDecorator = decorators.find(dec => {
+                    if (t.isCallExpression(dec.expression)) {
+                        const { callee } = dec.expression;
+                        return t.isIdentifier(callee) && callee.name === 'Component';
+                    }
+                    return false;
+                });
+                if (!componentDecorator)
+                    return;
+                if (!t.isCallExpression(componentDecorator.expression))
+                    return;
+                const args = componentDecorator.expression.arguments;
+                if (args.length === 0)
+                    return;
+                const [configArg] = args;
+                if (!t.isObjectExpression(configArg))
+                    return;
+                const metadata = {};
+                if (path.node.id) {
+                    metadata.className = path.node.id.name;
+                }
+                for (const prop of configArg.properties) {
+                    if (!t.isObjectProperty(prop))
+                        continue;
+                    if (!t.isIdentifier(prop.key))
+                        continue;
+                    const key = prop.key.name;
+                    const { value } = prop;
+                    if (t.isStringLiteral(value)) {
+                        switch (key) {
+                            case 'selector':
+                                metadata.selector = value.value;
+                                break;
+                            case 'templateUrl':
+                                metadata.templateUrl = value.value;
+                                break;
+                            case 'styleUrl':
+                                metadata.styleUrl = value.value;
+                                break;
+                        }
+                    }
+                    else if (t.isTemplateLiteral(value) && value.quasis.length === 1) {
+                        const strValue = value.quasis[0].value.cooked ?? value.quasis[0].value.raw;
+                        switch (key) {
+                            case 'selector':
+                                metadata.selector = strValue;
+                                break;
+                            case 'templateUrl':
+                                metadata.templateUrl = strValue;
+                                break;
+                            case 'styleUrl':
+                                metadata.styleUrl = strValue;
+                                break;
+                        }
+                    }
+                }
+                const filename = state.filename ?? 'unknown';
+                if (metadata.selector && metadata.templateUrl && metadata.className) {
+                    componentMetadataMap.set(filename, {
+                        selector: metadata.selector,
+                        templateUrl: metadata.templateUrl,
+                        className: metadata.className,
+                        styleUrl: metadata.styleUrl
+                    });
+                }
+            }
+        }
+    };
+}

package/babel-plugin-imports.d.ts

@@ -0,0 +1,13 @@
+import type { PluginObj } from '@babel/core';
+export interface ImportTransformOptions {
+    removeImportsFrom?: string[];
+    removeDecorators?: string[];
+    pathReplacements?: Record<string, string>;
+    addJsExtension?: boolean;
+}
+interface PluginState {
+    opts: ImportTransformOptions;
+}
+export default function importsPlugin(): PluginObj<PluginState>;
+export {};
+//# sourceMappingURL=babel-plugin-imports.d.ts.map

package/babel-plugin-imports.js

@@ -0,0 +1,76 @@
+import { types as t } from '@babel/core';
+function getDecoratorName(decorator) {
+    const expr = decorator.expression;
+    if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
+        return expr.callee.name;
+    }
+    if (t.isIdentifier(expr)) {
+        return expr.name;
+    }
+    return null;
+}
+export default function importsPlugin() {
+    return {
+        name: 'babel-plugin-imports', visitor: {
+            ImportDeclaration(path, state) {
+                const opts = state.opts ?? {};
+                const source = path.node.source.value;
+                if (opts.removeImportsFrom?.includes(source)) {
+                    path.remove();
+                    return;
+                }
+                let newSource = source;
+                if (opts.pathReplacements) {
+                    for (const [from, to] of Object.entries(opts.pathReplacements)) {
+                        if (newSource.startsWith(from)) {
+                            newSource = to + newSource.slice(from.length);
+                            break;
+                        }
+                    }
+                }
+                if (opts.addJsExtension && newSource.startsWith('.') && !newSource.endsWith('.js')) {
+                    newSource = newSource + '.js';
+                }
+                if (newSource !== source) {
+                    path.node.source = t.stringLiteral(newSource);
+                }
+            },
+            ClassDeclaration(path, state) {
+                const { removeDecorators } = state.opts ?? {};
+                if (!removeDecorators?.length)
+                    return;
+                const { decorators } = path.node;
+                if (!decorators)
+                    return;
+                path.node.decorators = decorators.filter(dec => {
+                    const name = getDecoratorName(dec);
+                    return !name || !removeDecorators.includes(name);
+                });
+            },
+            ClassProperty(path, state) {
+                const { removeDecorators } = state.opts ?? {};
+                if (!removeDecorators?.length)
+                    return;
+                const { decorators } = path.node;
+                if (!decorators)
+                    return;
+                path.node.decorators = decorators.filter(dec => {
+                    const name = getDecoratorName(dec);
+                    return !name || !removeDecorators.includes(name);
+                });
+            },
+            ClassMethod(path, state) {
+                const { removeDecorators } = state.opts ?? {};
+                if (!removeDecorators?.length)
+                    return;
+                const { decorators } = path.node;
+                if (!decorators)
+                    return;
+                path.node.decorators = decorators.filter(dec => {
+                    const name = getDecoratorName(dec);
+                    return !name || !removeDecorators.includes(name);
+                });
+            }
+        }
+    };
+}

package/babel-plugin-reactive.d.ts

@@ -0,0 +1,22 @@
+import type { PluginObj } from '@babel/core';
+import { types as t } from '@babel/core';
+interface WatchInfo {
+    methodName: string;
+    watchedProps: string[];
+}
+interface WatchCallInfo {
+    propName: string;
+    watchedProps: string[];
+    callbackArg: t.Expression | t.SpreadElement | t.JSXNamespacedName | t.ArgumentPlaceholder;
+}
+interface PluginState {
+    filename?: string;
+    needsPropertyImport?: boolean;
+    reactiveProperties?: Set<string>;
+    watchMethods?: WatchInfo[];
+    watchCalls?: WatchCallInfo[];
+}
+export declare const reactivePropertiesMap: Map<string, Set<string>>;
+export default function reactivePlugin(): PluginObj<PluginState>;
+export {};
+//# sourceMappingURL=babel-plugin-reactive.d.ts.map