@cmmn/tools 1.0.3 → 1.2.2

package/bin.js

@@ -1,12 +1,13 @@
 #!/usr/bin/env node
-
-import {bundle} from "./bundle/bundle.js";
-import {compile} from "./compile/compile.js";
-
-const [action, ...args] = process.argv.slice(2);
-
-const actions = {
-    bundle, compile
-}
-
-actions[action](...args);
+
+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, gen
+}
+
+actions[action](...args);

package/bundle/bundle.js

@@ -1,53 +1,116 @@
-import {getConfig} from "./rollup.config.js";
-import {rollup, watch} from "rollup";
-
-export async function bundle(target, ...options) {
-    const config = getConfig({
-        input: target,
-        minify: options.includes('--prop'),
-        devServer: options.includes('--run')
-    });
-    config.onwarn = function (message){
-
-    }
-    if (options.includes('--watch')) {
-        const watcher = watch(config);
-        watcher.on('event', (event) => {
-            switch (event.code){
-                case 'START':
-                    console.clear();
-                    console.log('START BUNDLING');
-                    break;
-                case 'END':
-                    console.log('FINISH');
-                    break;
-                case 'BUNDLE_START':
-                    console.log(`1. ${event.input} -> ${event.output}`);
-                    break;
-                case 'BUNDLE_END':
-                    console.log(`1. ${event.input} -> ${event.output}, (${event.duration/1000}s)`);
-                    break;
-
-                case 'ERROR':
-                    switch (event.error.code){
-                        case 'PARSE_ERROR':
-                            console.warn('Error parsing files:');
-                            console.log(`\t${event.error.parserError.message}`);
-                            console.log(`\tat: ${event.error.id}`);
-                            console.log(`\tline: ${event.error.frame}`);
-                            break;
-                        case 'UNRESOLVED_IMPORT':
-                            console.error(event.error.message);
-                            break;
-                        default:
-                            console.warn('Unknown error:', event.error.code);
-                            console.error(event.error);
-                            break;
-                    }
-                    break;
-            }
-        });
-    } else {
-        const build = await rollup(config);
-    }
-}
+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 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')));
+    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;
+}
+
+function getLernaSubPackages(lernaFile, options) {
+    const config = JSON.parse(fs.readFileSync(lernaFile, 'utf8'));
+    const packages = config.packages;
+    const dirs = packages.flatMap(pkg => fg.sync([pkg], {
+        absolute: true,
+        globstar: true,
+        onlyDirectories: true,
+        cwd: path.dirname(lernaFile)
+    }));
+    return dirs.flatMap(dir => getPackageConfigs(dir, options));
+}
+
+function getConfigs(options) {
+    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 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'),
+    });
+    if (!options.includes('--watch')) {
+        for (let config of configs) {
+            console.log(`1. ${config.input} -> ${config.output.file}`);
+            const build = await rollup(config);
+            await build.write(config.output);
+            console.log('SUCCESS');
+        }
+        return;
+    }
+    const watcher = watch(configs);
+    watcher.on('event', (event) => {
+        switch (event.code) {
+            case 'START':
+                console.clear();
+                console.log('START BUNDLING');
+                break;
+            case 'END':
+                console.log('FINISH');
+                break;
+            case 'BUNDLE_START':
+                console.log(`1. ${event.input} -> ${event.output}`);
+                break;
+            case 'BUNDLE_END':
+                console.log(`1. ${event.input} -> ${event.output}, (${event.duration / 1000}s)`);
+                break;
+
+            case 'ERROR':
+                switch (event.error.code) {
+                    case 'PARSE_ERROR':
+                        console.warn('Error parsing files:');
+                        console.log(`\t${event.error.parserError.message}`);
+                        console.log(`\tat: ${event.error.id}`);
+                        console.log(`\tline: ${event.error.frame}`);
+                        break;
+                    case 'UNRESOLVED_IMPORT':
+                        console.error(event.error.message);
+                        break;
+                    default:
+                        console.warn('Unknown error:', event.error.code);
+                        console.error(event.error);
+                        break;
+                }
+                break;
+        }
+    });
+}

package/bundle/rollup.config.js

