@blueprintui/cli 0.12.0 → 0.13.0

package/src/.rollup.cache/@blueprintui/virtual/Users/coryrylan/Repos/blueprint/blueprint/main/projects/virtual/dist/virtual-list/element.js

@@ -0,0 +1,253 @@
+const styles = /* css */ `
+  :host {
+    --height: auto;
+    --width: 100%;
+    --scrollbar-width: var(--bp-scrollbar-width, auto);
+    --scrollbar-color: var(--bp-scrollbar-color, auto);
+    display: block;
+    height: var(--height);
+    min-height: var(--height);
+    width: var(--width);
+    contain: strict;
+  }
+
+  .viewport {
+    height: var(--height);
+    position: relative;
+    overflow-y: scroll;
+    scrollbar-width: var(--scrollbar-width);
+    scrollbar-color: var(--scrollbar-color);
+  }
+
+  .spacer {
+    width: 100%;
+    pointer-events: none;
+  }
+
+  .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    will-change: transform;
+  }
+`;
+const styleSheet = new CSSStyleSheet();
+styleSheet.replaceSync(styles);
+/**
+ * @element bp-virtual-list
+ * @since 1.0.0
+ * @slot - Content area for rendered items
+ * @cssprop --height - Container height (default: auto)
+ * @cssprop --width - Container width (default: 100%)
+ * @cssprop --scrollbar-width - Scrollbar width (default: auto)
+ * @cssprop --scrollbar-color - Scrollbar color (default: auto)
+ * @event bp-virtual-change - Fired when visible range changes
+ * @event bp-virtual-scroll - Fired on scroll with position info
+ */
+export class BpVirtualList extends HTMLElement {
+    static observedAttributes = ['item-height', 'item-count', 'item-buffer', 'height'];
+    #internals;
+    #shadow;
+    #viewport;
+    #spacer;
+    #content;
+    #rafId = null;
+    #lastScrollTop = 0;
+    #lastStart = -1;
+    #lastEnd = -1;
+    #itemHeight = 44;
+    #itemCount = 0;
+    #itemBuffer = 1;
+    #height = 'auto';
+    /** Fixed height per item in pixels (required for calculations) */
+    get itemHeight() {
+        return this.#itemHeight;
+    }
+    set itemHeight(value) {
+        const num = Number(value);
+        if (!isNaN(num) && num >= 0) {
+            this.#itemHeight = num;
+            this.#updateLayout();
+        }
+    }
+    /** Total number of items in the dataset */
+    get itemCount() {
+        return this.#itemCount;
+    }
+    set itemCount(value) {
+        const num = Number(value);
+        if (!isNaN(num) && num >= 0) {
+            this.#itemCount = num;
+            this.#updateLayout();
+        }
+    }
+    /** Buffer items rendered outside visible viewport (default: 3) */
+    get itemBuffer() {
+        return this.#itemBuffer;
+    }
+    set itemBuffer(value) {
+        const num = Number(value);
+        if (!isNaN(num) && num >= 0) {
+            this.#itemBuffer = num;
+            this.#updateLayout();
+        }
+    }
+    /** Container height as CSS value */
+    get height() {
+        return this.#height;
+    }
+    set height(value) {
+        this.#height = value;
+        this.style.setProperty('--height', value);
+        // this.#updateLayout();
+    }
+    /** Current visible range (readonly) */
+    get visibleRange() {
+        return this.#calculateRange();
+    }
+    /** Promise that resolves when the component is stable (for test compatibility) */
+    get updateComplete() {
+        return Promise.resolve(true);
+    }
+    constructor() {
+        super();
+        this.#shadow = this.attachShadow({ mode: 'open' });
+        this.#shadow.adoptedStyleSheets = [styleSheet];
+        this.#internals = this.attachInternals();
+        this.#internals.role = 'presentation';
+        this.#viewport = document.createElement('div');
+        this.#viewport.className = 'viewport';
+        this.#viewport.role = 'presentation';
+        this.#spacer = document.createElement('div');
+        this.#spacer.className = 'spacer';
+        this.#spacer.role = 'presentation';
+        this.#content = document.createElement('div');
+        this.#content.className = 'content';
+        this.#content.role = 'presentation';
+        this.#content.appendChild(document.createElement('slot'));
+        this.#viewport.appendChild(this.#spacer);
+        this.#viewport.appendChild(this.#content);
+        this.#shadow.appendChild(this.#viewport);
+    }
+    connectedCallback() {
+        this.#viewport.addEventListener('scroll', this.#handleScroll, { passive: true });
+        this.#updateLayout();
+        // Use microtask to emit initial range after consumer has chance to set up listeners
+        queueMicrotask(() => {
+            this.#emitRangeChange(true);
+        });
+        this.addEventListener('command', (e) => {
+            const { source, command } = e;
+            console.log(e);
+            if (command === '--scroll-to-index') {
+                this.scrollToIndex(Number(source.value));
+            }
+        });
+    }
+    disconnectedCallback() {
+        this.#viewport.removeEventListener('scroll', this.#handleScroll);
+        if (this.#rafId !== null) {
+            cancelAnimationFrame(this.#rafId);
+            this.#rafId = null;
+        }
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        switch (name) {
+            case 'item-height':
+                this.itemHeight = Number(newValue);
+                break;
+            case 'item-count':
+                this.itemCount = Number(newValue);
+                break;
+            case 'item-buffer':
+                this.itemBuffer = Number(newValue);
+                break;
+            case 'height':
+                this.height = newValue;
+                break;
+        }
+    }
+    /** Scroll to a specific item index */
+    scrollToIndex(index, behavior = 'auto') {
+        const clampedIndex = Math.max(0, Math.min(index, this.#itemCount - 1));
+        const targetScrollTop = clampedIndex * this.#itemHeight;
+        this.#viewport.scrollTo({
+            top: targetScrollTop,
+            behavior
+        });
+    }
+    /** Force recalculation and re-emit of visible range */
+    refresh() {
+        this.#lastStart = -1;
+        this.#lastEnd = -1;
+        this.#updateLayout();
+        this.#emitRangeChange(true);
+    }
+    #handleScroll = () => {
+        if (this.#rafId !== null) {
+            return;
+        }
+        this.#rafId = requestAnimationFrame(() => {
+            this.#rafId = null;
+            this.#onScrollFrame();
+        });
+    };
+    #onScrollFrame() {
+        const scrollTop = this.#viewport.scrollTop;
+        const direction = scrollTop > this.#lastScrollTop ? 'down' : scrollTop < this.#lastScrollTop ? 'up' : 'idle';
+        this.#lastScrollTop = scrollTop;
+        // Emit scroll event
+        this.dispatchEvent(new CustomEvent('bp-virtual-scroll', {
+            bubbles: true,
+            detail: {
+                scrollTop,
+                direction
+            }
+        }));
+        // Update content position and emit range change if needed
+        this.#updateContentPosition();
+        this.#emitRangeChange();
+    }
+    #calculateRange() {
+        if (this.#itemCount === 0 || this.#itemHeight === 0) {
+            return { start: 0, end: 0 };
+        }
+        const scrollTop = this.#viewport.scrollTop;
+        const viewportHeight = this.#viewport.clientHeight;
+        const startIndex = Math.floor(scrollTop / this.#itemHeight);
+        const visibleCount = Math.ceil(viewportHeight / this.#itemHeight);
+        const start = Math.max(0, startIndex - this.#itemBuffer);
+        const end = Math.min(this.#itemCount, startIndex + visibleCount + this.#itemBuffer);
+        return { start, end };
+    }
+    #updateLayout() {
+        // Update spacer height to create scroll space
+        const totalHeight = this.#itemCount * this.#itemHeight;
+        this.#spacer.style.height = `${totalHeight}px`;
+        this.#updateContentPosition();
+    }
+    #updateContentPosition() {
+        const { start } = this.#calculateRange();
+        const translateY = start * this.#itemHeight;
+        this.#content.style.transform = `translateY(${translateY}px)`;
+    }
+    #emitRangeChange(force = false) {
+        const { start, end } = this.#calculateRange();
+        // Only emit if range actually changed (unless forced)
+        if (!force && start === this.#lastStart && end === this.#lastEnd) {
+            return;
+        }
+        this.#lastStart = start;
+        this.#lastEnd = end;
+        this.dispatchEvent(new CustomEvent('bp-virtual-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                start,
+                end,
+                count: end - start
+            }
+        }));
+    }
+}

