@lucidclient/elements/dist/index.js

A lightweight, reactive UI library that bridges HTML and JavaScript through attributes, powered by SolidJS. Adds reactive state and dynamic behaviors to markup while maintaining simplicity.

import{a as S,b as a,d as N,e as B,f as T,g as D,h as V,i as g,j as w,k as W,l as F,m as _,o as u}from"./chunk-OSNUUW4P.js";import{createRoot as _e}from"solid-js";import{createStore as ze}from"solid-js/store";import{createEffect as ue}from"solid-js";import{produce as de}from"solid-js/store";var be=(e,t,r)=>{let s=t[0].state;for(let[i,o]of Object.entries(s)){if(t[0].stateRegisteredEffects.has(i))continue;let n=T(o[0]());n==="object"||n==="array"||(Se(e,i,o,t[0].key,r?.bindState),t[1](de(f=>{f.stateRegisteredEffects.add(i)})))}},Se=(e,t,r,s,i)=>{ue(()=>{E.updateAttributes(e,{key:t,value:r[0]()},s,i)},void 0)},z=be;import{createSignal as ge}from"solid-js";import{produce as ye}from"solid-js/store";var he=(e,t)=>{let r=t?.state;r&&e[1](ye(s=>{for(let[i,o]of r.entries())s.state[i]===void 0&&(s.state[i]=ge(o))}))},G=he;import{batch as xe}from"solid-js";var J=(e,t,r,s,i,o)=>{let n=e.getAttribute(t);if(!n)return;let f;if(o.has(n))f=o.get(n);else{let m;i==="object"||i==="array"?m=B(s.value,n):m=s.value,f=D(m),o.set(n,f)}e.setAttribute(r,f)},ve=(e,t,r)=>{if(!r?.bindState)return;let s=`${S.defaults.attributes.denote.state}${t.key}`,i=w.scopeValue(r.scope,s),o=r.bindState.get(t.key);if(!o)return;let n=g(a.options.attributes.selectors.bind),f=T(t.value),m=new Map;for(let d of o){let l=`${n}${d}`,b=`[${l}^="${i}"]`;e.matches(b)&&J(e,l,d,t,f,m);for(let h of e.querySelectorAll(b))J(h,l,d,t,f,m)}},K=ve;import{createEffect as Ae}from"solid-js";var Ee=(e,t)=>{if(t?.bindActions)for(let[r,s]of t.bindActions){let i=`${S.defaults.attributes.denote.action}${r}`,o=w.scopeValue(t.scope,i);if(e[0].actions[r])for(let n of s.values()){let f=`[${g(a.options.attributes.selectors.bind)}${n}="${o}"]`,m=document.querySelectorAll(f);Ae(async()=>{try{let d=e[0].actions[r]?.(),l=await Promise.resolve(d),b=D(l);for(let h of m)h.setAttribute(n,b)}catch(d){console.error(d)}})}}},Q=Ee;var Me={updateStateAttributes:K,registerActionEffects:Q},$=Me;var U=(e,t,r,s,i,o,n)=>{let f=t.slice(i.length),m=e.getAttribute(t);if(m===r)return;let d=V(m);o&&(n||s.state[f]?.[1](d),$.updateStateAttributes(e,{key:f,value:d},o))},De=(e,t,r)=>{let s=g(a.options.attributes.selectors.state),i=Array.from(r?.state.keys()??[]).map(n=>`${s}${n}`);for(let n of i)U(e,n,null,t[0],s,r,!0);let o=new MutationObserver(n=>{xe(()=>{for(let f of n)f.type==="attributes"&&f.target instanceof Element&&f.attributeName&&U(f.target,f.attributeName,f.oldValue,t[0],s,r,!1)})});return o.observe(e,{attributes:!0,attributeFilter:i,attributeOldValue:!0}),o},X=De;var we=(e,t,r,s)=>{let o=g(a.options.attributes.selectors.state)+t.key,n=D(t.value);if(e.hasAttribute(o))e.getAttribute(o)!==n&&e.setAttribute(o,n);else{let f=s?.get(t.key);if(!f)return;let m=g(a.options.attributes.selectors.bind);for(let d of f){let l=document.querySelectorAll(`[${m}${d}="${r}${a.options.attributes.seperators.scope}${S.defaults.attributes.denote.state}${t.key}"]`);for(let b of l)b.getAttribute(d)!==n&&b.setAttribute(d,n)}}},Y=we;var $e={watchState:z,createState:G,stateObserver:X,updateAttributes:Y},E=$e;var ke=(e,t)=>{let r=g(a.options.attributes.selectors.ref),s=t[0].key,i=e.querySelectorAll(`[${r}]`),o=new Map;for(let n of i){let f=n.getAttribute(r);if(!f||s&&!w.valueIsScoped(s,f))continue;let m=s?f.split(":")[1]:f;if(m)if(m.endsWith("[]")){let d=m.slice(0,-2);o.has(d)||o.set(d,[]),o.get(d).push(n)}else o.has(m)||o.set(m,n)}t[1]("refs",o)},Z=ke;var He={createRefs:Z},R=He;var je=e=>({get state(){return e[0].state},get actions(){return e[0].actions},get refs(){return e[0].refs}}),I=je;import{createEffect as ee}from"solid-js";var Le=(e,t)=>{let r=new Map;if(t?.effects)for(let s of t.effects){if(!e[0].effects.manual?.[s])continue;let i=`manual:${s}`;e[0].effectsRegistered.has(i)||(r.set(i,!1),ee(()=>{try{let o=r.get(i);e[0].effects.manual[s]?.({isInitial:o??!1}),o||r.set(i,!0)}catch(o){console.error(o)}}),e[0].effectsRegistered.add(i))}if(e[0].effects.global)for(let[s,i]of Object.entries(e[0].effects.global)){let o=`global:${s}`;e[0].effectsRegistered.has(o)||(r.set(o,!1),ee(()=>{try{let n=r.get(o);i({isInitial:n??!1}),n||r.set(o,!0)}catch(n){console.error(n)}}),e[0].effectsRegistered.add(o))}},te=Le;var Te={registerEffects:te},O=Te;import{createEffect as Ve}from"solid-js";var Re=(e,t)=>{if(!t?.loops)return;let r=g(a.options.attributes.selectors.loop);for(let s of t.loops){let i=F(s,e);if(!i)continue;let o=`[${r}="${s}"]`,n=document.querySelectorAll(o);if(!n.length)return;Ve(async()=>{let f=await _(i);if(!Array.isArray(f)){u.warn(`"${r}" directives only support arrays, recieved "${typeof f}" for "${s}".`);return}let m=f.length||0;for(let d of n)k.renderLoop(d,{loopValue:s,loopLength:m})})}},re=Re;var Ie=(e=document.body,t)=>{let r=new Map,s=new Map,i=[],o={store:g(a.options.attributes.selectors.store),state:g(a.options.attributes.selectors.state),bind:g(a.options.attributes.selectors.bind),handler:g(a.options.attributes.selectors.handler),effect:g(a.options.attributes.selectors.effect),loop:g(a.options.attributes.selectors.loop)},n=l=>(s.has(l)||s.set(l,{scope:l,state:new Map,bindState:new Map,bindActions:new Map,effects:new Set,loops:new Set}),s.get(l)),f=(l,b,h)=>{l.state.has(b)||l.state.set(b,h!==void 0?V(h):void 0)},m=e.querySelectorAll(`[${o.store}]`);if(t===void 0){let l=e.getAttribute(o.store);if(l){i.push([e,l]);let b=n(l);for(let h of e.attributes)if(h.name.startsWith(o.state)){let y=h.name.slice(o.state.length);f(b,y,h.value)}}}for(let l of m){let b=l.getAttribute(o.store);if(!b)continue;i.push([l,b]);let h=n(b);for(let y of l.attributes)if(y.name.startsWith(o.state)){let A=y.name.slice(o.state.length);f(h,A,y.value)}}let d=N(e,[o.bind,o.handler,o.effect,o.loop],t);for(let l of d){let{name:b,value:h}=l,y=W(h);if(y===null)continue;let A=n(y.scope);if(y&&y.type==="state"&&f(A,y.key),b.startsWith(o.bind)){let x=b.slice(o.bind.length);if(!y)continue;y.type==="state"?(A.bindState.has(y.key)||A.bindState.set(y.key,new Set),A.bindState.get(y.key)?.add(x)):y.type==="action"&&(A.bindActions.has(y.key)||A.bindActions.set(y.key,new Set),A.bindActions.get(y.key)?.add(x))}else if(b.startsWith(o.handler)){let x=b.slice(o.handler.length).split(a.options.attributes.seperators.handler);if(x.length>=1){let j=x[0],P=x.length>=2?x.slice(1).join(a.options.attributes.seperators.handler):S.defaults.specifier;if(!j)continue;r.has(j)||r.set(j,new Map);let L=r.get(j);L&&(L.has(P)||L.set(P,new Set),L.get(P)?.add(h))}}else b===o.effect?A.effects.add(y.key):b===o.loop&&A.loops.add(h)}return{elements:i,handlerDirectives:r,storeDirectives:s}},H=Ie;import{createRoot as qe}from"solid-js";var Oe=(e,t)=>{let r=[];return e.forEach((s,i)=>{let o=a.handlers.get(i);if(o){let n=o.handler.initialise(s,t);t.partial?r.push(n):(o.dispose&&o.dispose(),o.dispose=n)}}),r},oe=Oe;var Ce=()=>{for(let[e,t]of a.handlers)t.dispose&&t.dispose()},se=Ce;var Pe={initialiseHandlers:oe,destroyHandlers:se},M=Pe;var Ne=(e,t)=>{let r=()=>{let s=a.syncedElements.get(e);s&&(s(),a.syncedElements.delete(e));let i=H(e,t),o=[];for(let[f,m]of i.storeDirectives){let d=i.elements.find(l=>l[1]===f);if(d&&!a.stores.has(f)){v.initialiseStore(d[0],f,m),o.push(()=>{let l=a.stores.get(f);l&&v.destroyStore(f,l)});continue}qe(l=>{let b=v.syncStore(f,m);o.push(()=>{l(),b()})})}let n=M.initialiseHandlers(i.handlerDirectives,{partial:!0,target:e});a.syncedElements.set(e,()=>{for(let f of o)f();for(let f of n)f()}),u.debug("Elements synced.")};typeof requestIdleCallback<"u"?requestIdleCallback(r):setTimeout(r,0)},C=Ne;var Be=(e,t)=>{if(!e.getElementsByTagName("template").length)return e.outerHTML.replaceAll(S.defaults.attributes.denote.index,String(t)).replaceAll(S.defaults.attributes.denote.index1,String(t+1));let r=document.createElement("div");r.appendChild(e.cloneNode(!0));let s=r.getElementsByTagName("template"),i=new Map;for(let n=0;n<s.length;n++){let f=s[n];i.set(n,f?.innerHTML),f.innerHTML=`<!--template-${n}-->`}let o=r.innerHTML.replaceAll(S.defaults.attributes.denote.index,String(t)).replaceAll(S.defaults.attributes.denote.index1,String(t+1));return i.forEach((n,f)=>{o=o.replace(`<!--template-${f}-->`,n)}),o},We=(e,t)=>{let r=e.querySelector("template");if(!r){u.warn(`No template found in the loop with value "${t.loopValue}". A template element is required.`);return}let s=r.content.cloneNode(!0);if(s.children.length===0||s.children.length>1){u.warn(`The template for the loop with value "${t.loopValue}" must only have one child, found "${s.children.length}".`);return}let i="";for(let o=0;o<t.loopLength;o++)i+=Be(s.children[0],o);requestAnimationFrame(()=>{e.innerHTML=r.outerHTML+i,C(e,!0)})},ie=We;var Fe={registerLoops:re,renderLoop:ie},k=Fe;var Ge=(e,t,r)=>{_e(s=>{let i=ze({key:t,initialised:!1,dispose:s,stateRegisteredEffects:new Set,effectsRegistered:new Set,state:{},actions:{},effects:{global:{},manual:{}},refs:new Map});if(a.storeModules.has(t)){let n=a.storeModules.get(t)(I(i));u.debug(`Store module found for key "${t}"`),n.state&&i[1]("state",n.state),n.actions&&i[1]("actions",n.actions),n.effects&&i[1]("effects",n.effects),n.cleanup&&i[1]("cleanup",()=>n.cleanup)}i[1]("stateObserver",E.stateObserver(e,i,r)),E.createState(i,r),E.watchState(e,i,r),R.createRefs(e,i),$.registerActionEffects(i,r),O.registerEffects(i,r),k.registerLoops(i,r),a.stores.set(t,i),i[1]("initialised",!0),i[0].actions.init?.(),u.debug(`Store initialised for element "${e.id||e.tagName}" with key "${t}"`)})},ne=Ge;var Je=()=>{let e=new MutationObserver(t=>{for(let r of t)for(let s of r.removedNodes)s instanceof HTMLElement&&Ke(s)});return e.observe(document.body,{childList:!0,subtree:!0}),e},Ke=e=>{let t=e.getAttribute(g(a.options.attributes.selectors.store));if(!t)return;let r=a.stores.get(t);r&&v.destroyStore(t,r)},ae=Je;var Qe=(e,t)=>{t[0].stateObserver?.disconnect(),t[0].dispose(),t[0].cleanup?.(),a.stores.delete(e),u.debug(`The store with the key "${e}" has been destroyed.`)},fe=Qe;var Ue=(e,t)=>{let r=a.stores.get(e);if(!r)return()=>{};let s=document.querySelector(`[${g(a.options.attributes.selectors.store)}="${e}"]`);if(!s)return()=>{};let i=E.stateObserver(s,r,t);return E.createState(r,t),E.watchState(s,r,t),R.createRefs(s,r),$.registerActionEffects(r,t),O.registerEffects(r,t),k.registerLoops(r,t),u.debug(`Store synced for element "${s.id||s.tagName}" with key "${e}"`),()=>{i.disconnect()}},le=Ue;var Xe={initialiseStore:ne,registerStoreObserver:ae,getStoreInterface:I,destroyStore:fe,syncStore:le},v=Xe;var Ye=e=>{if(a.handlers.has(e.namespace)){u.warn(`Handler for namespace "${e.namespace}" already registered`);return}a.handlers.set(e.namespace,{handler:e}),u.debug(`Handler registered for namespace "${e.namespace}"`)},q=Ye;var Ze=e=>{if(a.started){u.warn("The library has already been started. Please don't call start() more than once.");return}if(a.options={debug:e?.debug??S.defaults.debug,attributes:{prefix:e?.attributes?.prefix??S.defaults.attributes.prefix,selectors:{store:e?.attributes?.selectors?.store??S.defaults.attributes.selectors.store,state:e?.attributes?.selectors?.state??S.defaults.attributes.selectors.state,bind:e?.attributes?.selectors?.bind??S.defaults.attributes.selectors.bind,effect:e?.attributes?.selectors?.effect??S.defaults.attributes.selectors.effect,handler:e?.attributes?.selectors?.handler??S.defaults.attributes.selectors.handler,ref:e?.attributes?.selectors?.ref??S.defaults.attributes.selectors.ref,loop:e?.attributes?.selectors?.loop??S.defaults.attributes.selectors.loop},seperators:{scope:e?.attributes?.seperators?.scope??S.defaults.attributes.seperators.scope,handler:e?.attributes?.seperators?.handler??S.defaults.attributes.seperators.handler}}},e?.handlers)for(let r of e.handlers)q(r);let t=H();for(let r of t.elements){if(!r[1]){u.warn("Please ensure all 'data-store' attributes have a value. This is needed to scope state, binds and handler actions.");continue}v.initialiseStore(r[0],r[1],t.storeDirectives.get(r[1]))}M.initialiseHandlers(t.handlerDirectives,{partial:!1}),v.registerStoreObserver(),a.started=!0,u.debug("Library started.")},ce=Ze;var et=()=>{M.destroyHandlers(),a.stores.forEach((e,t)=>v.destroyStore(t,e));for(let e of a.syncedElements)e[1]()},pe=et;var tt=e=>{let t=H();M.destroyHandlers();for(let r of t.elements){if(!r[1]){u.warn("Please ensure all 'data-store' attributes have a value. This is needed to scope state, binds and handler actions.");continue}if(e&&e!==r[1])continue;let s=a.stores.get(r[1]);s&&v.destroyStore(r[1],s),v.initialiseStore(r[0],r[1],t.storeDirectives.get(r[1]))}M.initialiseHandlers(t.handlerDirectives,{partial:!1});for(let r of a.syncedElements)r[1]();u.debug("Library refreshed.")},me=tt;var rt=(e,t)=>{if(a.storeModules.has(e)){u.warn(`The store "${e}" already has a module registered for it.`);return}a.storeModules.set(e,t)},ot=rt;import{createSignal as gs,createEffect as ys,createMemo as hs}from"solid-js";var ps={start:ce,destroy:pe,refresh:me,sync:C};export{ys as createEffect,hs as createMemo,gs as createSignal,ps as default,q as registerHandler,ot as storeModule};
//# sourceMappingURL=index.js.map