@@ -1,78 +1,183 @@
-import commonjs from '@rollup/plugin-commonjs';
-import nodeResolve from '@rollup/plugin-node-resolve';
-import {terser} from "rollup-plugin-terser"
-import { visualizer } from 'rollup-plugin-visualizer';
-import  less from 'rollup-plugin-less';
-import { string } from "rollup-plugin-string";
-import serve from 'rollup-plugin-serve'
-
-export const getConfig = ({minify, input, devServer}) => {
-    if (minify){
-        return {
-            input,
-            output: {
-                file: 'dist/index.min.js',
-                format: 'cjs'
-            },
-            plugins: [
-                commonjs(),
-                nodeResolve({
-                    browser: true,
-                }),
-                terser({
-                }),
-                visualizer({
-                    open: true,
-                    template: 'sunburst',
-                    brotliSize: true,
-                    filename: 'dist/stats.html'
-                }),
-
-            ]
-        }
-    }
-    return ({
-        input,
-        output: [
-            {
-                file: 'dist/index-cjs.js',
-                sourcemap: true,
-                format: 'cjs',
-                exports: 'auto',
-            },
-            {
-                file: 'dist/index-umd.js',
-                sourcemap: true,
-                format: 'umd',
-                name: 'global'
-            },
-            {
-                file: 'dist/index-es.js',
-                sourcemap: true,
-                exports: 'auto',
-                format: 'es'
-            }
-        ],
-        // prettier-ignore
-        plugins: [
-            nodeResolve({
-                browser: true,
-            }),
-            commonjs({
-
-            }),
-            less({
-               insert: true
-            }),
-            string({
-                include: /\.(html|svg)$/,
-            }),
-            ...[devServer ? serve({
-                open: false,
-                contentBase: ['dist', 'assets'],
-                port: 3001,
-                historyApiFallback: true
-            }) : '']
-        ]
-    });
-};
+import commonjs from '@rollup/plugin-commonjs';
+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 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: this.options.dedupe || []
+            }),
+            commonjs({
+                 requireReturnsDefault: "namespace",
+            }),
+            styles({
+                mode: "emit",
+            }),
+            string({
+                include: /\.(html|svg|less|css)$/,
+            }),
+        ];
+        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

@@ -1,47 +1,38 @@
-import ts from "typescript";
-
-export function compile(target, options) {
-    const config = {
-        declaration: true,
-        declarationDir: "dist/typings",
-        experimentalDecorators: true,
-        emitDecoratorMetadata: true,
-        module: ts.ModuleKind.ES2020,
-        moduleResolution: ts.ModuleResolutionKind.NodeJs,
-        lib: ["lib.es2020.d.ts", "lib.dom.d.ts"],
-        noEmitHelpers: false,
-        noImplicitAny: true,
-        downlevelIteration: true,
-        noImplicitOverride: true,
-        noImplicitReturns: true,
-        outDir: "dist/esm",
-        target: ts.ScriptTarget.ES2018
-    }
-    // Note that there is another overload for `createWatchCompilerHost` that takes
-    // a set of root files.
-    const host = ts.createWatchCompilerHost(
-        [ target ],
-        config,
-        ts.sys
-    );
-
-    // You can technically override any given hook on the host, though you probably
-    // don't need to.
-    // Note that we're assuming `origCreateProgram` and `origPostProgramCreate`
-    // doesn't use `this` at all.
-    const origCreateProgram = host.createProgram;
-    host.createProgram = (rootNames, options, host, oldProgram) => {
-        console.log("** We're about to create the program! **");
-        return origCreateProgram(rootNames, options, host, oldProgram);
-    };
-    const origPostProgramCreate = host.afterProgramCreate;
-
-    host.afterProgramCreate = program => {
-        console.log("** We finished making the program! **");
-        origPostProgramCreate(program);
-    };
-
-    // `createWatchProgram` creates an initial program, watches files, and updates
-    // the program over time.
-    ts.createWatchProgram(host);
-}
+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/gen/component.ts.tpl

@@ -0,0 +1,16 @@
+import {component, HtmlComponent, property} from "@cmmn/ui";
+import {template, IState, IEvents} from "./$name$.template";
+import style from "./$name$.style.less";
+import {Injectable} from "@cmmn/core";
+
+@Injectable(true)
+@component({name: '$name$', template, style})
+export class $Name$Component extends HtmlComponent<IState, IEvents> {
+
+    @property()
+    private property!: any;
+
+    get State() {
+        return this.property;
+    }
+}

package/gen/gen.js

