SethTrowbridge/gale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak gale api

Browse Source
This commit is contained in:
Seth Trowbridge 2025-02-25 08:43:18 -05:00
parent cf6542c40a
commit 511f37c167
5 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.js
View File

@ -1,4 +1,4 @@
const {DOM} = Gale({ const {DOM, Tag} = Gale({
Button: { Button: {
padding: "20px", padding: "20px",
background: "orange", background: "orange",
@ -35,7 +35,7 @@ const {DOM} = Gale({
const UI =()=> const UI =()=>
{ {
return DOM.div.Window( return DOM.div.Window(
DOM.div.Ability(), DOM.div.Ability({class:Tag("Ability", "Orange")}),
DOM.div.Ability(), DOM.div.Ability(),
DOM.div.Ability(), DOM.div.Ability(),
DOM.div.Ability.Orange(), DOM.div.Ability.Orange(),

2
dist/core.d.ts vendored
View File

@ -84,7 +84,7 @@ declare global
type CrossMultiply<A, B> = A extends string ? B extends string ? `${A}${B}` : never : never type CrossMultiply<A, B> = A extends string ? B extends string ? `${A}${B}` : never : never
type CrossMultiplyRecord<Rec> = keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply<K, FilterKeys<CollectKeys<Rec[K]>>> : never }[keyof Rec] type CrossMultiplyRecord<Rec> = keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply<K, FilterKeys<CollectKeys<Rec[K]>>> : never }[keyof Rec]
type Tier = (selector:string, obj:UserStyles)=>string; type Tier = (selector:string, obj:UserStyles)=>string;
type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{CSS:string, DOM:Elemental<CrossMultiplyRecord<T>>} type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=>{Tag:(...args:CrossMultiplyRecord<T>[])=>string, CSS:string, DOM:Elemental<CrossMultiplyRecord<T>>}
type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Van.TagFunc<HTMLElementTagNameMap[K]>&Circular<T, K>} type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Van.TagFunc<HTMLElementTagNameMap[K]>&Circular<T, K>}

2
dist/core.js vendored
View File

@ -10,6 +10,6 @@ vanX.Store =(obj, key)=> {
return store; return store;
} }
//gale //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",`<style data-sheet="${i}">${t}</style>`);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 //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"; ')}))})(); ((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"; ')}))})();

1
index.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- css reset --><style>*{margin:0;padding:0;box-sizing:border-box;}html, body{height:100%;width:100%;font-family:Arial, sans-serif;line-height:1.6;}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}img, video{max-width:100%;height:auto;}a{text-decoration:none;color:inherit;}ul, ol{list-style:none;}button, input, textarea{font-family:inherit;font-size:inherit;line-height:inherit;border:none;background:none;padding:0;margin:0;outline:none;}table{border-collapse:collapse;width:100%;}</style> <!-- css reset --><style>*{margin:0;padding:0;box-sizing:border-box;}html, body{height:100%;width:100%;font-family:Arial, sans-serif;line-height:1.6;}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}img, video{max-width:100%;height:auto;}a{text-decoration:none;color:inherit;}ul, ol{list-style:none;}button, input, textarea{font-family:inherit;font-size:inherit;line-height:inherit;border:none;background:none;padding:0;margin:0;outline:none;}table{border-collapse:collapse;width:100%;}</style>
<script src="./dist/core.js"></script> <script src="./dist/core.js"></script>
<script src="./src/gale.js"></script>
</head> </head>
<body></body> <body></body>
</html> </html>

69
src/gale.js
View File

@ -25,7 +25,7 @@ const Tier=(selector, obj)=>
return `${selector}{${styles.join("\n")}}`; return `${selector}{${styles.join("\n")}}`;
} }
let i = 0; let i = 1;
/** @type {Gale.CreateSheet} */ /** @type {Gale.CreateSheet} */
globalThis.Gale =sheet=> globalThis.Gale =sheet=>
{ {
@ -33,42 +33,43 @@ globalThis.Gale =sheet=>
i++; i++;
const css = Object.keys(sheet).map(key=>Tier("."+key, sheet[key])).join(`\n`); const css = Object.keys(sheet).map(key=>Tier("."+key, sheet[key])).join(`\n`);
globalThis.document?.head.insertAdjacentHTML("beforeend", `<style data-sheet="${i}">${css}</style>`); globalThis.document?.head.insertAdjacentHTML("beforeend", `<style data-sheet="${i}">${css}</style>`);
const classes =(...args)=>{
/** @type {(needle:string, str:string)=>string} */ /** @type {(needle:string, str:string)=>string} */
const extractLast =(needle, str)=>{ const extractLast =(needle, str)=>{
const ind = str.lastIndexOf(needle)+needle.length; const ind = str.lastIndexOf(needle)+needle.length;
return ind ? str.substring(ind) : str; return ind ? str.substring(ind) : str;
}
return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
} }
classes.CSS = css; return {
classes.DOM = new Proxy( Tag(...args){
{}, return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
{get(_, prop) },
{ CSS: css,
const pending = prop; DOM: new Proxy(
const mentioned = []; {},
const collector = new Proxy( {get(_, prop)
(...args)=> {
{ const pending = prop;
const element = van.tags[pending](...args); const mentioned = [];
element.className && mentioned.push(element.className); const collector = new Proxy(
element.className = mentioned.join(" "); (...args)=>
return element;
},
{
get(_, prop)
{ {
mentioned.push(prop.substring(prop.lastIndexOf(".")+1)); const element = van.tags[pending](...args);
return collector; 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;
} }