@blueprintui/cli 0.0.4 → 0.0.7

package/{index.mjs → src/index.mjs}

@@ -1,29 +1,58 @@
 #!/usr/bin/env node
 
-import path from 'path';
 import * as url from 'url';
-import loadConfigFile from 'rollup/loadConfigFile';
+import { path } from 'zx';
+import { cwd } from 'process';
+import { spinner } from 'zx/experimental';
 import { rollup, watch } from 'rollup';
 import { program } from 'commander';
+import loadConfigFile from 'rollup/loadConfigFile';
+import { cp, lstat, readdir } from 'fs/promises';
+import { readFileSync, writeFileSync } from 'fs';
+import { join, resolve }  from 'path';
+
+const deepReadDir = async (dirPath) => await Promise.all(
+  (await readdir(dirPath)).map(async (entity) => {
+    const path = join(dirPath, entity)
+    return (await lstat(path)).isDirectory() ? await deepReadDir(path) : path
+  }),
+);
 
 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')
   .option('--config', 'path for custom config')
   .option('--watch')
-  .option('--prod')
   .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_BUILD = !options.watch ? 'production' : 'development';
+    process.env.BLUEPRINTUI_CONFIG = command.args[0] ? resolve(command.args[0]) : resolve('./blueprint.config.js');
     buildRollup(options);
   });
 
+program
+  .command('new')
+  .argument('<library name>', 'library name')
+  .description('generate library')
+  .action(async (name, command) => {
+    const outPath = resolve(cwd(), `./${name}`);
+    await cp(resolve(__dirname, './project'), outPath, { recursive: true });
+
+    const files = (await deepReadDir(outPath))?.flat(Number.POSITIVE_INFINITY);
+    files.forEach(file => {
+      const value = readFileSync(file, 'utf8').toString();
+      writeFileSync(file, value.replaceAll('{{LIBRARY}}', name));
+    });
+  });
+
 program.parse();
 
 function buildRollup(args) {
@@ -40,16 +69,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 +94,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/src/project/README.md

@@ -0,0 +1,8 @@
+# {{LIBRARY}}
+
+Generated with @blueprintui/cli.
+
+| Command              | Description                      |
+| -------------------- | -------------------------------- |
+| npm run build        | Build library for production     |
+| npm run start        | Build library in dev/watch mode  |

package/src/project/blueprint.config.js

@@ -0,0 +1,7 @@
+
+export default { 
+  library: {
+    entryPoints: ['./src/**/index.ts', './src/include/*.ts'],
+    externals: [/^library/, /^tslib/, /^lit/],
+  }
+};

package/src/project/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "{{LIBRARY}}",
+  "version": "0.0.0",
+  "main": "./index.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts",
+  "type": "module",
+  "customElements": "./custom-elements.json",
+  "homepage": "https://cli.blueprintui.dev",
+  "keywords": ["web components", "blueprintui"],
+  "license": "MIT",
+  "description": "{{LIBRARY}} web component library",
+  "scripts": {
+    "start": "bp build --watch",
+    "build": "bp build"
+  },
+  "files": [
+    "*"
+  ],
+  "sideEffects": [
+    "./include/*.js"
+  ],
+  "exports": {
+    "./custom-elements.json": "./custom-elements.json",
+    ".": "./index.js",
+    "./include/*": "./include/*",
+    "./*": "./*/index.js"
+  },
+  "author": {
+    "name": ""
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://cli.blueprintui.dev"
+  },
+  "dependencies": {
+    "lit": "^2.2.5"
+  },
+  "devDependencies": {
+    "@blueprintui/cli": "^0.0.5",
+    "typescript": "^4.6.4"
+  }
+}

package/src/project/src/alert/element.css

@@ -0,0 +1,57 @@
+:host {
+  --background: #bed5f2;
+  --color: #2d2d2d;
+  --font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+  --gap: 12px;
+  --padding: 12px;
+  display: block;
+  width: 100%;
+}
+
+.private-host {
+  background: var(--background);
+  font-family: var(--font-family);
+  color: var(--color);
+  gap: var(--gap);
+  padding: var(--padding);
+  display: flex;
+  align-items: center;
+}
+
+[part='icon'] {
+  --color: var(--icon-color);
+}
+
+[part='close'] {
+  --color: currentcolor;
+}
+
+:host([status='success']) {
+  --background: #b2e4ba;
+}
+
+:host([status='warning']) {
+  --background: #ededa4;
+}
+
+:host([status='danger']) {
+  --background: #f0baba;
+}
+
+button {
+  background: none;
+  border: 0;
+  position: absolute;
+  right: 12px;
+  font-size: 30px;
+  height: 32px;
+  width: 32px;
+  padding: 0;
+  cursor: pointer;
+  color: hsla(0, 0%, 0%, 0.4);
+  background: hsla(0, 0%, 0%, 0.05);
+}
+
+button:hover {
+  background: hsla(0, 0%, 0%, 0.1);
+}

package/src/project/src/alert/element.ts

