ouider 0.0.3 → 0.0.5

package/dist/index.d.cts

@@ -1,95 +1,10 @@
-declare class Emits<O extends Record<string, any>> {
-    private events;
-    constructor(events: O);
-    emit(event: keyof O, ...args: any): void;
-}
-
-type StateWatcher<T> = <K extends keyof T>(key: K, oldValue: T[K], newValue: T[K]) => void;
-declare class Stated<T> {
-    value: T;
-    constructor(value: T);
-}
-declare function isStated<T>(ob: any): ob is Stated<T>;
-declare function stated<S extends Record<string, string>, T>(target: T, state: State<S>): Stated<T>;
-declare class State<T extends Record<string, any>> {
-    private THRESHOLD_TIME;
-    private debounceTime;
-    private state;
-    private listeners;
-    private timer;
-    constructor(data: T);
-    wrap<T>(obj: T): Stated<T>;
-    has(key: keyof T): boolean;
-    setValue(key: keyof T, value: any): void;
-    getValue(key: keyof T): any;
-    get value(): T;
-    private dispatchChanges;
-    didChange(path: keyof T, oldValue: any, newValue: any): Promise<void>;
-    watch(listener: StateWatcher<T>): number;
-    unwatch(listener: StateWatcher<T> | number): void;
-}
-
-type ComponentProps<K extends Record<string, any>> = K;
-/**
- * Component decorator, it allow an auto registration of components
- * @param options
- * @returns
- */
-declare function Component(options: {
-    template: string;
-    tag: string;
-    use?: OComponentType[];
-    css?: string;
-}): <T extends {
-    new (...args: any[]): {};
-}>(constructor: T) => {
-    new (...args: any[]): {
-        template: string;
-        css: string | undefined;
-        hash: string;
-    };
-} & T;
-interface Component<P extends Record<string, any>, O extends Record<string, any>> {
-    state: State<any>;
-    readonly emits: Emits<O>;
-    readonly props: ComponentProps<P>;
-    onMounted(): void;
-    willMount(): void;
-    willUnmount(): void;
-    provide<T>(key: string, value: T): void;
-    inject<T>(key: string): T | undefined;
-}
-interface ComponentConstructor<P extends Record<string, any>, O extends Record<string, any>> {
-    new (props?: P, emits?: O): Component<P, O>;
-}
-declare function createComponent<P extends Record<string, any>, O extends Record<string, any>>(ctr: ComponentConstructor<P, O>, props?: P, emits?: O): Component<P, O>;
-declare class OComponent<P extends Record<string, any> = {}, O extends Record<string, any> = {}> implements Component<P, O> {
-    state: State<any>;
-    private parent?;
-    readonly emits: Emits<O>;
-    readonly props: ComponentProps<P>;
-    private provides;
-    constructor(props?: P, emits?: O);
-    onMounted(): void;
-    willMount(): void;
-    willUnmount(): void;
-    /** Provide a value for descendants */
-    provide<T>(key: string, value: T): void;
-    /** Inject a value from nearest ancestor */
-    inject<T>(key: string): T | undefined;
-}
-type LazyLoader<P extends Record<string, any>, O extends Record<string, any>> = () => Promise<{
-    default: ComponentConstructor<P, O>;
-}>;
-type OComponentType<P extends Record<string, any> = {}, O extends Record<string, any> = {}> = ComponentConstructor<P, O> | LazyLoader<P, O>;
-
 type ProvideFunction<T> = () => T;
 type Provider<T = any> = {
     value?: T;
     provide?: ProvideFunction<T>;
 };
