@fluffjs/fluff 0.2.4 → 0.3.0

package/bundle.min.js

@@ -0,0 +1 @@
+var V=new Map;function N(a){return function(t){let e={...a,inputs:new Map,outputs:new Map};return V.set(t,e),t}}function $(a){return V.get(a)}var C=class{static getOrCreateArray(t,e){let n=Reflect.get(t,e);if(this.isTypedArray(n))return n;let r=[];return Reflect.set(t,e,r),r}static isTypedArray(t){return Array.isArray(t)}};function H(a){return function(t,e){let n=t.constructor;C.getOrCreateArray(n,"__hostBindings").push({property:String(e),hostProperty:a})}}function W(a){return function(t,e,n){let r=t.constructor;return C.getOrCreateArray(r,"__hostListeners").push({method:String(e),event:a}),n}}function z(a){return typeof a=="function"}function I(a){return function(t){return function(e,n){let{constructor:r}=e;if(!z(r))return;let s=$(r);if(s){let i=typeof t=="string"?t:t?.alias??String(n);s[a].set(String(n),i)}}}}var D=I("inputs");function j(a){return(t,e,n)=>{}}var q=I("outputs");var B=new Map;function R(a){let t=B.get(a);if(!t)return;let e=new t;return(n,...r)=>e.transform(n,...r)}function J(a){return function(t){return t.__pipeName=a,B.set(a,t),t}}function G(a){return(t,e)=>{}}function K(a){return function(t,e){let n=t.constructor;C.getOrCreateArray(n,"__viewChildren").push({property:String(e),selector:a})}}function X(...a){return function(t,e,n){let r=n.value;return typeof r=="function"&&Reflect.set(t,`__watch_${String(e)}`,r),n}}var _;(function(a){a[a.Any=0]="Any",a[a.Inbound=1]="Inbound",a[a.Outbound=2]="Outbound"})(_||(_={}));var g=class{callbacks=new Set;emit(t){for(let e of this.callbacks)try{let n=e(t);n instanceof Promise&&n.catch(r=>{console.error(r)})}catch(n){console.error(n)}}async emitAsync(t){for(let e of this.callbacks)try{await e(t)}catch(n){console.error(n)}}subscribe(t){return this.callbacks.add(t),{unsubscribe:()=>{this.callbacks.delete(t)}}}subscribeOnce(t){let e=async n=>{this.callbacks.delete(e),await t(n)};return this.callbacks.add(e),{unsubscribe:()=>{this.callbacks.delete(e)}}}};function T(a){let t=new WeakSet;return JSON.stringify(a,(e,n)=>{if(typeof n=="object"&&n!==null){if(t.has(n))return"[Circular]";t.add(n)}return n})}var p=class a{onChange=new g;onInboundChange=new g;onOutboundChange=new g;onMetadataChange=new g;value;committed=!0;_isChanging=!1;_parentProperty;_parentSubscription;_commitTriggerSub;_pendingCommitValue;_options;constructor(t){this.isOptionsObject(t)?(this._options=t,t.initialValue!==void 0&&(this.value=t.initialValue),t.commitTrigger!==void 0&&this.setCommitTrigger(t.commitTrigger)):this.value=t}prop(){return this._parentProperty}setValue(t,e=!1,n=!0){if(t instanceof a){let s=this._options?.linkHandler;s&&s(t),this.linkToParent(t);return}if(this._isChanging){let s=this._options?.propertyName;console.error((s?s+": ":"")+"Binding loop detected: setValue called while change is in progress");return}if(!(!(t!==this.value&&T(t)!==T(this.value))&&!(n&&!this.committed))){this._isChanging=!0;try{this.value=t,this.onChange.emit(t),n||(this.committed=!1),e?(this.committed=!0,this.onInboundChange.emit(t)):n&&(this.committed=!0,this.value!==void 0&&this.onOutboundChange.emit(this.value)),!e&&this._parentProperty&&this.pushToParent(t)}finally{this._isChanging=!1}}}linkToParent(t){this.clearParentLink();let e=t;for(;e._parentProperty;)e=e._parentProperty;this._parentProperty=e;let n=this._options?.direction??_.Any;this._parentSubscription=e.subscribe(n,s=>{this.setValueInternal(s,!0)});let r=e.getValue();r!==null&&this.setValueInternal(r,!0)}setValueInternal(t,e){if(!(this._isChanging||!(t!==this.value&&T(t)!==T(this.value)))){this._isChanging=!0;try{this.value=t,this.onChange.emit(t),e&&this.onInboundChange.emit(t)}finally{this._isChanging=!1}}}pushToParent(t){if(!this._parentProperty)return;let e=this._options?.commitTrigger;if(e){if(!!!e.getValue()){this._pendingCommitValue={value:t},this._parentProperty.setValue(t,!1,!1);return}this._pendingCommitValue=void 0}let n=this._parentSubscription;this._parentSubscription=void 0,n?.unsubscribe(),this._parentProperty.setValue(t);let r=this._options?.direction??_.Any;this._parentSubscription=this._parentProperty.subscribe(r,s=>{this.setValueInternal(s,!0)})}clearParentLink(){this._parentSubscription&&(this._parentSubscription.unsubscribe(),this._parentSubscription=void 0),this._parentProperty=void 0}setCommitTrigger(t){this._commitTriggerSub&&(this._commitTriggerSub.unsubscribe(),this._commitTriggerSub=void 0),this._options??={},this._options.commitTrigger=t,this._commitTriggerSub=t.onChange.subscribe(e=>{if(!e||!this._parentProperty||!this._pendingCommitValue)return;let n=this._pendingCommitValue.value;this._pendingCommitValue=void 0,this._parentProperty.setValue(n,!1,!0)})}reset(){this.clearParentLink()}triggerChange(t=_.Any){this.value!==void 0&&(this.onChange.emit(this.value),t==_.Outbound&&this.onOutboundChange.emit(this.value),t==_.Inbound&&this.onOutboundChange.emit(this.value))}subscribe(t,e){return t==_.Inbound?this.onInboundChange.subscribe(n=>{e(n)}):t==_.Outbound?this.onOutboundChange.subscribe(n=>{e(n)}):this.onChange.subscribe(n=>{e(n)})}getValue(){return this.value===void 0?null:this.value}isOptionsObject(t){return typeof t=="object"&&t!==null&&"initialValue"in t}};var m=class a extends HTMLElement{static __e=[];static __h=[];static __bindings={};static __expressionsReady=!1;static __pendingInitCallbacks=[];static __setExpressionTable(t,e){a.__e=t,a.__h=e,a.__expressionsReady=!0;let n=a.__pendingInitCallbacks.splice(0,a.__pendingInitCallbacks.length);for(let r of n)r()}static __areExpressionsReady(){return a.__expressionsReady}static __addPendingInit(t){a.__pendingInitCallbacks.push(t)}__parentScope;__loopContext={};__baseSubscriptions=[];__getScope(){return{host:this,locals:this.__loopContext,parent:this.__parentScope}}__subscribeToExpression(t,e,n,r){this.__subscribeToExpressionInScope(t,e,n,r)}__evaluateExpr(t,e){let n=this.__getCompiledExprFn(t);try{return n(this,e)}catch{return}}__applyPipesForController(t,e,n){let r=t;r instanceof p&&(r=r.getValue());for(let s of e){let i=this.__getPipeFn(s.name);if(!i){console.warn(`Pipe "${s.name}" not found`);continue}let o=s.argExprIds.map(c=>this.__getCompiledExprFn(c)(this,n));r=i(r,...o)}return r}__processBindingsOnElement(t,e,n){let r=t.getAttribute("data-lid");if(!r)return;let s=this.__getBindingsForLid(r);if(!(!s||s.length===0))for(let i of s)this.__applyBindingWithScope(t,i,e,n)}__getBindingsForLid(t){let e=this.constructor;if(typeof e=="function"){let n=Reflect.get(e,"__bindings");if(this.__isBindingsMap(n))return n[t]}}__isBindingsMap(t){return!(!t||typeof t!="object")}__applyBindingWithScope(t,e,n,r){switch(e.b){case"property":this.__applyPropertyBindingWithScope(t,e,n,r);break;case"event":this.__applyEventBindingWithScope(t,e,n);break;case"two-way":this.__applyTwoWayBindingWithScope(t,e,n,r);break;case"class":this.__applyClassBindingWithScope(t,e,n,r);break;case"style":this.__applyStyleBindingWithScope(t,e,n,r);break;case"ref":break}}__getCompiledExprFn(t){let e=a.__e[t];if(typeof e!="function")throw new Error(`Missing compiled expression function for exprId ${t}`);return e}__getCompiledHandlerFn(t){let e=a.__h[t];if(typeof e!="function")throw new Error(`Missing compiled handler function for handlerId ${t}`);return e}__applyPipes(t,e,n){return this.__applyPipesForController(t,e.map(r=>({name:r.n,argExprIds:r.a})),n)}__getPipeFn(t){}__subscribeToExpressionInScope(t,e,n,r){if(!t)return;let s=i=>{r?r.push(i):this.__baseSubscriptions.push(i)};for(let i of t)if(Array.isArray(i))this.__subscribeToPropertyChain(i,e,n,s);else{let o=this.__getReactivePropFromScope(i,e);o?s(o.onChange.subscribe(n)):!(i in e.locals)&&!(i in e.host)&&console.warn(`Binding dependency "${i}" not found on component ${e.host.constructor.name}`)}}__subscribeToPropertyChain(t,e,n,r){if(t.length===0)return;let[s,...i]=t,o=this.__getReactivePropFromScope(s,e);if(o)if(i.length===0)r(o.onChange.subscribe(n));else{let c=[],u=()=>{for(let f of c)f.unsubscribe();c=[];let l=o.getValue();l!=null&&this.__subscribeToNestedChain(l,i,n,f=>{c.push(f),r(f)}),n()};r(o.onChange.subscribe(u));let h=o.getValue();h!=null&&this.__subscribeToNestedChain(h,i,n,l=>{c.push(l),r(l)})}else if(s in e.locals){let c=e.locals[s];c!=null&&i.length>0&&this.__subscribeToNestedChain(c,i,n,r)}else s in e.host||console.warn(`Binding dependency "${s}" not found on component ${e.host.constructor.name}`)}__subscribeToNestedChain(t,e,n,r){if(e.length===0||t===null||t===void 0)return;let[s,...i]=e,o=Reflect.get(t,s);if(o instanceof p)if(i.length===0)r(o.onChange.subscribe(n));else{let c=[],u=()=>{for(let f of c)f.unsubscribe();c=[];let l=o.getValue();l!=null&&this.__subscribeToNestedChain(l,i,n,f=>{c.push(f),r(f)}),n()};r(o.onChange.subscribe(u));let h=o.getValue();h!=null&&this.__subscribeToNestedChain(h,i,n,l=>{c.push(l),r(l)})}else i.length>0&&o!==null&&o!==void 0&&this.__subscribeToNestedChain(o,i,n,r)}__getReactivePropFromScope(t,e){if(t in e.locals)return;let n=`__${t}`;if(n in e.host){let r=Reflect.get(e.host,n);if(r instanceof p)return r}if(e.parent)return this.__getReactivePropFromScope(t,e.parent)}__setChildProperty(t,e,n){let r=Reflect.get(t,e);r instanceof p?r.setValue(n,!0):t instanceof a?Reflect.set(t,e,n):e in t&&t instanceof HTMLElement?Reflect.set(t,e,this.__unwrap(n)):t.setAttribute(e,String(this.__unwrap(n)))}__unwrap(t){return t instanceof p?t.getValue():t}__applyPropertyBindingWithScope(t,e,n,r){let s=t.tagName.toLowerCase(),i=customElements.get(s)!==void 0,o=()=>{try{if(typeof e.e!="number")throw new Error(`Binding for ${e.n} is missing exprId`);let u=this.__getCompiledExprFn(e.e)(this,n.locals);e.p&&e.p.length>0&&(u=this.__applyPipes(u,e.p,n.locals)),this.__setChildProperty(t,e.n,u)}catch(c){console.error("Property binding error:",c)}};this.__subscribeToExpressionInScope(e.d,n,o,r),e.s&&this.__subscribeToExpressionInScope([e.s],n,o,r),i?t instanceof a?o():this.__whenDefined(s,()=>{t instanceof a?o():console.warn(`Element <${s}> is not a FluffBase instance after whenDefined - binding for "${e.n}" skipped`)}):o()}__applyEventBindingWithScope(t,e,n){let r=`__fluff_event_${e.n}`;if(Reflect.has(t,r))return;if(Reflect.set(t,r,!0),typeof e.h!="number")throw new Error(`Event binding for ${e.n} is missing handlerId`);let s=this.__getCompiledHandlerFn(e.h);t.hasAttribute("x-fluff-component")?this.__applyOutputBinding(t,e.n,s,n):t.addEventListener(e.n,i=>{try{s(this,n.locals,i)}catch(o){console.error("Event binding error:",o)}})}__applyOutputBinding(t,e,n,r){let s=()=>{let i=Reflect.get(t,e);if(i instanceof g){let o=i.subscribe(c=>{try{n(this,r.locals,c)}catch(u){console.error("Output binding error:",u)}});return this.__baseSubscriptions.push(o),!0}return!1};s()||this.__whenDefined(t.tagName.toLowerCase(),()=>{s()})}__whenDefined(t,e){customElements.whenDefined(t).then(e).catch(console.error)}__applyTwoWayBindingWithScope(t,e,n,r){if(this.__applyPropertyBindingWithScope(t,e,n,r),typeof e.t!="string"||e.t.length===0)throw new Error(`Two-way binding for ${e.n} is missing targetProp`);let s=this.__getReactivePropFromScope(e.t,n),i=Reflect.get(t,e.n);if(s&&i instanceof p){let o=i.onChange.subscribe(c=>{s.setValue(c,!0)});r?r.push(o):this.__baseSubscriptions.push(o)}}__applyClassBindingWithScope(t,e,n,r){let s=()=>{try{if(typeof e.e!="number")throw new Error(`Class binding for ${e.n} is missing exprId`);let i=this.__getCompiledExprFn(e.e);this.__unwrap(i(this,n.locals))?t.classList.add(e.n):t.classList.remove(e.n)}catch(i){console.error("Class binding error:",i)}};this.__subscribeToExpressionInScope(e.d,n,s,r),s()}__applyStyleBindingWithScope(t,e,n,r){let s=()=>{try{if(typeof e.e!="number")throw new Error(`Style binding for ${e.n} is missing exprId`);let i=this.__getCompiledExprFn(e.e),o=this.__unwrap(i(this,n.locals));this.__hasStyle(t)&&t.style.setProperty(e.n,String(o))}catch(i){console.error("Style binding error:",i)}};this.__subscribeToExpressionInScope(e.d,n,s,r),s()}__hasStyle(t){return"style"in t}};var L=new Map,Q=0;function A(a){let t=`scope_${Q++}`;return L.set(t,a),t}function F(a){return L.get(a)}var v=/^fluff:(if|for|switch|text|break):(\d+)$/,d=class{id;startMarker;endMarker;subscriptions=[];host;shadowRoot;parentScope;loopContext={};markerManager;constructor(t,e,n,r,s){this.id=t,this.startMarker=e,this.endMarker=n,this.host=r,this.shadowRoot=s}setParentScope(t){this.parentScope=t}setLoopContext(t){this.loopContext=t}setMarkerManager(t){this.markerManager=t}cleanup(){for(let t of this.subscriptions)t.unsubscribe();this.subscriptions.length=0}updateRenderContext(t){}evaluateExpr(t){let e=this.getScope(),n=this.collectLocalsFromScope(e);if(e.host.__evaluateExpr)return e.host.__evaluateExpr(t,n);let r=m.__e[t];if(typeof r=="function")try{return r(e.host,n)}catch{return}}getScope(){if(this.parentScope)return this.parentScope;let t=this.__getFluffElementHost();return t?t.__getScope():{host:this.host,locals:this.loopContext,parent:void 0}}collectLocalsFromScope(t){let e={};return t.parent&&Object.assign(e,this.collectLocalsFromScope(t.parent)),Object.assign(e,t.locals),e}subscribeAndRun(t,e){let n=this.getScope(),r=t.filter(s=>Array.isArray(s)?s.length>0&&!s[0].startsWith("["):!s.startsWith("["));n.host.__subscribeToExpression&&n.host.__subscribeToExpression(r,n,e,this.subscriptions),e()}createChildScope(t){return{host:this.host,locals:t,parent:this.parentScope}}clearContentBetweenMarkersWithCleanup(t){for(let r of t)r.unsubscribe();if(t.length=0,!this.endMarker)return;let e=this.startMarker.parentNode;if(!e)return;let n=this.startMarker.nextSibling;for(;n&&n!==this.endMarker;){let r=n.nextSibling;if(n instanceof Comment){let s=v.exec(n.data);if(s&&this.markerManager?.cleanupController){let i=parseInt(s[2],10);this.markerManager.cleanupController(i,n)}}n instanceof HTMLTemplateElement||e.removeChild(n),n=r}}insertBeforeEndMarker(t){if(!this.endMarker)return;let e=this.endMarker.parentNode;e&&e.insertBefore(t,this.endMarker)}refreshParentBindings(){let t=this.startMarker.parentNode;if(!(t instanceof HTMLElement)||!t.hasAttribute("data-lid"))return;let e=this.__getFluffElementHost();if(!e)return;let n=this.getScope();e.__processBindingsOnElementPublic(t,n)}__getFluffElementHost(){return this.host instanceof y?this.host:null}setScopeOnChildren(t,e,n,r,s){if(t instanceof Comment){let i=v.exec(t.data);if(i&&r){let[,o,c]=i,u=parseInt(c,10),h=`/fluff:${o}:${u}`,l=r.getController(u,t),f=l===void 0;if(!l&&r.ensureController){let O=null,x=t.nextSibling;for(;x;){if(x instanceof Comment&&x.data===h){O=x;break}x=x.nextSibling}l=r.ensureController(u,o,t,O)}l&&(l.setParentScope(e),l.setLoopContext(e.locals),l.updateRenderContext(n),f&&l.initialize())}}else if(t instanceof y)t.__loopContext=e.locals,t.__parentScope=e,this.processBindingsOnNode(t,e,s);else if(t instanceof HTMLElement&&customElements.get(t.tagName.toLowerCase())!==void 0){let i=A(e);t.setAttribute("data-fluff-scope-id",i),this.processBindingsOnNode(t,e,s)}else t instanceof HTMLElement&&t.hasAttribute("data-lid")&&this.processBindingsOnNode(t,e,s);for(let i of Array.from(t.childNodes))this.setScopeOnChildren(i,e,n,r,s)}cloneAndInsertTemplate(t,e,n,r){let s=t.content.cloneNode(!0);if(!(s instanceof DocumentFragment))throw new Error("Expected DocumentFragment from template clone");let i=Array.from(s.childNodes),o=this.createChildScope(e);this.insertBeforeEndMarker(s);for(let c of i)this.setScopeOnChildren(c,o,n,this.markerManager,r)}processBindingsOnNode(t,e,n){let r=this.__getFluffElementHost();r&&r.__processBindingsOnElementPublic(t,e,n)}};var w=class extends d{constructor(t,e,n,r,s,i){super(t,e,n,r,s)}initialize(){}updateRenderContext(t){t&&(t.shouldBreak=!0)}};var k=class extends d{config;itemTemplate=null;emptyTemplate=null;bindingsSubscriptions=[];constructor(t,e,n,r,s,i){super(t,e,n,r,s),this.config=i}initialize(){let e=`${this.host.tagName.toLowerCase()}-${this.id}`;this.itemTemplate=this.shadowRoot.querySelector(`template[data-fluff-tpl="${e}"]`),this.emptyTemplate=this.shadowRoot.querySelector(`template[data-fluff-empty="${e}"]`);let n=this.config.deps??[],r=()=>{this.clearContentBetweenMarkersWithCleanup(this.bindingsSubscriptions);let s=this.evaluateExpr(this.config.iterableExprId);if(!Array.isArray(s)||s.length===0){this.emptyTemplate&&this.cloneAndInsertTemplate(this.emptyTemplate,this.loopContext,void 0,this.bindingsSubscriptions);return}if(!this.itemTemplate)return;let i={shouldBreak:!1};for(let o=0;o<s.length&&!i.shouldBreak;o++){let c={...this.loopContext,[this.config.iterator]:s[o],$index:o};this.cloneAndInsertTemplate(this.itemTemplate,c,i,this.bindingsSubscriptions)}this.refreshParentBindings()};this.subscribeAndRun(n,r)}};var P=class extends d{config;templates=[];currentBranchIndex=-1;bindingsSubscriptions=[];constructor(t,e,n,r,s,i){super(t,e,n,r,s),this.config=i}initialize(){let e=`${this.host.tagName.toLowerCase()}-${this.id}-`;this.templates=Array.from(this.shadowRoot.querySelectorAll(`template[data-fluff-branch^="${e}"]`));let n=[];for(let s of this.config.branches)s.deps&&n.push(...s.deps);let r=()=>{let s=-1;for(let i=0;i<this.config.branches.length;i++){let o=this.config.branches[i];if(o.exprId===void 0){s=i;break}if(this.evaluateExpr(o.exprId)){s=i;break}}s!==this.currentBranchIndex&&(this.clearContentBetweenMarkersWithCleanup(this.bindingsSubscriptions),this.currentBranchIndex=s,s>=0&&s<this.templates.length&&this.cloneAndInsertTemplate(this.templates[s],this.loopContext,void 0,this.bindingsSubscriptions),this.refreshParentBindings())};this.subscribeAndRun(n,r)}};var b=class{static isIfConfig(t){return t.type==="if"}static isForConfig(t){return t.type==="for"}static isSwitchConfig(t){return t.type==="switch"}static isTextConfig(t){return t.type==="text"}static isBreakConfig(t){return t.type==="break"}};var E=class extends d{config;templates=[];bindingsSubscriptions=[];constructor(t,e,n,r,s,i){super(t,e,n,r,s),this.config=i}initialize(){let e=`${this.host.tagName.toLowerCase()}-${this.id}-`;this.templates=Array.from(this.shadowRoot.querySelectorAll(`template[data-fluff-case^="${e}"]`));let n=this.config.deps??[],r=()=>{this.clearContentBetweenMarkersWithCleanup(this.bindingsSubscriptions);let s=this.evaluateExpr(this.config.expressionExprId),i=!1,o=!1,c={shouldBreak:!1};for(let u=0;u<this.config.cases.length&&!c.shouldBreak;u++){let h=this.config.cases[u],l=this.templates[u];if(!l)continue;let f=h.isDefault||h.valueExprId!==void 0&&this.evaluateExpr(h.valueExprId)===s;(o||!i&&f)&&(i=!0,this.cloneAndInsertTemplate(l,this.loopContext,c,this.bindingsSubscriptions),o=h.fallthrough)}this.refreshParentBindings()};this.subscribeAndRun(n,r)}};var M=class extends d{config;textNode=null;constructor(t,e,n,r,s,i){super(t,e,n,r,s),this.config=i}initialize(){this.textNode=document.createTextNode(""),this.insertBeforeEndMarker(this.textNode);let t=this.config.deps??[],e=this.config.pipes??[],n=()=>{let r=this.evaluateExpr(this.config.exprId);if(this.host.__applyPipesForController){let s=this.getScope(),i=this.collectLocalsFromScope(s);r=this.host.__applyPipesForController(r,e,i)}this.textNode&&(this.textNode.textContent=this.formatValue(r))};this.subscribeAndRun(t,n)}formatValue(t){return t==null?"":typeof t=="object"?JSON.stringify(t):typeof t=="string"?t:typeof t=="number"||typeof t=="boolean"?String(t):""}};var S=class{controllers=new Map;configs=new Map;host;shadowRoot;constructor(t,e){this.host=t,this.shadowRoot=e}initializeFromConfig(t){this.configs.clear();for(let[n,r]of t)this.configs.set(n,r);for(let[n,r]of t){let{startMarker:s,endMarker:i}=this.findMarkers(n,r.type);if(!s)continue;let o=this.createController(n,s,i,r);o&&(o.setMarkerManager(this),this.registerController(n,s,o))}let e=[];for(let n of this.controllers.values())e.push(...n.values());for(let n of e)n.initialize()}ensureController(t,e,n,r){let s=this.getController(t,n);if(s)return s;let i=this.configs.get(t);if(i?.type!==e)return;let o=this.createController(t,n,r,i);if(o)return o.setMarkerManager(this),this.registerController(t,n,o),o}getController(t,e){return this.controllers.get(t)?.get(e)}cleanupController(t,e){let n=this.controllers.get(t);if(n){if(e){let r=n.get(e);if(!r)return;r.cleanup(),n.delete(e),n.size===0&&this.controllers.delete(t);return}for(let r of n.values())r.cleanup();this.controllers.delete(t)}}cleanup(){for(let t of this.controllers.values())for(let e of t.values())e.cleanup();this.controllers.clear()}registerController(t,e,n){let r=this.controllers.get(t);r||(r=new Map,this.controllers.set(t,r)),r.set(e,n)}findMarkers(t,e){let n=`fluff:${e}:${t}`,r=`/fluff:${e}:${t}`,s=null,i=null,o=document.createTreeWalker(this.shadowRoot,NodeFilter.SHOW_COMMENT,null),c=o.nextNode();for(;c;)c instanceof Comment&&(c.data===n?s=c:c.data===r&&(i=c)),c=o.nextNode();return{startMarker:s,endMarker:i}}createController(t,e,n,r){return b.isIfConfig(r)?new P(t,e,n,this.host,this.shadowRoot,r):b.isForConfig(r)?new k(t,e,n,this.host,this.shadowRoot,r):b.isSwitchConfig(r)?new E(t,e,n,this.host,this.shadowRoot,r):b.isTextConfig(r)?new M(t,e,n,this.host,this.shadowRoot,r):b.isBreakConfig(r)?new w(t,e,n,this.host,this.shadowRoot,r):null}};var y=class extends m{__pipes={};_shadowRoot;_subscriptions=[];_initialized=!1;_pendingInit=!1;_markerManager=null;_markerConfigEntries=null;_MarkerManagerClass=null;constructor(){super(),this._shadowRoot=this.attachShadow({mode:"open"})}connectedCallback(){if(!this._initialized){if(!m.__areExpressionsReady()){this._pendingInit||(this._pendingInit=!0,m.__addPendingInit(()=>{this._pendingInit=!1,this.connectedCallback()}));return}let t=this.getAttribute("data-fluff-scope-id");t&&!this.__parentScope&&(this.__parentScope=F(t),this.__parentScope&&(this.__loopContext=this.__parentScope.locals));let e=this.getAttribute("data-fluff-loop-context");if(e&&Object.keys(this.__loopContext).length===0)try{this.__loopContext=JSON.parse(e)}catch{}this.__applyPendingProps(),this.__render(),this.__setupBindings(),this.getAttribute("data-fluff-scope-id")&&this.__processBindings(),this._initialized=!0,"onInit"in this&&typeof this.onInit=="function"&&this.onInit()}}disconnectedCallback(){"onDestroy"in this&&typeof this.onDestroy=="function"&&this.onDestroy(),this._markerManager&&(this._markerManager.cleanup(),this._markerManager=null);for(let t of this._subscriptions)t.unsubscribe();this._subscriptions=[];for(let t of this.__baseSubscriptions)t.unsubscribe();this.__baseSubscriptions=[]}$watch=(t,e)=>(e(""),{unsubscribe:()=>{}});__processBindingsOnElementPublic(t,e,n){this.__processBindingsOnElement(t,e,n)}__setupBindings(){this.__initializeMarkers(S),this.__processBindings(),this.__initializeMarkersInternal()}__pipe(t,e,...n){let r=this.__pipes[t];return r?r(e,...n):(console.warn(`Pipe "${t}" not found`),e)}__getPipeFn(t){return this.__pipes[t]??R(t)}__getShadowRoot(){return this._shadowRoot}__createProp(t,e){let n=new p(e);return Object.defineProperty(this,t,{get(){return n.getValue()},set(r){n.setValue(r)},enumerable:!0,configurable:!0}),n}__defineClassHostBinding(t,e,n){Object.defineProperty(this,t,{get:()=>!!Reflect.get(this,n),set:r=>{Reflect.set(this,n,r),r?this.classList.add(e):this.classList.remove(e)},enumerable:!0,configurable:!0})}__setMarkerConfigs(t){this._markerConfigEntries=t}__initializeMarkers(t){this._MarkerManagerClass=t}__initializeMarkersInternal(){!this._markerConfigEntries||!this._MarkerManagerClass||(this._markerManager=new this._MarkerManagerClass(this,this._shadowRoot),this._markerManager.initializeFromConfig(this._markerConfigEntries))}__setChildProperty(t,e,n){if(t instanceof HTMLElement&&t.hasAttribute("x-fluff-component")){let r=t.tagName.toLowerCase();if(customElements.get(r)===void 0){this.__whenDefined(r,()=>{this.__setChildProperty(t,e,n)});return}}super.__setChildProperty(t,e,n)}__getReactivePropFromScope(t,e){let n=`__${t}`;if(n in e.host){let r=Reflect.get(e.host,n);if(r instanceof p)return r}if(e.parent)return this.__getReactivePropFromScope(t,e.parent)}__processBindings(){let t=this._shadowRoot.querySelectorAll("[data-lid]"),e=this.__getScope();for(let n of Array.from(t)){let r=n.closest("[x-fluff-component]");r&&r!==n||this.__processBindingsOnElement(n,e)}}__applyPendingProps(){let t=Reflect.get(this,"__pendingProps");if(this.isRecord(t)){for(let[e,n]of Object.entries(t)){console.log("apply-pending-prop",{propName:e,value:n,el:this.tagName});let r=`__${e}`;if(r in this){let s=Reflect.get(this,r);s instanceof p&&s.setValue(n,!0)}else e in this&&Reflect.set(this,e,n)}Reflect.deleteProperty(this,"__pendingProps")}}isRecord(t){return t!==null&&typeof t=="object"&&!Array.isArray(t)}};export{N as Component,_ as Direction,m as FluffBase,y as FluffElement,H as HostBinding,W as HostListener,D as Input,j as LinkedProperty,S as MarkerManager,q as Output,J as Pipe,p as Property,g as Publisher,G as Reactive,K as ViewChild,X as Watch,R as getPipeTransform,B as pipeRegistry};

