@cmmn/tools 1.2.0 → 1.3.0

package/bin.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import {bundle} from "./bundle/bundle.js";
 import {compile} from "./compile/compile.js";
@@ -10,4 +10,10 @@ const actions = {
     bundle, compile, gen
 }
 
-actions[action](...args);
+if (action in actions) {
+    actions[action](...args);
+} else {
+    console.log(`cmmn bundle [-b] [index.ts] [--watch] [--run] [--prod]`);
+    console.log(`cmmn compile [-b] [--watch]`);
+    console.log(`cmmn gen AppRoot . [--nested]`);
+}

package/bundle/bundle.js

@@ -53,7 +53,7 @@ function getConfigs(options) {
         }
         return getPackageConfigs(process.cwd(), options);
     }
-    if (options.input && !fs.existsSync(options.input)) {
+    if (!options.input.includes('.') || !fs.existsSync(options.input)) {
         return getPackageConfigs(process.cwd(), options, options.input);
     }
     const creator = new ConfigCreator(options);

package/bundle/rollup.config.js

@@ -3,13 +3,15 @@ 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';
+import html from '@open-wc/rollup-plugin-html';
+import json from '@rollup/plugin-json';
+import alias from '@rollup/plugin-alias';
+
 /**
  * @typedef {import(rollup).RollupOptions} RollupOptions
  * @typedef {import(rollup).OutputOptions} OutputOptions
@@ -28,6 +30,7 @@ export class ConfigCreator {
      *     name: string,
      *     outDir: string,
      *     html: string,
+     *     browser: boolean,
      *     dedupe: string[]
      * }}
      */
@@ -45,47 +48,59 @@ export class ConfigCreator {
         };
     }
 
