@fluffjs/cli 0.0.7 → 0.1.0

package/ComponentCompiler.d.ts

@@ -1,28 +1,26 @@
 import type { ClassTransformOptions } from './babel-plugin-class-transform.js';
 import type { ComponentMetadata } from './babel-plugin-component.js';
-export interface CompileResult {
-    code: string;
-    map?: string;
-    watchFiles?: string[];
-}
+import type { CompileResult } from './interfaces/CompileResult.js';
+import { TemplateParser } from './TemplateParser.js';
+export type { CompileResult } from './interfaces/CompileResult.js';
 export declare class ComponentCompiler {
     private readonly componentSelectors;
-    private readonly parser;
-    private readonly generator;
-    constructor();
-    registerComponent(selector: string): void;
-    discoverComponents(demoDir: string): Promise<void>;
-    compileComponent(filePath: string): Promise<string>;
-    compileComponentForBundle(filePath: string, minify?: boolean, sourcemap?: boolean): Promise<CompileResult>;
+    private getReactivePropsForFile;
+    protected createTemplateParser(_filePath: string): TemplateParser;
+    private runBabelTransform;
+    discoverComponents(dir: string): Promise<void>;
+    compileComponentForBundle(filePath: string, minify?: boolean, sourcemap?: boolean, skipDefine?: boolean, production?: boolean): Promise<CompileResult>;
     stripTypeScriptWithSourceMap(code: string, filePath: string, sourcemap?: boolean): Promise<CompileResult>;
-    private createComponentSourceMap;
     transformImportsForBundle(code: string, filePath: string): Promise<string>;
-    transformReactiveProperties(code: string, filePath?: string): Promise<string>;
+    transformReactiveProperties(code: string, filePath?: string, production?: boolean): Promise<string>;
     stripTypeScript(code: string, filePath?: string): Promise<string>;
     extractComponentMetadata(code: string, filePath: string): Promise<ComponentMetadata | null>;
-    transformImportsAndDecorators(code: string, filePath: string): Promise<string>;
     transformClass(code: string, filePath: string, options: ClassTransformOptions): Promise<string>;
     transformLibraryImports(code: string, filePath: string): Promise<string>;
-    copyLighterLib(srcDir: string, distDir: string): Promise<void>;
+    private createComponentSourceMap;
+    private addFluffImport;
+    private appendCode;
+    private addBindingsMap;
+    private addCustomElementsDefine;
 }
 //# sourceMappingURL=ComponentCompiler.d.ts.map

package/ComponentCompiler.js

@@ -1,139 +1,163 @@
 import * as babel from '@babel/core';
+import { parse } from '@babel/parser';
+import * as t from '@babel/types';
 import * as esbuild from 'esbuild';
 import * as fs from 'fs';
 import { minify as minifyHtml } from 'html-minifier-terser';
 import * as path from 'path';
 import { SourceMapConsumer, SourceMapGenerator } from 'source-map';
-import classTransformPlugin, { injectMethodBodies } from './babel-plugin-class-transform.js';
+import classTransformPlugin from './babel-plugin-class-transform.js';
 import componentPlugin, { componentMetadataMap } from './babel-plugin-component.js';
 import importsPlugin from './babel-plugin-imports.js';
 import reactivePlugin, { reactivePropertiesMap } from './babel-plugin-reactive.js';
+import { generate } from './BabelHelpers.js';
 import { CodeGenerator } from './CodeGenerator.js';