package/decorators/Component.d.ts

@@ -1,10 +1,3 @@
-interface PipeInstance {
-    transform: (value: unknown, ...args: unknown[]) => unknown;
-}
-interface PipeClass {
-    __pipeName?: string;
-    new (): PipeInstance;
-}
 type Constructor = new (...args: unknown[]) => object;
 export interface ComponentConfig {
     selector: string;
@@ -12,7 +5,6 @@ export interface ComponentConfig {
     template?: string;
     styleUrl?: string;
     styles?: string;
-    pipes?: PipeClass[];
 }
 export interface ComponentMetadata extends ComponentConfig {
     inputs: Map<string, string>;

package/decorators/Component.js

@@ -5,17 +5,6 @@ export function Component(config) {
             ...config, inputs: new Map(), outputs: new Map()
         };
         componentRegistry.set(target, metadata);
-        if (config.pipes && config.pipes.length > 0) {
-            const pipesObj = {};
-            for (const PipeClassItem of config.pipes) {
-                const pipeName = PipeClassItem.__pipeName;
-                if (pipeName) {
-                    const instance = new PipeClassItem();
-                    pipesObj[pipeName] = (value, ...args) => instance.transform(value, ...args);
-                }
-            }
-            Reflect.set(target.prototype, '__pipes', pipesObj);
-        }
         return target;
     };
 }

