@realglebivanov/reactive 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -0,0 +1,242 @@
+interface Lifecycle {
+    mount(parentNode: Node): void;
+    activate(): void;
+    deactivate(): void;
+    unmount(): 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> {
+    private value;
+    private opts;
+    private readonly observers;
+    constructor(value: T, opts: {
+        microtaskRunner: TaskRunner;
+    });
+    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 notify;
+    private notifyAll;
+}
+
+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> {
+    private mapFn;
+    private observables;
+    private observers;
+    private initializedIndices;
+    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;
+    private notifyObservers;
+    private innerSubscribe;
+    private innerUnubscribe;
+}
+
+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> {
+    private innerObservable;
+    private compareEqualFn;
+    private cloneFn;
+    private id;
+    private currentValue;
+    private isInitialized;
+    private observers;
+    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;
+    private innerSubscribe;
+    private updateValue;
+    private innerUnubscribe;
+}
+
+declare const scopedObservable: <T extends Observable<any>>(innerObservable: T) => ScopedObservable<T>;
+type Value<O extends Observable<any>> = O extends Observable<infer T> ? T : never;
+declare class ScopedObservable<T extends Observable<any>> implements Observable<Value<T>> {
+    private innerObservable;
+    private aliases;
+    constructor(innerObservable: T);
+    unsubscribeAll(): void;
+    unsubscribe(id: symbol): void;
+    subscribe(id: symbol, observer: Observer<Value<T>>): void;
+    subscribeInit(id: symbol, observer: Observer<Value<T>>): void;
+    update(this: ScopedObservable<Updatable<Value<T>> & Observable<Value<T>>>, updateFn: UpdateFn<Value<T>>): void;
+}
+
+type Observer<T> = (value: T) => void;
+type UpdateFn<T> = (value: T) => T;
+interface Observable<T> {
+    unsubscribeAll(): void;
+    unsubscribe(id: symbol): void;
+    subscribe(id: symbol, observer: Observer<T>): void;
+    subscribeInit(id: symbol, observer: Observer<T>): void;
+}
+interface Updatable<T> {
+    update(updateFn: UpdateFn<T>): void;
+}
+
+type ReactiveNode<T extends Node> = Lifecycle & T & ReactiveNodeSetters<T>;
+interface ReactiveNodeSetters<T extends Node> {
+    clk: <R extends ReactiveNode<T>>(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>;
+    att$: (name: string, value: Observable<string>) => TagReactiveNode<K>;
+}
+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>;
+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 Observables = Record<string, Observable<any>>;
+type ScopedObservables<T extends Observables> = {
+    [K in keyof T]: ScopedObservable<T[K]>;
+};
+type RenderFn<O extends Observables, T extends Node, P> = (this: Context<T, P>, observables: ScopedObservables<O>) => ReactiveNode<T>;
+type UserOpts<O1 extends Observables, O2 extends Observables, T extends Node, P> = Partial<Opts<O1, O2, T, P>> & {
+    render: RenderFn<O1 & O2, T, P>;
+};
+type Opts<O1 extends Observables, O2 extends Observables, T extends Node, P> = {
+    render: RenderFn<O1 & O2, T, P>;
+    observables: () => O1;
+    derivedObservables: (observables: O1) => O2;
+    cache: boolean;
+    props: P;
+};
+declare const component: <O1 extends Observables, O2 extends Observables, T extends Node, P>(opts: UserOpts<O1, O2, T, P>) => ReactiveNode<Comment>;
+declare class Context<T extends Node, P> {
+    parent: Node;
+    props: P;
+    node: ReactiveNode<T> | undefined;
+    constructor(parent: Node, props: P);
+}
+
+type ReactiveNodeBuilder<T extends Node> = (() => ReactiveNode<T>);
+type Params<A extends Node, B extends Node> = {
+    if$: Observable<boolean>;
+    then: ReactiveNodeBuilder<A> | string;
+    otherwise: ReactiveNodeBuilder<B> | string;
+};
+declare const cond: <A extends Node, B extends Node>({ if$, then, otherwise }: Params<A, B>) => ReactiveNode<Comment>;
+
+type Key = string | number | boolean | symbol;
+type KeyFn<K extends Key, T> = ((key: Key, value: T) => K);
+type BuildFn<N extends Node, T> = ((key: Key, value: T) => ReactiveNode<N>);
+type Collection<T> = Array<T> | Map<Key, T>;
+declare class ReactiveItemCollection<K extends Key, T, N extends ReactiveNode<Node>> {
+    private keyFn;
+    private buildFn;
+    private generationId;
+    private items;
+    constructor(keyFn: KeyFn<K, T>, buildFn: BuildFn<N, T>);
+    deactivate(): void;
+    unmount(): void;
+    replace(anchor: Node, newItems: Collection<T>): void;
+    replaceKeys(anchor: Node, items: Collection<T>): void;
+    append(anchor: Node, newItems: Collection<T>): void;
+    remove(items: Collection<T>): void;
+    private getOrInsert;
+    private insertItem;
+    private removeStaleItems;
+}
+
+type Source$1<T> = Collection<T> | Event<T>;
+type Event<T> = {
+    type: "replace";
+    items: Collection<T>;
+} | {
+    type: "remove";
+    items: Collection<T>;
+} | {
+    type: "append";
+    items: Collection<T>;
+} | {
+    type: "replaceKeys";
+    items: Collection<T>;
+};
+declare const iterable: <K extends Key, T, N extends ReactiveNode<Node>>({ it$, buildFn, keyFn }: {
+    it$: Observable<Source$1<T>>;
+    buildFn: BuildFn<N, T>;
+    keyFn: KeyFn<K, T>;
+}) => ReactiveNode<Comment>;
+
+declare class ReactiveItem<T, N extends ReactiveNode<Node>> {
+    anchor: Node;
+    value: T;
+    node: N;
+    generationId?: number;
+    constructor(anchor: Node, value: T, node: N);
+    mount(refItem: ReactiveItem<T, N> | null): void;
+    activate(generationId: number): void;
+    deactivate(): void;
+    unmount(): void;
+}
+
+type Hole = Observable<string> | string;
+declare const template: (strings: TemplateStringsArray, ...holes: Hole[]) => ReactiveNode<Comment>;
+
+type RouteKey<T extends RouteCollection<Node>> = keyof T & string;
+type RouteCollection<N extends Node> = Record<string, ReactiveNode<N>>;
+type RouterOpts<T extends RouteCollection<Node>> = {
+    notFoundRoute: RouteKey<T>;
+};
+declare const router: <T extends RouteCollection<Node>>(routes: T, opts: RouterOpts<T>) => ReactiveNode<Comment>;
+
+type Source<T> = Observable<Event<T>> & Updatable<Event<T>>;
+declare class ReactiveArray<T> {
+    private items;
+    private observables;
+    constructor(items?: T[]);
+    get observable$(): Source<T>;
+    push(...items: T[]): void;
+    pop(): T | undefined;
+    remove(indices: number[]): void;
+    replace(items: T[]): void;
+    replaceKeys(items: Map<number, T>): void;
+    private emit;
+}
+
+export { type BuildFn, type Collection, type Event, type InputChild, 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, iterable, mapObservable, microtaskRunner, observable, reactiveTextNode, router, scopedObservable, tag, tags, template, toReactiveNode, toTagReactiveNode };

package/dist/index.js

@@ -0,0 +1,2 @@
+var c=(i=>(i[i.Active=0]="Active",i[i.Inactive=1]="Inactive",i[i.Mounted=2]="Mounted",i[i.Unmounted=3]="Unmounted",i))(c||{}),v=n=>{let e=3;return {mount:t=>{if(e!==3)return console.warn(`Mounting in status ${c[e]}`);for(let s of n)s.mount(t);e=2;},activate:()=>{if(e!==2&&e!==1)return console.warn(`Activating in status ${c[e]}`);for(let t of n)t.activate();e=0;},deactivate:()=>{if(e!==0)return console.warn(`Deactivating in status ${c[e]}`);for(let t of n)t.deactivate();e=1;},unmount(){if(e!==1)return console.warn(`Unmounting in status ${c[e]}`);for(let t of n)t.unmount();e=3;}}};var k=(n,e)=>{let t=[...e],s=L(t),i=K(t),o=v(t);return Object.assign(n,i,s,o)},d=(n,e)=>{let t=[...e],s=K(t),i=v(t);return Object.assign(n,s,i)},u=n=>{let e=document.createTextNode(n);return d(e,[{mount:s=>s.appendChild(e),activate:()=>{},deactivate:()=>{},unmount:()=>e.remove()}])},L=n=>({att:function(e,t){return this.setAttribute(e,t),this},att$:function(e,t){let s=Symbol(`Attribute: ${e}`);return n.push({mount:i=>{},activate:()=>t.subscribeInit(s,i=>this.setAttribute(e,i)),deactivate:()=>t.unsubscribe(s),unmount:()=>{}}),this}}),K=n=>({clk:function(e){return n.push({mount:t=>{},activate:()=>this.addEventListener("click",e),deactivate:()=>this.removeEventListener("click",e),unmount:()=>{}}),this}});var r=(n,...e)=>{let t=document.createElement(n),s=[];for(let i of e)if(typeof i=="string")s.push(u(i));else if(i instanceof Node)s.push(i);else throw new Error("Unsupported child type");return k(t,[{mount:i=>{i.appendChild(t);for(let o of s)o.mount(t);},activate:()=>{for(let i of s)i.activate();},deactivate:()=>{for(let i of s)i.deactivate();},unmount:()=>{for(let i of s)i.unmount();t.remove();}}])},z={img:n=>r("img").att("src",n),input:n=>r("input").att("type",n),canvas:(...n)=>r("canvas",...n),button:(...n)=>r("button",...n),h1:(...n)=>r("h1",...n),h2:(...n)=>r("h2",...n),h3:(...n)=>r("h3",...n),p:(...n)=>r("p",...n),a:(...n)=>r("a",...n),div:(...n)=>r("div",...n),ul:(...n)=>r("ul",...n),li:(...n)=>r("li",...n),span:(...n)=>r("span",...n),select:(...n)=>r("select",...n)};var A=()=>{let n=new Set,e=()=>queueMicrotask(()=>{let t=Array.from(n);n.clear();for(let s of t)s();});return t=>{n.has(t)||(n.add(t),!(n.size>1)&&e());}},I=A(),V=()=>{let n=[],e=()=>queueMicrotask(()=>{let t=n.toReversed();n.length=0;for(let s of t)s();});return t=>{n.push(t),n.length==1&&e();}},C=V();var S=(n,e={microtaskRunner:I})=>new p(n,e),p=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));}notify(e,t){try{this.observers.get(e)===t&&t(this.value);}catch(s){console.error(s);}}notifyAll(){for(let[e,t]of this.observers.entries())this.notify(e,t);}};var w=(n,...e)=>new h(n,e),h=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){this.observers.set(e,t),this.innerSubscribe();}subscribeInit(e,t){this.subscribe(e,t);}notifyObservers(e){return t=>{if(this.currentValues[e]=t,this.initializedIndices.add(e),this.initializedIndices.size===this.currentValues.length)for(let s of this.observers.values())s(this.mapFn(...this.currentValues));}}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]);}};var F=(n,e=(s,i)=>s==i,t=s=>s)=>new m(n,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);}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=n=>new f(n),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 P={observables:()=>({}),derivedObservables:()=>({}),cache:false,props:{}},Z=n=>new N(Object.assign({},P,n)).toReactiveNode(),T=class{constructor(e,t){this.parent=e;this.props=t;}},N=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;if((e=this.node)==null||e.deactivate(),this.observables!==void 0)for(let t in this.observables)this.observables[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 T(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 i=s;t[i]=E(e[i]);}return t}};var ne=({if$:n,then:e,otherwise:t})=>new y(F(n),e,t).toReactiveNode(),y=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(i){console.error(i);}}buildNode(e){if(typeof e=="function")return e();if(typeof e=="string")return u(e);throw new Error("Then/otherwise should be either string or function")}switchNode(e,t){var s,i;(s=this.currentNode)==null||s.deactivate(),(i=this.currentNode)==null||i.unmount(),t.mount(e.parentNode),t.activate(),this.currentNode=t;}};var l=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 b=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[i,o]of t.entries()){let a=this.keyFn(i,o),g=this.getOrInsert(e,s,a,o);g.generationId=this.generationId,s=g;}this.removeStaleItems();}replaceKeys(e,t){for(let[s,i]of t.entries()){let o=this.keyFn(s,i),a=this.items.get(o);a!==void 0&&(this.insertItem(e,a,o,i),a.deactivate(),a.unmount());}}append(e,t){for(let[s,i]of t.entries()){let o=this.keyFn(s,i);this.insertItem(e,null,o,i);}}remove(e){for(let[t,s]of e.entries()){let i=this.keyFn(t,s),o=this.items.get(i);o!==void 0&&(o.deactivate(),o.unmount(),this.items.delete(i));}}getOrInsert(e,t,s,i){let o=this.items.get(s);return o===void 0?this.insertItem(e,t,s,i):o.value===i?o:(o.deactivate(),o.unmount(),this.insertItem(e,t,s,i))}insertItem(e,t,s,i){let o=this.buildFn(s,i),a=new l(e,i,o);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 le=({it$:n,buildFn:e,keyFn:t})=>new O(n,e,t).toReactiveNode(),O=class{constructor(e,t,s){this.id=Symbol("Iterable");this.it$=this.toEventObservable(e),this.items=new b(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 w(t=>t instanceof Array||t instanceof Map?{type:"replace",items:t}:t,e)}};var pe=(n,...e)=>new x(n,e).toReactiveNode(),x=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],i={staticNodes:[document.createTextNode(e)],dynamicNode:void 0};return typeof s=="string"?i.staticNodes.push(document.createTextNode(s)):typeof s=="object"&&s!==null&&(i.dynamicNode={node:document.createTextNode(""),observerId:Symbol(`Template${t}`),observable:s}),i})}appendNodes(e,t){for(let{staticNodes:s,dynamicNode:i}of t){for(let o of s)e.appendChild(o);i!==void 0&&e.appendChild(i.node);}}attachObservable(e){if(e===void 0||e.dynamicNode===void 0)return;let{node:t,observerId:s,observable:i}=e.dynamicNode;i.subscribeInit(s,o=>t.data=o);}removeNodes(e){for(let{staticNodes:t,dynamicNode:s}of e){for(let i of t)i.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 Te=(n,e)=>new R(n,e).toReactiveNode(),R=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,C(()=>{var o;let i=(o=this.anchor)==null?void 0:o.parentElement;i!=null&&(e.mount(i),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}};var M=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=i=>e;for(let i of this.observables)(s=i.deref())==null||s.update(t);}};export{M as ReactiveArray,l as ReactiveItem,b as ReactiveItemCollection,f as ScopedObservable,A as buildDedupMicrotaskRunner,V as buildMicrotaskRunner,Z as component,ne as cond,I as dedupMicrotaskRunner,F as dedupObservable,le as iterable,w as mapObservable,C as microtaskRunner,S as observable,u as reactiveTextNode,Te as router,E as scopedObservable,r as tag,z as tags,pe as template,d as toReactiveNode,k as toTagReactiveNode};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realglebivanov/reactive",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A simple and permissive observable-driven UI toolkit",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,5 +42,9 @@
   "devDependencies": {
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
-  }
+  },
+  "files": [
+    "dist/index.js",
+    "dist/index.d.ts"
+  ]
 }

