@blueprintui/cli 0.9.0 → 0.11.0

package/.nvmrc

@@ -1 +1 @@
-20.14.0
+22.11.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.11.0
+- feat: improved starter project generation
+- fix: bump dependencies
+
+## 0.10.0
+- feat: improved package publishing verification
+
 ## 0.9.0
 - feat: add vscode metadata support
 

package/package.json

@@ -1,44 +1,48 @@
 {
   "name": "@blueprintui/cli",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "",
   "main": "./index.mjs",
   "bin": {
     "bp": "./src/index.mjs"
   },
-  "scripts": {
-    "bp": "./src/index.mjs",
-    "start": "cd docs && lite-server",
-    "deploy": "firebase deploy --only hosting:blueprintui-cli"
+  "engines": {
+    "node": "22.11.0"
   },
   "author": "Crylan Software",
   "license": "MIT",
   "dependencies": {
     "@custom-elements-manifest/analyzer": "0.10.3",
     "@lit/ts-transformers": "2.0.1",
-    "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-replace": "5.0.7",
-    "@rollup/plugin-typescript": "11.1.6",
+    "@rollup/plugin-node-resolve": "15.3.0",
+    "@rollup/plugin-replace": "6.0.1",
+    "@rollup/plugin-typescript": "12.1.1",
     "@rollup/plugin-virtual": "3.0.2",
-    "@skypack/package-check": "0.2.2",
-    "browserslist": "4.23.2",
+    "@rollup/pluginutils": "5.1.3",
+    "browserslist": "4.24.2",
     "commander": "12.1.0",
     "custom-element-vs-code-integration": "1.4.1",
-    "glob": "10.4.1",
-    "lightningcss": "1.25.1",
+    "glob": "11.0.0",
+    "lightningcss": "1.28.1",
     "minify-html-literals": "1.3.5",
     "path": "0.12.7",
-    "rollup": "4.19.0",
+    "publint": "0.2.12",
+    "rollup": "4.25.0",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-css-modules": "0.1.2",
-    "rollup-plugin-delete": "2.0.0",
+    "rollup-plugin-delete": "2.1.0",
     "rollup-plugin-shell": "1.0.9",
-    "terser": "5.31.3",
-    "tslib": "2.6.3",
-    "typescript": "~5.5.4",
-    "zx": "8.1.4"
+    "terser": "5.36.0",
+    "tslib": "2.8.1",
+    "typescript": "~5.6.3",
+    "zx": "8.2.1"
   },
   "devDependencies": {
     "lite-server": "2.6.1"
+  },
+  "scripts": {
+    "bp": "./src/index.mjs",
+    "start": "cd docs && lite-server",
+    "deploy": "firebase deploy --only hosting:blueprintui-cli"
   }
-}
+}

package/src/custom-elements-manifest.config.mjs

@@ -33,7 +33,8 @@ export default {
     orderElements(),
     metadata({ tags: ['docs', 'spec', 'status'] }),
     customElementVsCodePlugin({
-      outdir: config.outDir
+      outdir: config.outDir,
+      hideLogs: true
     })
   ],
 };

package/src/index.mjs

@@ -10,6 +10,8 @@ import { cp, lstat, readdir } from 'fs/promises';
 import { readFileSync, writeFileSync } from 'fs';
 import { join, resolve }  from 'path';
 import { getUserConfig } from './utils.mjs';
