move types
This commit is contained in:
parent
04c0b789eb
commit
8d82c41f81
14
app.js
14
app.js
@ -1,7 +1,4 @@
|
||||
import Styles from "./gale.js";
|
||||
|
||||
|
||||
const sheet = Styles({
|
||||
const {DOM} = Gale({
|
||||
Button: {
|
||||
padding: "20px",
|
||||
background: "orange",
|
||||
@ -9,11 +6,14 @@ const sheet = Styles({
|
||||
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);
|
||||
|
||||
|
||||
van.add(document.body, el, sheet.dom.p.Outline("paragraph!"));
|
||||
van.add(document.body, el, DOM.h1.Outline["Button.Inner"]("title"));
|
||||
98
gale.js
98
gale.js
@ -3,32 +3,7 @@ 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} */
|
||||
/** @type {Gale.Tier} */
|
||||
const Tier=(selector, obj)=>
|
||||
{
|
||||
const styles = Object.keys(obj).map((key)=>
|
||||
@ -50,42 +25,9 @@ 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, dom:Gale.Elemental<CrossMultiplyRecord<T>>} } */
|
||||
export default (sheet)=>
|
||||
/** @type {Gale.CreateSheet} */
|
||||
const Gale = (sheet)=>
|
||||
{
|
||||
const id = i ? "_"+i : "";
|
||||
i++;
|
||||
@ -99,7 +41,37 @@ export default (sheet)=>
|
||||
}
|
||||
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;
|
||||
}
|
||||
@ -6,6 +6,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
6
types.d.ts
vendored
6
types.d.ts
vendored
@ -79,7 +79,8 @@ 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}
|
||||
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 Circular<Keys extends string, ElementName extends keyof HTMLElementTagNameMap> = {
|
||||
@ -87,7 +88,4 @@ declare global
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
const Gale:Gale.CreateSheet
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user