@amazon/vinyl-tsx 1.2.0 → 2.0.0

package/dist/index.cjs

@@ -50,7 +50,6 @@ __export(index_exports, {
   jsx: () => jsx,
   onConnect: () => onConnect,
   passiveEventHandlers: () => passiveEventHandlers,
-  propToAttr: () => propToAttr,
   setClassToken: () => setClassToken,
   setVisible: () => setVisible,
   show: () => show,
@@ -103,8 +102,9 @@ function walkDomDepthFirst(node, callback) {
   if (!node) return;
   let next = node.firstChild;
   while (next) {
+    const after = next.nextSibling;
     walkDomDepthFirst(next, callback);
-    next = next.nextSibling;
+    next = after;
   }
   callback(node);
 }
@@ -165,34 +165,6 @@ function onConnect(target, callback) {
   };
 }
 
-// src/extensions/applyStyles.ts
-var import_vinyl_util = require("@amazon/vinyl-util");
-var import_vinyl_observable = require("@amazon/vinyl-observable");
-function applyStyles(element, style) {
-  if (typeof style === "string") {
-    throw new Error("expected style property to be type object");
-  }
-  for (const k in style) {
-    const v = style[k];
-    const property = k.startsWith("--") ? k : (0, import_vinyl_util.toKebabCase)(k);
-    if ((0, import_vinyl_observable.isObservableValue)(v)) {
-      onConnect(element, () => {
-        return v.onData((value) => {
-          element.style.setProperty(
-            property,
-            value != null ? value : null
-          );
-        });
-      });
-    } else {
-      element.style.setProperty(property, v != null ? v : null);
-    }
-  }
-}
-
-// src/jsx.ts
-var import_vinyl_observable3 = require("@amazon/vinyl-observable");
-
 // src/ActiveText.ts
 function ActiveText(data) {
   var _a;
@@ -205,36 +177,22 @@ function ActiveText(data) {
   return text;
 }
 
-// src/extensions/applyVisibility.ts
-function applyVisibility(element, visible) {
-  if (typeof visible === "boolean") {
-    if (!visible) element.style.display = "none";
-  } else {
-    onConnect(element, () => {
-      return visible.onData((value) => {
-        if (value) element.style.removeProperty("display");
-        else element.style.display = "none";
-      });
-    });
-  }
-}
-
 // src/extensions/applyClassList.ts
-var import_vinyl_observable2 = require("@amazon/vinyl-observable");
+var import_vinyl_observable = require("@amazon/vinyl-observable");
+var import_vinyl_util = require("@amazon/vinyl-util");
 function applyClassList(element, classList) {
   const tokens = classList.filter((s) => typeof s === "string");
   element.classList.add(...tokens);
   if (tokens.length < classList.length) {
-    onConnect(element, () => {
-      const subs = [];
-      for (const dP of classList.filter(import_vinyl_observable2.isObservableValue)) {
-        subs.push(bindClass(element, dP));
+    return onConnect(element, () => {
+      const { add, dispose } = (0, import_vinyl_util.createDisposer)();
+      for (const dP of classList.filter(import_vinyl_observable.isObservableValue)) {
+        add(bindClass(element, dP));
       }
-      return () => {
-        subs.forEach((sub) => sub());
-      };
+      return dispose;
     });
   }
+  return import_vinyl_util.noop;
 }
 function bindClass(element, tokenProvider) {
   let current = null;
@@ -266,42 +224,54 @@ function applyPassiveHandler(key) {
   };
 }
 
+// src/extensions/applyStyles.ts
+var import_vinyl_util2 = require("@amazon/vinyl-util");
+var import_vinyl_observable2 = require("@amazon/vinyl-observable");
+function applyStyles(element, style) {
+  if (typeof style === "string") {
+    throw new Error("expected style property to be type object");
+  }
+  for (const k in style) {
+    const v = style[k];
+    const property = k.startsWith("--") ? k : (0, import_vinyl_util2.toKebabCase)(k);
+    if ((0, import_vinyl_observable2.isObservableValue)(v)) {
+      onConnect(element, () => {
+        return v.onData((value) => {
+          element.style.setProperty(
+            property,
+            value != null ? value : null
+          );
+        });
+      });
+    } else {
+      element.style.setProperty(property, v != null ? v : null);
+    }
+  }
+}
+
+// src/extensions/applyVisibility.ts
+function applyVisibility(element, visible) {
+  if (typeof visible === "boolean") {
+    if (!visible) element.style.display = "none";
+  } else {
+    onConnect(element, () => {
+      return visible.onData((value) => {
+        if (value) element.style.removeProperty("display");
+        else element.style.display = "none";
+      });
+    });
+  }
+}
+
 // src/jsx.ts
-var propToAttr = {
-  acceptCharset: "accept-charset",
-  accessKey: "accesskey",
-  className: "class",
-  colSpan: "colspan",
-  contentEditable: "contenteditable",
-  crossOrigin: "crossorigin",
-  dateTime: "datetime",
-  dirName: "dirname",
-  encType: "enctype",
-  formAction: "formaction",
-  formEnctype: "formenctype",
-  formMethod: "formmethod",
-  formNoValidate: "formnovalidate",
-  formTarget: "formtarget",
-  htmlFor: "for",
-  httpEquiv: "http-equiv",
-  inputMode: "inputmode",
-  maxLength: "maxlength",
-  minLength: "minlength",
-  noModule: "nomodule",
-  noValidate: "novalidate",
-  readOnly: "readonly",
-  referrerPolicy: "referrerpolicy",
-  rowSpan: "rowspan",
-  tabIndex: "tabindex",
-  useMap: "usemap"
-};
+var import_vinyl_observable3 = require("@amazon/vinyl-observable");
+function isAttributeOnlyName(k) {
+  return k === "role" || k.indexOf("-") >= 0;
+}
 function setProp(element, k, value) {
-  var _a;
-  if (value == null) {
-    ;
-    element[k] = "";
-    const attr = (_a = propToAttr[k]) != null ? _a : k;
-    element.removeAttribute(attr);
+  if (isAttributeOnlyName(k)) {
+    if (value == null) element.removeAttribute(k);
+    else element.setAttribute(k, String(value));
   } else {
     ;
     element[k] = value;
@@ -337,7 +307,7 @@ function jsx(type, props, ...children) {
     );
     return element;
   } else {
-    return type(props, children);
+    return type(props != null ? props : {}, children);
   }
 }
 function Fragment(_props, children) {

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/index.ts", "../src/domUtil.ts", "../src/extensions/connectedObserver.ts", "../src/extensions/applyStyles.ts", "../src/jsx.ts", "../src/ActiveText.ts", "../src/extensions/applyVisibility.ts", "../src/extensions/applyClassList.ts", "../src/extensions/applyPassiveHandler.ts"],
-  "sourcesContent": ["/** Auto-generated from build scripts */\nexport * from './type'\nexport * from './jsx'\nexport * from './domUtil'\nexport * from './ActiveText'\nexport * from './extensions/connectedObserver'\nexport * from './extensions/applyVisibility'\nexport * from './extensions/applyStyles'\nexport * from './extensions/applyPassiveHandler'\nexport * from './extensions/applyClassList'\nexport * from './extensions/HookExtension'\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport function el<K extends keyof HTMLElementTagNameMap>(\n    selectors: K,\n    parentNode?: ParentNode\n): HTMLElementTagNameMap[K]\nexport function el(selectors: string, parentNode?: ParentNode): HTMLElement\nexport function el<E extends Element = Element>(\n    selectors: string,\n    parentNode: ParentNode = document\n): E {\n    const element = parentNode.querySelector(selectors)\n    if (!element) throw new Error(`${selectors} must be a DOM element`)\n    return element as E\n}\n\nexport interface QuerySelector {\n    <K extends keyof HTMLElementTagNameMap>(\n        selectors: K,\n        parentNode?: ParentNode\n    ): HTMLElementTagNameMap[K]\n    (selectors: string): HTMLElement\n}\n\nexport function bindQuerySelector(parentNode: ParentNode): QuerySelector {\n    return (selectors: string) => el(selectors, parentNode)\n}\n\nexport function hide(element: HTMLElement) {\n    element.style.display = 'none'\n}\n\nexport function show(element: HTMLElement) {\n    element.style.removeProperty('display')\n}\n\nexport function getVisible(element: HTMLElement): boolean {\n    return element.style.display !== 'none'\n}\n\nexport function setVisible(element: HTMLElement, value: boolean) {\n    if (getVisible(element) === value) return\n    if (value) show(element)\n    else hide(element)\n}\n\nexport function isHidden(element: HTMLElement) {\n    let node: HTMLElement | null = element\n    while (node) {\n        if (getComputedStyle(node).display === 'none') return true\n        node = node.parentElement\n    }\n    return false\n}\n\nexport function isInputElement(\n    value: Element | null\n): value is HTMLInputElement {\n    return value?.tagName.toLowerCase() === 'input'\n}\n\n/**\n * Adds or removes a class token to an element.\n *\n * @param value The element whose classList to modify.\n * @param token The class token.\n * @param toggled If true, the token is added, if false, removed.\n */\nexport function setClassToken(\n    value: HTMLElement,\n    token: string,\n    toggled: boolean\n) {\n    if (toggled) {\n        value.classList.add(token)\n    } else {\n        value.classList.remove(token)\n    }\n}\n\nexport type ElementInitOptions = {\n    readonly parent?: HTMLElement\n    readonly className?: string\n}\n\n/**\n * Recursively walks a node hierarchy, invoking a callback for every node, depth first.\n *\n * @param node\n * @param callback\n */\nexport function walkDomDepthFirst(\n    node: Node | undefined | null,\n    callback: (node: Node) => void\n) {\n    if (!node) return\n    let next = node.firstChild\n    while (next) {\n        walkDomDepthFirst(next, callback)\n        next = next.nextSibling\n    }\n    callback(node)\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { walkDomDepthFirst } from '../domUtil'\nimport type { Maybe, Unsubscribe } from '@amazon/vinyl-util'\n\n/**\n * Dispatches a 'connected' event on nodes attached to the dom, dispatches 'disconnected' when removed.\n * Allows nodes to observe connected changes without creating a memory leak.\n */\nexport function initializeConnectedObserver(): Unsubscribe {\n    const observer = new MutationObserver((mutations) => {\n        const removed = new Set<Node>()\n        const added = new Set<Node>()\n\n        // First pass: flatten removed and added nodes so we can detect nodes re-ordered.\n        for (const mutation of mutations) {\n            mutation.removedNodes.forEach((node) => removed.add(node))\n            mutation.addedNodes.forEach((node) => added.add(node))\n        }\n\n        // Second pass: handle added/removed, skipping reorders\n        for (const mutation of mutations) {\n            for (const node of mutation.addedNodes) {\n                if (removed.has(node)) continue\n                walkDomDepthFirst(node, (iNode) => {\n                    iNode.dispatchEvent(\n                        new CustomEvent('connect', { bubbles: false })\n                    )\n                })\n            }\n\n            for (const node of mutation.removedNodes) {\n                if (added.has(node)) continue\n                walkDomDepthFirst(node, (iNode) => {\n                    iNode.dispatchEvent(\n                        new CustomEvent('disconnect', { bubbles: false })\n                    )\n                })\n            }\n        }\n    })\n\n    observer.observe(document, { childList: true, subtree: true })\n\n    return () => {\n        observer.disconnect()\n    }\n}\n\n/**\n * Invokes a callback when the given target is connected to the DOM.\n * If the callback returns a function, that function will be invoked when disconnected.\n *\n * @param target\n * @param callback\n */\nexport function onConnect<T extends Node>(\n    target: T,\n    callback: (node: T) => Maybe<Unsubscribe> | void\n): Unsubscribe {\n    let sub: Maybe<Unsubscribe> | void = null\n    let connected = false\n    const onConnect = () => {\n        if (connected) return\n        connected = true\n        sub = callback(target)\n    }\n    const onDisconnect = () => {\n        connected = false\n        sub?.()\n        sub = null\n    }\n    target.addEventListener('connect', onConnect)\n    target.addEventListener('disconnect', onDisconnect)\n    if (target.isConnected) onConnect()\n    return () => {\n        target.removeEventListener('connect', onConnect)\n        target.removeEventListener('disconnect', onDisconnect)\n        onDisconnect()\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport type { AllowBindable } from '../jsx'\nimport { onConnect } from './connectedObserver'\nimport { toKebabCase } from '@amazon/vinyl-util'\nimport {\n    isObservableValue,\n    type MaybeObservableValue,\n} from '@amazon/vinyl-observable'\nimport type { Maybe } from '@amazon/vinyl-util'\n\n/**\n * The shape accepted by the `style` jsx prop. Allows the typed CSSStyleDeclaration\n * fields plus any CSS custom property key (must start with `--`).\n */\nexport type StyleProp = AllowBindable<Partial<CSSStyleDeclaration>> & {\n    readonly [customProperty: `--${string}`]: MaybeObservableValue<\n        Maybe<string>\n    >\n}\n\nexport function applyStyles(element: HTMLElement, style: StyleProp) {\n    // noinspection SuspiciousTypeOfGuard\n    if (typeof style === 'string') {\n        // A Partial style declaration type does not prohibit a string type.\n        throw new Error('expected style property to be type object')\n    }\n    for (const k in style) {\n        const v = (style as Record<string, unknown>)[k]\n        // Custom properties (starting with `--`) are passed through as-is so\n        // they aren't kebab-cased a second time, and so they remain valid keys\n        // for setProperty.\n        const property = k.startsWith('--') ? k : toKebabCase(k)\n        if (isObservableValue(v)) {\n            onConnect(element, () => {\n                return v.onData((value) => {\n                    element.style.setProperty(\n                        property,\n                        (value ?? null) as string | null\n                    )\n                })\n            })\n        } else {\n            element.style.setProperty(property, (v ?? null) as string | null)\n        }\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { onConnect } from './extensions/connectedObserver'\nimport type { Writable } from './type'\nimport { applyStyles } from './extensions/applyStyles'\nimport {\n    isObservableValue,\n    type MaybeObservableValue,\n    type ObservableValue,\n} from '@amazon/vinyl-observable'\nimport { ActiveText } from './ActiveText'\nimport { applyVisibility } from './extensions/applyVisibility'\nimport { applyClassList } from './extensions/applyClassList'\nimport type { HookExtension } from './extensions/HookExtension'\nimport { passiveEventHandlers } from './extensions/applyPassiveHandler'\nimport type { AnyRecord, Maybe } from '@amazon/vinyl-util'\n\n/**\n * Maps JS property names to their corresponding HTML attribute names where they differ.\n * Extensible \u2014 add entries for custom elements or non-standard properties.\n */\nexport const propToAttr: Record<string, string> = {\n    acceptCharset: 'accept-charset',\n    accessKey: 'accesskey',\n    className: 'class',\n    colSpan: 'colspan',\n    contentEditable: 'contenteditable',\n    crossOrigin: 'crossorigin',\n    dateTime: 'datetime',\n    dirName: 'dirname',\n    encType: 'enctype',\n    formAction: 'formaction',\n    formEnctype: 'formenctype',\n    formMethod: 'formmethod',\n    formNoValidate: 'formnovalidate',\n    formTarget: 'formtarget',\n    htmlFor: 'for',\n    httpEquiv: 'http-equiv',\n    inputMode: 'inputmode',\n    maxLength: 'maxlength',\n    minLength: 'minlength',\n    noModule: 'nomodule',\n    noValidate: 'novalidate',\n    readOnly: 'readonly',\n    referrerPolicy: 'referrerpolicy',\n    rowSpan: 'rowspan',\n    tabIndex: 'tabindex',\n    useMap: 'usemap',\n}\n\n/**\n * Sets a property on an element. When value is non-null, assigns directly via\n * property. When null, resets the property to '' and removes the HTML attribute\n * using the mapped name from {@link propToAttr}.\n */\nfunction setProp(element: HTMLElement, k: string, value: unknown): void {\n    if (value == null) {\n        ;(element as any)[k] = ''\n        const attr = propToAttr[k] ?? k\n        element.removeAttribute(attr)\n    } else {\n        ;(element as any)[k] = value\n    }\n}\n\nexport type JsxFactory = (props: any, children: any[]) => any\n\n/**\n * A map of custom jsx properties to be used in hook extensions.\n */\nexport const hookExtensions = {\n    onConnect: onConnect<HTMLElement>,\n    style: applyStyles,\n    visible: applyVisibility,\n    classList: applyClassList,\n    ...passiveEventHandlers,\n} as const satisfies Record<keyof any, HookExtension<any>>\n\nexport type AllowBindable<T> = {\n    [K in keyof T]: MaybeObservableValue<Maybe<T[K]>>\n}\n\n/**\n * A type map of the jsx extended properties to the type provided to the hook.\n */\nexport type HookExtensions = {\n    [p in keyof typeof hookExtensions]?: Parameters<\n        (typeof hookExtensions)[p]\n    >[1]\n}\n\nexport type ElementProps<K extends keyof HTMLElementTagNameMap> = Omit<\n    Partial<Writable<HTMLElementTagNameMap[K]>>,\n    keyof HookExtensions\n>\n\nexport type BindableElementProps<K extends keyof HTMLElementTagNameMap> =\n    AllowBindable<ElementProps<K>>\n\n/**\n * Allowed properties for intrinsic elements when writing jsx declarative markup.\n */\nexport type JsxElementProps<K extends keyof HTMLElementTagNameMap> =\n    BindableElementProps<K> & HookExtensions\n\nexport type DomIntrinsicElements = {\n    [K in keyof HTMLElementTagNameMap]: JsxElementProps<K>\n}\n\nexport type JsxChild = Node | string | ObservableValue<Node | string>\n\nexport function jsx<K extends keyof HTMLElementTagNameMap>(\n    type: K,\n    props: JsxElementProps<K>,\n    ...children: JsxChild[]\n): HTMLElementTagNameMap[K]\n\nexport function jsx<Factory extends JsxFactory>(\n    type: Factory,\n    props: Parameters<Factory>[0],\n    ...children: Parameters<Factory>[1]\n): ReturnType<Factory>\n\nexport function jsx(type: any, props: any, ...children: any) {\n    if (typeof type === 'string') {\n        const element = document.createElement(type)\n        for (const k in props) {\n            const v = props[k]\n            if (k in hookExtensions) {\n                hookExtensions[k as keyof typeof hookExtensions](element, v)\n                continue\n            }\n            if (isObservableValue(v)) {\n                onConnect(element, () => {\n                    return v.onData((data$) => setProp(element, k, data$))\n                })\n            } else {\n                setProp(element, k, v)\n            }\n        }\n        element.append(\n            ...children\n                .filter((child: JsxChild | null) => child != null)\n                .map((child: JsxChild) => {\n                    return isObservableValue(child) ? ActiveText(child) : child\n                })\n        )\n        return element\n    } else {\n        return type(props, children)\n    }\n}\n\nexport function Fragment(_props: AnyRecord, children: (Node | string)[]) {\n    return jsx(\n        'div',\n        {\n            style: {\n                display: 'contents',\n            },\n        },\n        ...children\n    )\n}\n\ndeclare global {\n    // eslint-disable-next-line @typescript-eslint/no-namespace\n    namespace JSX {\n        type IntrinsicElements = DomIntrinsicElements\n        type Element = HTMLElement\n        type Fragment = HTMLElement\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport type { ObservableValue } from '@amazon/vinyl-observable'\nimport { onConnect } from './extensions/connectedObserver'\n\n/**\n * A Text node bound to a data provider.\n * Created automatically when a child is a ObservableValue.\n * textContent will only be updated when the node is on the DOM.\n */\nexport function ActiveText<T>(data: ObservableValue<T>): Text {\n    const text = document.createTextNode(String(data.value ?? ''))\n    onConnect(text, () => {\n        return data.onData((value) => {\n            text.textContent = String(value ?? '')\n        })\n    })\n    return text\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport type { ObservableValue } from '@amazon/vinyl-observable'\nimport { onConnect } from './connectedObserver'\n\nexport function applyVisibility(\n    element: HTMLElement,\n    visible: boolean | ObservableValue<boolean>\n): void {\n    if (typeof visible === 'boolean') {\n        if (!visible) element.style.display = 'none'\n    } else {\n        onConnect(element, () => {\n            return visible.onData((value) => {\n                if (value) element.style.removeProperty('display')\n                else element.style.display = 'none'\n            })\n        })\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n    isObservableValue,\n    type ObservableValue,\n} from '@amazon/vinyl-observable'\nimport { onConnect } from './connectedObserver'\nimport type { Maybe, Unsubscribe } from '@amazon/vinyl-util'\n\nexport function applyClassList(\n    element: HTMLElement,\n    classList: readonly (Maybe<string> | ObservableValue<Maybe<string>>)[]\n): void {\n    const tokens = classList.filter((s) => typeof s === 'string')\n    element.classList.add(...tokens)\n    if (tokens.length < classList.length) {\n        onConnect(element, () => {\n            const subs: Unsubscribe[] = []\n            for (const dP of classList.filter(isObservableValue)) {\n                subs.push(bindClass(element, dP))\n            }\n            return () => {\n                subs.forEach((sub) => sub())\n            }\n        })\n    }\n}\n\nfunction bindClass(\n    element: HTMLElement,\n    tokenProvider: ObservableValue<Maybe<string>>\n): Unsubscribe {\n    let current: string | null = null\n    const dataSub = tokenProvider.onData((className) => {\n        if (current) element.classList.remove(current)\n        if (className) {\n            current = className\n            element.classList.add(className)\n        } else {\n            current = null\n        }\n    })\n    return () => {\n        if (current != null) element.classList.remove(current)\n        dataSub()\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport type { HookExtension } from './HookExtension'\n\nexport const passiveEventHandlers = {\n    ontouchstart: /* @__PURE__ */ applyPassiveHandler('ontouchstart'),\n    ontouchmove: /* @__PURE__ */ applyPassiveHandler('ontouchmove'),\n    onwheel: /* @__PURE__ */ applyPassiveHandler('onwheel'),\n} as const\n\nfunction applyPassiveHandler<K extends keyof GlobalEventHandlers>(\n    key: K\n): HookExtension<GlobalEventHandlers[K]> {\n    const eventName = key.substring(2)\n    return (element: HTMLElement, handler: GlobalEventHandlers[K]) => {\n        element.addEventListener(eventName, handler as any, { passive: true })\n    }\n}\n"],
-  "mappings": "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",
-  "names": ["onConnect", "import_vinyl_observable", "import_vinyl_observable"]
+  "sources": ["../src/index.ts", "../src/domUtil.ts", "../src/extensions/connectedObserver.ts", "../src/ActiveText.ts", "../src/extensions/applyClassList.ts", "../src/extensions/applyPassiveHandler.ts", "../src/extensions/applyStyles.ts", "../src/extensions/applyVisibility.ts", "../src/jsx.ts"],
+  "sourcesContent": ["/** Auto-generated from build scripts */\nexport * from './ActiveText'\nexport * from './domUtil'\nexport * from './extensions/applyClassList'\nexport * from './extensions/applyPassiveHandler'\nexport * from './extensions/applyStyles'\nexport * from './extensions/applyVisibility'\nexport * from './extensions/connectedObserver'\nexport * from './extensions/HookExtension'\nexport * from './jsx'\nexport * from './type'\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport function el<K extends keyof HTMLElementTagNameMap>(\n    selectors: K,\n    parentNode?: ParentNode\n): HTMLElementTagNameMap[K]\nexport function el(selectors: string, parentNode?: ParentNode): HTMLElement\nexport function el<E extends Element = Element>(\n    selectors: string,\n    parentNode: ParentNode = document\n): E {\n    const element = parentNode.querySelector(selectors)\n    if (!element) throw new Error(`${selectors} must be a DOM element`)\n    return element as E\n}\n\nexport interface QuerySelector {\n    <K extends keyof HTMLElementTagNameMap>(\n        selectors: K,\n        parentNode?: ParentNode\n    ): HTMLElementTagNameMap[K]\n    (selectors: string): HTMLElement\n}\n\nexport function bindQuerySelector(parentNode: ParentNode): QuerySelector {\n    return (selectors: string) => el(selectors, parentNode)\n}\n\nexport function hide(element: HTMLElement) {\n    element.style.display = 'none'\n}\n\nexport function show(element: HTMLElement) {\n    element.style.removeProperty('display')\n}\n\nexport function getVisible(element: HTMLElement): boolean {\n    return element.style.display !== 'none'\n}\n\nexport function setVisible(element: HTMLElement, value: boolean) {\n    if (getVisible(element) === value) return\n    if (value) show(element)\n    else hide(element)\n}\n\nexport function isHidden(element: HTMLElement) {\n    let node: HTMLElement | null = element\n    while (node) {\n        if (getComputedStyle(node).display === 'none') return true\n        node = node.parentElement\n    }\n    return false\n}\n\nexport function isInputElement(\n    value: Element | null\n): value is HTMLInputElement {\n    return value?.tagName.toLowerCase() === 'input'\n}\n\n/**\n * Adds or removes a class token to an element.\n *\n * @param value The element whose classList to modify.\n * @param token The class token.\n * @param toggled If true, the token is added, if false, removed.\n */\nexport function setClassToken(\n    value: HTMLElement,\n    token: string,\n    toggled: boolean\n) {\n    if (toggled) {\n        value.classList.add(token)\n    } else {\n        value.classList.remove(token)\n    }\n}\n\nexport type ElementInitOptions = {\n    readonly parent?: HTMLElement\n    readonly className?: string\n}\n\n/**\n * Recursively walks a node hierarchy, invoking a callback for every node, depth first.\n *\n * @param node\n * @param callback\n */\nexport function walkDomDepthFirst(\n    node: Node | undefined | null,\n    callback: (node: Node) => void\n) {\n    if (!node) return\n    let next = node.firstChild\n    while (next) {\n        // Snapshot the sibling before recursing so a callback that moves\n        // `next` can't sever the chain and skip the rest of the row.\n        const after = next.nextSibling\n        walkDomDepthFirst(next, callback)\n        next = after\n    }\n    callback(node)\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { walkDomDepthFirst } from '../domUtil'\nimport type { Maybe, Unsubscribe } from '@amazon/vinyl-util'\n\n/**\n * Dispatches a 'connected' event on nodes attached to the dom, dispatches 'disconnected' when removed.\n * Allows nodes to observe connected changes without creating a memory leak.\n */\nexport function initializeConnectedObserver(): Unsubscribe {\n    const observer = new MutationObserver((mutations) => {\n        const removed = new Set<Node>()\n        const added = new Set<Node>()\n\n        // First pass: flatten removed and added nodes so we can detect nodes re-ordered.\n        for (const mutation of mutations) {\n            mutation.removedNodes.forEach((node) => removed.add(node))\n            mutation.addedNodes.forEach((node) => added.add(node))\n        }\n\n        // Second pass: handle added/removed, skipping reorders\n        for (const mutation of mutations) {\n            for (const node of mutation.addedNodes) {\n                if (removed.has(node)) continue\n                walkDomDepthFirst(node, (iNode) => {\n                    iNode.dispatchEvent(\n                        new CustomEvent('connect', { bubbles: false })\n                    )\n                })\n            }\n\n            for (const node of mutation.removedNodes) {\n                if (added.has(node)) continue\n                walkDomDepthFirst(node, (iNode) => {\n                    iNode.dispatchEvent(\n                        new CustomEvent('disconnect', { bubbles: false })\n                    )\n                })\n            }\n        }\n    })\n\n    observer.observe(document, { childList: true, subtree: true })\n\n    return () => {\n        observer.disconnect()\n    }\n}\n\n/**\n * Invokes a callback when the given target is connected to the DOM.\n * If the callback returns a function, that function will be invoked when disconnected.\n *\n * @param target\n * @param callback\n */\nexport function onConnect<T extends Node>(\n    target: T,\n    callback: (node: T) => Maybe<Unsubscribe> | void\n): Unsubscribe {\n    let sub: Maybe<Unsubscribe> | void = null\n    let connected = false\n    const onConnect = () => {\n        if (connected) return\n        connected = true\n        sub = callback(target)\n    }\n    const onDisconnect = () => {\n        connected = false\n        sub?.()\n        sub = null\n    }\n    target.addEventListener('connect', onConnect)\n    target.addEventListener('disconnect', onDisconnect)\n    if (target.isConnected) onConnect()\n    return () => {\n        target.removeEventListener('connect', onConnect)\n        target.removeEventListener('disconnect', onDisconnect)\n        onDisconnect()\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport type { ObservableValue } from '@amazon/vinyl-observable'\nimport { onConnect } from './extensions/connectedObserver'\n\n/**\n * A Text node bound to a data provider.\n * Created automatically when a child is a ObservableValue.\n * textContent will only be updated when the node is on the DOM.\n */\nexport function ActiveText<T>(data: ObservableValue<T>): Text {\n    const text = document.createTextNode(String(data.value ?? ''))\n    onConnect(text, () => {\n        return data.onData((value) => {\n            text.textContent = String(value ?? '')\n        })\n    })\n    return text\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n    isObservableValue,\n    type ObservableValue,\n} from '@amazon/vinyl-observable'\nimport { onConnect } from './connectedObserver'\nimport {\n    createDisposer,\n    noop,\n    type Maybe,\n    type Unsubscribe,\n} from '@amazon/vinyl-util'\n\nexport function applyClassList(\n    element: HTMLElement,\n    classList: readonly (Maybe<string> | ObservableValue<Maybe<string>>)[]\n): Unsubscribe {\n    const tokens = classList.filter((s) => typeof s === 'string')\n    element.classList.add(...tokens)\n    if (tokens.length < classList.length) {\n        return onConnect(element, () => {\n            const { add, dispose } = createDisposer()\n            for (const dP of classList.filter(isObservableValue)) {\n                add(bindClass(element, dP))\n            }\n            return dispose\n        })\n    }\n    return noop\n}\n\nfunction bindClass(\n    element: HTMLElement,\n    tokenProvider: ObservableValue<Maybe<string>>\n): Unsubscribe {\n    let current: string | null = null\n    const dataSub = tokenProvider.onData((className) => {\n        if (current) element.classList.remove(current)\n        if (className) {\n            current = className\n            element.classList.add(className)\n        } else {\n            current = null\n        }\n    })\n    return () => {\n        if (current != null) element.classList.remove(current)\n        dataSub()\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport type { HookExtension } from './HookExtension'\n\nexport const passiveEventHandlers = {\n    ontouchstart: /* @__PURE__ */ applyPassiveHandler('ontouchstart'),\n    ontouchmove: /* @__PURE__ */ applyPassiveHandler('ontouchmove'),\n    onwheel: /* @__PURE__ */ applyPassiveHandler('onwheel'),\n} as const\n\nfunction applyPassiveHandler<K extends keyof GlobalEventHandlers>(\n    key: K\n): HookExtension<GlobalEventHandlers[K]> {\n    const eventName = key.substring(2)\n    return (element: HTMLElement, handler: GlobalEventHandlers[K]) => {\n        element.addEventListener(eventName, handler as any, { passive: true })\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { onConnect } from './connectedObserver'\nimport { toKebabCase } from '@amazon/vinyl-util'\nimport {\n    isObservableValue,\n    type MaybeObservableValue,\n} from '@amazon/vinyl-observable'\nimport type { Maybe } from '@amazon/vinyl-util'\n\n/**\n * The shape accepted by the `style` jsx prop. Allows the typed CSSStyleDeclaration\n * fields plus any CSS custom property key (must start with `--`). Null / undefined\n * clear the CSS property (via setProperty(name, null)), so values are Maybe-wrapped\n * here even though bindable IDL props reject null.\n */\nexport type StyleProp = {\n    [K in keyof Partial<CSSStyleDeclaration>]: MaybeObservableValue<\n        Maybe<CSSStyleDeclaration[K]>\n    >\n} & {\n    readonly [customProperty: `--${string}`]: MaybeObservableValue<\n        Maybe<string>\n    >\n}\n\nexport function applyStyles(element: HTMLElement, style: StyleProp) {\n    // noinspection SuspiciousTypeOfGuard\n    if (typeof style === 'string') {\n        // A Partial style declaration type does not prohibit a string type.\n        throw new Error('expected style property to be type object')\n    }\n    for (const k in style) {\n        const v = (style as Record<string, unknown>)[k]\n        // Custom properties (starting with `--`) are passed through as-is so\n        // they aren't kebab-cased a second time, and so they remain valid keys\n        // for setProperty.\n        const property = k.startsWith('--') ? k : toKebabCase(k)\n        if (isObservableValue(v)) {\n            onConnect(element, () => {\n                return v.onData((value) => {\n                    element.style.setProperty(\n                        property,\n                        (value ?? null) as string | null\n                    )\n                })\n            })\n        } else {\n            element.style.setProperty(property, (v ?? null) as string | null)\n        }\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport type { ObservableValue } from '@amazon/vinyl-observable'\nimport { onConnect } from './connectedObserver'\n\nexport function applyVisibility(\n    element: HTMLElement,\n    visible: boolean | ObservableValue<boolean>\n): void {\n    if (typeof visible === 'boolean') {\n        if (!visible) element.style.display = 'none'\n    } else {\n        onConnect(element, () => {\n            return visible.onData((value) => {\n                if (value) element.style.removeProperty('display')\n                else element.style.display = 'none'\n            })\n        })\n    }\n}\n", "/*\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { onConnect } from './extensions/connectedObserver'\nimport type { Writable } from './type'\nimport { applyStyles } from './extensions/applyStyles'\nimport {\n    isObservableValue,\n    type MaybeObservableValue,\n    type ObservableValue,\n} from '@amazon/vinyl-observable'\nimport { ActiveText } from './ActiveText'\nimport { applyVisibility } from './extensions/applyVisibility'\nimport { applyClassList } from './extensions/applyClassList'\nimport type { HookExtension } from './extensions/HookExtension'\nimport { passiveEventHandlers } from './extensions/applyPassiveHandler'\nimport type { AnyRecord } from '@amazon/vinyl-util'\n\n/**\n * Names like `aria-label` / `role` / `data-*` / any hyphenated prop are DOM\n * attributes with no matching IDL property \u2014 assigning them via `element[k]`\n * creates an inert expando and the a11y tree / CSS attribute selectors never\n * see the value. Route those through setAttribute so JSX like\n * `<div aria-label=\"foo\" />` actually reaches the DOM.\n */\nfunction isAttributeOnlyName(k: string): boolean {\n    return k === 'role' || k.indexOf('-') >= 0\n}\n\n/**\n * Sets a property on an element. Hyphenated / aria / role / data names are\n * assigned as HTML attributes; everything else stays on the property path so\n * camelCase IDL props (className, tabIndex, onClick, \u2026) keep their existing\n * fast-path semantics.\n */\nfunction setProp(element: HTMLElement, k: string, value: unknown): void {\n    if (isAttributeOnlyName(k)) {\n        if (value == null) element.removeAttribute(k)\n        else element.setAttribute(k, String(value))\n    } else {\n        ;(element as any)[k] = value\n    }\n}\n\nexport type JsxFactory = (props: any, children: any[]) => any\n\n/**\n * A map of custom jsx properties to be used in hook extensions.\n */\nexport const hookExtensions = {\n    onConnect: onConnect<HTMLElement>,\n    style: applyStyles,\n    visible: applyVisibility,\n    classList: applyClassList,\n    ...passiveEventHandlers,\n} as const satisfies Record<keyof any, HookExtension<any>>\n\nexport type AllowBindable<T> = {\n    [K in keyof T]: MaybeObservableValue<T[K]>\n}\n\n/**\n * A type map of the jsx extended properties to the type provided to the hook.\n */\nexport type HookExtensions = {\n    [p in keyof typeof hookExtensions]?: Parameters<\n        (typeof hookExtensions)[p]\n    >[1]\n}\n\nexport type ElementProps<K extends keyof HTMLElementTagNameMap> = Omit<\n    Partial<Writable<HTMLElementTagNameMap[K]>>,\n    keyof HookExtensions\n>\n\nexport type BindableElementProps<K extends keyof HTMLElementTagNameMap> =\n    AllowBindable<ElementProps<K>>\n\n/**\n * Allowed properties for intrinsic elements when writing jsx declarative markup.\n */\nexport type JsxElementProps<K extends keyof HTMLElementTagNameMap> =\n    BindableElementProps<K> & HookExtensions\n\nexport type DomIntrinsicElements = {\n    [K in keyof HTMLElementTagNameMap]: JsxElementProps<K>\n}\n\nexport type JsxChild = Node | string | ObservableValue<Node | string>\n\nexport function jsx<K extends keyof HTMLElementTagNameMap>(\n    type: K,\n    props: JsxElementProps<K>,\n    ...children: JsxChild[]\n): HTMLElementTagNameMap[K]\n\nexport function jsx<Factory extends JsxFactory>(\n    type: Factory,\n    props: Parameters<Factory>[0],\n    ...children: Parameters<Factory>[1]\n): ReturnType<Factory>\n\nexport function jsx(type: any, props: any, ...children: any) {\n    if (typeof type === 'string') {\n        const element = document.createElement(type)\n        for (const k in props) {\n            const v = props[k]\n            if (k in hookExtensions) {\n                hookExtensions[k as keyof typeof hookExtensions](element, v)\n                continue\n            }\n            if (isObservableValue(v)) {\n                onConnect(element, () => {\n                    return v.onData((data$) => setProp(element, k, data$))\n                })\n            } else {\n                setProp(element, k, v)\n            }\n        }\n        element.append(\n            ...children\n                .filter((child: JsxChild | null) => child != null)\n                .map((child: JsxChild) => {\n                    return isObservableValue(child) ? ActiveText(child) : child\n                })\n        )\n        return element\n    } else {\n        return type(props ?? {}, children)\n    }\n}\n\nexport function Fragment(_props: AnyRecord, children: (Node | string)[]) {\n    return jsx(\n        'div',\n        {\n            style: {\n                display: 'contents',\n            },\n        },\n        ...children\n    )\n}\n\ndeclare global {\n    // eslint-disable-next-line @typescript-eslint/no-namespace\n    namespace JSX {\n        type IntrinsicElements = DomIntrinsicElements\n        type Element = HTMLElement\n        type Fragment = HTMLElement\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACUO,SAAS,GACZ,WACA,aAAyB,UACxB;AACD,QAAM,UAAU,WAAW,cAAc,SAAS;AAClD,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,GAAG,SAAS,wBAAwB;AAClE,SAAO;AACX;AAUO,SAAS,kBAAkB,YAAuC;AACrE,SAAO,CAAC,cAAsB,GAAG,WAAW,UAAU;AAC1D;AAEO,SAAS,KAAK,SAAsB;AACvC,UAAQ,MAAM,UAAU;AAC5B;AAEO,SAAS,KAAK,SAAsB;AACvC,UAAQ,MAAM,eAAe,SAAS;AAC1C;AAEO,SAAS,WAAW,SAA+B;AACtD,SAAO,QAAQ,MAAM,YAAY;AACrC;AAEO,SAAS,WAAW,SAAsB,OAAgB;AAC7D,MAAI,WAAW,OAAO,MAAM,MAAO;AACnC,MAAI,MAAO,MAAK,OAAO;AAAA,MAClB,MAAK,OAAO;AACrB;AAEO,SAAS,SAAS,SAAsB;AAC3C,MAAI,OAA2B;AAC/B,SAAO,MAAM;AACT,QAAI,iBAAiB,IAAI,EAAE,YAAY,OAAQ,QAAO;AACtD,WAAO,KAAK;AAAA,EAChB;AACA,SAAO;AACX;AAEO,SAAS,eACZ,OACyB;AACzB,UAAO,+BAAO,QAAQ,mBAAkB;AAC5C;AASO,SAAS,cACZ,OACA,OACA,SACF;AACE,MAAI,SAAS;AACT,UAAM,UAAU,IAAI,KAAK;AAAA,EAC7B,OAAO;AACH,UAAM,UAAU,OAAO,KAAK;AAAA,EAChC;AACJ;AAaO,SAAS,kBACZ,MACA,UACF;AACE,MAAI,CAAC,KAAM;AACX,MAAI,OAAO,KAAK;AAChB,SAAO,MAAM;AAGT,UAAM,QAAQ,KAAK;AACnB,sBAAkB,MAAM,QAAQ;AAChC,WAAO;AAAA,EACX;AACA,WAAS,IAAI;AACjB;;;AChGO,SAAS,8BAA2C;AACvD,QAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACjD,UAAM,UAAU,oBAAI,IAAU;AAC9B,UAAM,QAAQ,oBAAI,IAAU;AAG5B,eAAW,YAAY,WAAW;AAC9B,eAAS,aAAa,QAAQ,CAAC,SAAS,QAAQ,IAAI,IAAI,CAAC;AACzD,eAAS,WAAW,QAAQ,CAAC,SAAS,MAAM,IAAI,IAAI,CAAC;AAAA,IACzD;AAGA,eAAW,YAAY,WAAW;AAC9B,iBAAW,QAAQ,SAAS,YAAY;AACpC,YAAI,QAAQ,IAAI,IAAI,EAAG;AACvB,0BAAkB,MAAM,CAAC,UAAU;AAC/B,gBAAM;AAAA,YACF,IAAI,YAAY,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,UACjD;AAAA,QACJ,CAAC;AAAA,MACL;AAEA,iBAAW,QAAQ,SAAS,cAAc;AACtC,YAAI,MAAM,IAAI,IAAI,EAAG;AACrB,0BAAkB,MAAM,CAAC,UAAU;AAC/B,gBAAM;AAAA,YACF,IAAI,YAAY,cAAc,EAAE,SAAS,MAAM,CAAC;AAAA,UACpD;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IACJ;AAAA,EACJ,CAAC;AAED,WAAS,QAAQ,UAAU,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAE7D,SAAO,MAAM;AACT,aAAS,WAAW;AAAA,EACxB;AACJ;AASO,SAAS,UACZ,QACA,UACW;AACX,MAAI,MAAiC;AACrC,MAAI,YAAY;AAChB,QAAMA,aAAY,MAAM;AACpB,QAAI,UAAW;AACf,gBAAY;AACZ,UAAM,SAAS,MAAM;AAAA,EACzB;AACA,QAAM,eAAe,MAAM;AACvB,gBAAY;AACZ;AACA,UAAM;AAAA,EACV;AACA,SAAO,iBAAiB,WAAWA,UAAS;AAC5C,SAAO,iBAAiB,cAAc,YAAY;AAClD,MAAI,OAAO,YAAa,CAAAA,WAAU;AAClC,SAAO,MAAM;AACT,WAAO,oBAAoB,WAAWA,UAAS;AAC/C,WAAO,oBAAoB,cAAc,YAAY;AACrD,iBAAa;AAAA,EACjB;AACJ;;;ACtEO,SAAS,WAAc,MAAgC;AAb9D;AAcI,QAAM,OAAO,SAAS,eAAe,QAAO,UAAK,UAAL,YAAc,EAAE,CAAC;AAC7D,YAAU,MAAM,MAAM;AAClB,WAAO,KAAK,OAAO,CAAC,UAAU;AAC1B,WAAK,cAAc,OAAO,wBAAS,EAAE;AAAA,IACzC,CAAC;AAAA,EACL,CAAC;AACD,SAAO;AACX;;;AChBA,8BAGO;AAEP,wBAKO;AAEA,SAAS,eACZ,SACA,WACW;AACX,QAAM,SAAS,UAAU,OAAO,CAAC,MAAM,OAAO,MAAM,QAAQ;AAC5D,UAAQ,UAAU,IAAI,GAAG,MAAM;AAC/B,MAAI,OAAO,SAAS,UAAU,QAAQ;AAClC,WAAO,UAAU,SAAS,MAAM;AAC5B,YAAM,EAAE,KAAK,QAAQ,QAAI,kCAAe;AACxC,iBAAW,MAAM,UAAU,OAAO,yCAAiB,GAAG;AAClD,YAAI,UAAU,SAAS,EAAE,CAAC;AAAA,MAC9B;AACA,aAAO;AAAA,IACX,CAAC;AAAA,EACL;AACA,SAAO;AACX;AAEA,SAAS,UACL,SACA,eACW;AACX,MAAI,UAAyB;AAC7B,QAAM,UAAU,cAAc,OAAO,CAAC,cAAc;AAChD,QAAI,QAAS,SAAQ,UAAU,OAAO,OAAO;AAC7C,QAAI,WAAW;AACX,gBAAU;AACV,cAAQ,UAAU,IAAI,SAAS;AAAA,IACnC,OAAO;AACH,gBAAU;AAAA,IACd;AAAA,EACJ,CAAC;AACD,SAAO,MAAM;AACT,QAAI,WAAW,KAAM,SAAQ,UAAU,OAAO,OAAO;AACrD,YAAQ;AAAA,EACZ;AACJ;;;AC9CO,IAAM,uBAAuB;AAAA,EAChC,cAA8B,oCAAoB,cAAc;AAAA,EAChE,aAA6B,oCAAoB,aAAa;AAAA,EAC9D,SAAyB,oCAAoB,SAAS;AAC1D;AAEA,SAAS,oBACL,KACqC;AACrC,QAAM,YAAY,IAAI,UAAU,CAAC;AACjC,SAAO,CAAC,SAAsB,YAAoC;AAC9D,YAAQ,iBAAiB,WAAW,SAAgB,EAAE,SAAS,KAAK,CAAC;AAAA,EACzE;AACJ;;;ACdA,IAAAC,qBAA4B;AAC5B,IAAAC,2BAGO;AAmBA,SAAS,YAAY,SAAsB,OAAkB;AAEhE,MAAI,OAAO,UAAU,UAAU;AAE3B,UAAM,IAAI,MAAM,2CAA2C;AAAA,EAC/D;AACA,aAAW,KAAK,OAAO;AACnB,UAAM,IAAK,MAAkC,CAAC;AAI9C,UAAM,WAAW,EAAE,WAAW,IAAI,IAAI,QAAI,gCAAY,CAAC;AACvD,YAAI,4CAAkB,CAAC,GAAG;AACtB,gBAAU,SAAS,MAAM;AACrB,eAAO,EAAE,OAAO,CAAC,UAAU;AACvB,kBAAQ,MAAM;AAAA,YACV;AAAA,YACC,wBAAS;AAAA,UACd;AAAA,QACJ,CAAC;AAAA,MACL,CAAC;AAAA,IACL,OAAO;AACH,cAAQ,MAAM,YAAY,UAAW,gBAAK,IAAsB;AAAA,IACpE;AAAA,EACJ;AACJ;;;AC9CO,SAAS,gBACZ,SACA,SACI;AACJ,MAAI,OAAO,YAAY,WAAW;AAC9B,QAAI,CAAC,QAAS,SAAQ,MAAM,UAAU;AAAA,EAC1C,OAAO;AACH,cAAU,SAAS,MAAM;AACrB,aAAO,QAAQ,OAAO,CAAC,UAAU;AAC7B,YAAI,MAAO,SAAQ,MAAM,eAAe,SAAS;AAAA,YAC5C,SAAQ,MAAM,UAAU;AAAA,MACjC,CAAC;AAAA,IACL,CAAC;AAAA,EACL;AACJ;;;ACdA,IAAAC,2BAIO;AAeP,SAAS,oBAAoB,GAAoB;AAC7C,SAAO,MAAM,UAAU,EAAE,QAAQ,GAAG,KAAK;AAC7C;AAQA,SAAS,QAAQ,SAAsB,GAAW,OAAsB;AACpE,MAAI,oBAAoB,CAAC,GAAG;AACxB,QAAI,SAAS,KAAM,SAAQ,gBAAgB,CAAC;AAAA,QACvC,SAAQ,aAAa,GAAG,OAAO,KAAK,CAAC;AAAA,EAC9C,OAAO;AACH;AAAC,IAAC,QAAgB,CAAC,IAAI;AAAA,EAC3B;AACJ;AAOO,IAAM,iBAAiB;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,GACR;AAgDA,SAAS,IAAI,MAAW,UAAe,UAAe;AACzD,MAAI,OAAO,SAAS,UAAU;AAC1B,UAAM,UAAU,SAAS,cAAc,IAAI;AAC3C,eAAW,KAAK,OAAO;AACnB,YAAM,IAAI,MAAM,CAAC;AACjB,UAAI,KAAK,gBAAgB;AACrB,uBAAe,CAAgC,EAAE,SAAS,CAAC;AAC3D;AAAA,MACJ;AACA,cAAI,4CAAkB,CAAC,GAAG;AACtB,kBAAU,SAAS,MAAM;AACrB,iBAAO,EAAE,OAAO,CAAC,UAAU,QAAQ,SAAS,GAAG,KAAK,CAAC;AAAA,QACzD,CAAC;AAAA,MACL,OAAO;AACH,gBAAQ,SAAS,GAAG,CAAC;AAAA,MACzB;AAAA,IACJ;AACA,YAAQ;AAAA,MACJ,GAAG,SACE,OAAO,CAAC,UAA2B,SAAS,IAAI,EAChD,IAAI,CAAC,UAAoB;AACtB,mBAAO,4CAAkB,KAAK,IAAI,WAAW,KAAK,IAAI;AAAA,MAC1D,CAAC;AAAA,IACT;AACA,WAAO;AAAA,EACX,OAAO;AACH,WAAO,KAAK,wBAAS,CAAC,GAAG,QAAQ;AAAA,EACrC;AACJ;AAEO,SAAS,SAAS,QAAmB,UAA6B;AACrE,SAAO;AAAA,IACH;AAAA,IACA;AAAA,MACI,OAAO;AAAA,QACH,SAAS;AAAA,MACb;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACP;AACJ;",
+  "names": ["onConnect", "import_vinyl_util", "import_vinyl_observable", "import_vinyl_observable"]
 }

package/dist/index.js

@@ -60,8 +60,9 @@ function walkDomDepthFirst(node, callback) {
   if (!node) return;
   let next = node.firstChild;
   while (next) {
+    const after = next.nextSibling;
     walkDomDepthFirst(next, callback);
-    next = next.nextSibling;
+    next = after;
   }
   callback(node);
 }
@@ -122,38 +123,6 @@ function onConnect(target, callback) {
   };
 }
 
-// src/extensions/applyStyles.ts
-import { toKebabCase } from "@amazon/vinyl-util";
-import {
-  isObservableValue
-} from "@amazon/vinyl-observable";
-function applyStyles(element, style) {
-  if (typeof style === "string") {
-    throw new Error("expected style property to be type object");
-  }
-  for (const k in style) {
-    const v = style[k];
-    const property = k.startsWith("--") ? k : toKebabCase(k);
-    if (isObservableValue(v)) {
-      onConnect(element, () => {
-        return v.onData((value) => {
-          element.style.setProperty(
-            property,
-            value != null ? value : null
-          );
-        });
-      });
-    } else {
-      element.style.setProperty(property, v != null ? v : null);
-    }
-  }
-}
-
-// src/jsx.ts
-import {
-  isObservableValue as isObservableValue3
-} from "@amazon/vinyl-observable";
-
 // src/ActiveText.ts
 function ActiveText(data) {
   var _a;
@@ -166,38 +135,27 @@ function ActiveText(data) {
   return text;
 }
 
-// src/extensions/applyVisibility.ts
-function applyVisibility(element, visible) {
-  if (typeof visible === "boolean") {
-    if (!visible) element.style.display = "none";
-  } else {
-    onConnect(element, () => {
-      return visible.onData((value) => {
-        if (value) element.style.removeProperty("display");
-        else element.style.display = "none";
-      });
-    });
-  }
-}
-
 // src/extensions/applyClassList.ts
 import {
-  isObservableValue as isObservableValue2
+  isObservableValue
 } from "@amazon/vinyl-observable";
+import {
+  createDisposer,
+  noop
+} from "@amazon/vinyl-util";
 function applyClassList(element, classList) {
   const tokens = classList.filter((s) => typeof s === "string");
   element.classList.add(...tokens);
   if (tokens.length < classList.length) {
-    onConnect(element, () => {
-      const subs = [];
-      for (const dP of classList.filter(isObservableValue2)) {
-        subs.push(bindClass(element, dP));
+    return onConnect(element, () => {
+      const { add, dispose } = createDisposer();
+      for (const dP of classList.filter(isObservableValue)) {
+        add(bindClass(element, dP));
       }
-      return () => {
-        subs.forEach((sub) => sub());
-      };
+      return dispose;
     });
   }
+  return noop;
 }
 function bindClass(element, tokenProvider) {
   let current = null;
@@ -229,42 +187,58 @@ function applyPassiveHandler(key) {
   };
 }
 
+// src/extensions/applyStyles.ts
+import { toKebabCase } from "@amazon/vinyl-util";
+import {
+  isObservableValue as isObservableValue2
+} from "@amazon/vinyl-observable";
+function applyStyles(element, style) {
+  if (typeof style === "string") {
+    throw new Error("expected style property to be type object");
+  }
+  for (const k in style) {
+    const v = style[k];
+    const property = k.startsWith("--") ? k : toKebabCase(k);
+    if (isObservableValue2(v)) {
+      onConnect(element, () => {
+        return v.onData((value) => {
+          element.style.setProperty(
+            property,
+            value != null ? value : null
+          );
+        });
+      });
+    } else {
+      element.style.setProperty(property, v != null ? v : null);
+    }
+  }
+}
+
+// src/extensions/applyVisibility.ts
+function applyVisibility(element, visible) {
+  if (typeof visible === "boolean") {
+    if (!visible) element.style.display = "none";
+  } else {
+    onConnect(element, () => {
+      return visible.onData((value) => {
+        if (value) element.style.removeProperty("display");
+        else element.style.display = "none";
+      });
+    });
+  }
+}
+
 // src/jsx.ts
-var propToAttr = {
-  acceptCharset: "accept-charset",
-  accessKey: "accesskey",
-  className: "class",
-  colSpan: "colspan",
-  contentEditable: "contenteditable",
-  crossOrigin: "crossorigin",
-  dateTime: "datetime",
-  dirName: "dirname",
-  encType: "enctype",
-  formAction: "formaction",
-  formEnctype: "formenctype",
-  formMethod: "formmethod",
-  formNoValidate: "formnovalidate",
-  formTarget: "formtarget",
-  htmlFor: "for",
-  httpEquiv: "http-equiv",
-  inputMode: "inputmode",
-  maxLength: "maxlength",
-  minLength: "minlength",
-  noModule: "nomodule",
-  noValidate: "novalidate",
-  readOnly: "readonly",
-  referrerPolicy: "referrerpolicy",
-  rowSpan: "rowspan",
-  tabIndex: "tabindex",
-  useMap: "usemap"
-};
+import {
+  isObservableValue as isObservableValue3
+} from "@amazon/vinyl-observable";
+function isAttributeOnlyName(k) {
+  return k === "role" || k.indexOf("-") >= 0;
+}
 function setProp(element, k, value) {
-  var _a;
-  if (value == null) {
-    ;
-    element[k] = "";
-    const attr = (_a = propToAttr[k]) != null ? _a : k;
-    element.removeAttribute(attr);
+  if (isAttributeOnlyName(k)) {
+    if (value == null) element.removeAttribute(k);
+    else element.setAttribute(k, String(value));
   } else {
     ;
     element[k] = value;
@@ -300,7 +274,7 @@ function jsx(type, props, ...children) {
     );
     return element;
   } else {
-    return type(props, children);
+    return type(props != null ? props : {}, children);
   }
 }
 function Fragment(_props, children) {
@@ -331,7 +305,6 @@ export {
   jsx,
   onConnect,
   passiveEventHandlers,
-  propToAttr,
   setClassToken,
   setVisible,
   show,