@ahriknow/lux 0.0.1

package/src/element.js

@@ -0,0 +1,477 @@
+/**
+ * LuxElement — Base class for Web Components.
+ *
+ * Inherits: HTMLElement → LuxElement
+ * Features: reactive properties, Shadow DOM, lifecycle, controllers, update batching
+ */
+
+import { html, render, isTemplateResult } from './template.js';
+
+// ─── Update scheduling ───
+const pendingUpdates = new Set();
+let updateScheduled = false;
+
+function scheduleMicroTask(fn) {
+    Promise.resolve().then(fn);
+}
+
+function enqueueUpdate(element) {
+    pendingUpdates.add(element);
+    if (!updateScheduled) {
+        updateScheduled = true;
+        scheduleMicroTask(() => {
+            updateScheduled = false;
+            const elements = [...pendingUpdates];
+            pendingUpdates.clear();
+            for (const el of elements) {
+                el._$performUpdate();
+            }
+        });
+    }
+}
+
+// ─── Default converter (attribute ↔ property) ───
+const defaultConverter = {
+    toAttribute(value, type) {
+        switch (type) {
+            case Boolean:
+                return value ? '' : null;
+            case Object:
+            case Array:
+                return value == null ? null : JSON.stringify(value);
+            default:
+                return value;
+        }
+    },
+    fromAttribute(value, type) {
+        switch (type) {
+            case Boolean:
+                return value !== null;
+            case Number:
+                return Number(value);
+            case Object:
+            case Array:
+                try {
+                    return JSON.parse(value);
+                } catch {
+                    return null;
+                }
+            default:
+                return value;
+        }
+    },
+};
+
+// ─── LuxElement ───
+export class LuxElement extends HTMLElement {
+    // ─── Static: properties declaration ───
+    static properties = {};
+    static styles = undefined;
+
+    // ─── Static: finalization ───
+    static finalized = false;
+    static elementProperties = new Map();
+
+    // ─── Static: __prepare() — subclass isolation ───
+    static __prepare() {
+        if (this.hasOwnProperty('elementProperties')) {
+            return;
+        }
+        // Finalize any superclasses first
+        const superCtor = Object.getPrototypeOf(this);
+        if (superCtor.finalize) {
+            superCtor.finalize();
+        }
+        // Copy superclass elementProperties into own Map
+        this.elementProperties = new Map(superCtor.elementProperties);
+    }
+
+    static get observedAttributes() {
+        this.finalize();
+        return this.__attributeToPropertyMap ? [...this.__attributeToPropertyMap.keys()] : [];
+    }
+
+    static finalize() {
+        if (this.hasOwnProperty('finalized')) {
+            return;
+        }
+        this.finalized = true;
+        this.__prepare();
+
+        // Create properties from the static properties block
+        if (this.hasOwnProperty('properties')) {
+            const props = this.properties;
+            const propKeys = [
+                ...Object.getOwnPropertyNames(props),
+                ...Object.getOwnPropertySymbols(props),
+            ];
+            for (const p of propKeys) {
+                this.createProperty(p, props[p]);
+            }
+        }
+
+        // Create the attribute-to-property map
+        this.__attributeToPropertyMap = new Map();
+        for (const [p, options] of this.elementProperties) {
+            const attr = this.__attributeNameForProperty(p, options);
+            if (attr !== undefined) {
+                this.__attributeToPropertyMap.set(attr, p);
+            }
+        }
+
+        this.elementStyles = this.styles;
+    }
+
+    static __attributeNameForProperty(name, options) {
+        const attribute = options.attribute;
+        return attribute === false
+            ? undefined
+            : typeof attribute === 'string'
+              ? attribute
+              : typeof name === 'string'
+                ? name.replace(/([A-Z])/g, '-$1').toLowerCase()
+                : undefined;
+    }
+
+    // ─── Static: createProperty ───
+    static createProperty(name, options = {}) {
+        this.__prepare();
+        if (this.elementProperties.has(name)) return;
+
+        if (options.state) {
+            options = { ...options, attribute: false };
+        }
+
+        this.elementProperties.set(name, options);
+
+        if (!options.noAccessor) {
+            const key = Symbol();
+            const descriptor = this.getPropertyDescriptor(name, key, options);
+            if (descriptor !== undefined) {
+                Object.defineProperty(this.prototype, name, descriptor);
+            }
+        }
+    }
+
+    static getPropertyDescriptor(name, key, options) {
+        const { type, reflect, converter } = options;
+        const toAttribute = converter?.toAttribute ?? defaultConverter.toAttribute;
+
+        return {
+            get() {
+                return this[key];
+            },
+            set(value) {
+                const oldValue = this[key];
+                this[key] = value;
+                this.requestUpdate(name, oldValue, options);
+            },
+            configurable: true,
+            enumerable: true,
+        };
+    }
+
+    // ─── Static: addInitializer ───
+    static _initializers = [];
+
+    static addInitializer(fn) {
+        this._initializers = [...(this._initializers || []), fn];
+    }
+
+    // ─── Static: shadowRootOptions ───
+    static shadowRootOptions = { mode: 'open' };
+
+    // ─── Constructor ───
+    constructor() {
+        super();
+
+        this.__updatePending = false;
+        this.__hasUpdated = false;
+        this.__controllers = new Set();
+        this.__reflectingProperty = null;
+
+        // Ensure finalized
+        if (!this.constructor.hasOwnProperty('finalized')) {
+            this.constructor.finalize();
+        }
+
+        // CloneNode support: save any properties set before upgrade
+        this.__saveInstanceProperties();
+
+        this.requestUpdate();
+
+        for (const fn of this.constructor._initializers || []) {
+            fn(this);
+        }
+    }
+
+    // ─── Instance properties save/replay (cloneNode support) ───
+    __saveInstanceProperties() {
+        const elementProperties = this.constructor.elementProperties;
+        if (!elementProperties) return;
+
+        for (const [name, options] of elementProperties) {
+            if (options.noAccessor) continue;
+
+            if (this.hasOwnProperty(name)) {
+                // Plain property set before setter was defined (cloneNode)
+                const value = this[name];
+                delete this[name];
+                // Store via the Symbol key
+                this.__instancePropertyValues = this.__instancePropertyValues || new Map();
+                this.__instancePropertyValues.set(name, value);
+            }
+        }
+    }
+
+    // ─── Lifecycle callbacks ───
+    connectedCallback() {
+        this.__controllers.forEach((c) => c.hostConnected?.());
+
+        // Ensure finalized
+        if (!this.constructor.hasOwnProperty('finalized')) {
+            this.constructor.finalize();
+        }
+
+        // Sync existing attributes to properties (upgrade scenario)
+        // attributeChangedCallback doesn't fire for pre-existing attributes
+        const attrMap = this.constructor.__attributeToPropertyMap;
+        if (attrMap) {
+            for (const [attrName, propName] of attrMap) {
+                const value = this.getAttribute(attrName);
+                if (value !== null) {
+                    const options = this.constructor.elementProperties.get(propName);
+                    if (options) {
+                        const fromAttr =
+                            options.converter?.fromAttribute ?? defaultConverter.fromAttribute;
+                        this[propName] = fromAttr(value, options.type);
+                    }
+                }
+            }
+        }
+
+        // Replay instance properties saved by __saveInstanceProperties (cloneNode)
+        if (this.__instancePropertyValues) {
+            for (const [name, value] of this.__instancePropertyValues) {
+                this[name] = value;
+            }
+            this.__instancePropertyValues = undefined;
+        }
+
+        // Ensure renderRoot is created
+        this.renderRoot;
+
+        // Trigger first update if not yet done
+        if (!this.__hasUpdated) {
+            this.requestUpdate();
+        }
+    }
+
+    disconnectedCallback() {
+        this.__controllers.forEach((c) => c.hostDisconnected?.());
+    }
+
+    attributeChangedCallback(name, _old, value) {
+        const propName = this.constructor.__attributeToPropertyMap?.get(name);
+        if (propName !== undefined && this.__reflectingProperty !== propName) {
+            const options = this.constructor.elementProperties.get(propName);
+            if (options) {
+                const converter =
+                    typeof options.converter === 'function'
+                        ? { fromAttribute: options.converter }
+                        : options.converter?.fromAttribute !== undefined
+                          ? options.converter
+                          : defaultConverter;
+                this.__reflectingProperty = propName;
+                const convertedValue = converter.fromAttribute(value, options.type);
+                this[propName] = convertedValue;
+                this.__reflectingProperty = null;
+            }
+        }
+    }
+
+    // ─── RenderRoot & Styles ───
+    get renderRoot() {
+        if (!this._renderRoot) {
+            this._renderRoot = this.createRenderRoot();
+            this.__adoptStyles();
+        }
+        return this._renderRoot;
+    }
+
+    createRenderRoot() {
+        return this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    }
+
+    __adoptStyles() {
+        const styles = this.constructor.elementStyles;
+        if (!styles) return;
+
+        const items = Array.isArray(styles) ? styles : [styles];
+        const parts = [];
+        for (const item of items) {
+            if (typeof item === 'string') {
+                parts.push(item);
+            } else if (isTemplateResult(item)) {
+                parts.push(item.strings.join(''));
+            }
+        }
+        if (parts.length === 0) return;
+
+        if (this._renderRoot.adoptedStyleSheets !== undefined) {
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(parts.join('\n'));
+            this._renderRoot.adoptedStyleSheets = [...this._renderRoot.adoptedStyleSheets, sheet];
+        } else {
+            const tag = document.createElement('style');
+            tag.textContent = parts.join('\n');
+            this._renderRoot.appendChild(tag);
+        }
+    }
+
+    // ─── Update lifecycle ───
+    enableUpdating(_requestedUpdate) {}
+
+    get updateComplete() {
+        return this.__updateCompletePromise ?? Promise.resolve();
+    }
+
+    get hasUpdated() {
+        return this.__hasUpdated;
+    }
+
+    get isUpdatePending() {
+        return this.__updatePending;
+    }
+
+    requestUpdate(name, oldValue, options) {
+        if (name !== undefined) {
+            const hasChanged = options?.hasChanged ?? ((v, o) => !Object.is(v, o));
+            if (!hasChanged(this[name], oldValue)) return;
+        }
+
+        if (!this.__updatePending) {
+            this.__updatePending = true;
+            enqueueUpdate(this);
+        }
+    }
+
+    async performUpdate() {
+        if (!this.isUpdatePending) return;
+
+        this.__updatePending = false;
+
+        this.willUpdate(new Map());
+
+        this.__controllers.forEach((c) => c.hostUpdate?.());
+
+        this.update(new Map());
+
+        this.__hasUpdated = true;
+
+        // Reflect properties to attributes after update
+        for (const [name, options] of this.constructor.elementProperties) {
+            if (options.reflect) {
+                const value = this[name];
+                const toAttribute = options.converter?.toAttribute ?? defaultConverter.toAttribute;
+                const attr = this.constructor.__attributeNameForProperty(name, options);
+                if (attr !== undefined) {
+                    this.__reflectingProperty = name;
+                    const attrValue = toAttribute(value, options.type);
+                    if (attrValue === null || attrValue === undefined) {
+                        this.removeAttribute(attr);
+                    } else {
+                        this.setAttribute(attr, String(attrValue));
+                    }
+                    this.__reflectingProperty = null;
+                }
+            }
+        }
+
+        this.__controllers.forEach((c) => c.hostUpdated?.());
+        this.firstUpdated(new Map());
+        this.updated(new Map());
+    }
+
+    _$performUpdate() {
+        this.performUpdate();
+    }
+
+    // ─── Lifecycle hooks ───
+    shouldUpdate(_changedProperties) {
+        return true;
+    }
+
+    willUpdate(_changedProperties) {}
+
+    update(_changedProperties) {
+        const result = this.render();
+        if (result) {
+            render(result, this.renderRoot, { host: this });
+        }
+    }
+
+    render() {
+        return html``;
+    }
+
+    firstUpdated(_changedProperties) {}
+    updated(_changedProperties) {}
+    propertyChangedCallback(_name, _oldValue, _newValue) {}
+
+    // ─── Controller API ───
+    addController(controller) {
+        this.__controllers.add(controller);
+        if (this.isConnected) {
+            controller.hostConnected?.();
+        }
+    }
+
+    removeController(controller) {
+        this.__controllers.delete(controller);
+    }
+
+    // ─── Utilities ───
+    emit(type, detail, options = {}) {
+        return this.dispatchEvent(
+            new CustomEvent(type, {
+                detail,
+                bubbles: true,
+                composed: true,
+                ...options,
+            })
+        );
+    }
+
+    $(selector) {
+        return this.renderRoot.querySelector(selector);
+    }
+
+    $$(selector) {
+        return this.renderRoot.querySelectorAll(selector);
+    }
+}
+
+// ─── Register component ───
+export function registerComponent(name, component) {
+    if (!name.includes('-')) {
+        throw new Error(`Component name must contain a hyphen: ${name}`);
+    }
+    if (!customElements.get(name)) {
+        customElements.define(name, component);
+    }
+}
+
+// ─── createComponent (function-based components) ───
+export function createComponent(renderFn, options = {}) {
+    const { properties = {} } = options;
+
+    class DynamicComponent extends LuxElement {
+        static properties = properties;
+        render() {
+            return renderFn.call(this, this);
+        }
+    }
+
+    return DynamicComponent;
+}

