From 511f37c167b6e834a38d215017b076c4203421be Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Tue, 25 Feb 2025 08:43:18 -0500 Subject: [PATCH] tweak gale api --- app.js | 4 +-- dist/core.d.ts | 2 +- dist/core.js | 2 +- index.html | 1 + src/gale.js | 69 +++++++++++++++++++++++++------------------------- 5 files changed, 40 insertions(+), 38 deletions(-) diff --git a/app.js b/app.js index aa230f7..ef9bf88 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,4 @@ -const {DOM} = Gale({ +const {DOM, Tag} = Gale({ Button: { padding: "20px", background: "orange", @@ -35,7 +35,7 @@ const {DOM} = Gale({ const UI =()=> { return DOM.div.Window( - DOM.div.Ability(), + DOM.div.Ability({class:Tag("Ability", "Orange")}), DOM.div.Ability(), DOM.div.Ability(), DOM.div.Ability.Orange(), diff --git a/dist/core.d.ts b/dist/core.d.ts index 4dbfb03..856a79b 100644 --- a/dist/core.d.ts +++ b/dist/core.d.ts @@ -84,7 +84,7 @@ declare global 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)=>string; - type CreateSheet = (sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord[])=>string)&{CSS:string, DOM:Elemental>} + type CreateSheet = (sheet:UserSheet&T)=>{Tag:(...args:CrossMultiplyRecord[])=>string, CSS:string, DOM:Elemental>} type Elemental = {[K in keyof HTMLElementTagNameMap]: Van.TagFunc&Circular} diff --git a/dist/core.js b/dist/core.js index 1fe7cb5..45995f0 100644 --- a/dist/core.js +++ b/dist/core.js @@ -10,6 +10,6 @@ vanX.Store =(obj, key)=> { return store; } //gale -const KeyQuery="@",KeyPseudo=":",KeyChild=".",KeyGroup="^",Tier=(e,s)=>`${e}{${Object.keys(s).map((e=>{const t=s[e];switch(e[0]){case"@":return Tier(`@media(max-width:${e.substring(1)})`,t);case":":return Tier(`&${e}`,t);case".":return Tier(`${e}`,t);case"^":return Tier(`&:hover .${e.substring(1)}`,t)}return`${e.replace(/([a-z])([A-Z])/g,"$1-$2")}: ${t};`})).join("\n")}}`;let i=0;globalThis.Gale=e=>{const s=i?"_"+i:"";i++;const t=Object.keys(e).map((s=>Tier("."+s,e[s]))).join("\n");globalThis.document?.head.insertAdjacentHTML("beforeend",``);const n=(...e)=>{const t=(e,s)=>{const t=s.lastIndexOf(e)+e.length;return t?s.substring(t):s};return e.map((e=>t("^",t(".",e)))).join(s+" ")+s};return n.CSS=t,n.DOM=new Proxy({},{get(e,s){const t=s,n=[],r=new Proxy(((...e)=>{const s=van.tags[t](...e);return s.className&&n.push(s.className),s.className=n.join(" "),s}),{get:(e,s)=>(n.push(s.substring(s.lastIndexOf(".")+1)),r)});return r}}),n}; + //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/index.html b/index.html index 9b3f298..15b630e 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + \ No newline at end of file diff --git a/src/gale.js b/src/gale.js index 1f14517..b61221c 100644 --- a/src/gale.js +++ b/src/gale.js @@ -25,7 +25,7 @@ const Tier=(selector, obj)=> return `${selector}{${styles.join("\n")}}`; } -let i = 0; +let i = 1; /** @type {Gale.CreateSheet} */ globalThis.Gale =sheet=> { @@ -33,42 +33,43 @@ globalThis.Gale =sheet=> i++; const css = Object.keys(sheet).map(key=>Tier("."+key, sheet[key])).join(`\n`); globalThis.document?.head.insertAdjacentHTML("beforeend", ``); - const classes =(...args)=>{ - /** @type {(needle:string, str:string)=>string} */ - const extractLast =(needle, str)=>{ - const ind = str.lastIndexOf(needle)+needle.length; - return ind ? str.substring(ind) : str; - } - return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id; + + /** @type {(needle:string, str:string)=>string} */ + const extractLast =(needle, str)=>{ + const ind = str.lastIndexOf(needle)+needle.length; + return ind ? str.substring(ind) : str; } - classes.CSS = css; - classes.DOM = new Proxy( - {}, - {get(_, prop) - { - const pending = prop; - const mentioned = []; - const collector = new Proxy( - (...args)=> - { - const element = van.tags[pending](...args); - element.className && mentioned.push(element.className); - element.className = mentioned.join(" "); - return element; - }, - { - get(_, prop) + return { + Tag(...args){ + return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id; + }, + CSS: css, + DOM: new Proxy( + {}, + {get(_, prop) + { + const pending = prop; + const mentioned = []; + const collector = new Proxy( + (...args)=> { - mentioned.push(prop.substring(prop.lastIndexOf(".")+1)); - return collector; + const element = van.tags[pending](...args); + element.className && mentioned.push(element.className); + element.className = mentioned.join(" "); + return element; + }, + { + get(_, prop) + { + mentioned.push(prop.substring(prop.lastIndexOf(".")+1)); + return collector; + } } - } - ); - return collector; + ); + return collector; + } } - } - ); - - return classes; + ) + } } \ No newline at end of file