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

reduce

Browse Source
This commit is contained in:
Seth Trowbridge 2025-02-12 17:09:58 -05:00
parent a009f334eb
commit 04c0b789eb
6 changed files with 43 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@ -1,4 +1,4 @@
import Styles from "./styles.dev.js";
import Styles from "./gale.js";
const sheet = Styles({

2
deno.json
View File

@ -5,6 +5,6 @@
"deno.window",
"DOM"
],
"types": ["./drill.d.ts", "./types.d.ts"]
"types": ["./types.d.ts"]
}
}

11
drill.d.ts vendored
View File

@ -1,11 +0,0 @@
export {}
declare global {
namespace Gale
{
type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Circular<T, K>}
type Circular<Keys extends string, ElementName extends keyof HTMLElementTagNameMap> = {
[K in Keys]: Circular<Keys, ElementName>&Van.TagFunc<HTMLElementTagNameMap[ElementName]>;
};
}
}

37
gale.js
View File

@ -1,4 +1,3 @@
// @ts-check
const KeyQuery = "@";
const KeyPseudo = ":";
const KeyChild = ".";
@ -51,8 +50,41 @@ const Tier=(selector, obj)=>
return `${selector}{${styles.join("\n")}}`;
}
/** @type {<T extends UserSheet>(ref:T)=>Gale.Elemental<CrossMultiplyRecord<T>>} */
function MakeElemental(ref)
{
let pending = false;
let classes = [];
const collector = new Proxy((...args)=>{
console.log("original func invoked!", pending, classes);
const element = van.tags[pending](...args);
element.className = classes.join(" ");
return element
},
{
get(target, prop, rec)
{
classes.push(prop);
return collector;
}
}
);
const obj = new Proxy({}, {get(target, prop, rec)
{
pending = prop;
classes = [];
return collector;
}
});
return obj;
}
let i = 0;
/** @type {<T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string}} */
/** @type {<T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string, dom:Gale.Elemental<CrossMultiplyRecord<T>>} } */
export default (sheet)=>
{
const id = i ? "_"+i : "";
@ -68,5 +100,6 @@ export default (sheet)=>
return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
}
classes.css = css;
classes.dom = MakeElemental(sheet);
return classes;
}

105
styles.dev.js
View File

@ -1,105 +0,0 @@
const KeyQuery = "@";
const KeyPseudo = ":";
const KeyChild = ".";
const KeyGroup = "^";
/** @typedef { Partial<CSSStyleDeclaration> & {[key: `${KeyQuery|KeyPseudo|KeyChild|KeyGroup}${string}`]: UserStyles } } UserStyles */
/** @typedef {Record<string, UserStyles>} UserSheet */
/**
* @template Obj
* @typedef { { [Key in keyof Obj]: Obj[Key] extends object ? Key | CollectKeys<Obj[Key]> : Key }[keyof Obj] } CollectKeys
*/
/**
* @template Keys
* @typedef { Keys extends `${KeyChild|KeyGroup}${infer Rest}` ? Keys : never } FilterKeys
*/
/**
* @template A
* @template B
* @typedef {A extends string ? B extends string ? `${A}${B}` : never : never } CrossMultiply
*/
/**
* @template Rec
* @typedef { keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply<K, FilterKeys<CollectKeys<Rec[K]>>> : never }[keyof Rec] } CrossMultiplyRecord
*/
/** @type {(selector:string, obj:UserStyles)=>string} */
const Tier=(selector, obj)=>
{
const styles = Object.keys(obj).map((key)=>
{
const value = obj[key];
switch(key[0])
{
case KeyQuery :
return Tier(`@media(max-width:${key.substring(KeyQuery.length)})`, value);
case KeyPseudo :
return Tier(`&${key}`, value);
case KeyChild :
return Tier(`${key}`, value);
case KeyGroup :
return Tier(`&:hover .${key.substring(KeyGroup.length)}`, value);
}
return `${ key.replace(/([a-z])([A-Z])/g, '$1-$2') }: ${value};`
});
return `${selector}{${styles.join("\n")}}`;
}
/** @type {<T extends UserSheet>(ref:T)=>Gale.Elemental<CrossMultiplyRecord<T>>} */
function MakeElemental(ref)
{
let pending = false;
let classes = [];
const collector = new Proxy((...args)=>{
console.log("original func invoked!", pending, classes);
const element = van.tags[pending](...args);
element.className = classes.join(" ");
return element
},
{
get(target, prop, rec)
{
classes.push(prop);
return collector;
}
}
);
const obj = new Proxy({}, {get(target, prop, rec)
{
pending = prop;
classes = [];
return collector;
}
});
return obj;
}
let i = 0;
/** @type {<T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string, dom:Gale.Elemental<CrossMultiplyRecord<T>>} } */
export default (sheet)=>
{
const id = i ? "_"+i : "";
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;
}
classes.css = css;
classes.dom = MakeElemental(sheet);
return classes;
}

6
types.d.ts vendored
View File

@ -80,6 +80,12 @@ declare global
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}
type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Circular<T, K>}
type Circular<Keys extends string, ElementName extends keyof HTMLElementTagNameMap> = {
[K in Keys]: Circular<Keys, ElementName>&Van.TagFunc<HTMLElementTagNameMap[ElementName]>;
};
}
const Gale:Gale.CreateSheet