@webreflection/elements 0.0.1 → 0.1.1

package/README.md

@@ -4,15 +4,16 @@ HTML & SVG Custom Elements, glueing [qsa-observer](https://github.com/WebReflect
 
 ```html
 <script type="module">
+
   import { elements, HTML, SVG } from 'https://esm.run/@webreflection/elements';
 
   // same Custom Elements API
-  elements.whenDefined('header').then(() => {
-    console.log('header defined');
+  elements.whenDefined('my-h1').then(Class => {
+    console.log(Class.name, 'defined');
   });
 
   // native extends out of the box
-  elements.define('header', class extends HTML.H1 {
+  elements.define('my-h1', class MyH1 extends HTML.H1 {
     // anything that works with classes works here
     #private;
 
@@ -30,12 +31,8 @@ HTML & SVG Custom Elements, glueing [qsa-observer](https://github.com/WebReflect
     }
   });
 
-  // automatic upgrades per element
-  elements.whenDefined('header').then(() => {
-    console.log('header defined');
-  });
 </script>
-<h1 is="header"></h1>
+<h1 is="my-h1"></h1>
 ```
 
 Enjoy 👋

package/min.js

@@ -0,0 +1,3 @@
+/*! (c) Andrea Giammarchi - ISC */
+const e=!0,t=!1,o="querySelectorAll",r="querySelectorAll",{document:n,Element:s,MutationObserver:l,Set:a,WeakMap:c}=self,d=e=>r in e,{filter:i}=[];const{setPrototypeOf:u}=Object;const h="attributeChangedCallback",f="connectedCallback",w="disconnectedCallback";var p=(e,{MutationObserver:t,Element:o})=>{const r=new WeakSet,n=(e,t,o,s,l)=>{for(const a of e)(l||"querySelectorAll"in a)&&(s?t.has(a)||(t.add(a),o.delete(a),r.has(a)&&a[f]?.()):o.has(a)||(o.add(a),t.delete(a),r.has(a)&&a[w]?.()),l||n(a.querySelectorAll("*"),t,o,s,!0))},s=e=>{const t=new Set,o=new Set;for(const{addedNodes:r,removedNodes:s}of e)n(s,t,o,!1,!1),n(r,t,o,!0,!1)},l=t||globalThis.MutationObserver,a=new l(s),c=new l(e=>{for(const{target:t,attributeName:o,oldValue:r}of e)t[h](o,r,t.getAttribute(o))}),d=e=>{a.observe(e,{subtree:!0,childList:!0})};d(e);const i=o||globalThis.Element;if(i){const e=i.prototype.attachShadow;i.prototype.attachShadow=function(t){const o=e.call(this,t);return d(o),o}}return e=>{const{[h]:t,[f]:o,[w]:n}=e;if(t&&c.observe(e,{attributes:!0,attributeOldValue:!0,attributeFilter:e.constructor.observedAttributes.map(o=>{const r=e.getAttribute(o);return null!=r&&t.call(e,o,null,r),o})}),o||n){const t=a.takeRecords();t.length&&s(t),r.add(e),Promise.resolve().then(()=>{e.isConnected&&o?.call(e)})}return e}};
+/*! (c) Andrea Giammarchi - ISC */let b={HTML:"http://www.w3.org/1999/xhtml",SVG:"http://www.w3.org/2000/svg"};const g=[],m=new Map,v=new Map,{parse:S}=(u=>{const h=new c,f=(e,t)=>{let o;if(t)for(let r,n=(e=>e.matches||e.webkitMatchesSelector||e.msMatchesSelector)(e),s=0,{length:l}=p;s<l;s++)n.call(e,r=p[s])&&(h.has(e)||h.set(e,new a),o=h.get(e),o.has(r)||(o.add(r),u.handle(e,t,r)));else h.has(e)&&(o=h.get(e),h.delete(e),o.forEach(o=>{u.handle(e,t,o)}))},w=(e,t=!0)=>{for(let o=0,{length:r}=e;o<r;o++)f(e[o],t)},{query:p}=u,b=u.root||n,g=((r,n=document,s=MutationObserver,l=["*"])=>{const a=(t,n,s,l,c,d)=>{for(const i of t)(d||o in i)&&(c?s.has(i)||(s.add(i),l.delete(i),r(i,c)):l.has(i)||(l.add(i),s.delete(i),r(i,c)),d||a(i[o](n),n,s,l,c,e))},c=new s(o=>{if(l.length){const r=l.join(","),n=new Set,s=new Set;for(const{addedNodes:l,removedNodes:c}of o)a(c,r,n,s,t,t),a(l,r,n,s,e,t)}}),{observe:d}=c;return(c.observe=t=>d.call(c,t,{subtree:e,childList:e}))(n),c})(f,b,l,p),{attachShadow:m}=s.prototype;return m&&(s.prototype.attachShadow=function(e){const t=m.call(this,e);return g.observe(t),t}),p.length&&w(b[r](p)),{drop:e=>{for(let t=0,{length:o}=e;t<o;t++)h.delete(e[t])},flush:()=>{const e=g.takeRecords();for(let t=0,{length:o}=e;t<o;t++)w(i.call(e[t].removedNodes,d),!1),w(i.call(e[t].addedNodes,d),!0)},observer:g,parse:w}})({query:g,handle(e,t,o){if(t){const t=m.get((e=>{const t=e.indexOf('="');return e.slice(t+2,-2)})(o));e instanceof t||new t(e)}}}),y=e=>(v.has(e)||v.set(e,Promise.withResolvers()),v.get(e)),{HTML:M,SVG:A}=((e=b)=>{const t=e.document||document,o=p(t,e);return new Proxy(new Map,{get(r,n){let s=r.get(n);if(!s){const l=new Map,a=t.createElementNS.bind(t,e[n]||b[n]),c=(t,r)=>{let s=l.get(r);s||l.set(r,s=a(r).constructor);class c extends((e=>{function t(e){return u(e,new.target.prototype)}return t.prototype=e.prototype,t})(s)){static tag=r;constructor(t){const s=e[n]||b[n];if(t&&t.namespaceURI!==s){const{attributes:e,childNodes:o}=t;t=a(r);for(const{name:o,value:r}of e)t.setAttribute(o,r);t.replaceChildren(...o)}return o(super(t||a(r)))}}return t.set(r,c),c};r.set(n,s=new Proxy(new Map,{get(e,t){const o=t.toLowerCase();return e.get(o)||c(e,o)}}))}return s}})})(),N={define(e,t){if(m.has(e)||customElements.get(e))throw new DOMException(`Element ${e} already defined`);m.set(e,t),y(e).resolve(t);const o=`[is="${e}"]`;g.push(o),S(document.querySelectorAll(o))},get:e=>m.get(e),whenDefined:e=>y(e).promise};export{M as HTML,A as SVG,N as elements};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webreflection/elements",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "HTML & SVG Custom Elements",
   "main": "index.js",
   "scripts": {
@@ -8,12 +8,13 @@
   },
   "exports": {
     ".": "./index.js",
+    "./native": "./native.js",
     "./package.json": "./package.json",
     "./min": "./min.js"
   },
   "files": [
-    "elements.js",
     "index.js",
+    "min.js",
     "README.md",
     "LICENSE"
   ],