app.js

@@ -1,4 +1,4 @@
-const {DOM, Tag, Div} = Gale({
+const {DOM, Tag, H} = Gale({
     Button: {
         padding: "20px",
         background: "orange",
@@ -30,15 +30,15 @@ const {DOM, Tag, Div} = Gale({
     Orange:{
         background:"orange"
     }
-});
+}, "abilities");
 
 const UI =()=>
 {
-  return Div.Window(
+  return H.Window(
-    Div.Ability({class:Tag("Ability", "Orange")}),
+    H.Ability({class:Tag("Ability", "Orange")}),
-    Div.Ability(),
+    H.Ability(),
-    Div.Ability(),
+    H.Ability(),
-    Div.Ability.Orange(),
+    H.Ability.Orange(),
   )
 }
 

deno.lock

@@ -1,27 +1,13 @@
 {
-  "version": "5",
+  "version": "4",
   "specifiers": {
-    "jsr:@std/media-types@*": "1.1.0",
+    "jsr:@std/media-types@*": "1.1.0"
-    "npm:vanjs-core@*": "1.5.5",
-    "npm:vanjs-core@^1.5.5": "1.5.5",
-    "npm:vanjs-ext@~0.6.3": "0.6.3"
   },
   "jsr": {
     "@std/media-types@1.1.0": {
       "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4"
     }
   },
-  "npm": {
-    "vanjs-core@1.5.5": {
-      "integrity": "sha512-BC9MjbXYIRqnwncXfacT6upJpVmIKyrV2MjZi8NuCK+yc9RP0hfdghTpmEuYswXOfkLarDPPcYK4X6q68T9e+g=="
-    },
-    "vanjs-ext@0.6.3": {
-      "integrity": "sha512-Jmaeqx9nCjelwDVSQEaRtt7R4Y/Kj/zJBG3bZSiIPj8Wtr8nEFRsJX9K5qcGl1o3cGEEFBE9suyoSqs/6tiOBg==",
-      "dependencies": [
-        "vanjs-core"
-      ]
-    }
-  },
   "redirects": {
     "https://deno.land/std/path/mod.ts": "https://deno.land/std@0.224.0/path/mod.ts"
   },

dist/core.d.ts

@@ -62,42 +62,26 @@ declare global
     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>(
+    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
-      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
-    // my addition
-    readonly Store: <T extends object>(obj:T, key:string)=>T
   };
 
   namespace Gale { 
     type KeyQuery = "@";
-    type KeyState = ":";
+    type KeyPseudo = ":";
     type KeyChild = ".";
     type KeyGroup = "^";
-    type UserStyles = Partial<CSSStyleDeclaration> & {[key: `${KeyQuery|KeyState|KeyChild|KeyGroup}${string}`]: UserStyles }
+    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, suffix:string)=>string;
+    type Tier = (selector:string, obj:UserStyles)=>string;
-    type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T, hash?:string)=>{
+    type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string}
-      Tag:(...args:CrossMultiplyRecord<T>[])=>string,
-      CSS:string,
-      DOM:Elemental<CrossMultiplyRecord<T>>,
-      Div:Circular<CrossMultiplyRecord<T>, Van.TagFunc<HTMLDivElement>>
-    }
-    
-
-    type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Van.TagFunc<HTMLElementTagNameMap[K]>&Circular<T, Van.TagFunc<HTMLElementTagNameMap[K]>>}
-
-    type Circular<Keys extends string, Func> = {
-        [K in Keys]: Circular<Keys, Func>&Func
-    };
-    
   }
+
   const Gale:Gale.CreateSheet
+
 }

index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- css reset --><style>*{margin:0;padding:0;box-sizing:border-box;}html, body{height:100%;width:100%;font-family:Arial, sans-serif;line-height:1.6;}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}img, video{max-width:100%;height:auto;}a{text-decoration:none;color:inherit;}ul, ol{list-style:none;}button, input, textarea{font-family:inherit;font-size:inherit;line-height:inherit;border:none;background:none;padding:0;margin:0;outline:none;}table{border-collapse:collapse;width:100%;}</style>
+        <script src="./dist/core.js"></script>
+        <script src="./src/gale.js"></script>
+    </head>
+    <body></body>
+</html>

scripts/bundle_entry.ts

@@ -1,14 +0,0 @@
-import Van from "npm:vanjs-core@^1.5.5";
-globalThis.van = Van;
-
-import * as VanX from "npm:vanjs-ext@^0.6.3";
-globalThis.vanX = VanX;
-
-import Gale from "../src/gale.js";
-globalThis.Gale = Gale;
-
-import BindHMR from "../src/hmr.js";
-BindHMR();
-
-import Boot from "../src/boot.js";
-Boot();

