amateras 0.7.3 → 0.10.0

package/packages/core/src/node/$Node.ts

@@ -1,201 +0,0 @@
-import { _document } from "#env";
-import { _Array_from, _instanceof, _JSON_stringify, _null, _Promise, forEach, isFunction, isNull, isUndefined, toArray } from "@amateras/utils";
-import { $EventTarget } from "./$EventTarget";
-
-export class $Node<EvMap = {}> extends $EventTarget<EvMap> {
-    declare node: Node & ChildNode & ParentNode;
-    static processors = new Set<$NodeContentProcessor>();
-    static setters = new Set<$NodeSetterHandler>();
-    constructor(node: Node & ChildNode) {
-        super(node);
-    }
-
-    content(children: $NodeContentResolver<this>) {
-        forEach(_Array_from(this.childNodes), node => node.remove());
-        return this.insert(children);
-    }
-
-    insert(resolver: $NodeContentResolver<this>, position = -1) {
-        // process nodes
-        forEach(toArray(resolver), resolve_child => forEach($Node.process(this, resolve_child), $node => {
-            $Node.append(this, $node, position);
-            if (position >= 0) position++;
-        }));
-        return this;
-    }
-
-    await<T>(promise: OrPromise<T>, callback: ($node: this, result: T) => void): this {
-        if (_instanceof(promise, Promise)) promise.then(result => callback(this, result));
-        else callback(this, promise);
-        return this;
-    }
-
-    replace($node: $NodeContentResolver<$Node>) {
-        if ($node) 
-            this.replaceWith(
-                ...toArray($Node.process(this, $node)).filter($node => $node).map($node => $node?.node) as Node[]
-            )
-        return this;
-    }
-
-    inDOM() {
-        return _document.contains(this.node);
-    }
-
-    toString() {
-        return this.textContent();
-    }
-
-    mounted($parent: $Node) {}
-    
-    use<F extends ($ele: this, ...args: any) => void>(callback: F, ...args: F extends ($ele: this, ...args: infer P) => void ? P : never) {
-        callback(this, ...args);
-        return this;
-    }
-
-    is<T extends (abstract new (...args: any[]) => $Node)>(instance: T): InstanceType<T> | null {
-        return _instanceof(this, instance) ? this : null;
-    }
-
-    static process<T extends $Node>($node: T, content: $NodeContentResolver<any>): Array<$Node | undefined | null> {
-        for (const processor of this.processors) {
-            const result = processor($node, content);
-            if (result) content = result;
-        }
-        if (isUndefined(content) || isNull(content) || _instanceof(content, $Node)) return [content];
-        // is Promise
-        if (_instanceof(content, _Promise)) return [$('async').await(content, ($async, $child) => $async.replace($child as any))];
-        // is SignalFunction or ContentHandler
-        if (isFunction(content)) {
-            const _content = content($node) as $NodeContentResolver<$Node>;
-            if (_instanceof(_content, _Promise)) return this.process($node, _content as any);
-            else return toArray(_content).map(content => this.process($node, content)).flat();
-        }
-        // is nested array
-        if (_instanceof(content, Array)) return content.map(c => this.process($node, c)).flat();
-        // is string | number | boolean
-        return [new $Text(`${content}`)];
-    }
-
-    /**  */
-    static append($node: $Node, child: $Node | undefined | null, position: number) {
-        if (child) {
-            // get child node at position
-            let positionChild = _Array_from($node.childNodes).at(position);
-            if (!positionChild) $node.appendChild(child.node);
-            else $node.insertBefore(child.node, position < 0 ? positionChild.nextSibling : positionChild);
-            child.mounted($node);
-        }
-    }
-}
-
-export class $Text extends $Node {
-    constructor(textContent?: string) {
-        super(new Text(textContent));
-    }
-}
-
-export type $NodeSetterHandler = (value: any, set: (value: any) => void) => any;
-export type $NodeContentProcessor = <N extends $Node>($node: N, content: $NodeContentResolver<N>) => $NodeContentResolver<N>;
-export type $NodeContentHandler<T extends $Node> = ($node: T) => OrPromise<$NodeContentResolver<T>>;
-export type $NodeContentTypes = $Node | string | number | boolean | $.$NodeContentTypeExtends | null | undefined;
-export type $NodeContentResolver<T extends $Node> = OrPromise<$NodeContentTypes | $NodeContentHandler<T> | $NodeContentResolver<T>[]>;
-
-export interface $Node<EvMap = {}> extends $EventTarget<EvMap> {
-    /** {@link Node.baseURI} */
-    readonly baseURI: string;
-    /** {@link Node.childNodes} */
-    readonly childNodes: NodeListOf<ChildNode>;
-    /** {@link Node.firstChild} */
-    readonly firstChild: ChildNode | null;
-    /** {@link Node.isConnected} */
-    readonly isConnected: boolean;
-    /** {@link Node.lastChild} */
-    readonly lastChild: ChildNode | null;
-    /** {@link Node.nextSibling} */
-    readonly nextSibling: ChildNode | null;
-    /** {@link Node.nodeName} */
-    readonly nodeName: string;
-    /** {@link Node.nodeType} */
-    readonly nodeType: number;
-    /** {@link Node.ownerDocument} */
-    readonly ownerDocument: Document | null;
-    /** {@link Node.parentElement} */
-    readonly parentElement?: HTMLElement | null;
-    /** {@link Node.parentNode} */
-    readonly parentNode?: ParentNode | null;
-    /** {@link Node.previousSibling} */
-    readonly previousSibling?: ChildNode | null;
-    /** {@link ParentNode.childElementCount} */
-    readonly childElementCount: number;
-    /** {@link ParentNode.children} */
-    readonly children: HTMLCollection;
-    /** {@link ParentNode.firstElementChild} */
-    readonly firstElementChild: Element | null;
-    /** {@link ParentNode.lastElementChild} */
-    readonly lastElementChild: Element | null;
-    
-    /** {@link Node.appendChild} */
-    appendChild<T extends Node>(node: T): T;
-    /** {@link Node.cloneNode} */
-    cloneNode(subtree?: boolean): Node;
-    /** {@link Node.compareDocumentPosition} */
-    compareDocumentPosition(other: $EventTarget | Node): number;
-    /** {@link Node.getRootNode} */
-    getRootNode(options?: GetRootNodeOptions): Node;
-    /** {@link Node.hasChildNodes} */
-    hasChildNodes(): boolean;
-    /** {@link Node.insertBefore} */
-    insertBefore<T extends Node>(node: T, child: Node | null): T;
-    /** {@link Node.isDefaultNamespace} */
-    isDefaultNamespace(namespace: string | null): boolean;
-    /** {@link Node.isEqualNode} */
-    isEqualNode(otherNode: $EventTarget | Node | null): boolean;
-    /** {@link Node.isSameNode} */
-    isSameNode(otherNode: $EventTarget | Node | null): boolean;
-    /** {@link Node.lookupNamespaceURI} */
-    lookupNamespaceURI(prefix: string | null): string | null;
-    /** {@link Node.lookupPrefix} */
-    lookupPrefix(namespace: string | null): string | null;
-    /** {@link Node.normalize} */
-    normalize(): this;
-    /** {@link Node.removeChild} */
-    removeChild<T extends Node>(child: T): T;
-    /** {@link Node.replaceChild} */
-    replaceChild<T extends Node>(node: Node, child: T): T;
-    /** {@link Node.contains} */
-    contains(other: $EventTarget | EventTarget | null | undefined): boolean;
-
-    /** {@link ChildNode.after} */
-    after(...nodes: ($EventTarget | Node | string)[]): this;
-    /** {@link ChildNode.before} */
-    before(...nodes: ($EventTarget | Node | string)[]): this;
-    /** {@link ChildNode.remove} */
-    remove(): this;
-    /** {@link ChildNode.replaceWith} */
-    replaceWith(...nodes: ($EventTarget | Node | string)[]): this;
-    /** {@link ParentNode.append} */
-    append(...nodes: ($EventTarget | Node | string)[]): this;
-    /** {@link ParentNode.prepend} */
-    prepend(...nodes: ($EventTarget | Node | string)[]): this;
-    /** {@link ParentNode.querySelector} */
-    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
-    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
-    querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
-    querySelector<E extends Element = Element>(selectors: string): E | null;
-    /** {@link ParentNode.querySelectorAll} */
-    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
-    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
-    querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
-    querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
-    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
-    /** {@link ParentNode.replaceChildren} */
-    replaceChildren(...nodes: ($EventTarget | Node | string)[]): this;
-
-    /** {@link Node.nodeValue} */
-    nodeValue(nodeValue: $Parameter<string | null>): this;
-    nodeValue(): string | null;
-    /** {@link Node.textContent} */
-    textContent(textContent: $Parameter<string | null>): this;
-    textContent(): string | null;
-}

