@cmmn/tools 1.6.8 → 1.6.12

package/bundle/bundle.js

@@ -1,7 +1,8 @@
 import {rollup, watch} from "rollup";
 import {getConfigOptions} from "./getConfigs.js";
 import {ConfigCreator} from "./rollup.config.js";
-
+import fs from "fs";
+import path from "path";
 
 export async function bundle(...options) {
     const configOptions = getConfigOptions({
@@ -19,7 +20,9 @@ export async function bundle(...options) {
             }
             const build = await rollup(config);
             for (let out of config.output){
-                console.log(`SUCCESS: ${out.dir} ${out.entryFileNames.replace('[name]', Object.keys(config.input)[0])}`);
+                const file = path.join(out.dir, out.entryFileNames.replace('[name]', Object.keys(config.input)[0]));
+                const stat = fs.statSync(file);
+                console.log(`SUCCESS: ${file} (${(stat.size/1024/1024).toFixed(3)}Mb)`);
                 await build.write(out);
             }
         }

package/bundle/rollup.config.js

@@ -1,9 +1,7 @@
 import commonjs from '@rollup/plugin-commonjs';
 import nodeResolve from '@rollup/plugin-node-resolve';
-import image from "rollup-plugin-img";
 import {terser} from "rollup-plugin-terser"
 import {visualizer} from 'rollup-plugin-visualizer';
-import styles from "rollup-plugin-styles";
 import {string} from "rollup-plugin-string";
 import serve from 'rollup-plugin-serve';
 import builtins from 'rollup-plugin-node-builtins';
@@ -15,6 +13,7 @@ import json from '@rollup/plugin-json';
 import alias from '@rollup/plugin-alias';
 import replace from '@rollup/plugin-replace';
 import sourcemaps from 'rollup-plugin-sourcemaps';
+import {Styles} from "./styles.js";
 
 /**
  * @typedef {import(rollup).RollupOptions} RollupOptions
@@ -84,9 +83,10 @@ export class ConfigCreator {
             entryFileNames: this.getOutputFileName(module, this.options.minify),
             // file: output,
             dir: this.outDir,
-            sourcemap: true,
+            sourcemap: this.options.minify ? false : 'inline',
             format: module,
-            globals: Array.isArray(this.options.external) ? Object.fromEntries(this.options.external.map(x => [x, x])) : this.options.external,
+            globals: module === 'umd' ? (Array.isArray(this.options.external) ? Object.fromEntries(this.options.external.map(x => [x, x])) : this.options.external) : [],
+            assetFileNames: "assets/[name][extname]",
             name: this.options.global ?? 'global',
         }));
     }
@@ -95,7 +95,17 @@ export class ConfigCreator {
         return html({
             publicPath: '/',
             dir: this.outDir,
-            template: () => fs.readFileSync(path.join(this.root, this.options.html), 'utf8')
+            inject: false,
+            template: ({bundle}) => {
+                const inject = Object.keys(bundle.bundle).map(key => {
+                    if (key.endsWith('css'))
+                        return `<link rel="stylesheet" href="/${key}" >`;
+                    if (key.endsWith('js'))
+                        return `<script type="module" defer src="/${key}"></script>`;
+                })
+                const html = fs.readFileSync(path.join(this.root, this.options.html), 'utf8')
+                return html.replace('</head>', inject.join('\n') + '</head>');
+            }
         });
     }
 
@@ -132,16 +142,19 @@ export class ConfigCreator {
     get plugins() {
         const result = [
             replace({
-                'process.env.NODE_ENV': JSON.stringify('development'),
+                'process.env.NODE_ENV': JSON.stringify(this.options.minify ? 'production' : 'development'),
                 preventAssignment: true
             }),
+            ...Styles(this.options),
+            commonjs({
+                requireReturnsDefault: "namespace",
+                transformMixedEsModules: true,
+                defaultIsModuleExports: true
+            }),
             nodeResolve({
                 browser: this.options.browser,
                 dedupe: this.options.dedupe || []
             }),
-            commonjs({
-                requireReturnsDefault: "namespace"
-            }),
             sourcemaps(),
             builtins(),
             /*this.options.styles === 'modules' ? postCSS({
@@ -158,15 +171,10 @@ export class ConfigCreator {
                 namedExports: false,
                 autoModules: true,
             }) : */
-            styles({
-                mode: "emit"
-            }),
-            image({
-                output: `/assets`, // default the root
-                extensions: /\.(png|jpg|jpeg|gif)$/, // support png|jpg|jpeg|gif|svg, and it's alse the default value
-                limit: 8192,  // default 8192(8k)
-                exclude: 'node_modules/**'
-            }),
+            // styles({
+            //     autoModules: true,
+            // }),
+
             string({
                 include: /\.(html|svg|less)$/,
                 exclude: /\.module\.css/
@@ -244,7 +252,7 @@ export class ConfigCreator {
 
             },
             plugins: this.plugins,
-            treeshake: this.options.minify ? "smallest" : "recommended",
+            treeshake: this.options.minify ? "smallest" : "safest",
             watch: {
                 exclude: this.getExternals().concat(path.join(this.root, this.outDir)),
             }

package/bundle/styles.js

@@ -0,0 +1,65 @@
+import loader from 'postcss-modules/build/css-loader-core/loader.js';
+import image from "rollup-plugin-img";
+import postCssImport from 'postcss-import';
+import cssModules from '@modular-css/rollup';
+import slug from "unique-slug";
+import styles from "rollup-plugin-styles";
+
+class Loader extends loader.default {
+    failStart = '/' + process.cwd();
+
+    fetch(_newPath, relativeTo, _trace) {
+        if (relativeTo.startsWith(this.failStart))
+            relativeTo = relativeTo.substring(1);
+        // let newPath = _newPath.replace(/^["']|["']$/g, "");
+        // let relativeDir = path.dirname(relativeTo),
+        //     rootRelativePath = path.resolve(relativeDir, newPath),
+        //     fileRelativePath = path.resolve(path.join(this.root, relativeDir), newPath);
+        // relativeTo = path.relative(process.cwd(), relativeTo);
+        // console.log({root: this.root, newPath, relativeTo, relativeDir, rootRelativePath, fileRelativePath});
+        return super.fetch(_newPath, relativeTo, _trace);
+    }
+}
+
+export function Styles(options) {
+    return [
+        image({
+            output: `/assets`, // default the root
+            extensions: /\.(png|jpg|jpeg|gif)$/, // support png|jpg|jpeg|gif|svg, and it's alse the default value
+            // exclude: 'node_modules/**'
+        }),
+        options.styles === "modules" ? cssModules({
+            common: 'common.css',
+            before: [postCssImport],
+            namer: function (file, selector) {
+                return selector + "_" +
+                    file.replace(/([\/\\]index)?(\.module)?\.css$/, "").split(/[\\\/]/).pop() + "_" +
+                    slug(file)
+            }
+        }): styles({
+            mode: "emit"
+        }),
+        // postcss({
+        //     extract: 'output.css',
+        //     ident: 'postcss',
+        //     modules: {
+        //         root: '',
+        //         generateScopedName: `[name]_[local]_[hash:base64:5]`,
+        //         Loader: Loader
+        //     },
+        //     use: ['sass'],
+        //     plugins: [
+        //         // postCssDuplicates(),
+        //         postCssImport()
+        //         // postcssModules({
+        //         //     generateScopedName: '[local]',
+        //         //     root: '',
+        //         //     Loader: Loader
+        //         // }),
+        //         // postcssPresetEnv({
+        //         //     stage: 0,
+        //         // }),
+        //     ],
+        // }),
+    ];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmmn/tools",
-  "version": "1.6.8",
+  "version": "1.6.12",
   "description": "Compilation, bundling, code generator, testing.",
   "main": "dist/rollup.config.js",
   "type": "module",
@@ -34,14 +34,17 @@
     "gen/*",
     "compile/*",
     "bundle/*",
+    "serve/*",
     "plugins/*",
     "test/*"
   ],
   "dependencies": {
     "@jest/globals": "27.x.x",
+    "@modular-css/rollup": "28",
     "@open-wc/rollup-plugin-html": "^1.2.5",
     "@rollup/plugin-alias": "3",
     "@rollup/plugin-commonjs": "^21",
+    "@rollup/plugin-image": "2",
     "@rollup/plugin-json": "4",
     "@rollup/plugin-node-resolve": "^13",
     "@rollup/plugin-replace": "4.x.x",
@@ -54,26 +57,28 @@
     "fast-glob": "^3.2.11",
     "jest": "27.x.x",
     "less": "^4",
+    "live-server": "1.2.2",
+    "postcss-import": "14",
+    "postcss-modules": "*",
     "rollup": "^2",
-    "rollup-plugin-img": "1.x.x",
+    "rollup-plugin-img": "1",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-postcss": "4.x.x",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-styles": "^4",
     "rollup-plugin-terser": "^7",
     "rollup-plugin-visualizer": "^5.5.4",
-    "servor": "4.x.x",
     "sinon": "10.x.x",
     "ts-jest": "27.x.x",
     "ttypescript": "1.5.13",
     "typescript": "4.6.x",
-    "typescript-transform-paths": "^3.3.1"
+    "typescript-transform-paths": "^3.3.1",
+    "unique-slug": "*"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "f4e9729796c27c9c9f42b30082b44e8afa6d62c4"
+  "gitHead": "96da82c2b5c2a0c8bead5eeb8005d00261812153"
 }

package/serve/serve.js

@@ -0,0 +1,21 @@
+import {getConfigOptions} from "../bundle/getConfigs.js";
+import {join, relative, resolve} from "path";
+import liveServer from "live-server";
+
+export function serve(...options) {
+    const configs = getConfigOptions({
+        project: options.includes('-b'),
+    });
+    configs.filter(x => x.port).forEach(async x => {
+        const root = relative(process.cwd(), join(x.rootDir, x.outDir ?? 'dist/bundle'));
+        const server = await liveServer.start({
+            root: root,
+            file: 'index.html',
+            port: x.port,
+            open: false,
+            mount: x.mount && Object.entries(x.mount).map(([from, to]) => [from, resolve(x.rootDir, to)])
+        });
+
+    })
+
+}