From 06ee58439a6962c47a510b95891c25538c576836 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Tue, 25 Feb 2025 10:49:20 -0500 Subject: [PATCH] add suport for easy "H" div maker --- app.js | 12 +++++------ dist/core.d.ts | 18 ++++++++++------ dist/core.js | 10 +++------ src/gale.js | 58 ++++++++++++++++++++++++++++++++------------------ 4 files changed, 58 insertions(+), 40 deletions(-) diff --git a/app.js b/app.js index 50acb82..cbc718c 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,4 @@ -const {DOM, Tag} = Gale({ +const {DOM, Tag, H} = Gale({ Button: { padding: "20px", background: "orange", @@ -34,11 +34,11 @@ const {DOM, Tag} = Gale({ const UI =()=> { - return DOM.div.Window( - DOM.div.Ability({class:Tag("Ability", "Orange")}), - DOM.div.Ability(), - DOM.div.Ability(), - DOM.div.Ability.Orange(), + return H.Window( + H.Ability({class:Tag("Ability", "Orange")}), + H.Ability(), + H.Ability(), + H.Ability.Orange(), ) } diff --git a/dist/core.d.ts b/dist/core.d.ts index 6b43dfe..2494723 100644 --- a/dist/core.d.ts +++ b/dist/core.d.ts @@ -74,22 +74,28 @@ declare global namespace Gale { type KeyQuery = "@"; - type KeyPseudo = ":"; + type KeyState = ":"; type KeyChild = "."; type KeyGroup = "^"; - type UserStyles = Partial & {[key: `${KeyQuery|KeyPseudo|KeyChild|KeyGroup}${string}`]: UserStyles } + type UserStyles = Partial & {[key: `${KeyQuery|KeyState|KeyChild|KeyGroup}${string}`]: UserStyles } type UserSheet = Record type CollectKeys = {[Key in keyof Obj]: Obj[Key] extends object ? Key | CollectKeys : Key }[keyof Obj] type FilterKeys = Keys extends `${KeyChild|KeyGroup}${infer Rest}` ? Keys : never type CrossMultiply = A extends string ? B extends string ? `${A}${B}` : never : never type CrossMultiplyRecord = keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply>> : never }[keyof Rec] type Tier = (selector:string, obj:UserStyles, suffix:string)=>string; - type CreateSheet = (sheet:UserSheet&T, hash?:string)=>{Tag:(...args:CrossMultiplyRecord[])=>string, CSS:string, DOM:Elemental>} + type CreateSheet = (sheet:UserSheet&T, hash?:string)=>{ + Tag:(...args:CrossMultiplyRecord[])=>string, + CSS:string, + DOM:Elemental>, + H:Circular, Van.TagFunc> + } - type Elemental = {[K in keyof HTMLElementTagNameMap]: Van.TagFunc&Circular} - type Circular = { - [K in Keys]: Circular&Van.TagFunc; + type Elemental = {[K in keyof HTMLElementTagNameMap]: Van.TagFunc&Circular>} + + type Circular = { + [K in Keys]: Circular&Func }; } diff --git a/dist/core.js b/dist/core.js index 88b0959..ed5ed39 100644 --- a/dist/core.js +++ b/dist/core.js @@ -1,18 +1,14 @@ //van {let e,t,r,o,n,l,s,i,f,h,w,a,d,u,_,c,S,g,y,b,m,v,j,x,O;s=Object.getPrototypeOf,f={},h=s(i={isConnected:1}),w=s(s),a=(e,t,r,o)=>(e??(setTimeout(r,o),new Set)).add(t),d=(e,t,o)=>{let n=r;r=t;try{return e(o)}catch(e){return console.error(e),o}finally{r=n}},u=e=>e.filter(e=>e.t?.isConnected),_=e=>n=a(n,e,()=>{for(let e of n)e.o=u(e.o),e.l=u(e.l);n=l},1e3),c={get val(){return r?.i?.add(this),this.rawVal},get oldVal(){return r?.i?.add(this),this.h},set val(o){r?.u?.add(this),o!==this.rawVal&&(this.rawVal=o,this.o.length+this.l.length?(t?.add(this),e=a(e,this,x)):this.h=o)}},S=e=>({__proto__:c,rawVal:e,h:e,o:[],l:[]}),g=(e,t)=>{let r={i:new Set,u:new Set},n={f:e},l=o;o=[];let s=d(e,r,t);s=(s??document).nodeType?s:new Text(s);for(let e of r.i)r.u.has(e)||(_(e),e.o.push(n));for(let e of o)e.t=s;return o=l,n.t=s},y=(e,t=S(),r)=>{let n={i:new Set,u:new Set},l={f:e,s:t};l.t=r??o?.push(l)??i,t.val=d(e,n,t.rawVal);for(let e of n.i)n.u.has(e)||(_(e),e.l.push(l));return t},b=(e,...t)=>{for(let r of t.flat(1/0)){let t=s(r??0),o=t===c?g(()=>r.val):t===w?g(r):r;o!=l&&e.append(o)}return e},m=(e,t,...r)=>{let[{is:o,...n},...i]=s(r[0]??0)===h?r:[{},...r],a=e?document.createElementNS(e,t,{is:o}):document.createElement(t,{is:o});for(let[e,r]of Object.entries(n)){let o=t=>t?Object.getOwnPropertyDescriptor(t,e)??o(s(t)):l,n=t+","+e,i=f[n]??=o(s(a))?.set??0,h=e.startsWith("on")?(t,r)=>{let o=e.slice(2);a.removeEventListener(o,r),a.addEventListener(o,t)}:i?i.bind(a):a.setAttribute.bind(a,e),d=s(r??0);e.startsWith("on")||d===w&&(r=y(r),d=c),d===c?g(()=>(h(r.val,r.h),a)):h(r)}return b(a,i)},v=e=>({get:(t,r)=>m.bind(l,e,r)}),j=(e,t)=>t?t!==e&&e.replaceWith(t):e.remove(),x=()=>{let r=0,o=[...e].filter(e=>e.rawVal!==e.h);do{t=new Set;for(let e of new Set(o.flatMap(e=>e.l=u(e.l))))y(e.f,e.s,e.t),e.t=l}while(++r<100&&(o=[...t]).length);let n=[...e].filter(e=>e.rawVal!==e.h);e=l;for(let e of new Set(n.flatMap(e=>e.o=u(e.o))))j(e.t,g(e.f,e.t)),e.t=l;for(let e of n)e.h=e.rawVal},O={tags:new Proxy(e=>new Proxy(m,v(e)),v()),hydrate:(e,t)=>j(e,g(t,e)),add:b,state:S,derive:y},window.van=O;} + //vanx {let e,t,r,{fromEntries:o,entries:l,keys:n,hasOwn:f,getPrototypeOf:a}=Object,{get:i,set:y,deleteProperty:c,ownKeys:s}=Reflect,{state:m,derive:d,add:u}=van,b=1e3,w=Symbol(),A=Symbol(),S=Symbol(),_=Symbol(),g=Symbol(),p=Symbol(),P=e=>(e[A]=1,e),v=e=>e instanceof Object&&!(e instanceof Function)&&!e[p],h=e=>{if(e?.[A]){let t=m();return d(()=>{let r=e();v(t.rawVal)&&v(r)?B(t.rawVal,r):t.val=x(r)}),t}return m(x(e))},F=e=>{let t=Array.isArray(e)?[]:{__proto__:a(e)};for(let[r,o]of l(e))t[r]=h(o);return t[S]=[],t[_]=m(1),t},O={get:(e,t,r)=>t===w?e:f(e,t)?Array.isArray(e)&&"length"===t?(e[_].val,e.length):e[t].val:i(e,t,r),set:(e,o,l,n)=>f(e,o)?Array.isArray(e)&&"length"===o?(l!==e.length&&++e[_].val,e.length=l,1):(e[o].val=x(l),1):o in e?y(e,o,l,n):y(e,o,h(l))&&(++e[_].val,C(e).forEach(E.bind(t,n,o,e[o],r)),1),deleteProperty:(e,t)=>(c(e,t)&&R(e,t),++e[_].val),ownKeys:e=>(e[_].val,s(e))},x=e=>!v(e)||e[w]?e:new Proxy(F(e),O),D=e=>(e[p]=1,e),j=e=>e[w],K=a(m()),N=e=>new Proxy(e,{get:(e,t,r)=>a(e[t]??0)===K?{val:k(e[t].rawVal)}:i(e,t,r)}),k=e=>e?.[w]?new Proxy(N(e[w]),O):e,C=e=>e[S]=e[S].filter(e=>e.t.isConnected),E=(e,t,r,o,{t:l,f:f})=>{let a=Array.isArray(e),i=a?Number(t):t;u(l,()=>l[g][t]=f(r,()=>delete e[t],i)),a&&!o&&i!==e.length-1&&l.insertBefore(l.lastChild,l[g][n(e).find(e=>Number(e)>i)])},R=(e,t)=>{for(let r of C(e)){let e=r.t[g];e[t]?.remove(),delete e[t]}},T=r=>(e??(setTimeout(()=>(e.forEach(C),e=t),b),e=new Set)).add(r),q=(e,t,r)=>{let o={t:e instanceof Function?e():e,f:r},n=t[w];o.t[g]={},n[S].push(o),T(n);for(let[e,r]of l(n))E(t,e,r,1,o);return o.t},z=(e,t)=>{for(let[r,o]of l(t)){let t=e[r];v(t)&&v(o)?z(t,o):e[r]=o}for(let r in e)f(t,r)||delete e[r];let r=n(t),o=Array.isArray(e);if(o||n(e).some((e,t)=>e!==r[t])){let l=e[w];if(o)e.length=t.length;else{++l[_].val;let e={...l};for(let e of r)delete l[e];for(let t of r)l[t]=e[t]}for(let{t:e}of C(l)){let{firstChild:t,[g]:o}=e;for(let l of r)t===o[l]?t=t.nextSibling:e.insertBefore(o[l],t)}}return e},B=(e,n)=>{r=1;try{return z(e,n instanceof Function?Array.isArray(e)?n(e.filter(e=>1)):o(n(l(e))):n)}finally{r=t}},G=e=>Array.isArray(e)?e.filter(e=>1).map(G):v(e)?o(l(e).map(([e,t])=>[e,G(t)])):e;window.vanX={calc:P,reactive:x,noreactive:D,stateFields:j,raw:k,list:q,replace:B,compact:G}} //Store -vanX.Store =(obj, key)=> { - const recall = localStorage.getItem(key); - const store = vanX.reactive(recall ? JSON.parse(recall) : obj); - van.derive(() => localStorage.setItem(key, JSON.stringify(vanX.compact(store)))); - return store; -} +vanX.Store=(e,t)=>{const a=localStorage.getItem(t),r=vanX.reactive(a?JSON.parse(a):e);return van.derive((()=>localStorage.setItem(t,JSON.stringify(vanX.compact(r))))),r}; //gale -globalThis.Gale=(e,t="")=>{ const n=(e,t,s)=>`${e}{${Object.keys(t).map((e=>{const r=t[e];switch(e[0]){case"@":return n(`@media(max-width:${e.substring(1)})`,r,s);case":":return n(`&${e}`,r,s);case".":return n(`${e}${s}`,r,s);case"^":return n(`&:hover .${e.substring(1)}${s}`,r,s)}return`${e.replace(/([a-z])([A-Z])/g,"$1-$2")}: ${r};`})).join("\n")}}`,s=(e,t)=>{const n=t.lastIndexOf(e)+e.length;return n?t.substring(n):t},r=t?"_"+t:"",a=Object.keys(e).map((t=>n("."+t+r,e[t],r))).join("\n");return globalThis.document?.head.insertAdjacentHTML("beforeend",``),{Tag:(...e)=>e.map((e=>s("^",s(".",e)))).join(r+" ")+r,CSS:a,DOM:new Proxy({},{get(e,t){const n=t,s=[],a=new Proxy(((...e)=>{const t=van.tags[n](...e);return t.className=s.join(r+" ")+r+" "+t.className,t}),{get:(e,t)=>(s.push(t.substring(t.lastIndexOf(".")+1)),a)});return a}})}}; +globalThis.Gale=(e,t="")=>{const n=(e,t,s)=>`${e}{${Object.keys(t).map((e=>{const r=t[e];switch(e[0]){case"@":return n(`@media(max-width:${e.substring(1)})`,r,s);case":":return n(`&${e}`,r,s);case".":return n(`${e}${s}`,r,s);case"^":return n(`&:hover .${e.substring(1)}${s}`,r,s)}return`${e.replace(/([a-z])([A-Z])/g,"$1-$2")}: ${r};`})).join("\n")}}`,s=(e,t)=>{const n=t.lastIndexOf(e)+e.length;return n?t.substring(n):t},r=e=>{const t=van.tags[e];let n=[];const s=new Proxy(((...e)=>{const s=t(...e);return s.className=n.join(a+" ")+a+" "+s.className,n=[],s}),{get:(e,t)=>(n.push(t.substring(t.lastIndexOf(".")+1)),s)});return s},a=t?"_"+t:"",c=Object.keys(e).map((t=>n("."+t+a,e[t],a))).join("\n");return globalThis.document?.head.insertAdjacentHTML("beforeend",``),{Tag:(...e)=>e.map((e=>s("^",s(".",e)))).join(a+" ")+a,CSS:c,DOM:new Proxy({},{get:(e,t)=>r(t)}),H:new Proxy({},{get:(e,t)=>r("div")[t]})}}; //boot ((t="/")=>{fetch(t+"deno.json").then((t=>t.json())).then((e=>{const n=(t,e)=>{let n=document.createElement("script");n.type=t,n.textContent=e,document.head.appendChild(n)},o=e.imports;for(let e in o){const n=o[e];n.startsWith("./")&&(o[e]=t+n.substring(2))}n("importmap",JSON.stringify({imports:o})),n("module",'import "entry"; ')}))})(); \ No newline at end of file diff --git a/src/gale.js b/src/gale.js index ebc2b55..3bf81a1 100644 --- a/src/gale.js +++ b/src/gale.js @@ -2,7 +2,7 @@ globalThis.Gale = (sheet, hash="")=> { const KeyQuery = "@"; - const KeyPseudo = ":"; + const KeyState = ":"; const KeyChild = "."; const KeyGroup = "^"; @@ -16,7 +16,7 @@ globalThis.Gale = (sheet, hash="")=> { case KeyQuery : return Tier(`@media(max-width:${key.substring(KeyQuery.length)})`, value, suffix); - case KeyPseudo : + case KeyState : return Tier(`&${key}`, value, suffix); case KeyChild : return Tier(`${key}${suffix}`, value, suffix); @@ -35,6 +35,29 @@ globalThis.Gale = (sheet, hash="")=> return ind ? str.substring(ind) : str; } + const collect =(tagName)=> + { + const pending = van.tags[tagName]; + let mentioned = []; + const collector = new Proxy( + (...args)=> + { + const element = pending(...args); + element.className = mentioned.join(id+" ")+id + " " + element.className; + mentioned = []; + return element; + }, + { + get(_, prop) + { + mentioned.push(prop.substring(prop.lastIndexOf(".")+1)); + return collector; + } + } + ); + return collector; + } + const id = hash ? "_"+hash : ""; const css = Object.keys(sheet).map(key=>Tier("."+key+id, sheet[key], id)).join(`\n`); globalThis.document?.head.insertAdjacentHTML("beforeend", ``); @@ -46,26 +69,19 @@ globalThis.Gale = (sheet, hash="")=> CSS: css, DOM: new Proxy( {}, - {get(_, prop) + { + get(_, prop) { - const pending = prop; - const mentioned = []; - const collector = new Proxy( - (...args)=> - { - const element = van.tags[pending](...args); - element.className = mentioned.join(id+" ")+id + " " + element.className; - return element; - }, - { - get(_, prop) - { - mentioned.push(prop.substring(prop.lastIndexOf(".")+1)); - return collector; - } - } - ); - return collector; + return collect(prop) + } + } + ), + H: new Proxy( + {}, + { + get(_, prop) + { + return collect("div")[prop] } } )