npm - @fluffjs/cli - Versions diffs - 0.0.8 → 0.1.1 - Mend

@fluffjs/cli 0.0.8 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/BabelHelpers.d.ts +26 -0
package/BabelHelpers.js +65 -0
package/Cli.d.ts +7 -10
package/Cli.js +139 -52
package/CodeGenerator.d.ts +53 -39
package/CodeGenerator.js +330 -725
package/ComponentCompiler.d.ts +14 -16
package/ComponentCompiler.js +193 -257
package/DomPreProcessor.d.ts +36 -0
package/DomPreProcessor.js +645 -0
package/ErrorHelpers.d.ts +5 -0
package/ErrorHelpers.js +8 -0
package/ExpressionTransformer.d.ts +38 -28
package/ExpressionTransformer.js +558 -230
package/Generator.d.ts +1 -5
package/Generator.js +128 -67
package/GetterDependencyExtractor.d.ts +4 -0
package/GetterDependencyExtractor.js +73 -0
package/IndexHtmlTransformer.d.ts +6 -7
package/IndexHtmlTransformer.js +82 -88
package/Parse5Helpers.d.ts +17 -0
package/Parse5Helpers.js +95 -0
package/TemplateParser.d.ts +39 -21
package/TemplateParser.js +462 -268
package/Typeguards.d.ts +24 -0
package/Typeguards.js +30 -0
package/babel-plugin-class-transform.d.ts +3 -18
package/babel-plugin-class-transform.js +3 -11
package/babel-plugin-component.d.ts +4 -13
package/babel-plugin-component.js +7 -0
package/babel-plugin-imports.d.ts +3 -11
package/babel-plugin-imports.js +5 -31
package/babel-plugin-reactive.d.ts +2 -19
package/babel-plugin-reactive.js +21 -76
package/bin.js +2 -2
package/fluff-esbuild-plugin.d.ts +2 -5
package/fluff-esbuild-plugin.js +4 -1
package/index.d.ts +6 -2
package/index.js +1 -1
package/interfaces/BabelPluginClassTransformState.d.ts +5 -0
package/interfaces/BabelPluginComponentState.d.ts +4 -0
package/interfaces/BabelPluginComponentState.js +1 -0
package/interfaces/BabelPluginImportsState.d.ts +5 -0
package/interfaces/BabelPluginImportsState.js +1 -0
package/interfaces/BabelPluginReactiveState.d.ts +13 -0
package/interfaces/BabelPluginReactiveState.js +1 -0
package/interfaces/BabelPluginReactiveWatchCallInfo.d.ts +7 -0
package/interfaces/BabelPluginReactiveWatchCallInfo.js +1 -0
package/interfaces/BabelPluginReactiveWatchInfo.d.ts +5 -0
package/interfaces/BabelPluginReactiveWatchInfo.js +1 -0
package/interfaces/BabelToken.d.ts +8 -0
package/interfaces/BabelToken.js +1 -0
package/interfaces/BindingInfo.d.ts +12 -0
package/interfaces/BindingInfo.js +1 -0
package/interfaces/BreakMarkerConfig.d.ts +4 -0
package/interfaces/BreakMarkerConfig.js +1 -0
package/interfaces/BreakNode.d.ts +4 -0
package/interfaces/BreakNode.js +1 -0
package/interfaces/BundleOptions.d.ts +9 -0
package/interfaces/BundleOptions.js +1 -0
package/interfaces/ClassTransformOptions.d.ts +10 -0
package/interfaces/ClassTransformOptions.js +1 -0
package/interfaces/CliOptions.d.ts +8 -0
package/interfaces/CliOptions.js +1 -0
package/interfaces/CommentNode.d.ts +5 -0
package/interfaces/CommentNode.js +1 -0
package/interfaces/CompileResult.d.ts +6 -0
package/interfaces/CompileResult.js +1 -0
package/interfaces/CompilerOptions.d.ts +6 -0
package/interfaces/CompilerOptions.js +1 -0
package/interfaces/ComponentInfo.d.ts +8 -0
package/interfaces/ComponentInfo.js +1 -0
package/interfaces/ComponentMetadata.d.ts +9 -0
package/interfaces/ComponentMetadata.js +1 -0
package/interfaces/ControlFlow.d.ts +19 -0
package/interfaces/ControlFlow.js +1 -0
package/interfaces/ControlFlowNode.d.ts +6 -0
package/interfaces/ControlFlowNode.js +1 -0
package/interfaces/ControlFlowParseResult.d.ts +10 -0
package/interfaces/ControlFlowParseResult.js +1 -0
package/interfaces/ElementNode.d.ts +11 -0
package/interfaces/ElementNode.js +1 -0
package/interfaces/FluffConfigInterface.d.ts +7 -0
package/interfaces/FluffConfigInterface.js +1 -0
package/interfaces/FluffPluginOptions.d.ts +9 -0
package/interfaces/FluffPluginOptions.js +1 -0
package/interfaces/FluffTarget.d.ts +15 -0
package/interfaces/FluffTarget.js +1 -0
package/interfaces/ForMarkerConfig.d.ts +9 -0
package/interfaces/ForMarkerConfig.js +1 -0
package/interfaces/ForNode.d.ts +13 -0
package/interfaces/ForNode.js +1 -0
package/interfaces/GeneratorOptions.d.ts +5 -0
package/interfaces/GeneratorOptions.js +1 -0
package/interfaces/HtmlTransformOptions.d.ts +10 -0
package/interfaces/HtmlTransformOptions.js +1 -0
package/interfaces/IfBranch.d.ts +8 -0
package/interfaces/IfBranch.js +1 -0
package/interfaces/IfMarkerConfig.d.ts +8 -0
package/interfaces/IfMarkerConfig.js +1 -0
package/interfaces/IfNode.d.ts +7 -0
package/interfaces/IfNode.js +1 -0
package/interfaces/ImportTransformOptions.d.ts +7 -0
package/interfaces/ImportTransformOptions.js +1 -0
package/interfaces/InterpolationNode.d.ts +12 -0
package/interfaces/InterpolationNode.js +1 -0
package/interfaces/ParsedTemplate.d.ts +6 -0
package/interfaces/ParsedTemplate.js +1 -0
package/interfaces/ParsedTemplateOld.d.ts +9 -0
package/interfaces/ParsedTemplateOld.js +1 -0
package/interfaces/PropertyChain.d.ts +2 -0
package/interfaces/PropertyChain.js +1 -0
package/interfaces/Scope.d.ts +5 -0
package/interfaces/Scope.js +1 -0
package/interfaces/ServeOptions.d.ts +5 -0
package/interfaces/ServeOptions.js +1 -0
package/interfaces/SwitchCase.d.ts +8 -0
package/interfaces/SwitchCase.js +1 -0
package/interfaces/SwitchMarkerConfig.d.ts +11 -0
package/interfaces/SwitchMarkerConfig.js +1 -0
package/interfaces/SwitchNode.d.ts +10 -0
package/interfaces/SwitchNode.js +1 -0
package/interfaces/TemplateBinding.d.ts +10 -0
package/interfaces/TemplateBinding.js +1 -0
package/interfaces/TemplateNode.d.ts +7 -0
package/interfaces/TemplateNode.js +1 -0
package/interfaces/TextMarkerConfig.d.ts +10 -0
package/interfaces/TextMarkerConfig.js +1 -0
package/interfaces/TextNode.d.ts +5 -0
package/interfaces/TextNode.js +1 -0
package/interfaces/TokenizeResult.d.ts +6 -0
package/interfaces/TokenizeResult.js +1 -0
package/interfaces/TransformOptions.d.ts +11 -0
package/interfaces/TransformOptions.js +1 -0
package/interfaces/index.d.ts +34 -0
package/interfaces/index.js +1 -0
package/package.json +9 -1
package/types/FluffConfig.d.ts +5 -27
package/ControlFlowParser.d.ts +0 -55
package/ControlFlowParser.js +0 -279
package/types.d.ts +0 -46
/package/{types.js → interfaces/BabelPluginClassTransformState.js} +0 -0

