drilling
This commit is contained in:
parent
6479974994
commit
1610f490e2
14
app.js
14
app.js
@ -1,5 +1,15 @@
|
||||
import Styles from "./styles.dev.js";
|
||||
|
||||
|
||||
const sheet = Styles({
|
||||
Button:{padding:"20px", background:"orange"},
|
||||
Test:{fontSize:"3rem"}
|
||||
Button:{
|
||||
padding:"20px",
|
||||
background:"orange",
|
||||
".Inner":{
|
||||
fontSize:"10rem"
|
||||
}
|
||||
},
|
||||
Outline:{border:"2px solid orange"}
|
||||
});
|
||||
|
||||
const el = sheet.dom.div.Button.Outline();
|
||||
@ -4,6 +4,7 @@
|
||||
"lib": [
|
||||
"deno.window",
|
||||
"DOM"
|
||||
]
|
||||
],
|
||||
"types": ["./drill.d.ts"]
|
||||
}
|
||||
}
|
||||
12
drill.d.ts
vendored
Normal file
12
drill.d.ts
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
|
||||
export {}
|
||||
declare global {
|
||||
namespace Gale
|
||||
{
|
||||
type Invoker =()=>HTMLElement
|
||||
type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Circular<T>}
|
||||
type Circular<Keys extends string> = {
|
||||
[K in Keys]: Circular<Keys>&Invoker;
|
||||
};
|
||||
}
|
||||
}
|
||||
115
styles.dev.js
115
styles.dev.js
@ -1,67 +1,100 @@
|
||||
// @ts-check
|
||||
const KeyQuery = "@";
|
||||
const KeyPseudo = ":";
|
||||
const KeyChild = ".";
|
||||
const KeyGroup = "^";
|
||||
|
||||
/**
|
||||
* @typedef { Partial<CSSStyleDeclaration> & {
|
||||
* [key: `${KeyQuery|KeyPseudo|KeyChild|KeyGroup}${string}`]: UserStyles;
|
||||
* } & {
|
||||
* [key in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[key] | CSSStyleDeclaration[key][]
|
||||
* }} UserStyles
|
||||
*/
|
||||
/** @typedef { Partial<CSSStyleDeclaration> & {[key: `${KeyQuery|KeyPseudo|KeyChild|KeyGroup}${string}`]: UserStyles } } UserStyles */
|
||||
/** @typedef {Record<string, UserStyles>} UserSheet */
|
||||
|
||||
/** @typedef {Record<string, UserStyles> & { global?: UserStyles }} UserSheet */
|
||||
|
||||
/**
|
||||
* @template {UserSheet} T
|
||||
* @typedef {keyof T | (string & {})} ValidSelectors<T>
|
||||
* @template Obj
|
||||
* @typedef { { [Key in keyof Obj]: Obj[Key] extends object ? Key | CollectKeys<Obj[Key]> : Key }[keyof Obj] } CollectKeys
|
||||
*/
|
||||
|
||||
/**
|
||||
* @template {UserSheet} T
|
||||
* @param {T} sheet
|
||||
* @returns {((...selectors: (keyof T)[]) => string) & { css: string }}
|
||||
* @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
|
||||
*/
|
||||
const createCss = (sheet) => {
|
||||
let i = 0;
|
||||
const id = i ? "_" + i : "";
|
||||
i++;
|
||||
|
||||
const Tier = (selector, obj) => {
|
||||
const styles = Object.keys(obj).map((key) => {
|
||||
/**
|
||||
* @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:
|
||||
switch(key[0])
|
||||
{
|
||||
case KeyQuery :
|
||||
return Tier(`@media(max-width:${key.substring(KeyQuery.length)})`, value);
|
||||
case KeyPseudo:
|
||||
case KeyPseudo :
|
||||
return Tier(`&${key}`, value);
|
||||
case KeyChild:
|
||||
case KeyChild :
|
||||
return Tier(`${key}`, value);
|
||||
case KeyGroup:
|
||||
case KeyGroup :
|
||||
return Tier(`&:hover .${key.substring(KeyGroup.length)}`, value);
|
||||
}
|
||||
return `${key.replace(/([a-z])([A-Z])/g, '$1-$2')}: ${value};`;
|
||||
return `${ key.replace(/([a-z])([A-Z])/g, '$1-$2') }: ${value};`
|
||||
});
|
||||
return `${selector}{${styles.join("\n")}}`;
|
||||
};
|
||||
}
|
||||
|
||||
const css = Object.keys(sheet).map(key => Tier("." + key, sheet[key])).join("\n");
|
||||
|
||||
/** @type {<T extends UserSheet>(ref:T)=>Gale.Elemental<CrossMultiplyRecord<T>>} */
|
||||
function MakeElemental(ref)
|
||||
{
|
||||
let pending = false;
|
||||
let classes = [];
|
||||
|
||||
const collector = new Proxy(()=>{console.log("original func invoked!", pending, classes)},
|
||||
{
|
||||
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>`);
|
||||
|
||||
/** @type {(...args: (keyof T)[]) => string} */
|
||||
const classes = (...args) => {
|
||||
/** @type {(needle: string, str: string) => string} */
|
||||
const extractLast = (needle, str) => {
|
||||
const ind = str.lastIndexOf(needle) + needle.length;
|
||||
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;
|
||||
};
|
||||
|
||||
}
|
||||
return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
|
||||
}
|
||||
classes.css = css;
|
||||
classes.dom = MakeElemental(sheet);
|
||||
return classes;
|
||||
};
|
||||
|
||||
export default createCss;
|
||||
}
|
||||
87
types.d.ts
vendored
Normal file
87
types.d.ts
vendored
Normal file
@ -0,0 +1,87 @@
|
||||
export {}
|
||||
declare global
|
||||
{
|
||||
namespace Van {
|
||||
|
||||
interface State<T> {
|
||||
val: T
|
||||
readonly oldVal: T
|
||||
readonly rawVal: T
|
||||
}
|
||||
|
||||
// Defining readonly view of State<T> for covariance.
|
||||
// Basically we want StateView<string> to implement StateView<string | number>
|
||||
type StateView<T> = Readonly<State<T>>
|
||||
|
||||
type Val<T> = State<T> | T
|
||||
|
||||
type Primitive = string | number | boolean | bigint
|
||||
|
||||
// deno-lint-ignore no-explicit-any
|
||||
type PropValue = Primitive | ((e: any) => void) | null
|
||||
|
||||
type PropValueOrDerived = PropValue | StateView<PropValue> | (() => PropValue)
|
||||
|
||||
type Props = Record<string, PropValueOrDerived> & { class?: PropValueOrDerived; is?: string }
|
||||
|
||||
type PropsWithKnownKeys<ElementType> = Partial<{[K in keyof ElementType]: PropValueOrDerived}>
|
||||
|
||||
type ValidChildDomValue = Primitive | Node | null | undefined
|
||||
|
||||
type BindingFunc = ((dom?: Node) => ValidChildDomValue) | ((dom?: Element) => Element)
|
||||
|
||||
type ChildDom = ValidChildDomValue | StateView<Primitive | null | undefined> | BindingFunc | readonly ChildDom[]
|
||||
|
||||
type TagFunc<Result> = (first?: Props & PropsWithKnownKeys<Result> | ChildDom, ...rest: readonly ChildDom[]) => Result
|
||||
|
||||
type Tags = Readonly<Record<string, TagFunc<Element>>> & {
|
||||
[K in keyof HTMLElementTagNameMap]: TagFunc<HTMLElementTagNameMap[K]>
|
||||
}
|
||||
}
|
||||
const van:{
|
||||
readonly state: <T>(initVal: T, HMRKey?:string)=> Van.State<T>
|
||||
readonly derive: <T>(f: () => T) => Van.State<T>
|
||||
readonly add: (dom: Element, ...children: readonly Van.ChildDom[]) => Element
|
||||
readonly tags: Van.Tags & ((namespaceURI: string) => Readonly<Record<string, Van.TagFunc<Element>>>)
|
||||
readonly hydrate: <T extends Node>(dom: T, f: (dom: T) => T | null | undefined) => T
|
||||
};
|
||||
|
||||
|
||||
namespace VanX
|
||||
{
|
||||
type StateOf<T> = { readonly [K in keyof T]: Van.State<T[K]> }
|
||||
type ValueType<T> = T extends (infer V)[] ? V : T[keyof T]
|
||||
type KeyType<T> = T extends unknown[] ? number : string
|
||||
type ReplacementFunc<T> =
|
||||
T extends (infer V)[] ? (items: V[]) => readonly V[] :
|
||||
(items: [string, T[keyof T]][]) => readonly [string, T[keyof T]][]
|
||||
}
|
||||
const vanX:{
|
||||
readonly calc: <R>(f: () => R) => R
|
||||
readonly reactive: <T extends object>(obj: T, HMRKey?:string) => T
|
||||
readonly noreactive: <T extends object>(obj: T) => T
|
||||
readonly stateFields: <T extends object>(obj: T) => VanX.StateOf<T>
|
||||
readonly raw: <T extends object>(obj: T) => T
|
||||
readonly list: <T extends object, ElementType extends Element>(container: (() => ElementType) | ElementType, items: T,itemFunc: (v: Van.State<VanX.ValueType<T>>, deleter: () => void, k: VanX.KeyType<T>) => Node) => ElementType
|
||||
readonly replace: <T extends object>(obj: T, replacement: VanX.ReplacementFunc<T> | T) => T
|
||||
readonly compact: <T extends object>(obj: T) => T
|
||||
};
|
||||
|
||||
namespace Gale {
|
||||
type KeyQuery = "@";
|
||||
type KeyPseudo = ":";
|
||||
type KeyChild = ".";
|
||||
type KeyGroup = "^";
|
||||
type UserStyles = Partial<CSSStyleDeclaration> & {[key: `${KeyQuery|KeyPseudo|KeyChild|KeyGroup}${string}`]: UserStyles }
|
||||
type UserSheet = Record<string, UserStyles>
|
||||
type CollectKeys<Obj> = {[Key in keyof Obj]: Obj[Key] extends object ? Key | CollectKeys<Obj[Key]> : Key }[keyof Obj]
|
||||
type FilterKeys<Keys> = Keys extends `${KeyChild|KeyGroup}${infer Rest}` ? Keys : 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 Tier = (selector:string, obj:UserStyles)=>string;
|
||||
type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string}
|
||||
}
|
||||
|
||||
const Gale:Gale.CreateSheet
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user