package/src/.rollup.cache/@blueprintui/virtual/Users/coryrylan/Repos/blueprint/blueprint/main/projects/virtual/dist/virtual-list/index.d.ts

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

package/src/.rollup.cache/@blueprintui/virtual/Users/coryrylan/Repos/blueprint/blueprint/main/projects/virtual/dist/virtual-list/index.js

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

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

@@ -1,19 +1,10 @@
 import { resolve } from 'path';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
+import { getUserConfig } from './utils.mjs';
 
 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',
-  ...userConfig?.default?.library
-};
+const config = await getUserConfig();
+const baseSrc = resolve(cwd, config.baseDir);
 
 export default {
   globs: [resolve(cwd, config.baseDir)],
@@ -53,8 +44,9 @@ function baseDir() {
   return {
     name: 'base-dir',
     packageLinkPhase({ customElementsManifest }) {
+      const base = baseSrc.endsWith('/') ? baseSrc : `${baseSrc}/`;
       customElementsManifest.modules = JSON.parse(
-        JSON.stringify(customElementsManifest.modules).replaceAll(`"/${baseSrc}`, '"').replaceAll(`"${baseSrc}`, '"')
+        JSON.stringify(customElementsManifest.modules).replaceAll(base, '').replaceAll(base.slice(1), '')
       );
     },
   };

package/src/index.mjs

@@ -5,20 +5,13 @@ import { path, spinner } from 'zx';
 import { cwd } from 'process';
 import { rolldown, watch } from 'rolldown';
 import { program } from 'commander';
-import { cp, lstat, readdir } from 'fs/promises';
+import { cp, readdir } from 'fs/promises';
 import { readFileSync, writeFileSync } from 'fs';
-import { join, resolve }  from 'path';
+import { 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) => {
-    const path = join(dirPath, entity)
-    return (await lstat(path)).isDirectory() ? await deepReadDir(path) : path
-  }),
-);
-
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 const status = {
@@ -30,12 +23,12 @@ const status = {
 
 program
   .command('build')
-  .option('--config', 'path for custom config')
+  .option('--config <path>', 'path for custom config')
   .option('--watch')
   .description('build library')
   .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');
+    process.env.BLUEPRINTUI_BUILD = options.watch ? 'development' : 'production';
+    process.env.BLUEPRINTUI_CONFIG = options.config ? path.resolve(options.config) : path.resolve('./blueprint.config.js');
     await buildRolldown(options);
   });
 