package/decorators/Input.d.ts

@@ -1 +1 @@
-export declare const Input: (bindingName?: string) => PropertyDecorator;
+export declare const Input: (bindingName?: string | import("../index.js").ReactiveOptions) => PropertyDecorator;

package/decorators/InputOutputHelper.d.ts

@@ -1 +1,2 @@
-export declare function createInputOutputDecorator(type: 'inputs' | 'outputs'): (bindingName?: string) => PropertyDecorator;
+import type { ReactiveOptions } from '../interfaces/ReactiveOptions.js';
+export declare function createInputOutputDecorator(type: 'inputs' | 'outputs'): (bindingName?: string | ReactiveOptions) => PropertyDecorator;

package/decorators/InputOutputHelper.js

@@ -10,7 +10,9 @@ export function createInputOutputDecorator(type) {
                 return;
             const metadata = getComponentMetadata(constructor);
             if (metadata) {
-                const name = bindingName ?? String(propertyKey);
+                const name = typeof bindingName === 'string'
+                    ? bindingName
+                    : bindingName?.alias ?? String(propertyKey);
                 metadata[type].set(String(propertyKey), name);
             }
         };

package/decorators/Output.d.ts

@@ -1 +1 @@
-export declare const Output: (bindingName?: string) => PropertyDecorator;
+export declare const Output: (bindingName?: string | import("../index.js").ReactiveOptions) => PropertyDecorator;

