@primitiv-ui/web 0.1.42 → 0.1.43

package/README.md

@@ -12,10 +12,11 @@ React, Vue, Angular or any other framework.
 
 ## Use it
 
-**No build step** — one script tag defines every element:
+**No build step** — one script tag per component defines that component's
+elements and nothing else:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/primitiv-web.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/cdn/tabs.js"></script>
 
 <primitiv-tabs value="overview">
   <primitiv-tabs-list label="Account sections">
@@ -30,10 +31,15 @@ React, Vue, Angular or any other framework.
 **With a bundler** — import a `define` entry once, anywhere:
 
 ```ts
-import "@primitiv-ui/web/define";       // every element
-import "@primitiv-ui/web/define/tabs";  // or one component's
+import "@primitiv-ui/web/define/tabs";  // one component's elements
+import "@primitiv-ui/web/define";       // or every element
 ```
 
+Each `dist/cdn/<component>.js` imports the code components share from
+`dist/cdn/chunks/` by a relative URL, so a page that loads two components
+downloads it once. `dist/primitiv-web.js` is the alternative: every element in
+one file. Per-component files ship from 0.1.43.
+
 The main entry (`@primitiv-ui/web`, `/tabs`) exports the classes and
 `defineTabs(registry?)` with **no side effects**.
 

package/dist/bundle.d.ts

@@ -6,7 +6,8 @@
  * <script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/primitiv-web.js"></script>
  * ```
  *
- * Loading it defines every element and exports every class.
+ * Loading it defines every element and exports every class. To load one
+ * component only, use its `dist/cdn/<component>.js` (scripts/build-cdn.mjs).
  */
 export * from "./index.js";
 import "./define/index.js";

package/dist/bundle.js

@@ -6,7 +6,8 @@
  * <script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/primitiv-web.js"></script>
  * ```
  *
- * Loading it defines every element and exports every class.
+ * Loading it defines every element and exports every class. To load one
+ * component only, use its `dist/cdn/<component>.js` (scripts/build-cdn.mjs).
  */
 export * from "./index.js";
 import "./define/index.js";

package/dist/cdn/tabs.js

