start readme

Reviewed-on: #1

README.md

@@ -0,0 +1,13 @@
+
+Run in an empty directory to setup basic files:
+```
+deno run -Ar https://gitea.hptrow.me/SethTrowbridge/gale/raw/branch/master/scaffold.ts
+```
+
+`deno task dev` starts the dev server
+
+`deno task types` scans the deno.json for type declaration files (be sure to then restart the Deno language server)
+
+`entry` in the import map points to the starting file
+
+If you delete the index.html, the dever server can still run using a default

app.js

@@ -1,25 +0,0 @@
-import {PosCSS} from "./keys.js";
-
-const {DOM} = Gale({
-    Button: {
-        padding: "20px",
-        background: "orange",
-        ".Inner": {
-            fontSize: "10rem"
-        }
-    },
-    Outline: {
-        position: "relative",
-        border: "2px solid orange",
-        padding: "20px"
-    }
-});
-
-function App()
-{
-    return ()=> {
-        return DOM.h1.Outline({id:"Move", style:PosCSS(10)}, "title");
-    }
-}
-
-van.add(document.body, App());

bundle.d.ts

@@ -62,9 +62,14 @@ 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>(container: (() => ElementType) | ElementType, items: T,itemFunc: (v: Van.State<VanX.ValueType<T>>, deleter: () => void, k: VanX.KeyType<T>) => Node) => ElementType
+    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
+    // my addition
+    readonly Store: <T extends object>(obj:T, key:string)=>T
   };
 
   namespace Gale { 
@@ -88,4 +93,5 @@ declare global
     };
     
   }
+  const Gale:Gale.CreateSheet
 }

bundle.js

