@lynx-js/web-elements-canary 0.9.1-canary-20251226-f0317a32 → 0.10.0-canary-20251226-ccbf3de1

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # @lynx-js/web-elements
 
-## 0.9.1-canary-20251226071107-f0317a32d26e90c1da0ee63f29e5fb711899f075
+## 0.10.0-canary-20251226074923-ccbf3de1040573d60a3f8068585e36d5230b5e4a
+
+### Minor Changes
+
+- chore: migrate all @lynx-js/web-elements-\* packages into one ([#2057](https://github.com/lynx-family/lynx-stack/pull/2057))
+
+  ### Before
+
+  ```js
+  import "@lynx-js/web-elements-template";
+  import "@lynx-js/web-elements-compat/LinearContainer";
+  ```
+
+  ### After
+
+  ```js
+  import "@lynx-js/web-elements/html-templates";
+  import "@lynx-js/web-elements/compat/LinearContainer";
+  ```
 
 ### Patch Changes
 
@@ -11,9 +29,6 @@
 
   This is a part of #1937
 
-- Updated dependencies []:
-  - @lynx-js/web-elements-template@0.9.1-canary-20251226071107-f0317a32d26e90c1da0ee63f29e5fb711899f075
-
 ## 0.9.0
 
 ### Minor Changes

package/dist/compat/LinearContainer/LinearContainer.d.ts

@@ -0,0 +1,8 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+import '../../../src/compat/LinearContainer/linear-compat.css';
+export declare class LinearContainer implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static readonly observedAttributes: never[];
+    static readonly observedCSSProperties: string[];
+    constructor(currentElement: HTMLElement);
+}

package/dist/compat/LinearContainer/LinearContainer.js

@@ -0,0 +1,109 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { bindToAttribute, } from '../../element-reactive/index.js';
+import '../../../src/compat/LinearContainer/linear-compat.css';
+/** For @container
+ * chrome 111, safari 18, firefox no
+ *
+ * However, when the chromuim version is less than 116.0.5806.0, the following code will crash:
+ * ```
+ *  <style>
+      #container {
+        --lynx-display: flex;
+      }
+
+      #target {
+        background-color: red;
+        width: 400px;
+        height: 400px;
+      }
+
+      @container style(--lynx-display: flex) {
+        #target {
+          background-color: green;
+        }
+      }
+    </style>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+    <script>
+      const target = document.getElementById('container');
+      container.style.setProperty('display', 'none');
+      setTimeout(() => {
+        target.style.removeProperty('display');
+      }, 10);
+    </script>
+ * ```
+ * it fixed in 116.0.5806.0, detail: https://issues.chromium.org/issues/40270007
+ *
+ * so we limit this feature to chrome 117, safari 18, firefox no:
+ * rex unit: chrome 111, safari 17.2, firefox no
+ *  https://developer.mozilla.org/en-US/docs/Web/CSS/length
+ * transition-behavior:allow-discrete: chrome 117, safari 18, firefox 125
+ *  https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
+ *  https://caniuse.com/mdn-css_properties_display_is_transitionable
+ *
+ * update this once firefox supports this.
+ */
+const supportContainerStyleQuery = CSS.supports('width:1rex')
+    && CSS.supports('transition-behavior:allow-discrete')
+    && CSS.supports('content-visibility: auto');
+export class LinearContainer {
+    static observedAttributes = [];
+    static observedCSSProperties = [
+        '--lynx-display',
+        '--lynx-linear-orientation',
+    ];
+    #dom;
+    constructor(currentElement) {
+        this.#dom = currentElement;
+        // @ts-expect-error
+        this.cssPropertyChangedHandler = {
+            '--lynx-display': this.#setComputedDisplay,
+            '--lynx-linear-orientation': this.#setLinearOrientation,
+        };
+    }
+    #setComputedDisplay = bindToAttribute(() => this.#dom, 'lynx-computed-display');
+    #setLinearOrientation = bindToAttribute(() => this.#dom, 'lynx-linear-orientation');
+}
+/**
+ * remove this once firefox supports @container style()
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1795622
+ */
+if (!supportContainerStyleQuery) {
+    const targetElements = new Set([
+        'x-view',
+        'scroll-view',
+        'x-foldview-header-ng',
+        'x-foldview-ng',
+        'x-foldview-slot-drag-ng',
+        'x-foldview-slot-ng',
+        'x-foldview-toolbar-ng',
+        'x-refresh-footer',
+        'x-refresh-header',
+        'x-refresh-view',
+        'x-swiper-item',
+        'x-viewpager-item-ng',
+        'x-viewpager-ng',
+    ]);
+    const realDefine = customElements.define.bind(customElements);
+    const fakeDefine = (name, cls, options) => {
+        if (targetElements.has(name)) {
+            cls.registerPlugin?.(LinearContainer);
+            targetElements.delete(name);
+        }
+        realDefine(name, cls, options);
+    };
+    customElements.define = fakeDefine;
+    for (const tag of targetElements) {
+        (customElements.whenDefined(tag)).then((cls) => {
+            if (targetElements.has(tag)) {
+                cls.registerPlugin?.(LinearContainer);
+            }
+        });
+    }
+}
+//# sourceMappingURL=LinearContainer.js.map

package/dist/element-reactive/bindSwitchToEventListener.d.ts

@@ -0,0 +1 @@
+export declare function bindSwitchToEventListener<T>(this: T, elementGetter: (this: T) => HTMLElement, eventName: keyof HTMLElementEventMap | string, eventListener: EventListener, options?: AddEventListenerOptions): (this: T, enable: boolean) => void;

package/dist/element-reactive/bindSwitchToEventListener.js

@@ -0,0 +1,23 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { boostedQueueMicrotask } from './boostedQueueMicrotask.js';
+export function bindSwitchToEventListener(elementGetter, eventName, eventListener, options) {
+    let listening = false;
+    return function (enable) {
+        if (enable !== listening) {
+            const target = elementGetter.call(this);
+            if (enable) {
+                boostedQueueMicrotask(() => target.addEventListener(eventName, eventListener, options));
+                listening = true;
+            }
+            else {
+                boostedQueueMicrotask(() => target.removeEventListener(eventName, eventListener));
+                listening = false;
+            }
+        }
+    };
+}
+//# sourceMappingURL=bindSwitchToEventListener.js.map

package/dist/element-reactive/bindToAttribute.d.ts

@@ -0,0 +1,2 @@
+export type BindToAttributeProxy<T> = ReturnType<typeof bindToAttribute<T>>;
+export declare function bindToAttribute<T>(this: T, elementGetter: (this: T) => HTMLElement, attributeName: string, valProcessor?: (value: string | null) => string | null): (this: T, newVal: string | null) => void;

package/dist/element-reactive/bindToAttribute.js

@@ -0,0 +1,27 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { boostedQueueMicrotask } from './boostedQueueMicrotask.js';
+export function bindToAttribute(elementGetter, attributeName, valProcessor) {
+    return function (newVal) {
+        if (valProcessor)
+            newVal = valProcessor(newVal);
+        const target = elementGetter.call(this);
+        const currentAttribute = target.getAttribute(attributeName);
+        if (currentAttribute !== newVal) {
+            if (newVal !== null) {
+                boostedQueueMicrotask(() => {
+                    target.setAttribute(attributeName, newVal);
+                });
+            }
+            else {
+                boostedQueueMicrotask(() => {
+                    target.removeAttribute(attributeName);
+                });
+            }
+        }
+    };
+}
+//# sourceMappingURL=bindToAttribute.js.map

package/dist/element-reactive/bindToStyle.d.ts

@@ -0,0 +1,2 @@
+export type BindToStyleProxy<T> = ReturnType<typeof bindToStyle<T>>;
+export declare function bindToStyle<T>(this: T, elementGetter: (this: T) => HTMLElement, styleName: string, valProcessor?: (value: string) => string, important?: boolean): (this: T, newVal: string | null) => void;

package/dist/element-reactive/bindToStyle.js

@@ -0,0 +1,21 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { boostedQueueMicrotask } from './boostedQueueMicrotask.js';
+export function bindToStyle(elementGetter, styleName, valProcessor, important) {
+    return function (newVal) {
+        if (newVal) {
+            if (valProcessor)
+                newVal = valProcessor(newVal);
+            boostedQueueMicrotask(() => elementGetter
+                .call(this)
+                .style.setProperty(styleName, newVal, important ? 'important' : undefined));
+        }
+        else {
+            boostedQueueMicrotask(() => elementGetter.call(this).style.removeProperty(styleName));
+        }
+    };
+}
+//# sourceMappingURL=bindToStyle.js.map

package/dist/element-reactive/boostedQueueMicrotask.d.ts

@@ -0,0 +1 @@
+export declare function boostedQueueMicrotask(foo: CallableFunction, that?: any): void;

package/dist/element-reactive/boostedQueueMicrotask.js

@@ -0,0 +1,20 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+let queuedFunctions = [];
+function __executeNextMicrotask() {
+    const currentQueuedFunction = queuedFunctions;
+    queuedFunctions = [];
+    for (const [foo, that] of currentQueuedFunction) {
+        that ? foo.call(that) : foo();
+    }
+}
+export function boostedQueueMicrotask(foo, that) {
+    if (queuedFunctions.length === 0) {
+        queueMicrotask(__executeNextMicrotask);
+    }
+    queuedFunctions.push([foo, that]);
+}
+//# sourceMappingURL=boostedQueueMicrotask.js.map

package/dist/element-reactive/component.d.ts

@@ -0,0 +1,43 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import type { AttributeChangeHandler } from './registerAttributeHandler.js';
+import type { StyleChangeHandler } from './registerStyleChangeHandler.js';
+import type { EventStatusChangeHandler } from './registerEventStatusChangedHandler.js';
+export interface WebComponentClass {
+    new (): HTMLElement & {
+        cssPropertyChangedHandler?: never;
+        connectedCallback?(): void;
+        disconnectedCallback?(): void;
+        adoptedCallback?(): void;
+        attributeChangedCallback?(name: string, oldValue: null | string, newValue: null | string): void;
+    };
+    observedCSSProperties?: never;
+    observedAttributes?: string[];
+    /**
+     * for attribute="false",
+     * we will do removeAttribute by default;
+     * set here for dont do this;
+     */
+    notToFilterFalseAttributes?: Set<string>;
+    registerPlugin?: (reactiveClass: AttributeReactiveClass<WebComponentClass>) => void;
+}
+export type UseCSSCustomPropertyHandler = (newValue: string, propertyName: string) => void;
+export interface AttributeReactiveClass<T extends typeof HTMLElement> {
+    observedAttributes: readonly string[];
+    observedCSSProperties?: readonly string[];
+    new (dom: InstanceType<T>): any;
+}
+export type AttributeReactiveObject = {
+    attributeChangedHandler?: Record<string, {
+        handler: AttributeChangeHandler;
+        noDomMeasure: boolean;
+    }>;
+    cssPropertyChangedHandler?: Record<string, StyleChangeHandler>;
+    eventStatusChangedHandler?: Record<string, EventStatusChangeHandler>;
+    dispose?(): void;
+    connectedCallback?(): void;
+};
+export declare function Component<T extends WebComponentClass>(tag: string, attributeReactiveClasses: AttributeReactiveClass<T>[], template?: string): (target: T, context: ClassDecoratorContext<T>) => T;

package/dist/element-reactive/component.js

@@ -0,0 +1,217 @@
+import { boostedQueueMicrotask } from './boostedQueueMicrotask.js';
+function convertStyleWithPriority(value, priority) {
+    if (priority) {
+        return value + ' !important';
+    }
+    else {
+        return value;
+    }
+}
+export function Component(tag, attributeReactiveClasses, template) {
+    let templateElement;
+    return (target, { addInitializer }) => {
+        const observedStyleProperties = new Set([
+            ...attributeReactiveClasses
+                .filter((e) => e.observedCSSProperties)
+                .map((e) => e.observedCSSProperties)
+                .reduce((p, r) => p.concat(r), []),
+        ]);
+        // @ts-ignore
+        class CustomElement extends target {
+            static registerPlugin(reactiveClass) {
+                CustomElement.observedAttributes.push(...reactiveClass.observedAttributes);
+                if (reactiveClass.observedCSSProperties) {
+                    for (const property of reactiveClass.observedCSSProperties) {
+                        observedStyleProperties.add(property);
+                    }
+                }
+                attributeReactiveClasses.push(reactiveClass);
+            }
+            static observedAttributes = [
+                ...(target.observedAttributes ?? []),
+                ...attributeReactiveClasses
+                    .map((e) => e.observedAttributes)
+                    .reduce((p, r) => p.concat(r), []),
+                'class',
+            ];
+            #attributeReactives = [];
+            constructor() {
+                super();
+                if (template && !templateElement) {
+                    templateElement = document.createElement('template');
+                    templateElement.innerHTML = template;
+                    document.body.appendChild(templateElement);
+                }
+                if (templateElement && !this.shadowRoot) {
+                    const shadowRoot = this.attachShadow({
+                        mode: 'open',
+                        delegatesFocus: true,
+                    });
+                    const template = templateElement.content.cloneNode(true);
+                    shadowRoot.append(template);
+                }
+                this.#attributeReactives = attributeReactiveClasses.map((oneClass) => {
+                    const oneAttributeReactive = new oneClass(this);
+                    return oneAttributeReactive;
+                });
+                this.#cleanFalseAttributes();
+            }
+            /** handle observing styles */
+            #checking = false;
+            #previousStyle = new Map();
+            #responseStyleChange() {
+                if (!this.#checking && observedStyleProperties.size) {
+                    this.#checking = true;
+                    boostedQueueMicrotask(this.#invokeStyleHandler, this);
+                }
+            }
+            #invokeStyleHandler() {
+                const computedStyle = getComputedStyle(this);
+                for (const propertyName of observedStyleProperties) {
+                    const value = computedStyle.getPropertyValue(propertyName);
+                    const priority = computedStyle.getPropertyPriority(propertyName);
+                    const propertyValue = convertStyleWithPriority(value.trim(), priority);
+                    if (this.#previousStyle.get(propertyName) !== propertyValue) {
+                        for (const oneReactive of this.#attributeReactives) {
+                            oneReactive.cssPropertyChangedHandler?.[propertyName]?.call(oneReactive, propertyValue, propertyName);
+                        }
+                    }
+                }
+                this.#checking = false;
+            }
+            /** handle attribute='false' */
+            setAttribute(qualifiedName, value) {
+                if (value.toString() === 'false'
+                    && !target.notToFilterFalseAttributes?.has(qualifiedName)
+                    && !qualifiedName.startsWith('data-')) {
+                    this.removeAttribute(qualifiedName);
+                    return;
+                }
+                super.setAttribute(qualifiedName, value);
+            }
+            #cleanFalseAttributes() {
+                const attributes = this.attributes;
+                for (let index = 0, attr; (attr = attributes.item(index)); index++) {
+                    if (attr.value === 'false'
+                        && !target.notToFilterFalseAttributes?.has(attr.name)
+                        && !attr.name.startsWith('data-')) {
+                        this.removeAttributeNode(attr);
+                    }
+                }
+            }
+            #connected = false;
+            /** handle custom element life-cycles */
+            attributeChangedCallback(name, oldValue, newValue) {
+                super.attributeChangedCallback
+                    && super.attributeChangedCallback(name, oldValue, newValue);
+                if (!target.notToFilterFalseAttributes?.has(name)
+                    && !name.startsWith('data-')) {
+                    if (oldValue === 'false')
+                        oldValue = null;
+                    if (newValue === 'false') {
+                        newValue = null;
+                        this.removeAttribute(name);
+                    }
+                }
+                if (oldValue !== newValue) {
+                    if (this.#connected && (name === 'class' || name === 'style')) {
+                        this.#responseStyleChange();
+                    }
+                    for (const oneReactive of this.#attributeReactives) {
+                        if (oneReactive.attributeChangedHandler?.[name]) {
+                            const { handler, noDomMeasure } = oneReactive.attributeChangedHandler[name];
+                            if (noDomMeasure) {
+                                handler.call(oneReactive, newValue, oldValue, name);
+                            }
+                            else if (this.#connected) {
+                                boostedQueueMicrotask(() => handler.call(oneReactive, newValue, oldValue, name));
+                            }
+                        }
+                    }
+                }
+            }
+            #invokeAfterConnectedAttributeChangedHandler() {
+                this.getAttributeNames().forEach((attributeName) => {
+                    for (const oneReactive of this.#attributeReactives) {
+                        if (oneReactive.attributeChangedHandler?.[attributeName]) {
+                            const { handler, noDomMeasure } = oneReactive.attributeChangedHandler[attributeName];
+                            if (!noDomMeasure) {
+                                boostedQueueMicrotask(() => handler.call(oneReactive, this.getAttribute(attributeName), null, attributeName));
+                            }
+                        }
+                    }
+                });
+            }
+            connectedCallback() {
+                super.connectedCallback?.();
+                this.#attributeReactives.forEach((oneAttributeReactive) => {
+                    oneAttributeReactive.connectedCallback?.();
+                });
+                this.#responseStyleChange();
+                boostedQueueMicrotask(this.#invokeAfterConnectedAttributeChangedHandler, this);
+                this.#connected = true;
+            }
+            disconnectedCallback() {
+                super.disconnectedCallback?.();
+                this.#attributeReactives.forEach((oneAttributeReactive) => {
+                    oneAttributeReactive.dispose?.();
+                });
+            }
+            #eventListenerMap = {};
+            addEventListener(type, listener, options) {
+                super.addEventListener(type, listener, options);
+                this.#eventListenerMap[type] ??= {
+                    count: 0,
+                    listenerCount: new WeakMap(),
+                    captureListenerCount: new WeakMap(),
+                };
+                const targetEventInfo = this.#eventListenerMap[type];
+                const capture = typeof options === 'object' ? options.capture : options;
+                const targetMap = capture
+                    ? targetEventInfo.captureListenerCount
+                    : targetEventInfo.listenerCount;
+                const currentListenerCount = targetMap.get(listener) ?? 0;
+                targetMap.set(listener, currentListenerCount + 1);
+                if (targetEventInfo.count === 0) {
+                    // trigger eventStatusChangeHandler
+                    for (const oneReactive of this.#attributeReactives) {
+                        const handler = oneReactive.eventStatusChangedHandler?.[type];
+                        if (handler) {
+                            handler.call(oneReactive, true, type);
+                        }
+                    }
+                }
+                targetEventInfo.count++;
+            }
+            removeEventListener(type, listener, options) {
+                super.removeEventListener(type, listener, options);
+                const capture = typeof options === 'object' ? options.capture : options;
+                const targetEventInfo = this.#eventListenerMap[type];
+                if (targetEventInfo && targetEventInfo.count > 0) {
+                    const targetMap = capture
+                        ? targetEventInfo?.captureListenerCount
+                        : targetEventInfo?.listenerCount;
+                    const currentListenerCount = targetMap.get(listener);
+                    if (currentListenerCount === 1) {
+                        targetEventInfo.listenerCount.delete(listener);
+                        targetEventInfo.count--;
+                        if (targetEventInfo.count === 0) {
+                            // trigger eventStatusChangeHandler
+                            for (const oneReactive of this.#attributeReactives) {
+                                const handler = oneReactive.eventStatusChangedHandler?.[type];
+                                if (handler) {
+                                    handler.call(oneReactive, false, type);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        addInitializer(() => {
+            customElements.define(tag, CustomElement);
+        });
+        return CustomElement;
+    };
+}
+//# sourceMappingURL=component.js.map

package/dist/element-reactive/genDomGetter.d.ts

@@ -0,0 +1,9 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+export type InternalDomGetter<T extends HTMLElement> = () => T;
+export type PlainDomGetter<T extends HTMLElement> = () => T | null;
+export declare function genDomGetter<T extends HTMLElement>(queryableElementGetter: () => ShadowRoot, selector: string): InternalDomGetter<T>;
+export declare function genDomGetter<T extends HTMLElement>(queryableElementGetter: () => HTMLElement, selector: string): PlainDomGetter<T>;

package/dist/element-reactive/genDomGetter.js

@@ -0,0 +1,18 @@
+export function genDomGetter(queryableElementGetter, selector) {
+    let dom;
+    let queryTarget;
+    return () => {
+        if (!queryTarget)
+            queryTarget = queryableElementGetter();
+        if (queryTarget.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            if (!dom) {
+                dom = queryTarget.querySelector(selector);
+            }
+        }
+        else {
+            dom = queryTarget.querySelector(selector);
+        }
+        return dom;
+    };
+}
+//# sourceMappingURL=genDomGetter.js.map

package/dist/element-reactive/generateRegister.d.ts

@@ -0,0 +1,6 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+export declare function generateRegister<DecoratorArgs extends any[], RegistryItem, HandlerType, RegisterStorageMapName extends string>(registerName: RegisterStorageMapName, convertHandlerToRegistryItem: (handler: HandlerType, decoratorArgs: DecoratorArgs) => RegistryItem): (key: string, ...args: DecoratorArgs) => <T>(this: T, target: HandlerType | undefined, context: ClassMemberDecoratorContext | ClassFieldDecoratorContext<T>) => any;

package/dist/element-reactive/generateRegister.js

@@ -0,0 +1,29 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+export function generateRegister(registerName, convertHandlerToRegistryItem) {
+    return function registerHandler(key, ...args) {
+        return function (target, context) {
+            if (context.kind === 'method') {
+                context.addInitializer(function () {
+                    this[registerName] ??= {};
+                    this[registerName][key] =
+                        convertHandlerToRegistryItem(target, args);
+                });
+            }
+            else if (context.kind === 'field') {
+                return function (value) {
+                    this[registerName] ??= {};
+                    this[registerName][key] = convertHandlerToRegistryItem(value, args);
+                    return value;
+                };
+            }
+            else {
+                throw new Error(`[lynx-web-components] decorator type ${context.kind} is not supported`);
+            }
+        };
+    };
+}
+//# sourceMappingURL=generateRegister.js.map

package/dist/element-reactive/html.d.ts

@@ -0,0 +1,6 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+export declare const html: (strings: TemplateStringsArray, ...values: any[]) => string;

package/dist/element-reactive/html.js

@@ -0,0 +1,8 @@
+/**
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#raw_strings
+export const html = (strings, ...values) => String.raw({ raw: strings }, ...values);
+//# sourceMappingURL=html.js.map

package/dist/element-reactive/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @module element-reactive
+ *
+ * This module provides the core reactive framework for building Web Components in Lynx.
+ *
+ * Core features:
+ * - `Component` decorator: Defines a custom element with reactive capabilities.
+ * - Attribute & Style Binding: Automatically updates component state when attributes or styles change.
+ * - Event Handling: Provides mechanisms to bind and handle events efficiently.
+ * - Lifecycle Management: Extensions to standard Web Component lifecycle callbacks.
+ * - Plugin System: Allows extending component behavior.
+ *
+ * Use this module to create highly performant and reactive custom elements that integrate seamlessly with the Lynx platform.
+ */
+export { bindSwitchToEventListener } from './bindSwitchToEventListener.js';
+export { bindToAttribute } from './bindToAttribute.js';
+export type { BindToAttributeProxy } from './bindToAttribute.js';
+export { bindToStyle } from './bindToStyle.js';
+export type { BindToStyleProxy } from './bindToStyle.js';
+export { boostedQueueMicrotask } from './boostedQueueMicrotask.js';
+export { genDomGetter } from './genDomGetter.js';
+export { Component } from './component.js';
+export type { WebComponentClass, UseCSSCustomPropertyHandler, AttributeReactiveClass, AttributeReactiveObject, } from './component.js';
+export { html } from './html.js';
+export { registerAttributeHandler } from './registerAttributeHandler.js';
+export type { AttributeChangeHandler } from './registerAttributeHandler.js';
+export { registerStyleChangeHandler } from './registerStyleChangeHandler.js';
+export type { StyleChangeHandler } from './registerStyleChangeHandler.js';
+export { registerEventEnableStatusChangeHandler } from './registerEventStatusChangedHandler.js';
+export type { EventStatusChangeHandler } from './registerEventStatusChangedHandler.js';