@webreflection/elements 0.1.6 → 0.1.7

package/README.md

@@ -18,6 +18,7 @@ HTML & SVG Custom Elements, glueing [qsa-observer](https://github.com/WebReflect
   });
 
   // native extends out of the box
+  // <h1 is="my-h1"></h1>
   elements.define('my-h1', class MyH1 extends HTML.H1 {
     // anything that works with classes works here
     #private;
@@ -32,18 +33,33 @@ HTML & SVG Custom Elements, glueing [qsa-observer](https://github.com/WebReflect
     // custom elements lifecycle (connected/disconnected/attributeChanged)
     connectedCallback() {
       console.log('connected', this.#private);
-      this.innerHTML = 'Hello World';
+      this.innerHTML = '@webreflection/elements 🥳';
     }
   });
 
+  // regular HTMLElement extends out of the box too
+  // <my-element></my-element>
+  elements.define('my-element', class MyElement extends HTML.Element {
+    connectedCallback() {
+      this.innerHTML = '<small>made with ❤️ by <a href="https://github.com/WebReflection/elements">@webreflection</a></small>';
+    }
+  });
+
+  // as it is for customElements, whenDefined works both
+  // before and after an element has been defined
+  elements.whenDefined('my-element').then(Class => {
+    console.log(Class.name, 'defined');
+  });
+
 </script>
 <h1 is="my-h1"></h1>
+<my-element></my-element>
 ```
 
 Enjoy 👋
 
 ### Native Support Included
 
-If your browser supports natively *HTML* custom elements builtin extends (i.e. Chrome/ium based), and *HTML* is all you want/need to extend 'cause *SVG* custom elements do not exist natively on the Web, you can use [@webreflection/elements/native](./native.js) export instead, which offers the **exact same API** without any dependency, hence it's lightweight, easier to reason about, and natively wonderful.
+If your browser supports natively *HTML* custom elements builtin extends (i.e. Chrome/ium or Firefox based), and *HTML* is all you want/need to extend 'cause *SVG* custom elements do not exist natively on the Web, you can use [@webreflection/elements/native](./native.js) export instead, which offers the **exact same API** without any dependency, hence it's lightweight, easier to reason about, and natively wonderful.
 
 If you don't know if that's supported and you would like to feature detect this ability, you can pick the [@webreflection/elements/auto](./auto.js) export insted.

package/dist/auto.js

@@ -1 +1 @@
-const e=new Map,t=document.createElement.bind(document),n=new Proxy(new Map,{get(n,s){let o=s.toLowerCase();return n.get(o)||((n,s)=>{let o=e.get(s);o||e.set(s,o=t(s).constructor);class l extends o{static tag=s}return n.set(s,l),l})(n,o)}}),s=new Proxy(new Map,{get(){throw new DOMException("SVG extends not natively supported")}}),o={define:(e,t)=>{const n=[e,t];return"element"!==t.tag&&n.push({extends:t.tag}),customElements.define(...n)},get:e=>customElements.get(e),whenDefined:e=>customElements.whenDefined(e)};var l=Object.freeze({__proto__:null,HTML:n,SVG:s,elements:o});let{HTML:r,SVG:c,elements:a}=l;try{const e=class extends HTMLLIElement{};customElements.define("li-"+Date.now(),e,{extends:"li"}),new e}catch{({HTML:r,elements:a}=await import("./index-ZeOAFWQQ.js"))}export{r as HTML,c as SVG,a as elements};
+const e=new Map,t=document.createElement.bind(document),n=new Proxy(new Map,{get(n,s){let o=s.toLowerCase();return n.get(o)||((n,s)=>{let o=e.get(s);o||(o="element"===s?HTMLElement:t(s).constructor,e.set(s,o));class l extends o{static tag=s}return n.set(s,l),l})(n,o)}}),s=new Proxy(new Map,{get(){throw new DOMException("SVG extends not natively supported")}}),o={define:(e,t)=>{const n=[e,t];return"element"!==t.tag&&n.push({extends:t.tag}),customElements.define(...n)},get:e=>customElements.get(e),whenDefined:e=>customElements.whenDefined(e)};var l=Object.freeze({__proto__:null,HTML:n,SVG:s,elements:o});let{HTML:r,SVG:c,elements:m}=l;try{const e=class extends HTMLLIElement{};customElements.define("li-"+Date.now(),e,{extends:"li"}),new e}catch{({HTML:r,elements:m}=await import("./index-CUAunxU3.js"))}export{r as HTML,c as SVG,m as elements};

package/dist/{index-ZeOAFWQQ.js → index-CUAunxU3.js}

@@ -1,3 +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};
+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",w="connectedCallback",f="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[w]?.()):o.has(a)||(o.add(a),t.delete(a),r.has(a)&&a[f]?.()),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,[w]:o,[f]: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,w=(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)}))},f=(e,t=!0)=>{for(let o=0,{length:r}=e;o<r;o++)w(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})(w,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&&f(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++)f(i.call(e[t].removedNodes,d),!1),f(i.call(e[t].addedNodes,d),!0)},observer:g,parse:f}})({query:g,handle(e,t,o){if(t){const t="["===o[0]?o.slice(5,-2):o,r=m.get(t);e instanceof r||new r(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="element"===t.tag?e:`[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/index.js

@@ -5,16 +5,12 @@ const query = [];
 const registry = new Map;
 const waitlist = new Map;
 
-const name = selector => {
-  const i = selector.indexOf('="');
-  return selector.slice(i + 2, -2);
-};
-
 const { parse } = QSAO({
   query,
   handle(element, connected, selector) {
     if (connected) {
-      const constructor = registry.get(name(selector));
+      const name = selector[0] === '[' ? selector.slice(5, -2) : selector;
+      const constructor = registry.get(name);
       if (!(element instanceof constructor))
         new constructor(element);
     }
@@ -43,7 +39,7 @@ export const elements = {
     registry.set(name, constructor);
     wait(name).resolve(constructor);
 
-    const selector = `[is="${name}"]`;
+    const selector = constructor.tag === 'element' ? name : `[is="${name}"]`;
     query.push(selector);
     parse(document.querySelectorAll(selector));
   },

package/native.js

@@ -4,7 +4,10 @@ const create = document.createElement.bind(document);
 
 const set = (map, tag) => {
   let Class = DOM.get(tag);
-  if (!Class) DOM.set(tag, Class = create(tag).constructor);
+  if (!Class) {
+    Class = tag === 'element' ? HTMLElement : create(tag).constructor;
+    DOM.set(tag, Class);
+  }
   class CustomElement extends Class {
     static tag = tag;
   }
@@ -13,7 +16,7 @@ const set = (map, tag) => {
 };
 
 // @ts-ignore
-const HTML = /** @type {import("nonchalance/ce").HTML} */(new Proxy(new Map, {
+export const HTML = /** @type {import("nonchalance/ce").HTML} */(new Proxy(new Map, {
   get(map, tag) {
     let _ = /** @type {string} */ (tag).toLowerCase();
     return map.get(_) || set(map, _);
@@ -21,14 +24,12 @@ const HTML = /** @type {import("nonchalance/ce").HTML} */(new Proxy(new Map, {
 }));
 
 // @ts-ignore
-const SVG = /** @type {import("nonchalance/ce").SVG} */(new Proxy(new Map, {
+export const SVG = /** @type {import("nonchalance/ce").SVG} */(new Proxy(new Map, {
   get() {
     throw new DOMException('SVG extends not natively supported');
   }
 }));
 
-export { HTML, SVG };
-
 export const elements = {
   /**
    * @param {string} name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webreflection/elements",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "HTML & SVG Custom Elements",
   "main": "index.js",
   "module": "index.js",

package/types/native.d.ts

@@ -1,7 +1,7 @@
+export const HTML: import("nonchalance/ce").HTML;
+export const SVG: import("nonchalance/ce").SVG;
 export namespace elements {
     function define(name: string, constructor: CustomElementConstructor): void;
     function get(name: string): CustomElementConstructor | null;
     function whenDefined(name: string): Promise<CustomElementConstructor>;
 }
-export const HTML: import("nonchalance/ce").HTML;
-export const SVG: import("nonchalance/ce").SVG;