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

move types

Browse Source
This commit is contained in:
Seth Trowbridge 2025-02-13 14:27:41 -05:00
parent 04c0b789eb
commit 8d82c41f81
4 changed files with 51 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app.js
View File

@ -1,19 +1,19 @@
import Styles from "./gale.js"; const {DOM} = Gale({
Button: {
padding: "20px",
const sheet = Styles({ background: "orange",
Button:{ ".Inner": {
padding:"20px", fontSize: "10rem"
background:"orange",
".Inner":{
fontSize:"10rem"
} }
}, },
Outline:{border:"2px solid orange"} Outline: {
border: "2px solid orange"
}
}); });
const el = sheet.dom.a.Button.Outline({onclick(){console.log("clicked!")}}, "Click!");
const el = DOM.a.Button.Outline({onclick(){console.log("clicked!")}}, "Click!");
console.log(el); console.log(el);
van.add(document.body, el, sheet.dom.p.Outline("paragraph!")); van.add(document.body, el, DOM.h1.Outline["Button.Inner"]("title"));

98
gale.js
View File

@ -3,32 +3,7 @@ const KeyPseudo = ":";
const KeyChild = "."; const KeyChild = ".";
const KeyGroup = "^"; const KeyGroup = "^";
/** @typedef { Partial<CSSStyleDeclaration> & {[key: `${KeyQuery|KeyPseudo|KeyChild|KeyGroup}${string}`]: UserStyles } } UserStyles */ /** @type {Gale.Tier} */
/** @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 Tier=(selector, obj)=>
{ {
const styles = Object.keys(obj).map((key)=> const styles = Object.keys(obj).map((key)=>
@ -50,42 +25,9 @@ const Tier=(selector, obj)=>
return `${selector}{${styles.join("\n")}}`; 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; let i = 0;
/** @type {<T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string, dom:Gale.Elemental<CrossMultiplyRecord<T>>} } */ /** @type {Gale.CreateSheet} */
export default (sheet)=> const Gale = (sheet)=>
{ {
const id = i ? "_"+i : ""; const id = i ? "_"+i : "";
i++; i++;
@ -99,7 +41,37 @@ export default (sheet)=>
} }
return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id; return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
} }
classes.css = css;
classes.dom = MakeElemental(sheet); let pending = false;
let mentioned = [];
const collector = new Proxy(
(...args)=>
{
const element = van.tags[pending](...args);
element.className = mentioned.join(" ");
return element;
},
{
get(_, prop)
{
mentioned.push(prop.substring(prop.lastIndexOf(".")+1));
return collector;
}
}
);
classes.CSS = css;
classes.DOM = new Proxy(
{},
{get(_, prop)
{
pending = prop;
mentioned = [];
return collector;
}
}
);
return classes; return classes;
} }

1
index.html
View File

@ -6,6 +6,7 @@
</head> </head>
<body> <body>
<script src="https://vanjs.org/code/van-1.5.3.nomodule.min.js"></script> <script src="https://vanjs.org/code/van-1.5.3.nomodule.min.js"></script>
<script src="./gale.js"></script>
<script type="module" src="app.js"></script> <script type="module" src="app.js"></script>
</body> </body>
</html> </html>

8
types.d.ts vendored
View File

@ -79,15 +79,13 @@ 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} type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{CSS:string, DOM:Elemental<CrossMultiplyRecord<T>>}
type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Circular<T, K>} type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Circular<T, K>}
type Circular<Keys extends string, ElementName extends keyof HTMLElementTagNameMap> = { type Circular<Keys extends string, ElementName extends keyof HTMLElementTagNameMap> = {
[K in Keys]: Circular<Keys, ElementName>&Van.TagFunc<HTMLElementTagNameMap[ElementName]>; [K in Keys]: Circular<Keys, ElementName>&Van.TagFunc<HTMLElementTagNameMap[ElementName]>;
}; };
} }
const Gale:Gale.CreateSheet
} }