package/src/i18n/format.js

@@ -0,0 +1,108 @@
+/**
+ * ICU MessageFormat subset parser
+ *
+ * Supports:
+ *   - Simple interpolation: "Hello, {name}"
+ *   - Plural: "{count, plural, =0{No items} =1{# item} other{# items}}"
+ *   - Select: "{gender, select, male{He} female{She} other{They}}"
+ */
+
+/**
+ * Find the matching closing brace for an opening brace at position `start`.
+ */
+function findMatchingBrace(str, start) {
+    let depth = 1;
+    for (let i = start + 1; i < str.length; i++) {
+        if (str[i] === '{') depth++;
+        else if (str[i] === '}') {
+            depth--;
+            if (depth === 0) return i;
+        }
+    }
+    return -1;
+}
+
+/**
+ * Extract all top-level {...} expressions from the template.
+ */
+function extractExpressions(template) {
+    const parts = [];
+    let i = 0;
+    while (i < template.length) {
+        if (template[i] === '{') {
+            const end = findMatchingBrace(template, i);
+            if (end !== -1) {
+                parts.push({ start: i, end, expr: template.slice(i + 1, end) });
+                i = end + 1;
+                continue;
+            }
+        }
+        i++;
+    }
+    return parts;
+}
+
+export function formatMessage(template, values = {}) {
+    if (!template || typeof template !== 'string') return '';
+
+    const exprs = extractExpressions(template);
+    let result = '';
+    let lastIdx = 0;
+
+    for (const { start, end, expr } of exprs) {
+        result += template.slice(lastIdx, start);
+        const trimmed = expr.trim();
+
+        // Plural: {key, plural, =N{...} other{...}}
+        const pluralMatch = trimmed.match(/^(\w+),\s*plural\s*,\s*(.+)$/);
+        if (pluralMatch) {
+            const [, key, rules] = pluralMatch;
+            const count = Number(values[key]) || 0;
+            result += formatPlural(count, rules);
+            lastIdx = end + 1;
+            continue;
+        }
+
+        // Select: {key, select, val1{...} val2{...}}
+        const selectMatch = trimmed.match(/^(\w+),\s*select\s*,\s*(.+)$/);
+        if (selectMatch) {
+            const [, key, rules] = selectMatch;
+            const value = String(values[key] || '');
+            result += formatSelect(value, rules);
+            lastIdx = end + 1;
+            continue;
+        }
+
+        // Simple interpolation: {key}
+        result += values[trimmed] ?? template.slice(start, end + 1);
+        lastIdx = end + 1;
+    }
+
+    result += template.slice(lastIdx);
+    return result;
+}
+
+function formatPlural(count, rulesStr) {
+    const rules = parseRules(rulesStr);
+    const exact = rules[`=${count}`];
+    if (exact !== undefined) return exact.replace(/#/g, String(count));
+
+    const key = count === 1 ? 'one' : 'other';
+    const rule = rules[key] || rules['other'] || '';
+    return rule.replace(/#/g, String(count));
+}
+
+function formatSelect(value, rulesStr) {
+    const rules = parseRules(rulesStr);
+    return rules[value] || rules['other'] || '';
+}
+
+function parseRules(rulesStr) {
+    const rules = {};
+    const re = /(\w+|=\d+)\{([^}]*)\}/g;
+    let m;
+    while ((m = re.exec(rulesStr))) {
+        rules[m[1]] = m[2];
+    }
+    return rules;
+}

package/src/i18n/index.js

@@ -0,0 +1,102 @@
+/**
+ * Lux i18n — Lightweight internationalization
+ *
+ * Usage:
+ *   import { createI18n, msg, number, date } from 'lux/i18n';
+ *
+ *   const i18n = createI18n({
+ *     locale: 'zh-CN',
+ *     messages: {
+ *       'zh-CN': { hello: '你好', welcome: '欢迎, {name}' },
+ *       'en': { hello: 'Hello', welcome: 'Welcome, {name}' },
+ *     }
+ *   });
+ *
+ *   // In templates
+ *   html`<h1>${msg('hello')}</h1>`
+ *   html`<p>${msg('welcome', { name: 'Alice' })}</p>`
+ *   html`<span>${msg('items', { count: 5 })}</span>`
+ *
+ *   // Number/date formatting
+ *   html`<span>${number(1234567)}</span>`
+ *   html`<span>${date(new Date())}</span>`
+ */
+
+import { formatMessage } from './format.js';
+import { getDefaultLocale, formatNumber, formatDate } from './locale.js';
+
+let currentLocale = '';
+let currentMessages = {};
+let listeners = [];
+
+/**
+ * Get the current translation for a key.
+ */
+export function msg(key, values = {}) {
+    const dict = currentMessages[currentLocale] || currentMessages;
+    const template = dict[key] ?? key;
+    return formatMessage(template, values);
+}
+
+/**
+ * Format a number using Intl.NumberFormat.
+ */
+export function number(value, options) {
+    return formatNumber(
+        value,
+        typeof options === 'string' ? { style: options } : options,
+        currentLocale
+    );
+}
+
+/**
+ * Format a date using Intl.DateTimeFormat.
+ */
+export function date(value, options) {
+    return formatDate(value, options, currentLocale);
+}
+
+/**
+ * Get the current locale string.
+ */
+export function getLocale() {
+    return currentLocale;
+}
+
+/**
+ * Create an i18n instance.
+ *
+ * @param {Object} options
+ * @param {string} options.locale - Initial locale (default: navigator.language)
+ * @param {Object} messages - { 'zh-CN': {...}, 'en': {...} }
+ * @returns {Object} i18n instance
+ */
+export function createI18n(options = {}) {
+    currentLocale = options.locale || getDefaultLocale();
+    currentMessages = options.messages || {};
+
+    function setLocale(locale) {
+        currentLocale = locale;
+        for (const fn of listeners) fn(locale);
+    }
+
+    function onLocaleChange(fn) {
+        listeners.push(fn);
+        return () => {
+            const i = listeners.indexOf(fn);
+            if (i >= 0) listeners.splice(i, 1);
+        };
+    }
+
+    return {
+        get locale() {
+            return currentLocale;
+        },
+        setLocale,
+        onLocaleChange,
+        msg,
+        number,
+        date,
+        getLocale,
+    };
+}

package/src/i18n/locale.js

@@ -0,0 +1,26 @@
+/**
+ * Locale detection
+ */
+
+export function getDefaultLocale() {
+    if (typeof navigator !== 'undefined' && navigator.language) {
+        return navigator.language;
+    }
+    return 'en';
+}
+
+export function formatNumber(value, options = {}, locale) {
+    try {
+        return new Intl.NumberFormat(locale, options).format(value);
+    } catch {
+        return String(value);
+    }
+}
+
+export function formatDate(value, options = {}, locale) {
+    try {
+        return new Intl.DateTimeFormat(locale, options).format(value);
+    } catch {
+        return String(value);
+    }
+}