@cmmn/tools 1.1.0 → 1.2.0

package/bin.js

@@ -2,11 +2,12 @@
 
 import {bundle} from "./bundle/bundle.js";
 import {compile} from "./compile/compile.js";
+import {gen} from "./gen/gen.js";
 
 const [action, ...args] = process.argv.slice(2);
 
 const actions = {
-    bundle, compile
+    bundle, compile, gen
 }
 
-actions[action](...args);
+actions[action](...args);

package/bundle/bundle.js

@@ -1,22 +1,33 @@
-import {getConfig} from "./rollup.config.js";
+import {ConfigCreator} from "./rollup.config.js";
 import {rollup, watch} from "rollup";
 import fs from "fs";
 import path from "path";
 import fg from "fast-glob";
 
-function getPackageConfigs(rootDir, options) {
+function getProjectConfig(rootDir, cmmn, options) {
+    const configCreator = new ConfigCreator({
+        ...options,
+        ...cmmn,
+    });
+    configCreator.setRootDir(rootDir);
+    return configCreator.getConfig();
+}
+
+function getPackageConfigs(rootDir, options, name = null) {
     const results = [];
     const pkg = JSON.parse(fs.readFileSync(path.join(rootDir, 'package.json')));
-    for (let name in pkg.cmmn) {
-        results.push(...getConfig({
-            name,
-            outDir: path.join(rootDir, pkg.cmmn[name].output ?? 'dist'),
-            input: path.join(rootDir, pkg.cmmn[name].input ?? 'index.ts'),
-            minify: options.includes('--prod'),
-            devServer: options.includes('--run'),
-            stats: options.includes('--stats'),
-            module: pkg.cmmn[name].module ?? 'es'
-        }))
+    if (name) {
+        results.push(...getProjectConfig(rootDir, pkg.cmmn[name], {
+            ...options,
+            name
+        }));
+    } else {
+        for (let name in pkg.cmmn) {
+            results.push(...getProjectConfig(rootDir, pkg.cmmn[name], {
+                ...options,
+                name
+            }));
+        }
     }
     return results;
 }
@@ -34,25 +45,29 @@ function getLernaSubPackages(lernaFile, options) {
 }
 
 function getConfigs(options) {
-    if (options.includes('-b')) {
+    if (!options.input || options.project) {
         const rootDir = process.cwd();
         const lernaPath = path.join(rootDir, 'lerna.json');
         if (fs.existsSync(lernaPath)) {
             return getLernaSubPackages(lernaPath, options);
         }
+        return getPackageConfigs(process.cwd(), options);
+    }
+    if (options.input && !fs.existsSync(options.input)) {
+        return getPackageConfigs(process.cwd(), options, options.input);
     }
-    const input = options.filter(x => !x.startsWith('-'))[0];
-    return getConfig({
-        input,
+    const creator = new ConfigCreator(options);
+    return creator.getConfig();
+}
+
+export async function bundle(...options) {
+    const configs = getConfigs({
+        input: options.filter(x => !x.startsWith('-'))[0],
+        project: options.includes('-b'),
         minify: options.includes('--prod'),
         devServer: options.includes('--run'),
         stats: options.includes('--stats'),
-        module: 'es'
     });
-}
-
-export async function bundle(...options) {
-    const configs = getConfigs(options);
     if (!options.includes('--watch')) {
         for (let config of configs) {
             console.log(`1. ${config.input} -> ${config.output.file}`);

package/bundle/rollup.config.js

@@ -3,59 +3,181 @@ import nodeResolve from '@rollup/plugin-node-resolve';
 import {terser} from "rollup-plugin-terser"
 import {visualizer} from 'rollup-plugin-visualizer';
 import styles from "rollup-plugin-styles";
+import builtins from "rollup-plugin-node-builtins";
 import {string} from "rollup-plugin-string";
 import serve from 'rollup-plugin-serve'
 import livereload from 'rollup-plugin-livereload'
+import fs from "fs";
+import path from "path";
+import html  from '@open-wc/rollup-plugin-html';
+/**
+ * @typedef {import(rollup).RollupOptions} RollupOptions
+ * @typedef {import(rollup).OutputOptions} OutputOptions
+ */
 
-export const getConfig = ({minify, input, devServer, module, stats, name, outDir}) => {
-    const output = `${outDir ?? 'dist'}/${name ?? 'index'}-${module}${minify ? '.min' : ''}.js`;
-    return [{
-        input,
-        output: {
-            file: output,
-            sourcemap: !minify,
-            format: module,
-            exports: 'auto',
-            name: 'global'
-        },
-        onwarn: function () {
-
-        },
-        // prettier-ignore
-        plugins: [
+export class ConfigCreator {
+
+    /**
+     * @type {{
+     *     minify: boolean,
+     *     input: string,
+     *     devServer: boolean,
+     *     module: string,
+     *     external: string[],
+     *     stats: boolean,
+     *     name: string,
+     *     outDir: string,
+     *     html: string,
+     *     dedupe: string[]
+     * }}
+     */
+    options;
+
+    /**
+     * @type {string}
+     */
+    root = process.cwd();
+
+
+    constructor(options) {
+        this.options = {
+            ...options
+        };
+    }
+
+    setRootDir(rootDir){
+        this.root = rootDir;
+    }
+
+    get outDir(){
+        return path.join(this.root, this.options.outDir);
+    }
+
+    /**
+     *
+     * @returns {OutputOptions}
+     */
+    get output() {
+        // const output = `${this.options.name ?? 'index'}-${this.options.module}${this.options.minify ? '.min' : ''}.js`;
+        return {
+            entryFileNames: `[name]-${this.options.module}${this.options.minify ? '.min' : ''}.js`,
+            // file: output,
+            dir: this.outDir,
+            sourcemap: !this.options.minify,
+            format: this.options.module,
+            name: 'global',
+        };
+    }
+
+    get html(){
+        return html({
+            publicPath: '/',
+            dir: this.outDir,
+            template: () => fs.readFileSync(path.join(this.root, this.options.html), 'utf8')
+        });
+    }
+    get devServer(){
+        return serve({
+            open: false,
+            contentBase: [this.outDir, path.join(this.root, 'assets')],
+            port: 3001,
+            historyApiFallback: true
+        });
+    }
+
+    get livereload(){
+        return livereload({
+            watch: [this.outDir, path.join(this.root, 'assets')],
+            verbose: false, // Disable console output
+            // other livereload options
+            port: 12345,
+            delay: 300,
+        })
+    }
+
+    get visualizer(){
+        return visualizer({
+            open: true,
+            sourcemap: true,
+            template: 'treemap',
+            brotliSize: true,
+            filename: path.join(this.outDir, '/stats.html')
+        })
+    }
+
+    get plugins() {
+        const result = [
+            builtins(),
             nodeResolve({
                 browser: true,
-                dedupe: ['lib0']
+                dedupe: this.options.dedupe || []
+            }),
+            commonjs({
+                 requireReturnsDefault: "namespace",
+            }),
+            styles({
+                mode: "emit",
             }),
-            commonjs({}),
-            styles({mode: "emit"}),
             string({
                 include: /\.(html|svg|less|css)$/,
             }),
-            ...(minify ? [terser({})] : []),
-            ...(devServer ? [
-                serve({
-                    open: false,
-                    contentBase: ['dist', 'assets'],
-                    port: 3001,
-                    historyApiFallback: true
-                }), livereload({
-                    watch: ['dist', 'assets'],
-                    verbose: false, // Disable console output
-
-                    // other livereload options
-                    port: 12345,
-                    delay: 300,
-                })] : []),
-            ...(stats ? [
-                visualizer({
-                    open: true,
-                    sourcemap: true,
-                    template: 'treemap',
-                    brotliSize: true,
-                    filename: 'dist/stats.html'
-                }),
-            ] : [])
-        ]
-    }];
-};
+        ];
+        if (this.options.html || this.options.input.endsWith('.html')){
+            result.push(this.html);
+        }
+        if (this.options.minify) {
+            result.push(terser({
+                module: true,
+                ecma: 2020,
+                compress: true,
+                keep_classnames: false,
+                keep_fnames: false,
+                mangle: true,
+                output: {
+                    comments: false
+                }
+            }));
+        }
+        if (this.options.devServer) {
+            result.push(this.devServer, this.livereload);
+        }
+        if (this.options.stats){
+            result.push(this.visualizer);
+        }
+        return result;
+    }
+
+    /**
+     * @returns {RollupOptions[]}
+     */
+    getConfig() {
+        Object.assign(this.options,{
+            module: this.options.module || 'es',
+            external: this.options.external || [],
+            name: this.options.name || 'index',
+            outDir: this.options.outDir || 'dist'
+        });
+        if (this.options.external && typeof this.options.external === "string")
+            this.options.external = [this.options.external]
+        console.log(this.options);
+        return [{
+            input: {
+                [this.options.name]: path.join(this.root,this.options.input)
+            },
+            output: this.output,
+            external: (this.options.external || []).map(s => new RegExp(s)),
+            onwarn(warning) {
+                // Silence circular dependency warning for moment package
+                if (
+                    warning.code === 'CIRCULAR_DEPENDENCY'
+                ) {
+                    return
+                }
+
+                console.warn(`(!) ${warning.message}`)
+            },
+            plugins: this.plugins,
+            treeshake: this.options.minify ? "smallest" : "recommended"
+        }]
+    }
+}

package/compile/compile.js

@@ -0,0 +1,38 @@
+import ts from "ttypescript";
+import {resolve} from 'path';
+
+const rootDir = process.cwd();
+
+export function compile(...flags) {
+
+    const host = ts.createSolutionBuilderWithWatchHost(ts.sys, createProgram);
+    host.useCaseSensitiveFileNames();
+
+    const builderFactory = flags.includes('--watch') ?
+        ts.createSolutionBuilderWithWatch :
+        ts.createSolutionBuilder;
+
+    const builder = builderFactory(host, [rootDir], {
+        incremental: true,
+        dry: false
+    }, {
+        excludeDirectories: ["node_modules", "dist"]
+    });
+    if (flags.includes('-b')) {
+        builder.cleanReferences(rootDir);
+        builder.buildReferences(rootDir);
+    } else {
+        builder.clean(rootDir);
+        builder.build(rootDir);
+    }
+}
+
+function createProgram(rootNames, options, host, oldProgram, configFileParsingDiagnostics, projectReferences) {
+    options.outDir = resolve(options.configFilePath, '../dist/esm');
+    options.declarationDir = resolve(options.configFilePath, '../dist/typings');
+    options.baseUrl = resolve(options.configFilePath, '../');
+    console.log('build', options.configFilePath);
+    return ts.createEmitAndSemanticDiagnosticsBuilderProgram(
+        rootNames, options, host, oldProgram, configFileParsingDiagnostics, projectReferences
+    )
+}

package/compile/tsconfig.json

@@ -0,0 +1,47 @@
+{
+  "compilerOptions": {
+    "module": "ES6",
+    "moduleResolution": "Node",
+    "target": "ES2019",
+    "composite": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "experimentalDecorators": true,
+    "checkJs": false,
+    "outDir": "./dist/esm",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "emitDecoratorMetadata": true ,
+    "noEmitHelpers": true,
+    "declarationDir": "./dist/typings",
+    "declaration": true,
+    "types": [
+    ],
+    "lib": [
+      "ES2020.BigInt",
+      "ESNext",
+      "DOM"
+    ],
+    "plugins": [
+      {
+        "transform": "@cmmn/tools/plugins/absolute-plugin.cjs",
+        "after": true
+      },
+      //       Transform paths in output .js files
+      {
+        "transform": "typescript-transform-paths"
+      },
+      //       Transform paths in output .d.ts files (Include this line if you output declarations files)
+      {
+        "transform": "typescript-transform-paths",
+        "afterDeclarations": true
+      }
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmmn/tools",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "di, base extensions, useful functions",
   "main": "dist/rollup.config.js",
   "type": "module",
@@ -13,7 +13,9 @@
   },
   "files": [
     "bin.js",
-    "bundle/*"
+    "compile/*",
+    "bundle/*",
+    "plugins/*"
   ],
   "dependencies": {
     "less": "^4",
@@ -22,6 +24,7 @@
     "typescript-transform-paths": "^3.3.1"
   },
   "devDependencies": {
+    "@open-wc/rollup-plugin-html": "^1.2.5",
     "@rollup/plugin-commonjs": "^21",
     "@rollup/plugin-node-resolve": "^13",
     "@rollup/plugin-typescript": "^8",
@@ -29,6 +32,8 @@
     "fast-glob": "^3.2.11",
     "rollup": "^2",
     "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-styles": "^4",

package/plugins/absolute-plugin.cjs

@@ -0,0 +1,50 @@
+const ts = require("typescript");
+const path = require("path");
+
+function visitImportNode(importNode, sourceFile) {
+    const file  = importNode.moduleSpecifier?.text;
+    if (!/\.(less|css|scss|sass|svg|png|html)/.test(file))
+        return;
+    const sourceFileDir = path.dirname(sourceFile.path);
+    const real = path.join(sourceFileDir, file);
+    return ts.updateImportDeclaration(importNode, importNode.decorators, importNode.modifiers, importNode.importClause, ts.createStringLiteral(real));
+}
+
+function visitRequireNode(importNode, sourceFile) {
+    if (!(importNode.expression.kind == ts.SyntaxKind.Identifier &&
+        importNode.expression.escapedText == "require")) {
+        return;
+    }
+    const file = importNode.arguments[0].text;
+    if (/\.(less|css|scss|sass|svg|png|html)/.test(file)) {
+        const sourceFileDir = path.dirname(sourceFile.path);
+        const real = path.join(sourceFileDir, file);
+        return ts.updateCall(importNode, importNode.expression, undefined, [ts.createStringLiteral(real)]);
+    }
+}
+
+const lessToStringTransformer = function (context) {
+    return (sourceFile) => {
+        function visitor(node) {
+            // if (node && node.kind == ts.SyntaxKind.ImportDeclaration) {
+            //     return visitImportNode(node as ts.ImportDeclaration);
+            // }
+            if (node && ts.isCallExpression(node)) {
+                const result = visitRequireNode(node, sourceFile);
+                if (result)
+                    return result;
+            }
+            if (node && ts.isImportDeclaration(node)) {
+                const result = visitImportNode(node, sourceFile);
+                if (result)
+                    return result;
+            }
+            return ts.visitEachChild(node, visitor, context);
+        }
+
+        return ts.visitEachChild(sourceFile, visitor, context);
+    };
+};
+exports.default = function (program, pluginOptions) {
+    return lessToStringTransformer;
+}

package/readme.md

@@ -0,0 +1,11 @@
+## Builder and bundler for your projects
+
+### Use cases:
+`cmmn compile [target] [-b] [--watch]`
+> Runs typescript compiler
+  
+`cmmn bundle [target] [-b] [--watch] [--run] [--prod]`
+> Runs rollup bundler
+  
+`cmmn gen name directory [-n]`
+> Generates component with template at directory