-interface Plugin {
-    install(app: App): void;
+interface Plugin<T> {
+    install(app: App, options?: T): void;
 }
 /** Injection token key */
 type InjectionKey = string;
@@ -120,7 +35,7 @@ declare class App {
      * @param plugin the plugin to register
      * @returns `this` App instance
      */
-    use(plugin: Plugin): this;
+    use<T>(plugin: Plugin<T>, options?: T): this;
     constructor(root: ComponentConstructor<any, any>, options?: {
         css?: string;
     } | undefined);
@@ -145,6 +60,44 @@ declare function inject<T>(token: InjectionKey): T | undefined;
 
 type QueryFilter = "children" | "classes" | "style" | "attributes";
 declare namespace ODOM {
+    export class BatchActions {
+        private actions;
+        constructor();
+        exec(): Promise<any>;
+        add(action: () => void): this;
+        commit(): Promise<void>;
+    }
+    export class BatchUpdates {
+        private node;
+        private operations;
+        constructor(node: OElement);
+        exec(): Promise<any>;
+        private append;
+        add(fn: () => void): this;
+        addEventListener(event: string, callback: (...args: any[]) => void): BatchUpdates;
+        setProperty(key: string, value: string): BatchUpdates;
+        dettachEventListener(event: string, cbId: string): BatchUpdates;
+        invoke(fn: string, ...args: any[]): BatchUpdates;
+        dispatchEvent(eventName: string, eventClass?: string, initDict?: any): BatchUpdates;
+        addClass(...tokens: string[]): BatchUpdates;
+        removeClass(...tokens: string[]): BatchUpdates;
+        setAttribute(name: string, value: string): BatchUpdates;
+        removeAttribute(name: string): BatchUpdates;
+        appendChild(child: ONode): BatchUpdates;
+        removeChild(child: ONode): BatchUpdates;
+        remove(): BatchUpdates;
+        removeAndRelease(): BatchUpdates;
+        release(): BatchUpdates;
+        innerHTML(html: string): BatchUpdates;
+        replaceChildNode(node: ONode, child: ONode): BatchUpdates;
+        replaceWith(node: ONode): BatchUpdates;
+        after(node: ONode): BatchUpdates;
+        setInnerText(text: string): BatchUpdates;
+        setContentText(text: string): BatchUpdates;
+        insertBefore(element: ONode, node: ONode): BatchUpdates;
+        setInputValue(value: string): BatchUpdates;
+        setStyle(key: string, value: any): BatchUpdates;
+    }
     export type NodeType = 'Element' | 'Text' | 'Comment' | 'Attribute' | 'Unknown';
     type Attributes = {
         name: string;
@@ -171,14 +124,17 @@ declare namespace ODOM {
         constructor(node: ONode);
     }
     export class OElement extends ONode {
+        private _hydrated;
         constructor(node: ONode);
-        addClass(name: string): Promise<void>;
+        addClass(...tokens: string[]): Promise<void>;
+        removeClass(...tokens: string[]): Promise<void>;
         setAttribute(name: string, value: string): Promise<void>;
         removeAttribute(name: string): Promise<void>;
         appendChild(child: ONode): Promise<void>;
         set innerHTML(value: string);
         cloneNode(state: boolean): Promise<OElement | null>;
         remove(): Promise<void>;
+        removeAndRelease(): Promise<void>;
         removeChild(child: ONode): Promise<void>;
         replaceChildNode(node: ONode, child: ONode): Promise<void>;
         replaceWith(node: ONode): Promise<void>;
@@ -193,14 +149,19 @@ declare namespace ODOM {
         hasAttribute(name: string): boolean;
         getAttribute(name: string): Promise<string>;
         attribute(name: string): string | null;
+        nextSibling(): Promise<OElement | null>;
         getAttributeNames(): Promise<string[]>;
         parentNode(): Promise<OElement | null>;
-        insertBefore(element: ONode, node: ONode): Promise<unknown>;
+        insertBefore(element: ONode, node: ONode): Promise<void>;
         setInputValue(value: string): Promise<void>;
         inputValue(value: string): Promise<string>;
+        get hydrated(): boolean;
+        hydrate(): void;
         query(selector: string, filter?: QueryFilter[]): Promise<OElement | null>;
         queryAll(selector: string, filter?: QueryFilter[]): Promise<OElement[] | null>;
         release(): Promise<void>;
+        setStyle(key: string, value: any): Promise<void>;
+        updates(): BatchUpdates;
     }
     export {  };
 }
@@ -220,6 +181,12 @@ type OUIDConfig = {
 declare var WebOUID: {
     invoke: (id: string, name: string, argsJson: string) => void;
 } | undefined;
+type RequestData = {
+    method: string;
+    headers: Record<string, string>;
+    body: any;
+    credentials: "include" | "omit" | "same-origin";
+};
 declare class OUIDBridge implements OUIDBridgeInterface {
     private callbacks;
     private DOM_EVENT_LISTENERS;
@@ -229,6 +196,8 @@ declare class OUIDBridge implements OUIDBridgeInterface {
     constructor();
     config(conf?: OUIDConfig): OUIDBridge;
     invoke(name: string, ...args: any[]): Promise<any>;
+    registerComponent(tag: string, compClass: OComponentType<any, any>): void;
+    unregisterComponent(tag: string, compClass: OComponentType<any, any>): void;
     /**
      * Make a synchronous class
      * @param name the name without '_oui' prefix
@@ -245,7 +214,7 @@ declare class OUIDBridge implements OUIDBridgeInterface {
     subscribe(event: string, callback: (id: string, ...args: any[]) => void): void;
     query(selector: string, filter?: QueryFilter[], nodeId?: string): Promise<ODOM.OElement | null>;
     queryAll(selector: string, filter?: QueryFilter[], nodeId?: string): Promise<ODOM.OElement[] | null>;
-    createdElement(tag: string, props?: Record<string, string>): Promise<ODOM.OElement | null>;
+    createElement(tag: string, props?: Record<string, string>): Promise<ODOM.OElement | null>;
     createComment(data: string): Promise<ODOM.OElement | null>;
     addEventListener(node: ODOM.OObject | 'window' | 'document', event: string, callback: (...args: any[]) => void): Promise<string>;
     dettachEventListener(node: ODOM.OObject | 'window' | 'document', event: string, cbId: string): Promise<void>;
@@ -257,6 +226,9 @@ declare class OUIDBridge implements OUIDBridgeInterface {
     clearTimeout(id: number): Promise<void>;
     setInterval(callback: () => void, delay: number): Promise<number>;
     clearInterval(id: number): Promise<void>;
+    fetch(url: string, input: RequestData, encodeAs: "json"): Promise<any>;
+    fetch(url: string, input: RequestData, encodeAs: "text"): Promise<string>;
+    fetch(url: string, input: RequestData, encodeAs: "base64"): Promise<string>;
 }
 declare const OUID: OUIDBridge;
 declare global {
@@ -268,10 +240,15 @@ declare class RenderContext {
     component: OComponent<Record<string, any>, Record<string, any>>;
     private parentContext;
     static PROVIDE_TOKEN: string;
+    static STYLE_REF: WeakMap<any, number>;
     private bindings;
     private directives;
     private mountedComponents;
+    private componentsRegistry;
+    private updatingDirectives;
+    private updatingBindings;
     stack: Record<string, any>[];
+    hydradationActions: ODOM.BatchActions;
     constructor(app: App, component: OComponent<Record<string, any>, Record<string, any>>, parentContext: RenderContext | null, ...frames: Record<string, any>[]);
     get hostElement(): ODOM.OElement;
     bind(binding: Binding): void;
@@ -285,14 +262,17 @@ declare class RenderContext {
     updateValue(key: string, value: any): void;
     push(frame: Record<string, any>): void;
     pop(): void;
-    updateBindings(): Promise<void>;
-    updateBinding(binding: Binding): Promise<void>;
-    updateDirectives(): Promise<void>;
+    resolveTag(tag: string): OComponentType<any, any> | undefined;
+    updateBindings(updates?: ODOM.BatchActions): Promise<void>;
+    updateBinding(binding: Binding, updates: ODOM.BatchActions): void;
+    updateDirectives(updates?: ODOM.BatchActions): Promise<void>;
     private render;
     private expandClass;
     private expandStyle;
     private expandStandardAttributes;
-    handleElementNode(node: ODOM.OElement): Promise<void>;
+    handleElementNode(node: ODOM.OElement, options?: {
+        skipSlotted: boolean;
+    }): Promise<void>;
     handleTextNode(node: ODOM.OElement): void;
     private componentAttributes;
     mountComponent<T extends Record<string, any>, O extends Record<string, string>>(hostNode: ODOM.OElement, component: OComponentType<T, O>, parentContext: RenderContext | null, props?: Record<string, {
@@ -316,6 +296,7 @@ type Directive = {
     placeholder: ODOM.OElement;
     context: RenderContext;
     active?: boolean;
+    renderedNode?: ODOM.OElement;
     list?: string;
     item?: string;
     children?: Map<any, {
@@ -323,16 +304,127 @@ type Directive = {
         ctx: RenderContext;
     }>;
     key?: string;
+    destroy?: boolean;
 };
+declare function node<P extends Record<string, any>, O extends Record<string, any>>(component: string, p?: P, children?: RenderNode[], emits?: O): Promise<RenderNode>;
 declare function o<P extends Record<string, any>, O extends Record<string, any>>(component: ComponentConstructor<P, O>, props: P, emits?: O): OComponent<P>;
 declare function o<P extends Record<string, any>, O extends Record<string, any>>(component: OComponentType<P, O>, props: P, emits?: O): Promise<OComponent<P>>;
 
+declare class Emits<O extends Record<string, any>> {
+    private events;
+    constructor(events: O);
+    emit(event: keyof O, ...args: any): void;
+}
+
+type StateWatcher<T> = <K extends keyof T>(key: K, oldValue: T[K], newValue: T[K]) => void;
+declare class Stated<T> {
+    value: T;
+    constructor(value: T);
+}
+declare function isStated<T>(ob: any): ob is Stated<T>;
+declare function stated<S extends Record<string, string>, T>(target: T, state: State<S>): Stated<T>;
+declare class State<T extends Record<string, any>> {
+    private THRESHOLD_TIME;
+    private debounceTime;
+    private state;
+    private listeners;
+    private timer;
+    constructor(data: T);
+    wrap<T>(obj: T): Stated<T>;
+    has(key: keyof T): boolean;
+    setValue(key: keyof T, value: any): void;
+    getValue(key: keyof T): any;
+    get value(): T;
+    private dispatchChanges;
+    didChange(path: keyof T, oldValue: any, newValue: any): Promise<void>;
+    watch(listener: StateWatcher<T>): number;
+    unwatch(listener: StateWatcher<T> | number): void;
+}
+
+type ComponentProps<K extends Record<string, any>> = K;
+declare class RenderNode {
+    private node;
+    private children;
+    constructor(node: ODOM.OElement | string, children?: RenderNode[]);
+    attachTo(host: ODOM.OElement): void;
+    static of(node: ODOM.OElement | string, children?: RenderNode[]): RenderNode;
+    addChild(node: RenderNode): RenderNode;
+}
+declare class StyleData {
+    private data;
+    private css;
+    constructor(data: Record<string, StyleData | string>, css: string);
+    toString(): string;
+    static of(data: Record<string, StyleData | string>, ...css: string[]): StyleData;
+}
+/**
+ * Component decorator, it allow an auto registration of components
+ * @param options
+ * @returns
+ */
+declare function Component(options: {
+    template: string;
+    tag: string;
+    use?: Record<string, OComponentType>;
+    css?: string;
+    hostClasses?: string | string[];
+}): <T extends {
+    new (...args: any[]): {};
+}>(constructor: T) => {
+    new (...args: any[]): {
+        template: string;
+        css: string | undefined;
+        tag: string;
+        use: Record<string, OComponentType<{}, {}>> | undefined;
+        hostClasses: string | string[] | undefined;
+        hash: string;
+    };
+} & T;
+interface Component<P extends Record<string, any>, O extends Record<string, any>> {
+    state: State<any>;
+    readonly emits: Emits<O>;
+    readonly props: ComponentProps<P>;
+    onMounted(): void;
+    willMount(): void;
+    willUnmount(): void;
+    provide<T>(key: string, value: T): void;
+    inject<T>(key: string): T | undefined;
+    render?(ctx: RenderContext): RenderNode | null | Promise<RenderNode | null>;
+    style?(): StyleData | null;
+    decorateHostElement(hostElement: ODOM.OElement): Promise<void>;
+}
+interface ComponentConstructor<P extends Record<string, any>, O extends Record<string, any>> {
+    new (props?: P, emits?: O): Component<P, O>;
+}
+declare function createComponent<P extends Record<string, any>, O extends Record<string, any>>(ctr: ComponentConstructor<P, O>, props?: P, emits?: O): Component<P, O>;
+declare class OComponent<P extends Record<string, any> = {}, O extends Record<string, any> = {}> implements Component<P, O> {
+    state: State<any>;
+    private parent?;
+    readonly emits: Emits<O>;
+    readonly props: ComponentProps<P>;
+    private provides;
+    constructor(props?: P, emits?: O);
+    onMounted(): void;
+    willMount(): void;
+    willUnmount(): void;
+    /** Provide a value for descendants */
+    provide<T>(key: string, value: T): void;
+    /** Inject a value from nearest ancestor */
+    inject<T>(key: string): T | undefined;
+    render?(ctx: RenderContext): RenderNode | null | Promise<RenderNode | null>;
+    style?(): StyleData | null;
+    decorateHostElement(hostElement: ODOM.OElement): Promise<void>;
+}
+type LazyLoader<P extends Record<string, any>, O extends Record<string, any>> = () => Promise<{
+    default: ComponentConstructor<P, O>;
+}>;
+type OComponentType<P extends Record<string, any> = {}, O extends Record<string, any> = {}> = ComponentConstructor<P, O> | LazyLoader<P, O>;
+
 /**
  * Component responsible for display routes
  * Usage: <o-router></o-router>
  */
-declare class RouterComponent extends OComponent {
-    private routeStateHander;
+declare class ORouter extends OComponent {
     private router;
     willMount(): void;
     onMounted(): void;
@@ -372,7 +464,7 @@ interface RouteGuard {
     type: 'before' | 'after';
     fn: RouteGaurdFunction;
 }
-declare class Router implements Plugin {
+declare class Router implements Plugin<any> {
     routes: Routes;
     private windowObject;
     private guards;
@@ -386,14 +478,20 @@ declare class Router implements Plugin {
         params?: Record<string, string>;
         absolute?: boolean;
     }): void;
+    pop(): void;
     private beforeRouteGoing;
     private afterRouteGoing;
-    bind(component: RouterComponent): Promise<(() => void)>;
-    unbind(handler: () => void): void;
+    bind(component: ORouter): Promise<(() => void)>;
+    unbind(): void;
     beforeEach(fn: RouteGaurdFunction): (() => void);
     afterEach(fn: RouteGaurdFunction): (() => void);
 }
 
+declare class OIcon extends OComponent {
+    render(_: RenderContext): RenderNode;
+    style(): StyleData | null;
+}
+
 declare function components(): Record<string, OComponent<any, any>>;
 
-export { ACTIVE_ROUTE_TOKEN, App, type Binding, Component, type ComponentConstructor, type ComponentProps, type Directive, Emits, type InjectionKey, type LazyLoader, Native, OComponent, type OComponentType, ODOM, OUID, OUIDBridge, type OUIDBridgeInterface, type OUIDConfig, type Plugin, type Promised, type Provider, type Providers, ROUTER_INJECTION_TOKEN, RenderContext, type Route, type RouteGaurdFunction, type RouteGuard, type RouteGuardReturn, type RouteLocationNamed, Router, RouterComponent, type Routes, State, type StateWatcher, Stated, WebOUID, components, createComponent, createRouter, inject, isStated, o, provide, stated, useRouter };
+export { ACTIVE_ROUTE_TOKEN, App, type Binding, Component, type ComponentConstructor, type ComponentProps, type Directive, Emits, type InjectionKey, type LazyLoader, Native, OComponent, type OComponentType, ODOM, OIcon, ORouter, OUID, OUIDBridge, type OUIDBridgeInterface, type OUIDConfig, type Plugin, type Promised, type Provider, type Providers, ROUTER_INJECTION_TOKEN, RenderContext, RenderNode, type Route, type RouteGaurdFunction, type RouteGuard, type RouteGuardReturn, type RouteLocationNamed, Router, type Routes, State, type StateWatcher, Stated, StyleData, WebOUID, components, createComponent, createRouter, inject, isStated, node, o, provide, stated, useRouter };