@@ -0,0 +1,17 @@
+//van
+{let e,t,r,o,n,l,s,i,f,h,w,a,d,u,_,c,S,g,y,b,m,v,j,x,O;s=Object.getPrototypeOf,f={},h=s(i={isConnected:1}),w=s(s),a=(e,t,r,o)=>(e??(setTimeout(r,o),new Set)).add(t),d=(e,t,o)=>{let n=r;r=t;try{return e(o)}catch(e){return console.error(e),o}finally{r=n}},u=e=>e.filter(e=>e.t?.isConnected),_=e=>n=a(n,e,()=>{for(let e of n)e.o=u(e.o),e.l=u(e.l);n=l},1e3),c={get val(){return r?.i?.add(this),this.rawVal},get oldVal(){return r?.i?.add(this),this.h},set val(o){r?.u?.add(this),o!==this.rawVal&&(this.rawVal=o,this.o.length+this.l.length?(t?.add(this),e=a(e,this,x)):this.h=o)}},S=e=>({__proto__:c,rawVal:e,h:e,o:[],l:[]}),g=(e,t)=>{let r={i:new Set,u:new Set},n={f:e},l=o;o=[];let s=d(e,r,t);s=(s??document).nodeType?s:new Text(s);for(let e of r.i)r.u.has(e)||(_(e),e.o.push(n));for(let e of o)e.t=s;return o=l,n.t=s},y=(e,t=S(),r)=>{let n={i:new Set,u:new Set},l={f:e,s:t};l.t=r??o?.push(l)??i,t.val=d(e,n,t.rawVal);for(let e of n.i)n.u.has(e)||(_(e),e.l.push(l));return t},b=(e,...t)=>{for(let r of t.flat(1/0)){let t=s(r??0),o=t===c?g(()=>r.val):t===w?g(r):r;o!=l&&e.append(o)}return e},m=(e,t,...r)=>{let[{is:o,...n},...i]=s(r[0]??0)===h?r:[{},...r],a=e?document.createElementNS(e,t,{is:o}):document.createElement(t,{is:o});for(let[e,r]of Object.entries(n)){let o=t=>t?Object.getOwnPropertyDescriptor(t,e)??o(s(t)):l,n=t+","+e,i=f[n]??=o(s(a))?.set??0,h=e.startsWith("on")?(t,r)=>{let o=e.slice(2);a.removeEventListener(o,r),a.addEventListener(o,t)}:i?i.bind(a):a.setAttribute.bind(a,e),d=s(r??0);e.startsWith("on")||d===w&&(r=y(r),d=c),d===c?g(()=>(h(r.val,r.h),a)):h(r)}return b(a,i)},v=e=>({get:(t,r)=>m.bind(l,e,r)}),j=(e,t)=>t?t!==e&&e.replaceWith(t):e.remove(),x=()=>{let r=0,o=[...e].filter(e=>e.rawVal!==e.h);do{t=new Set;for(let e of new Set(o.flatMap(e=>e.l=u(e.l))))y(e.f,e.s,e.t),e.t=l}while(++r<100&&(o=[...t]).length);let n=[...e].filter(e=>e.rawVal!==e.h);e=l;for(let e of new Set(n.flatMap(e=>e.o=u(e.o))))j(e.t,g(e.f,e.t)),e.t=l;for(let e of n)e.h=e.rawVal},O={tags:new Proxy(e=>new Proxy(m,v(e)),v()),hydrate:(e,t)=>j(e,g(t,e)),add:b,state:S,derive:y},window.van=O;}
+//vanx
+{let e,t,r,{fromEntries:o,entries:l,keys:n,hasOwn:f,getPrototypeOf:a}=Object,{get:i,set:y,deleteProperty:c,ownKeys:s}=Reflect,{state:m,derive:d,add:u}=van,b=1e3,w=Symbol(),A=Symbol(),S=Symbol(),_=Symbol(),g=Symbol(),p=Symbol(),P=e=>(e[A]=1,e),v=e=>e instanceof Object&&!(e instanceof Function)&&!e[p],h=e=>{if(e?.[A]){let t=m();return d(()=>{let r=e();v(t.rawVal)&&v(r)?B(t.rawVal,r):t.val=x(r)}),t}return m(x(e))},F=e=>{let t=Array.isArray(e)?[]:{__proto__:a(e)};for(let[r,o]of l(e))t[r]=h(o);return t[S]=[],t[_]=m(1),t},O={get:(e,t,r)=>t===w?e:f(e,t)?Array.isArray(e)&&"length"===t?(e[_].val,e.length):e[t].val:i(e,t,r),set:(e,o,l,n)=>f(e,o)?Array.isArray(e)&&"length"===o?(l!==e.length&&++e[_].val,e.length=l,1):(e[o].val=x(l),1):o in e?y(e,o,l,n):y(e,o,h(l))&&(++e[_].val,C(e).forEach(E.bind(t,n,o,e[o],r)),1),deleteProperty:(e,t)=>(c(e,t)&&R(e,t),++e[_].val),ownKeys:e=>(e[_].val,s(e))},x=e=>!v(e)||e[w]?e:new Proxy(F(e),O),D=e=>(e[p]=1,e),j=e=>e[w],K=a(m()),N=e=>new Proxy(e,{get:(e,t,r)=>a(e[t]??0)===K?{val:k(e[t].rawVal)}:i(e,t,r)}),k=e=>e?.[w]?new Proxy(N(e[w]),O):e,C=e=>e[S]=e[S].filter(e=>e.t.isConnected),E=(e,t,r,o,{t:l,f:f})=>{let a=Array.isArray(e),i=a?Number(t):t;u(l,()=>l[g][t]=f(r,()=>delete e[t],i)),a&&!o&&i!==e.length-1&&l.insertBefore(l.lastChild,l[g][n(e).find(e=>Number(e)>i)])},R=(e,t)=>{for(let r of C(e)){let e=r.t[g];e[t]?.remove(),delete e[t]}},T=r=>(e??(setTimeout(()=>(e.forEach(C),e=t),b),e=new Set)).add(r),q=(e,t,r)=>{let o={t:e instanceof Function?e():e,f:r},n=t[w];o.t[g]={},n[S].push(o),T(n);for(let[e,r]of l(n))E(t,e,r,1,o);return o.t},z=(e,t)=>{for(let[r,o]of l(t)){let t=e[r];v(t)&&v(o)?z(t,o):e[r]=o}for(let r in e)f(t,r)||delete e[r];let r=n(t),o=Array.isArray(e);if(o||n(e).some((e,t)=>e!==r[t])){let l=e[w];if(o)e.length=t.length;else{++l[_].val;let e={...l};for(let e of r)delete l[e];for(let t of r)l[t]=e[t]}for(let{t:e}of C(l)){let{firstChild:t,[g]:o}=e;for(let l of r)t===o[l]?t=t.nextSibling:e.insertBefore(o[l],t)}}return e},B=(e,n)=>{r=1;try{return z(e,n instanceof Function?Array.isArray(e)?n(e.filter(e=>1)):o(n(l(e))):n)}finally{r=t}},G=e=>Array.isArray(e)?e.filter(e=>1).map(G):v(e)?o(l(e).map(([e,t])=>[e,G(t)])):e;window.vanX={calc:P,reactive:x,noreactive:D,stateFields:j,raw:k,list:q,replace:B,compact:G}}
+
+//Store
+vanX.Store =(obj, key)=> {
+    const recall = localStorage.getItem(key);
+    const store = vanX.reactive(recall ? JSON.parse(recall) : obj);
+    van.derive(() => localStorage.setItem(key, JSON.stringify(vanX.compact(store))));
+    return store;
+}
+
+//gale
+const KeyQuery="@",KeyPseudo=":",KeyChild=".",KeyGroup="^",Tier=(e,t)=>`${e}{${Object.keys(t).map((e=>{const n=t[e];switch(e[0]){case"@":return Tier(`@media(max-width:${e.substring(1)})`,n);case":":return Tier(`&${e}`,n);case".":return Tier(`${e}`,n);case"^":return Tier(`&:hover .${e.substring(1)}`,n)}return`${e.replace(/([a-z])([A-Z])/g,"$1-$2")}: ${n};`})).join("\n")}}`;let i=0;globalThis.Gale=e=>{const t=i?"_"+i:"";i++;const n=Object.keys(e).map((t=>Tier("."+t,e[t]))).join("\n");globalThis.document?.head.insertAdjacentHTML("beforeend",`<style data-sheet="${i}">${n}</style>`);const r=(...e)=>{const n=(e,t)=>{const n=t.lastIndexOf(e)+e.length;return n?t.substring(n):t};return e.map((e=>n("^",n(".",e)))).join(t+" ")+t};return r.CSS=n,r.DOM=new Proxy({},{get(e,t){const n=t,r=[],s=new Proxy(((...e)=>{const t=van.tags[n](...e);return t.className=r.join(" "),t}),{get:(e,t)=>(r.push(t.substring(t.lastIndexOf(".")+1)),s)});return s}}),r};
+//boot
+((t="/")=>{fetch(t+"deno.json").then((t=>t.json())).then((e=>{const n=(t,e)=>{let n=document.createElement("script");n.type=t,n.textContent=e,document.head.appendChild(n)},o=e.imports;for(let e in o){const n=o[e];n.startsWith("./")&&(o[e]=t+n.substring(2))}n("importmap",JSON.stringify({imports:o})),n("module",'import "entry"; ')}))})();

