SethTrowbridge/gale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bunch of edits

Browse Source
This commit is contained in:
Seth Trowbridge 2025-02-19 17:01:11 -05:00
parent 8d82c41f81
commit e089203b2f
6 changed files with 96 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app.js
View File

@ -12,8 +12,34 @@ const {DOM} = Gale({
}); });
const el = DOM.a.Button.Outline({onclick(){console.log("clicked!")}}, "Click!"); /** @typedef {{done:boolean, text:string}} Todo */
console.log(el);
/** @type {<T extends object>(obj:T, key:string)=>T} */
const 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;
}
van.add(document.body, el, DOM.h1.Outline["Button.Inner"]("title")); const items = Store({
pending:"",
todos:/** @type {Todo[]}*/([])
}, "Todos?");
const {div, input, button, del, span, a} = van.tags;
const TodoList = () => {
const inputDom = input({type: "text", value:()=>items.pending, oninput(){items.pending = this.value}});
return div(
()=>div(items.pending),
inputDom, DOM.button.Outline.Button({onclick: () => items.todos.push({text: inputDom.value, done: false})}, "Add"),
vanX.list(div, items.todos, ({val: v}, deleter) => div(
input({type: "checkbox", checked: () => v.done, onclick: e => v.done = e.target.checked}),
() => (v.done ? del : span)(v.text),
a({onclick: deleter}, "❌"),
)),
)
}
van.add(document.body, TodoList());

2
gale.js
View File

@ -27,7 +27,7 @@ const Tier=(selector, obj)=>
let i = 0; let i = 0;
/** @type {Gale.CreateSheet} */ /** @type {Gale.CreateSheet} */
const Gale = (sheet)=> globalThis.Gale =sheet=>
{ {
const id = i ? "_"+i : ""; const id = i ? "_"+i : "";
i++; i++;

13
index.html
View File

@ -5,8 +5,19 @@
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<script src="https://vanjs.org/code/van-1.5.3.nomodule.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.3.nomodule.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanjs-ext@0.6.2/dist/van-x.nomodule.min.js" ></script>
<script src="./gale.js"></script> <script src="./gale.js"></script>
<script type="module" src="app.js"></script> <script type="module" src="app.js"></script>
<script type="module">
import Deep from "./proxy.js";
const d1 = Deep({name:"seth", age:41, tags:[]}, "p1");
const dig = d1.name.other;
const dig2 = dig.so.deep;
</script>
</body> </body>
</html> </html>

32
proxy.js Normal file
View File

@ -0,0 +1,32 @@
const person = van.state({name:"seth", age:41});
console.log(Object.hasOwn(person, "rawVal"));
/** @type {<T>(obj:T, key:string)=>T} */
const Deep =(obj, key)=>
{
const proxInner =(context, key)=> new Proxy({}, {
get(_, prop)
{
const path = key+" . "+prop;
console.log(path, "accessed!");
const value = context[key];
return proxInner(value, path);
}
});
const proxOuter = new Proxy({}, {
get(_, prop)
{
return proxInner(obj, prop);
},
set(_, prop, val)
{
obj[prop] = val;
}
});
return proxOuter;
}
export default Deep;

9
proxy.test.ts Normal file
View File

@ -0,0 +1,9 @@
import * as assert from "jsr:@std/assert";
import Deep from "./proxy.js";
Deno.test("proxy", ()=>{
const d1 = Deep({name:"seth", age:41, tags:[]}, "p1");
const dig = d1.name.other;
const dig2 = dig.so.deep;
});

5
types.d.ts vendored
View File

@ -62,7 +62,10 @@ declare global
readonly noreactive: <T extends object>(obj: T) => T readonly noreactive: <T extends object>(obj: T) => T
readonly stateFields: <T extends object>(obj: T) => VanX.StateOf<T> readonly stateFields: <T extends object>(obj: T) => VanX.StateOf<T>
readonly raw: <T extends object>(obj: T) => 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 replace: <T extends object>(obj: T, replacement: VanX.ReplacementFunc<T> | T) => T
readonly compact: <T extends object>(obj: T) => T readonly compact: <T extends object>(obj: T) => T
}; };