uraniyum 1.0.9 → 1.1.0

package/src/styles.ts

@@ -1,164 +1,257 @@
 export type CSSValue = string | number | (() => string | number);
+
 export interface CSSProperties {
-    [key: string]: CSSValue | CSSProperties;
+    [key: string]: CSSValue | CSSProperties | undefined;
+}
+
+export interface StyleRule {
+    [key: string]: CSSValue | CSSProperties | undefined;
 }
-export type StyleRule = CSSProperties & {
-    ':hover'?: CSSProperties;
-    ':focus'?: CSSProperties;
-    ':active'?: CSSProperties;
-    ':disabled'?: CSSProperties;
-    [key: string]: any;
-};
-export type StylesMap<T extends Record<string, any> = {}> = {
-    [K in keyof T]: StyleRule;
-};
-export type ClassNames<T extends Record<string, any>> = { [K in keyof T]: string };
-
-const styleCache = new Map<string, string>();
+
+export type StylesMap = Record<string, StyleRule>;
+export type ClassNames<T extends StylesMap> = { [K in keyof T]: string };
+
+const styleCache = new Map<string, true>();
 const keyframeCache = new Map<string, string>();
 let styleElement: HTMLStyleElement | null = null;
+let styleSheet: CSSStyleSheet | null = null;
 
 const ALLOWED_PREFIXES = [
-    'root', 'button', 'icon', 'text', 'container', 'wrapper',
-    'card', 'header', 'section'
+    "root",
+    "button",
+    "icon",
+    "text",
+    "container",
+    "wrapper",
+    "card",
+    "header",
+    "section",
 ];
 
-function ensureStyleElement() {
-    if (!styleElement) {
-        styleElement = document.createElement('style');
-        styleElement.id = 'styles';
-        document.head.appendChild(styleElement);
+const KEYFRAMES_PREFIX = "@keyframes ";
+
+function ensureStyleSheet(): CSSStyleSheet {
+    if (!styleSheet) {
+        if (!styleElement) {
+            styleElement = document.createElement("style");
+            styleElement.id = "styles";
+            document.head.appendChild(styleElement);
+        }
+        styleSheet = styleElement.sheet as CSSStyleSheet;
     }
-    return styleElement;
+    return styleSheet;
 }
 
 function hashString(str: string): string {
     let hash = 5381;
-    for (let i = 0; i < str.length; i++) hash = (hash * 33) ^ str.charCodeAt(i);
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash * 33) ^ str.charCodeAt(i);
+    }
     return (hash >>> 0).toString(36);
 }
 