-    setRootDir(rootDir){
+    setRootDir(rootDir) {
         this.root = rootDir;
     }
 
-    get outDir(){
+    get outDir() {
         return path.join(this.root, this.options.outDir);
     }
 
+    getOutputFileName(module, minify){
+        switch (module){
+            case "cjs":
+                return `[name]${minify ? '.min' : ''}.cjs`;
+            case "es":
+                return `[name]${minify ? '.min' : ''}.js`;
+            default:
+                return `[name]-${module}${minify ? '.min' : ''}.js`;
+        }
+    }
+
     /**
      *
      * @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`,
+        return this.options.module.split(',').map(module => ({
+            entryFileNames: this.getOutputFileName(module, this.options.minify),
             // file: output,
             dir: this.outDir,
-            sourcemap: !this.options.minify,
-            format: this.options.module,
+            sourcemap: true,
+            format: module,
             name: 'global',
-        };
+        }));
     }
 
-    get html(){
+    get html() {
         return html({
             publicPath: '/',
             dir: this.outDir,
             template: () => fs.readFileSync(path.join(this.root, this.options.html), 'utf8')
         });
     }
-    get devServer(){
+
+    get devServer() {
         return serve({
             open: false,
             contentBase: [this.outDir, path.join(this.root, 'assets')],
-            port: 3001,
+            port: this.options.port ?? 3000,
             historyApiFallback: true
         });
     }
 
-    get livereload(){
+    get livereload() {
         return livereload({
             watch: [this.outDir, path.join(this.root, 'assets')],
             verbose: false, // Disable console output
@@ -95,25 +110,26 @@ export class ConfigCreator {
         })
     }
 
-    get visualizer(){
+    get visualizer() {
         return visualizer({
             open: true,
             sourcemap: true,
             template: 'treemap',
             brotliSize: true,
+
             filename: path.join(this.outDir, '/stats.html')
         })
     }
 
     get plugins() {
         const result = [
-            builtins(),
+            // builtins(),
             nodeResolve({
-                browser: true,
+                browser: this.options.browser,
                 dedupe: this.options.dedupe || []
             }),
             commonjs({
-                 requireReturnsDefault: "namespace",
+                requireReturnsDefault: "namespace",
             }),
             styles({
                 mode: "emit",
@@ -121,8 +137,16 @@ export class ConfigCreator {
             string({
                 include: /\.(html|svg|less|css)$/,
             }),
+            json(),
+
         ];
-        if (this.options.html || this.options.input.endsWith('.html')){
+        if (this.options.alias) {
+            result.unshift(alias({
+                entries: this.options.alias
+            }));
+            console.log(this.options.alias)
+        }
+        if (this.options.html || this.options.input.endsWith('.html')) {
             result.push(this.html);
         }
         if (this.options.minify) {
@@ -141,7 +165,7 @@ export class ConfigCreator {
         if (this.options.devServer) {
             result.push(this.devServer, this.livereload);
         }
-        if (this.options.stats){
+        if (this.options.stats) {
             result.push(this.visualizer);
         }
         return result;
@@ -151,7 +175,7 @@ export class ConfigCreator {
      * @returns {RollupOptions[]}
      */
     getConfig() {
-        Object.assign(this.options,{
+        Object.assign(this.options, {
             module: this.options.module || 'es',
             external: this.options.external || [],
             name: this.options.name || 'index',
@@ -162,7 +186,7 @@ export class ConfigCreator {
         console.log(this.options);
         return [{
             input: {
-                [this.options.name]: path.join(this.root,this.options.input)
+                [this.options.name]: path.join(this.root, this.options.input)
             },
             output: this.output,
             external: (this.options.external || []).map(s => new RegExp(s)),
@@ -177,7 +201,7 @@ export class ConfigCreator {
                 console.warn(`(!) ${warning.message}`)
             },
             plugins: this.plugins,
-            treeshake: this.options.minify ? "smallest" : "recommended"
+            treeshake: this.options.minify ? "smallest" : "recommended",
         }]
     }
 }

package/compile/compile.js

@@ -18,13 +18,8 @@ export function compile(...flags) {
     }, {
         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) {

package/compile/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "ES6",
+    "module": "esnext",
     "moduleResolution": "Node",
     "target": "ES2019",
     "composite": true,
@@ -18,6 +18,7 @@
     "declarationDir": "./dist/typings",
     "declaration": true,
     "types": [
+      "@cmmn/tools"
     ],
     "lib": [
       "ES2020.BigInt",

package/compile/typings.d.ts

@@ -0,0 +1,4 @@
+declare module "*.less"{
+    const style: string;
+    export default style;
+}

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.2.0",
+  "version": "1.3.0",
   "description": "di, base extensions, useful functions",
   "main": "dist/rollup.config.js",
   "type": "module",
@@ -11,25 +11,24 @@
   "bin": {
     "cmmn": "bin.js"
   },
+  "typings": "compile/typings.d.ts",
   "files": [
     "bin.js",
+    "gen/*",
     "compile/*",
     "bundle/*",
     "plugins/*"
   ],
   "dependencies": {
-    "less": "^4",
-    "ttypescript": "1.5.13",
-    "typescript": "4.4.3",
-    "typescript-transform-paths": "^3.3.1"
-  },
-  "devDependencies": {
     "@open-wc/rollup-plugin-html": "^1.2.5",
+    "@rollup/plugin-alias": "3",
     "@rollup/plugin-commonjs": "^21",
+    "@rollup/plugin-json": "4",
     "@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-livereload": "^2.0.5",
     "rollup-plugin-node-builtins": "^2.1.2",
@@ -38,9 +37,12 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-styles": "^4",
     "rollup-plugin-terser": "^7",
-    "rollup-plugin-visualizer": "^5.5.4"
+    "rollup-plugin-visualizer": "^5.5.4",
+    "ttypescript": "1.5.13",
+    "typescript": "4.4.3",
+    "typescript-transform-paths": "^3.3.1"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "5309832cf3397001967465f0508d947cbab2540d"
+  "gitHead": "76478b70f43752f9bfe6cb96b4e540b1ff1e52e3"
 }

package/plugins/absolute-plugin.cjs

@@ -1,13 +1,49 @@
 const ts = require("typescript");
 const path = require("path");
+const fs = require("fs");
 
-function visitImportNode(importNode, sourceFile) {
-    const file  = importNode.moduleSpecifier?.text;
-    if (!/\.(less|css|scss|sass|svg|png|html)/.test(file))
+function visitExportNode(exportNode, sourceFile) {
+    if (exportNode.typeOnly){
+        console.log('type olnly')
+        return ;
+    }
+    const file = exportNode.moduleSpecifier?.text ?? exportNode.test;
+    if (!file)
+        return;
+    const sourceFileDir = path.dirname(sourceFile.path);
+    const abs = path.resolve(sourceFileDir, file);
+    if (/\.(less|css|scss|sass|svg|png|html)$/.test(file)) {
+        const absSource = path.join(options.outDir, path.relative(options.baseUrl, sourceFile.path));
+        const relFile = path.relative(absSource, abs)
+        return ts.updateExportDeclaration(exportNode, exportNode.decorators, exportNode.modifiers, exportNode.exportClause, ts.createStringLiteral(relFile), exportNode.typeOnly);
+    }
+    if (fs.existsSync(abs + '.ts')) {
+        return ts.updateExportDeclaration(exportNode, exportNode.decorators, exportNode.modifiers, exportNode.exportClause, ts.createStringLiteral(file + '.js'), exportNode.typeOnly);
+    }
+    if (fs.existsSync(abs + '/')) {
+        const indexFile = `${file}/index.js`;
+        return ts.updateExportDeclaration(exportNode, exportNode.decorators, exportNode.modifiers, exportNode.exportClause, ts.createStringLiteral(indexFile), exportNode.typeOnly);
+    }
+}
+
+function visitImportNode(importNode, sourceFile, options) {
+    const file = importNode.moduleSpecifier?.text;
+    if (!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));
+    const abs = path.resolve(sourceFileDir, file);
+    if (/\.(less|css|scss|sass|svg|png|html)$/.test(file)) {
+        const absSource = path.join(options.outDir, path.relative(options.baseUrl, sourceFile.path));
+        const relFile = path.relative(absSource, abs)
+        return ts.updateImportDeclaration(importNode, importNode.decorators, importNode.modifiers, importNode.importClause, ts.createStringLiteral(relFile));
+    }
+    if (fs.existsSync(abs + '.ts')) {
+        return ts.updateImportDeclaration(importNode, importNode.decorators, importNode.modifiers, importNode.importClause, ts.createStringLiteral(file + '.js'));
+    }
+    if (fs.existsSync(abs + '/')) {
+        const indexFile = `${file}/index.js`;
+        return ts.updateImportDeclaration(importNode, importNode.decorators, importNode.modifiers, importNode.importClause, ts.createStringLiteral(indexFile));
+    }
 }
 
 function visitRequireNode(importNode, sourceFile) {
@@ -18,24 +54,34 @@ function visitRequireNode(importNode, sourceFile) {
     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 abs = path.join(sourceFileDir, file);
+        const absSource = path.join(options.outDir, path.relative(options.baseUrl, sourceFile.path));
+        const relFile = path.relative(absSource, abs)
+        return ts.updateCall(importNode, importNode.expression, undefined, [ts.createStringLiteral(relFile)]);
     }
 }
 
 const lessToStringTransformer = function (context) {
+    const options = context.getCompilerOptions();
     return (sourceFile) => {
         function visitor(node) {
             // if (node && node.kind == ts.SyntaxKind.ImportDeclaration) {
             //     return visitImportNode(node as ts.ImportDeclaration);
             // }
-            if (node && ts.isCallExpression(node)) {
+            if (!node)
+                return ts.visitEachChild(node, visitor, context);
+            if (ts.isCallExpression(node)) {
                 const result = visitRequireNode(node, sourceFile);
                 if (result)
                     return result;
             }
-            if (node && ts.isImportDeclaration(node)) {
-                const result = visitImportNode(node, sourceFile);
+            if (ts.isImportDeclaration(node)) {
+                const result = visitImportNode(node, sourceFile, options);
+                if (result)
+                    return result;
+            }
+            if (ts.isExportDeclaration(node)) {
+                const result = visitExportNode(node, sourceFile);
                 if (result)
                     return result;
             }