@blueprintui/cli 0.0.3 → 0.0.6

package/.nvmrc

@@ -1 +1 @@
-16.15.0
+18.3.0

package/README.md

@@ -15,3 +15,23 @@ Web Component libraries. This project is still an experimental work in progress.
 | -------------- | ------------------------------------------ |
 | --config        | Path for `blueprint.config.js` file          |
 | --watch        | Runs build in watch mode for development   |
+
+
+### Configuration
+
+The `blueprint.config.js` can be used to customize certain aspects of the build.
+Below are the default values unless otherwise specified.
+
+```javascript
+export default { 
+  library: {
+    externals: [],
+    assets: ['./README.md', './LICENSE.md', './package.json'],
+    baseDir: './src',
+    outDir: './dist/lib',
+    entryPoints: ['./src/**/index.ts'],
+    tsconfig: './tsconfig.lib.json',
+    sourcemap: false,
+  }
+}
+```

package/custom-elements-manifest.config.mjs

@@ -2,10 +2,22 @@
 import { resolve } from 'path';
 
 const cwd = process.cwd();
+const baseSrc = resolve(cwd, 'src');
+
+let userConfig = { };
+if (process.env.BLUEPRINTUI_CONFIG) {
+  userConfig = await import(process.env.BLUEPRINTUI_CONFIG);
+}
+
+const config = {
+  baseDir: './src',
+  outDir: './dist/lib',
+  ...userConfig?.default?.library
+};
 
 export default {
-  globs: [resolve(cwd, './src/**/element.ts')],
-  outdir: './dist/lib',
+  globs: [resolve(cwd, config.baseDir)],
+  outdir: config.outDir,
   litelement: true,
   plugins: [tsExtensionPlugin(), baseDir(), orderElements()],
 };
@@ -19,12 +31,12 @@ export function orderElements() {
   };
 }
 