deno.json

@@ -5,6 +5,9 @@
             "deno.window",
             "DOM"
         ],
-        "types": ["./types.d.ts"]
+        "types": ["./bundle.d.ts"]
+    },
+    "imports": {
+        "entry":"./app.js"
     }
 }

dev_server.ts

@@ -0,0 +1,94 @@
+import { contentType } from "jsr:@std/media-types";
+
+// Parse the port from the command-line arguments, defaulting to 8000
+const port = parseInt(Deno.args[0] || "8000", 10);
+const sockets: WebSocket[] = [];
+const connect = `<script>
+const ws = new WebSocket('ws://localhost:${port}/ws');
+ws.addEventListener('message', (event) => {
+  if (event.data === 'reload') {
+    window.location.reload();
+  }
+});
+ws.addEventListener('error', console.error);
+ws.addEventListener('close', console.warn);
+</script>`;
+
+const bundle = await fetch(import.meta.resolve("./bundle.js")).then(r=>r.text());
+
+let html: string;
+try {
+  html = Deno.readTextFileSync("./index.html").replace("<head>", "<head>"+connect);
+} catch (_) {
+  html = `
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+      ${connect}
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <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>${bundle}</script>
+    </head>
+    <body></body>
+</html>`;
+}
+
+
+function extension(path: string): string {
+  // Remove trailing slash if it exists
+  const normalizedPath = path.endsWith("/") ? path.slice(0, -1) : path;
+  // Get the last part of the path
+  const lastPart = normalizedPath.split("/").pop() || "";
+  // Check if the last part contains a "."
+  return lastPart.split(".")[1] || "";
+}
+
+// Start the HTTP server using Deno.serve
+Deno.serve({ port }, async (req: Request) => {
+  const url = new URL(req.url);
+
+  // Handle WebSocket connections
+  if (url.pathname === "/ws") {
+    const { socket, response } = Deno.upgradeWebSocket(req);
+    sockets.push(socket);
+    return response;
+  }
+
+  // Serve static files or the predefined HTML for non-file routes
+  const path = new URL(req.url).pathname;
+  const ext = extension(path);
+
+  // Serve the predefined HTML for non-file routes
+  if (!ext) {
+    return new Response(html, {
+      headers: { "Content-Type": "text/html" },
+    });
+  }
+
+  try {
+    const file = await Deno.open("." + path, { read: true });
+    return new Response(file.readable, {
+      headers: { "Content-Type": contentType(ext) || "application/javascript" },
+    });
+  } catch (err) {
+    if (err instanceof Deno.errors.NotFound) {
+      return new Response("File not found", { status: 404 });
+    } else {
+      return new Response("Internal server error", { status: 500 });
+    }
+  }
+});
+
+// Start watching for file changes
+const watcher = Deno.watchFs(".");
+for await (const event of watcher) {
+  if (event.kind === "modify") {
+    for (const ws of sockets) {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send("reload");
+          continue;
+        }
+      }
+  }
+}