+import { publint } from 'publint';
+import { formatMessage } from 'publint/utils';
 
 const deepReadDir = async (dirPath) => await Promise.all(
   (await readdir(dirPath)).map(async (entity) => {
@@ -35,7 +37,7 @@ program
   .action(async (options, command) => {
     process.env.BLUEPRINTUI_BUILD = !options.watch ? 'production' : 'development';
     process.env.BLUEPRINTUI_CONFIG = command.args[0] ? path.resolve(command.args[0]) : path.resolve('./blueprint.config.js');
-    buildRollup(options);
+    await buildRollup(options);
   });
 
 program
@@ -85,7 +87,7 @@ program
 program.parse();
 
 function buildRollup(args) {
-  loadConfigFile(path.resolve(__dirname, './rollup.config.mjs'), {}).then(
+  return loadConfigFile(path.resolve(__dirname, './rollup.config.mjs'), {}).then(
     async ({ options, warnings }) => {
       if (warnings.count) {
         console.log(`${warnings.count} warnings`);
@@ -106,8 +108,21 @@ function buildRollup(args) {
         }
         if (bundle) {
           const end = Date.now();
-          console.log(status.success, `Completed in ${(end - start) / 1000} seconds 🎉`);
           await bundle.close();
+
+          const { messages } = await spinner('Verifying Package...', async () => await publint({
+            strict: true,
+            pkgDir: resolve(cwd())
+          }));
+
+          if (messages.length) {
+            const pkg = JSON.parse(readFileSync(resolve(cwd(),'./package.json'), 'utf8'));
+            for (const message of messages) {
+              console.log(formatMessage(message, pkg))
+            }
+          } else {
+            console.log(status.success, `Success in ${(end - start) / 1000} seconds 🎉`);
+          }
         }
         process.exit(buildFailed ? 1 : 0);
       }

package/src/project/blueprint.config.js

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

package/src/project/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Basic HTML Page</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "lit": "./node_modules/lit/index.js",
+          "lit/": "./node_modules/lit/",
+          "@lit/reactive-element": "./node_modules/@lit/reactive-element/reactive-element.js",
+          "@lit/reactive-element/": "./node_modules/@lit/reactive-element/",
+          "lit-html": "./node_modules/lit-html/lit-html.js",
+          "lit-html/": "./node_modules/lit-html/",
+          "lit-element/": "./node_modules/lit-element/",
+          "tslib": "./node_modules/tslib/tslib.es6.js"
+        }
+      }
+    </script>
+    <style>
+      html { box-sizing: border-box; }
+      *, *:before, *:after { box-sizing: inherit; }
+
+      body {
+        display: flex;
+        flex-direction: column;
+        font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+        margin: 0;
+        padding: 24px;
+        gap: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <ui-alert status="neutral" closable>neutral</ui-alert>
+
+    <ui-alert status="success" closable>success</ui-alert>
+
+    <ui-alert status="warning" closable>warning</ui-alert>
+
+    <ui-alert status="danger" closable>danger</ui-alert>
+
+    <script type="module">
+      import './dist/include/alert.js';
+    </script>
+  </body>
+</html>

package/src/project/package.json

@@ -1,43 +1,59 @@
 {
   "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",
+  "description": "test-project web component library",
   "scripts": {
-    "start": "bp build --watch",
-    "build": "bp build"
+    "start": "NODE_NO_WARNINGS=1 serve & npm run build:watch",
+    "build": "bp build",
+    "build:watch": "bp build --watch"
   },
   "files": [
-    "*"
+    "package.json",
+    "README.md",
+    "LICENSE.md",
+    "dist/**/*"
   ],
   "sideEffects": [
     "./include/*.js"
   ],
   "exports": {
-    "./custom-elements.json": "./custom-elements.json",
-    ".": "./index.js",
-    "./include/*": "./include/*",
-    "./*": "./*/index.js"
+    "./package.json": "./package.json",
+    "./custom-elements.json": "./dist/custom-elements.json",
+    "./include/*.js": {
+      "types": "./dist/include/*.d.ts",
+      "default": "./dist/include/*.js"
+    },
+    "./*": {
+      "types": "./dist/*/index.d.ts",
+      "default": "./dist/*/index.js"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
   "author": {
     "name": ""
   },
   "repository": {
     "type": "git",
-    "url": "https://cli.blueprintui.dev"
+    "url": "git+https://github.com/blueprintui/cli.git"
   },
   "dependencies": {
-    "lit": "^3.1.4"
+    "lit": "^3.2.0"
   },
   "devDependencies": {
-    "@blueprintui/cli": "^0.7.1",
-    "typescript": "~5.4.5"
+    "@lit/reactive-element": "^2.0.4",
+    "@blueprintui/cli": "^0.10.0",
+    "lit-html": "^3.2.0",
+    "lit-element": "^4.1.0",
+    "serve": "14.2.3",
+    "tslib": "~2.7.0",
+    "typescript": "~5.6.2"
   }
 }

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

@@ -1,21 +1,21 @@
 :host {
   --background: #bed5f2;
   --color: #2d2d2d;
-  --font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
   --gap: 12px;
   --padding: 12px;
+  font-family: inherit;
   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;
+  position: relative;
 }
 
 [part='icon'] {
@@ -49,9 +49,12 @@ button {
   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.05);
+}
+
+button:active {
   background: hsla(0, 0%, 0%, 0.1);
-}
+}

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

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators/property.js';
-import styles from './element.css' assert { type: 'css' };
+import styles from './element.css' with { type: 'css' };
 
 /**
  * @element ui-alert

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

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

package/src/project/tsconfig.json

@@ -10,7 +10,6 @@
     "resolveJsonModule": true,
     "outDir": "./dist",
     "declaration": true,
-    "types": ["jasmine"],
     "alwaysStrict": true,
     "noImplicitAny": true,
     "noImplicitReturns": true,
@@ -24,10 +23,7 @@
     "inlineSourceMap": false,
     "importHelpers": true,
     "baseUrl": "./",
-    "rootDir": "./src",
-    "paths": {
-      "library/*": ["./src/*"]
-    }
+    "rootDir": "./src"
   },
   "exclude": ["dist", "node_modules"]
 }

package/src/rollup.config.mjs

@@ -4,7 +4,6 @@ import replace from '@rollup/plugin-replace';
 import virtual from '@rollup/plugin-virtual';
 import copy from 'rollup-plugin-copy';
 import del from 'rollup-plugin-delete';
-import execute from 'rollup-plugin-shell';
 import { fs, glob, path } from 'zx';
 import { idiomaticDecoratorsTransformer, constructorCleanupTransformer } from '@lit/ts-transformers';
 import { fileURLToPath } from 'url';
@@ -53,13 +52,11 @@ export default [
       createEntrypoints(),
       nodeResolve({ exportConditions: [project.prod ? 'production' : 'development'] }),
       compileTypescript(),
-      typeCheck(),
       project.prod ? [] : writeCache(project),
       project.prod ? minifyHTML() : [],
       project.prod ? minifyJavaScript() : [],
       project.prod ? inlinePackageVersion() : [],
       project.prod ? postClean(): [],
-      project.prod ? packageCheck() : [],
       project.prod ? customElementsAnalyzer(project) : []
     ],
   },
@@ -90,10 +87,6 @@ function compileTypescript() {
   });
 }
 
-function typeCheck() {
-  return execute({ commands: [`tsc --noEmit --project ${project.tsconfig}`], hook: 'buildEnd' });
-}
-
 function inlinePackageVersion() {
   return replace({ preventAssignment: false, values: { PACKAGE_VERSION: project.packageJSON.version } });
 }
@@ -101,7 +94,3 @@ function inlinePackageVersion() {
 function postClean() {
   return del({ targets: [`${project.outDir}/**/.tsbuildinfo`, `${project.outDir}/**/_virtual`], hook: 'writeBundle' });
 }
-
-function packageCheck() {
-  return execute({ commands: [`package-check --cwd ${project.outDir}`], sync: true, hook: 'writeBundle' });
-}

package/src/utils.mjs

@@ -1,7 +1,12 @@
 import { cli } from '@custom-elements-manifest/analyzer/cli.js';
 
 export async function runCustomElementsAnalyzer(customElementsManifestConfig) {
-  return await cli({ argv: ['analyze', '--quiet', '--config', customElementsManifestConfig] });
+  // disable noisy log output from custom-elements-manifest
+  const log = console.log;
+  console.log = () => {};
+  const result = await cli({ argv: ['analyze', '--quiet', '--config', customElementsManifestConfig] });
+  console.log = log;
+  return result;
 }
 
 export async function getUserConfig() {