@fluffjs/cli 0.1.0 → 0.1.2

package/Cli.d.ts

@@ -3,6 +3,8 @@ export declare class Cli {
     private readonly cwd;
     private readonly nxPackage;
     private readonly noGzip;
+    private readonly noMinify;
+    private readonly gzScriptTag;
     constructor(options?: CliOptions);
     run(args: string[]): Promise<void>;
     private showHelp;

package/Cli.js

@@ -15,10 +15,14 @@ export class Cli {
     cwd;
     nxPackage;
     noGzip;
+    noMinify;
+    gzScriptTag;
     constructor(options = {}) {
         this.cwd = options.cwd ?? process.env.INIT_CWD ?? process.cwd();
         this.nxPackage = options.nxPackage;
         this.noGzip = options.noGzip ?? false;
+        this.noMinify = options.noMinify ?? false;
+        this.gzScriptTag = options.gzScriptTag ?? false;
     }
     async run(args) {
         const [command, ...commandArgs] = args;
@@ -282,7 +286,7 @@ Examples:
     async buildTarget(target, projectRoot, workspaceRoot, projectRelativePath) {
         console.log(`🔨 Building target '${target.name}'...`);
         const srcDir = path.resolve(projectRoot, target.srcDir);
-        const appDir = path.join(srcDir, 'app');
+        const appDir = path.join(srcDir, target.componentsDir ?? 'app');
         const outDir = (workspaceRoot && projectRelativePath)
             ? path.join(workspaceRoot, 'dist', projectRelativePath)
             : path.resolve(projectRoot, target.outDir);
@@ -296,6 +300,9 @@ Examples:
         if (this.noGzip) {
             bundleOptions.gzip = false;
         }
+        if (this.noMinify) {
+            bundleOptions.minify = false;
+        }
         const entryPoint = target.entryPoint
             ? path.join(srcDir, target.entryPoint)
             : this.generateEntryPoint(srcDir, target.components);
@@ -385,6 +392,7 @@ Examples:
                     cssBundle: cssBundle ? path.basename(cssBundle) : undefined,
                     inlineStyles: inlineStyles || undefined,
                     gzip: bundleOptions.gzip,
+                    gzScriptTag: bundleOptions.gzScriptTag ?? this.gzScriptTag,
                     minify: bundleOptions.minify
                 });
                 fs.writeFileSync(path.join(outDir, 'index.html'), transformed);
@@ -469,7 +477,7 @@ Examples:
     }
     async serveTarget(target, projectRoot, workspaceRoot, projectRelativePath) {
         const srcDir = path.resolve(projectRoot, target.srcDir);
-        const appDir = path.join(srcDir, 'app');
+        const appDir = path.join(srcDir, target.componentsDir ?? 'app');
         const fluffDir = path.join(this.cwd, '.fluff');
         const serveId = randomUUID();
         const outDir = path.join(fluffDir, serveId);
@@ -648,6 +656,14 @@ Examples:
                 options.noGzip = true;
                 i++;
             }
+            else if (arg === '--no-minify') {
+                options.noMinify = true;
+                i++;
+            }
+            else if (arg === '--gz-script-tag') {
+                options.gzScriptTag = true;
+                i++;
+            }
             else if (arg?.startsWith('--')) {
                 console.error(`Unknown option: ${arg}`);
                 process.exit(1);

package/ComponentCompiler.js

@@ -3,6 +3,7 @@ import { parse } from '@babel/parser';
 import * as t from '@babel/types';
 import * as esbuild from 'esbuild';
 import * as fs from 'fs';
+import * as parse5 from 'parse5';
 import { minify as minifyHtml } from 'html-minifier-terser';
 import * as path from 'path';
 import { SourceMapConsumer, SourceMapGenerator } from 'source-map';
@@ -14,6 +15,7 @@ import { generate } from './BabelHelpers.js';
 import { CodeGenerator } from './CodeGenerator.js';
 import { ErrorHelpers } from './ErrorHelpers.js';
 import { GetterDependencyExtractor } from './GetterDependencyExtractor.js';
+import { Parse5Helpers } from './Parse5Helpers.js';
 import { TemplateParser } from './TemplateParser.js';
 export class ComponentCompiler {
     componentSelectors = new Set();
@@ -121,9 +123,12 @@ export class ComponentCompiler {
         const gen = new CodeGenerator(this.componentSelectors, selector);
         let generatedHtml = gen.generateHtml(parsed);
         if (minify) {
+            const fragment = parse5.parseFragment(generatedHtml);
+            Parse5Helpers.removeNonMarkerComments(fragment);
+            generatedHtml = parse5.serialize(fragment);
             generatedHtml = await minifyHtml(generatedHtml, {
                 collapseWhitespace: true,
-                removeComments: true,
+                removeComments: false,
                 removeRedundantAttributes: true,
                 removeEmptyAttributes: true
             });

package/Generator.js

@@ -127,6 +127,7 @@ export class Generator {
                     name,
                     srcDir: 'src',
                     outDir: 'dist',
+                    componentsDir: 'app',
                     entryPoint: 'main.ts',
                     indexHtml: 'index.html',
                     components: ['**/*.component.ts'],

package/IndexHtmlTransformer.js

@@ -30,9 +30,9 @@ export class IndexHtmlTransformer {
 })();`;
     static async transform(html, options) {
         const doc = parse5.parse(html);
-        const jsSrc = options.gzip ? `${options.jsBundle}.gz` : options.jsBundle;
+        const jsSrc = options.gzScriptTag ? `${options.jsBundle}.gz` : options.jsBundle;
         const cssSrc = options.cssBundle
-            ? (options.gzip ? `${options.cssBundle}.gz` : options.cssBundle)
+            ? (options.gzScriptTag ? `${options.cssBundle}.gz` : options.cssBundle)
             : null;
         const head = Parse5Helpers.findElement(doc, 'head');
         const body = Parse5Helpers.findElement(doc, 'body');

package/Parse5Helpers.d.ts

@@ -12,5 +12,6 @@ export declare class Parse5Helpers {
     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

@@ -78,4 +78,18 @@ export class Parse5Helpers {
         }
         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);
+        }
+    }
 }

package/interfaces/BundleOptions.d.ts

@@ -3,6 +3,7 @@ export interface BundleOptions {
     splitting?: boolean;
     target?: string;
     gzip?: boolean;
+    gzScriptTag?: boolean;
     external?: string[];
 }
 //# sourceMappingURL=BundleOptions.d.ts.map

package/interfaces/CliOptions.d.ts

@@ -2,5 +2,7 @@ export interface CliOptions {
     cwd?: string;
     nxPackage?: string;
     noGzip?: boolean;
+    noMinify?: boolean;
+    gzScriptTag?: boolean;
 }
 //# sourceMappingURL=CliOptions.d.ts.map

package/interfaces/FluffTarget.d.ts

@@ -4,6 +4,7 @@ export interface FluffTarget {
     name: string;
     srcDir: string;
     outDir: string;
+    componentsDir?: string;
     entryPoint?: string;
     indexHtml?: string;
     components: string[];

package/interfaces/HtmlTransformOptions.d.ts

@@ -3,6 +3,7 @@ export interface HtmlTransformOptions {
     cssBundle?: string;
     inlineStyles?: string;
     gzip?: boolean;
+    gzScriptTag?: boolean;
     minify?: boolean;
     liveReload?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/types/FluffConfig.js

@@ -5,6 +5,7 @@ export const DEFAULT_CONFIG = {
             name: 'app',
             srcDir: 'src',
             outDir: 'dist',
+            componentsDir: 'app',
             entryPoint: 'main.ts',
             indexHtml: 'index.html',
             components: ['**/*.component.ts'],