amateras 0.10.1 → 0.11.0

package/packages/core/src/lib/hmr.ts

@@ -0,0 +1,145 @@
+import { ElementProto } from "#structure/ElementProto";
+import { NodeProto } from "#structure/NodeProto";
+import { Proto } from "#structure/Proto";
+import { ProxyProto } from "#structure/ProxyProto";
+import { TextProto } from "#structure/TextProto";
+import { _Array_from, _instanceof, _undefined, forEach, is } from "@amateras/utils";
+import { symbol_ProtoType } from "./symbols";
+
+const elementProtoMap = import.meta.hot?.data.protoMap ?? new Map<HTMLElement, Proto>()
+// save data before HMR
+if (import.meta.hot) import.meta.hot.dispose(data => {
+    data.protoMap = elementProtoMap;
+})
+
+export const hmr = (element: HTMLElement, proto: Proto): boolean => {
+    if (!import.meta.hot) return false;
+
+    function replace() {
+        let nodes = proto.build().toDOM();
+        element.replaceChildren(...nodes);
+        elementProtoMap.set(element, proto);
+    }
+
+    // get proto from data;
+    const oldProto = elementProtoMap.get(element);
+    if (!oldProto) return replace(), true;
+
+    diff(element, proto.build(), oldProto)
+    elementProtoMap.set(element, proto);
+        
+    return true;
+}
+
+
+function diff(parentElement: HTMLElement, newProto: Proto, oldProto?: Proto, prevSibling?: Node): void {
+    // console.table({
+    //     parent: [parentElement], 
+    //     new: [newProto, newProto.toString()], 
+    //     old: [oldProto, oldProto?.toString()], 
+    //     prev: [prevSibling]
+    // })
+    function processNoneNodeProto() {
+        // None node Proto type
+        if (prevSibling) {
+            if (prevSibling.nextSibling)
+                forEach(newProto.toDOM(), newNode => parentElement.insertBefore(newNode,prevSibling.nextSibling))
+            else parentElement.append(...newProto.toDOM())
+        }
+        else {
+            parentElement.replaceChildren(...newProto.toDOM())
+        }
+    }
+
+    function transferNode() {
+        if (!_instanceof(oldProto, NodeProto) || !_instanceof(newProto, NodeProto)) return;
+        newProto.node = oldProto.node;
+        oldProto.dispose();
+        forEach(newProto.modifiers, mod => {
+            if (!newProto.node) throw 'diff:transferNode:newProto.node==null'
+            mod(newProto.node)
+        })
+    }
+
+    if (!oldProto) {
+        processNoneNodeProto();
+        return;
+    }
+    //@ts-ignore
+    if (oldProto.constructor[symbol_ProtoType] !== 'Widget' || newProto.constructor[symbol_ProtoType] !== 'Widget') 
+    if (oldProto.constructor !== newProto.constructor) {
+        if (_instanceof(oldProto, NodeProto)) {
+            forEach(newProto.toDOM(), newNode => oldProto.node?.parentNode?.insertBefore(newNode, oldProto.node));
+            oldProto.removeNode();
+            oldProto.dispose();
+            return;
+        }
+        processNoneNodeProto();
+        oldProto.dispose();
+        return;
+    }
+    
+    if (_instanceof(oldProto, ProxyProto)) {
+        oldProto.node?.replaceWith(...newProto.toDOM());
+        oldProto.removeNode();
+        return;
+    }
+    if (_instanceof(oldProto, TextProto) && _instanceof(newProto, TextProto)) {
+        if (oldProto.content !== newProto.content) {
+            oldProto.node!.textContent = newProto.content;
+        }
+        transferNode();
+        return;
+    }
+    if (_instanceof(oldProto, ElementProto) && _instanceof(newProto, ElementProto)) {
+        if (!oldProto.node) return processNoneNodeProto();
+        if (oldProto.tagname !== newProto.tagname) {
+            oldProto.node?.replaceWith(...newProto.toDOM());
+            return;
+        };
+        let newAttrList = _Array_from(newProto.attr())
+        let nodeAttrList = _Array_from(oldProto.node.attributes);
+        let length = Math.max(newAttrList.length, nodeAttrList.length);
+        for (let i = 0; i < length; i++) {
+            let newAttr = newAttrList[i];
+            let nodeAttr = nodeAttrList[i];
+            if (!nodeAttr && newAttr) {
+                oldProto.node.setAttribute(newAttr[0], newAttr[1])
+                continue;
+            }
+            if (nodeAttr) {
+                if (!newAttr) {
+                    oldProto.node.removeAttributeNode(nodeAttr);
+                    continue;
+                }
+                else {
+                    if (nodeAttr.value !== newAttr[1]) nodeAttr.value = newAttr[1];
+                    continue;
+                }
+            }
+            throw 'diff:newAttr==nodeAttr==undefined';
+        }
+        transferNode();
+    }
+
+    const oldProtoList = _Array_from(oldProto.protos);
+    const newProtoList = _Array_from(newProto.protos);
+    let length = Math.max(oldProto.protos.size, newProto.protos.size);
+    let prevNode: Node | undefined = is(oldProto, ProxyProto)?.node ?? _undefined;
+    for (let i = 0; i < length; i++) {
+        const oldChildProto = oldProtoList[i];
+        const newChildProto = newProtoList[i];
+        if (!newChildProto) {
+            if (oldChildProto) oldChildProto.removeNode();
+            continue;
+        };
+        const parent = is(oldProto, ElementProto)?.node ?? parentElement;
+        diff(parent, newChildProto, oldChildProto, prevNode);
+        // set current child proto to be prev proto;
+        if (_instanceof(newChildProto, NodeProto)) {
+            // current proto node should not be undefined
+            if (!newChildProto.node) throw 'diff:newChildProto.node==undefined';
+            prevNode = newChildProto.node;
+        }
+    }
+}