@@ -0,0 +1,27 @@
+import fs from "fs";
+import path from "path";
+import {fileURLToPath} from 'url';
+import {execSync} from "child_process";
+
+const currentDir = '__dirname' in global ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+const templateTpl = fs.readFileSync(path.join(currentDir, './template.ts.tpl'), 'utf8');
+const componentTpl = fs.readFileSync(path.join(currentDir, './component.ts.tpl'), 'utf8');
+const styleTpl = fs.readFileSync(path.join(currentDir, './style.less.tpl'), 'utf8');
+
+
+export function gen(name, directory, nested = false) {
+    const Name = name.replace(/^./, c => c.toUpperCase());
+    name = Name.replace(/[A-Z]/g, (c, i) => (i ? '-' : '') + c.toLowerCase());
+    process.chdir(directory);
+    if (nested) {
+        fs.mkdirSync(name);
+        process.chdir(name);
+    }
+    fs.writeFileSync(name + '.component.ts', componentTpl.replace(/\$Name\$/g, Name).replace(/\$name\$/g, name), 'utf8');
+    fs.writeFileSync(name + '.template.ts', templateTpl.replace(/\$Name\$/g, Name).replace(/\$name\$/g, name), 'utf8');
+    fs.writeFileSync(name + '.style.less', styleTpl.replace(/\$Name\$/g, Name).replace(/\$name\$/g, name), 'utf8');
+    execSync(`git add ${name}.component.ts`);
+    execSync(`git add ${name}.template.ts`);
+    execSync(`git add ${name}.style.less`);
+}

package/gen/style.less.tpl

@@ -0,0 +1,3 @@
+$name$ {
+    display: block;
+}

package/gen/template.ts.tpl

@@ -0,0 +1,8 @@
+import {ITemplate} from "@cmmn/ui";
+
+export const template: ITemplate<IState, IEvents> = (html, state, events) => html`
+`;
+
+export type IState = {}
+
+export type IEvents = {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmmn/tools",
-  "version": "1.0.3",
+  "version": "1.2.2",
   "description": "di, base extensions, useful functions",
   "main": "dist/rollup.config.js",
   "type": "module",
@@ -13,26 +13,33 @@
   },
   "files": [
     "bin.js",
-    "absolute-plugin.cjs",
+    "gen/*",
+    "compile/*",
     "bundle/*",
-    "compile/*"
+    "plugins/*"
   ],
-  "peerDependencies": {
-    "typescript": "4.4.3"
-  },
   "dependencies": {
+    "@open-wc/rollup-plugin-html": "^1.2.5",
     "@rollup/plugin-commonjs": "^21",
     "@rollup/plugin-node-resolve": "^13",
     "@rollup/plugin-typescript": "^8",
+    "@web/rollup-plugin-html": "^1.10.1",
+    "fast-glob": "^3.2.11",
+    "less": "^4",
     "rollup": "^2",
-    "rollup-plugin-less": "^1.1.3",
+    "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",
     "rollup-plugin-terser": "^7",
     "rollup-plugin-visualizer": "^5.5.4",
-    "typescript": "4.4.3"
+    "ttypescript": "1.5.13",
+    "typescript": "4.4.3",
+    "typescript-transform-paths": "^3.3.1"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "a96e009d45a7e453cb419989710f16f30e5d8290"
+  "gitHead": "66f94deba77ee833d4fca4350e7c98869afb8c6f"
 }

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

package/absolute-plugin.cjs

@@ -1,36 +0,0 @@
-const ts = require("typescript");
-const path_1 = require("path");
-
-function visitRequireNode(importNode) {
-    if (importNode.expression.kind == ts.SyntaxKind.Identifier &&
-        importNode.expression.escapedText == "require") {
-        const file = importNode.arguments[0].text;
-        if (/\.(less|css|scss|sass|svg|png|html)/.test(file)) {
-            const currentFileName = importNode.getSourceFile().fileName;
-            const absolute = path_1.join(path_1.dirname(currentFileName), file);
-            return ts.updateCall(importNode, importNode.expression, undefined, [ts.createStringLiteral(absolute)]);
-        }
-    }
-    return null;
-}
-
-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);
-                if (result)
-                    return result;
-            }
-            return ts.visitEachChild(node, visitor, context);
-        }
-
-        return ts.visitEachChild(sourceFile, visitor, context);
-    };
-};
-exports.default = function (program, pluginOptions) {
-    return lessToStringTransformer;
-}