package/Generator.d.ts CHANGED Viewed

@@ -1,7 +1,4 @@
-interface GeneratorOptions {
-    appName: string;
-    outputDir: string;
-}
+import type { GeneratorOptions } from './interfaces/GeneratorOptions.js';
 export declare class Generator {
     generate(options: GeneratorOptions): void;
     private writeFile;
@@ -18,5 +15,4 @@ export declare class Generator {
     private getComponentHtml;
     private getComponentCss;
 }
-export {};
 //# sourceMappingURL=Generator.d.ts.map

package/Generator.js CHANGED Viewed

@@ -1,6 +1,10 @@
+import * as t from '@babel/types';
 import * as fs from 'fs';
+import * as parse5 from 'parse5';
 import * as path from 'path';
 import { fileURLToPath } from 'url';
+import { generate } from './BabelHelpers.js';
+import { Parse5Helpers } from './Parse5Helpers.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export class Generator {
     generate(options) {
@@ -54,13 +58,17 @@ export class Generator {
     toPascalCase(str) {
         return str
             .split(/[-_\s]+/)
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+            .map(word => word.charAt(0)
+            .toUpperCase() + word.slice(1)
+            .toLowerCase())
             .join('');
     }
     toTitleCase(str) {
         return str
             .split(/[-_\s]+/)
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+            .map(word => word.charAt(0)
+            .toUpperCase() + word.slice(1)
+            .toLowerCase())
             .join(' ');
     }
     getPackageJson(name) {
@@ -138,13 +146,19 @@ export class Generator {
         }, null, 2) + '\n';
     }
     getIndexHtml(kebabName, titleName) {
-        return `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${titleName} - Fluff.js</title>
-    <style>
+        const doc = Parse5Helpers.createDocument();
+        const html = Parse5Helpers.createElement('html', [{ name: 'lang', value: 'en' }]);
+        const head = Parse5Helpers.createElement('head', []);
+        const body = Parse5Helpers.createElement('body', []);
+        const charset = Parse5Helpers.createElement('meta', [{ name: 'charset', value: 'UTF-8' }]);
+        const viewport = Parse5Helpers.createElement('meta', [
+            { name: 'name', value: 'viewport' },
+            { name: 'content', value: 'width=device-width, initial-scale=1.0' }
+        ]);
+        const title = Parse5Helpers.createElement('title', []);
+        Parse5Helpers.appendText(title, `${titleName} - Fluff.js`);
+        const style = Parse5Helpers.createElement('style', []);
+        Parse5Helpers.appendText(style, `
         * {
             margin: 0;
             padding: 0;
@@ -154,70 +168,117 @@ export class Generator {
         body {
             min-height: 100vh;
         }
-    </style>
-</head>
-<body>
-<${kebabName}></${kebabName}>
-<script type="module" src="./main.js"></script>
-</body>
-</html>
-`;
+    `);
+        Parse5Helpers.appendChild(head, charset);
+        Parse5Helpers.appendChild(head, viewport);
+        Parse5Helpers.appendChild(head, title);
+        Parse5Helpers.appendChild(head, style);
+        const appElement = Parse5Helpers.createElement(kebabName, []);
+        const script = Parse5Helpers.createElement('script', [
+            { name: 'type', value: 'module' },
+            { name: 'src', value: './main.js' }
+        ]);
+        Parse5Helpers.appendChild(body, appElement);
+        Parse5Helpers.appendChild(body, script);
+        Parse5Helpers.appendChild(html, head);
+        Parse5Helpers.appendChild(html, body);
+        doc.childNodes.push(html);
+        html.parentNode = doc;
+        return '<!DOCTYPE html>\n' + parse5.serialize(doc);
     }
     getMainTs(kebabName, pascalName) {
-        return `import { ${pascalName}Component } from './app/${kebabName}.component.js';
-customElements.define('${kebabName}', ${pascalName}Component);
-`;
+        const componentName = `${pascalName}Component`;
+        const importPath = `./app/${kebabName}.component.js`;
+        const importDecl = t.importDeclaration([t.importSpecifier(t.identifier(componentName), t.identifier(componentName))], t.stringLiteral(importPath));
+        const defineCall = t.expressionStatement(t.callExpression(t.memberExpression(t.identifier('customElements'), t.identifier('define')), [t.stringLiteral(kebabName), t.identifier(componentName)]));
+        const program = t.program([importDecl, defineCall]);
+        return generate(program, { compact: false }).code + '\n';
     }
     getComponentTs(kebabName, pascalName) {
-        return `import { Component, Reactive } from '@fluffjs/fluff';
-@Component({
-    selector: '${kebabName}',
-    templateUrl: './${kebabName}.component.html',
-    styleUrl: './${kebabName}.component.css'
-})
-export class ${pascalName}Component extends HTMLElement
-{
-    @Reactive() public name = 'World';
-    @Reactive() public count = 0;
-    public increment(): void
-    {
-        this.count++;
-    }
-}
-`;
+        const componentName = `${pascalName}Component`;
+        const importDecl = t.importDeclaration([
+            t.importSpecifier(t.identifier('Component'), t.identifier('Component')),
+            t.importSpecifier(t.identifier('Reactive'), t.identifier('Reactive'))
+        ], t.stringLiteral('@fluffjs/fluff'));
+        const componentDecorator = t.decorator(t.callExpression(t.identifier('Component'), [
+            t.objectExpression([
+                t.objectProperty(t.identifier('selector'), t.stringLiteral(kebabName)),
+                t.objectProperty(t.identifier('templateUrl'), t.stringLiteral(`./${kebabName}.component.html`)),
+                t.objectProperty(t.identifier('styleUrl'), t.stringLiteral(`./${kebabName}.component.css`))
+            ])
+        ]));
+        const reactiveDecorator = t.decorator(t.callExpression(t.identifier('Reactive'), []));
+        const nameProperty = t.classProperty(t.identifier('name'), t.stringLiteral('World'));
+        nameProperty.decorators = [reactiveDecorator];
+        const reactiveDecorator2 = t.decorator(t.callExpression(t.identifier('Reactive'), []));
+        const countProperty = t.classProperty(t.identifier('count'), t.numericLiteral(0));
+        countProperty.decorators = [reactiveDecorator2];
+        const incrementMethod = t.classMethod('method', t.identifier('increment'), [], t.blockStatement([
+            t.expressionStatement(t.updateExpression('++', t.memberExpression(t.thisExpression(), t.identifier('count'))))
+        ]));
+        const classDecl = t.classDeclaration(t.identifier(componentName), t.identifier('HTMLElement'), t.classBody([nameProperty, countProperty, incrementMethod]));
+        classDecl.decorators = [componentDecorator];
+        const exportDecl = t.exportNamedDeclaration(classDecl, []);
+        const program = t.program([importDecl, exportDecl]);
+        return generate(program, { compact: false }).code + '\n';
     }
     getComponentHtml() {
-        return `<div class="container">
-    <div class="card">
-        <div class="logo">🧸</div>
-        <h1>Hello, <span class="highlight">{{ name }}</span>!</h1>
-        <p class="tagline">Welcome to Fluff.js</p>
-        <div class="input-group">
-            <label for="name-input">What's your name?</label>
-            <input
-                    id="name-input"
-                    type="text"
-                    [value]="name"
-                    (input)="name = $event.target.value"
-                    placeholder="Enter your name..."
-            />
-        </div>
-        <div class="counter-section">
-            <p>You've clicked <strong>{{ count }}</strong> times</p>
-            <button class="btn" (click)="increment()">Click me! 🎉</button>
-        </div>
-        <footer>
-            <p>Built with Fluff.js — <em>"Just the good stuff"</em></p>
-        </footer>
-    </div>
-</div>
-`;
+        const fragment = parse5.parseFragment('');
+        const container = Parse5Helpers.createElement('div', [{ name: 'class', value: 'container' }]);
+        const card = Parse5Helpers.createElement('div', [{ name: 'class', value: 'card' }]);
+        const logo = Parse5Helpers.createElement('div', [{ name: 'class', value: 'logo' }]);
+        Parse5Helpers.appendText(logo, '🧸');
+        const h1 = Parse5Helpers.createElement('h1', []);
+        Parse5Helpers.appendText(h1, 'Hello, ');
+        const highlight = Parse5Helpers.createElement('span', [{ name: 'class', value: 'highlight' }]);
+        Parse5Helpers.appendText(highlight, '{{ name }}');
+        Parse5Helpers.appendChild(h1, highlight);
+        Parse5Helpers.appendText(h1, '!');
+        const tagline = Parse5Helpers.createElement('p', [{ name: 'class', value: 'tagline' }]);
+        Parse5Helpers.appendText(tagline, 'Welcome to Fluff.js');
+        const inputGroup = Parse5Helpers.createElement('div', [{ name: 'class', value: 'input-group' }]);
+        const label = Parse5Helpers.createElement('label', [{ name: 'for', value: 'name-input' }]);
+        Parse5Helpers.appendText(label, 'What\'s your name?');
+        const input = Parse5Helpers.createElement('input', [
+            { name: 'id', value: 'name-input' },
+            { name: 'type', value: 'text' },
+            { name: '[value]', value: 'name' },
+            { name: '(input)', value: 'name = $event.target.value' },
+            { name: 'placeholder', value: 'Enter your name...' }
+        ]);
+        Parse5Helpers.appendChild(inputGroup, label);
+        Parse5Helpers.appendChild(inputGroup, input);
+        const counterSection = Parse5Helpers.createElement('div', [{ name: 'class', value: 'counter-section' }]);
+        const counterP = Parse5Helpers.createElement('p', []);
+        Parse5Helpers.appendText(counterP, 'You\'ve clicked ');
+        const strong = Parse5Helpers.createElement('strong', []);
+        Parse5Helpers.appendText(strong, '{{ count }}');
+        Parse5Helpers.appendChild(counterP, strong);
+        Parse5Helpers.appendText(counterP, ' times');
+        const button = Parse5Helpers.createElement('button', [
+            { name: 'class', value: 'btn' },
+            { name: '(click)', value: 'increment()' }
+        ]);
+        Parse5Helpers.appendText(button, 'Click me! 🎉');
+        Parse5Helpers.appendChild(counterSection, counterP);
+        Parse5Helpers.appendChild(counterSection, button);
+        const footer = Parse5Helpers.createElement('footer', []);
+        const footerP = Parse5Helpers.createElement('p', []);
+        Parse5Helpers.appendText(footerP, 'Built with Fluff.js — ');
+        const em = Parse5Helpers.createElement('em', []);
+        Parse5Helpers.appendText(em, '"Just the good stuff"');
+        Parse5Helpers.appendChild(footerP, em);
+        Parse5Helpers.appendChild(footer, footerP);
+        Parse5Helpers.appendChild(card, logo);
+        Parse5Helpers.appendChild(card, h1);
+        Parse5Helpers.appendChild(card, tagline);
+        Parse5Helpers.appendChild(card, inputGroup);
+        Parse5Helpers.appendChild(card, counterSection);
+        Parse5Helpers.appendChild(card, footer);
+        Parse5Helpers.appendChild(container, card);
+        fragment.childNodes.push(container);
+        container.parentNode = fragment;
+        return parse5.serialize(fragment) + '\n';
     }
     getComponentCss() {
         return `:host {

package/GetterDependencyExtractor.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare class GetterDependencyExtractor {
+    static extractGetterDependencyMap(code: string, reactiveProps: Set<string>): Map<string, string[]>;
+}
+//# sourceMappingURL=GetterDependencyExtractor.d.ts.map

package/GetterDependencyExtractor.js ADDED Viewed

@@ -0,0 +1,73 @@
+import { parse } from '@babel/parser';
+import * as t from '@babel/types';
+import { traverse } from './BabelHelpers.js';
+export class GetterDependencyExtractor {
+    static extractGetterDependencyMap(code, reactiveProps) {
+        const getterDeps = new Map();
+        const backingFieldToProp = new Map();
+        for (const prop of reactiveProps) {
+            backingFieldToProp.set(`__${prop}`, prop);
+        }
+        const ast = parse(code, {
+            sourceType: 'module',
+            plugins: ['typescript', 'decorators']
+        });
+        const getterNames = new Set();
+        traverse(ast, {
+            ClassMethod(path) {
+                const { node } = path;
+                if (node.kind !== 'get') {
+                    return;
+                }
+                if (t.isIdentifier(node.key)) {
+                    getterNames.add(node.key.name);
+                }
+            }
+        });
+        traverse(ast, {
+            ClassMethod(path) {
+                const { node } = path;
+                if (node.kind !== 'get') {
+                    return;
+                }
+                if (!t.isIdentifier(node.key)) {
+                    return;
+                }
+                const getterName = node.key.name;
+                const deps = new Set();
+                path.traverse({
+                    MemberExpression(memberPath) {
+                        const { node: memberNode } = memberPath;
+                        const { object, property, computed } = memberNode;
+                        if (!t.isThisExpression(object)) {
+                            return;
+                        }
+                        if (computed) {
+                            return;
+                        }
+                        if (!t.isIdentifier(property)) {
+                            return;
+                        }
+                        const propName = property.name;
+                        const publicPropName = backingFieldToProp.get(propName) ?? propName;
+                        const { parent } = memberPath;
+                        if (t.isCallExpression(parent) && parent.callee === memberNode) {
+                            return;
+                        }
+                        if (reactiveProps.has(publicPropName)) {
+                            deps.add(publicPropName);
+                            return;
+                        }
+                        if (getterNames.has(publicPropName)) {
+                            return;
+                        }
+                    }
+                });
+                if (deps.size > 0) {
+                    getterDeps.set(getterName, Array.from(deps));
+                }
+            }
+        });
+        return getterDeps;
+    }
+}

package/IndexHtmlTransformer.d.ts CHANGED Viewed

@@ -1,9 +1,8 @@
-export interface TransformOptions {
-    jsBundle: string;
-    cssBundle?: string;
-    gzip?: boolean;
-    minify?: boolean;
-    liveReload?: boolean;
+import type { HtmlTransformOptions } from './interfaces/HtmlTransformOptions.js';
+export type { HtmlTransformOptions } from './interfaces/HtmlTransformOptions.js';
+export declare class IndexHtmlTransformer {
+    private static readonly LIVE_RELOAD_SCRIPT;
+    static transform(html: string, options: HtmlTransformOptions): Promise<string>;
+    private static decodeScriptTextNodes;
 }
-export declare function transformIndexHtml(html: string, options: TransformOptions): Promise<string>;
 //# sourceMappingURL=IndexHtmlTransformer.d.ts.map

package/IndexHtmlTransformer.js CHANGED Viewed

@@ -1,97 +1,91 @@
+import he from 'he';
 import { minify } from 'html-minifier-terser';
 import * as parse5 from 'parse5';
-import { html as parse5Html } from 'parse5';
-function isElement(node) {
-    return 'tagName' in node;
-}
-function findElement(node, tagName) {
-    if (isElement(node) && node.tagName === tagName) {
-        return node;
-    }
-    if ('childNodes' in node) {
-        for (const child of node.childNodes) {
-            const found = findElement(child, tagName);
-            if (found)
-                return found;
+import { Parse5Helpers } from './Parse5Helpers.js';
+import { Typeguards } from './Typeguards.js';
+export class IndexHtmlTransformer {
+    static LIVE_RELOAD_SCRIPT = `(function() {
+    let firstEvent = true;
+    const es = new EventSource('/esbuild');
+    es.addEventListener('change', e => {
+        if (firstEvent) {
+            firstEvent = false;
+            return;
         }
-    }
-    return null;
-}
-function appendChild(parent, child) {
-    child.parentNode = parent;
-    parent.childNodes.push(child);
-}
-function createLinkElement(href) {
-    return {
-        nodeName: 'link',
-        tagName: 'link',
-        attrs: [
-            { name: 'rel', value: 'stylesheet' },
-            { name: 'href', value: href }
-        ],
-        childNodes: [],
-        namespaceURI: parse5Html.NS.HTML,
-        parentNode: null
-    };
-}
-function createScriptElement(src) {
-    return {
-        nodeName: 'script',
-        tagName: 'script',
-        attrs: [
-            { name: 'type', value: 'module' },
-            { name: 'src', value: src }
-        ],
-        childNodes: [],
-        namespaceURI: parse5Html.NS.HTML,
-        parentNode: null
-    };
-}
-function getLiveReloadScript() {
-    return `<script>new EventSource('/esbuild').addEventListener('change', e => {
-    const { added, removed, updated } = JSON.parse(e.data);
-    if (!added.length && !removed.length && updated.length === 1) {
-        for (const link of document.getElementsByTagName("link")) {
-            const url = new URL(link.href);
-            if (url.host === location.host && url.pathname === updated[0]) {
-                const next = link.cloneNode();
-                next.href = updated[0] + '?' + Math.random().toString(36).slice(2);
-                next.onload = () => link.remove();
-                link.parentNode.insertBefore(next, link.nextSibling);
-                return;
+        const { added, removed, updated } = JSON.parse(e.data);
+        if (!added.length && !removed.length && updated.length === 1) {
+            for (const link of document.getElementsByTagName("link")) {
+                const url = new URL(link.href);
+                if (url.host === location.host && url.pathname === updated[0]) {
+                    const next = link.cloneNode();
+                    next.href = updated[0] + '?' + Math.random().toString(36).slice(2);
+                    next.onload = () => link.remove();
+                    link.parentNode.insertBefore(next, link.nextSibling);
+                    return;
+                }
             }
         }
+        location.reload();
+    });
+})();`;
+    static async transform(html, options) {
+        const doc = parse5.parse(html);
+        const jsSrc = options.gzScriptTag ? `${options.jsBundle}.gz` : options.jsBundle;
+        const cssSrc = options.cssBundle
+            ? (options.gzScriptTag ? `${options.cssBundle}.gz` : options.cssBundle)
+            : null;
+        const head = Parse5Helpers.findElement(doc, 'head');
+        const body = Parse5Helpers.findElement(doc, 'body');
+        if (head && options.inlineStyles) {
+            const styleEl = Parse5Helpers.createElement('style', []);
+            Parse5Helpers.appendText(styleEl, options.inlineStyles);
+            Parse5Helpers.appendChild(head, styleEl);
+        }
+        if (head && cssSrc) {
+            const linkEl = Parse5Helpers.createElement('link', [
+                { name: 'rel', value: 'stylesheet' },
+                { name: 'href', value: cssSrc }
+            ]);
+            Parse5Helpers.appendChild(head, linkEl);
+        }
+        if (body) {
+            const scriptEl = Parse5Helpers.createElement('script', [
+                { name: 'type', value: 'module' },
+                { name: 'src', value: jsSrc }
+            ]);
+            Parse5Helpers.appendChild(body, scriptEl);
+        }
+        if (body && options.liveReload) {
+            const inlineScriptEl = Parse5Helpers.createElement('script', []);
+            Parse5Helpers.appendText(inlineScriptEl, IndexHtmlTransformer.LIVE_RELOAD_SCRIPT);
+            Parse5Helpers.appendChild(body, inlineScriptEl);
+        }
+        if (options.liveReload) {
+            IndexHtmlTransformer.decodeScriptTextNodes(doc);
+        }
+        let result = parse5.serialize(doc);
+        if (options.minify) {
+            result = await minify(result, {
+                collapseWhitespace: true,
+                removeComments: true,
+                removeRedundantAttributes: true,
+                removeEmptyAttributes: true,
+                minifyCSS: true,
+                minifyJS: true
+            });
+        }
+        return result;
     }
-    location.reload();
-});</script>`;
-}
-export async function transformIndexHtml(html, options) {
-    const doc = parse5.parse(html);
-    const jsSrc = options.gzip ? `${options.jsBundle}.gz` : options.jsBundle;
-    const cssSrc = options.cssBundle
-        ? (options.gzip ? `${options.cssBundle}.gz` : options.cssBundle)
-        : null;
-    const head = findElement(doc, 'head');
-    const body = findElement(doc, 'body');
-    if (head && cssSrc) {
-        appendChild(head, createLinkElement(cssSrc));
-    }
-    if (body) {
-        appendChild(body, createScriptElement(jsSrc));
-    }
-    let result = parse5.serialize(doc);
-    if (options.liveReload) {
-        result = result.replace('</body>', getLiveReloadScript() + '</body>');
-    }
-    if (options.minify) {
-        result = await minify(result, {
-            collapseWhitespace: true,
-            removeComments: true,
-            removeRedundantAttributes: true,
-            removeEmptyAttributes: true,
-            minifyCSS: true,
-            minifyJS: true
+    static decodeScriptTextNodes(node) {
+        Parse5Helpers.walkNodes(node, (n) => {
+            if (Typeguards.isElement(n) && n.tagName === 'script') {
+                for (const child of n.childNodes) {
+                    if ('value' in child && typeof child.value === 'string') {
+                        child.value = he.decode(child.value);
+                    }
+                }
+            }
+            return undefined;
         });
     }
-    return result;
 }

package/Parse5Helpers.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type { Parse5ChildNode, Parse5Document, Parse5DocumentFragment, Parse5Element, Parse5Node, Parse5ParentNode } from './Typeguards.js';
+export type Parse5NodeVisitor = (node: Parse5Node) => boolean | undefined;
+export declare class Parse5Helpers {
+    static createElement(tagName: string, attrs: {
+        name: string;
+        value: string;
+    }[]): Parse5Element;
+    static appendChild(parent: Parse5ParentNode, child: Parse5ChildNode): void;
+    static appendText(parent: Parse5ParentNode, value: string): void;
+    static appendComment(parent: Parse5ParentNode, data: string): void;
+    static getTemplateContent(tpl: Parse5Element): Parse5DocumentFragment;
+    static createDocument(): Parse5Document;
+    static walkNodes(node: Parse5Node, visitor: Parse5NodeVisitor): void;
+    static findElement(node: Parse5Node, tagName: string): Parse5Element | null;
+    static removeNonMarkerComments(node: Parse5Node): void;
+}
+//# sourceMappingURL=Parse5Helpers.d.ts.map

package/Parse5Helpers.js ADDED Viewed

@@ -0,0 +1,95 @@
+import { html as parse5Html } from 'parse5';
+import { Typeguards } from './Typeguards.js';
+export class Parse5Helpers {
+    static createElement(tagName, attrs) {
+        const el = {
+            nodeName: tagName,
+            tagName,
+            attrs,
+            childNodes: [],
+            namespaceURI: parse5Html.NS.HTML,
+            parentNode: null
+        };
+        if (tagName === 'template') {
+            const content = {
+                nodeName: '#document-fragment',
+                childNodes: []
+            };
+            Reflect.set(el, 'content', content);
+        }
+        return el;
+    }
+    static appendChild(parent, child) {
+        child.parentNode = parent;
+        parent.childNodes.push(child);
+    }
+    static appendText(parent, value) {
+        if (value.length === 0)
+            return;
+        const textNode = {
+            nodeName: '#text',
+            value,
+            parentNode: parent
+        };
+        parent.childNodes.push(textNode);
+    }
+    static appendComment(parent, data) {
+        const commentNode = {
+            nodeName: '#comment',
+            data,
+            parentNode: parent
+        };
+        parent.childNodes.push(commentNode);
+    }
+    static getTemplateContent(tpl) {
+        const content = Reflect.get(tpl, 'content');
+        if (!Typeguards.isDocumentFragmentLike(content)) {
+            throw new Error('Template element missing content property');
+        }
+        return content;
+    }
+    static createDocument() {
+        return {
+            nodeName: '#document',
+            mode: parse5Html.DOCUMENT_MODE.NO_QUIRKS,
+            childNodes: []
+        };
+    }
+    static walkNodes(node, visitor) {
+        const shouldStop = visitor(node);
+        if (shouldStop === true)
+            return;
+        if ('childNodes' in node) {
+            for (const child of node.childNodes) {
+                Parse5Helpers.walkNodes(child, visitor);
+            }
+        }
+    }
+    static findElement(node, tagName) {
+        if (Typeguards.isElement(node) && node.tagName === tagName) {
+            return node;
+        }
+        if ('childNodes' in node) {
+            for (const child of node.childNodes) {
+                const found = Parse5Helpers.findElement(child, tagName);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    static removeNonMarkerComments(node) {
+        if (!('childNodes' in node))
+            return;
+        const markerPattern = /^\/?(fluff:(if|for|switch|text|break):\d+)$/;
+        node.childNodes = node.childNodes.filter(child => {
+            if (Typeguards.isCommentNode(child)) {
+                return markerPattern.test(child.data);
+            }
+            return true;
+        });
+        for (const child of node.childNodes) {
+            Parse5Helpers.removeNonMarkerComments(child);
+        }
+    }
+}