package/packages/core/src/node/$Virtual.ts

@@ -1,65 +0,0 @@
-import { chain } from "#lib/chain";
-import { forEach, _Array_from, _instanceof, _null, toArray } from "@amateras/utils";
-import { $HTMLElement } from "#node/$HTMLElement";
-import { $Node, type $NodeContentResolver } from "#node/$Node";
-
-export class $Virtual<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $HTMLElement<Ele, EvMap> {
-    nodes = new Set<$Node>();
-    hiddenNodes = new Set<$Node>();
-    constructor(resolver: string | Ele) {
-        super(resolver);
-    }
-
-    content(children: $NodeContentResolver<this>) {
-        return chain(this, _null, _null, children, children => {
-            this.nodes.clear();
-            forEach(this.childNodes, node => node.remove());
-            this.insert(children);
-        })
-    }
-
-    insert(resolver: $NodeContentResolver<this>, position = -1) {
-        // process nodes
-        forEach(toArray(resolver), resolve_child => {
-            forEach($Node.process(this, resolve_child), $node => {
-                $Virtual.append(this, $node, position)
-                if (position >= 0) position++;
-            })
-        });
-        return this;
-    }
-
-    hide($node?: $Node | null) {
-        if ($node && this.nodes.has($node)) this.hiddenNodes.add($node);
-        return this;
-    }
-
-    show($node?: $Node | null) {
-        if ($node) this.hiddenNodes.delete($node);
-        return this;
-    }
-
-    render() {
-        // remove hidden node
-        forEach(this.childNodes, node => this.hiddenNodes.has($(node)) && node.remove());
-        // get array of visible node
-        const visibleNodes = _Array_from(this.nodes).filter($node => !this.hiddenNodes.has($node))
-        // add visible node with position
-        forEach(visibleNodes, ($node, i) => {
-            if (
-                !$node.inDOM() // node is not in dom tree
-                && $(this.childNodes).at(i) !== $node // node not matched at position
-            ) $Node.append(this, $node, i);
-        })
-        return this;
-    }
-
-    static append($node: $Virtual, child: $Node | undefined | null, position: number) {
-        if (child) {
-            const childList = _Array_from($node.nodes);
-            if (!childList.at(position)) childList.push(child);
-            else childList.splice(position >= 0 ? position : childList.length + 1 + position, 0, child);
-            $node.nodes = new Set(childList);
-        }
-    }
-}

