ouider 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -1,89 +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, 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): void;
-    watch(listener: StateWatcher<T>): number;
-    unwatch(listener: StateWatcher<T> | number): void;
-}
-
-type ComponentProps<K extends Record<string, any>> = K;
-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;
-    };
-} & 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;
@@ -94,6 +15,7 @@ type Providers = Map<InjectionKey, Provider>;
  */
 declare class App {
     private root;
+    private options?;
     static currentApp: App | null;
     private providers;
     /**
@@ -107,20 +29,21 @@ declare class App {
      * @param token the key to look up globally
      * @returns a provider value
      */
-    inject<T>(token: InjectionKey): T;
+    inject<T>(token: InjectionKey): T | undefined;
     /**
      * Register a plugin to be used by this app
      * @param plugin the plugin to register
      * @returns `this` App instance
      */
-    use(plugin: Plugin): this;
-    private host;
-    constructor(root: ComponentConstructor<any, any>);
+    use<T>(plugin: Plugin<T>, options?: T): this;
+    constructor(root: ComponentConstructor<any, any>, options?: {
+        css?: string;
+    } | undefined);
     /**
      * Mount the App in a host element
      * @param selector the host element where the app's root component should be mounted
      */
-    mount(selector: string): void;
+    mount(selector: string): Promise<void>;
 }
 /**
  * Provide a value through a key to all the app globally
@@ -133,23 +56,205 @@ declare function provide<T>(token: InjectionKey, value: T | (() => T)): void;
  * @param token the key to look up globally
  * @returns a provider value
  */