index.html

@@ -1,90 +0,0 @@
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <script src="https://vanjs.org/code/van-1.5.3.nomodule.min.js"></script>
-    <script>
-        //@ts-check
-// hmr
-const HMR = globalThis.HMR = {
-    Time: 0,
-    /** @type {Record<string, string>} */
-    Temp:{},
-    Tick()
-    {
-        for(const k in HMR.Temp)
-        {
-            sessionStorage.setItem(k, HMR.Temp[k]);
-        } 
-        HMR.Temp = {};
-        HMR.Time = 0;
-    },
-    /** @type {(key:string, value:string)=>void} */
-    Save(key, value)
-    {
-        this.Temp[key] = value;
-        if(!this.Time)
-        {
-            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++) + "_" : "";
-    }
-}
-
-        //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;
-        };
-
-    </script>
-    <script src="./gale.js"></script>
-    <script type="module" src="app.js"></script>
-</body>
-</html>

keys.js

@@ -1,48 +0,0 @@
-const Move = {
-    Keys: ["w", "d", "s", "a"],
-    Pair: [ 2,   3,   0,   1 ],
-    Axis: [ 1,   0,   1,   0 ],
-    Magn: [-1,   1,   1,  -1 ],
-    Down: [ 0,   0,   0,   0 ],
-    Move: [0, 0],
-};
-
-/** @type {Van.state<[x:number, y:number]>} */
-export const Pos = van.state(Move.Move);
-
-/** @type {(scale:number)=>string} */
-export const PosCSS =(scale)=> `left:${Pos.val[0]*scale}px; top:${Pos.val[1]*scale}px;`;
-
-function handleDown({key})
-{
-    const index = Move.Keys.indexOf(key);
-    if(index != -1)
-    {
-        Move.Down[index] = 1;
-        Move.Move[Move.Axis[index]] = Move.Magn[index];
-        Pos.val = [...Move.Move];
-    }
-    
-}
-function handleUp({key})
-{
-    const index = Move.Keys.indexOf(key);
-    if(index != -1)
-    {
-        const indexInv = Move.Pair[index];
-        Move.Down[index] = 0;
-        if(Move.Down[indexInv])
-        {
-            Move.Move[Move.Axis[indexInv]] = Move.Magn[indexInv];
-        }
-        else
-        {
-            Move.Move[Move.Axis[index]] = 0;
-        }
-        Pos.val = [...Move.Move];
-    }
-}
-
-
-document.body.addEventListener("keydown", handleDown);
-document.body.addEventListener("keyup", handleUp);

refresh_types.ts

@@ -0,0 +1,33 @@
+import { resolve, toFileUrl } from "https://deno.land/std/path/mod.ts";
+
+async function main()
+{
+  // Look for the deno.json file in the current directory
+  const denoJsonPath = resolve("./deno.json");
+
+  // Read and parse the deno.json file
+  const denoJson = JSON.parse(await Deno.readTextFile("./deno.json"));
+
+  // Check if compilerOptions and types are defined
+  if (denoJson.compilerOptions?.types) {
+    const types:string[] = denoJson.compilerOptions.types;
+
+    // Iterate over each type file and cache it
+    for (const typeFile of types) {
+        let lookup:string = typeFile;
+        if(!typeFile.startsWith("http"))
+        {
+            lookup = toFileUrl(resolve(Deno.cwd(), typeFile)).href;
+        }
+      console.log(`Caching ${lookup}`);
+      await import(lookup); // This will cache the file
+    }
+  } else {
+    console.log("No types found in compilerOptions.");
+  }
+}
+
+main().catch((error) => {
+  console.error("Error:", error);
+  Deno.exit(1);
+});

