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: {
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(),

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 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 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>}

2
dist/core.js vendored
View File

@ -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",`<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
((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">
<!-- 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="./src/gale.js"></script>
</head>
<body></body>
</html>

69
src/gale.js
View File

@ -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", `<style data-sheet="${i}">${css}</style>`);
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;
)
}
}