@webreflection/elements 0.1.3 → 0.1.5

package/README.md

@@ -1,5 +1,8 @@
 # @webreflection/elements
 
+<sup>**Social Media Photo by [Marek Piwnicki](https://unsplash.com/@marekpiwnicki) on [Unsplash](https://unsplash.com/)**</sup>
+
+
 HTML & SVG Custom Elements, glueing [qsa-observer](https://github.com/WebReflection/qsa-observer#readme) and [nonchalance](https://github.com/WebReflection/nonchalance#readme) together.
 
 **[Live Test](https://webreflection.github.io/elements/test.html)**

package/auto.js

@@ -6,14 +6,10 @@ try {
   const LI = class extends HTMLLIElement {};
   customElements.define('li-' + Date.now(), LI, { extends: 'li' });
   new LI;
-  SVG = new Proxy(module, {
-    get() {
-      throw new DOMException('SVG extends not natively supported');
-    }
-  });
 }
 catch {
-  ({ HTML, SVG, elements } = await import('./min.js'));
+  // @ts-ignore
+  ({ HTML, elements } = await import(/* webpackIgnore: true */ './index.js'));
 }
 
 export { HTML, SVG, elements };

package/index.js

@@ -31,6 +31,11 @@ const wait = name => {
 export const { HTML, SVG } = createRegistry();
 
 export const elements = {
+  /**
+   * @param {string} name
+   * @param {CustomElementConstructor} constructor
+   * @returns
+   */
   define(name, constructor) {
     if (registry.has(name) || customElements.get(name))
       throw new DOMException(`Element ${name} already defined`);
@@ -42,6 +47,16 @@ export const elements = {
     query.push(selector);
     parse(document.querySelectorAll(selector));
   },
+
+  /**
+   * @param {string} name
+   * @returns {CustomElementConstructor?}
+   */
   get: name => registry.get(name),
+
+  /**
+   * @param {string} name
+   * @returns {Promise<CustomElementConstructor>}
+   */
   whenDefined: name => wait(name).promise,
 };

package/native.js

@@ -1,260 +1,62 @@
-/**
- * @typedef {Object} Options An object with a `document` and zero, one, or more custom namespaces.
- * @property {Document} [document] the document to use, defaults to the global one.
- * @property {'http://www.w3.org/1999/xhtml'} [HTML] the namespace to use for HTML classes.
- * @property {'http://www.w3.org/2000/svg'} [SVG] the namespace to use for SVG classes.
- * @property {'...'} [CustomML] any desired extra namespace.
- */
+const DOM = new Map;
 
-/** @type {Options} */
-let W3 = {
-  HTML: 'http://www.w3.org/1999/xhtml',
-  SVG: 'http://www.w3.org/2000/svg',
+const create = document.createElement.bind(document);
+
+const set = (map, tag) => {
+  let Class = DOM.get(tag);
+  if (!Class) DOM.set(tag, Class = create(tag).constructor);
+  class CustomElement extends Class {
+    static tag = tag;
+  }
+  map.set(tag, CustomElement);
+  return CustomElement;
 };
 
-/**
- * @typedef {Object} HTML
- * @property {new () => HTMLAnchorElement} A
- * @property {new () => HTMLElement} Abbr
- * @property {new () => HTMLElement} Address
- * @property {new () => HTMLAreaElement} Area
- * @property {new () => HTMLElement} Article
- * @property {new () => HTMLElement} Aside
- * @property {new () => HTMLAudioElement} Audio
- * @property {new () => HTMLElement} B
- * @property {new () => HTMLBaseElement} Base
- * @property {new () => HTMLElement} Bdi
- * @property {new () => HTMLElement} Bdo
- * @property {new () => HTMLQuoteElement} BlockQuote
- * @property {new () => HTMLBodyElement} Body
- * @property {new () => HTMLBRElement} BR
- * @property {new () => HTMLButtonElement} Button
- * @property {new () => HTMLCanvasElement} Canvas
- * @property {new () => HTMLTableCaptionElement} Caption
- * @property {new () => HTMLElement} Cite
- * @property {new () => HTMLElement} Code
- * @property {new () => HTMLTableColElement} Col
- * @property {new () => HTMLTableColElement} ColGroup
- * @property {new () => HTMLDataElement} Data
- * @property {new () => HTMLDataListElement} DataList
- * @property {new () => HTMLElement} DD
- * @property {new () => HTMLModElement} Del
- * @property {new () => HTMLDetailsElement} Details
- * @property {new () => HTMLElement} Dfn
- * @property {new () => HTMLDialogElement} Dialog
- * @property {new () => HTMLDivElement} Div
- * @property {new () => HTMLDListElement} DL
- * @property {new () => HTMLElement} DT
- * @property {new () => HTMLElement} Element
- * @property {new () => HTMLElement} Em
- * @property {new () => HTMLEmbedElement} Embed
- * @property {new () => HTMLFieldSetElement} FieldSet
- * @property {new () => HTMLElement} FigCaption
- * @property {new () => HTMLElement} Figure
- * @property {new () => HTMLElement} Footer
- * @property {new () => HTMLFormElement} Form
- * @property {new () => HTMLHeadingElement} H1
- * @property {new () => HTMLHeadingElement} H2
- * @property {new () => HTMLHeadingElement} H3
- * @property {new () => HTMLHeadingElement} H4
- * @property {new () => HTMLHeadingElement} H5
- * @property {new () => HTMLHeadingElement} H6
- * @property {new () => HTMLHeadElement} Head
- * @property {new () => HTMLElement} Header
- * @property {new () => HTMLHRElement} HR
- * @property {new () => HTMLHtmlElement} Html
- * @property {new () => HTMLElement} I
- * @property {new () => HTMLIFrameElement} IFrame
- * @property {new () => HTMLImageElement} Img
- * @property {new () => HTMLInputElement} Input
- * @property {new () => HTMLModElement} Ins
- * @property {new () => HTMLElement} Kbd
- * @property {new () => HTMLLabelElement} Label
- * @property {new () => HTMLLegendElement} Legend
- * @property {new () => HTMLLIElement} LI
- * @property {new () => HTMLLinkElement} Link
- * @property {new () => HTMLElement} Main
- * @property {new () => HTMLMapElement} Map
- * @property {new () => HTMLElement} Mark
- * @property {new () => HTMLMenuElement} Menu
- * @property {new () => HTMLMetaElement} Meta
- * @property {new () => HTMLMeterElement} Meter
- * @property {new () => HTMLElement} Nav
- * @property {new () => HTMLElement} NoScript
- * @property {new () => HTMLObjectElement} Object
- * @property {new () => HTMLOListElement} OL
- * @property {new () => HTMLOptGroupElement} OptGroup
- * @property {new () => HTMLOptionElement} Option
- * @property {new () => HTMLOutputElement} Output
- * @property {new () => HTMLParagraphElement} P
- * @property {new () => HTMLPictureElement} Picture
- * @property {new () => HTMLUnknownElement} Portal
- * @property {new () => HTMLPreElement} Pre
- * @property {new () => HTMLProgressElement} Progress
- * @property {new () => HTMLQuoteElement} Q
- * @property {new () => HTMLElement} RP
- * @property {new () => HTMLElement} RT
- * @property {new () => HTMLElement} Ruby
- * @property {new () => HTMLElement} S
- * @property {new () => HTMLElement} Samp
- * @property {new () => HTMLScriptElement} Script
- * @property {new () => HTMLElement} Section
- * @property {new () => HTMLSelectElement} Select
- * @property {new () => HTMLSlotElement} Slot
- * @property {new () => HTMLElement} Small
- * @property {new () => HTMLSourceElement} Source
- * @property {new () => HTMLSpanElement} Span
- * @property {new () => HTMLElement} Strong
- * @property {new () => HTMLStyleElement} Style
- * @property {new () => HTMLElement} Sub
- * @property {new () => HTMLElement} Summary
- * @property {new () => HTMLElement} Sup
- * @property {new () => HTMLTableElement} Table
- * @property {new () => HTMLTableSectionElement} TBody
- * @property {new () => HTMLTableCellElement} TD
- * @property {new () => HTMLTemplateElement} Template
- * @property {new () => HTMLTextAreaElement} TextArea
- * @property {new () => HTMLTableSectionElement} TFoot
- * @property {new () => HTMLTableCellElement} TH
- * @property {new () => HTMLTableSectionElement} THead
- * @property {new () => HTMLTimeElement} Time
- * @property {new () => HTMLTitleElement} Title
- * @property {new () => HTMLTableRowElement} TR
- * @property {new () => HTMLTrackElement} Track
- * @property {new () => HTMLElement} U
- * @property {new () => HTMLUListElement} UL
- * @property {new () => HTMLElement} Var
- * @property {new () => HTMLVideoElement} Video
- * @property {new () => HTMLElement} Wbr
- */
+// @ts-ignore
+const HTML = /** @type {import("nonchalance/ce").HTML} */(new Proxy(new Map, {
+  get(map, tag) {
+    let _ = /** @type {string} */ (tag).toLowerCase();
+    return map.get(_) || set(map, _);
+  }
+}));
 
-/**
- * @typedef {Object} SVG
- * @property {new () => SVGAElement} A
- * @property {new () => SVGAnimateElement} Animate
- * @property {new () => SVGAnimateMotionElement} AnimateMotion
- * @property {new () => SVGAnimateTransformElement} AnimateTransform
- * @property {new () => SVGAnimationElement} Animation
- * @property {new () => SVGCircleElement} Circle
- * @property {new () => SVGClipPathElement} ClipPath
- * @property {new () => SVGComponentTransferFunctionElement} ComponentTransferFunction
- * @property {new () => SVGDefsElement} Defs
- * @property {new () => SVGDescElement} Desc
- * @property {new () => SVGElement} Element
- * @property {new () => SVGEllipseElement} Ellipse
- * @property {new () => SVGFEBlendElement} FEBlend
- * @property {new () => SVGFEColorMatrixElement} FEColorMatrix
- * @property {new () => SVGFEComponentTransferElement} FEComponentTransfer
- * @property {new () => SVGFECompositeElement} FEComposite
- * @property {new () => SVGFEConvolveMatrixElement} FEConvolveMatrix
- * @property {new () => SVGFEDiffuseLightingElement} FEDiffuseLighting
- * @property {new () => SVGFEDisplacementMapElement} FEDisplacementMap
- * @property {new () => SVGFEDistantLightElement} FEDistantLight
- * @property {new () => SVGFEDropShadowElement} FEDropShadow
- * @property {new () => SVGFEFloodElement} FEFlood
- * @property {new () => SVGFEFuncAElement} FEFuncA
- * @property {new () => SVGFEFuncBElement} FEFuncB
- * @property {new () => SVGFEFuncGElement} FEFuncG
- * @property {new () => SVGFEFuncRElement} FEFuncR
- * @property {new () => SVGFEGaussianBlurElement} FEGaussianBlur
- * @property {new () => SVGFEImageElement} FEImage
- * @property {new () => SVGFEMergeElement} FEMerge
- * @property {new () => SVGFEMergeNodeElement} FEMergeNode
- * @property {new () => SVGFEMorphologyElement} FEMorphology
- * @property {new () => SVGFEOffsetElement} FEOffset
- * @property {new () => SVGFEPointLightElement} FEPointLight
- * @property {new () => SVGFESpecularLightingElement} FESpecularLighting
- * @property {new () => SVGFESpotLightElement} FESpotLight
- * @property {new () => SVGFETileElement} FETile
- * @property {new () => SVGFETurbulenceElement} FETurbulence
- * @property {new () => SVGFilterElement} Filter
- * @property {new () => SVGForeignObjectElement} ForeignObject
- * @property {new () => SVGGElement} G
- * @property {new () => SVGGeometryElement} Geometry
- * @property {new () => SVGGradientElement} Gradient
- * @property {new () => SVGGraphicsElement} Graphics
- * @property {new () => SVGImageElement} Image
- * @property {new () => SVGLineElement} Line
- * @property {new () => SVGLinearGradientElement} LinearGradient
- * @property {new () => SVGMPathElement} MPath
- * @property {new () => SVGMarkerElement} Marker
- * @property {new () => SVGMaskElement} Mask
- * @property {new () => SVGMetadataElement} Metadata
- * @property {new () => SVGPathElement} Path
- * @property {new () => SVGPatternElement} Pattern
- * @property {new () => SVGPolygonElement} Polygon
- * @property {new () => SVGPolylineElement} Polyline
- * @property {new () => SVGRadialGradientElement} RadialGradient
- * @property {new () => SVGRectElement} Rect
- * @property {new () => SVGSVGElement} SVG
- * @property {new () => SVGScriptElement} Script
- * @property {new () => SVGSetElement} Set
- * @property {new () => SVGStopElement} Stop
- * @property {new () => SVGStyleElement} Style
- * @property {new () => SVGSwitchElement} Switch
- * @property {new () => SVGSymbolElement} Symbol
- * @property {new () => SVGTSpanElement} TSpan
- * @property {new () => SVGTextContentElement} TextContent
- * @property {new () => SVGTextElement} Text
- * @property {new () => SVGTextPathElement} TextPath
- * @property {new () => SVGTextPositioningElement} TextPositioning
- * @property {new () => SVGTitleElement} Title
- * @property {new () => SVGUseElement} Use
- * @property {new () => SVGViewElement} View
- */
+// @ts-ignore
+const SVG = /** @type {import("nonchalance/ce").SVG} */(new Proxy(new Map, {
+  get() {
+    throw new DOMException('SVG extends not natively supported');
+  }
+}));
 
-/**
- * @typedef {Object} Namespace
- * @property {HTML} HTML
- * @property {SVG} SVG
- */
+export { HTML, SVG };
 
-/**
- * Given an optional global context, returns a proxy that resolves
- * all tag names into their global constructors.
- * @property {Options} [options]
- * @returns {Namespace}
- */
-const createRegistry = (options = W3) => new Proxy(new Map, {
-  get(map, Namespace) {
-    let Proxied = map.get(Namespace);
-    if (!Proxied) {
-      map.set(Namespace, Proxied = new Proxy(new Map, {
-        get(map, tag) {
-          let _ = tag.toLowerCase();
-          return map.get(_) || set(map, _);
-        }
-      }));
-      let DOM = new Map;
-      let doc = options.document || document;
-      let create = doc.createElementNS.bind(
-        doc, options[Namespace] || W3[Namespace]
-      );
-      let set = (map, tag) => {
-        let Class = DOM.get(tag);
-        if (!Class)
-          DOM.set(tag, Class = create(tag).constructor);
-        class CustomElement extends Class {
-          static tag = tag;
-          /* c8 ignore next 3 */
-          constructor(element) {
-            return super(element || create(tag));
-          }
-        }
-        map.set(tag, CustomElement);
-        return CustomElement;
-      };
+export const elements = {
+  /**
+   * @param {string} name
+   * @param {CustomElementConstructor} constructor
+   * @returns
+   */
+  define: (name, constructor) => {
+    const args = [name, constructor];
+
+    //@ts-ignore
+    if (constructor.tag !== 'element') {
+      //@ts-ignore
+      args.push({ extends: constructor.tag });
     }
-    return Proxied;
-  }
-});
 
-export const { HTML, SVG } = createRegistry();
+    //@ts-ignore
+    return customElements.define(...args);
+  },
 
-export const elements = {
-  define: (name, constructor) => customElements.define(
-    name, constructor, { extends: constructor.tag }
-  ),
+  /**
+   * @param {string} name
+   * @returns {CustomElementConstructor?}
+   */
   get: name => customElements.get(name),
+
+  /**
+   * @param {string} name
+   * @returns {Promise<CustomElementConstructor>}
+   */
   whenDefined: name => customElements.whenDefined(name),
 };

package/package.json

@@ -1,20 +1,32 @@
 {
   "name": "@webreflection/elements",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "HTML & SVG Custom Elements",
   "main": "index.js",
   "module": "index.js",
+  "types": "./types/index.d.ts",
   "scripts": {
-    "build": "rollup -c rollup.js"
+    "build": "rollup -c rollup.js && npm run types",
+    "types": "rm -rf types && tsc --allowJs --checkJs --lib esnext,dom --moduleResolution nodenext --module NodeNext --target esnext -d --emitDeclarationOnly --outDir ./types ./index.js ./auto.js ./native.js"
   },
   "exports": {
-    ".": "./index.js",
-    "./auto": "./auto.js",
+    ".": {
+      "import": "./index.js",
+      "types": "./types/index.d.ts"
+    },
+    "./auto": {
+      "import": "./auto.js",
+      "types": "./types/auto.d.ts"
+    },
+    "./native": {
+      "import": "./native.js",
+      "types": "./types/native.d.ts"
+    },
     "./min": "./min.js",
-    "./native": "./native.js",
     "./package.json": "./package.json"
   },
   "files": [
+    "types/*",
     "auto.js",
     "index.js",
     "min.js",
@@ -39,7 +51,8 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "rollup": "^4.57.1"
+    "rollup": "^4.57.1",
+    "typescript": "^5.9.3"
   },
   "repository": {
     "type": "git",

package/types/auto.d.ts

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

package/types/index.d.ts

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

package/types/native.d.ts

@@ -0,0 +1,7 @@
+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;