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

35
app.js
View File

@ -8,6 +8,24 @@ const {DOM} = Gale({
}, },
Outline: { Outline: {
border: "2px solid orange" 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; 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({ const items = Store({
pending:"", pending:"",
todos:/** @type {Todo[]}*/([]) todos:/** @type {Todo[]}*/([])
@ -41,5 +74,3 @@ const TodoList = () => {
)), )),
) )
} }
van.add(document.body, TodoList());

18
gale.js
View File

@ -42,8 +42,13 @@ globalThis.Gale =sheet=>
return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id; return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
} }
let pending = false; classes.CSS = css;
let mentioned = []; classes.DOM = new Proxy(
{},
{get(_, prop)
{
const pending = prop;
const mentioned = [];
const collector = new Proxy( const collector = new Proxy(
(...args)=> (...args)=>
{ {
@ -59,15 +64,6 @@ globalThis.Gale =sheet=>
} }
} }
); );
classes.CSS = css;
classes.DOM = new Proxy(
{},
{get(_, prop)
{
pending = prop;
mentioned = [];
return collector; return collector;
} }
} }

11
index.html
View File

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

4
proxy.js
View File

@ -1,5 +1,5 @@
const person = van.state({name:"seth", age:41}); //const person = van.state({name:"seth", age:41});
console.log(Object.hasOwn(person, "rawVal")); //console.log(Object.hasOwn(person, "rawVal"));
/** @type {<T>(obj:T, key:string)=>T} */ /** @type {<T>(obj:T, key:string)=>T} */
const Deep =(obj, key)=> const Deep =(obj, key)=>