@@ -0,0 +1,30 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators/property.js';
+import styles from './element.css' assert { type: 'css' };
+
+/**
+ * @element ui-alert
+ * @slot - alert content
+ * @event - close
+ * @cssprop --color
+ */
+export class Alert extends LitElement {
+  static styles = [styles];
+
+  @property({ type: String, reflect: true }) status: 'neutral' | 'success' | 'warning' | 'danger' = 'neutral';
+
+  @property({ type: Boolean }) closable = false;
+
+  render() {
+    return html`
+      <div class="private-host">
+        <slot></slot>
+        ${this.closable ? html`<button @click=${this.#close} part="close" aria-label="close">&times;</button>` : ''}
+      </div>
+    `;
+  }
+
+  #close() {
+    this.dispatchEvent(new CustomEvent('close', { detail: true }));
+  }
+}

package/src/project/src/alert/index.ts

@@ -0,0 +1 @@
+export * from './element.js';

package/src/project/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const value: CSSStyleSheet;
+  export default value;
+}

package/src/project/src/include/alert.ts

@@ -0,0 +1,9 @@
+import { Alert } from 'library/alert';
+
+customElements.get('bp-alert') || customElements.define('ui-alert', Alert);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-alert': Alert;
+  }
+}

package/src/project/src/index.ts

@@ -0,0 +1 @@
+export const version = 'PACKAGE_VERSION';

package/src/project/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["esnext", "dom"],
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "allowSyntheticDefaultImports": false,
+    "resolveJsonModule": true,
+    "outDir": "./dist/lib",
+    "declaration": true,
+    "types": ["jasmine"],
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictFunctionTypes": true,
+    "noFallthroughCasesInSwitch": true,
+    "strictNullChecks": false,
+    "sourceMap": false,
+    "inlineSourceMap": false,
+    "importHelpers": true,
+    "baseUrl": "./",
+    "rootDir": "./src",
+    "paths": {
+      "library/*": ["./src/*"]
+    }
+  },
+  "exclude": ["dist", "node_modules"]
+}

package/src/project/tsconfig.lib.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": [],
+    "incremental": true,
+    "isolatedModules": true,
+    "useDefineForClassFields": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./dist/lib/.tsbuildinfo"
+  },
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}

package/{rollup.config.mjs → src/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),
+  packageJSON: fs.readJsonSync(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
 }
@@ -70,7 +64,7 @@ export default [
     },
     acornInjectPlugins: [importAssertions],
     plugins: [
-      // del({ targets: [project.outDir], hook: 'buildStart', runOnce: true }),
+      project.prod ? cleanOutDir()  : [],
       copyAssets(),
       project.prod ? cssOptimize() : [],
       importAssertionsPlugin(),
@@ -84,21 +78,27 @@ export default [
       project.prod ? inlinePackageVersion() : [],
       project.prod ? postClean(): [],
       project.prod ? packageCheck() : [],
-      // project.prod ? customElementsAnalyzer() : [],
+      project.prod ? customElementsAnalyzer() : [],
+      project.prod ? cleanPackageJson() : []
     ],
   },
 ];
 
+function cleanOutDir() {
+  return del({ targets: [project.outDir], hook: 'buildStart', runOnce: true });
+}
+
 function copyAssets() {
   return copy({ copyOnce: true, targets: project.assets.map(src => ({ src, dest: config.outDir }))});
 }
 
 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() {
   return typescript({
+    cacheDir: path.resolve(__dirname, '.rollup.cache', project.packageJSON.name),
     tsconfig: project.tsconfig,
     noEmitOnError: project.prod,
     compilerOptions: { sourceMap: project.sourcemap },
@@ -118,7 +118,7 @@ function minifyJavaScript() {
 }
 
 function inlinePackageVersion() {
-  return replace({ preventAssignment: false, values: { PACKAGE_VERSION: fs.readJsonSync(project.packageFile).version } })
+  return replace({ preventAssignment: false, values: { PACKAGE_VERSION: project.packageJSON.version } });
 }
 
 function postClean() {
@@ -137,18 +137,26 @@ 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 () => {
+      await fs.writeFile(`${project.outDir}/package.json`, JSON.stringify({ ...project.packageJSON, scripts: undefined, devDependencies: undefined }, 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
   };
 };

package/custom-elements-manifest.config.mjs

@@ -1,40 +0,0 @@
-// import { readonlyPlugin } from 'cem-plugin-readonly';
-import { resolve } from 'path';
-
-const cwd = process.cwd();
-
-export default {
-  globs: [resolve(cwd, './src/**/element.ts')],
-  outdir: './dist/lib',
-  litelement: true,
-  plugins: [tsExtensionPlugin(), baseDir(), orderElements()],
-};
-
-export function orderElements() {
-  return {
-    name: 'order-elements',
-    packageLinkPhase({ customElementsManifest }) {
-      customElementsManifest.modules.sort((a, b) => (a.path < b.path ? -1 : 1));
-    },
-  };
-}
-
-export function baseDir(config = { baseDir: 'src' }) {
-  return {
-    name: 'base-dir',
-    packageLinkPhase({ customElementsManifest }) {
-      customElementsManifest.modules = JSON.parse(
-        JSON.stringify(customElementsManifest.modules).replaceAll(`"/${config.baseDir}/`, '"').replaceAll(`"${config.baseDir}/`, '"')
-      );
-    },
-  };
-}
-
-export function tsExtensionPlugin() {
-  return {
-    name: 'ts-extensions',
-    packageLinkPhase({ customElementsManifest }) {
-      customElementsManifest.modules = JSON.parse(JSON.stringify(customElementsManifest.modules).replace(/\.ts"/g, '.js"'));
-    },
-  };
-}