diff --git a/README.md b/README.md index 66f48e3..ddfdc2d 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ It is designed to give teams the kind of component coverage, polish, accessibili - **Accessible by default** with keyboard support, ARIA roles, focus management, and screen reader announcements - **Themeable via design tokens** and CSS custom properties - **Tree-shakeable ESM exports** with per-component imports +- **CDN-ready root bundles** for ES modules, UMD, and IIFE delivery - **Built-in dark mode, i18n, and event-driven APIs** ## Component Coverage @@ -62,6 +63,23 @@ import '@bquery/ui'; ``` +### Use from a CDN + +```html + + + + + + + + +``` + +The UMD and IIFE bundles expose the library on `window.BQueryUI`. + ## Tree-Shakeable Usage Import only the component entry points you need for the smallest bundle: diff --git a/docs/guide/installation.md b/docs/guide/installation.md index 3cf47f8..cd219df 100644 --- a/docs/guide/installation.md +++ b/docs/guide/installation.md @@ -22,14 +22,29 @@ bun add @bquery/ui ::: -## CDN / ESM +## CDN / ESM / UMD / IIFE -```html +::: code-group + +```html [ESM] ``` +```html [UMD] + +``` + +```html [IIFE] + +``` + +::: + +The UMD and IIFE bundles register all `bq-*` elements on load and expose the library on `window.BQueryUI`. +Pinning the version in CDN URLs keeps production integrations reproducible across future releases. + ## TypeScript The package ships with full TypeScript declarations. No `@types` package needed. diff --git a/package.json b/package.json index d3ef944..1c19256 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,13 @@ { "name": "@bquery/ui", - "version": "1.0.0", + "version": "1.1.0", "description": "Production-grade web component library for the bQuery project", "type": "module", "main": "./dist/index.cjs", "module": "./dist/index.js", "types": "./dist-types/index.d.ts", + "unpkg": "./dist/index.umd.js", + "jsdelivr": "./dist/index.umd.js", "exports": { ".": { "import": "./dist/index.js", @@ -55,8 +57,9 @@ ], "scripts": { "dev": "vite", - "build": "npm run build:lib && npm run build:types", + "build": "npm run build:lib && npm run build:cdn && npm run build:types", "build:lib": "vite build", + "build:cdn": "vite build --config vite.cdn.config.ts", "build:types": "tsc --emitDeclarationOnly --outDir dist-types", "build:docs": "vitepress build docs", "dev:docs": "vitepress dev docs", diff --git a/vite.cdn.config.ts b/vite.cdn.config.ts new file mode 100644 index 0000000..8c6b265 --- /dev/null +++ b/vite.cdn.config.ts @@ -0,0 +1,27 @@ +import { resolve } from 'path'; +import { defineConfig } from 'vite'; + +export default defineConfig({ + build: { + emptyOutDir: false, + lib: { + entry: resolve(__dirname, 'src/index.ts'), + name: 'BQueryUI', + formats: ['umd', 'iife'], + fileName: (format) => `index.${format}.js`, + }, + rollupOptions: { + output: { + exports: 'named', + }, + }, + sourcemap: true, + minify: true, + target: 'es2020', + }, + resolve: { + alias: { + '@': resolve(__dirname, 'src'), + }, + }, +});