package/packages/core/src/lib/symbols.ts

@@ -0,0 +1,2 @@
+export const symbol_ProtoType = Symbol('ProtoType');
+export const symbol_Statement = Symbol('Statement');

package/packages/core/src/structure/ElementProto.ts

@@ -0,0 +1,95 @@
+import { _Array_from, _Object_entries, forEach, isNull, isUndefined, map } from "@amateras/utils";
+import { NodeProto } from "./NodeProto";
+
+const SELF_CLOSING_TAGNAMES = ['img', 'hr', 'br', 'input', 'link', 'meta'];
+
+export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto<H> {
+    tagname: string;
+    #attr = new Map<string, string>();
+    declare layout: $.Layout | null;
+    #innerHTML = '';
+    constructor(tagname: string, props: $.Props | null, layout?: $.Layout | null) {
+        super(() => layout?.(this));
+        this.tagname = tagname;
+        if (props) this.attrProcess(props);
+    }
+
+    on<K extends keyof HTMLElementEventMap>(type: K, listener: (event: HTMLElementEventMap[K] & { currentTarget: H }) => void) {
+        this.ondom(node => {
+            node.addEventListener(type, listener as any)
+            this.disposers.add(() => node.removeEventListener(type, listener as any))
+        });
+    }
+
+    override toString(): string {
+        return this.parseHTML()
+    }
+
+    parseHTML(options?: { children?: string, attr?: string }) {
+        let tagname = this.tagname;
+        let childrenHTML = options?.children ?? (this.#innerHTML || map(this.protos, proto => `${proto}`).join(''));
+        let attr = options?.attr ?? map(this.#attr, ([key, value]) => value.length ? `${key}="${value}"` : key).join(' ');
+        let attrText = attr.length ? ' ' + attr : '';
+        if (SELF_CLOSING_TAGNAMES.includes(tagname)) return `<${tagname}${attrText} />`;
+        return `<${tagname}${attrText}>${childrenHTML}</${tagname}>`;
+    }
+
+    override toDOM(children = true): H[] {
+        if (this.node) return [this.node];
+        let element = document.createElement(this.tagname) as H;
+        this.node = element;
+        if (this.#innerHTML) this.node.innerHTML = this.#innerHTML;
+        else if (children) element.append(...map(this.protos, proto => proto.toDOM(children)).flat());
+        forEach(this.#attr, ([key, value]) => element.setAttribute(key, value));
+        forEach(this.modifiers, process => process(element));
+        return [element];
+    }
+
+    private attrProcess(attrObj: $.Props) {
+        forEach(_Object_entries(attrObj), ([key, value]) => {
+            for (let process of $.process.attr) {
+                let result = process(key, value, this as any);
+                if (!isUndefined(result)) return;
+            }
+            this.attr(key, value);
+        })
+    }
+
+    innerHTML(html: string) {
+        this.#innerHTML = html;
+    }
+
+    attr(): Map<string, string>;
+    attr(attrName: string): string | undefined;
+    attr(attrName: string, attrValue: string | null): this;
+    attr(attrName?: string, attrValue?: string | null) {
+        if (!arguments.length) return this.#attr;
+        if (isUndefined(attrValue)) return this.#attr.get(attrName!);
+        if (isNull(attrValue)) {
+            this.#attr.delete(attrName!);
+            this.node?.removeAttribute(attrName!);
+        }
+        else {
+            this.#attr.set(attrName!, attrValue);
+            this.node?.setAttribute(attrName!, attrValue);
+        }
+        return this;
+    }
+
+    addClass(...tokens: string[]) {
+        this.token('add', 'class', ...tokens)
+        this.node?.classList.add(...tokens);
+    }
+
+    removeClass(...tokens: string[]) {
+        this.token('delete', 'class', ...tokens)
+        this.node?.classList.remove(...tokens);
+    }
+
+    private token(method: 'add' | 'delete', name: string, ...tokens: string[]) {
+        let value = this.#attr.get(name);
+        let tokenArr = new Set(value?.split(' ') ?? []);
+        forEach(tokens, t => tokenArr[method](t));
+        this.#attr.set(name, _Array_from(tokenArr).join(' '));
+    }
+}

package/packages/core/src/structure/GlobalState.ts

@@ -0,0 +1,9 @@
+import { forEach } from "@amateras/utils";
+
+export class GlobalState {
+    static disposers = new Set<(global: GlobalState) => void>()
+
+    dispose() {
+        forEach(GlobalState.disposers, disposer => disposer(this))
+    }
+}

package/packages/core/src/structure/NodeProto.ts

@@ -0,0 +1,18 @@
+import { _null } from "@amateras/utils";
+import { Proto } from "./Proto";
+
+export class NodeProto<N extends Node & ChildNode = Node & ChildNode> extends Proto {
+    node: null | N = _null;
+    modifiers = new Set<(node: N) => void>();
+    constructor(layout?: $.Layout) {
+        super(layout);
+    }
+
+    ondom(callback: (node: N) => void) {
+        this.modifiers.add(callback);
+    }
+
+    override removeNode(): void {
+        this.node?.remove();
+    }
+}

package/packages/core/src/structure/Proto.ts

@@ -0,0 +1,90 @@
+import { symbol_ProtoType, symbol_Statement } from "#lib/symbols";
+import { _null, forEach, map } from "@amateras/utils";
+import { GlobalState } from "./GlobalState";
+
+export type ProtoLayout = (...args: any[]) => void;
+
+export abstract class Proto {
+    static proto: Proto | null = _null; 
+    static [symbol_ProtoType] = 'Proto';
+    static [symbol_Statement] = false;
+    protos = new Set<Proto>();
+    disposers = new Set<() => void>();
+    layout: $.Layout | null;
+    #parent: Proto | null = _null;
+    global: GlobalState = Proto.proto?.global ?? new GlobalState();
+    /**
+     * @virtual This property is phantom types, declare the return type of {@link Proto.children}
+     * @deprecated
+     */
+    declare __child__: Proto;
+    constructor(layout?: $.Layout) {
+        this.layout = layout ?? _null;
+    }
+
+    set parent(proto: Proto | null) { 
+        this.#parent?.protos.delete(this);
+        this.#parent = proto;
+        if (proto) this.global = proto.global;
+        proto?.protos.add(this);
+    }
+
+    get parent() {
+        return this.#parent;
+    }
+
+    get children(): this['__child__'][] {
+        return map(this.protos, proto => {
+            //@ts-ignore
+            if (proto.constructor[symbol_Statement]) 
+                return proto.children
+            else return proto
+        }).flat()
+    }
+
+    build(children = true): this {
+        this.clear(true);
+        $.context(Proto, this, () => this.layout?.(this));
+        if (children) forEach(this.protos, proto => {
+            proto.build()
+        });
+        return this
+    }
+
+    toString(): string {
+        return map(this.protos, proto => `${proto}`).join('')
+    }
+
+    toDOM(children = true): Node[] {
+        return children ? map(this.protos, proto => proto.toDOM(children)).flat() : [];
+    }
+
+    dispose() {
+        forEach(this.disposers, disposer => disposer());
+        forEach(this.protos, proto => proto.dispose());
+    }
+
+    removeNode() {
+        forEach(this.protos, proto => proto.removeNode());
+    }
+
+    clear(dispose = false) {
+        this.protos.clear();
+        if (dispose) forEach(this.protos, proto => proto.dispose())
+    }
+
+    findAbove<T>(filter: (proto: Proto) => boolean | T | void | null): T | null {
+        let parent = this.parent;
+        if (parent) return filter(parent) ? parent as T : parent.findAbove(filter);
+        return _null;
+    }
+
+    findBelow(filter: (proto: Proto) => boolean | void): Proto | null {
+        for (let proto of this.protos) {
+            if (filter(proto)) return proto;
+            let nested = proto.findBelow(filter);
+            if (nested) return nested;
+        }
+        return _null;
+    }
+}

package/packages/core/src/structure/ProxyProto.ts

@@ -0,0 +1,20 @@
+import { onclient } from "#env";
+import { forEach } from "@amateras/utils";
+import { NodeProto } from "./NodeProto";
+
+export class ProxyProto extends NodeProto<Text> {
+    declare node: Text | null
+    constructor(layout?: $.Layout) {
+        super(layout);
+        if (onclient()) this.node = new Text();
+    }
+
+    override toDOM(): Node[] {
+        return [this.node!, ...super.toDOM()]
+    }
+
+    override removeNode(): void {
+        super.removeNode();
+        forEach(this.protos, proto => proto.removeNode())
+    }
+}

package/packages/core/src/structure/TextProto.ts

@@ -0,0 +1,22 @@
+import { forEach } from "@amateras/utils";
+import { NodeProto } from "./NodeProto";
+
+export class TextProto extends NodeProto<Text> {
+    content: string;
+    constructor(content: string) {
+        super();
+        this.content = content;
+    }
+
+    override toString(): string {
+        return this.content;
+    }
+
+    override toDOM(): Text[] {
+        if (this.node) return [this.node];
+        let node = new Text(this.content);
+        this.node = node;
+        forEach(this.modifiers, mod => mod(node));
+        return [node];
+    }
+}

package/packages/core/src/structure/WidgetEvent.ts

@@ -0,0 +1,17 @@
+import { forEach } from "@amateras/utils";
+
+export class WidgetEvent {
+    name: string;
+    subs = new Set<() => void>();
+    constructor(name: string) {
+        this.name = name;
+    }
+
+    emit() {
+        forEach(this.subs, sub => sub())
+    }
+
+    listen(sub: () => void) {
+        this.subs.add(sub);
+    }
+}

package/packages/css/README.md

@@ -0,0 +1,128 @@
+# amateras/css
+
+## Usage
+```ts
+import 'amateras';
+import 'amateras/css';
+```
+
+## Define Style
+```ts
+const style = $.css({
+    backgroundColor: 'black',
+    margin: 0,
+
+    'p': {
+        color: 'blue'
+
+        '@media (max-width: 800px)': {
+            color: 'red'
+        }
+    }
+})
+
+$(document.body).css(style).content([
+    $('p').content('Text with blue color.')
+]);
+```
+
+## Define Style in Method Chain
+```ts
+$(document.body).content([
+    $('h1').css({ color: 'red' }).content('This is a title with red color!')
+])
+```
+
+## Define Variables
+
+### Single Variable
+```ts
+const largeText = $.css.variables('1.2rem');
+
+$.css({
+    fontSize: largeText
+})
+```
+
+### Variable Group
+```ts
+const text = $.css.variables({
+    small: '0.8rem',
+    medium: '1rem',
+    large: '1.2rem'
+})
+
+$.css({
+    fontSize: text.large
+})
+```
+
+## Define Keyframes
+```ts
+const keyframes = $.css.keyframes({
+    fadeIn: {
+        '0%': { opacity: 0 },
+        '100%': { opacity: 1 }
+    },
+    fadeOut: {
+        from: { opacity: 1 },
+        to: { opacity: 0 }
+    }
+})
+
+$.css({
+    animation: keyframes.fadeIn
+})
+```
+
+## Define CSS Rules with Selectors
+```ts
+$.CSS({
+    'html': {
+        fontSize: '18px',
+        fontFamily: 'Noto Sans',
+
+        'body': {
+            margin: 0,
+
+            '.title': {
+                color: 'red'
+            }
+        }
+    },
+
+    '@media (max-width: 800px)': {
+        'html': {
+            fontSize: '1rem',
+
+            '@media (orientation: landscape)': {
+                fontSize: '1.2rem'
+            },
+        }
+    },
+})
+
+$(document.body).content([
+    $('h1').class('title').content('A red color title.')
+])
+
+```
+
+### CSS Colors Preset
+You can import colors preset from `amateras/color/COLOR_NAME` or `amateras/colors` path. These colors are reference from Tailwind colors, read the [documentation](https://tailwindcss.com/docs/colors) to know about the concepts.
+```ts
+// import black and white color preset
+import 'amateras/color/blackwhite';
+$.color.black; // '#000000'
+$.color.white; // '#ffffff'
+
+// import slate colors preset
+import 'amateras/color/slate';
+$.color.slate[100]; // '#f1f5f9'
+$.color.slate[200]; // '#e2e8f0'
+
+// import all colors preset
+import 'amateras/colors';
+$.color.red[600]; // '#dc2626'
+$.color.zinc[500]; // '#71717a'
+```

package/packages/css/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@amateras/css",
+    "peerDependencies": {
+      "@amateras/core": "workspace:*",
+      "@amateras/utils": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts"
+    },
+    "exports": {
+      ".": "./src/index.ts"
+    }
+}

package/packages/css/src/ext/colors/amber.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../../lib/colorAssign";
+
+const _amber = {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    200: '#fde68a',
+    300: '#fcd34d',
+    400: '#fbbf24',
+    500: '#f59e0b',
+    600: '#d97706',
+    700: '#b45309',
+    800: '#92400e',
+    900: '#78350f',
+    950: '#451a03',
+} as const;
+
+colorAssign('amber', _amber);
+
+declare global {
+    export namespace $ {
+        export namespace color {
+            export const amber: typeof _amber;
+        }
+    }
+}

package/packages/css/src/ext/colors/blackwhite.ts

@@ -0,0 +1,13 @@
+import { colorAssign } from "../../lib/colorAssign";
+
+colorAssign('black', '#000000');
+colorAssign('white', '#ffffff');
+
+declare global {
+    export namespace $ {
+        export namespace color {
+            export const black: '#000000';
+            export const white: '#ffffff';
+        }
+    }
+}

package/packages/css/src/ext/colors/blue.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../../lib/colorAssign";
+
+const _blue = {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+    950: '#172554',
+} as const;
+
+colorAssign('blue', _blue);
+
+declare global {
+    export namespace $ {
+        export namespace color {
+            export const blue: typeof _blue;
+        }
+    }
+}

package/packages/css/src/ext/colors/cyan.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../../lib/colorAssign";
+
+const _cyan = {
+    50: '#ecfeff',
+    100: '#cffafe',
+    200: '#a5f3fc',
+    300: '#67e8f9',
+    400: '#22d3ee',
+    500: '#06b6d4',
+    600: '#0891b2',
+    700: '#0e7490',
+    800: '#155e75',
+    900: '#164e63',
+    950: '#083344',
+} as const;
+
+colorAssign('cyan', _cyan);
+
+declare global {
+    export namespace $ {
+        export namespace color {
+            export const cyan: typeof _cyan;
+        }
+    }
+}

package/packages/css/src/ext/colors/emerald.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../../lib/colorAssign";
+
+const _emerald = {
+    50: '#ecfdf5',
+    100: '#d1fae5',
+    200: '#a7f3d0',
+    300: '#6ee7b7',
+    400: '#34d399',
+    500: '#10b981',
+    600: '#059669',
+    700: '#047857',
+    800: '#065f46',
+    900: '#064e3b',
+    950: '#022c22',
+} as const;
+
+colorAssign('emerald', _emerald);
+
+declare global {
+    export namespace $ {
+        export namespace color {
+            export const emerald: typeof _emerald;
+        }
+    }
+}