-const kebabCache = new Map<string, string>();
+const camelToKebabCache = new Map<string, string>();
+
 function camelToKebab(str: string): string {
-    if (!kebabCache.has(str)) {
-        kebabCache.set(str, str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase());
+    const cached = camelToKebabCache.get(str);
+    if (cached) return cached;
+
+    const result = str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+    camelToKebabCache.set(str, result);
+    return result;
+}
+
+function stableHashRule(rule: Record<string, any>): string {
+    const parts: string[] = [];
+
+    for (const key in rule) {
+        if (!Object.prototype.hasOwnProperty.call(rule, key)) continue;
+        const val = rule[key];
+
+        if (key.startsWith("@") || typeof val === "object" || val == null) continue;
+
+        let v: string;
+        if (typeof val === "function") v = val.toString();
+        else v = String(val);
+
+        parts.push(`${key}:${v}`);
     }
-    return kebabCache.get(str)!;
+
+    parts.sort();
+    return hashString(parts.join("|"));
 }
 
-function stringifyDecls(props: CSSProperties, keyframes: Map<string, string>): string {
+function stringifyDecls(
+    props: Record<string, any>,
+    keyframes: Map<string, string>,
+): string {
     const out: string[] = [];
-    for (const [key, raw] of Object.entries(props)) {
+
+    for (const key in props) {
+        if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
+        const raw = props[key];
+
         if (raw == null || typeof raw === "object") continue;
-        let val = typeof raw === "function" ? raw() : raw;
 
-        if (typeof val === "string") {
+        let val: string | number =
+            typeof raw === "function" ? raw() : (raw as string | number);
+
+        if (typeof val === "string" && keyframes.size > 0) {
             for (const [orig, uniq] of keyframes) {
-                val = val.replaceAll(`$${orig}`, uniq);
+                if (val.includes(`$${orig}`)) {
+                    val = val.replaceAll(`$${orig}`, uniq);
+                }
             }
         }
+
         out.push(`${camelToKebab(key)}:${val}`);
     }
+
     return out.join(";");
 }
 
-const KEYFRAMES_REGEX = /^@keyframes /;
-
-function registerKeyframes(name: string, frames: Record<string, CSSProperties>): string {
+function registerKeyframes(
+    name: string,
+    frames: Record<string, any>,
+): string {
     const hash = hashString(name + JSON.stringify(frames));
     const unique = `${name}-${hash}`;
 
-    if (keyframeCache.has(unique)) return unique;
+    const cached = keyframeCache.get(unique);
+    if (cached) return cached;
+
+    const sheet = ensureStyleSheet();
 
-    const rules = Object.entries(frames)
-        .map(([step, styles]) => `${step}{${stringifyDecls(styles, new Map())}}`)
-        .join("");
+    const steps: string[] = [];
+    for (const step in frames) {
+        if (!Object.prototype.hasOwnProperty.call(frames, step)) continue;
+        const decls = stringifyDecls(frames[step] ?? {}, new Map());
+        steps.push(`${step}{${decls}}`);
+    }
 
-    ensureStyleElement().appendChild(
-        document.createTextNode(`@keyframes ${unique}{${rules}}\n`)
-    );
+    const ruleText = `@keyframes ${unique}{${steps.join("")}}`;
+    sheet.insertRule(ruleText, sheet.cssRules.length);
     keyframeCache.set(unique, unique);
+
     return unique;
 }
 
-function buildRules(className: string, rule: StyleRule, keyframes: Map<string, string>): string[] {
+function buildRules(
+    className: string,
+    rule: Record<string, any>,
+    keyframes: Map<string, string>,
+): string[] {
     const rules: string[] = [];
-    const base: CSSProperties = {};
+    const baseDecls: string[] = [];
 
-    for (const [key, val] of Object.entries(rule)) {
-        if (KEYFRAMES_REGEX.test(key)) continue;
+    for (const key in rule) {
+        if (!Object.prototype.hasOwnProperty.call(rule, key)) continue;
+        const val = rule[key];
 
-        if (key.startsWith(':') && typeof val === "object") {
-            rules.push(`.${className}${key}{${stringifyDecls(val, keyframes)}}`);
+        if (key.startsWith("@keyframes")) {
+            continue;
         }
-        else if (key.startsWith('@media') && typeof val === "object") {
-            rules.push(`${key}{.${className}{${stringifyDecls(val, keyframes)}}}`);
+
+        if (!val) continue;
+
+        if (key[0] === ":" && typeof val === "object") {
+            const decls = stringifyDecls(val ?? {}, keyframes);
+            if (decls) {
+                rules.push(`.${className}${key}{${decls}}`);
+            }
+            continue;
         }
-        else if (key.includes('&') && typeof val === "object") {
-            const selector = key.replaceAll("&", `.${className}`);
-            rules.push(`${selector}{${stringifyDecls(val, keyframes)}}`);
+
+        if (key.startsWith("@media") && typeof val === "object") {
+            const decls = stringifyDecls(val ?? {}, keyframes);
+            if (decls) {
+                rules.push(`${key}{.${className}{${decls}}}`);
+            }
+            continue;
         }
-        else if (!key.startsWith('@')) {
-            base[key] = val;
+
+        if (key.includes("&") && typeof val === "object") {
+            const selector = key.replace(/&/g, `.${className}`);
+            const decls = stringifyDecls(val ?? {}, keyframes);
+            if (decls) {
+                rules.push(`${selector}{${decls}}`);
+            }
+            continue;
+        }
+
+        if (!key.startsWith("@") && typeof val !== "object") {
+            const raw = typeof val === "function" ? val() : val;
+            baseDecls.push(`${camelToKebab(key)}:${raw}`);
         }
     }
 
-    if (Object.keys(base).length > 0) {
-        rules.push(`.${className}{${stringifyDecls(base, keyframes)}}`);
+    if (baseDecls.length > 0) {
+        rules.push(`.${className}{${baseDecls.join(";")}}`);
     }
 
     return rules;
 }
 
 export function makeStyles<T extends StylesMap>(styles: T) {
-    return () => {
+    return (): ClassNames<T> => {
         const classNames = {} as ClassNames<T>;
-        const collectedRules: string[] = [];
         const keyframesMap = new Map<string, string>();
+        const sheet = ensureStyleSheet();
 
-        for (const [key, val] of Object.entries(styles)) {
-            if (KEYFRAMES_REGEX.test(key)) {
-                const name = key.replace('@keyframes ', '');
-                const unique = registerKeyframes(name, val as any);
-                keyframesMap.set(name, unique);
-            }
+        for (const key in styles) {
+            if (!Object.prototype.hasOwnProperty.call(styles, key)) continue;
+            if (!key.startsWith(KEYFRAMES_PREFIX)) continue;
+
+            const name = key.slice(KEYFRAMES_PREFIX.length);
+            const frames = styles[key] as unknown as Record<string, any>;
+            const unique = registerKeyframes(name, frames);
+            keyframesMap.set(name, unique);
         }
 
-        for (const [slot, rule] of Object.entries(styles)) {
-            if (KEYFRAMES_REGEX.test(slot)) continue;
+        for (const slot in styles) {
+            if (!Object.prototype.hasOwnProperty.call(styles, slot)) continue;
+            if (slot.startsWith(KEYFRAMES_PREFIX)) continue;
 
-            const hash = hashString(JSON.stringify(rule));
-            const className =
-                ALLOWED_PREFIXES.includes(slot) ? `${slot}-${hash}` : `css-${hash}`;
+            const rule = styles[slot] as StyleRule;
+            const hash = stableHashRule(rule);
+            const className = ALLOWED_PREFIXES.includes(slot)
+                ? `${slot}-${hash}`
+                : `css-${hash}`;
 
             if (!styleCache.has(className)) {
-                const rules = buildRules(className, rule as StyleRule, keyframesMap);
-                collectedRules.push(...rules);
-                styleCache.set(className, className);
+                const rules = buildRules(className, rule, keyframesMap);
+                for (const r of rules) {
+                    sheet.insertRule(r, sheet.cssRules.length);
+                }
+                styleCache.set(className, true);
             }
 
-            classNames[slot as keyof T] = className;
-        }
-
-        if (collectedRules.length) {
-            const el = ensureStyleElement();
-            for (const r of collectedRules) el.appendChild(document.createTextNode(r + "\n"));
+            (classNames as any)[slot] = className;
         }
 
         return classNames;
     };
 }
 
-export const mergeClasses = (...classes: (string | undefined | null | false)[]) =>
-    classes.filter(Boolean).join(" ");
+export const mergeClasses = (
+    ...classes: (string | undefined | null | false)[]
+) => classes.filter(Boolean).join(" ");
+
+export function mergeStyleSets<T extends StylesMap>(
+    ...sets: (Partial<T> | undefined)[]
+): ClassNames<T> {
+    const merged: StylesMap = {};
 
-export function mergeStyleSets<T extends StylesMap>(...sets: (T | undefined)[]) {
-    const merged: any = {};
     for (const set of sets) {
         if (!set) continue;
-        for (const k in set) {
-            merged[k] = { ...(merged[k] || {}), ...set[k] };
+        for (const key in set) {
+            if (!Object.prototype.hasOwnProperty.call(set, key)) continue;
+
+            const prev = (merged[key] as StyleRule) ?? {};
+            const cur = (set[key] as StyleRule) ?? {};
+            merged[key] = { ...prev, ...cur } as StyleRule;
         }
     }
-    return makeStyles(merged)();
-}
+
+    return makeStyles(merged as T)();
+}

package/src/tags.ts

@@ -1,77 +1,84 @@
-import { derive, state, State } from "./state";
+import { derive, state } from "./state";
+import type { State } from "./state";
 
 function isState(x: any): x is State<any> {
-    return (
-        x &&
-        typeof x === "object" &&
-        "subs" in x &&
-        Object.prototype.hasOwnProperty.call(x, "val")
-    );
+    return x && typeof x === "object" && "subs" in x && "val" in x;
 }
 
-export const tags: Record<string, (attrs?: any, ...children: any[]) => HTMLElement> =
+type Child = Node | string | number | null | undefined | State<any> | (() => any) | Child[];
+
+export const tags: Record<string, (...children: any[]) => HTMLElement> =
     new Proxy({}, {
         get(_, tag: string) {
-            return (attrsOrChild?: any, ...children: any[]) => {
+            return (...children: any[]): HTMLElement => {
                 const el = document.createElement(tag);
 
-                if (
-                    attrsOrChild &&
-                    typeof attrsOrChild === "object" &&
-                    !(attrsOrChild instanceof Node) &&
-                    !isState(attrsOrChild) &&
-                    typeof attrsOrChild !== "function"
-                ) {
-                    for (const [k, v] of Object.entries(attrsOrChild)) {
-                        el.setAttribute(k, String(v));
-                    }
-                } else if (attrsOrChild != null) {
-                    children.unshift(attrsOrChild);
-                }
-
-                for (let child of children.flat()) {
-
-                    if (typeof child === "function") {
-                        let node: Node = document.createTextNode("");
-                        el.appendChild(node);
-
-                        derive(() => {
-                            const value = child();
-
-                            const newNode: Node =
-                                value instanceof Node
-                                    ? value
-                                    : document.createTextNode(String(value ?? ""));
-
-                            node.parentNode?.replaceChild(newNode, node);
-                            node = newNode;
-                        });
-
-                        continue;
-                    }
-
-                    if (isState(child)) {
-                        const node = document.createTextNode(String(child.val));
-                        el.appendChild(node);
-
-                        child.subs.add(() => {
-                            node.textContent = String(child.val);
-                        });
-
-                        continue;
-                    }
-
-                    if (child instanceof Node) {
-                        el.appendChild(child);
-                        continue;
-                    }
-
-                    el.appendChild(
-                        document.createTextNode(String(child))
-                    );
-                }
+                processChildren(el, children);
 
                 return el;
             };
         }
     });
+
+function processChildren(el: HTMLElement, children: any[]) {
+    for (const child of children.flat()) {
+        if (child == null || child === false) continue;
+
+        if (typeof child === "function") {
+            mountReactiveFunction(el, child);
+            continue;
+        }
+
+        if (isState(child)) {
+            mountReactiveState(el, child);
+            continue;
+        }
+
+        if (child instanceof Node) {
+            el.appendChild(child);
+            continue;
+        }
+
+        el.appendChild(document.createTextNode(String(child)));
+    }
+}
+
+function mountReactiveFunction(el: HTMLElement, fn: () => any) {
+    let node: Node = document.createTextNode("");
+    el.appendChild(node);
+
+    derive(() => {
+        const value = fn();
+
+        if (value instanceof Node) {
+            if (node !== value) {
+                node.parentNode?.replaceChild(value, node);
+                node = value;
+            }
+            return;
+        }
+
+        const text = String(value ?? "");
+        if (node.nodeType === Node.TEXT_NODE) {
+            if ((node as Text).data !== text) {
+                (node as Text).data = text;
+            }
+        } else {
+            const newNode = document.createTextNode(text);
+            node.parentNode?.replaceChild(newNode, node);
+            node = newNode;
+        }
+    });
+}
+
+function mountReactiveState(el: HTMLElement, st: State<any>) {
+    const node = document.createTextNode(String(st.val));
+    el.appendChild(node);
+
+    st.subs.add(() => {
+        const newVal = String(st.val);
+        if (node.data !== newVal) {
+            node.data = newVal;
+        }
+    });
+}