@realglebivanov/reactive 1.0.4 → 1.0.6

package/README.md

@@ -15,9 +15,9 @@ import {
     dedupObservable,
     tag,
     once
-} from "@realglebivanov/reactive";
+} from ".";
 
-import { ReactiveArray } from "@realglebivanov/reactive";
+import { ReactiveArray } from ".";
 
 const LOREM = `
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

package/dist/index.d.ts

@@ -1,53 +1,33 @@
-interface Lifecycle {
-    mount(parentNode: Node): void;
-    activate(): void;
-    deactivate(): void;
-    unmount(): void;
+interface Schedulable {
+    run(): void;
 }
 
-type Task = () => void;
-type TaskRunner = (task: Task) => void;
-declare const buildDedupMicrotaskRunner: () => TaskRunner;
-declare const dedupMicrotaskRunner: TaskRunner;
-declare const buildMicrotaskRunner: () => TaskRunner;
-declare const microtaskRunner: TaskRunner;
-
-declare const observable: <T>(value: T, opts?: {
-    microtaskRunner: TaskRunner;
-}) => ValueObservable<T>;
-declare class ValueObservable<T> implements Observable<T>, Updatable<T> {
+declare const observable: <T>(value: T) => ValueObservable<T>;
+declare class ValueObservable<T> implements Observable<T>, Updatable<T>, Schedulable {
     private value;
-    private opts;
-    private readonly observers;
-    constructor(value: T, opts: {
-        microtaskRunner: TaskRunner;
-    });
+    private readonly notifier;
+    constructor(value: T);
     unsubscribeAll(): void;
     unsubscribe(id: symbol): void;
     subscribe(id: symbol, observer: Observer<T>): void;
     subscribeInit(id: symbol, observer: Observer<T>): void;
     update(updateFn: UpdateFn<T>): void;
-    private notifyAll;
-    private notify;
+    run(): void;
 }
 
-type ObservableValue<O extends Observable<any>> = O extends Observable<infer T> ? T : never;
-type Values<Observables extends readonly Observable<any>[]> = {
-    [K in keyof Observables]: ObservableValue<Observables[K]>;
-};
 declare const mapObservable: <Observables extends readonly Observable<any>[], R>(mapFn: (...values: Values<Observables>) => R, ...observables: Observables) => MapObservable<Observables, R>;
-declare class MapObservable<Observables extends readonly Observable<any>[], R> implements Observable<R> {
+declare class MapObservable<Observables extends readonly Observable<any>[], R> implements Observable<R>, Schedulable {
     private mapFn;
     private observables;
-    private observers;
-    private initializedIndices;
+    private notifier;
+    private state;
     private ids;
-    private currentValues;
     constructor(mapFn: (...values: Values<Observables>) => R, observables: Observables);
     unsubscribeAll(): void;
     unsubscribe(id: symbol): void;
     subscribe(id: symbol, observer: Observer<R>): void;
     subscribeInit(id: symbol, observer: Observer<R>): void;
+    run(): void;
     private notifyObservers;
     private innerSubscribe;
     private innerUnubscribe;
@@ -56,19 +36,20 @@ declare class MapObservable<Observables extends readonly Observable<any>[], R> i
 declare const dedupObservable: <T>(innerObservable: Observable<T>, compareEqualFn?: CompareEqualFn<T>, cloneFn?: CloneFn<T>) => DedupObservable<T>;
 type CompareEqualFn<T> = (a: T, b: T) => boolean;
 type CloneFn<T> = (a: T) => T;
-declare class DedupObservable<T> implements Observable<T> {
+declare class DedupObservable<T> implements Observable<T>, Schedulable {
     private innerObservable;
     private compareEqualFn;
     private cloneFn;
     private id;
-    private currentValue;
-    private isInitialized;
-    private observers;
+    private state;
+    private boundUpdate;
+    private notifier;
     constructor(innerObservable: Observable<T>, compareEqualFn: CompareEqualFn<T>, cloneFn: CloneFn<T>);
     unsubscribeAll(): void;
     unsubscribe(id: symbol): void;
     subscribe(id: symbol, observer: Observer<T>): void;
     subscribeInit(id: symbol, observer: Observer<T>): void;
+    run(): void;
     private innerSubscribe;
     private updateValue;
     private innerUnubscribe;
@@ -87,6 +68,29 @@ declare class ScopedObservable<T extends Observable<any>> implements Observable<
     update(this: ScopedObservable<Updatable<Value<T>> & Observable<Value<T>>>, updateFn: UpdateFn<Value<T>>): void;
 }
 
+interface Lifecycle {
+    mount(parentNode: Node): void;
+    activate(): void;
+    deactivate(): void;
+    unmount(): void;
+}
+
+type ReactiveNode<T extends Node> = Lifecycle & T & ReactiveNodeSetters<T>;
+interface ReactiveNodeSetters<T extends Node> {
+    listen: <R extends ReactiveNode<T>>(this: R, type: string, cb: EventListenerOrEventListenerObject) => R;
+    clk: <R extends ReactiveNode<T>>(this: R, cb: EventListenerOrEventListenerObject) => R;
+}
+type TagReactiveNode<K extends keyof HTMLElementTagNameMap> = ReactiveNode<HTMLElementTagNameMap[K]> & TagReactiveNodeSetters<K>;
+interface TagReactiveNodeSetters<K extends keyof HTMLElementTagNameMap> {
+    att: (name: string, value: string) => TagReactiveNode<K>;
+    class$: (value: Observable<string>) => TagReactiveNode<K>;
+    att$: (name: string, value: Observable<string>) => TagReactiveNode<K>;
+    prop$: <N extends keyof HTMLElementTagNameMap[K]>(name: N, value: Observable<HTMLElementTagNameMap[K][N]>) => TagReactiveNode<K>;
+    model$: <I extends 'input' | 'textarea' | 'select'>(this: TagReactiveNode<I>, value$: Observable<string> & Updatable<string>) => TagReactiveNode<I>;
+}
+declare const toTagReactiveNode: <K extends keyof HTMLElementTagNameMap>(node: HTMLElementTagNameMap[K], handlers: Lifecycle[]) => TagReactiveNode<K>;
+declare const toReactiveNode: <T extends Node>(node: T, handlers: Lifecycle[]) => ReactiveNode<T>;
+
 type Observables = Record<string, Observable<any>>;
 type ScopedObservables<T extends Observables> = {
     [K in keyof T]: ScopedObservable<T[K]>;
@@ -176,6 +180,25 @@ declare const template: (strings: TemplateStringsArray, ...holes: Hole[]) => Rea
 
 declare const reactiveTextNode: (text: string) => ReactiveNode<Text>;
 
+type InputChild<T extends Node, K extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = TagReactiveNode<K> | ReactiveNode<T> | string;
+declare const tag: <K extends keyof HTMLElementTagNameMap>(name: K, ...inputChildren: InputChild<Node>[]) => TagReactiveNode<K>;
+declare const tags: {
+    img: (src: string) => TagReactiveNode<"img">;
+    input: (type: string) => TagReactiveNode<"input">;
+    canvas: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"canvas">;
+    button: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"button">;
+    h1: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"h1">;
+    h2: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"h2">;
+    h3: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"h3">;
+    p: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"p">;
+    a: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"a">;
+    div: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"div">;
+    ul: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"ul">;
+    li: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"li">;
+    span: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"span">;
+    select: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"select">;
+};
+
 type Source<T> = Observable<Event<T>> & Updatable<Event<T>>;
 declare class ReactiveArray<T> {
     private items;
@@ -215,42 +238,11 @@ interface Observable<T> {
 interface Updatable<T> {
     update(updateFn: UpdateFn<T>): void;
 }
-declare const once: <T extends any[]>(fn: (...values: T) => void, ...observables: { [K in keyof T]: Observable<T[K]>; }) => void;
-
-type ReactiveNode<T extends Node> = Lifecycle & T & ReactiveNodeSetters<T>;
-interface ReactiveNodeSetters<T extends Node> {
-    listen: <R extends ReactiveNode<T>>(this: R, type: string, cb: EventListenerOrEventListenerObject) => R;
-    clk: <R extends ReactiveNode<T>>(this: R, cb: EventListenerOrEventListenerObject) => R;
-}
-type TagReactiveNode<K extends keyof HTMLElementTagNameMap> = ReactiveNode<HTMLElementTagNameMap[K]> & TagReactiveNodeSetters<K>;
-interface TagReactiveNodeSetters<K extends keyof HTMLElementTagNameMap> {
-    att: (name: string, value: string) => TagReactiveNode<K>;
-    class$: (value: Observable<string>) => TagReactiveNode<K>;
-    att$: (name: string, value: Observable<string>) => TagReactiveNode<K>;
-    prop$: <N extends keyof HTMLElementTagNameMap[K]>(name: N, value: Observable<HTMLElementTagNameMap[K][N]>) => TagReactiveNode<K>;
-    model$: <I extends 'input' | 'textarea' | 'select'>(this: TagReactiveNode<I>, value$: Observable<string> & Updatable<string>) => TagReactiveNode<I>;
-}
-declare const toTagReactiveNode: <K extends keyof HTMLElementTagNameMap>(node: HTMLElementTagNameMap[K], handlers: Lifecycle[]) => TagReactiveNode<K>;
-declare const toReactiveNode: <T extends Node>(node: T, handlers: Lifecycle[]) => ReactiveNode<T>;
-
-type InputChild<T extends Node, K extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = TagReactiveNode<K> | ReactiveNode<T> | string;
-declare const tag: <K extends keyof HTMLElementTagNameMap>(name: K, ...inputChildren: InputChild<Node>[]) => TagReactiveNode<K>;
-declare const tags: {
-    img: (src: string) => TagReactiveNode<"img">;
-    input: (type: string) => TagReactiveNode<"input">;
-    canvas: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"canvas">;
-    button: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"button">;
-    h1: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"h1">;
-    h2: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"h2">;
-    h3: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"h3">;
-    p: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"p">;
-    a: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"a">;
-    div: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"div">;
-    ul: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"ul">;
-    li: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"li">;
-    span: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"span">;
-    select: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"select">;
+type ObservableValue<O extends Observable<any>> = O extends Observable<infer T> ? T : never;
+type Values<Observables extends readonly Observable<any>[]> = {
+    [K in keyof Observables]: ObservableValue<Observables[K]>;
 };
+declare const once: <T extends any[]>(fn: (...values: T) => void, ...observables: { [K in keyof T]: Observable<T[K]>; }) => void;
 
 type RouteKey<T extends RouteCollection<Node>> = keyof T & string;
 type RouteCollection<N extends Node> = Record<string, ReactiveNode<N>>;
@@ -259,4 +251,22 @@ type RouterOpts<T extends RouteCollection<Node>> = {
 };
 declare const router: <T extends RouteCollection<Node>>(routes: T, opts: RouterOpts<T>) => ReactiveNode<Comment>;
 
-export { type BuildFn, type Collection, type Event, type InputChild, InputObservable, type Key, type KeyFn, type Observable, type Observer, ReactiveArray, ReactiveItem, ReactiveItemCollection, type ReactiveNode, type ReactiveNodeSetters, ScopedObservable, type TagReactiveNode, type TagReactiveNodeSetters, type Task, type TaskRunner, type Updatable, type UpdateFn, buildDedupMicrotaskRunner, buildMicrotaskRunner, component, cond, dedupMicrotaskRunner, dedupObservable, inputObservable, iterable, mapObservable, microtaskRunner, observable, once, reactiveTextNode, router, scopedObservable, tag, tags, template, toReactiveNode, toTagReactiveNode };
+type Task = () => void;
+type TaskRunner = (task: Task) => void;
+declare const buildMicrotaskRunner: () => TaskRunner;
+declare const microtaskRunner: TaskRunner;
+
+declare class RingQueue<T> {
+    private size;
+    private head;
+    private tail;
+    private items;
+    constructor(capacity?: number);
+    get isEmpty(): boolean;
+    clear(): void;
+    enqueue(item: T): void;
+    dequeue(): T | undefined;
+    private extend;
+}
+
+export { type BuildFn, type Collection, type Event, type InputChild, InputObservable, type Key, type KeyFn, type Observable, type ObservableValue, type Observer, ReactiveArray, ReactiveItem, ReactiveItemCollection, type ReactiveNode, type ReactiveNodeSetters, RingQueue, ScopedObservable, type TagReactiveNode, type TagReactiveNodeSetters, type Task, type TaskRunner, type Updatable, type UpdateFn, type Values, buildMicrotaskRunner, component, cond, dedupObservable, inputObservable, iterable, mapObservable, microtaskRunner, observable, once, reactiveTextNode, router, scopedObservable, tag, tags, template, toReactiveNode, toTagReactiveNode };

package/dist/index.js

@@ -1,2 +1,2 @@
-var u=(i,...e)=>new p(i,e),p=class{constructor(e,t){this.mapFn=e;this.observables=t;this.observers=new Map;this.initializedIndices=new Set;this.ids=t.map(s=>Symbol("MapObservable")),this.currentValues=[];}unsubscribeAll(){this.observers.clear(),this.innerUnubscribe();}unsubscribe(e){this.observers.delete(e),this.innerUnubscribe();}subscribe(e,t){if(this.observers.has(e))return console.warn(`Duplicate observer id ${e.toString()}`);this.observers.set(e,t),this.innerSubscribe();}subscribeInit(e,t){if(this.subscribe(e,t),this.initializedIndices.size!==this.ids.length||this.observers.size==1)return;let s=this.mapFn(...this.currentValues);t(s);}notifyObservers(e){return t=>{if(this.currentValues[e]=t,this.initializedIndices.add(e),this.initializedIndices.size!==this.ids.length)return;let s=this.mapFn(...this.currentValues);for(let n of this.observers.values())n(s);}}innerSubscribe(){if(this.observers.size===1)for(let[e,t]of this.observables.entries())t.subscribeInit(this.ids[e],this.notifyObservers(e));}innerUnubscribe(){if(this.observers.size===0){for(let[e,t]of this.observables.entries())t.unsubscribe(this.ids[e]);this.initializedIndices.clear();}}};var $=()=>{let i=new Set,e=()=>queueMicrotask(()=>{let t=Array.from(i);i.clear();for(let s of t)s();});return t=>{i.has(t)||(i.add(t),!(i.size>1)&&e());}},K=$(),V=()=>{let i=[],e=()=>queueMicrotask(()=>{let t=i.toReversed();i.length=0;for(let s of t)s();});return t=>{i.push(t),i.length==1&&e();}},C=V();var S=(i,e={microtaskRunner:K})=>new h(i,e),h=class{constructor(e,t){this.value=e;this.opts=t;this.observers=new Map;}unsubscribeAll(){this.observers.clear();}unsubscribe(e){this.observers.delete(e);}subscribe(e,t){this.observers.has(e)&&console.warn("Duplicate observer id",e),this.observers.set(e,t);}subscribeInit(e,t){this.subscribe(e,t),this.notify(e,t);}update(e){this.value=e(this.value),this.opts.microtaskRunner(this.notifyAll.bind(this));}notifyAll(){for(let[e,t]of this.observers.entries())this.notify(e,t);}notify(e,t){try{this.observers.get(e)===t&&t(this.value);}catch(s){console.error(s);}}};var M=(i,e=(s,n)=>s==n,t=s=>s)=>new m(i,e,t),m=class{constructor(e,t,s){this.innerObservable=e;this.compareEqualFn=t;this.cloneFn=s;this.id=Symbol("DedupObservable");this.currentValue=void 0;this.isInitialized=false;this.observers=new Map;}unsubscribeAll(){this.observers.clear(),this.innerUnubscribe();}unsubscribe(e){this.observers.delete(e),this.innerUnubscribe();}subscribe(e,t){this.observers.set(e,t),this.innerSubscribe();}subscribeInit(e,t){this.subscribe(e,t),!(this.observers.size===1||!this.isInitialized)&&t(this.currentValue);}innerSubscribe(){this.observers.size===1&&this.innerObservable.subscribeInit(this.id,this.updateValue.bind(this));}updateValue(e){if(!(this.isInitialized&&this.compareEqualFn(this.currentValue,e))){this.currentValue=this.cloneFn(e),this.isInitialized=true;for(let t of this.observers.values())t(this.currentValue);}}innerUnubscribe(){this.observers.size===0&&(this.currentValue=void 0,this.isInitialized=false,this.innerObservable.unsubscribe(this.id));}};var E=i=>new f(i),f=class{constructor(e){this.innerObservable=e;this.aliases=new Map;}unsubscribeAll(){for(let e of this.aliases.values())this.innerObservable.unsubscribe(e);this.aliases.clear();}unsubscribe(e){let t=this.aliases.get(e);t!==void 0&&(this.aliases.delete(e),this.innerObservable.unsubscribe(t));}subscribe(e,t){let s=Symbol("ScopedObservable");this.aliases.set(e,s),this.innerObservable.subscribe(s,t);}subscribeInit(e,t){let s=Symbol("ScopedObservable");this.aliases.set(e,s),this.innerObservable.subscribeInit(s,t);}update(e){"update"in this.innerObservable&&this.innerObservable.update(e);}};var F=(i,e)=>new T(i,e),T=class{constructor(e,t){this.input=e;this.value$=t;this.aliases=new Map;}subscribe(e,t){if(this.aliases.has(e))return;let s=Symbol("InputObservable");this.aliases.set(e,[s,t]),this.value$.subscribe(s,this.toInputObserver(t));}subscribeInit(e,t){if(this.aliases.has(e))return;let s=Symbol("InputObservable");this.aliases.set(e,[s,t]),this.value$.subscribeInit(s,this.toInputObserver(t));}unsubscribe(e){let t=this.aliases.get(e);t!==void 0&&(this.value$.unsubscribe(t[0]),this.aliases.delete(e));}unsubscribeAll(){for(let[e,t]of this.aliases.values())this.value$.unsubscribe(e);this.aliases.clear();}update(e){this.value$.update(e);}toInputObserver(e){return t=>{this.input.value!==t&&e(t);}}};var G=(i,...e)=>{let t=Symbol("Once"),s=u((...n)=>n,...e);s.subscribeInit(t,n=>{s.unsubscribe(t),i(...n);});};var c=(n=>(n[n.Active=0]="Active",n[n.Inactive=1]="Inactive",n[n.Mounted=2]="Mounted",n[n.Unmounted=3]="Unmounted",n))(c||{}),N=i=>{let e=3;return {mount:t=>{if(e!==3)return console.warn(`Mounting in status ${c[e]}`);for(let s of i)s.mount(t);e=2;},activate:()=>{if(e!==2&&e!==1)return console.warn(`Activating in status ${c[e]}`);for(let t of i)t.activate();e=0;},deactivate:()=>{if(e!==0)return console.warn(`Deactivating in status ${c[e]}`);for(let t of i)t.deactivate();e=1;},unmount(){if(e!==1)return console.warn(`Unmounting in status ${c[e]}`);for(let t of i)t.unmount();e=3;}}};var w=(i,e)=>{let t=[...e],s=A(t),n=L(t),r=N(t);return Object.assign(i,n,s,r)},a=(i,e)=>{let t=[...e],s=L(t),n=N(t);return Object.assign(i,s,n)},A=i=>({att:function(e,t){return this.setAttribute(e,t),this},class$:function(e){return this.att$("class",e)},att$:function(e,t){let s=Symbol(`Attribute: ${e}`);return i.push({mount:n=>{},activate:()=>t.subscribeInit(s,n=>this.setAttribute(e,n)),deactivate:()=>t.unsubscribe(s),unmount:()=>{}}),this},model$:function(e){let t=F(this,e);return this.prop$("value",t).listen("input",s=>t.update(n=>this.value))},prop$:function(e,t){let s=Symbol(`Property: ${e.toString()}`);return i.push({mount:n=>{},activate:()=>t.subscribeInit(s,n=>this[e]=n),deactivate:()=>t.unsubscribe(s),unmount:()=>{}}),this}}),L=i=>({clk:function(e){return this.listen("click",e)},listen:function(e,t){return i.push({mount:s=>{},activate:()=>this.addEventListener(e,t),deactivate:()=>this.removeEventListener(e,t),unmount:()=>{}}),this}});var P={observables:()=>({}),derivedObservables:()=>({}),cache:false,props:{}},de=i=>new O(Object.assign({},P,i)).toReactiveNode(),y=class{constructor(e,t){this.parent=e;this.props=t;}},O=class{constructor(e){this.opts=e;}toReactiveNode(){return a(document.createComment("Component"),[{mount:e=>{var t;(this.node===void 0||!this.opts.cache)&&this.setupNode(e),(t=this.node)==null||t.mount(e);},activate:()=>{var e;return (e=this.node)==null?void 0:e.activate()},deactivate:()=>{var e,t;if((e=this.node)==null||e.deactivate(),this.observables!==void 0)for(let s in this.observables)(t=this.observables[s])==null||t.unsubscribeAll();},unmount:()=>{var e;(e=this.node)==null||e.unmount(),this.opts.cache||this.cleanUp();}}])}setupNode(e){this.observables=this.buildObservables(),this.context=new y(e,this.opts.props),this.node=this.opts.render.call(this.context,this.observables),this.context.node=this.node;}cleanUp(){this.context!==void 0&&(this.context.node=void 0),this.node=void 0,this.observables=void 0;}buildObservables(){let e=this.opts.observables(),t=this.opts.derivedObservables(e),s=Object.assign({},e,t);return this.toScoped(s)}toScoped(e){let t={};for(let s in e){let n=s;t[n]=E(e[n]);}return t}};var U=class{constructor(e=[]){this.items=e;this.observables=[];}get observable$(){let e=S({type:"replace",items:this.items});return this.observables.push(new WeakRef(e)),e}push(...e){this.items.push(...e),this.emit({type:"append",items:e});}pop(){if(this.items.length===0)return;let e=this.items.length-1,t=this.items.pop();return this.emit({type:"remove",items:new Map().set(e,t)}),t}remove(e){if(e.length==0)return;let t=new Map;for(let s of e)s in this.items&&(t.set(s,this.items[s]),delete this.items[s]);this.emit({type:"remove",items:t});}replace(e){this.items=e,this.emit({type:"replace",items:e});}replaceKeys(e){for(let[t,s]of e.entries())t in this.items&&(this.items[t]=s);this.emit({type:"replaceKeys",items:e});}emit(e){var s;let t=n=>e;for(let n of this.observables)(s=n.deref())==null||s.update(t);}};var l=i=>{let e=document.createTextNode(i);return a(e,[{mount:s=>s.appendChild(e),activate:()=>{},deactivate:()=>{},unmount:()=>e.remove()}])};var fe=({if$:i,then:e,otherwise:t})=>new x(M(i),e,t).toReactiveNode(),x=class{constructor(e,t,s){this.if$=e;this.then=t;this.otherwise=s;this.id=Symbol("Cond");}toReactiveNode(){let e=document.createComment("Cond"),t=s=>this.updateNode(e,s);return a(e,[{mount:s=>s.appendChild(e),activate:()=>this.if$.subscribeInit(this.id,t),deactivate:()=>{var s;this.if$.unsubscribe(this.id),(s=this.currentNode)==null||s.deactivate();},unmount:()=>{var s;(s=this.currentNode)==null||s.unmount(),this.currentNode=void 0,e.remove();}}])}updateNode(e,t){let s=t?this.buildNode(this.then):this.buildNode(this.otherwise);try{this.switchNode(e,s);}catch(n){console.error(n);}}buildNode(e){if(typeof e=="function")return e();if(typeof e=="string")return l(e);if(e!==void 0)throw new Error("Then/otherwise should be either string or function")}switchNode(e,t){var s,n,r;(s=this.currentNode)==null||s.deactivate(),(n=this.currentNode)==null||n.unmount(),this.currentNode=t,t!==void 0&&(t.mount(e.parentNode),(r=e.parentNode)==null||r.insertBefore(t,e.nextSibling),t.activate());}};var b=class{constructor(e,t,s){this.anchor=e;this.value=t;this.node=s;}mount(e){let t=this.anchor.parentNode,s=(e==null?void 0:e.node.nextSibling)||null;t!==null&&(this.node.parentNode===null&&this.node.mount(t),t.insertBefore(this.node,s));}activate(e){this.generationId===void 0&&this.node.activate(),this.generationId=e;}deactivate(){this.node.deactivate();}unmount(){this.node.unmount();}};var v=class{constructor(e,t){this.keyFn=e;this.buildFn=t;this.generationId=0;this.items=new Map;}deactivate(){for(let e of this.items.values())e.deactivate();}unmount(){for(let e of this.items.values())e.unmount();this.items.clear(),this.generationId=0;}replace(e,t){this.generationId++;let s=null;for(let[n,r]of t.entries()){let d=this.keyFn(n,r),k=this.getOrInsert(e,s,d,r);k.generationId=this.generationId,s=k;}this.removeStaleItems();}replaceKeys(e,t){for(let[s,n]of t.entries()){let r=this.keyFn(s,n),d=this.items.get(r);d!==void 0&&(this.insertItem(e,d,r,n),d.deactivate(),d.unmount());}}append(e,t){for(let[s,n]of t.entries()){let r=this.keyFn(s,n);this.insertItem(e,null,r,n);}}remove(e){for(let[t,s]of e.entries()){let n=this.keyFn(t,s),r=this.items.get(n);r!==void 0&&(r.deactivate(),r.unmount(),this.items.delete(n));}}getOrInsert(e,t,s,n){let r=this.items.get(s);return r===void 0?this.insertItem(e,t,s,n):r.value===n?r:(r.deactivate(),r.unmount(),this.insertItem(e,t,s,n))}insertItem(e,t,s,n){let r=this.buildFn(s,n),d=new b(e,n,r);return d.mount(t),d.activate(this.generationId),this.items.set(s,d),d}removeStaleItems(){for(let[e,t]of this.items.entries())t.generationId!==this.generationId&&(t.deactivate(),t.unmount(),this.items.delete(e));}};var Ie=({it$:i,buildFn:e,keyFn:t})=>new R(i,e,t).toReactiveNode(),R=class{constructor(e,t,s){this.id=Symbol("Iterable");this.it$=this.toEventObservable(e),this.items=new v(s,t);}toReactiveNode(){let e=document.createComment("Iterable"),t=s=>{switch(s.type){case "replace":return this.items.replace(e,s.items);case "replaceKeys":return this.items.replaceKeys(e,s.items);case "append":return this.items.append(e,s.items);case "remove":return this.items.remove(s.items);default:return console.warn("Unsupported event type",s)}};return a(e,[{mount:s=>s.appendChild(e),activate:()=>this.it$.subscribeInit(this.id,t),deactivate:()=>{this.it$.unsubscribe(this.id),this.items.deactivate();},unmount:()=>{this.items.unmount(),e.remove();}}])}toEventObservable(e){return u(t=>t instanceof Array||t instanceof Map?{type:"replace",items:t}:t,e)}};var Ce=(i,...e)=>new g(i,e).toReactiveNode(),g=class{constructor(e,t){this.strings=e;this.holes=t;}toReactiveNode(){let e=this.buildNodes(),t=document.createComment("Template");return a(t,[{mount:s=>this.appendNodes(s,e),activate:()=>{for(let s of e)this.attachObservable(s);},deactivate:()=>{for(let s of e)this.detachObservable(s);},unmount:()=>this.removeNodes(e)}])}buildNodes(){return this.strings.map((e,t)=>{let s=this.holes[t],n={staticNodes:[document.createTextNode(e)],dynamicNode:void 0};return typeof s=="string"?n.staticNodes.push(document.createTextNode(s)):typeof s=="object"&&s!==null&&(n.dynamicNode={node:document.createTextNode(""),observerId:Symbol(`Template${t}`),observable:s}),n})}appendNodes(e,t){for(let{staticNodes:s,dynamicNode:n}of t){for(let r of s)e.appendChild(r);n!==void 0&&e.appendChild(n.node);}}attachObservable(e){if(e===void 0||e.dynamicNode===void 0)return;let{node:t,observerId:s,observable:n}=e.dynamicNode;n.subscribeInit(s,r=>t.data=r);}removeNodes(e){for(let{staticNodes:t,dynamicNode:s}of e){for(let n of t)n.remove();s!==void 0&&s.node.remove();}}detachObservable(e){if(e.dynamicNode===void 0)return;let{observerId:t,observable:s}=e.dynamicNode;s.unsubscribe(t);}};var o=(i,...e)=>{let t=document.createElement(i),s=[];for(let n of e)if(typeof n=="string")s.push(l(n));else if(n instanceof Node)s.push(n);else throw new Error("Unsupported child type");return w(t,[{mount:n=>{n.appendChild(t);for(let r of s)r.mount(t);},activate:()=>{for(let n of s)n.activate();},deactivate:()=>{for(let n of s)n.deactivate();},unmount:()=>{for(let n of s)n.unmount();t.remove();}}])},Fe={img:i=>o("img").att("src",i),input:i=>o("input").att("type",i),canvas:(...i)=>o("canvas",...i),button:(...i)=>o("button",...i),h1:(...i)=>o("h1",...i),h2:(...i)=>o("h2",...i),h3:(...i)=>o("h3",...i),p:(...i)=>o("p",...i),a:(...i)=>o("a",...i),div:(...i)=>o("div",...i),ul:(...i)=>o("ul",...i),li:(...i)=>o("li",...i),span:(...i)=>o("span",...i),select:(...i)=>o("select",...i)};var $e=(i,e)=>new I(i,e).toReactiveNode(),I=class{constructor(e,t){this.routes=e;this.opts=t;this.hashChangeListener=()=>this.syncHash();}toReactiveNode(){let e=document.createComment("Router");return a(e,[{mount:t=>{if(this.anchor!==void 0)return console.warn("Router is already active");this.anchor=e,t.appendChild(e);},activate:()=>{this.syncHash(),window.addEventListener("hashchange",this.hashChangeListener);},deactivate:()=>{var t;window.removeEventListener("hashchange",this.hashChangeListener),(t=this.currentRoute)==null||t.deactivate();},unmount:()=>{var t;(t=this.currentRoute)==null||t.unmount(),this.currentRoute=void 0,e.remove();}}])}syncHash(){var t,s;let e=this.getNewRoute();e===this.currentRoute||e===void 0||((t=this.currentRoute)==null||t.deactivate(),(s=this.currentRoute)==null||s.unmount(),this.currentRoute=e,C(()=>{var r;let n=(r=this.anchor)==null?void 0:r.parentElement;n!=null&&(e.mount(n),e.activate());}));}getNewRoute(){let e=location.hash.slice(1)||"/",t=this.isRouteKey(e)?e:this.opts.notFoundRoute;return this.routes[t]}isRouteKey(e){return e in this.routes}};export{T as InputObservable,U as ReactiveArray,b as ReactiveItem,v as ReactiveItemCollection,f as ScopedObservable,$ as buildDedupMicrotaskRunner,V as buildMicrotaskRunner,de as component,fe as cond,K as dedupMicrotaskRunner,M as dedupObservable,F as inputObservable,Ie as iterable,u as mapObservable,C as microtaskRunner,S as observable,G as once,l as reactiveTextNode,$e as router,E as scopedObservable,o as tag,Fe as tags,Ce as template,a as toReactiveNode,w as toTagReactiveNode};//# sourceMappingURL=index.js.map
+var c=class{constructor(){this.observers=new Map;this.notifyAll=false;this.notifySchedule=new Set;}get size(){return this.observers.size}scheduleNotify(e){this.notifyAll||this.notifySchedule.add(e);}scheduleNotifyAll(){this.notifySchedule.clear(),this.notifyAll=true;}clearSchedule(){this.notifyAll=false,this.notifySchedule.clear();}clear(){this.observers.clear();}set(e,t){this.observers.has(e)&&console.warn("Duplicate observer id",e),this.observers.set(e,t);}delete(e){this.observers.delete(e);}notifyTargets(e){if(this.notifyAll)for(let t of this.observers.values())this.notify(t,e);else for(let t of this.notifySchedule)this.notify(this.observers.get(t),e);}resetTargets(){this.notifyAll=false,this.notifySchedule.clear();}notify(e,t){try{e!==void 0&&e(t);}catch(s){console.error(s);}}};var v=class{constructor(e=256){this.size=0;this.head=0;this.tail=0;this.items=new Array(e);}get isEmpty(){return this.size===0}clear(){this.size=0,this.tail=0,this.head=0;}enqueue(e){this.size===this.items.length&&this.extend(),this.items[this.tail]=e,this.tail=(this.tail+1)%this.items.length,this.size++;}dequeue(){if(this.size===0)return;let e=this.items[this.head];return this.items[this.head]=void 0,this.head=(this.head+1)%this.items.length,this.size--,e}extend(){let e=new Array(this.size*2);for(let t=0;t<this.size;t++)e[t]=this.items[(this.head+t)%this.items.length];this.items=e,this.head=0,this.tail=this.size;}};var F=()=>{let i=new WeakMap,e=0,t=1,s=new v,n=new v,r=()=>{for(;;){[s,n]=[n,s],n.clear();let l;for(;l=s.dequeue();)l.run();if(n.isEmpty)break}},a=()=>queueMicrotask(()=>{r(),t=1,e++;});return l=>{i.get(l)!==e&&(i.set(l,e),n.enqueue(l),t!==0&&(t=0,a()));}},u={enqueueSubscription:F(),enqueueUpdate:F()};var y=class{constructor(e){this.values=e;}update(e,t){return this.values[e]=t,this}},b=class{constructor(e){this.initializedSize=e;this.initializedIndices=new Set;this.values=new Array(e).fill(void 0);}update(e,t){return this.initializedIndices.add(e),this.values[e]=t,this.initializedIndices.size===this.initializedSize?new y(this.values):this}};var h=(i,...e)=>new N(i,e),N=class{constructor(e,t){this.mapFn=e;this.observables=t;this.notifier=new c;this.ids=Array.from(this.observables,()=>Symbol("MapObservable")),this.state=new b(this.ids.length);}unsubscribeAll(){this.notifier.clear(),this.innerUnubscribe();}unsubscribe(e){this.notifier.delete(e),this.innerUnubscribe();}subscribe(e,t){this.notifier.set(e,t),this.innerSubscribe();}subscribeInit(e,t){this.subscribe(e,t),this.notifier.scheduleNotify(e),u.enqueueSubscription(this);}run(){this.state instanceof b||(this.notifier.notifyTargets(this.mapFn(...this.state.values)),this.notifier.resetTargets());}notifyObservers(e){return t=>{this.state=this.state.update(e,t),!(this.state instanceof b)&&(this.notifier.scheduleNotifyAll(),u.enqueueUpdate(this));}}innerSubscribe(){if(this.notifier.size===1)for(let[e,t]of this.observables.entries())this.ids[e]!==void 0&&t.subscribeInit(this.ids[e],this.notifyObservers(e));}innerUnubscribe(){if(this.notifier.size===0){for(let[e,t]of this.observables.entries())this.ids[e]!==void 0&&t.unsubscribe(this.ids[e]);this.state=new b(this.ids.length);}}};var M=i=>new O(i),O=class{constructor(e){this.value=e;this.notifier=new c;}unsubscribeAll(){this.notifier.clear();}unsubscribe(e){this.notifier.delete(e);}subscribe(e,t){this.notifier.set(e,t);}subscribeInit(e,t){this.notifier.set(e,t),this.notifier.scheduleNotify(e),u.enqueueSubscription(this);}update(e){this.value=e(this.value),this.notifier.scheduleNotifyAll(),u.enqueueUpdate(this);}run(){this.notifier.notifyTargets(this.value),this.notifier.resetTargets();}};var U=(i,e=(s,n)=>s==n,t=s=>s)=>new x(i,e,t),x=class{constructor(e,t,s){this.innerObservable=e;this.compareEqualFn=t;this.cloneFn=s;this.id=Symbol("DedupObservable");this.state={initialized:false};this.boundUpdate=this.updateValue.bind(this);this.notifier=new c;}unsubscribeAll(){this.notifier.clear(),this.innerUnubscribe();}unsubscribe(e){this.notifier.delete(e),this.innerUnubscribe();}subscribe(e,t){this.notifier.set(e,t),this.innerSubscribe();}subscribeInit(e,t){this.subscribe(e,t),this.notifier.scheduleNotify(e),u.enqueueSubscription(this);}run(){this.state.initialized&&(this.notifier.notifyTargets(this.state.value),this.notifier.resetTargets());}innerSubscribe(){this.notifier.size===1&&this.innerObservable.subscribeInit(this.id,this.boundUpdate);}updateValue(e){this.state.initialized&&this.compareEqualFn(this.state.value,e)||(this.state.initialized?this.state.value=this.cloneFn(e):this.state={initialized:true,value:this.cloneFn(e)},this.notifier.scheduleNotifyAll(),u.enqueueUpdate(this));}innerUnubscribe(){this.notifier.size===0&&(this.state={initialized:false},this.innerObservable.unsubscribe(this.id));}};var A=i=>new g(i),g=class{constructor(e){this.innerObservable=e;this.aliases=new Map;}unsubscribeAll(){for(let e of this.aliases.values())this.innerObservable.unsubscribe(e);this.aliases.clear();}unsubscribe(e){let t=this.aliases.get(e);t!==void 0&&(this.aliases.delete(e),this.innerObservable.unsubscribe(t));}subscribe(e,t){let s=Symbol("ScopedObservable");this.aliases.set(e,s),this.innerObservable.subscribe(s,t);}subscribeInit(e,t){let s=Symbol("ScopedObservable");this.aliases.set(e,s),this.innerObservable.subscribeInit(s,t);}update(e){"update"in this.innerObservable&&this.innerObservable.update(e);}};var L=(i,e)=>new R(i,e),R=class{constructor(e,t){this.input=e;this.value$=t;this.aliases=new Map;}subscribe(e,t){if(this.aliases.has(e))return;let s=Symbol("InputObservable");this.aliases.set(e,s),this.value$.subscribe(s,this.toInputObserver(t));}subscribeInit(e,t){if(this.aliases.has(e))return;let s=Symbol("InputObservable");this.aliases.set(e,s),this.value$.subscribeInit(s,this.toInputObserver(t));}unsubscribe(e){let t=this.aliases.get(e);t!==void 0&&(this.value$.unsubscribe(t),this.aliases.delete(e));}unsubscribeAll(){for(let e of this.aliases.values())this.value$.unsubscribe(e);this.aliases.clear();}update(e){this.value$.update(e);}toInputObserver(e){return t=>{this.input.value!==t&&e(t);}}};var le=(i,...e)=>{let t=Symbol("Once"),s=h((...n)=>n,...e);s.subscribeInit(t,n=>{s.unsubscribe(t),i(...n);});};var p=(n=>(n[n.Active=0]="Active",n[n.Inactive=1]="Inactive",n[n.Mounted=2]="Mounted",n[n.Unmounted=3]="Unmounted",n))(p||{}),S=i=>{let e=3;return {mount:t=>{if(e!==3)return console.warn(`Mounting in status ${p[e]}`);for(let s of i)s.mount(t);e=2;},activate:()=>{if(e!==2&&e!==1)return console.warn(`Activating in status ${p[e]}`);for(let t of i)t.activate();e=0;},deactivate:()=>{if(e!==0)return console.warn(`Deactivating in status ${p[e]}`);for(let t of i)t.deactivate();e=1;},unmount(){if(e!==1)return console.warn(`Unmounting in status ${p[e]}`);for(let t of i)t.unmount();e=3;}}};var $=(i,e)=>{let t=[...e],s=B(t),n=z(t),r=S(t);return Object.assign(i,n,s,r)},d=(i,e)=>{let t=[...e],s=z(t),n=S(t);return Object.assign(i,s,n)},B=i=>({att:function(e,t){return this.setAttribute(e,t),this},class$:function(e){return this.att$("class",e)},att$:function(e,t){let s=Symbol(`Attribute: ${e}`);return i.push({mount:n=>{},activate:()=>t.subscribeInit(s,n=>this.setAttribute(e,n)),deactivate:()=>t.unsubscribe(s),unmount:()=>{}}),this},model$:function(e){let t=L(this,e);return this.prop$("value",t).listen("input",s=>t.update(n=>this.value))},prop$:function(e,t){let s=Symbol(`Property: ${e.toString()}`);return i.push({mount:n=>{},activate:()=>t.subscribeInit(s,n=>this[e]=n),deactivate:()=>t.unsubscribe(s),unmount:()=>{}}),this}}),z=i=>({clk:function(e){return this.listen("click",e)},listen:function(e,t){return i.push({mount:s=>{},activate:()=>this.addEventListener(e,t),deactivate:()=>this.removeEventListener(e,t),unmount:()=>{}}),this}});var H={observables:()=>({}),derivedObservables:()=>({}),cache:false,props:{}},ge=i=>new K(Object.assign({},H,i)).toReactiveNode(),I=class{constructor(e,t){this.parent=e;this.props=t;}},K=class{constructor(e){this.opts=e;}toReactiveNode(){return d(document.createComment("Component"),[{mount:e=>{var t;(this.node===void 0||!this.opts.cache)&&this.setupNode(e),(t=this.node)==null||t.mount(e);},activate:()=>{var e;return (e=this.node)==null?void 0:e.activate()},deactivate:()=>{var e,t;if((e=this.node)==null||e.deactivate(),this.observables!==void 0)for(let s in this.observables)(t=this.observables[s])==null||t.unsubscribeAll();},unmount:()=>{var e;(e=this.node)==null||e.unmount(),this.opts.cache||this.cleanUp();}}])}setupNode(e){this.observables=this.buildObservables(),this.context=new I(e,this.opts.props),this.node=this.opts.render.call(this.context,this.observables),this.context.node=this.node;}cleanUp(){this.context!==void 0&&(this.context.node=void 0),this.node=void 0,this.observables=void 0;}buildObservables(){let e=this.opts.observables(),t=this.opts.derivedObservables(e),s=Object.assign({},e,t);return this.toScoped(s)}toScoped(e){let t={};for(let s in e){let n=s;t[n]=A(e[n]);}return t}};var P=class{constructor(e=[]){this.items=e;this.observables=[];}get observable$(){let e=M({type:"replace",items:this.items});return this.observables.push(new WeakRef(e)),e}push(...e){this.items.push(...e),this.emit({type:"append",items:e});}pop(){if(this.items.length===0)return;let e=this.items.length-1,t=this.items.pop();return this.emit({type:"remove",items:new Map().set(e,t)}),t}remove(e){if(e.length==0)return;let t=new Map;for(let s of e)s in this.items&&(t.set(s,this.items[s]),delete this.items[s]);this.emit({type:"remove",items:t});}replace(e){this.items=e,this.emit({type:"replace",items:e});}replaceKeys(e){for(let[t,s]of e.entries())t in this.items&&(this.items[t]=s);this.emit({type:"replaceKeys",items:e});}emit(e){var s;let t=n=>e;for(let n of this.observables)(s=n.deref())==null||s.update(t);}};var m=i=>{let e=document.createTextNode(i);return d(e,[{mount:s=>s.appendChild(e),activate:()=>{},deactivate:()=>{},unmount:()=>e.remove()}])};var Fe=({if$:i,then:e,otherwise:t})=>new k(U(i),e,t).toReactiveNode(),k=class{constructor(e,t,s){this.if$=e;this.then=t;this.otherwise=s;this.id=Symbol("Cond");}toReactiveNode(){let e=document.createComment("Cond"),t=s=>this.updateNode(e,s);return d(e,[{mount:s=>s.appendChild(e),activate:()=>this.if$.subscribeInit(this.id,t),deactivate:()=>{var s;this.if$.unsubscribe(this.id),(s=this.currentNode)==null||s.deactivate();},unmount:()=>{var s;(s=this.currentNode)==null||s.unmount(),this.currentNode=void 0,e.remove();}}])}updateNode(e,t){let s=t?this.buildNode(this.then):this.buildNode(this.otherwise);try{this.switchNode(e,s);}catch(n){console.error(n);}}buildNode(e){if(typeof e=="function")return e();if(typeof e=="string")return m(e);if(e!==void 0)throw new Error("Then/otherwise should be either string or function")}switchNode(e,t){var s,n,r;(s=this.currentNode)==null||s.deactivate(),(n=this.currentNode)==null||n.unmount(),this.currentNode=t,t!==void 0&&(t.mount(e.parentNode),(r=e.parentNode)==null||r.insertBefore(t,e.nextSibling),t.activate());}};var f=class{constructor(e,t,s){this.anchor=e;this.value=t;this.node=s;}mount(e){let t=this.anchor.parentNode,s=(e==null?void 0:e.node.nextSibling)||null;t!==null&&(this.node.parentNode===null&&this.node.mount(t),t.insertBefore(this.node,s));}activate(e){this.generationId===void 0&&this.node.activate(),this.generationId=e;}deactivate(){this.node.deactivate();}unmount(){this.node.unmount();}};var T=class{constructor(e,t){this.keyFn=e;this.buildFn=t;this.generationId=0;this.items=new Map;}deactivate(){for(let e of this.items.values())e.deactivate();}unmount(){for(let e of this.items.values())e.unmount();this.items.clear(),this.generationId=0;}replace(e,t){this.generationId++;let s=null;for(let[n,r]of t.entries()){let a=this.keyFn(n,r),l=this.getOrInsert(e,s,a,r);l.generationId=this.generationId,s=l;}this.removeStaleItems();}replaceKeys(e,t){for(let[s,n]of t.entries()){let r=this.keyFn(s,n),a=this.items.get(r);a!==void 0&&(this.insertItem(e,a,r,n),a.deactivate(),a.unmount());}}append(e,t){for(let[s,n]of t.entries()){let r=this.keyFn(s,n);this.insertItem(e,null,r,n);}}remove(e){for(let[t,s]of e.entries()){let n=this.keyFn(t,s),r=this.items.get(n);r!==void 0&&(r.deactivate(),r.unmount(),this.items.delete(n));}}getOrInsert(e,t,s,n){let r=this.items.get(s);return r===void 0?this.insertItem(e,t,s,n):r.value===n?r:(r.deactivate(),r.unmount(),this.insertItem(e,t,s,n))}insertItem(e,t,s,n){let r=this.buildFn(s,n),a=new f(e,n,r);return a.mount(t),a.activate(this.generationId),this.items.set(s,a),a}removeStaleItems(){for(let[e,t]of this.items.entries())t.generationId!==this.generationId&&(t.deactivate(),t.unmount(),this.items.delete(e));}};var Ve=({it$:i,buildFn:e,keyFn:t})=>new C(i,e,t).toReactiveNode(),C=class{constructor(e,t,s){this.id=Symbol("Iterable");this.it$=this.toEventObservable(e),this.items=new T(s,t);}toReactiveNode(){let e=document.createComment("Iterable"),t=s=>{switch(s.type){case "replace":return this.items.replace(e,s.items);case "replaceKeys":return this.items.replaceKeys(e,s.items);case "append":return this.items.append(e,s.items);case "remove":return this.items.remove(s.items);default:return console.warn("Unsupported event type",s)}};return d(e,[{mount:s=>s.appendChild(e),activate:()=>this.it$.subscribeInit(this.id,t),deactivate:()=>{this.it$.unsubscribe(this.id),this.items.deactivate();},unmount:()=>{this.items.unmount(),e.remove();}}])}toEventObservable(e){return h(t=>t instanceof Array||t instanceof Map?{type:"replace",items:t}:t,e)}};var qe=(i,...e)=>new w(i,e).toReactiveNode(),w=class{constructor(e,t){this.strings=e;this.holes=t;}toReactiveNode(){let e=this.buildNodes(),t=document.createComment("Template");return d(t,[{mount:s=>this.appendNodes(s,e),activate:()=>{for(let s of e)this.attachObservable(s);},deactivate:()=>{for(let s of e)this.detachObservable(s);},unmount:()=>this.removeNodes(e)}])}buildNodes(){return this.strings.map((e,t)=>{let s=this.holes[t],n={staticNodes:[document.createTextNode(e)],dynamicNode:void 0};return typeof s=="string"?n.staticNodes.push(document.createTextNode(s)):typeof s=="object"&&s!==null&&(n.dynamicNode={node:document.createTextNode(""),observerId:Symbol(`Template${t}`),observable:s}),n})}appendNodes(e,t){for(let{staticNodes:s,dynamicNode:n}of t){for(let r of s)e.appendChild(r);n!==void 0&&e.appendChild(n.node);}}attachObservable(e){if(e===void 0||e.dynamicNode===void 0)return;let{node:t,observerId:s,observable:n}=e.dynamicNode;n.subscribeInit(s,r=>t.data=r);}removeNodes(e){for(let{staticNodes:t,dynamicNode:s}of e){for(let n of t)n.remove();s!==void 0&&s.node.remove();}}detachObservable(e){if(e.dynamicNode===void 0)return;let{observerId:t,observable:s}=e.dynamicNode;s.unsubscribe(t);}};var o=(i,...e)=>{let t=document.createElement(i),s=[];for(let n of e)if(typeof n=="string")s.push(m(n));else if(n instanceof Node)s.push(n);else throw new Error("Unsupported child type");return $(t,[{mount:n=>{n.appendChild(t);for(let r of s)r.mount(t);},activate:()=>{for(let n of s)n.activate();},deactivate:()=>{for(let n of s)n.deactivate();},unmount:()=>{for(let n of s)n.unmount();t.remove();}}])},De={img:i=>o("img").att("src",i),input:i=>o("input").att("type",i),canvas:(...i)=>o("canvas",...i),button:(...i)=>o("button",...i),h1:(...i)=>o("h1",...i),h2:(...i)=>o("h2",...i),h3:(...i)=>o("h3",...i),p:(...i)=>o("p",...i),a:(...i)=>o("a",...i),div:(...i)=>o("div",...i),ul:(...i)=>o("ul",...i),li:(...i)=>o("li",...i),span:(...i)=>o("span",...i),select:(...i)=>o("select",...i)};var q=()=>{let i=[],e=()=>queueMicrotask(()=>{let t=i.toReversed();i.length=0;for(let s of t)s();});return t=>{i.push(t),i.length==1&&e();}},V=q();var Ye=(i,e)=>new E(i,e).toReactiveNode(),E=class{constructor(e,t){this.routes=e;this.opts=t;this.hashChangeListener=()=>this.syncHash();}toReactiveNode(){let e=document.createComment("Router");return d(e,[{mount:t=>{if(this.anchor!==void 0)return console.warn("Router is already active");this.anchor=e,t.appendChild(e);},activate:()=>{this.syncHash(),window.addEventListener("hashchange",this.hashChangeListener);},deactivate:()=>{var t;window.removeEventListener("hashchange",this.hashChangeListener),(t=this.currentRoute)==null||t.deactivate();},unmount:()=>{var t;(t=this.currentRoute)==null||t.unmount(),this.currentRoute=void 0,e.remove();}}])}syncHash(){var t,s;let e=this.getNewRoute();e===this.currentRoute||e===void 0||((t=this.currentRoute)==null||t.deactivate(),(s=this.currentRoute)==null||s.unmount(),this.currentRoute=e,V(()=>{var r;let n=(r=this.anchor)==null?void 0:r.parentElement;n!=null&&(e.mount(n),e.activate());}));}getNewRoute(){let e=location.hash.slice(1)||"/",t=this.isRouteKey(e)?e:this.opts.notFoundRoute;return this.routes[t]}isRouteKey(e){return e in this.routes}};export{R as InputObservable,P as ReactiveArray,f as ReactiveItem,T as ReactiveItemCollection,v as RingQueue,g as ScopedObservable,q as buildMicrotaskRunner,ge as component,Fe as cond,U as dedupObservable,L as inputObservable,Ve as iterable,h as mapObservable,V as microtaskRunner,M as observable,le as once,m as reactiveTextNode,Ye as router,A as scopedObservable,o as tag,De as tags,qe as template,d as toReactiveNode,$ as toTagReactiveNode};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realglebivanov/reactive",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A simple and permissive observable-driven UI toolkit",
   "type": "module",
   "main": "./dist/index.js",