@@ -0,0 +1 @@
+function b(i,t,e){return`${i}-${t}-${e}`}function O({orientation:i,dir:t,homeEnd:e=!1,activate:r=!1}){let o={};if(i==="horizontal"||i==="both"){let l=t==="rtl"?"ArrowLeft":"ArrowRight",d=t==="rtl"?"ArrowRight":"ArrowLeft";o[l]="next",o[d]="prev"}return(i==="vertical"||i==="both")&&(o.ArrowDown="next",o.ArrowUp="prev"),e&&(o.Home="first",o.End="last"),r&&(o.Enter="activate",o[" "]="activate"),o}function K({action:i,navigable:t,currentKey:e}){let r=t.length;if(r===0)return null;switch(i){case"activate":return{target:e};case"first":return{target:t[0]};case"last":return{target:t[r-1]};case void 0:return null;case"next":case"prev":{let o=t.indexOf(e);if(o===-1)return null;let l=i==="next"?1:r-1;return{target:t[(o+l)%r]}}}}function h(i){return i.active??i.values[0]}function g(i,t){return i.disabled.has(t)||i.active===t?null:t}function T(i,t,e){let r=O({orientation:i.orientation,dir:i.dir,homeEnd:!0,activate:!0})[e],o=K({action:r,navigable:i.values,currentKey:t});if(!o)return null;let l=o.target,d=i.activationMode==="automatic"||r==="activate";return{focus:l,activate:d?g(i,l):null}}var p=class{#o;#i;#t=new Map;#e=null;constructor(t,e){this.#o=t,this.#i=e}registerTrigger(t,e,r={}){this.#t.set(e,{value:t,disabled:r.disabled??!1})}setTriggers(t){this.#t.clear();for(let{value:e,element:r,disabled:o}of t)this.registerTrigger(e,r,{disabled:o})}unregisterTrigger(t){this.#t.delete(t)}connect(){if(this.#e)return;this.#e=new AbortController;let{signal:t}=this.#e;this.#o.addEventListener("click",e=>this.#l(e),{signal:t}),this.#o.addEventListener("keydown",e=>this.#s(e),{signal:t})}disconnect(){this.#e?.abort(),this.#e=null}#r(){return[...this.#t].sort(([t],[e])=>t.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}#a(){let t=new Set;for(let e of this.#t.values())e.disabled&&t.add(e.value);return t}#l(t){let e=this.#n(t.target);if(!e)return;let{active:r}=this.#i.state(),o=g({disabled:this.#a(),active:r},e.value);if(o!==null){let l=this.#r().map(([,d])=>d.value);this.#i.activate(o,l.indexOf(o))}}#s(t){let e=this.#n(t.target);if(!e)return;let{active:r,orientation:o,dir:l,activationMode:d}=this.#i.state(),v=this.#r(),a=v.map(([,c])=>c.value),n=T({values:a,disabled:this.#a(),active:r,orientation:o,dir:l,activationMode:d},e.value,t.key);n&&(t.preventDefault(),n.activate!==null&&this.#i.activate(n.activate,a.indexOf(n.activate)),v[a.indexOf(n.focus)][0].focus())}#n(t){for(let[e,r]of this.#t)if(e.contains(t))return r}};var f=globalThis.HTMLElement??class{},m="primitiv-tabs",H="primitiv-tabs-list",E="primitiv-tabs-trigger",C="primitiv-tabs-content",S=0,L=new WeakSet;function I(i){let t=i.getAttribute("value");return i.childElementCount===1&&t!==null?{tab:i.firstElementChild,value:t}:(L.has(i)||(L.add(i),console.error(`<${E}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`,i)),null)}function s(i,t,e){i.getAttribute(t)!==e&&(e===null?i.removeAttribute(t):i.setAttribute(t,e))}var y=class extends f{#o;#i;#t=!1;#e=new p(this,this.#a());#r=new MutationObserver(()=>this.#c());connectedCallback(){this.#e.connect(),this.#r.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["value","disabled","label","orientation"]}),this.#c()}disconnectedCallback(){this.#e.disconnect(),this.#r.disconnect()}get value(){return this.getAttribute("value")??void 0}set value(t){this.setAttribute("value",t)}#a(){return{state:()=>({active:this.value,orientation:this.#s(),dir:this.matches(":dir(rtl)")?"rtl":"ltr",activationMode:this.#l()}),activate:(t,e)=>{let r=new CustomEvent("primitiv-tabs-change",{bubbles:!0,cancelable:!0,detail:{value:t,index:e}});this.dispatchEvent(r)&&(this.value=t)}}}#l(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#s(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}#n(t){return[...this.querySelectorAll(t)].filter(e=>e.closest(m)===this)}#d(){return this.id||(this.#o??=`${m}-${++S}`)}#c(){let t=this.#s(),e=this.value,r=this.#d();s(this,"data-orientation",t);for(let a of this.#n(H)){s(a,"role","tablist"),s(a,"aria-orientation",t),s(a,"data-orientation",t);let n=a.getAttribute("label");n!==null&&s(a,"aria-label",n)}let o=new Map;for(let a of this.#n(C)){let n=a.getAttribute("value");n!==null&&o.set(n,a)}let l=this.#n(E).flatMap(a=>{let n=I(a);return n?[{trigger:a,...n}]:[]}),d=h({values:l.map(a=>a.value),active:e});this.#e.setTriggers(l.map(({trigger:a,tab:n,value:c})=>({value:c,element:n,disabled:a.hasAttribute("disabled")})));for(let{trigger:a,tab:n,value:c}of l){let u=o.get(c),R=c===e,w=a.hasAttribute("disabled");n.id||(n.id=b(r,"trigger",c)),u&&!u.id&&(u.id=b(r,"panel",c)),s(n,"role","tab"),s(n,"aria-selected",String(R)),s(n,"aria-controls",u?u.id:null),s(n,"tabindex",c===d?"0":"-1"),s(n,"aria-disabled",w?"true":null),s(n,"data-disabled",w?"":null),s(n,"data-state",R?"active":"inactive"),s(n,"data-orientation",t),u&&s(u,"aria-labelledby",n.id)}for(let[a,n]of o){let c=a===e;s(n,"role","tabpanel"),s(n,"tabindex","0"),s(n,"hidden",c?null:""),s(n,"data-state",c?"active":"inactive"),s(n,"data-orientation",t)}let v=o.get(e);this.#t&&e!==this.#i&&v&&v.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#i=e,this.#t=!0}},x=class extends f{},A=class extends f{},M=class extends f{};function k(i=globalThis.customElements){if(!i)return;let t=[[m,y],[H,x],[E,A],[C,M]];for(let[e,r]of t)i.get(e)||i.define(e,r)}k();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/web",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "description": "Primitiv's headless components as standard custom elements: light DOM, no framework, no runtime dependencies. Works in plain HTML, server-rendered stacks, React, Vue, Angular and anything else that renders HTML.",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,7 +52,7 @@
     "directory": "packages/web"
   },
   "dependencies": {
-    "@primitiv-ui/core": "0.1.42"
+    "@primitiv-ui/core": "0.1.43"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
@@ -91,7 +91,7 @@
     }
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/finalize-dist.mjs dist && pnpm run build:bundle && pnpm run build:manifest",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/finalize-dist.mjs dist && pnpm run build:bundle && pnpm run build:cdn && pnpm run build:manifest",
     "qa": "pnpm qa:units",
     "qa:units": "vitest run --coverage",
     "qa:units:watch": "vitest --coverage",
@@ -100,6 +100,7 @@
     "build:bundle": "esbuild src/bundle.ts --bundle --format=esm --minify --target=es2022 --outfile=dist/primitiv-web.js",
     "size": "node scripts/check-size.mjs",
     "build:manifest": "cem analyze --globs \"src/**/elements.ts\" --outdir dist",
-    "manifest:check": "node scripts/check-manifest.mjs"
+    "manifest:check": "node scripts/check-manifest.mjs",
+    "build:cdn": "node scripts/build-cdn.mjs"
   }
 }