-declare function inject<T>(token: InjectionKey): T;
+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;
+        value: string;
+    }[];
+    export class OObject {
+        uid: string;
+        tag: string;
+        constructor(uid: string, tag: string);
+        addEventListener(event: string, callback: (...args: any[]) => void): Promise<string>;
+        dettachEventListener(event: string, cbId: string): Promise<void>;
+        invoke(fn: string, ...args: any[]): Promise<void>;
+        getProperty<T>(name: string): Promise<T | null>;
+        setProperty<T>(name: string, value: T): Promise<void>;
+        dispatchEvent(eventName: string, eventClass?: string, initDict?: any): Promise<void>;
+    }
+    export abstract class ONode extends OObject {
+        textContent?: string | null;
+        type: NodeType;
+        attributes: Attributes;
+        children?: ONode[];
+        classes?: string[];
+        style?: string;
+        constructor(node: ONode);
+    }
+    export class OElement extends ONode {
+        private _hydrated;
+        constructor(node: ONode);
+        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>;
+        after(node: ONode): Promise<void>;
+        setHTML(html: string): Promise<void>;
+        HTML(): Promise<string>;
+        setInnerText(text: string): Promise<void>;
+        setContentText(text: string): Promise<void>;
+        getContentText(): Promise<string>;
+        content(): Promise<string>;
+        childNodes(): Promise<OElement[]>;
+        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<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 {  };
+}
+declare function Native(): (clazz: any, fnName: string, descriptor: {
+    value: Function;
+} | Record<string, any>) => void;
+interface OUIDBridgeInterface {
+    invoke(name: string): Promise<any>;
+    emit(event: string, data: any): void;
+    subscribe(event: string, callback: (id: string, data: string) => void): void;
+}
+type OUIDConfig = {
+    appId: string;
+    appName: string;
+    appSecret: string;
+};
+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;
+    private timers;
+    private _config?;
+    private listeners;
+    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
+     * @param args the arguments list
+     * @returns a promise of T
+     */
+    call<T>(name: string, ...args: any[]): Promise<T | null>;
+    emit(event: string, data: any): void;
+    /**
+     *
+     * @param event Create a subscription for a given event name, should be possible to register only once ??
+     * @param callback
+     */
+    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>;
+    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>;
+    injectComponentStyles(css: string): Promise<ODOM.OElement | null>;
+    rejectComponentStyles(cssNode: ODOM.ONode): Promise<void>;
+    getOObject(id: string): Promise<ODOM.OObject | null>;
+    acquireObject(name: string): Promise<ODOM.OObject | null>;
+    setTimeout(callback: () => void, delay: number): Promise<number>;
+    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 {
+    var OUID: OUIDBridge;
+}
 
 declare class RenderContext {
     private app;
-    component: OComponent;
+    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>[];
-    constructor(app: App, component: OComponent, parentContext: RenderContext | null, ...frames: Record<string, any>[]);
-    get hostElement(): HTMLElement;
+    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;
     directive(directive: Directive): void;
-    evaluateExpression(expr: string): boolean;
-    resolve(key: string, strict?: boolean, ...additionFrames: Record<string, any>[]): any;
+    evaluateExpression(expr: string | null | undefined): boolean;
+    resolve(key: string | null | undefined, strict?: boolean, ...additionFrames: Record<string, any>[]): any;
     /**
      * Handing (o-model) like (ngModel) update, we should support mutliple syntaxe like o-mode="value" where value is defined directly on the component
      * o-model="data['key']" where data is either defined on the component, of in the enclosing scope in case of for-loop for instance
@@ -157,54 +262,169 @@ declare class RenderContext {
     updateValue(key: string, value: any): void;
     push(frame: Record<string, any>): void;
     pop(): void;
-    updateBindings(): void;
-    updateBinding(binding: Binding): void;
-    updateDirectives(): 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: HTMLElement): void;
-    handleTextNode(node: HTMLElement): void;
+    handleElementNode(node: ODOM.OElement, options?: {
+        skipSlotted: boolean;
+    }): Promise<void>;
+    handleTextNode(node: ODOM.OElement): void;
     private componentAttributes;
-    mountComponent<T, O>(hostNode: HTMLElement, component: OComponentType<T, O>, parentContext: RenderContext, props?: Record<string, {
+    mountComponent<T extends Record<string, any>, O extends Record<string, string>>(hostNode: ODOM.OElement, component: OComponentType<T, O>, parentContext: RenderContext | null, props?: Record<string, {
         name: string;
         value: any;
         expr?: string;
     }>, emits?: O): Promise<void>;
-    unmountComponent(node: Element): void;
-    static h<P, O>(component: ComponentConstructor<P, O>, props: P, emits?: O): OComponent<P>;
-    static h<P, O>(component: OComponentType<P>, props: P, emits?: O): Promise<OComponent<P>>;
+    unmountComponent(node: ODOM.OElement): Promise<void>;
 }
 type Binding = {
     type: 'model' | 'interpolation' | 'attribute' | 'prop';
-    node: HTMLElement;
+    node: ODOM.OElement;
     key: string;
     template?: string | null;
     context: RenderContext;
 };
 type Directive = {
     type: 'if' | 'for';
-    node: HTMLElement;
+    node: ODOM.OElement;
     expr?: string;
-    placeholder: Comment;
+    placeholder: ODOM.OElement;
     context: RenderContext;
     active?: boolean;
+    renderedNode?: ODOM.OElement;
     list?: string;
     item?: string;
     children?: Map<any, {
-        node: ChildNode;
+        node: ODOM.ONode;
         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;
@@ -213,12 +433,12 @@ declare class RouterComponent extends OComponent {
 declare const ROUTER_INJECTION_TOKEN = "OROUTER_TOKEN";
 declare const ACTIVE_ROUTE_TOKEN = "ACTIVE_ROUTE";
 interface Route {
-    path?: string;
+    path: string;
     name: string;
-    component?: OComponentType;
+    component?: OComponentType<any, any>;
     redirectTo?: string;
 }
-declare function useRouter(): Router;
+declare function useRouter(): Router | undefined;
 declare function createRouter(routes: Routes): Router;
 type Routes = Array<Route>;
 type MatchedRoute = {
@@ -244,24 +464,29 @@ interface RouteGuard {
     type: 'before' | 'after';
     fn: RouteGaurdFunction;
 }
-declare class Router implements Plugin {
+declare class Router implements Plugin<any> {
     routes: Routes;
+    private windowObject;
     private guards;
+    private eventRegistration;
     constructor(routes: Routes);
     install(app: App): void;
-    resolve(path: string): MatchedRoute;
+    resolve(path: string): MatchedRoute | null;
     push(options: {
         name?: string;
         path?: string;
         params?: Record<string, string>;
         absolute?: boolean;
     }): void;
+    pop(): void;
     private beforeRouteGoing;
     private afterRouteGoing;
-    bind(component: RouterComponent): (() => void);
-    unbind(handler: () => void): void;
+    bind(component: ORouter): Promise<(() => void)>;
+    unbind(): void;
     beforeEach(fn: RouteGaurdFunction): (() => void);
     afterEach(fn: RouteGaurdFunction): (() => void);
 }
 
-export { ACTIVE_ROUTE_TOKEN, App, type Binding, Component, type ComponentConstructor, type ComponentProps, type Directive, Emits, type InjectionKey, type LazyLoader, OComponent, type OComponentType, 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, createComponent, createRouter, inject, isStated, provide, stated, useRouter };
+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, 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 };