@realglebivanov/reactive 1.0.1 → 1.0.2

package/dist/index.js

@@ -1,2 +1,2 @@
-export{v as ReactiveArray,q as ReactiveItem,r as ReactiveItemCollection,n as ScopedObservable,f as buildDedupMicrotaskRunner,h as buildMicrotaskRunner,o as component,p as cond,g as dedupMicrotaskRunner,l as dedupObservable,s as iterable,k as mapObservable,i as microtaskRunner,j as observable,c as reactiveTextNode,u as router,m as scopedObservable,d as tag,e as tags,t as template,b as toReactiveNode,a as toTagReactiveNode}from'./chunk-E3ZTVWCG.js';//# sourceMappingURL=index.js.map
+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.1",
+  "version": "1.0.2",
   "description": "A simple and permissive observable-driven UI toolkit",
   "type": "module",
   "main": "./dist/index.js",