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

fix gale nested calls

Browse Source
This commit is contained in:
Seth Trowbridge 2025-02-22 09:37:11 -05:00
parent e089203b2f
commit 2451055d9f
4 changed files with 55 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app.js
View File

@ -8,6 +8,24 @@ const {DOM} = Gale({
},
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)"
}
}
});
@ -22,6 +40,21 @@ const Store =(obj, key)=> {
return store;
}
const UI =()=>
{
return DOM.div.Window(
DOM.div.Ability(),
DOM.div.Ability(),
DOM.div.Ability(),
)
}
van.add(document.body, UI());
const items = Store({
pending:"",
todos:/** @type {Todo[]}*/([])
@ -40,6 +73,4 @@ const TodoList = () => {
a({onclick: deleter}, "❌"),
)),
)
}
van.add(document.body, TodoList());
}

40
gale.js
View File

@ -41,33 +41,29 @@ globalThis.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;
}
}

11
index.html
View File

@ -3,21 +3,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<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 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>
</html>

4
proxy.js
View File

@ -1,5 +1,5 @@
const person = van.state({name:"seth", age:41});
console.log(Object.hasOwn(person, "rawVal"));
//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)=>