jj 0.1.1 → 2.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Alex Ewerlöf
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,20 +1,46 @@
 # Just JavaScript!
 
+**Do you know what runs faster than VDOM? No VDOM!**
+**Do you know what's faster than transpilation? No transpilation!**
+
 **JJ** A human readable WYWIWIR (what you write is what is run) DSL for creating and manipulating HTML and CSS for modern browsers.
 
-> Do you know what is faster than VDOM? No VDOM!
+Modern browsers are very powerful out of the box and get you pretty far without having to "compile" (transpile) an interpreted language (`.jsx`, `.vue`, etc.) to an earlier version of it (ES5). This is a proof of concept to show how far we can go without having to compile the code.
+
+## Install
 
-Modern browsers are pretty awesome out of the box and get you pretty far without having to "compile" (transpile) an interpreted language (JavaScript) to an earlier version of it (ES5). This is a proof of concept to show how far we can go without having to compile the code.
+```bash
+npm i jj
+```
+
+# Usage
+
+CDN:
+
+```js
+import { nextAnimationFrame, on } from 'https://unpkg.com/browse/jj/dist/bundle.js'
+```
+
+From NPM:
+
+```js
+import { nextAnimationFrame, on } from 'jj'
+```
 
 ## Design principals
 
-* Modern: take full advantage of ever-green browser features. No support for legacy browsers
-* Sugar but not magic: it'll let you write shorter code but it won't do much logic behind the scene
-* Excplicit: make the code more readable and easier to follow
-* Basic: use plain old javascript objects (POJOs) for describing HTML and CSS
+- Modern: take full advantage of ever-green browser features. No support for legacy browsers
+- Sugar but not magic: it'll let you write shorter code but it won't do much logic behind the scene
+- Excplicit: make the code more readable and easier to follow
+- Basic: use plain old javascript objects (POJOs) for describing HTML and CSS
 
 # Install
 
+One of the main points of using this library is to avoid compiling your code.
+You can directly import it from UNPKG at https://unpkg.com/browse/jj/dist/jj.js
+
+But if you prefer to install it via NPM:
+
 ```
 npm i jj
 ```
@@ -30,7 +56,10 @@ npm i jj
 ```
 
 ```javascript
+// If you installed via NPM
 import { ready, html } from '/node_modules/jj/dist/jj.js'