+import { ErrorHelpers } from './ErrorHelpers.js';
+import { GetterDependencyExtractor } from './GetterDependencyExtractor.js';
 import { TemplateParser } from './TemplateParser.js';
 export class ComponentCompiler {
     componentSelectors = new Set();
-    parser;
-    generator;
-    constructor() {
-        this.parser = new TemplateParser();
-        this.generator = new CodeGenerator();
+    getReactivePropsForFile(filePath) {
+        const direct = reactivePropertiesMap.get(filePath);
+        if (direct) {
+            return direct;
+        }
+        for (const [key, value] of reactivePropertiesMap.entries()) {
+            if (key === filePath || key.endsWith(filePath) || filePath.endsWith(key)) {
+                return value;
+            }
+        }
+        return new Set();
     }
-    registerComponent(selector) {
-        this.componentSelectors.add(selector);
+    createTemplateParser(_filePath) {
+        return new TemplateParser();
+    }
+    async runBabelTransform(code, filePath, options) {
+        try {
+            const presets = options.useTypeScriptPreset
+                ? [['@babel/preset-typescript', { isTSX: false, allExtensions: true }]]
+                : [];
+            const plugins = options.useDecoratorSyntax
+                ? [['@babel/plugin-syntax-decorators', { version: '2023-11' }], ...options.plugins]
+                : options.plugins;
+            const parserOpts = options.useDecoratorSyntax
+                ? { plugins: ['typescript', 'decorators'] }
+                : options.useTypeScriptPreset
+                    ? { plugins: ['typescript'] }
+                    : undefined;
+            const result = await babel.transformAsync(code, {
+                filename: filePath,
+                presets,
+                plugins,
+                parserOpts
+            });
+            return result?.code ?? code;
+        }
+        catch (e) {
+            console.error(`${options.errorContext} in ${filePath}:`, ErrorHelpers.getErrorMessage(e));
+            return code;
+        }
     }
-    async discoverComponents(demoDir) {
-        const files = fs.readdirSync(demoDir)
-            .filter(f => f.endsWith('.component.ts'));
-        for (const file of files) {
-            const filePath = path.join(demoDir, file);
-            const content = fs.readFileSync(filePath, 'utf-8');
-            const metadata = await this.extractComponentMetadata(content, filePath);
-            if (metadata?.selector) {
-                this.componentSelectors.add(metadata.selector);
+    async discoverComponents(dir) {
+        const entries = fs.readdirSync(dir, { withFileTypes: true });
+        for (const entry of entries) {
+            const fullPath = path.join(dir, entry.name);
+            if (entry.isDirectory()) {
+                await this.discoverComponents(fullPath);
+            }
+            else if (entry.name.endsWith('.component.ts')) {
+                const content = fs.readFileSync(fullPath, 'utf-8');
+                const metadata = await this.extractComponentMetadata(content, fullPath);
+                if (metadata?.selector) {
+                    this.componentSelectors.add(metadata.selector);
+                }
             }
         }
     }
-    async compileComponent(filePath) {
+    async compileComponentForBundle(filePath, minify, sourcemap, skipDefine, production) {
         let source = fs.readFileSync(filePath, 'utf-8');
         const componentDir = path.dirname(filePath);
+        const parser = this.createTemplateParser(filePath);
+        reactivePropertiesMap.delete(filePath);
         if (source.includes('@Reactive') || source.includes('@Input')) {
-            source = await this.transformReactiveProperties(source, filePath);
-            const reactiveProps = reactivePropertiesMap.get(filePath);
-            if (reactiveProps) {
-                this.generator.setReactiveProperties(reactiveProps);
-            }
-        }
-        else {
-            this.generator.setReactiveProperties(new Set());
+            source = await this.transformReactiveProperties(source, filePath, production);
         }
         const metadata = await this.extractComponentMetadata(source, filePath);
         if (!metadata) {
-            return source;
+            return { code: source };
         }
-        const { selector, templateUrl, styleUrl, className } = metadata;
-        const templatePath = path.resolve(componentDir, templateUrl);
-        const templateHtml = fs.readFileSync(templatePath, 'utf-8');
-        let styles = '';
-        if (styleUrl) {
-            const stylePath = path.resolve(componentDir, styleUrl);
-            if (fs.existsSync(stylePath)) {
-                styles = fs.readFileSync(stylePath, 'utf-8');
-            }
+        const { selector, templateUrl, template, styleUrl, styles: inlineStyles, className } = metadata;
+        let templateHtml = '';
+        let templatePath = null;
+        if (templateUrl) {
+            templatePath = path.resolve(componentDir, templateUrl);
+            templateHtml = fs.readFileSync(templatePath, 'utf-8');
         }
-        const { html, bindings, controlFlows, templateRefs } = this.parser.parse(templateHtml);
-        this.generator.setTemplateRefs(templateRefs);
-        const renderMethod = this.generator.generateRenderMethod(html, styles);
-        const bindingsSetup = this.generator.generateBindingsSetup(bindings, controlFlows);
-        let result = await this.transformImportsAndDecorators(source, filePath);
-        result = await this.transformClass(result, filePath, {
-            className, originalSuperClass: 'HTMLElement', newSuperClass: 'FluffElement', injectMethods: [
-                { name: '__render', body: renderMethod }, { name: '__setupBindings', body: bindingsSetup }
-            ]
-        });
-        result = 'import { FluffElement } from \'./fluff-lib/runtime/FluffElement.js\';\n' + result;
-        result += `\ncustomElements.define('${selector}', ${className});\n`;
-        result = await this.stripTypeScript(result, filePath);
-        return result;
-    }
-    async compileComponentForBundle(filePath, minify, sourcemap) {
-        let source = fs.readFileSync(filePath, 'utf-8');
-        const componentDir = path.dirname(filePath);
-        const generator = new CodeGenerator();
-        if (source.includes('@Reactive') || source.includes('@Input')) {
-            source = await this.transformReactiveProperties(source, filePath);
-            const reactiveProps = reactivePropertiesMap.get(filePath);
-            if (reactiveProps) {
-                generator.setReactiveProperties(reactiveProps);
-            }
+        else if (template) {
+            templateHtml = template;
         }
         else {
-            generator.setReactiveProperties(new Set());
-        }
-        const metadata = await this.extractComponentMetadata(source, filePath);
-        if (!metadata) {
             return { code: source };
         }
-        const { selector, templateUrl, styleUrl, className } = metadata;
-        const templatePath = path.resolve(componentDir, templateUrl);
-        let templateHtml = fs.readFileSync(templatePath, 'utf-8');
         const stylePath = styleUrl ? path.resolve(componentDir, styleUrl) : null;
         let styles = '';
         if (stylePath && fs.existsSync(stylePath)) {
             styles = fs.readFileSync(stylePath, 'utf-8');
         }
+        else if (inlineStyles) {
+            styles = inlineStyles;
+        }
+        if (minify && styles) {
+            const cssResult = await esbuild.transform(styles, {
+                loader: 'css', minify: true
+            });
+            styles = cssResult.code;
+        }
+        const reactiveProps = this.getReactivePropsForFile(filePath);
+        const getterDepMap = GetterDependencyExtractor.extractGetterDependencyMap(source, reactiveProps);
+        parser.setGetterDependencyMap(getterDepMap);
+        const parsed = await parser.parse(templateHtml);
+        parser.setGetterDependencyMap(new Map());
+        const gen = new CodeGenerator(this.componentSelectors, selector);
+        let generatedHtml = gen.generateHtml(parsed);
         if (minify) {
-            templateHtml = await minifyHtml(templateHtml, {
+            generatedHtml = await minifyHtml(generatedHtml, {
                 collapseWhitespace: true,
                 removeComments: true,
                 removeRedundantAttributes: true,
                 removeEmptyAttributes: true
             });
-            if (styles) {
-                const cssResult = await esbuild.transform(styles, {
-                    loader: 'css',
-                    minify: true
-                });
-                styles = cssResult.code;
-            }
         }
-        const { html, bindings, controlFlows, templateRefs } = this.parser.parse(templateHtml);
-        generator.setTemplateRefs(templateRefs);
-        const renderMethod = generator.generateRenderMethod(html, styles);
-        const bindingsSetup = generator.generateBindingsSetup(bindings, controlFlows);
+        const markerConfigJson = gen.getMarkerConfigJson();
+        const renderMethod = gen.generateRenderMethodFromHtml(generatedHtml, styles, markerConfigJson);
+        const bindingsSetup = gen.generateBindingsSetup();
         let result = await this.transformImportsForBundle(source, filePath);
         result = await this.transformClass(result, filePath, {
             className, originalSuperClass: 'HTMLElement', newSuperClass: 'FluffElement', injectMethods: [
                 { name: '__render', body: renderMethod }, { name: '__setupBindings', body: bindingsSetup }
             ]
         });
-        result = 'import { FluffElement } from \'@fluffjs/fluff\';\n' + result;
-        result += `\ncustomElements.define('${selector}', ${className});\n`;
+        result = this.addFluffImport(result);
+        const exprAssignments = gen.generateExpressionAssignments();
+        if (exprAssignments) {
+            result = this.appendCode(result, exprAssignments);
+        }
+        const bindingsMap = gen.getBindingsMap();
+        if (Object.keys(bindingsMap).length > 0) {
+            result = this.addBindingsMap(result, className, bindingsMap);
+        }
+        if (!skipDefine) {
+            result = this.addCustomElementsDefine(result, selector, className);
+        }
         const tsResult = await this.stripTypeScriptWithSourceMap(result, filePath, sourcemap);
-        const watchFiles = [templatePath];
+        const watchFiles = [];
+        if (templatePath) {
+            watchFiles.push(templatePath);
+        }
         if (stylePath && fs.existsSync(stylePath)) {
             watchFiles.push(stylePath);
         }
-        if (sourcemap && tsResult.map) {
+        if (sourcemap && tsResult.map && templatePath) {
             const finalMap = await this.createComponentSourceMap(tsResult.code, tsResult.map, filePath, templatePath, stylePath);
             return { code: tsResult.code, map: finalMap, watchFiles };
         }
@@ -151,78 +175,31 @@ export class ComponentCompiler {
             return { code: result.code, map: result.map };
         }
         catch (e) {
-            const message = e instanceof Error ? e.message : String(e);
-            console.error(`Error transforming ${filePath}:`, message);
+            console.error(`Error transforming ${filePath}:`, ErrorHelpers.getErrorMessage(e));
             return { code };
         }
     }
-    async createComponentSourceMap(code, esbuildMap, componentPath, templatePath, stylePath) {
-        const consumer = await new SourceMapConsumer(JSON.parse(esbuildMap));
-        const generator = new SourceMapGenerator({
-            file: path.basename(componentPath)
-                .replace('.ts', '.js')
-        });
-        generator.setSourceContent(componentPath, fs.readFileSync(componentPath, 'utf-8'));
-        generator.setSourceContent(templatePath, fs.readFileSync(templatePath, 'utf-8'));
-        if (stylePath && fs.existsSync(stylePath)) {
-            generator.setSourceContent(stylePath, fs.readFileSync(stylePath, 'utf-8'));
-        }
-        consumer.eachMapping(mapping => {
-            if (mapping.source) {
-                generator.addMapping({
-                    generated: { line: mapping.generatedLine, column: mapping.generatedColumn },
-                    original: { line: mapping.originalLine, column: mapping.originalColumn },
-                    source: mapping.source,
-                    name: mapping.name ?? undefined
-                });
-            }
-        });
-        consumer.destroy();
-        return generator.toString();
-    }
     async transformImportsForBundle(code, filePath) {
-        try {
-            const importOptions = {
-                removeImportsFrom: ['lighter'],
-                removeDecorators: ['Component', 'Input', 'Output'],
-                pathReplacements: {},
-                addJsExtension: false
-            };
-            const result = await babel.transformAsync(code, {
-                filename: filePath, presets: [
-                    ['@babel/preset-typescript', { isTSX: false, allExtensions: true }]
-                ], plugins: [
-                    ['@babel/plugin-syntax-decorators', { version: '2023-11' }], [importsPlugin, importOptions]
-                ], parserOpts: {
-                    plugins: ['typescript', 'decorators']
-                }
-            });
-            return result?.code ?? code;
-        }
-        catch (e) {
-            const message = e instanceof Error ? e.message : String(e);
-            console.error(`Failed to transform imports in ${filePath}:`, message);
-            return code;
-        }
+        const importOptions = {
+            removeImportsFrom: ['lighter'],
+            removeDecorators: ['Component', 'Input', 'Output'],
+            pathReplacements: {},
+            addJsExtension: false
+        };
+        return this.runBabelTransform(code, filePath, {
+            useTypeScriptPreset: true,
+            useDecoratorSyntax: true,
+            plugins: [[importsPlugin, importOptions]],
+            errorContext: 'Failed to transform imports'
+        });
     }
-    async transformReactiveProperties(code, filePath = 'file.ts') {
-        try {
-            const result = await babel.transformAsync(code, {
-                filename: filePath, presets: [
-                    ['@babel/preset-typescript', { isTSX: false, allExtensions: true }]
-                ], plugins: [
-                    ['@babel/plugin-syntax-decorators', { version: '2023-11' }], reactivePlugin
-                ], parserOpts: {
-                    plugins: ['typescript', 'decorators']
-                }
-            });
-            return result?.code ?? code;
-        }
-        catch (e) {
-            const message = e instanceof Error ? e.message : String(e);
-            console.error(`Babel transform error in ${filePath}:`, message);
-            return code;
-        }
+    async transformReactiveProperties(code, filePath = 'file.ts', production) {
+        return this.runBabelTransform(code, filePath, {
+            useTypeScriptPreset: true,
+            useDecoratorSyntax: true,
+            plugins: [[reactivePlugin, { production: production ?? false }]],
+            errorContext: 'Babel transform error'
+        });
     }
     async stripTypeScript(code, filePath = 'file.ts') {
         try {
@@ -232,123 +209,104 @@ export class ComponentCompiler {
             return result.code;
         }
         catch (e) {
-            const message = e instanceof Error ? e.message : String(e);
-            console.error(`Error transforming ${filePath}:`, message);
+            console.error(`Error transforming ${filePath}:`, ErrorHelpers.getErrorMessage(e));
             return code;
         }
     }
     async extractComponentMetadata(code, filePath) {
         try {
             componentMetadataMap.delete(filePath);
-            await babel.transformAsync(code, {
-                filename: filePath, presets: [
-                    ['@babel/preset-typescript', { isTSX: false, allExtensions: true }]
-                ], plugins: [
-                    ['@babel/plugin-syntax-decorators', { version: '2023-11' }], componentPlugin
-                ], parserOpts: {
-                    plugins: ['typescript', 'decorators']
-                }
+            await this.runBabelTransform(code, filePath, {
+                useTypeScriptPreset: true,
+                useDecoratorSyntax: true,
+                plugins: [componentPlugin],
+                errorContext: 'Failed to extract component metadata'
             });
             return componentMetadataMap.get(filePath) ?? null;
         }
         catch (e) {
-            const message = e instanceof Error ? e.message : String(e);
-            console.error(`Failed to extract component metadata from ${filePath}:`, message);
+            console.error(`Failed to extract component metadata from ${filePath}:`, ErrorHelpers.getErrorMessage(e));
             return null;
         }
     }
-    async transformImportsAndDecorators(code, filePath) {
-        try {
-            const importOptions = {
-                removeImportsFrom: ['lighter'], removeDecorators: ['Component', 'Input', 'Output'], pathReplacements: {
-                    '@/fluff-lib/': './fluff-lib/'
-                }, addJsExtension: true
-            };
-            const result = await babel.transformAsync(code, {
-                filename: filePath, presets: [
-                    ['@babel/preset-typescript', { isTSX: false, allExtensions: true }]
-                ], plugins: [
-                    ['@babel/plugin-syntax-decorators', { version: '2023-11' }], [importsPlugin, importOptions]
-                ], parserOpts: {
-                    plugins: ['typescript', 'decorators']
-                }
-            });
-            return result?.code ?? code;
-        }
-        catch (e) {
-            const message = e instanceof Error ? e.message : String(e);
-            console.error(`Failed to transform imports in ${filePath}:`, message);
-            return code;
-        }
-    }
     async transformClass(code, filePath, options) {
-        try {
-            const result = await babel.transformAsync(code, {
-                filename: filePath, plugins: [
-                    [classTransformPlugin, options]
-                ]
-            });
-            let transformed = result?.code ?? code;
-            if (options.injectMethods) {
-                transformed = injectMethodBodies(transformed, options.injectMethods);
-            }
-            return transformed;
-        }
-        catch (e) {
-            const message = e instanceof Error ? e.message : String(e);
-            console.error(`Failed to transform class in ${filePath}:`, message);
-            return code;
-        }
+        return this.runBabelTransform(code, filePath, {
+            useTypeScriptPreset: false,
+            useDecoratorSyntax: false,
+            plugins: [[classTransformPlugin, options]],
+            errorContext: 'Failed to transform class'
+        });
     }
     async transformLibraryImports(code, filePath) {
-        try {
-            const importOptions = {
-                pathReplacements: {
-                    '@/fluff-lib/': '../'
-                }, addJsExtension: true
-            };
-            const result = await babel.transformAsync(code, {
-                filename: filePath, presets: [
-                    ['@babel/preset-typescript', { isTSX: false, allExtensions: true }]
-                ], plugins: [
-                    [importsPlugin, importOptions]
-                ], parserOpts: {
-                    plugins: ['typescript']
-                }
-            });
-            return result?.code ?? code;
-        }
-        catch (e) {
-            const message = e instanceof Error ? e.message : String(e);
-            console.error(`Failed to transform library imports in ${filePath}:`, message);
-            return code;
-        }
+        const importOptions = {
+            pathReplacements: {
+                '@/fluff-lib/': '../'
+            }, addJsExtension: true
+        };
+        return this.runBabelTransform(code, filePath, {
+            useTypeScriptPreset: true,
+            useDecoratorSyntax: false,
+            plugins: [[importsPlugin, importOptions]],
+            errorContext: 'Failed to transform library imports'
+        });
     }
-    async copyLighterLib(srcDir, distDir) {
-        const lighterLibSrc = path.join(srcDir, 'fluff-lib');
-        const lighterLibDist = path.join(distDir, 'fluff-lib');
-        if (!fs.existsSync(lighterLibDist)) {
-            fs.mkdirSync(lighterLibDist, { recursive: true });
+    async createComponentSourceMap(code, esbuildMap, componentPath, templatePath, stylePath) {
+        const consumer = await new SourceMapConsumer(JSON.parse(esbuildMap));
+        const generator = new SourceMapGenerator({
+            file: path.basename(componentPath)
+                .replace('.ts', '.js')
+        });
+        generator.setSourceContent(componentPath, fs.readFileSync(componentPath, 'utf-8'));
+        generator.setSourceContent(templatePath, fs.readFileSync(templatePath, 'utf-8'));
+        if (stylePath && fs.existsSync(stylePath)) {
+            generator.setSourceContent(stylePath, fs.readFileSync(stylePath, 'utf-8'));
         }
-        const dirs = ['utils', 'runtime', 'interfaces', 'enums', 'decorators'];
-        for (const dir of dirs) {
-            const srcPath = path.join(lighterLibSrc, dir);
-            const distPath = path.join(lighterLibDist, dir);
-            if (fs.existsSync(srcPath)) {
-                if (!fs.existsSync(distPath)) {
-                    fs.mkdirSync(distPath, { recursive: true });
-                }
-                const files = fs.readdirSync(srcPath)
-                    .filter(f => f.endsWith('.ts'));
-                for (const file of files) {
-                    const fullPath = path.join(srcPath, file);
-                    let content = fs.readFileSync(fullPath, 'utf-8');
-                    content = await this.transformLibraryImports(content, fullPath);
-                    content = await this.stripTypeScript(content, fullPath);
-                    const outFile = file.replace('.ts', '.js');
-                    fs.writeFileSync(path.join(distPath, outFile), content);
-                }
+        consumer.eachMapping(mapping => {
+            if (mapping.source) {
+                generator.addMapping({
+                    generated: { line: mapping.generatedLine, column: mapping.generatedColumn },
+                    original: { line: mapping.originalLine, column: mapping.originalColumn },
+                    source: mapping.source,
+                    name: mapping.name ?? undefined
+                });
             }
+        });
+        consumer.destroy();
+        return generator.toString();
+    }
+    addFluffImport(code) {
+        const ast = parse(code, { sourceType: 'module' });
+        const importSpecifiers = [
+            t.importSpecifier(t.identifier('FluffBase'), t.identifier('FluffBase')),
+            t.importSpecifier(t.identifier('FluffElement'), t.identifier('FluffElement')),
+            t.importSpecifier(t.identifier('MarkerManager'), t.identifier('MarkerManager'))
+        ];
+        const importDecl = t.importDeclaration(importSpecifiers, t.stringLiteral('@fluffjs/fluff'));
+        ast.program.body.unshift(importDecl);
+        return generate(ast, { compact: false }).code;
+    }
+    appendCode(code, additionalCode) {
+        const ast = parse(code, { sourceType: 'module' });
+        const additionalAst = parse(additionalCode, { sourceType: 'module' });
+        ast.program.body.push(...additionalAst.program.body);
+        return generate(ast, { compact: false }).code;
+    }
+    addBindingsMap(code, className, bindingsMap) {
+        const ast = parse(code, { sourceType: 'module' });
+        const jsonStr = JSON.stringify(bindingsMap);
+        const valueAst = parse(`(${jsonStr})`, { sourceType: 'module' });
+        const [valueStmt] = valueAst.program.body;
+        if (!t.isExpressionStatement(valueStmt)) {
+            return code;
         }
+        const assignment = t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.identifier(className), t.identifier('__bindings')), valueStmt.expression));
+        ast.program.body.push(assignment);
+        return generate(ast, { compact: false }).code;
+    }
+    addCustomElementsDefine(code, selector, className) {
+        const ast = parse(code, { sourceType: 'module' });
+        const defineCall = t.expressionStatement(t.callExpression(t.memberExpression(t.identifier('customElements'), t.identifier('define')), [t.stringLiteral(selector), t.identifier(className)]));
+        ast.program.body.push(defineCall);
+        return generate(ast, { compact: false }).code;
     }
 }

package/DomPreProcessor.d.ts

@@ -0,0 +1,36 @@
+export declare class DomPreProcessor {
+    private readonly stack;
+    private source;
+    private rootFragment;
+    private readonly elementStack;
+    process(html: string): Promise<string>;
+    private handleStartTag;
+    private transformAttribute;
+    private convertInterpolationToExpression;
+    private handleEndTag;
+    private handleText;
+    private appendNode;
+    private appendText;
+    private appendDoctype;
+    private findNextSpecial;
+    private parseInterpolation;
+    private parseControlFlow;
+    private parseExpressionBlockCore;
+    private parseSimpleBlockCore;
+    private parseIfStatement;
+    private parseElseIfStatement;
+    private parseElseStatement;
+    private parseForStatement;
+    private parseSwitchStatement;
+    private parseCaseStatement;
+    private parseDefaultStatement;
+    private parseEmptyStatement;
+    private parseSimpleStatement;
+    private parseFallthroughStatement;
+    private parseBreakStatement;
+    private parseForContent;
+    private skipWhitespace;
+    private handleComment;
+    private getOriginalAttributeName;
+}
+//# sourceMappingURL=DomPreProcessor.d.ts.map