scripts/bundle_subprocess.ts

@@ -1,12 +0,0 @@
-const command = new Deno.Command("deno", {
-    args:[
-        "bundle",
-        "--no-lock",
-        "--platform=browser",
-        "--inline-imports=true",
-        "--output=dist/core.js",
-        "--minify",
-        "scripts/bundle_entry.ts"
-    ]
-});
-command.outputSync();

scripts/dev_server.ts

@@ -4,7 +4,7 @@ import {HTML} from "./assemble_files.ts";
 // Parse the port from the command-line arguments, defaulting to 8000
 const port = parseInt(Deno.args[0] || "8000", 10);
 const sockets: WebSocket[] = [];
-//const devinc = await fetch(import.meta.resolve("../src/dev.js")).then(r=>r.text());
+const devinc = await fetch(import.meta.resolve("../src/dev.js")).then(r=>r.text());
 
 let html: string;
 try {
@@ -12,7 +12,7 @@ try {
 } catch (_) {
   html = HTML;
 }
-//html = html.replace("</head>", `<script>${devinc}</script></head>`);
+html = html.replace("</head>", `<script>${devinc}</script></head>`);
 
 function extension(path: string): string {
   // Remove trailing slash if it exists

src/boot.js

@@ -1,13 +1,15 @@
-export default (root="/")=>fetch(root+"deno.json")
+(
-.then(text=>text.json())
+    (root="/")=>fetch(root+"deno.json")
-.then(json=>{
+    .then(text=>text.json())
-    const n=(t,e)=>{let n=document.createElement("script");n.type=t,n.textContent=e,document.head.appendChild(n)};
+    .then(json=>{
-    const imports = json.imports;
+        const n=(t,e)=>{let n=document.createElement("script");n.type=t,n.textContent=e,document.head.appendChild(n)};
-    for(let n in imports)
+        const imports = json.imports;
-    {
+        for(let n in imports)
-        const path=imports[n];
+        {
-        path.startsWith("./")&&(imports[n]=root+path.substring(2))
+            const path=imports[n];
-    }
+            path.startsWith("./")&&(imports[n]=root+path.substring(2))
-    n("importmap",JSON.stringify({imports})),
+        }
-    n("module",'import "entry"; ')
+        n("importmap",JSON.stringify({imports})),
-})
+        n("module",'import "entry"; ')
+    })
+)();

src/dev.js

@@ -0,0 +1,33 @@
+// added in devmode to index.html
+
+new WebSocket('ws://'+window.location.host+'/ws').addEventListener('message',e=>e.data==='reload'&&window.location.reload());
+
+vanX.Store =(obj, key)=>
+{
+  let checkInit = JSON.stringify(obj);
+  let checkStore = localStorage.getItem(key+"check");
+  localStorage.setItem(key+"check", checkInit);
+  
+  let recallJSON;
+  if(checkInit == checkStore)
+  {
+    let recallText = localStorage.getItem(key);
+    try
+    {
+      recallJSON = JSON.parse(recallText) || obj;
+    }
+    catch(e)
+    {
+      recallJSON = obj;
+    }
+  }
+  else
+  {
+    
+    recallJSON = obj;
+  }
+
+  const store = vanX.reactive( recallJSON );
+  van.derive(() => localStorage.setItem(key, JSON.stringify(vanX.compact(store))));
+  return store;
+}  

src/gale.js

@@ -1,5 +1,5 @@
 /** @type {Gale.CreateSheet} */
-export default (sheet, hash="")=>
+globalThis.Gale = (sheet, hash="")=>
 {
     const KeyQuery = "@";
     const KeyState = ":";
@@ -76,7 +76,7 @@ export default (sheet, hash="")=>
                 }
             }
         ),