scaffold.ts

@@ -0,0 +1,20 @@
+const hostedRoot = import.meta.resolve("./").slice(0, -1);
+console.log("Checking", hostedRoot);
+async function Download(file:string, processor = (text:string)=>text)
+{
+    const pathHosted = hostedRoot + "/scaffold/" + file;
+    try
+    {
+        const fileContents = await fetch(pathHosted).then(resp=>resp.text());
+        await Deno.writeTextFile(file, processor(fileContents));
+        console.log(`Successfully downloaded ${file}`);
+    }
+    catch (error)
+    {
+        console.error(`Error downloading ${file}:`, error);
+    }
+}
+
+Download("deno.json", t=>t.replaceAll(`{HOSTED}`, hostedRoot));
+Download("index.html", t=>t.replaceAll(`{HOSTED}`, hostedRoot));
+Download("app.js");

scaffold/app.js

@@ -0,0 +1,47 @@
+const {DOM} = Gale({
+    Button: {
+        padding: "20px",
+        background: "orange",
+        ".Inner": {
+            fontSize: "10rem"
+        }
+    },
+    Outline: {
+        border: "2px solid orange"
+    },
+    Window:{
+      height: "100vh",
+      border: "2px solid black",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "end",
+      justifyContent: "center",
+      gap: "10px"
+    },
+    Ability:{
+      width: "50px",
+      height: "50px",
+      background: "red",
+      transition: "all 0.4s",
+      ":hover":{
+        transform:"scale(1.1)"
+      }
+    },
+    Orange:{
+        background:"orange"
+    }
+});
+
+
+
+const UI =()=>
+{
+  return DOM.div.Window(
+    DOM.div.Ability(),
+    DOM.div.Ability(),
+    DOM.div.Ability(),
+    DOM.div.Ability.Orange(),
+  )
+}
+
+van.add(document.body, UI());

scaffold/deno.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "checkJs": true,
+        "lib": [ "deno.window", "DOM"],
+        "types": ["{HOSTED}/bundle.d.ts"]
+    },
+    "tasks": {
+        "dev": "deno run -Ar {HOSTED}/dev_server.ts",
+        "types": "deno run -Ar {HOSTED}/refresh_types.ts"
+    },
+    "imports": {
+        "entry":"./app.js"
+    }
+}

scaffold/index.html