package/packages/css/README.md

@@ -1,128 +0,0 @@
-# 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

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

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

@@ -1,25 +0,0 @@
-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 module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const amber: typeof _amber;
-        }
-    }
-}

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

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

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

@@ -1,25 +0,0 @@
-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 module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const blue: typeof _blue;
-        }
-    }
-}

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

@@ -1,25 +0,0 @@
-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 module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const cyan: typeof _cyan;
-        }
-    }
-}

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

@@ -1,25 +0,0 @@
-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 module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const emerald: typeof _emerald;
-        }
-    }
-}

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

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _fuchsia = {
-    50: '#fdf4ff',
-    100: '#fae8ff',
-    200: '#f5d0fe',
-    300: '#f0abfc',
-    400: '#e879f9',
-    500: '#d946ef',
-    600: '#c026d3',
-    700: '#a21caf',
-    800: '#86198f',
-    900: '#701a75',
-    950: '#4a044e',
-} as const;
-
-colorAssign('fuchsia', _fuchsia);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const fuchsia: typeof _fuchsia;
-        }
-    }
-}

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

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _gray = {
-    50: '#f9fafb',
-    100: '#f3f4f6',
-    200: '#e5e7eb',
-    300: '#d1d5db',
-    400: '#9ca3af',
-    500: '#6b7280',
-    600: '#4b5563',
-    700: '#374151',
-    800: '#1f2937',
-    900: '#111827',
-    950: '#030712',
-} as const;
-
-colorAssign('gray', _gray);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const gray: typeof _gray;
-        }
-    }
-}

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

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _green = {
-    50: '#f0fdf4',
-    100: '#dcfce7',
-    200: '#bbf7d0',
-    300: '#86efac',
-    400: '#4ade80',
-    500: '#22c55e',
-    600: '#16a34a',
-    700: '#15803d',
-    800: '#166534',
-    900: '#14532d',
-    950: '#052e16',
-} as const;
-
-colorAssign('green', _green);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const green: typeof _green;
-        }
-    }
-}

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

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _indigo = {
-    50: '#eef2ff',
-    100: '#e0e7ff',
-    200: '#c7d2fe',
-    300: '#a5b4fc',
-    400: '#818cf8',
-    500: '#6366f1',
-    600: '#4f46e5',
-    700: '#4338ca',
-    800: '#3730a3',
-    900: '#312e81',
-    950: '#1e1b4b',
-} as const;
-
-colorAssign('indigo', _indigo);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const indigo: typeof _indigo;
-        }
-    }
-}

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

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _lime = {
-    50: '#f7fee7',
-    100: '#ecfccb',
-    200: '#d9f99d',
-    300: '#bef264',
-    400: '#a3e635',
-    500: '#84cc16',
-    600: '#65a30d',
-    700: '#4d7c0f',
-    800: '#3f6212',
-    900: '#365314',
-    950: '#1a2e05',
-} as const;
-
-colorAssign('lime', _lime);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const lime: typeof _lime;
-        }
-    }
-}

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

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _neutral = {
-    50: '#fafafa',
-    100: '#f5f5f5',
-    200: '#e5e5e5',
-    300: '#d4d4d4',
-    400: '#a3a3a3',
-    500: '#737373',
-    600: '#525252',
-    700: '#404040',
-    800: '#262626',
-    900: '#171717',
-    950: '#0a0a0a',
-} as const;
-
-colorAssign('neutral', _neutral);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const neutral: typeof _neutral;
-        }
-    }
-}