@@ -47,31 +40,34 @@ program
     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();
+    const entries = await readdir(outPath, { recursive: true, withFileTypes: true });
+    const files = entries.filter(e => e.isFile()).map(e => resolve(e.parentPath, e.name));
+    for (const file of files) {
+      const value = readFileSync(file, 'utf8');
       writeFileSync(file, value.replaceAll('{{LIBRARY}}', name));
-    });
+    }
   });
 
 program
   .command('api')
+  .option('--config <path>', 'path for custom config')
   .option('--update')
   .option('--test')
   .description('verify and update custom elements manifest API lockfile')
   .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');
+    process.env.BLUEPRINTUI_BUILD = 'production';
+    process.env.BLUEPRINTUI_CONFIG = options.config ? path.resolve(options.config) : path.resolve('./blueprint.config.js');
 
     const config = await getUserConfig();
     const lockfilePath = config.customElementsManifestLockFile ? path.resolve(config.customElementsManifestLockFile) : path.resolve('./custom-elements.lock.json');
     const manifestPath = path.resolve(config.outDir, './custom-elements.json');
-    const lockfile = readFileSync(lockfilePath, 'utf8').toString();
-    const manifest = readFileSync(manifestPath, 'utf8').toString();
+    const lockfile = readFileSync(lockfilePath, 'utf8');
+    const manifest = readFileSync(manifestPath, 'utf8');
 
-    if (options.test) {      
+    if (options.test) {
       if (lockfile !== manifest) {
         console.error(status.error, '🚫 new custom element API changes detected, run "bp api --update" to update the custom-elements.lock.json');
+        process.exit(1);
       } else {
         console.log(status.success, `✅ No custom element API changes detected`);
       }
@@ -125,33 +121,24 @@ async function buildRolldown(args) {
   if (args.watch) {
     const watcher = watch(config);
 
-    try {
-      watcher.on('event', (event) => {
-        switch (event.code) {
-          case 'START':
-            console.log(status.info, 'Building...');
-            break;
-          case 'ERROR':
-            console.error(status.error, event.error);
-            if (event.result) {
-              event.result.close();
-            }
-            break;
-          case 'WARN':
-            console.error(status.warn, event.error);
-            break;
-          case 'BUNDLE_END':
-            console.log(status.success, `Complete in ${event.duration / 1000} seconds`);
+    watcher.on('event', (event) => {
+      switch (event.code) {
+        case 'START':
+          console.log(status.info, 'Building...');
+          break;
+        case 'ERROR':
+          console.error(status.error, event.error);
+          if (event.result) {
             event.result.close();
-            break;
-        }
-      });
-    } catch (error) {
-      console.error(error);
-    }
-    watcher.on('event', ({ result }) => {
-      if (result) {
-        result.close();
+          }
+          break;
+        case 'WARN':
+          console.error(status.warn, event.error);
+          break;
+        case 'BUNDLE_END':
+          console.log(status.success, `Complete in ${event.duration / 1000} seconds`);
+          event.result.close();
+          break;
       }
     });
   }

package/src/plugin-minify-css.mjs

@@ -25,8 +25,9 @@ export const css = (options = {}) => {
           }).code.toString()
         : code;
 
+      const escaped = output.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
       return {
-        code: `const stylesheet = new CSSStyleSheet();stylesheet.replaceSync(\`${output}\`);export default stylesheet;`,
+        code: `const stylesheet = new CSSStyleSheet();stylesheet.replaceSync(\`${escaped}\`);export default stylesheet;`,
         moduleType: 'js',
       };
     },

package/src/utils.mjs

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