@fluffjs/cli 0.4.4 → 0.5.0

package/ComponentCompiler.js

@@ -5,12 +5,13 @@ import cssnano from 'cssnano';
 import * as esbuild from 'esbuild';
 import * as fs from 'fs';
 import { minify as minifyHtml } from 'html-minifier-terser';
-import postcss from 'postcss';
 import * as parse5 from 'parse5';
 import * as path from 'path';
+import postcss from 'postcss';
 import { SourceMapConsumer, SourceMapGenerator } from 'source-map';
 import classTransformPlugin from './babel-plugin-class-transform.js';
 import componentPlugin, { componentMetadataMap } from './babel-plugin-component.js';
+import directivePlugin, { directiveMetadataMap } from './babel-plugin-directive.js';
 import importsPlugin from './babel-plugin-imports.js';
 import reactivePlugin, { reactivePropertiesMap } from './babel-plugin-reactive.js';
 import { generate } from './BabelHelpers.js';
@@ -22,47 +23,20 @@ import { Parse5Helpers } from './Parse5Helpers.js';
 import { TemplateParser } from './TemplateParser.js';
 export class ComponentCompiler {
     componentSelectors = new Set();
-    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();
+    directiveSelectors = new Set();
+    directivePaths = [];
+    pluginManager = null;
+    setPluginManager(manager) {
+        this.pluginManager = manager;
     }
-    createTemplateParser(_filePath) {
-        return new TemplateParser();
+    getDirectivePaths() {
+        return [...this.directivePaths];
     }
-    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,
-                cwd: path.dirname(new URL(import.meta.url).pathname)
-            });
-            return result?.code ?? code;
-        }
-        catch (e) {
-            console.error(`${options.errorContext} in ${filePath}:`, ErrorHelpers.getErrorMessage(e));
-            return code;
-        }
+    getComponentMetadata(filePath) {
+        return componentMetadataMap.get(filePath) ?? null;
+    }
+    getDirectiveMetadata(filePath) {
+        return directiveMetadataMap.get(filePath) ?? null;
     }
     async discoverComponents(dir) {
         const componentPaths = [];
@@ -75,11 +49,18 @@ export class ComponentCompiler {
             }
             else if (entry.name.endsWith('.ts')) {
                 const content = fs.readFileSync(fullPath, 'utf-8');
-                const metadata = await this.extractComponentMetadata(content, fullPath);
-                if (metadata?.selector) {
-                    this.componentSelectors.add(metadata.selector);
+                const componentMeta = await this.extractComponentMetadata(content, fullPath);
+                if (componentMeta?.selector) {
+                    this.componentSelectors.add(componentMeta.selector);
                     componentPaths.push(fullPath);
                 }
+                else {
+                    const directiveResult = await this.extractDirectiveMetadata(content, fullPath);
+                    if (directiveResult?.metadata.selector) {
+                        this.directiveSelectors.add(directiveResult.metadata.selector);
+                        this.directivePaths.push(fullPath);
+                    }
+                }
             }
         }
         return componentPaths;
@@ -118,7 +99,8 @@ export class ComponentCompiler {
             styles = inlineStyles;
         }
         if (minify && styles) {
-            const nanoResult = await postcss([cssnano({ preset: 'default' })]).process(styles, { from: undefined });
+            const nanoResult = await postcss([cssnano({ preset: 'default' })])
+                .process(styles, { from: undefined });
             styles = nanoResult.css;
             const cssResult = await esbuild.transform(styles, {
                 loader: 'css', minify: true
@@ -128,9 +110,20 @@ export class ComponentCompiler {
         const reactiveProps = this.getReactivePropsForFile(filePath);
         const getterDepMap = GetterDependencyExtractor.extractGetterDependencyMap(source, reactiveProps);
         parser.setGetterDependencyMap(getterDepMap);
+        if (this.pluginManager?.hasHook('registerScopeElements')) {
+            parser.setScopeElements(this.pluginManager.collectScopeElements());
+        }
+        if (this.pluginManager?.hasHook('beforeTemplatePreProcess')) {
+            const preProcessFragment = parse5.parseFragment(templateHtml);
+            await this.pluginManager.runBeforeTemplatePreProcess(preProcessFragment, selector);
+            templateHtml = parse5.serialize(preProcessFragment);
+        }
         const parsed = await parser.parse(templateHtml);
         parser.setGetterDependencyMap(new Map());
-        const gen = new CodeGenerator(this.componentSelectors, selector);
+        if (this.pluginManager?.hasHook('afterTemplateParse')) {
+            await this.pluginManager.runAfterTemplateParse(parsed, selector);
+        }
+        const gen = new CodeGenerator(this.componentSelectors, selector, this.directiveSelectors);
         let generatedHtml = gen.generateHtml(parsed);
         if (minify) {
             const fragment = parse5.parseFragment(generatedHtml);
@@ -143,9 +136,27 @@ export class ComponentCompiler {
                 removeEmptyAttributes: true
             });
         }
+        if (this.pluginManager?.hasHook('afterCodeGeneration')) {
+            const rootFragment = gen.getRootFragment();
+            if (rootFragment) {
+                await this.pluginManager.runAfterCodeGeneration({
+                    componentSelector: selector,
+                    generatedFragment: rootFragment,
+                    markerConfigs: gen.getMarkerConfigsRef(),
+                    bindingsMap: gen.getBindingsMapRef()
+                });
+            }
+        }
         const markerConfigExpr = gen.getMarkerConfigExpression();
         const renderMethod = gen.generateRenderMethodFromHtml(generatedHtml, styles, markerConfigExpr);
         let result = await this.transformImportsForBundle(source, filePath);
+        if (this.pluginManager?.hasHook('beforeClassTransform')) {
+            const classAst = parse(result, { sourceType: 'module', plugins: ['typescript', 'decorators'] });
+            await this.pluginManager.runBeforeClassTransform({
+                ast: classAst, filePath, metadata
+            });
+            result = generate(classAst, { compact: false }).code;
+        }
         result = await this.transformClass(result, filePath, {
             className, originalSuperClass: 'HTMLElement', newSuperClass: 'FluffElement', injectMethods: [
                 { name: '__render', body: renderMethod }
@@ -193,7 +204,7 @@ export class ComponentCompiler {
     async transformImportsForBundle(code, filePath) {
         const importOptions = {
             removeImportsFrom: ['lighter'],
-            removeDecorators: ['Component', 'Input', 'Output'],
+            removeDecorators: ['Component', 'Directive', 'Input', 'Output'],
             pathReplacements: {},
             addJsExtension: false
         };
@@ -248,6 +259,48 @@ export class ComponentCompiler {
             return null;
         }
     }
+    async extractDirectiveMetadata(code, filePath) {
+        try {
+            directiveMetadataMap.delete(filePath);
+            const result = await this.runBabelTransform(code, filePath, {
+                useTypeScriptPreset: true,
+                useDecoratorSyntax: true,
+                plugins: [directivePlugin],
+                errorContext: 'Failed to extract directive metadata'
+            });
+            const metadata = directiveMetadataMap.get(filePath);
+            if (!metadata)
+                return null;
+            return { metadata, transformedCode: result };
+        }
+        catch (e) {
+            console.error(`Failed to extract directive metadata from ${filePath}:`, ErrorHelpers.getErrorMessage(e));
+            return null;
+        }
+    }
+    async compileDirectiveForBundle(filePath, sourcemap, production) {
+        let source = fs.readFileSync(filePath, 'utf-8');
+        reactivePropertiesMap.delete(filePath);
+        if (source.includes('@Reactive') || source.includes('@Input') || source.includes('@HostListener') || source.includes('@HostBinding') || source.includes('@Watch') || source.includes('@LinkedProperty') || source.includes('@HostElement')) {
+            source = await this.transformReactiveProperties(source, filePath, production);
+        }
+        const extractResult = await this.extractDirectiveMetadata(source, filePath);
+        if (!extractResult) {
+            return { code: source };
+        }
+        const { metadata, transformedCode } = extractResult;
+        const { className, selector } = metadata;
+        source = transformedCode;
+        let result = await this.transformImportsForBundle(source, filePath);
+        result = await this.transformClass(result, filePath, {
+            className, originalSuperClass: 'HTMLElement', newSuperClass: 'FluffDirective', injectMethods: []
+        });
+        result = this.addFluffDirectiveImport(result);
+        result = this.addDirectiveRegistration(result, selector, className);
+        DecoratorValidator.validate(result, filePath);
+        const tsResult = await this.stripTypeScriptWithSourceMap(result, filePath, sourcemap);
+        return { code: tsResult.code };
+    }
     async transformClass(code, filePath, options) {
         return this.runBabelTransform(code, filePath, {
             useTypeScriptPreset: false,
@@ -269,6 +322,78 @@ export class ComponentCompiler {
             errorContext: 'Failed to transform library imports'
         });
     }
+    createTemplateParser(_filePath) {
+        return new TemplateParser();
+    }
+    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();
+    }
+    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, cwd: path.dirname(new URL(import.meta.url).pathname)
+            });
+            return result?.code ?? code;
+        }
+        catch (e) {
+            console.error(`${options.errorContext} in ${filePath}:`, ErrorHelpers.getErrorMessage(e));
+            return code;
+        }
+    }
+    addDirectiveRegistration(code, selector, className) {
+        const ast = parse(code, { sourceType: 'module' });
+        const tagName = 'x-fluff-dir-' + className.toLowerCase()
+            .replace(/directive$/, '');
+        const defineCall = t.expressionStatement(t.callExpression(t.memberExpression(t.identifier('customElements'), t.identifier('define')), [
+            t.stringLiteral(tagName),
+            t.identifier(className)
+        ]));
+        ast.program.body.push(defineCall);
+        const registerCall = t.expressionStatement(t.callExpression(t.identifier('__registerDirective'), [
+            t.stringLiteral(selector),
+            t.identifier(className)
+        ]));
+        ast.program.body.push(registerCall);
+        return generate(ast, { compact: false }).code;
+    }
+    addFluffDirectiveImport(code) {
+        const ast = parse(code, { sourceType: 'module', plugins: ['typescript', 'decorators'] });
+        const importSpecifiers = [
+            t.importSpecifier(t.identifier('FluffBase'), t.identifier('FluffBase')),
+            t.importSpecifier(t.identifier('FluffDirective'), t.identifier('FluffDirective')),
+            t.importSpecifier(t.identifier('__registerDirective'), t.identifier('__registerDirective'))
+        ];
+        const importDecl = t.importDeclaration(importSpecifiers, t.stringLiteral('@fluffjs/fluff'));
+        ast.program.body.unshift(importDecl);
+        return generate(ast, { compact: false }).code;
+    }
     async createComponentSourceMap(code, esbuildMap, componentPath, templatePath, stylePath) {
         const consumer = await new SourceMapConsumer(JSON.parse(esbuildMap));
         const generator = new SourceMapGenerator({
@@ -317,7 +442,10 @@ export class ComponentCompiler {
     }
     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)]));
+        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/DevServer.d.ts

@@ -6,22 +6,24 @@ export type ProxyConfig = Record<string, ProxyConfigEntry>;
 export interface DevServerOptions {
     port: number;
     host: string;
-    esbuildPort: number;
-    esbuildHost: string;
+    outDir: string;
     proxyConfig?: ProxyConfig;
 }
 export declare class DevServer {
     private readonly options;
-    private readonly proxy;
+    private proxy;
     private server;
+    private wss;
+    private readonly wsClients;
     constructor(options: DevServerOptions);
     static loadProxyConfig(configPath: string): ProxyConfig | undefined;
     private static isProxyEntry;
     start(): Promise<number>;
+    notifyReload(): void;
     stop(): void;
     private handleRequest;
     private findProxyEntry;
     private proxyRequest;
-    private forwardToEsbuild;
+    private serveStatic;
 }
 //# sourceMappingURL=DevServer.d.ts.map

package/DevServer.js

@@ -1,20 +1,49 @@
 import httpProxy from 'http-proxy';
 import * as fs from 'node:fs';
 import * as http from 'node:http';
+import * as path from 'node:path';
+import { WebSocketServer } from 'ws';
+const MIME_TYPES = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'application/javascript; charset=utf-8',
+    '.mjs': 'application/javascript; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.json': 'application/json; charset=utf-8',
+    '.map': 'application/json; charset=utf-8',
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.ico': 'image/x-icon',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.eot': 'application/vnd.ms-fontobject',
+    '.otf': 'font/otf',
+    '.wasm': 'application/wasm',
+    '.txt': 'text/plain; charset=utf-8',
+    '.xml': 'application/xml; charset=utf-8'
+};
 export class DevServer {
     options;
-    proxy;
+    proxy = null;
     server = null;
+    wss = null;
+    wsClients = new Set();
     constructor(options) {
         this.options = options;
-        this.proxy = httpProxy.createProxyServer({});
-        this.proxy.on('error', (err, req, res) => {
-            console.error('Proxy error:', err.message);
-            if (res instanceof http.ServerResponse && !res.headersSent) {
-                res.writeHead(502, { 'Content-Type': 'text/plain' });
-                res.end('Proxy error: ' + err.message);
-            }
-        });
+        if (options.proxyConfig) {
+            this.proxy = httpProxy.createProxyServer({});
+            this.proxy.on('error', (err, req, res) => {
+                console.error('Proxy error:', err.message);
+                if (res instanceof http.ServerResponse && !res.headersSent) {
+                    res.writeHead(502, { 'Content-Type': 'text/plain' });
+                    res.end('Proxy error: ' + err.message);
+                }
+            });
+        }
     }
     static loadProxyConfig(configPath) {
         if (!fs.existsSync(configPath)) {
@@ -44,32 +73,57 @@ export class DevServer {
         }
     }
     static isProxyEntry(value) {
-        return typeof value === 'object' &&
-            value !== null &&
-            'target' in value &&
-            typeof value.target === 'string';
+        return typeof value === 'object' && value !== null && 'target' in value && typeof value.target === 'string';
     }
     async start() {
         return new Promise((resolve, reject) => {
             this.server = http.createServer((req, res) => {
                 this.handleRequest(req, res);
             });
+            this.wss = new WebSocketServer({ noServer: true });
+            this.server.on('upgrade', (req, socket, head) => {
+                if (req.url === '/_fluff/ws') {
+                    this.wss?.handleUpgrade(req, socket, head, (ws) => {
+                        this.wsClients.add(ws);
+                        ws.on('close', () => {
+                            this.wsClients.delete(ws);
+                        });
+                    });
+                }
+                else {
+                    socket.destroy();
+                }
+            });
             this.server.on('error', (err) => {
                 reject(err);
             });
-            this.server.listen(this.options.port, () => {
+            this.server.listen(this.options.port, this.options.host, () => {
                 const address = this.server?.address();
                 const port = typeof address === 'object' && address ? address.port : this.options.port;
                 resolve(port);
             });
         });
     }
+    notifyReload() {
+        const message = JSON.stringify({ type: 'reload' });
+        for (const client of this.wsClients) {
+            client.send(message);
+        }
+    }
     stop() {
+        if (this.wss) {
+            this.wss.close();
+            this.wss = null;
+        }
+        this.wsClients.clear();
         if (this.server) {
             this.server.close();
             this.server = null;
         }
-        this.proxy.close();
+        if (this.proxy) {
+            this.proxy.close();
+            this.proxy = null;
+        }
     }
     handleRequest(req, res) {
         const url = req.url ?? '/';
@@ -79,7 +133,13 @@ export class DevServer {
             this.proxyRequest(req, res, proxyEntry);
         }
         else {
-            this.forwardToEsbuild(req, res);
+            this.serveStatic(res, pathname).catch((err) => {
+                console.error('Static serve error:', err);
+                if (!res.headersSent) {
+                    res.writeHead(500, { 'Content-Type': 'text/plain' });
+                    res.end('Internal Server Error');
+                }
+            });
         }
     }
     findProxyEntry(pathname) {
@@ -94,16 +154,35 @@ export class DevServer {
         return undefined;
     }
     proxyRequest(req, res, entry) {
+        if (!this.proxy) {
+            res.writeHead(502, { 'Content-Type': 'text/plain' });
+            res.end('Proxy not configured');
+            return;
+        }
         const options = {
-            target: entry.target,
-            changeOrigin: entry.changeOrigin ?? false
+            target: entry.target, changeOrigin: entry.changeOrigin ?? false
         };
         this.proxy.web(req, res, options);
     }
-    forwardToEsbuild(req, res) {
-        const options = {
-            target: `http://${this.options.esbuildHost}:${this.options.esbuildPort}`
-        };
-        this.proxy.web(req, res, options);
+    async serveStatic(res, pathname) {
+        const hasExtension = /\.\w+$/.test(pathname);
+        const resolvedPath = hasExtension ? path.resolve(this.options.outDir, pathname.replace(/^\/+/, '')) : path.resolve(this.options.outDir, 'index.html');
+        const resolvedOutDir = path.resolve(this.options.outDir);
+        if (!resolvedPath.startsWith(resolvedOutDir + path.sep)) {
+            res.writeHead(403, { 'Content-Type': 'text/plain' });
+            res.end('403 - Forbidden');
+            return;
+        }
+        if (!fs.existsSync(resolvedPath)) {
+            res.writeHead(404, { 'Content-Type': 'text/plain' });
+            res.end('404 - Not Found');
+            return;
+        }
+        const ext = path.extname(resolvedPath)
+            .toLowerCase();
+        const contentType = MIME_TYPES[ext] ?? 'application/octet-stream';
+        const content = await fs.promises.readFile(resolvedPath);
+        res.writeHead(200, { 'Content-Type': contentType });
+        res.end(content);
     }
 }

package/DomPreProcessor.js

@@ -9,6 +9,16 @@ import { ExpressionTransformer } from './ExpressionTransformer.js';
 import { Parse5Helpers } from './Parse5Helpers.js';
 import { Typeguards } from './Typeguards.js';
 const RESTRICTED_ELEMENTS = ['select', 'table', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th', 'colgroup'];
+const voidElementCache = new Map();
+function isVoidElement(tagName) {
+    let cached = voidElementCache.get(tagName);
+    if (cached === undefined) {
+        const fragment = parse5.parseFragment(`<${tagName} />`);
+        cached = parse5.serialize(fragment) === `<${tagName}>`;
+        voidElementCache.set(tagName, cached);
+    }
+    return cached;
+}
 export class DomPreProcessor {
     stack = [];
     source = '';
@@ -96,7 +106,7 @@ export class DomPreProcessor {
         }
         const el = Parse5Helpers.createElement(tagName, attrs);
         this.appendNode(el);
-        if (!token.selfClosing) {
+        if (!token.selfClosing && !isVoidElement(tagName)) {
             this.elementStack.push(el);
         }
     }
@@ -161,9 +171,7 @@ export class DomPreProcessor {
     buildBindingObject(name, binding, value, subscribeTo) {
         const parsed = ExpressionTransformer.parsePrimaryExpression(value);
         const bindingObj = {
-            name,
-            binding,
-            expression: parsed.expression
+            name, binding, expression: parsed.expression
         };
         if (parsed.pipes.length > 0) {
             bindingObj.pipes = parsed.pipes;
@@ -313,9 +321,7 @@ export class DomPreProcessor {
         if (!this.rootFragment) {
             throw new Error('Internal error: parse5 root fragment not initialized');
         }
-        const parent = this.elementStack.length > 0
-            ? this.elementStack[this.elementStack.length - 1]
-            : this.rootFragment;
+        const parent = this.elementStack.length > 0 ? this.elementStack[this.elementStack.length - 1] : this.rootFragment;
         node.parentNode = parent;
         parent.childNodes.push(node);
     }
@@ -323,9 +329,7 @@ export class DomPreProcessor {
         if (value.length === 0)
             return;
         const textNode = {
-            nodeName: '#text',
-            value,
-            parentNode: null
+            nodeName: '#text', value, parentNode: null
         };
         this.appendNode(textNode);
     }
@@ -334,11 +338,7 @@ export class DomPreProcessor {
             throw new Error('Internal error: parse5 root fragment not initialized');
         }
         const doctypeNode = {
-            nodeName: '#documentType',
-            name,
-            publicId: '',
-            systemId: '',
-            parentNode: null
+            nodeName: '#documentType', name, publicId: '', systemId: '', parentNode: null
         };
         doctypeNode.parentNode = this.rootFragment;
         this.rootFragment.childNodes.push(doctypeNode);
@@ -464,10 +464,7 @@ export class DomPreProcessor {
             return null;
         this.stack.push({ type: 'else' });
         return {
-            tagName: 'x-fluff-else',
-            attrs: [],
-            endPos: bracePos + 1,
-            opensBlock: true
+            tagName: 'x-fluff-else', attrs: [], endPos: bracePos + 1, opensBlock: true
         };
     }
     parseForStatement(text, startPos) {
@@ -490,17 +487,13 @@ export class DomPreProcessor {
         }
         this.stack.push({ type: 'for', iterator: result.iterator, iterable: result.iterable, trackBy: result.trackBy });
         const attrs = [
-            { name: 'x-fluff-iterator', value: result.iterator },
-            { name: 'x-fluff-iterable', value: result.iterable }
+            { name: 'x-fluff-iterator', value: result.iterator }, { name: 'x-fluff-iterable', value: result.iterable }
         ];
         if (result.trackBy) {
             attrs.push({ name: 'x-fluff-track', value: result.trackBy });
         }
         return {
-            tagName: 'x-fluff-for',
-            attrs,
-            endPos: bracePos + 1,
-            opensBlock: true
+            tagName: 'x-fluff-for', attrs, endPos: bracePos + 1, opensBlock: true
         };
     }
     parseSwitchStatement(text, startPos) {
@@ -533,10 +526,7 @@ export class DomPreProcessor {
             return null;
         this.stack.push({ type: 'default' });
         return {
-            tagName: 'x-fluff-default',
-            attrs: [],
-            endPos: bracePos + 1,
-            opensBlock: true
+            tagName: 'x-fluff-default', attrs: [], endPos: bracePos + 1, opensBlock: true
         };
     }
     parseEmptyStatement(text, startPos) {
@@ -545,18 +535,12 @@ export class DomPreProcessor {
             return null;
         this.stack.push({ type: 'empty' });
         return {
-            tagName: 'x-fluff-empty',
-            attrs: [],
-            endPos: bracePos + 1,
-            opensBlock: true
+            tagName: 'x-fluff-empty', attrs: [], endPos: bracePos + 1, opensBlock: true
         };
     }
     parseSimpleStatement(startPos, keywordLength, tagName) {
         return {
-            tagName,
-            attrs: [],
-            endPos: startPos + 1 + keywordLength,
-            opensBlock: false
+            tagName, attrs: [], endPos: startPos + 1 + keywordLength, opensBlock: false
         };
     }
     parseFallthroughStatement(text, startPos) {
@@ -610,9 +594,7 @@ export class DomPreProcessor {
     }
     handleComment(token) {
         const commentNode = {
-            nodeName: '#comment',
-            data: token.text,
-            parentNode: null
+            nodeName: '#comment', data: token.text, parentNode: null
         };
         this.appendNode(commentNode);
     }