ouider 0.0.2 → 0.0.3

package/dist/index.d.ts

@@ -10,7 +10,7 @@ declare class Stated<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 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;
@@ -24,12 +24,17 @@ declare class State<T extends Record<string, any>> {
     getValue(key: keyof T): any;
     get value(): T;
     private dispatchChanges;
-    didChange(path: keyof T, oldValue: any, newValue: any): void;
+    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;
@@ -40,7 +45,8 @@ declare function Component(options: {
 }>(constructor: T) => {
     new (...args: any[]): {
         template: string;
-        css: string;
+        css: string | undefined;
+        hash: string;
     };
 } & T;
 interface Component<P extends Record<string, any>, O extends Record<string, any>> {
@@ -94,6 +100,7 @@ type Providers = Map<InjectionKey, Provider>;
  */
 declare class App {
     private root;
+    private options?;
     static currentApp: App | null;
     private providers;
     /**
@@ -107,20 +114,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>);
+    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 +141,143 @@ 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 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 {
+        constructor(node: ONode);
+        addClass(name: 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>;
+        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;
+        getAttributeNames(): Promise<string[]>;
+        parentNode(): Promise<OElement | null>;
+        insertBefore(element: ONode, node: ONode): Promise<unknown>;
+        setInputValue(value: string): Promise<void>;
+        inputValue(value: string): Promise<string>;
+        query(selector: string, filter?: QueryFilter[]): Promise<OElement | null>;
+        queryAll(selector: string, filter?: QueryFilter[]): Promise<OElement[] | null>;
+        release(): Promise<void>;
+    }
+    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;
+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>;
+    /**
+     * 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>;
+    createdElement(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>;
+}
+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;
     private bindings;
     private directives;
     private mountedComponents;
     stack: Record<string, any>[];
-    constructor(app: App, component: OComponent, parentContext: RenderContext | null, ...frames: Record<string, any>[]);
-    get hostElement(): HTMLElement;
+    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,47 +285,47 @@ 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;
+    updateBindings(): Promise<void>;
+    updateBinding(binding: Binding): Promise<void>;
+    updateDirectives(): Promise<void>;
     private render;
     private expandClass;
     private expandStyle;
     private expandStandardAttributes;
-    handleElementNode(node: HTMLElement): void;
-    handleTextNode(node: HTMLElement): void;
+    handleElementNode(node: ODOM.OElement): 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;
     list?: string;
     item?: string;
     children?: Map<any, {
-        node: ChildNode;
+        node: ODOM.ONode;
         ctx: RenderContext;
     }>;
     key?: string;
 };
+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>>;
 
 /**
  * Component responsible for display routes
@@ -213,12 +341,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 = {
@@ -246,10 +374,12 @@ interface RouteGuard {
 }
 declare class Router implements Plugin {
     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;
@@ -258,10 +388,12 @@ declare class Router implements Plugin {
     }): void;
     private beforeRouteGoing;
     private afterRouteGoing;
-    bind(component: RouterComponent): (() => void);
+    bind(component: RouterComponent): Promise<(() => void)>;
     unbind(handler: () => void): 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, 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 };

package/dist/index.js

@@ -1,4 +1,4 @@
-'use strict';var k=require('route-parser');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var k__default=/*#__PURE__*/_interopDefault(k);var A=(s,e,t,n)=>{for(var o=e,c=s.length-1,i;c>=0;c--)(i=s[c])&&(o=(i(o))||o);return o};var T=class{constructor(e){this.events=e;}emit(e,...t){let n=this.events[e];n&&n(...t);}};var P=class{components=new Map;register(e,t){let n=e.toLocaleLowerCase();if(this.components.has(n)){console.warn(`[OUID] - ${n} component already registered`);return}console.debug("Registering new component: "+e,t),this.components.set(n,t);}unregister(e){let t=e.toLocaleLowerCase();this.components.delete(t);}get(e){return this.components.get(e.toLocaleLowerCase())}getAll(){return Array.from(this.components.entries())}},x=new P;var v=class{constructor(e){this.value=e;}};function E(s){return typeof s=="object"&&!Array.isArray(s)&&"value"in s&&s instanceof v}function B(s,e){let t=(n,o=new Map)=>{if(o.has(n))return o[n];let c=new Proxy(n,{set:(i,r,a)=>{let p=i[r];return typeof a=="object"?i[r]=t(a):i[r]=a,e.didChange(r,p,a),true},get:(i,r)=>Reflect.get(i,r)});o[n]=c;for(let i=n;i;i=Object.getPrototypeOf(i))Object.keys(i).forEach(r=>{let a=n[r];typeof a=="object"&&(n[r]=t(a,o));});return c};if(typeof s=="function")throw new Error("Can't create reactive element over a function");return typeof s!="object"&&typeof s!="symbol"?new Proxy(new v(s),{set:(n,o,c)=>{if(o!=="value")throw new Error(`Undefined property ${String(o)} access`);let i=n[o];return n[o]=c,e.didChange(o,i,c),true},get:(n,o)=>{if(o!=="value")throw new Error(`Undefined property ${String(o)} access`);return n[o]}}):new v(t(s))}var C=class{THRESHOLD_TIME=50;debounceTime=new Date().getTime();state;listeners=[];timer=null;constructor(e){this.state=new Proxy(e,{set:(t,n,o)=>{let c=t[n];return t[n]=o,this.didChange(n,c,o),true},get:(t,n)=>t[n]});}wrap(e){return B(e,this)}has(e){return e in this.state}setValue(e,t){this.state[e]=t;}getValue(e){return this.state[e]}get value(){return this.state}dispatchChanges(e,t,n){for(let o of this.listeners)o(e,t,n);}didChange(e,t,n){let o=Date.now();o-this.debounceTime<=this.THRESHOLD_TIME&&clearTimeout(this.timer),this.debounceTime=o,this.timer=setTimeout(()=>{this.dispatchChanges(e,t,n);},this.THRESHOLD_TIME);}watch(e){return this.listeners.push(e),this.listeners.length-1}unwatch(e){if(typeof e=="number"){this.listeners.splice(e,1);return}this.listeners.splice(this.listeners.indexOf(e),1);}};function _(s){return function(e){let t=class extends e{template=s.template;css=s.css};console.log("Construct",s.css);let n=t;return x.register(s.tag,n),t}}function b(s,e,t){return new s(e,t)}var O=class{state;parent=void 0;emits;props;provides=new Map;constructor(e={},t={}){this.state=new C(this),this.props=e,this.emits=new T(t);}onMounted(){}willMount(){}willUnmount(){}provide(e,t){this.provides.set(e,t);}inject(e){let t=this;for(;t;){if(t.provides.has(e))return t.provides.get(e);t=t.parent;}}};function N(s){let e=document.createElement("style");return console.log("css:",s),e.innerHTML=s,document.head.appendChild(e),e}function S(s){s&&document.head.removeChild(s);}function U(s){return s.replace(/-([a-z])/g,(e,t)=>t.toUpperCase())}function h(s){return E(s)?s.value:s}function F(s){let e={};for(let t=s;t;t=Object.getPrototypeOf(t))Object.getOwnPropertyNames(t).forEach(n=>{let o=s[n];typeof o=="function"&&n!=="constructor"&&!n.startsWith("__")&&!n.endsWith("__")?n in e||(e[n]=o.bind(s)):n!=="constructor"&&!n.startsWith("__")&&!n.endsWith("__")&&(n in e||(e[n]=o));});return e}function G(s){return typeof s=="function"&&!("prototype"in s)}var g=class s{constructor(e,t,n,...o){this.app=e;this.component=t;this.parentContext=n;for(let c of o)this.stack.push(c);}static PROVIDE_TOKEN="RENDER_CONTEXT";bindings=[];directives=[];mountedComponents=new WeakMap;stack=[];get hostElement(){return this.component._hostElement}bind(e){this.bindings.push(e);}directive(e){this.directives.push(e);}evaluateExpression(e){return this.resolve(e)}resolve(e,t=true,...n){let o=this.component.state.value,i={...F(o)};for(let r of [...this.stack.toReversed(),...n])Object.assign(i,r);try{let r=`${t?'"use strict";':""}return ${e};`,a=new Function(...Object.keys(i),r);return a.bind(this.component),a.apply(this.component,Object.values(i))}catch(r){console.log(this),console.error(r);}}updateValue(e,t){e.split(/[\.\[]/)[0]in this.component?this.resolve(`this.${e}=__o_model_value__`,true,{__o_model_value__:t}):this.resolve(`${e}=__o_model_value__`,true,{__o_model_value__:t}),this.component.state.didChange("","","");}push(e){this.stack.unshift(e);}pop(){this.stack.shift();}updateBindings(){this.bindings.forEach(e=>this.updateBinding(e));}updateBinding(e){if(e.type==="model")e.node.value=h(e.context.resolve(e.key));else if(e.type==="interpolation")e.node.textContent=e.template?.replace(/\{\{(.*?)\}\}/g,(t,n)=>(n=n.trim(),h(e.context.resolve(n))))??"";else if(e.type==="attribute"){let t=e.key,n=h(this.resolve(e.template));t==="class"?this.expandClass(e.node,n):t==="style"?this.expandStyle(e.node,n):typeof n!="object"&&typeof n!="function"&&typeof n!="symbol"&&typeof n<"u"&&e.node.setAttribute(t,n.toString());}else if(e.type==="prop"&&e.context.component){let t=h(this.resolve(e.template));try{console.log({...e.context.component}),e.context.component.props[e.key]=t,e.context.updateBindings(),e.context.updateDirectives();}catch(n){console.error(n);}}}updateDirectives(){for(let e of this.directives){if(e.type==="if"){let t=false;try{t=e.context.evaluateExpression(e.expr),E(t)&&(t=t.value);}catch(n){console.error("Error:",n);}t?e.active!==true&&(e.active=true,e.placeholder.after(e.node),e.context.render(e.node),e.context.updateBindings()):t||e.active!==false&&(this.unmountComponent(e.node),e.node.remove(),e.active=false);}if(e.type==="for"){console.log("Start for directive",e);let t=e.children??new Map,n=new Map,o=(r,a)=>e.key?h(e.context.resolve(e.key,true,{[e.item]:r})):a,c=h(e.context.resolve(e.list))||[];console.log("For-directive",c);let i=e.placeholder;c.forEach(async(r,a)=>{let p=o(r,a),d=t.get(p),l=d?.node,m={[e.item]:r},u=d?.ctx??new s(this.app,this.component,null);u.stack=[m,...e.context.stack],l?(u.updateBindings(),u.updateDirectives()):(l=e.node.cloneNode(true),u.render(l),i.after(l),u.updateBindings(),u.updateDirectives()),i=l,n.set(p,{node:l,ctx:u});}),t.forEach((r,a)=>{n.has(a)||(this.unmountComponent(r.node),r.node.remove());}),e.children=n;}}}render(e){switch(e.nodeType){case Node.TEXT_NODE:this.handleTextNode(e);break;case Node.ELEMENT_NODE:this.handleElementNode(e);break;default:console.warn("Unknown node",e);}}expandClass(e,t){let n=t;typeof t=="object"&&(Array.isArray(t)?n=t.join(" "):n=Object.keys(t).filter(o=>t[o]).join(" ")),e.setAttribute("class",n);}expandStyle(e,t){let n=t;typeof t=="object"&&!Array.isArray(t)&&(n=Object.keys(t).map(o=>`${o}: ${t[o]}`).join(";")),e.setAttribute("style",n);}expandStandardAttributes(e){[...e.attributes].filter(t=>t.name.startsWith(":")).filter(t=>[":id",":style",":class",":placeholder",":name"].includes(t.name)).forEach(t=>{let n=t.name.substring(1);this.bind({type:"attribute",node:e,key:n,context:this,template:t.value.trim()}),e.removeAttribute(t.name);});}handleElementNode(e){let t=null;if(e.hasAttribute("o-if")){let r=e.getAttribute("o-if"),a=document.createComment("o-if:"+r);e.parentNode?.insertBefore(a,e),e.removeAttribute("o-if"),this.directive({type:"if",expr:r,node:e,placeholder:a,context:this,active:void 0}),t="if";}if(e.hasAttribute("o-for")){if(t==="if")throw new Error("Can't have o-if and o-for on the same component");let r=e.getAttribute("o-for"),[a,p]=r.split(" of ").map(m=>m.trim()),d=document.createComment("for:"+r),l=e.getAttribute(":key");e.parentNode?.insertBefore(d,e),e.removeAttribute("o-for"),e.removeAttribute(":key"),e.remove(),this.directive({type:"for",item:a,list:p,node:e,placeholder:d,context:this,key:l}),t="for";}let n=e.tagName.toLowerCase(),o=x.get(n);t!=="for"&&[...e.attributes].forEach(r=>{if(r.name==="o-model"){let a=r.value.trim();if(e.tagName==="INPUT"||e.tagName==="TEXTAREA"){let p=e;p.value=h(this.resolve(a)),p.addEventListener("input",d=>{let l=d.target.value;this.updateValue(a,l);}),this.bind({node:e,key:a,type:"model",context:this});}e.removeAttribute(r.name);}});let c={},i={};if(t!=="for"){let{props:r,events:a}=this.componentAttributes(e,this);c=r,i=a,this.expandStandardAttributes(e);}if(Object.keys(i).forEach(r=>{let a=i[r];o||e.addEventListener(r,p=>{typeof a=="function"&&a.apply(this.component,[p]);}),e.removeAttribute("@"+r);}),!t){if(o){this.mountComponent(e,o,this,c,i);return}[...e.childNodes].forEach(r=>this.render(r));}}handleTextNode(e){let t=e.textContent?.match(/\{\{(.*?)\}\}/g);t&&t.forEach(n=>{let o=n.replace(/[{}]/g,"").trim();this.bind({type:"interpolation",node:e,key:o,template:e.textContent,context:this});});}componentAttributes(e,t){let n={},o={},c=["import","interface","module","o-model","o-if","o-for"];return [...e.attributes].filter(i=>!c.includes(i.name)).forEach(i=>{let r=i.name;if(r.startsWith("@")){let d=t?.resolve(i.value,true);if(typeof d!="function")throw new Error("Event handler can only be function");r=r.substring(1),o[r]=d;return}let a=null,p=i.value;r.startsWith(":")&&(a=i.value,r=r.substring(1),p=t?.resolve(i.value),E(p)&&(p=p.value)),r=U(r),n[r]={name:r,value:p,expr:a};}),{props:n,events:o}}async mountComponent(e,t,n,o={},c={}){let i=document.createElement("div"),r=new s(this.app,null,null),a={};Object.keys(o).forEach(u=>{let f=o[u];f.expr&&this.bind({type:"prop",node:i,key:u,context:r,template:f.expr}),a[u]=f.value;});let p=await s.h(t,a,c);r.component=p,r.stack=[p.props],Object.keys(o).filter(u=>!o[u].expr).forEach(u=>i.setAttribute(u,o[u].value)),i.classList.add("o-component-host"),e.tagName.toLowerCase()!=="div"&&i.classList.add("c-"+e.tagName.toLowerCase()),p.willMount(),i.innerHTML=p.template.trim(),p.css&&(p.cssInstance=N(p.css));let d=Array.from(e.childNodes),l=i.querySelectorAll("o-slot");l&&l.forEach(u=>{let f=u.getAttribute("name");d.filter(y=>f?f&&y.nodeType===Node.ELEMENT_NODE&&y.getAttribute("slot")===f:y.nodeType!==Node.ELEMENT_NODE||!y.hasAttribute("slot")).forEach(y=>u.parentNode?.insertBefore(y,u));});let m=i;e.innerHTML="",e.appendChild(i),p.state.watch(()=>{r.updateBindings(),r.updateDirectives();}),p._hostElement=m,p.parent=n?.component??void 0,p.provide(s.PROVIDE_TOKEN,this),r.render(m),r.updateBindings(),r.updateDirectives(),this.mountedComponents.set(m,p),p.onMounted();}unmountComponent(e){let t=this.mountedComponents.get(e);t&&(S(t.cssInstance),t.willUnmount(),t._hostElement=null),e.querySelectorAll("*").forEach(n=>{this.unmountComponent(n);}),this.mountedComponents.delete(e);}static h(e,t,n){return G(e)?e().then(o=>b(o.default,t,n)):b(e,t,n)}};function W(s){return typeof s=="function"}var R=class s{constructor(e){this.root=e;s.currentApp=this;}static currentApp=null;providers=new Map;provide(e,t){if(this.providers.has(e)){console.warn(`[OUID] - Provider ${e} already exists`);return}this.providers.set(e,W(t)?{provide:t}:{value:t});}inject(e){return this.providers.get(e).value}use(e){return e.install(this),this}host;mount(e){let t=document.getElementById(e);if(!t)throw new Error("No selector found for "+e);this.host=t;let n=new g(this,null,null);n.mountComponent(this.host,this.root,null).then(()=>{n.updateBindings(),n.updateDirectives();});}};function de(s,e){R.currentApp.provide(s,e);}function j(s){return R.currentApp.inject(s)}exports.RouterComponent=class w extends O{routeStateHander=null;router;willMount(){}onMounted(){this.router=V(),console.log("Router mounted"),this.routeStateHander=this.router.bind(this),this.routeStateHander();}willUnmount(){console.log("Router will unmount"),this.router.unbind(this.routeStateHander);}};exports.RouterComponent=A([_({tag:"o-router",template:`
+import X from'route-parser';var F=Object.defineProperty;var tt=(a,t,e)=>t in a?F(a,t,{enumerable:true,configurable:true,writable:true,value:e}):a[t]=e;var h=(a,t)=>F(a,"name",{value:t,configurable:true});var u=(a,t,e)=>tt(a,typeof t!="symbol"?t+"":t,e);var E,et=(E=class{constructor(){u(this,"components",new Map);}register(t,e){let n=t.toLocaleLowerCase();if(this.components.has(n)){console.warn(`[OUID] - ${n} component already registered`);return}this.components.set(n,e);}unregister(t){let e=t.toLocaleLowerCase();this.components.delete(e);}get(t){return this.components.get(t.toLocaleLowerCase())}getAll(){return Array.from(this.components.entries())}},h(E,"ComponentsRegistry"),E),O=new et;var L=class L{constructor(t){u(this,"events");this.events=t;}emit(t,...e){let n=this.events[t];n&&n(...e);}};h(L,"Emits");var I=L;var M=class M{constructor(t){u(this,"value");this.value=t;}};h(M,"Stated");var C=M;function J(a){return typeof a=="object"&&!Array.isArray(a)&&"value"in a&&a instanceof C}h(J,"isStated");function nt(a,t){let e=h((n,s=new Map)=>{if(s.has(n))return s.get(n);let c=new Proxy(n,{set:h((o,l,r)=>{let i=o[l];return typeof r=="object"?o[l]=e(r):o[l]=r,t.didChange(l,i,r),true},"set"),get:h((o,l)=>Reflect.get(o,l),"get")});s.set(n,c);for(let o=n;o;o=Object.getPrototypeOf(o))Object.keys(o).forEach(l=>{let r=n[l];typeof r=="object"&&(n[l]=e(r,s));});return c},"proxify");if(typeof a=="function")throw new Error("Can't create reactive element over a function");return typeof a!="object"&&typeof a!="symbol"?new Proxy(new C(a),{set:h((n,s,c)=>{if(s!=="value")throw new Error(`Undefined property ${String(s)} access`);let o=n[s];return n[s]=c,t.didChange(s,o,c),true},"set"),get:h((n,s)=>{if(s!=="value")throw new Error(`Undefined property ${String(s)} access`);return n[s]},"get")}):new C(e(a))}h(nt,"stated");var P=class P{constructor(t){u(this,"THRESHOLD_TIME",50);u(this,"debounceTime",new Date().getTime());u(this,"state");u(this,"listeners",[]);u(this,"timer",null);this.state=new Proxy(t,{set:h((e,n,s)=>{let c=e[n];return e[n]=s,this.didChange(n,c,s),true},"set"),get:h((e,n)=>e[n],"get")});}wrap(t){return nt(t,this)}has(t){return t in this.state}setValue(t,e){this.state[t]=e;}getValue(t){return this.state[t]}get value(){return this.state}dispatchChanges(t,e,n){for(let s of this.listeners)s(t,e,n);}async didChange(t,e,n){let s=Date.now();s-this.debounceTime<=this.THRESHOLD_TIME&&this.timer&&await OUID.clearTimeout(this.timer),this.debounceTime=s,this.timer=await OUID.setTimeout(()=>{this.dispatchChanges(t,e,n);},this.THRESHOLD_TIME);}watch(t){return this.listeners.push(t),this.listeners.length-1}unwatch(t){if(typeof t=="number"){this.listeners.splice(t,1);return}this.listeners.splice(this.listeners.indexOf(t),1);}};h(P,"State");var N=P;var st=0;function K(a){return function(t){var s;let e=(s=class extends t{constructor(){super(...arguments);u(this,"template",a.template);u(this,"css",a.css);u(this,"hash","component-"+st+"-"+a.tag);}},h(s,"WithDecoration"),s),n=e;return O.register(a.tag,n),e}}h(K,"Component");function U(a,t,e){return new a(t,e)}h(U,"createComponent");var k=class k{constructor(t={},e={}){u(this,"state");u(this,"parent");u(this,"emits");u(this,"props");u(this,"provides",new Map);this.state=new N(this),this.props=t,this.emits=new I(e);}onMounted(){}willMount(){}willUnmount(){}provide(t,e){this.provides.set(t,e);}inject(t){let e=this;for(;e;){if(e.provides.has(t))return e.provides.get(t);e=e.parent;}}};h(k,"OComponent");var S=k;function rt(a){return a.replace(/-([a-z])/g,(t,e)=>e.toUpperCase())}h(rt,"toCamelCase");function g(a){return J(a)?a.value:a}h(g,"normaliseValue");function it(a){let t={};for(let e=a;e;e=Object.getPrototypeOf(e))Object.getOwnPropertyNames(e).forEach(n=>{let s=a[n];typeof s=="function"&&n!=="constructor"&&!n.startsWith("__")&&!n.endsWith("__")?n in t||(t[n]=s.bind(a)):n!=="constructor"&&!n.startsWith("__")&&!n.endsWith("__")&&(n in t||(t[n]=s));});return t}h(it,"toObjectWithFunctions");function ot(a){return typeof a=="function"&&!("prototype"in a)}h(ot,"isLazyLoader");var b=class b{constructor(t,e,n,...s){u(this,"app");u(this,"component");u(this,"parentContext");u(this,"bindings",[]);u(this,"directives",[]);u(this,"mountedComponents",new WeakMap);u(this,"stack",[]);this.app=t,this.component=e,this.parentContext=n;for(let c of s)this.stack.push(c);}get hostElement(){return this.component._hostElement}bind(t){this.bindings.push(t);}directive(t){this.directives.push(t);}evaluateExpression(t){return this.resolve(t)}resolve(t,e=true,...n){if(!t)return;let s=this.component.state.value,o={...it(s)};for(let l of [...this.stack.reverse(),...n])Object.assign(o,l);try{let l=`${e?'"use strict";':""}return ${t};`,r=Object.keys(o),i=new Function(...r,l);return i.bind(this.component),i.apply(this.component,Object.values(o))}catch(l){console.log(this,t),console.error(l);}}updateValue(t,e){t.split(/[\.\[]/)[0]in this.component?this.resolve(`this.${t}=__o_model_value__`,true,{__o_model_value__:e}):this.resolve(`${t}=__o_model_value__`,true,{__o_model_value__:e}),this.component.state.didChange("","","");}push(t){this.stack.unshift(t);}pop(){this.stack.shift();}async updateBindings(){this.bindings.forEach(t=>this.updateBinding(t));}async updateBinding(t){if(t.type==="model")t.node.setProperty("value",g(t.context.resolve(t.key)));else if(t.type==="interpolation")await t.node.setContentText(t.template?.replace(/\{\{(.*?)\}\}/g,(e,n)=>(n=n.trim(),g(t.context.resolve(n))))??"");else if(t.type==="attribute"){let e=t.key,n=g(this.resolve(t.template));e==="class"?this.expandClass(t.node,n):e==="style"?this.expandStyle(t.node,n):typeof n!="object"&&typeof n!="function"&&typeof n!="symbol"&&typeof n<"u"&&t.node.setAttribute(e,n.toString());}else if(t.type==="prop"&&t.context.component){let e=g(this.resolve(t.template));try{console.log({...t.context.component}),t.context.component.props[t.key]=e,t.context.updateBindings(),t.context.updateDirectives();}catch(n){console.error(n);}}}async updateDirectives(){for(let t of this.directives){if(t.type==="if"){let e=g(t.context.evaluateExpression(t.expr));e?t.active!==true&&(t.active=true,await t.placeholder.after(t.node),await t.context.render(t.node),t.context.updateBindings()):e||t.active!==false&&(this.unmountComponent(t.node),await t.node.remove(),t.active=false);}if(t.type==="for"){let e=t.children??new Map,n=new Map,s=h((l,r)=>t.key?g(t.context.resolve(t.key,true,{[t.item]:l})):r,"keyFn"),c=g(t.context.resolve(t.list))||[],o=t.placeholder;for(let l=0;l<c.length;l++){let r=c[l],d=s(r,l),y=e.get(d),f=y?.node,w={[t.item]:r},m=y?.ctx??new b(this.app,this.component,null);m.stack=[w,...t.context.stack],f?(m.updateBindings(),await m.updateDirectives()):(f=await t.node.cloneNode(true),await m.render(f),await o.after(f),m.updateBindings(),await m.updateDirectives()),o=f,n.set(d,{node:f,ctx:m});}for(let l in e){let r=e.get(l);n.has(l)||(this.unmountComponent(r.node),await r.node.remove());}t.children=n;}}}async render(t){switch(t.type){case "Text":this.handleTextNode(t);break;case "Element":await this.handleElementNode(t);break;default:console.warn("Unknown node",t);}}expandClass(t,e){let n=e;typeof e=="object"&&(Array.isArray(e)?n=e.join(" "):n=Object.keys(e).filter(s=>e[s]).join(" ")),t.setAttribute("class",n);}expandStyle(t,e){let n=e;typeof e=="object"&&!Array.isArray(e)&&(n=Object.keys(e).map(s=>`${s}: ${e[s]}`).join(";")),t.setAttribute("style",n);}expandStandardAttributes(t){[...t.attributes].filter(e=>e.name.startsWith(":")).forEach(e=>{let n=e.name.substring(1);this.bind({type:"attribute",node:t,key:n,context:this,template:e.value.trim()}),t.removeAttribute(e.name);});}async handleElementNode(t){let e=await t.parentNode(),n=null;if(t.hasAttribute("o-if")){let r=await t.getAttribute("o-if"),i=await OUID.createComment("o-if:"+r);await e.insertBefore(i,t),await t.removeAttribute("o-if"),this.directive({type:"if",expr:r,node:t,placeholder:i,context:this,active:void 0}),n="if";}if(t.hasAttribute("o-for")){if(n==="if")throw new Error("Can't have o-if and o-for on the same component");let r=await t.getAttribute("o-for"),[i,d]=r.split(" of ").map(w=>w.trim()),y=await OUID.createComment("for:"+r),f=t.attribute(":key")??"";await e?.insertBefore(y,t),await Promise.all([t.removeAttribute("o-for"),t.removeAttribute(":key")]),await t.remove(),this.directive({type:"for",item:i,list:d,node:t,placeholder:y,context:this,key:f}),n="for";}let s=t.tag.toLowerCase(),c=O.get(s);n!=="for"&&[...t.attributes].forEach(async r=>{if(r.name==="o-model"){let i=r.value.trim();if(t.tag==="input"||t.tag==="textarea"){let d=t;await d.setInputValue(g(this.resolve(i))),d.addEventListener("input",async y=>{let f=await y.target.getProperty("value");this.updateValue(i,f);}),this.bind({node:t,key:i,type:"model",context:this});}await t.removeAttribute(r.name);}});let o={},l={};if(n!=="for"){let{props:r,events:i}=this.componentAttributes(t,this);o=r,l=i,this.expandStandardAttributes(t),Object.keys(l).forEach(async d=>{let y=l[d];c||await t.addEventListener(d,f=>{typeof y=="function"&&y.apply(this.component,[f]);}),await t.removeAttribute("@"+d);});}if(!n){if(c){await this.mountComponent(t,c,this,o,l);return}for(let r of await t.childNodes())await this.render(r);}}handleTextNode(t){let e=t.textContent?.match(/\{\{(.*?)\}\}/g);e&&e.forEach(n=>{let s=n.replace(/[{}]/g,"").trim();this.bind({type:"interpolation",node:t,key:s,template:t.textContent,context:this});});}componentAttributes(t,e){let n={},s={},c=["import","interface","module","o-model","o-if","o-for"];return [...t.attributes].filter(o=>!c.includes(o.name)).forEach(o=>{let l=o.name;if(l.startsWith("@")){let d=e?.resolve(o.value,true);if(typeof d!="function")throw new Error("Event handler can only be function");l=l.substring(1),s[l]=d;return}let r=null,i=o.value;l.startsWith(":")&&(r=o.value,l=l.substring(1),i=g(e?.resolve(o.value))),l=rt(l),n[l]={name:l,value:i,expr:r};}),{props:n,events:s}}async mountComponent(t,e,n,s={},c={}){let o=await OUID.createdElement("div"),l=new b(this.app,{},null),r={};Object.keys(s).forEach(w=>{let m=s[w];m.expr&&this.bind({type:"prop",node:o,key:w,context:l,template:m.expr}),r[w]=m.value;});let i=await at(e,r,c);l.component=i,l.stack=[i.props],Object.keys(s).filter(w=>!s[w].expr).forEach(w=>o.setAttribute(w,s[w].value)),o.addClass("o-component-host"),t.tag.toLowerCase()!=="div"&&o.addClass("c-"+t.tag.toLowerCase()),i.willMount(),await o.setHTML(i.template.trim()),i.css&&(i.cssInstance=await OUID.injectComponentStyles(i.css));let d=await t.childNodes(),y=await o.queryAll("o-slot");if(y){let w=y.map(async m=>{let R=m.attribute("name"),Y=await m.parentNode();for(let Z of d.filter(j=>R?R&&j.type==="Element"&&j.attribute("slot")===R:j.type!=="Element"||!j.hasAttribute("slot")))await Y?.insertBefore(Z,m);});await Promise.all(w);}let f=o;await t.setHTML(""),await t.appendChild(o),i._hostElement=f,i.parent=n?.component??void 0,i.provide(b.PROVIDE_TOKEN,this),await l.render(f),l.updateBindings(),l.updateDirectives(),this.mountedComponents.set(f,i),i.onMounted(),i.state.watch(()=>{l.updateBindings(),l.updateDirectives();});}async unmountComponent(t){let e=this.mountedComponents.get(t);e&&(await OUID.rejectComponentStyles(e.cssInstance),e.willUnmount(),e._hostElement=null);let n=await t.queryAll("*")??[];for(let s of n)await this.unmountComponent(s);this.mountedComponents.delete(t);}};h(b,"RenderContext"),u(b,"PROVIDE_TOKEN","RENDER_CONTEXT");var x=b;function at(a,t,e){return ot(a)?a().then(n=>U(n.default,t,e)):U(a,t,e)}h(at,"o");function ct(a){return typeof a=="function"}h(ct,"isProvideFunction");var _=class _{constructor(t,e){u(this,"root");u(this,"options");u(this,"providers",new Map);this.root=t,this.options=e,_.currentApp=this;}provide(t,e){if(this.providers.has(t)){console.warn(`[OUID] - Provider ${t} already exists`);return}this.providers.set(t,ct(e)?{provide:e}:{value:e});}inject(t){return this.providers.get(t)?.value}use(t){return t.install(this),this}async mount(t){if(!globalThis.__OUI_PUR_JS_CONTEXT__)return;this.options?.css&&(console.log("Injecting app css",this.options.css),await OUID.injectComponentStyles(this.options.css));let e=await OUID.query(t);if(console.log("Mounting app on",e),!e)throw new Error("No selector found for "+t);let n=new x(this,{},null);n.mountComponent(e,this.root,null).then(()=>{n.updateBindings(),n.updateDirectives();});}};h(_,"App"),u(_,"currentApp",null);var A=_;function Nt(a,t){A.currentApp?.provide(a,t);}h(Nt,"provide");function z(a){return A.currentApp?.inject(a)??void 0}h(z,"inject");function lt(a,t,e,n){var s=arguments.length,c=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,e):n,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")c=Reflect.decorate(a,t,e,n);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(c=(s<3?o(c):s>3?o(t,e,c):o(t,e))||c);return s>3&&c&&Object.defineProperty(t,e,c),c}h(lt,"_ts_decorate");var q=class q extends S{constructor(){super(...arguments);u(this,"routeStateHander",null);u(this,"router");}willMount(){}onMounted(){this.router=ut(),console.log("Router mounted"),this.router?.bind(this).then(e=>{this.routeStateHander=e,this.routeStateHander?.();});}willUnmount(){console.log("Router will unmount"),this.router?.unbind(this.routeStateHander);}};h(q,"RouterComponent");var D=q;D=lt([K({tag:"o-router",template:`
         <div id="router-view"></div>
-    `})],exports.RouterComponent);var D="OROUTER_TOKEN",M="ACTIVE_ROUTE";function V(){return j(D)}function Ce(s){return new L(s)}function H(s,e){let t=new k__default.default(s.path).reverse(e);return t===false?"":t}var L=class{constructor(e){this.routes=e;}guards=[];install(e){e.provide(D,this);}resolve(e){let t=new k__default.default(e),n=e.split("?").reverse()[0].split("&").reduce((o,c)=>{let i=c.split("=");return o[i[0]]=decodeURIComponent(i[1]),o},{});for(let o of this.routes){let c=t.match(o.path);if(c)return {route:o,params:c,query:n}}return null}push(e){if(!e.path&&!e.name){console.warn("[OUID-Router]: no path or name provided to push");return}if(e.name){let t=this.routes.find(o=>o.name===e.name);if(!t){console.warn("[OUID-Router]: No matched route name found");return}let n=H(t,e.params);window.history.pushState({},"",n),window.dispatchEvent(new PopStateEvent("popstate"));return}if(e.absolute&&window.history.pushState({},"",e.path),e.path){let t=this.routes.find(n=>n.path===e.path);if(t){let n=H(t,e.params);window.history.pushState({},"",n),window.dispatchEvent(new PopStateEvent("popstate"));return}}}async beforeRouteGoing(e,t){for(let n of this.guards.filter(o=>o.type==="before")){let o=await n.fn(e,t);if(o)return o}}async afterRouteGoing(e,t){for(let n of this.guards.filter(o=>o.type==="after")){let o=await n.fn(e,t);if(o)return o}}bind(e){let t=async()=>{console.log("Handling routing",this);let n=window.location.pathname,o=this.resolve(n);if(console.log("Matched::",o),!o){console.warn(`[Router] No route found for: ${n}`);return}let c=await this.beforeRouteGoing({url:n,path:n,name:o.route.name},e.inject(M));if(c){typeof c=="object"&&"name"in c&&this.push({name:c.name,params:c.params});return}let i=e.inject(g.PROVIDE_TOKEN),r=i.hostElement.querySelector("#router-view");console.log("Outlet",r),r&&(r.innerHTML="",e.provide(M,{params:o.params,query:o.query}),await i.mountComponent(r,o.route.component,i),await this.afterRouteGoing({url:n,path:n,name:o.route.name},e.inject(M)));};return window.addEventListener("popstate",t.bind(this)),t}unbind(e){window.removeEventListener("popstate",e);}beforeEach(e){let t={fn:e,type:"before"};return this.guards.push(t),()=>{this.guards.splice(this.guards.indexOf(t));}}afterEach(e){let t={fn:e,type:"after"};return this.guards.push(t),()=>{this.guards.splice(this.guards.indexOf(t));}}};exports.ACTIVE_ROUTE_TOKEN=M;exports.App=R;exports.Component=_;exports.Emits=T;exports.OComponent=O;exports.ROUTER_INJECTION_TOKEN=D;exports.RenderContext=g;exports.Router=L;exports.State=C;exports.Stated=v;exports.createComponent=b;exports.createRouter=Ce;exports.inject=j;exports.isStated=E;exports.provide=de;exports.stated=B;exports.useRouter=V;//# sourceMappingURL=index.js.map
+    `})],D);var Q="OROUTER_TOKEN",V="ACTIVE_ROUTE";function ut(){return z(Q)}h(ut,"useRouter");function Pt(a){return new H(a)}h(Pt,"createRouter");function G(a,t){let e=new X(a.path).reverse(t);return e===false?"":e}h(G,"generatePath");var W=class W{constructor(t){u(this,"routes");u(this,"windowObject",null);u(this,"guards",[]);u(this,"eventRegistration",null);this.routes=t;}install(t){t.provide(Q,this);}resolve(t){let e=new X(t),n=t.split("?").reverse()[0].split("&").reduce((s,c)=>{let o=c.split("=");return s[o[0]]=decodeURIComponent(o[1]),s},{});for(let s of this.routes){let c=e.match(s.path);if(c)return {route:s,params:c,query:n}}return null}push(t){if(!t.path&&!t.name){console.warn("[OUID-Router]: no path or name provided to push");return}if(t.name){let e=this.routes.find(s=>s.name===t.name);if(!e){console.warn("[OUID-Router]: No matched route name found");return}let n=G(e,t.params??{});this.windowObject?.invoke("history.pushState",{},"",n),this.windowObject?.dispatchEvent("popstate","PopStateEvent",{state:{}});return}if(t.absolute&&t.path&&this.windowObject?.invoke("history.pushState",{},"",t.path),t.path){let e=this.routes.find(n=>n.path===t.path);if(e){let n=G(e,t.params??{});this.windowObject?.invoke("history.pushState",{},"",n),this.windowObject?.dispatchEvent("popstate","PopStateEvent",{state:{}});return}}}async beforeRouteGoing(t,e){for(let n of this.guards.filter(s=>s.type==="before")){let s=await n.fn(t,e);if(s)return s}}async afterRouteGoing(t,e){for(let n of this.guards.filter(s=>s.type==="after")){let s=await n.fn(t,e);if(s)return s}}async bind(t){this.windowObject=await OUID.acquireObject("window");let e=h(async()=>{console.log("Handling routing",this);let n=await this.windowObject?.getProperty("location.pathname"),s=this.resolve(n);if(console.log("Matched::",s),!s){console.warn(`[Router] No route found for: ${n}`);return}let c=await this.beforeRouteGoing({url:n,path:n,name:s.route.name},t.inject(V));if(c){typeof c=="object"&&"name"in c&&this.push({name:c.name,params:c.params});return}let o=t.inject(x.PROVIDE_TOKEN),l=await o?.hostElement.query("#router-view");console.log("Outlet",l),l&&(l.innerHTML="",t.provide(V,{params:s.params,query:s.query}),await o?.mountComponent(l,s.route.component,o),await this.afterRouteGoing({url:n,path:n,name:s.route.name},t.inject(V)));},"handler");return this.eventRegistration=await this.windowObject.addEventListener("popstate",e.bind(this)),e}unbind(t){this.eventRegistration&&this.windowObject?.dettachEventListener("popstate",this.eventRegistration);}beforeEach(t){let e={fn:t,type:"before"};return this.guards.push(e),()=>{this.guards.splice(this.guards.indexOf(e));}}afterEach(t){let e={fn:t,type:"after"};return this.guards.push(e),()=>{this.guards.splice(this.guards.indexOf(e));}}};h(W,"Router");var H=W;function T(a){let t=Date.now();return `${(1e3+Math.floor(Math.random()*9e3)+a.length).toString(16)}-${t.toString(16)}`}h(T,"generateUIID");(function(a){var s,c,o;let t=(s=class{constructor(r,i){u(this,"uid");u(this,"tag");this.uid=r,this.tag=i;}async addEventListener(r,i){return p.addEventListener(this,r,i)}async dettachEventListener(r,i){await p.dettachEventListener(this,r,i);}async invoke(r,...i){await p.call("invokeObjectMethod",this.uid,r,...i);}async getProperty(r){return await p.call("getObjectProperty",this.uid,r)}async setProperty(r,i){await p.call("setObjectProperty",this.uid,r,i);}async dispatchEvent(r,i,d){await p.call("dispatchEvent",this.uid,r,i,d);}},h(s,"OObject"),s);a.OObject=t;let e=(c=class extends t{constructor(i){super(i.uid,i.tag);u(this,"textContent");u(this,"type","Unknown");u(this,"attributes");u(this,"children");u(this,"classes");u(this,"style");for(let d in i)this[d]=i[d];this.attributes??(this.attributes=[]),this.classes??(this.classes=[]),this.style??(this.style="");}},h(c,"ONode"),c);a.ONode=e;let n=(o=class extends e{constructor(r){super(r);}async addClass(r){await p.call("addClass",this.uid,r);}async setAttribute(r,i){let d=await p.call("setAttribute",this.uid,r,i);d&&(this.attributes=d);}async removeAttribute(r){let i=await p.call("removeAttribute",this.uid,r);i&&(this.attributes=i);}async appendChild(r){await p.call("appendChild",this.uid,r.uid);}set innerHTML(r){this.setHTML(r);}async cloneNode(r){let i=await p.call("cloneNode",this.uid,r);return i?new o(i):null}async remove(){await p.call("removeNode",this.uid);}async removeChild(r){await p.call("removeChild",this.uid,r.uid);}async replaceChildNode(r,i){await p.call("removeChild",this.uid,r.uid,i.uid);}async replaceWith(r){await p.call("replaceWith",this.uid,r.uid);}async after(r){await p.call("insertAfter",this.uid,r.uid);}async setHTML(r){await p.call("setInnerHTML",this.uid,r);}async HTML(){return await p.call("getInnerHTML",this.uid)??""}async setInnerText(r){await await p.call("setInnerText",this.uid,r);}async setContentText(r){await await p.call("setContentText",this.uid,r);}async getContentText(){return await p.call("getContentText",this.uid)??""}async content(){try{return await p.call("getInnerText",this.uid)??""}catch(r){return console.error(r),""}}async childNodes(){return (await p.call("childNodes",this.uid))?.map(r=>new o(r))??[]}hasAttribute(r){return !!this.attributes.find(i=>i.name===r)}async getAttribute(r){return await p.call("getAttribte",this.uid,r)??""}attribute(r){return this.attributes.find(i=>i.name===r)?.value??null}async getAttributeNames(){return await p.call("getAttributeNames",this.uid)??[]}async parentNode(){let r=await p.call("parentNode",this.uid);return r?new o(r):null}async insertBefore(r,i){return await p.call("insertBefore",this.uid,i.uid,r.uid)}async setInputValue(r){await p.call("setInputValue",this.uid,r);}async inputValue(r){return await p.call("inputValue",this.uid,r)??""}async query(r,i){return await p.query(r,i,this.uid)}async queryAll(r,i){return await p.queryAll(r,i,this.uid)}async release(){await p.call("releaseNode",this.uid);}},h(o,"OElement"),o);a.OElement=n;})(v||(v={}));function Wt(){return function(a,t,e){e.value;e.value=async(...s)=>{let c=s[0];try{let o=await p.invoke(t,[{props:c.getSafePropsForNative}]);console.log("result from native function"),c.setSafePropsFromNative;}catch{console.error("Failed to invoke native function");}};}}h(Wt,"Native");var B=class B{constructor(){u(this,"callbacks",new Map);u(this,"DOM_EVENT_LISTENERS",new Map);u(this,"timers",new Map);u(this,"_config");u(this,"listeners",new Map);this.subscribe("__ouid_native_event_success__",(t,e)=>{let n=this.callbacks.get(t);if(n)return this.callbacks.delete(t),n.success(...JSON.parse(e))}),this.subscribe("__ouid_native_event_error__",(t,e)=>{let n=this.callbacks.get(t);if(n)return console.error("Failure:",t,e),this.callbacks.delete(t),n.error(...JSON.parse(e))}),this.subscribe("__ouid_web_event__",(t,e)=>{let n=this.DOM_EVENT_LISTENERS.get(t);if(n){let c=JSON.parse(e)[1];return c&&(c.target=c?.target?new v.OElement(c.target):null),n(c)}});}config(t){return this._config=t,this}invoke(t,...e){let n=T(t);return new Promise((s,c)=>{this.callbacks.set(n,{success:s,error:c});try{if(!WebOUID)throw new Error("NativeOUID bridge not available");WebOUID.invoke(n,t,JSON.stringify(e));}catch(o){console.error(o),this.callbacks.delete(n);}})}async call(t,...e){try{return (await this.invoke(`_ouid_${t}`,...e)).data}catch(n){return console.error(n),null}}emit(t,e){WebOUID?.invoke("event",t,JSON.stringify(e));}subscribe(t,e){this.listeners.has(t)||(this.listeners.set(t,[]),globalThis[t]=(n,s)=>{this.listeners.get(t)?.forEach(c=>c(n,s));}),this.listeners.get(t).push(e);}async query(t,e,n){let s=await this.call("query",t,e,n);return s?new v.OElement(s):null}async queryAll(t,e,n){let s=await this.call("queryAll",t,e,n);return s?s.map(c=>new v.OElement(c)):[]}async createdElement(t,e={}){let n=await this.call("createElement",t,e);return n?new v.OElement(n):null}async createComment(t){let e=await this.call("createComment",t);return e?new v.OElement(e):null}async addEventListener(t,e,n){let s=T(e+(typeof t=="string"?t:t.tag));return this.DOM_EVENT_LISTENERS.set(s,n),await p.call("attachEventListener",typeof t=="string"?t:t.uid,s,e),s}async dettachEventListener(t,e,n){this.DOM_EVENT_LISTENERS.delete(n),await p.call("dettachEventListener",typeof t=="string"?t:t.uid,n,e);}async injectComponentStyles(t){let e=await p.call("injectComponentStyles",t);return e?new v.OElement(e):null}async rejectComponentStyles(t){await p.call("rejectComponentStyles",t.uid);}async getOObject(t){let e=await p.call("getOObject",t);return e?new v.OObject(e.uid,e.tag):null}async acquireObject(t){let e=await p.call("acquireObject",t);return e?new v.OObject(e.uid,e.tag):null}async setTimeout(t,e){let n=T("setTimeout"+e);this.DOM_EVENT_LISTENERS.set(n,t);let s=await p.call("setTimeout",n,e)??-1;return console.log("Timer id",s),s>=0&&this.timers.set(s,n),s}async clearTimeout(t){let e=this.timers.get(t);e&&(this.DOM_EVENT_LISTENERS.delete(e),await p.call("clearTimeout",t));}async setInterval(t,e){let n=T("setInterval"+e);this.DOM_EVENT_LISTENERS.set(n,t);let s=await p.call("setInterval",n,e)??-1;return s>=0&&this.timers.set(s,n),s}async clearInterval(t){let e=this.timers.get(t);e&&(this.DOM_EVENT_LISTENERS.delete(e),await p.call("clearInterval",t));}};h(B,"OUIDBridge");var $=B,p=new $;globalThis.OUID=p;var v;function Jt(){return O.getAll().reduce((t,[e,n])=>(t[e]=n,t),{})}h(Jt,"components");export{V as ACTIVE_ROUTE_TOKEN,A as App,K as Component,I as Emits,Wt as Native,S as OComponent,v as ODOM,p as OUID,$ as OUIDBridge,Q as ROUTER_INJECTION_TOKEN,x as RenderContext,H as Router,D as RouterComponent,N as State,C as Stated,Jt as components,U as createComponent,Pt as createRouter,z as inject,J as isStated,at as o,Nt as provide,nt as stated,ut as useRouter};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map