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();

deno.json

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

drill.d.ts

@@ -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;
+        };
+    }
+}

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) => {
-            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);
+/**
+ * @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(()=>{console.log("original func invoked!", pending, classes)},
+        {
+            get(target, prop, rec)
+            {
+                classes.push(prop);
+                return collector;
             }
-            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");
+    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;
+}

types.d.ts

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