+// Is you want to directly use it via UNPKG
+import { ready, html } from 'https://unpkg.com/browse/jj/dist/jj.js'
 
 ready(() => {
     html.div('Hello world!').appendToBody()
@@ -45,4 +74,4 @@ _Will be written when we reach a stable API._
 
 MIT
 
-_Made in Sweden 🇸🇪 by [@alexewerlof](https://mobile.twitter.com/alexewerlof)_
+_Made in Sweden 🇸🇪 by [@alexewerlof](https://mobile.twitter.com/alexewerlof)_

package/lib/WC.d.ts

@@ -0,0 +1,45 @@
+import { WHE } from './WHE.js';
+export declare function fetchText(url: URL | string, mime?: string): Promise<string>;
+export declare function fetchHtml(url: URL | string): Promise<string>;
+export declare function fetchCss(url: URL | string): Promise<string>;
+export declare function cssToStyle(css: string): Promise<CSSStyleSheet>;
+export declare function fetchStyle(url: URL | string): Promise<CSSStyleSheet>;
+export declare function addLinkPre(href: string, rel: 'prefetch' | 'preload', as?: 'fetch' | 'style' | 'script'): WHE<HTMLElement>;
+export type JJResource<T> = T | Promise<T> | (() => T | Promise<T>);
+export type JJTemplateConfig = JJResource<string>;
+export type JJStylesConfig = JJResource<string | CSSStyleSheet> | JJResource<string | CSSStyleSheet>[];
+export interface JJConfig {
+    name: string;
+    template?: JJTemplateConfig;
+    styles?: JJStylesConfig;
+    templateMode?: 'open' | 'closed';
+}
+interface JJProcessedConfig {
+    template?: string;
+    styles: CSSStyleSheet[];
+}
+/**
+ * Parent class for custom components.
+ * It adds a few pragmatic functionalities
+ * - `setTemplate` sets the template for the custom component body
+ * - `addStyle` adds a stylesheet to be used by the shadowRoot
+ * - `connectedCallback` assigns the templates to shadowRoot and attaches any styles
+ * - `attributeChangedCallback` sets any props that corresponds to attributes defined in `static observedAttributes`
+ */
+export declare class WC extends HTMLElement {
+    static _jjCache: Promise<JJProcessedConfig> | JJProcessedConfig | undefined;
+    static jj: JJConfig;
+    static observedAttributes?: string[];
+    static register(): Promise<void>;
+    connectedCallback(): Promise<void>;
+    /**
+     * The class that extends this one should define
+     * `static observedAttributes[]` containing kebab-based attribute names (all lower case)
+     * @param name kebab-case and in lower case exactly as it appears in `observedAttributes`
+     * @param oldValue
+     * @param newValue
+     * @returns true if it tried to set the attribute; otherwise false
+     */
+    attributeChangedCallback(name: string, oldValue: any, newValue: any): boolean;
+}
+export {};

package/lib/WC.js

@@ -0,0 +1,118 @@
+import { keb2cam } from './case.js';
+import { WHE } from './WHE.js';
+import { hasProp, isArr, isStr, isObj, isFn, isA, isDef } from 'jty';
+export async function fetchText(url, mime = 'text/*') {
+    if (!isStr(mime)) {
+        throw new TypeError(`Expected a string mime like 'text/html' or 'text/css'. Got ${mime} (${typeof mime})`);
+    }
+    const response = await fetch(url, { headers: { Accept: mime } });
+    if (!response.ok) {
+        throw new Error(`GET ${url} failed: ${response.status} ${response.statusText}`);
+    }
+    return response.text();
+}
+export async function fetchHtml(url) {
+    return await fetchText(url, 'text/html');
+}
+export async function fetchCss(url) {
+    return await fetchText(url, 'text/css');
+}
+export async function cssToStyle(css) {
+    const sheet = new CSSStyleSheet();
+    return await sheet.replace(css);
+}
+export async function fetchStyle(url) {
+    return await cssToStyle(await fetchCss(url));
+}
+export function addLinkPre(href, rel, as = 'fetch') {
+    const link = WHE.fromTag('link').setAttrs({
+        rel,
+        href,
+        as,
+    });
+    document.head.append(link.ref);
+    return link;
+}
+async function processStyleConfig(style) {
+    if (isFn(style)) {
+        style = await style();
+    }
+    style = await style;
+    if (isA(style, CSSStyleSheet)) {
+        return style;
+    }
+    if (isStr(style)) {
+        return await cssToStyle(style);
+    }
+    throw new TypeError(`Expected a css string or CSSStyleSheet. Got ${style} (${typeof style})`);
+}
+async function processConfig(templateResource, styleResources) {
+    const templatePromise = isFn(templateResource) ? templateResource() : Promise.resolve(templateResource);
+    if (!isDef(styleResources)) {
+        styleResources = [];
+    }
+    if (!isArr(styleResources)) {
+        styleResources = [styleResources];
+    }
+    const [template, ...styles] = await Promise.all([templatePromise, ...styleResources.map(processStyleConfig)]);
+    return { template, styles };
+}
+/**
+ * Parent class for custom components.
+ * It adds a few pragmatic functionalities
+ * - `setTemplate` sets the template for the custom component body
+ * - `addStyle` adds a stylesheet to be used by the shadowRoot
+ * - `connectedCallback` assigns the templates to shadowRoot and attaches any styles
+ * - `attributeChangedCallback` sets any props that corresponds to attributes defined in `static observedAttributes`
+ */
+export class WC extends HTMLElement {
+    static async register() {
+        if (!isObj(this.jj)) {
+            throw new Error(`static jj object is missing from the extending class. Got ${this.jj} (${typeof this.jj})`);
+        }
+        const { name } = this.jj;
+        if (!isStr(name)) {
+            throw new TypeError(`Expected a string name. Got ${name} (${typeof name})`);
+        }
+        if (!customElements.get(name)) {
+            customElements.define(name, this);
+            await customElements.whenDefined(name);
+        }
+    }
+    async connectedCallback() {
+        const classRef = this.constructor;
+        const jj = classRef.jj;
+        if (!isObj(jj)) {
+            throw new TypeError(`static jj object is missing from the extending class. Got ${jj} (${typeof jj})`);
+        }
+        if (!classRef._jjCache) {
+            classRef._jjCache = processConfig(classRef.jj.template, classRef.jj.styles);
+        }
+        const { template, styles } = await classRef._jjCache;
+        const { templateMode } = jj;
+        WHE.from(this).setShadow(templateMode, template, ...styles);
+    }
+    /**
+     * The class that extends this one should define
+     * `static observedAttributes[]` containing kebab-based attribute names (all lower case)
+     * @param name kebab-case and in lower case exactly as it appears in `observedAttributes`
+     * @param oldValue
+     * @param newValue
+     * @returns true if it tried to set the attribute; otherwise false
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+        // Called when observed attributes change.
+        if (oldValue !== newValue) {
+            const observedAttributes = this.constructor.observedAttributes;
+            if (isArr(observedAttributes) && observedAttributes.includes(name)) {
+                const kebabName = keb2cam(name);
+                if (hasProp(this, kebabName)) {
+                    this[kebabName] = newValue;
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+}
+//# sourceMappingURL=WC.js.map

package/lib/WC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WC.js","sourceRoot":"","sources":["../src/WC.ts"],"names":[],"mappings":"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"}

package/lib/WDF.d.ts

@@ -0,0 +1,11 @@
+import { WN } from './WN.js';
+import { Wrapped } from './WN-mixin.js';
+/**
+ * Wraps a DocumentFragment (which is a descendant of Node)
+ */
+export declare class WDF<T extends DocumentFragment = DocumentFragment> extends WN<T> {
+    static from(ref: DocumentFragment): WDF;
+    constructor(ref: T);
+    byId(id: string, throwIfNotFound?: boolean): Wrapped | null;
+    empty(): this;
+}

package/lib/WDF.js

@@ -0,0 +1,31 @@
+import { isA } from 'jty';
+import { WN } from './WN.js';
+/**
+ * Wraps a DocumentFragment (which is a descendant of Node)
+ */
+export class WDF extends WN {
+    static from(ref) {
+        return new WDF(ref);
+    }
+    constructor(ref) {
+        if (!isA(ref, DocumentFragment)) {
+            throw new TypeError(`Expected a DocumentFragment. Got ${ref} (${typeof ref})`);
+        }
+        super(ref);
+    }
+    byId(id, throwIfNotFound = true) {
+        const el = this.ref.getElementById(id);
+        if (el) {
+            return WN.wrap(el);
+        }
+        if (throwIfNotFound) {
+            throw new TypeError(`Element with id ${id} not found`);
+        }
+        return null;
+    }
+    empty() {
+        this.ref.replaceChildren();
+        return this;
+    }
+}
+//# sourceMappingURL=WDF.js.map

package/lib/WDF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WDF.js","sourceRoot":"","sources":["../src/WDF.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAG5B;;GAEG;AACH,MAAM,OAAO,GAAmD,SAAQ,EAAK;IACzE,MAAM,CAAC,IAAI,CAAC,GAAqB;QAC7B,OAAO,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA;IACvB,CAAC;IAED,YAAY,GAAM;QACd,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,gBAAgB,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,SAAS,CAAC,oCAAoC,GAAG,KAAK,OAAO,GAAG,GAAG,CAAC,CAAA;QAClF,CAAC;QACD,KAAK,CAAC,GAAG,CAAC,CAAA;IACd,CAAC;IAED,IAAI,CAAC,EAAU,EAAE,eAAe,GAAG,IAAI;QACnC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;QACtC,IAAI,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QACtB,CAAC;QACD,IAAI,eAAe,EAAE,CAAC;YAClB,MAAM,IAAI,SAAS,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAA;QAC1D,CAAC;QACD,OAAO,IAAI,CAAA;IACf,CAAC;IAED,KAAK;QACD,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,CAAA;QAC1B,OAAO,IAAI,CAAA;IACf,CAAC;CACJ"}

package/lib/WE.d.ts

@@ -0,0 +1,43 @@
+import { WN } from './WN.js';
+import { WSH } from './WSH.js';
+/**
+ * Wraps a DOM Element (which is a descendant of Node)
+ */
+export declare class WE<T extends Element = Element> extends WN<T> {
+    static from(ref: Element): WE;
+    constructor(ref: T);
+    getAttr(name: string): string | null;
+    hasAttr(name: string): boolean;
+    setAttr(name: string, value: string): this;
+    setAttrs(obj: Record<string, string>): this;
+    rmAttr(name: string): this;
+    rmAttrs(...names: string[]): this;
+    getAria(name: string): string | null;
+    hasAria(name: string): boolean;
+    setAria(name: string, value: string): this;
+    rmAria(name: string): this;
+    addClass(...classNames: string[]): this;
+    rmClasses(...classNames: string[]): this;
+    rmClass(className: string): this;
+    hasClass(className: string): boolean;
+    toggleClass(className: string): this;
+    onClick(handler: EventListenerOrEventListenerObject): this;
+    hide(): this;
+    show(): this;
+    disable(): this;
+    enable(): this;
+    getTitle(): string | null;
+    setTitle(title: string): this;
+    setId(id: string): this;
+    getId(): string | null;
+    getHtml(): string;
+    setHtml(html: string): this;
+    /**
+     * We prevent FOUC by assigning the template and CSS in one go
+     * @remarks
+     * **Note:** You can't attach a shadow root to every type of element. There are some that can't have a
+     * shadow DOM for security reasons (for example `<a>`).
+     */
+    setShadow(mode?: ShadowRootMode, html?: string, ...styleSheets: CSSStyleSheet[]): this;
+    getShadow(): WSH;
+}

package/lib/WE.js

@@ -0,0 +1,133 @@
+import { isA, isObj } from 'jty';
+import { WN } from './WN.js';
+import { WSH } from './WSH.js';
+/**
+ * Wraps a DOM Element (which is a descendant of Node)
+ */
+export class WE extends WN {
+    static from(ref) {
+        return new WE(ref);
+    }
+    constructor(ref) {
+        if (!isA(ref, Element)) {
+            throw new TypeError(`Expected a Element. Got: ${ref} (${typeof ref})`);
+        }
+        super(ref);
+    }
+    getAttr(name) {
+        return this.ref.getAttribute(name);
+    }
+    hasAttr(name) {
+        return this.ref.hasAttribute(name);
+    }
+    setAttr(name, value) {
+        this.ref.setAttribute(name, value);
+        return this;
+    }
+    setAttrs(obj) {
+        if (!isObj(obj)) {
+            throw new TypeError(`Expected an object. Got: ${obj} (${typeof obj})`);
+        }
+        for (const [name, value] of Object.entries(obj)) {
+            this.setAttr(name, value);
+        }
+        return this;
+    }
+    rmAttr(name) {
+        return this.rmAttrs(name);
+    }
+    rmAttrs(...names) {
+        for (const name of names) {
+            this.ref.removeAttribute(name);
+        }
+        return this;
+    }
+    getAria(name) {
+        return this.ref.getAttribute(`aria-${name}`);
+    }
+    hasAria(name) {
+        return this.ref.hasAttribute(`aria-${name}`);
+    }
+    setAria(name, value) {
+        this.ref.setAttribute(`aria-${name}`, value);
+        return this;
+    }
+    rmAria(name) {
+        this.ref.removeAttribute(`aria-${name}`);
+        return this;
+    }
+    addClass(...classNames) {
+        this.ref.classList.add(...classNames);
+        return this;
+    }
+    rmClasses(...classNames) {
+        this.ref.classList.remove(...classNames);
+        return this;
+    }
+    rmClass(className) {
+        return this.rmClasses(className);
+    }
+    hasClass(className) {
+        return this.ref.classList.contains(className);
+    }
+    toggleClass(className) {
+        this.ref.classList.toggle(className);
+        return this;
+    }
+    onClick(handler) {
+        return this.on('click', handler);
+    }
+    hide() {
+        return this.setAttr('hidden', '').setAttr('aria-hidden', 'true');
+    }
+    show() {
+        return this.rmAttrs('hidden', 'aria-hidden');
+    }
+    disable() {
+        return this.setAttr('disabled', '').setAttr('aria-disabled', 'true');
+    }
+    enable() {
+        return this.rmAttrs('disabled', 'aria-disabled');
+    }
+    getTitle() {
+        return this.getAttr('title');
+    }
+    setTitle(title) {
+        return this.setAttr('title', title);
+    }
+    setId(id) {
+        return this.setAttr('id', id);
+    }
+    getId() {
+        return this.getAttr('id');
+    }
+    getHtml() {
+        return this.ref.innerHTML;
+    }
+    setHtml(html) {
+        this.ref.innerHTML = html;
+        return this;
+    }
+    /**
+     * We prevent FOUC by assigning the template and CSS in one go
+     * @remarks
+     * **Note:** You can't attach a shadow root to every type of element. There are some that can't have a
+     * shadow DOM for security reasons (for example `<a>`).
+     */
+    setShadow(mode = 'open', html, ...styleSheets) {
+        const shadowRoot = this.ref.shadowRoot ?? this.ref.attachShadow({ mode });
+        if (html) {
+            shadowRoot.innerHTML = html;
+        }
+        if (styleSheets.length) {
+            shadowRoot.adoptedStyleSheets.push(...styleSheets);
+        }
+        return this;
+    }
+    getShadow() {
+        if (!this.ref.shadowRoot)
+            throw new Error('No shadow root');
+        return new WSH(this.ref.shadowRoot);
+    }
+}
+//# sourceMappingURL=WE.js.map

package/lib/WE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WE.js","sourceRoot":"","sources":["../src/WE.ts"],"names":[],"mappings":"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"}

package/lib/WHE.d.ts

@@ -0,0 +1,21 @@
+import { WE } from './WE.js';
+/**
+ * Wraps a DOM HTMLElement (which is a descendant of Element)
+ */
+export declare class WHE<T extends HTMLElement = HTMLElement> extends WE<T> {
+    static from(ref: HTMLElement): WHE;
+    static fromTag(tagName: string, options?: ElementCreationOptions): WHE;
+    constructor(ref: T);
+    getValue(): unknown;
+    setValue(value: string): this;
+    getData(name: string): string | undefined;
+    hasData(name: string): boolean;
+    setData(name: string, value: string): this;
+    setDataObj(obj: Record<string, string>): this;
+    rmData(name: string): this;
+    focus(): this;
+    click(): this;
+    empty(): this;
+    getText(): string;
+    setText(text: string): this;
+}

package/lib/WHE.js

@@ -0,0 +1,75 @@
+import { hasProp, isA, isStr } from 'jty';
+import { WE } from './WE.js';
+/**
+ * Wraps a DOM HTMLElement (which is a descendant of Element)
+ */
+export class WHE extends WE {
+    static from(ref) {
+        return new WHE(ref);
+    }
+    static fromTag(tagName, options) {
+        if (!isStr(tagName)) {
+            throw new TypeError(`Expected a string for tagName. Got: ${tagName} (${typeof tagName})`);
+        }
+        return new WHE(document.createElement(tagName, options));
+    }
+    constructor(ref) {
+        if (!isA(ref, HTMLElement)) {
+            throw new TypeError(`Expected a HTMLElement. Got ${ref} (${typeof ref})`);
+        }
+        super(ref);
+    }
+    getValue() {
+        if (!hasProp(this.ref, 'value')) {
+            throw new Error('Element does not have a value property');
+        }
+        return this.ref.value;
+    }
+    setValue(value) {
+        if (!hasProp(this.ref, 'value')) {
+            throw new Error('Element does not have a value property');
+        }
+        this.ref.value = value;
+        return this;
+    }
+    getData(name) {
+        return this.ref.dataset[name];
+    }
+    hasData(name) {
+        return hasProp(this.ref.dataset, name);
+    }
+    setData(name, value) {
+        this.ref.dataset[name] = value;
+        return this;
+    }
+    setDataObj(obj) {
+        for (const [name, value] of Object.entries(obj)) {
+            this.setData(name, value);
+        }
+        return this;
+    }
+    rmData(name) {
+        delete this.ref.dataset[name];
+        return this;
+    }
+    focus() {
+        this.ref.focus();
+        return this;
+    }
+    click() {
+        this.ref.click();
+        return this;
+    }
+    empty() {
+        this.ref.innerText = '';
+        return this;
+    }
+    getText() {
+        return this.ref.innerText;
+    }
+    setText(text) {
+        this.ref.innerText = text;
+        return this;
+    }
+}
+//# sourceMappingURL=WHE.js.map

package/lib/WHE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WHE.js","sourceRoot":"","sources":["../src/WHE.ts"],"names":[],"mappings":"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"}

package/lib/WN-mixin.d.ts

@@ -0,0 +1,9 @@
+import { WHE } from './WHE.js';
+import { WE } from './WE.js';
+import { WDF } from './WDF.js';
+import { WSH } from './WSH.js';
+import { WT } from './WT.js';
+import { WN } from './WN.js';
+export type Wrappable = WN | Node | string;
+export type Wrapped = WHE | WE | WDF | WSH | WDF | WT | WN;
+export type Unwrapped = HTMLElement | Element | ShadowRoot | DocumentFragment | Text | Node;

package/lib/WN-mixin.js

@@ -0,0 +1,59 @@
+import { isA, isObj, isStr } from 'jty';
+import { WHE } from './WHE.js';
+import { WE } from './WE.js';
+import { WDF } from './WDF.js';
+import { WSH } from './WSH.js';
+import { WT } from './WT.js';
+import { WN } from './WN.js';
+/**
+ * @returns the most granual Wrapped subclass.
+ */
+WN.wrap = (raw) => {
+    if (isStr(raw)) {
+        return WT.from(document.createTextNode(raw));
+    }
+    if (!isObj(raw)) {
+        throw new TypeError(`Expected an object to wrap. Got ${raw} (${typeof raw})`);
+    }
+    if (isA(raw, WN)) {
+        return raw;
+    }
+    if (isA(raw, HTMLElement)) {
+        return WHE.from(raw);
+    }
+    if (isA(raw, Element)) {
+        return WE.from(raw);
+    }
+    if (isA(raw, ShadowRoot)) {
+        return WSH.from(raw);
+    }
+    if (isA(raw, DocumentFragment)) {
+        return WDF.from(raw);
+    }
+    if (isA(raw, Text)) {
+        return WT.from(raw);
+    }
+    if (isA(raw, Node)) {
+        return WN.from(raw);
+    }
+    throw new TypeError(`Only Frag or DocumentFragment can be wrapped. Got ${raw} (${typeof raw})`);
+};
+/**
+ * @returns the original DOM node wrapped in the appropriate class
+ */
+WN.unwrap = (obj) => {
+    if (isStr(obj)) {
+        return document.createTextNode(obj);
+    }
+    if (!isObj(obj)) {
+        throw new TypeError(`Expected an object. Got ${obj} (${typeof obj})`);
+    }
+    if (isA(obj, Node)) {
+        return obj;
+    }
+    if (isA(obj, WN)) {
+        return obj.ref;
+    }
+    throw new TypeError(`Could not unwrap ${obj} (${typeof obj})`);
+};
+//# sourceMappingURL=WN-mixin.js.map