-        Div: new Proxy(
+        H: new Proxy(
             {},
             {
                 get(_, prop)

src/hmr.js

@@ -1,121 +1,92 @@
-
+//@ts-check
-let Time = 0;
+// hmr
-/** @type {Record<string, string>} */
+const HMR = globalThis.HMR = {
-let Temp = {};
+    Time: 0,
-function Tick()
+    /** @type {Record<string, string>} */
-{
+    Temp:{},
-    for(const k in Temp)
+    Tick()
     {
-        sessionStorage.setItem(k, Temp[k]);
+        for(const k in HMR.Temp)
-    } 
-    Temp = {};
-    Time = 0;
-}
-
-/** @type {(key:string, value:string)=>void} */
-function Save(key, value)
-{
-    Temp[key] = value;
-    if(!Time)
-    {
-        Time = setTimeout(Tick, 500);
-    }
-    console.log("SAVE", key, value);
-};
-
-/** @type {(key:string)=>string|null} */
-function Load(key)
-{
-    const value = sessionStorage.getItem(key);
-    console.log("LOAD", key, value);
-    return value;
-}
-
-/** @type {string|undefined} */
-let _ID = undefined;
-let _index = 0;
-
-/** @type {(id:string|undefined = undefined)=>void} */
-function StartID(id)
-{
-    _index = 0;
-    _ID = id;
-}
-
-function NextID()
-{
-    return _ID ? _ID + "_" + (_index++) + "_" : "";
-}
-
-export default()=>{
-    //bind Van
-    const origninalState = globalThis.van.state;
-    globalThis.van.state =(value, key="")=>
-    {
-        const type = typeof value;
-        let reader =d=>d;
-        let writer =d=>d?.toString() || null;
-
-        switch(type)
         {
-            case "boolean" :
+            sessionStorage.setItem(k, HMR.Temp[k]);
-                reader =(data)=> data === "true"; break;
+        } 
-            case "number" :
+        HMR.Temp = {};
-                reader = parseFloat; break;
+        HMR.Time = 0;
-            case "object" :
+    },
-                reader = JSON.parse;
+    /** @type {(key:string, value:string)=>void} */
-                writer = JSON.stringify;
+    Save(key, value)
-                break;
-        }
-
-        const fullKey = "HMR_" + NextID() + key;
-        const stringValue = Load(fullKey);
-        const signal = origninalState((stringValue ? reader(stringValue) : value));
-        van.derive(()=>Save(fullKey, writer(signal.val)));
-
-        return signal;
-    };
-
-    //bind VanX
-    const originalReactive = globalThis.vanX.reactive;
-    globalThis.vanX.reactive =(obj, id)=>
     {
-        StartID(id);
+        this.Temp[key] = value;
-        const state = originalReactive(obj);
+        if(!this.Time)
-        StartID();
+        {
-        return state;
+            this.Time = setTimeout(this.Tick, 500);
+        }
+        console.log("SAVE", key, value);
+    },
+    /** @type {(key:string)=>string|null} */
+    Load(key)
+    {
+        const value = sessionStorage.getItem(key);
+        console.log("LOAD", key, value);
+        return value;
+    },
+
+    /** @type {string|undefined} */
+    _ID: undefined,
+    _index: 0,
+    /** @type {(id:string|undefined = undefined)=>void} */
+    StartID(id)
+    {
+        this._index = 0;
+        this._ID = id;
+    },
+    NextID()
+    {
+        return this._ID ? this._ID + "_" + (this._index++) + "_" : "";
+    },
+
+    BindVan()
+    {
+        //bind Van
+        const origninalState = globalThis.van.state;
+        globalThis.van.state =(value, key="")=>
+        {
+            const type = typeof value;
+            let reader =d=>d;
+            let writer =d=>d?.toString() || null;
+
+            switch(type)
+            {
+                case "boolean" :
+                    reader =(data)=> data === "true"; break;
+                case "number" :
+                    reader = parseFloat; break;
+                case "object" :
+                    reader = JSON.parse;
+                    writer = JSON.stringify;
+                    break;
+            }
+
+            const fullKey = "HMR_" + HMR.NextID() + key;
+            const stringValue = HMR.Load(fullKey);
+            const signal = origninalState((stringValue ? reader(stringValue) : value));
+            van.derive(()=>HMR.Save(fullKey, writer(signal.val)));
+
+            return signal;
+        };
+    },
+
+    BindVanX()
+    {
+        //bind VanX
+        const originalReactive = globalThis.vanX.reactive;
+        globalThis.vanX.reactive =(obj, id)=>
+        {
+            HMR.StartID(id);
+            const state = originalReactive(obj);
+            HMR.StartID();
+            return state;
+        }
     }
 
-    // added in devmode to index.html
+}
-    new WebSocket('ws://'+window.location.host+'/ws').addEventListener('message',e=>e.data==='reload'&&window.location.reload());
-
-    vanX.Store =(obj, key)=>
-    {
-        let checkInit = JSON.stringify(obj);
-        let checkStore = localStorage.getItem(key+"check");
-        localStorage.setItem(key+"check", checkInit);
-        
-        let recallJSON;
-        if(checkInit == checkStore)
-        {
-            let recallText = localStorage.getItem(key);
-            try
-            {
-            recallJSON = JSON.parse(recallText) || obj;
-            }
-            catch(e)
-            {
-            recallJSON = obj;
-            }
-        }
-        else
-        {
-            
-            recallJSON = obj;
-        }
-
-        const store = vanX.reactive( recallJSON );
-        van.derive(() => localStorage.setItem(key, JSON.stringify(vanX.compact(store))));
-        return store;
-    }  
-}