-export function baseDir(config = { baseDir: 'src' }) {
+export function baseDir() {
   return {
     name: 'base-dir',
     packageLinkPhase({ customElementsManifest }) {
       customElementsManifest.modules = JSON.parse(
-        JSON.stringify(customElementsManifest.modules).replaceAll(`"/${config.baseDir}/`, '"').replaceAll(`"${config.baseDir}/`, '"')
+        JSON.stringify(customElementsManifest.modules).replaceAll(`"/${baseSrc}`, '"').replaceAll(`"${baseSrc}`, '"')
       );
     },
   };

package/import-assert.mjs

@@ -1,4 +1,4 @@
-import path from 'path';
+import { path } from 'zx';
 
 // temp workaround due to package "string-to-template-literal" not shipping valid esm module
 

package/index.mjs

@@ -1,16 +1,20 @@
 #!/usr/bin/env node
 
-import path from 'path';
 import * as url from 'url';
-import loadConfigFile from 'rollup/loadConfigFile';
+import { path } from 'zx';
+import { spinner } from 'zx/experimental';
 import { rollup, watch } from 'rollup';
 import { program } from 'commander';
+import loadConfigFile from 'rollup/loadConfigFile';
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
-const ERROR = '\x1b[31m%s\x1b[0m'; //red
-const WARN = '\x1b[33m%s\x1b[0m'; //yellow
-const INFO = '\x1b[36m%s\x1b[0m'; //cyan
-const SUCCESS = '\x1b[32m%s\x1b[0m'; //green
+
+const status = {
+  error: '\x1b[31m%s\x1b[0m',
+  warn: '\x1b[33m%s\x1b[0m',
+  info: '\x1b[36m%s\x1b[0m',
+  success: '\x1b[32m%s\x1b[0m'
+};
 
 program
   .command('build')
@@ -20,7 +24,7 @@ program
   .description('build library')
   .action(async (options, command) => {
     process.env.BLUEPRINTUI_BUILD = options.prod || !options.watch ? 'production' : 'development';
-    process.env.BLUEPRINTUI_CONFIG = command.args[0] ? path.resolve(command.args[0]) : path.resolve(process.cwd(), './rollup.config.js');
+    process.env.BLUEPRINTUI_CONFIG = command.args[0] ? path.resolve(command.args[0]) : path.resolve('./blueprint.config.js');
     buildRollup(options);
   });
 
@@ -40,16 +44,15 @@ function buildRollup(args) {
         let bundle;
         let buildFailed = false;
         try {
-          console.log(INFO, 'Building...');
-          bundle = await rollup(options[0]);
+          bundle = await spinner('Building...', async () => await rollup(options[0]));
           await bundle.write(options[0].output[0]);
         } catch (error) {
           buildFailed = true;
-          console.error(ERROR, error);
+          console.error(status.error, error);
         }
         if (bundle) {
           const end = Date.now();
-          console.log(SUCCESS, `Completed in ${(end - start) / 1000} seconds 🎉`);
+          console.log(status.success, `Completed in ${(end - start) / 1000} seconds 🎉`);
           await bundle.close();
         }
         process.exit(buildFailed ? 1 : 0);
@@ -66,17 +69,17 @@ function buildRollup(args) {
 
             switch (event.code) {
               case 'START':
-                console.log(INFO, 'Building...');
+                console.log(status.info, 'Building...');
                 break;
               case 'ERROR':
-                console.error(ERROR, event.error);
+                console.error(status.error, event.error);
                 event.result.close();
                 break;
               case 'WARN':
-                console.error(ERROR, event.error);
+                console.error(status.warn, event.error);
                 break;
               case 'BUNDLE_END':
-                console.log(SUCCESS, `Complete in ${event.duration / 1000} seconds`);
+                console.log(status.success, `Complete in ${event.duration / 1000} seconds`);
                 event.result.close();
                 break;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintui/cli",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "",
   "main": "./index.mjs",
   "bin": {
@@ -33,6 +33,7 @@
     "rollup-plugin-shell": "^1.0.3",
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "2.3.1",
-    "typescript": "4.6.4"
+    "typescript": "4.6.4",
+    "zx": "^7.0.0"
   }
 }

package/rollup.config.mjs

@@ -1,5 +1,4 @@
-import fs from 'fs-extra';
-import glob from 'glob';
+import * as csso from 'csso';
 import typescript from '@rollup/plugin-typescript';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
@@ -8,21 +7,17 @@ import copy from 'rollup-plugin-copy';
 import del from 'rollup-plugin-delete';
 import minifyHTML from 'rollup-plugin-minify-html-literals';
 import execute from 'rollup-plugin-shell';
+import { $, fs, glob, path } from 'zx';
+import { extname } from 'path';
 import { terser } from 'rollup-plugin-terser';
-import { resolve, extname } from 'path';
-import { importAssertionsPlugin } from './import-assert.mjs';
-// import { importAssertionsPlugin } from 'rollup-plugin-import-assert';
 import { importAssertions } from 'acorn-import-assertions';
 import { idiomaticDecoratorsTransformer, constructorCleanupTransformer } from '@lit/ts-transformers';
-import * as csso from 'csso';
-import { exec as _exec } from 'child_process';
-import { promisify } from 'util';
-import { dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { importAssertionsPlugin } from './import-assert.mjs';
+// import { importAssertionsPlugin } from 'rollup-plugin-import-assert';
 
-const exec = promisify(_exec);
 const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __dirname = path.dirname(__filename);
 
 let userConfig = { };
 if (process.env.BLUEPRINTUI_CONFIG) {
@@ -31,26 +26,25 @@ if (process.env.BLUEPRINTUI_CONFIG) {
 
 const config = {
   externals: [],
-  assets: ['./README.md', './LICENSE', './package.json'],
+  assets: ['./README.md', './LICENSE.md', './package.json'],
   baseDir: './src',
   outDir: './dist/lib',
-  entryPoints: ['./src/**/index.ts', './src/include/*.ts'],
+  entryPoints: ['./src/**/index.ts'],
   tsconfig: './tsconfig.lib.json',
-  customElementsManifestConfig: './custom-elements-manifest.config.mjs',
   sourcemap: false,
-  ...userConfig.default.library
+  ...userConfig.default?.library
 };
 
 const cwd = process.cwd();
 const project = {
   externals: config.externals,
-  packageFile: resolve(cwd, './package.json'),
-  assets: config.assets.map(a => resolve(cwd, a)),
-  baseDir: resolve(cwd, config.baseDir),
-  outDir: resolve(cwd, config.outDir),
-  entryPoints: config.entryPoints.map(e => resolve(cwd, e)),
-  tsconfig: resolve(cwd, config.tsconfig),
-  customElementsManifestConfig: resolve(__dirname, config.customElementsManifestConfig),
+  packageFile: path.resolve(cwd, './package.json'),
+  assets: config.assets.map(a => path.resolve(cwd, a)),
+  baseDir: path.resolve(cwd, config.baseDir),
+  outDir: path.resolve(cwd, config.outDir),
+  entryPoints: config.entryPoints.map(e => path.resolve(cwd, e)),
+  tsconfig: path.resolve(cwd, config.tsconfig),
+  customElementsManifestConfig: config.customElementsManifestConfig ? path.resolve(cwd, config.customElementsManifestConfig) :  path.resolve(__dirname, './custom-elements-manifest.config.mjs'),
   prod: process.env.BLUEPRINTUI_BUILD === 'production',
   sourcemap: config.sourcemap
 }
@@ -84,7 +78,8 @@ export default [
       project.prod ? inlinePackageVersion() : [],
       project.prod ? postClean(): [],
       project.prod ? packageCheck() : [],
-      // project.prod ? customElementsAnalyzer() : [],
+      project.prod ? customElementsAnalyzer() : [],
+      project.prod ? cleanPackageJson() : []
     ],
   },
 ];
@@ -94,7 +89,7 @@ function copyAssets() {
 }
 
 function createEntrypoints() {
-  return virtual({ 'library-entry-points': [...project.entryPoints.flatMap(i => glob.sync(i))].map(entry => `export * from '${entry}';`).join('\n') });
+  return virtual({ 'library-entry-points': [...project.entryPoints.flatMap(i => glob.globbySync(i))].map(entry => `export * from '${entry}';`).join('\n') });
 }
 
 function compileTypescript() {
@@ -137,18 +132,28 @@ function customElementsAnalyzer() {
       if (copied) {
         return;
       } else {
-        await exec(`cem analyze --config ${project.customElementsManifestConfig}`);
-        const json = await fs.readJson(project.packageFile);
-        const packageFile = { ...json, customElements: './custom-elements.json', scripts: undefined, devDependencies: undefined };
-        await fs.writeFile(`${project.outDir}/package.json`, JSON.stringify(packageFile, null, 2));
+        const cemPath = path.resolve('node_modules', '@custom-elements-manifest/analyzer/index.js');
+        await $`${cemPath} analyze --config ${project.customElementsManifestConfig}`;
+        copied = true;
       }
     }
   };
 }
 
+function cleanPackageJson() {
+  return {
+    name: 'clean-package-json',
+    writeBundle: async () => {
+      const json = await fs.readJson(project.packageFile);
+      const packageFile = { ...json, scripts: undefined, devDependencies: undefined };
+      await fs.writeFile(`${project.outDir}/package.json`, JSON.stringify(packageFile, null, 2));
+    }
+  }
+}
+
 function cssOptimize() {
   return {
-    load(id) { return id.slice(-4) === '.css' ? this.addWatchFile(resolve(id)) : null },
+    load(id) { return id.slice(-4) === '.css' ? this.addWatchFile(path.resolve(id)) : null },
     transform: async (css, id) => id.slice(-4) === '.css' ? ({ code: csso.minify(css, { comments: false }).css, map: { mappings: '' } }) : null
   };
 };