package/decorators/Pipe.d.ts

@@ -4,6 +4,7 @@ interface PipeInstance {
 type PipeConstructor = (new () => PipeInstance) & {
     __pipeName?: string;
 };
+export declare const pipeRegistry: Map<string, PipeConstructor>;
 export declare function getPipeTransform(name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
 export declare function Pipe(name: string): <T extends PipeConstructor>(target: T) => T;
 export interface PipeTransform<TArgs extends unknown[] = unknown[], TReturn = unknown> {

package/decorators/Pipe.js

@@ -1,4 +1,4 @@
-const pipeRegistry = new Map();
+export const pipeRegistry = new Map();
 export function getPipeTransform(name) {
     const PipeClass = pipeRegistry.get(name);
     if (!PipeClass)

package/decorators/Reactive.d.ts

@@ -1 +1,2 @@
-export declare function Reactive(): PropertyDecorator;
+import type { ReactiveOptions } from '../interfaces/ReactiveOptions.js';
+export declare function Reactive(_options?: ReactiveOptions): PropertyDecorator;

package/decorators/Reactive.js

@@ -1,4 +1,4 @@
-export function Reactive() {
+export function Reactive(_options) {
     return (_target, _propertyKey) => {
         // Dummy decorator, replaced by compiler
     };

package/index.d.ts

@@ -5,7 +5,7 @@ export { HostListener } from './decorators/HostListener.js';
 export { Input } from './decorators/Input.js';
 export { LinkedProperty } from './decorators/LinkedProperty.js';
 export { Output } from './decorators/Output.js';
-export { getPipeTransform, Pipe } from './decorators/Pipe.js';
+export { getPipeTransform, Pipe, pipeRegistry } from './decorators/Pipe.js';
 export type { PipeTransform } from './decorators/Pipe.js';
 export { Reactive } from './decorators/Reactive.js';
 export { ViewChild } from './decorators/ViewChild.js';
@@ -16,6 +16,7 @@ export { MarkerManager } from './runtime/FluffMarkers.js';
 export { Property } from './utils/Property.js';
 export { Publisher } from './utils/Publisher.js';
 export { Direction } from './enums/Direction.js';
+export type { ReactiveOptions } from './interfaces/ReactiveOptions.js';
 export type { OnInit } from './interfaces/OnInit.js';
 export type { OnDestroy } from './interfaces/OnDestroy.js';
 export type { Subscription } from './interfaces/Subscription.js';

package/index.js

@@ -4,7 +4,7 @@ export { HostListener } from './decorators/HostListener.js';
 export { Input } from './decorators/Input.js';
 export { LinkedProperty } from './decorators/LinkedProperty.js';
 export { Output } from './decorators/Output.js';
-export { getPipeTransform, Pipe } from './decorators/Pipe.js';
+export { getPipeTransform, Pipe, pipeRegistry } from './decorators/Pipe.js';
 export { Reactive } from './decorators/Reactive.js';
 export { ViewChild } from './decorators/ViewChild.js';
 export { Watch } from './decorators/Watch.js';

package/interfaces/FluffHostElement.d.ts

@@ -1,5 +1,15 @@
-import type { Property } from '../utils/Property.js';
+import type { PropertyChain } from './PropertyChain.js';
+import type { Subscription } from './Subscription.js';
+export interface FluffHostScope {
+    host: FluffHostElement;
+    locals: Record<string, unknown>;
+    parent?: FluffHostScope;
+}
 export interface FluffHostElement extends HTMLElement {
-    __getReactiveProp?: (name: string) => Property<unknown> | undefined;
-    __pipes?: Record<string, (value: unknown, ...args: unknown[]) => unknown>;
+    __subscribeToExpression?: (deps: PropertyChain[], scope: FluffHostScope, callback: () => void, subscriptions: Subscription[]) => void;
+    __evaluateExpr?: (exprId: number, locals: Record<string, unknown>) => unknown;
+    __applyPipesForController?: (value: unknown, pipes: {
+        name: string;
+        argExprIds: number[];
+    }[], locals: Record<string, unknown>) => unknown;
 }

package/interfaces/ReactiveOptions.d.ts

@@ -0,0 +1,6 @@
+import type { Direction } from '../enums/Direction.js';
+export interface ReactiveOptions {
+    alias?: string;
+    direction?: Direction;
+    commitTrigger?: string;
+}

package/interfaces/ReactiveOptions.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/fluff",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/runtime/FluffBase.d.ts

@@ -21,10 +21,21 @@ export declare abstract class FluffBase extends HTMLElement {
     static __e: ExpressionFn[];
     static __h: HandlerFn[];
     static __bindings: Record<string, BindingInfo[]>;
+    private static __expressionsReady;
+    private static readonly __pendingInitCallbacks;
+    static __setExpressionTable(expressions: ExpressionFn[], handlers: HandlerFn[]): void;
+    static __areExpressionsReady(): boolean;
+    static __addPendingInit(callback: () => void): void;
     __parentScope?: Scope;
     __loopContext: Record<string, unknown>;
     protected __baseSubscriptions: Subscription[];
     __getScope(): Scope;
+    __subscribeToExpression(deps: PropertyChain[], scope: Scope, callback: () => void, subscriptions: Subscription[]): void;
+    __evaluateExpr(exprId: number, locals: Record<string, unknown>): unknown;
+    __applyPipesForController(value: unknown, pipes: {
+        name: string;
+        argExprIds: number[];
+    }[], locals: Record<string, unknown>): unknown;
     protected __processBindingsOnElement(el: Element, scope: Scope, subscriptions?: Subscription[]): void;
     private __getBindingsForLid;
     private __isBindingsMap;
@@ -35,7 +46,6 @@ export declare abstract class FluffBase extends HTMLElement {
         n: string;
         a: number[];
     }[], locals: Record<string, unknown>): unknown;
-    private __applyPipe;
     protected __getPipeFn(_name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
     protected __subscribeToExpressionInScope(deps: PropertyChain[] | undefined, scope: Scope, callback: () => void, subscriptions?: Subscription[]): void;
     private __subscribeToPropertyChain;

package/runtime/FluffBase.js

@@ -4,6 +4,23 @@ export class FluffBase extends HTMLElement {
     static __e = [];
     static __h = [];
     static __bindings = {};
+    static __expressionsReady = false;
+    static __pendingInitCallbacks = [];
+    static __setExpressionTable(expressions, handlers) {
+        FluffBase.__e = expressions;
+        FluffBase.__h = handlers;
+        FluffBase.__expressionsReady = true;
+        const pending = FluffBase.__pendingInitCallbacks.splice(0, FluffBase.__pendingInitCallbacks.length);
+        for (const callback of pending) {
+            callback();
+        }
+    }
+    static __areExpressionsReady() {
+        return FluffBase.__expressionsReady;
+    }
+    static __addPendingInit(callback) {
+        FluffBase.__pendingInitCallbacks.push(callback);
+    }
     __parentScope;
     __loopContext = {};
     __baseSubscriptions = [];
@@ -14,6 +31,34 @@ export class FluffBase extends HTMLElement {
             parent: this.__parentScope
         };
     }
+    __subscribeToExpression(deps, scope, callback, subscriptions) {
+        this.__subscribeToExpressionInScope(deps, scope, callback, subscriptions);
+    }
+    __evaluateExpr(exprId, locals) {
+        const fn = this.__getCompiledExprFn(exprId);
+        try {
+            return fn(this, locals);
+        }
+        catch {
+            return undefined;
+        }
+    }
+    __applyPipesForController(value, pipes, locals) {
+        let result = value;
+        if (result instanceof Property) {
+            result = result.getValue();
+        }
+        for (const pipe of pipes) {
+            const pipeFn = this.__getPipeFn(pipe.name);
+            if (!pipeFn) {
+                console.warn(`Pipe "${pipe.name}" not found`);
+                continue;
+            }
+            const args = pipe.argExprIds.map(id => this.__getCompiledExprFn(id)(this, locals));
+            result = pipeFn(result, ...args);
+        }
+        return result;
+    }
     __processBindingsOnElement(el, scope, subscriptions) {
         const lid = el.getAttribute('data-lid');
         if (!lid)
@@ -74,23 +119,7 @@ export class FluffBase extends HTMLElement {
         return fn;
     }
     __applyPipes(value, pipes, locals) {
-        let result = value;
-        if (result instanceof Property) {
-            result = result.getValue();
-        }
-        for (const pipe of pipes) {
-            result = this.__applyPipe(pipe.n, result, pipe.a, locals);
-        }
-        return result;
-    }
-    __applyPipe(name, value, argExprIds, locals) {
-        const pipeFn = this.__getPipeFn(name);
-        if (!pipeFn) {
-            console.warn(`Pipe "${name}" not found`);
-            return value;
-        }
-        const args = argExprIds.map(id => this.__getCompiledExprFn(id)(this, locals));
-        return pipeFn(value, ...args);
+        return this.__applyPipesForController(value, pipes.map(p => ({ name: p.n, argExprIds: p.a })), locals);
     }
     __getPipeFn(_name) {
         return undefined;
@@ -285,6 +314,10 @@ export class FluffBase extends HTMLElement {
         }
     }
     __applyEventBindingWithScope(el, binding, scope) {
+        const boundKey = `__fluff_event_${binding.n}`;
+        if (Reflect.has(el, boundKey))
+            return;
+        Reflect.set(el, boundKey, true);
         if (typeof binding.h !== 'number') {
             throw new Error(`Event binding for ${binding.n} is missing handlerId`);
         }

package/runtime/FluffElementImpl.d.ts

@@ -1,16 +1,16 @@
 import type { Subscription } from '../interfaces/Subscription.js';
 import { Property } from '../utils/Property.js';
-import { Publisher } from '../utils/Publisher.js';
 import { FluffBase } from './FluffBase.js';
-import type { MarkerManagerInterface } from './MarkerManagerInterface.js';
+import type { MarkerConfigEntries, MarkerManagerInterface } from './MarkerManagerInterface.js';
 import { type Scope } from './ScopeRegistry.js';
 export declare abstract class FluffElement extends FluffBase {
     protected __pipes: Record<string, (value: unknown, ...args: unknown[]) => unknown>;
     protected readonly _shadowRoot: ShadowRoot;
     private _subscriptions;
     private _initialized;
+    private _pendingInit;
     private _markerManager;
-    private _markerConfigJson;
+    private _markerConfigEntries;
     private _MarkerManagerClass;
     constructor();
     connectedCallback(): void;
@@ -19,32 +19,20 @@ export declare abstract class FluffElement extends FluffBase {
     __processBindingsOnElementPublic(el: Element, scope: Scope, subscriptions?: Subscription[]): void;
     protected abstract __render(): void;
     protected __setupBindings(): void;
-    protected __addSubscription(sub: Subscription): void;
     protected __pipe(name: string, value: unknown, ...args: unknown[]): unknown;
     protected __getPipeFn(name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
     protected __getShadowRoot(): ShadowRoot;
-    protected __setMarkerConfigs(configJson: string): void;
+    protected __createProp<T>(name: string, options: T | {
+        initialValue: T;
+        [key: string]: unknown;
+    }): Property<T>;
+    protected __defineClassHostBinding(name: string, className: string, privateName: string): void;
+    protected __setMarkerConfigs(entries: MarkerConfigEntries): void;
     protected __initializeMarkers(MarkerManagerClass: new (host: FluffElement, shadowRoot: ShadowRoot) => MarkerManagerInterface): void;
     private __initializeMarkersInternal;
-    protected __getElement(id: string): Element | null;
-    protected __setText(id: string, text: string): void;
-    protected __bindText(id: string, getter: () => string): void;
-    protected __setProperty(id: string, prop: string, value: unknown): void;
-    protected __addClass(id: string, className: string): void;
-    protected __removeClass(id: string, className: string): void;
-    protected __bindEvent(id: string, event: string, handler: (e: Event) => void): void;
-    protected __bindPropertyChange<T>(prop: Property<T>, callback: (val: T) => void): void;
-    protected __connectProperties<T>(source: Property<T>, target: Property<T>): void;
-    protected __connectOutput<T>(source: Publisher<T>, handler: (val: T) => void): void;
-    protected __bindOutput(id: string, outputName: string, handler: (val: Event) => void): void;
     protected __setChildProperty(el: Element, propName: string, value: unknown): void;
-    protected __bindToChild(id: string, propName: string, value: unknown): void;
-    protected __setChildPropertyDeferred(el: Element, propName: string, value: unknown): void;
-    protected __bindOutputOnElement(el: Element, outputName: string, handler: (val: Event) => void): void;
     protected __getReactivePropFromScope(propName: string, scope: Scope): Property<unknown> | undefined;
     protected __processBindings(): void;
     private __applyPendingProps;
-    private isHTMLElement;
     private isRecord;
-    private __getReactiveProp;
 }

package/runtime/FluffElementImpl.js

@@ -1,16 +1,16 @@
 import { getPipeTransform } from '../decorators/Pipe.js';
-import { DomUtils } from '../utils/DomUtils.js';
 import { Property } from '../utils/Property.js';
-import { Publisher } from '../utils/Publisher.js';
 import { FluffBase } from './FluffBase.js';
+import { MarkerManager } from './MarkerManager.js';
 import { getScope } from './ScopeRegistry.js';
 export class FluffElement extends FluffBase {
     __pipes = {};
     _shadowRoot;
     _subscriptions = [];
     _initialized = false;
+    _pendingInit = false;
     _markerManager = null;
-    _markerConfigJson = null;
+    _markerConfigEntries = null;
     _MarkerManagerClass = null;
     constructor() {
         super();
@@ -18,6 +18,16 @@ export class FluffElement extends FluffBase {
     }
     connectedCallback() {
         if (!this._initialized) {
+            if (!FluffBase.__areExpressionsReady()) {
+                if (!this._pendingInit) {
+                    this._pendingInit = true;
+                    FluffBase.__addPendingInit(() => {
+                        this._pendingInit = false;
+                        this.connectedCallback();
+                    });
+                }
+                return;
+            }
             const scopeId = this.getAttribute('data-fluff-scope-id');
             if (scopeId && !this.__parentScope) {
                 this.__parentScope = getScope(scopeId);
@@ -73,12 +83,10 @@ export class FluffElement extends FluffBase {
         this.__processBindingsOnElement(el, scope, subscriptions);
     }
     __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
         this.__processBindings();
         this.__initializeMarkersInternal();
     }
-    __addSubscription(sub) {
-        this._subscriptions.push(sub);
-    }
     __pipe(name, value, ...args) {
         const pipe = this.__pipes[name];
         if (!pipe) {
@@ -93,102 +101,47 @@ export class FluffElement extends FluffBase {
     __getShadowRoot() {
         return this._shadowRoot;
     }
-    __setMarkerConfigs(configJson) {
-        this._markerConfigJson = configJson;
+    __createProp(name, options) {
+        const prop = new Property(options);
+        Object.defineProperty(this, name, {
+            get() {
+                return prop.getValue();
+            },
+            set(v) {
+                prop.setValue(v);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return prop;
+    }
+    __defineClassHostBinding(name, className, privateName) {
+        Object.defineProperty(this, name, {
+            get: () => Boolean(Reflect.get(this, privateName)),
+            set: (v) => {
+                Reflect.set(this, privateName, v);
+                if (v) {
+                    this.classList.add(className);
+                }
+                else {
+                    this.classList.remove(className);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+    }
+    __setMarkerConfigs(entries) {
+        this._markerConfigEntries = entries;
     }
     __initializeMarkers(MarkerManagerClass) {
         this._MarkerManagerClass = MarkerManagerClass;
     }
     __initializeMarkersInternal() {
-        if (!this._markerConfigJson || !this._MarkerManagerClass)
+        if (!this._markerConfigEntries || !this._MarkerManagerClass)
             return;
         this._markerManager = new this._MarkerManagerClass(this, this._shadowRoot);
-        this._markerManager.initializeFromConfig(this._markerConfigJson);
-    }
-    __getElement(id) {
-        return this._shadowRoot.querySelector(`[data-lid="${id}"]`);
-    }
-    __setText(id, text) {
-        const el = this.__getElement(id);
-        if (el)
-            el.textContent = text;
-    }
-    __bindText(id, getter) {
-        const el = this.__getElement(id);
-        if (!el)
-            return;
-        const expr = el.getAttribute('data-text-bind') ?? '';
-        const propMatch = /this\.([a-zA-Z_][a-zA-Z0-9_]*)/.exec(expr);
-        const update = () => {
-            try {
-                el.textContent = getter();
-            }
-            catch {
-                el.textContent = '';
-            }
-        };
-        if (propMatch) {
-            const [, propName] = propMatch;
-            const reactiveProp = this.__getReactiveProp(propName);
-            if (reactiveProp) {
-                this.__bindPropertyChange(reactiveProp, update);
-            }
-        }
-        update();
-    }
-    __setProperty(id, prop, value) {
-        const el = this.__getElement(id);
-        if (this.isHTMLElement(el)) {
-            if (prop in el) {
-                Reflect.set(el, prop, value);
-            }
-            else {
-                el.setAttribute(prop, String(value));
-            }
-        }
-    }
-    __addClass(id, className) {
-        const el = this.__getElement(id);
-        if (this.isHTMLElement(el))
-            el.classList.add(className);
-    }
-    __removeClass(id, className) {
-        const el = this.__getElement(id);
-        if (this.isHTMLElement(el))
-            el.classList.remove(className);
-    }
-    __bindEvent(id, event, handler) {
-        const el = this.__getElement(id);
-        if (el) {
-            el.addEventListener(event, handler);
-        }
-    }
-    __bindPropertyChange(prop, callback) {
-        const sub = prop.onChange.subscribe(callback);
-        this._subscriptions.push(sub);
-        const currentVal = prop.getValue();
-        if (currentVal !== null) {
-            callback(currentVal);
-        }
-    }
-    __connectProperties(source, target) {
-        const sub = source.onChange.subscribe((val) => {
-            target.setValue(val, true);
-        });
-        this._subscriptions.push(sub);
-        const currentVal = source.getValue();
-        if (currentVal !== null) {
-            target.setValue(currentVal, true);
-        }
-    }
-    __connectOutput(source, handler) {
-        const sub = source.subscribe(handler);
-        this._subscriptions.push(sub);
-    }
-    __bindOutput(id, outputName, handler) {
-        const el = this.__getElement(id);
-        if (el)
-            this.__bindOutputOnElement(el, outputName, handler);
+        this._markerManager.initializeFromConfig(this._markerConfigEntries);
     }
     __setChildProperty(el, propName, value) {
         if (el instanceof HTMLElement && el.hasAttribute('x-fluff-component')) {
@@ -202,47 +155,6 @@ export class FluffElement extends FluffBase {
         }
         super.__setChildProperty(el, propName, value);
     }
-    __bindToChild(id, propName, value) {
-        const el = this.__getElement(id);
-        if (!el)
-            return;
-        this.__setChildPropertyDeferred(el, propName, value);
-    }
-    __setChildPropertyDeferred(el, propName, value) {
-        if (Reflect.get(el, propName) !== undefined) {
-            this.__setChildProperty(el, propName, value);
-            return;
-        }
-        if (DomUtils.isCustomElement(el)) {
-            this.__whenDefined(el.tagName.toLowerCase(), () => {
-                this.__setChildProperty(el, propName, value);
-            });
-        }
-        else {
-            this.__setChildProperty(el, propName, value);
-        }
-    }
-    __bindOutputOnElement(el, outputName, handler) {
-        const maybeOutput = Reflect.get(el, outputName);
-        if (maybeOutput instanceof Publisher) {
-            this.__connectOutput(maybeOutput, handler);
-            return;
-        }
-        if (DomUtils.isCustomElement(el)) {
-            this.__whenDefined(el.tagName.toLowerCase(), () => {
-                const innerOutput = Reflect.get(el, outputName);
-                if (innerOutput instanceof Publisher) {
-                    this.__connectOutput(innerOutput, handler);
-                }
-                else {
-                    el.addEventListener(outputName, handler);
-                }
-            });
-        }
-        else {
-            el.addEventListener(outputName, handler);
-        }
-    }
     __getReactivePropFromScope(propName, scope) {
         const key = `__${propName}`;
         if (key in scope.host) {
@@ -286,20 +198,7 @@ export class FluffElement extends FluffBase {
         }
         Reflect.deleteProperty(this, '__pendingProps');
     }
-    isHTMLElement(el) {
-        return el !== null;
-    }
     isRecord(value) {
         return value !== null && typeof value === 'object' && !Array.isArray(value);
     }
-    __getReactiveProp(propName) {
-        const key = `__${propName}`;
-        if (key in this) {
-            const candidate = Reflect.get(this, key);
-            if (candidate instanceof Property) {
-                return candidate;
-            }
-        }
-        return undefined;
-    }
 }