package/.tool-versions

@@ -1 +0,0 @@
-nodejs 25.4.0

package/public/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <title>Grecha.js</title>
-</head>
-
-<body>
-  <div id="entry"></div>
-  <script src="./example.js" type="module"></script>
-</body>
-
-</html>

package/src/example.ts

@@ -1,133 +0,0 @@
-import {
-    observable,
-    cond,
-    template,
-    iterable,
-    component,
-    mapObservable,
-    router,
-    tags,
-    dedupObservable
-} from "@realglebivanov/reactive";
-
-import { ReactiveArray } from "@realglebivanov/reactive";
-
-const LOREM = `
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
-
-const { a, p, h1, h2, div, span, button, ul, li, img, input } = tags;
-
-const shoppingItems = new ReactiveArray([
-    { name: "milk", price$: observable("1.99") },
-    { name: "sour cream", price$: observable("2.99") },
-    { name: "cheese", price$: observable("0.99") }
-]);
-
-const counter = () => component({
-    cache: true,
-    props: { counter: "Counter" },
-    observables: () => ({
-        count$: observable(0),
-        hard$: observable(false),
-        veryHard$: observable(true)
-    }),
-    derivedObservables: ({ count$, hard$ }) => ({
-        imageSource$: mapObservable(
-            (hard) => hard ? "KashaHard.gif" : "Kasha.png",
-            dedupObservable(hard$)),
-        hexCounter$: mapObservable((x) => x.toString(2), count$)
-    }),
-    render: function ({ count$, hard$, veryHard$, imageSource$, hexCounter$ }) {
-        const onClick = () => {
-            count$.update((count) => count + 1);
-            hard$.update((hard) => !hard);
-        };
-
-        return div(
-            h2(cond({
-                if$: mapObservable(
-                    (hard, veryHard) => hard && veryHard, hard$, veryHard$),
-                then: "Rock hard, baby",
-                otherwise: "Wood needed"
-            })),
-            div(span(template`${this.props.counter}: ${hexCounter$}`)),
-            div(img("Kasha.png").att$("src", imageSource$).clk(onClick))
-        );
-    }
-});
-
-const shoppingForm = () => component({
-    render: () => div(
-        div(span('Name: '), input('text').att('id', 'itemName')),
-        div(span('Price: '), input('text').att('id', 'itemPrice')),
-        button(span('Add')).clk(() => {
-            const itemName = document.getElementById('itemName') as HTMLInputElement;
-            const itemPrice = document.getElementById('itemPrice') as HTMLInputElement;
-
-            if (itemName.value == "" || itemPrice.value == "") return;
-
-            shoppingItems.push({
-                name: itemName.value,
-                price$: observable(itemPrice.value)
-            });
-
-            itemName.value = "";
-            itemPrice.value = "";
-        })
-    )
-});
-
-const shoppingList = () => component({
-    observables: () => ({ shoppingItems$: shoppingItems.observable$ }),
-    render: ({ shoppingItems$ }) => div(
-        h2("Shopping items"),
-        ul(
-            iterable({
-                it$: shoppingItems$,
-                buildFn: (_, item) => li(span(template`${item.name} - ${item.price$}`)),
-                keyFn: (_, item) => item.name,
-            })
-        )
-    )
-});
-
-const exampleRouter = router({
-    "/": div(
-        h1("Grecha.js"),
-        div(a("Foo").att("href", "#/foo")),
-        div(a("Bar").att("href", "#/bar")),
-        counter(),
-        shoppingList(),
-        shoppingForm()
-    ),
-    "/foo": component({
-        observables: () => ({ count$: observable(0) }),
-        derivedObservables: ({ count$ }) => ({
-            paragraphStyle$: mapObservable(
-                (count) => `color: ${numberToHexColor(count * 999999)}`, count$)
-        }),
-        render: ({ count$, paragraphStyle$ }) => div(
-            h1("Foo"),
-            p(LOREM).att$("style", paragraphStyle$),
-            button("Change color").clk(() => count$.update((x) => x + 1)),
-            div(a("Home").att("href", "#")),
-        )
-    }),
-    "/bar": div(
-        h1("Bar"),
-        p(LOREM),
-        div(a("Home").att("href", "#"))
-    )
-}, { notFoundRoute: "/" });
-
-function numberToHexColor(number: number) {
-    let hex = (number % 0xffffff).toString(16);
-    while (hex.length < 6) hex = "0" + hex;
-    return "#" + hex;
-}
-
-exampleRouter.mount(document.getElementById('entry')!);
-exampleRouter.activate();

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from './tag';
-export * from './observables';
-export * from './nodes';
-export * from './router';
-export * from './task';
-export * from './reactive';

package/src/lifecycle.ts

@@ -1,44 +0,0 @@
-export interface Lifecycle {
-    mount(parentNode: Node): void,
-    activate(): void,
-    deactivate(): void,
-    unmount(): void
-}
-
-export enum ReactiveNodeStatus {
-    Active,
-    Inactive,
-    Mounted,
-    Unmounted
-};
-
-export const buildLifecycleHooks = (handlers: Lifecycle[]): Lifecycle => {
-    let status = ReactiveNodeStatus.Unmounted;
-
-    return {
-        mount: (parentNode: Node) => {
-            if (status !== ReactiveNodeStatus.Unmounted)
-                return console.warn(`Mounting in status ${ReactiveNodeStatus[status]}`);
-            for (const handler of handlers) handler.mount(parentNode);
-            status = ReactiveNodeStatus.Mounted;
-        },
-        activate: () => {
-            if (status !== ReactiveNodeStatus.Mounted && status !== ReactiveNodeStatus.Inactive)
-                return console.warn(`Activating in status ${ReactiveNodeStatus[status]}`);
-            for (const handler of handlers) handler.activate();
-            status = ReactiveNodeStatus.Active;
-        },
-        deactivate: () => {
-            if (status !== ReactiveNodeStatus.Active)
-                return console.warn(`Deactivating in status ${ReactiveNodeStatus[status]}`);
-            for (const handler of handlers) handler.deactivate()
-            status = ReactiveNodeStatus.Inactive;
-        },
-        unmount() {
-            if (status !== ReactiveNodeStatus.Inactive)
-                return console.warn(`Unmounting in status ${ReactiveNodeStatus[status]}`);
-            for (const handler of handlers) handler.unmount();
-            status = ReactiveNodeStatus.Unmounted;
-        },
-    };
-};

package/src/nodes/component.ts

@@ -1,107 +0,0 @@
-import {
-    scopedObservable,
-    ScopedObservable,
-    type Observable
-} from "../observables";
-import { toReactiveNode, type ReactiveNode } from "./reactive";
-
-type Observables = Record<string, Observable<any>>;
-type ScopedObservables<T extends Observables> = {
-    [K in keyof T]: ScopedObservable<T[K]>
-};
-
-type RenderFn<O extends Observables, T extends Node, P> =
-    (this: Context<T, P>, observables: ScopedObservables<O>) => ReactiveNode<T>;
-
-type UserOpts<O1 extends Observables, O2 extends Observables, T extends Node, P> =
-    Partial<Opts<O1, O2, T, P>> & { render: RenderFn<O1 & O2, T, P> };
-
-type Opts<O1 extends Observables, O2 extends Observables, T extends Node, P> = {
-    render: RenderFn<O1 & O2, T, P>,
-    observables: () => O1,
-    derivedObservables: (observables: O1) => O2,
-    cache: boolean,
-    props: P
-};
-
-const defaultOpts = {
-    observables: () => ({}),
-    derivedObservables: () => ({}),
-    cache: false,
-    props: {}
-};
-
-export const component = <
-    O1 extends Observables,
-    O2 extends Observables,
-    T extends Node,
-    P
->(opts: UserOpts<O1, O2, T, P>): ReactiveNode<Comment> => new Component<O1, O2, T, P>(
-    Object.assign({}, defaultOpts, opts)
-).toReactiveNode();
-
-class Context<T extends Node, P> {
-    node: ReactiveNode<T> | undefined;
-    constructor(public parent: Node, public props: P) { }
-}
-
-class Component<O1 extends Observables, O2 extends Observables, T extends Node, P> {
-    private node: ReactiveNode<T> | undefined;
-    private observables: ScopedObservables<O1 & O2> | undefined;
-    private context: Context<T, P> | undefined;
-
-    constructor(private opts: Opts<O1, O2, T, P>) { }
-
-    toReactiveNode() {
-        return toReactiveNode(document.createComment('Component'), [{
-            mount: (parentNode: Node) => {
-                if (this.node === undefined || !this.opts.cache)
-                    this.setupNode(parentNode);
-                this.node?.mount(parentNode);
-            },
-            activate: () => this.node?.activate(),
-            deactivate: () => {
-                this.node?.deactivate();
-                if (this.observables === undefined) return;
-                for (const key in this.observables)
-                    this.observables[key as keyof O1 & O2].unsubscribeAll();
-            },
-            unmount: () => {
-                this.node?.unmount();
-                if (!this.opts.cache) this.cleanUp();
-            }
-        }]);
-    }
-
-    private setupNode(parentNode: Node) {
-        this.observables = this.buildObservables();
-        this.context = new Context(parentNode, this.opts.props);
-        this.node = this.opts.render.call(this.context, this.observables);
-        this.context.node = this.node;
-    }
-
-    private cleanUp() {
-        if (this.context !== undefined) this.context.node = undefined;
-        this.node = undefined;
-        this.observables = undefined;
-    }
-
-    private buildObservables() {
-        const coreObservables = this.opts.observables();
-        const derivedObservables = this.opts.derivedObservables(coreObservables);
-        const observables =
-            Object.assign({}, coreObservables, derivedObservables);
-        return this.toScoped<O1 & O2>(observables);
-    }
-
-    private toScoped<O extends Observables>(observables: O): ScopedObservables<O> {
-        const scopedObservables: Partial<ScopedObservables<O>> = {};
-
-        for (const key in observables) {
-            const k: keyof O = key;
-            scopedObservables[k] = scopedObservable(observables[k]);
-        }
-
-        return scopedObservables as ScopedObservables<O>;
-    }
-}