@@ -0,0 +1,19 @@
+<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>
+<!-- bundled framework -->
+<script>
+{let e,t,r,o,n,l,s,i,f,h,w,a,d,u,_,c,S,g,y,b,m,v,j,x,O;s=Object.getPrototypeOf,f={},h=s(i={isConnected:1}),w=s(s),a=(e,t,r,o)=>(e??(setTimeout(r,o),new Set)).add(t),d=(e,t,o)=>{let n=r;r=t;try{return e(o)}catch(e){return console.error(e),o}finally{r=n}},u=e=>e.filter(e=>e.t?.isConnected),_=e=>n=a(n,e,()=>{for(let e of n)e.o=u(e.o),e.l=u(e.l);n=l},1e3),c={get val(){return r?.i?.add(this),this.rawVal},get oldVal(){return r?.i?.add(this),this.h},set val(o){r?.u?.add(this),o!==this.rawVal&&(this.rawVal=o,this.o.length+this.l.length?(t?.add(this),e=a(e,this,x)):this.h=o)}},S=e=>({__proto__:c,rawVal:e,h:e,o:[],l:[]}),g=(e,t)=>{let r={i:new Set,u:new Set},n={f:e},l=o;o=[];let s=d(e,r,t);s=(s??document).nodeType?s:new Text(s);for(let e of r.i)r.u.has(e)||(_(e),e.o.push(n));for(let e of o)e.t=s;return o=l,n.t=s},y=(e,t=S(),r)=>{let n={i:new Set,u:new Set},l={f:e,s:t};l.t=r??o?.push(l)??i,t.val=d(e,n,t.rawVal);for(let e of n.i)n.u.has(e)||(_(e),e.l.push(l));return t},b=(e,...t)=>{for(let r of t.flat(1/0)){let t=s(r??0),o=t===c?g(()=>r.val):t===w?g(r):r;o!=l&&e.append(o)}return e},m=(e,t,...r)=>{let[{is:o,...n},...i]=s(r[0]??0)===h?r:[{},...r],a=e?document.createElementNS(e,t,{is:o}):document.createElement(t,{is:o});for(let[e,r]of Object.entries(n)){let o=t=>t?Object.getOwnPropertyDescriptor(t,e)??o(s(t)):l,n=t+","+e,i=f[n]??=o(s(a))?.set??0,h=e.startsWith("on")?(t,r)=>{let o=e.slice(2);a.removeEventListener(o,r),a.addEventListener(o,t)}:i?i.bind(a):a.setAttribute.bind(a,e),d=s(r??0);e.startsWith("on")||d===w&&(r=y(r),d=c),d===c?g(()=>(h(r.val,r.h),a)):h(r)}return b(a,i)},v=e=>({get:(t,r)=>m.bind(l,e,r)}),j=(e,t)=>t?t!==e&&e.replaceWith(t):e.remove(),x=()=>{let r=0,o=[...e].filter(e=>e.rawVal!==e.h);do{t=new Set;for(let e of new Set(o.flatMap(e=>e.l=u(e.l))))y(e.f,e.s,e.t),e.t=l}while(++r<100&&(o=[...t]).length);let n=[...e].filter(e=>e.rawVal!==e.h);e=l;for(let e of new Set(n.flatMap(e=>e.o=u(e.o))))j(e.t,g(e.f,e.t)),e.t=l;for(let e of n)e.h=e.rawVal},O={tags:new Proxy(e=>new Proxy(m,v(e)),v()),hydrate:(e,t)=>j(e,g(t,e)),add:b,state:S,derive:y},window.van=O;}
+{let e,t,r,{fromEntries:o,entries:l,keys:n,hasOwn:f,getPrototypeOf:a}=Object,{get:i,set:y,deleteProperty:c,ownKeys:s}=Reflect,{state:m,derive:d,add:u}=van,b=1e3,w=Symbol(),A=Symbol(),S=Symbol(),_=Symbol(),g=Symbol(),p=Symbol(),P=e=>(e[A]=1,e),v=e=>e instanceof Object&&!(e instanceof Function)&&!e[p],h=e=>{if(e?.[A]){let t=m();return d(()=>{let r=e();v(t.rawVal)&&v(r)?B(t.rawVal,r):t.val=x(r)}),t}return m(x(e))},F=e=>{let t=Array.isArray(e)?[]:{__proto__:a(e)};for(let[r,o]of l(e))t[r]=h(o);return t[S]=[],t[_]=m(1),t},O={get:(e,t,r)=>t===w?e:f(e,t)?Array.isArray(e)&&"length"===t?(e[_].val,e.length):e[t].val:i(e,t,r),set:(e,o,l,n)=>f(e,o)?Array.isArray(e)&&"length"===o?(l!==e.length&&++e[_].val,e.length=l,1):(e[o].val=x(l),1):o in e?y(e,o,l,n):y(e,o,h(l))&&(++e[_].val,C(e).forEach(E.bind(t,n,o,e[o],r)),1),deleteProperty:(e,t)=>(c(e,t)&&R(e,t),++e[_].val),ownKeys:e=>(e[_].val,s(e))},x=e=>!v(e)||e[w]?e:new Proxy(F(e),O),D=e=>(e[p]=1,e),j=e=>e[w],K=a(m()),N=e=>new Proxy(e,{get:(e,t,r)=>a(e[t]??0)===K?{val:k(e[t].rawVal)}:i(e,t,r)}),k=e=>e?.[w]?new Proxy(N(e[w]),O):e,C=e=>e[S]=e[S].filter(e=>e.t.isConnected),E=(e,t,r,o,{t:l,f:f})=>{let a=Array.isArray(e),i=a?Number(t):t;u(l,()=>l[g][t]=f(r,()=>delete e[t],i)),a&&!o&&i!==e.length-1&&l.insertBefore(l.lastChild,l[g][n(e).find(e=>Number(e)>i)])},R=(e,t)=>{for(let r of C(e)){let e=r.t[g];e[t]?.remove(),delete e[t]}},T=r=>(e??(setTimeout(()=>(e.forEach(C),e=t),b),e=new Set)).add(r),q=(e,t,r)=>{let o={t:e instanceof Function?e():e,f:r},n=t[w];o.t[g]={},n[S].push(o),T(n);for(let[e,r]of l(n))E(t,e,r,1,o);return o.t},z=(e,t)=>{for(let[r,o]of l(t)){let t=e[r];v(t)&&v(o)?z(t,o):e[r]=o}for(let r in e)f(t,r)||delete e[r];let r=n(t),o=Array.isArray(e);if(o||n(e).some((e,t)=>e!==r[t])){let l=e[w];if(o)e.length=t.length;else{++l[_].val;let e={...l};for(let e of r)delete l[e];for(let t of r)l[t]=e[t]}for(let{t:e}of C(l)){let{firstChild:t,[g]:o}=e;for(let l of r)t===o[l]?t=t.nextSibling:e.insertBefore(o[l],t)}}return e},B=(e,n)=>{r=1;try{return z(e,n instanceof Function?Array.isArray(e)?n(e.filter(e=>1)):o(n(l(e))):n)}finally{r=t}},G=e=>Array.isArray(e)?e.filter(e=>1).map(G):v(e)?o(l(e).map(([e,t])=>[e,G(t)])):e;window.vanX={calc:P,reactive:x,noreactive:D,stateFields:j,raw:k,list:q,replace:B,compact:G}}
+
+const KeyQuery="@",KeyPseudo=":",KeyChild=".",KeyGroup="^",Tier=(e,t)=>`${e}{${Object.keys(t).map((e=>{const n=t[e];switch(e[0]){case"@":return Tier(`@media(max-width:${e.substring(1)})`,n);case":":return Tier(`&${e}`,n);case".":return Tier(`${e}`,n);case"^":return Tier(`&:hover .${e.substring(1)}`,n)}return`${e.replace(/([a-z])([A-Z])/g,"$1-$2")}: ${n};`})).join("\n")}}`;let i=0;globalThis.Gale=e=>{const t=i?"_"+i:"";i++;const n=Object.keys(e).map((t=>Tier("."+t,e[t]))).join("\n");globalThis.document?.head.insertAdjacentHTML("beforeend",`<style data-sheet="${i}">${n}</style>`);const r=(...e)=>{const n=(e,t)=>{const n=t.lastIndexOf(e)+e.length;return n?t.substring(n):t};return e.map((e=>n("^",n(".",e)))).join(t+" ")+t};return r.CSS=n,r.DOM=new Proxy({},{get(e,t){const n=t,r=[],s=new Proxy(((...e)=>{const t=van.tags[n](...e);return t.className=r.join(" "),t}),{get:(e,t)=>(r.push(t.substring(t.lastIndexOf(".")+1)),s)});return s}}),r};
+((t="/")=>{fetch(t+"deno.json").then((t=>t.json())).then((e=>{const n=(t,e)=>{let n=document.createElement("script");n.type=t,n.textContent=e,document.head.appendChild(n)},o=e.imports;for(let e in o){const n=o[e];n.startsWith("./")&&(o[e]=t+n.substring(2))}n("importmap",JSON.stringify({imports:o})),n("module",'import "entry"; ')}))})();
+
+vanX.Store =(obj, key)=> { const recall = localStorage.getItem(key); const store = vanX.reactive(recall ? JSON.parse(recall) : obj); van.derive(() => localStorage.setItem(key, JSON.stringify(vanX.compact(store)))); return store; }     
+</script>
+    </head>
+    <body></body>
+</html>

src/boot.js

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

src/gale.js

@@ -27,7 +27,7 @@ const Tier=(selector, obj)=>
 
 let i = 0;
 /** @type {Gale.CreateSheet} */
-const Gale = (sheet)=>
+globalThis.Gale =sheet=>
 {
     const id = i ? "_"+i : "";
     i++;
@@ -41,33 +41,29 @@ const Gale = (sheet)=>
         }
         return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
     }
-    
-    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 = [];
+                const pending = prop;
+                const 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;
+                        }
+                    }
+                );
                 return collector;
             }
         }