pyers/soma3
1
0
Fork 0
mirror of https://github.com/nvms/soma3.git synced 2025-12-15 15:10:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add practical scope demo

Browse Source
This commit is contained in:
nvms 2024-10-20 20:35:21 -04:00
parent 4067cc710a
commit 4e18b46c89
3 changed files with 61 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/demo.js
View File

@ -1197,9 +1197,9 @@ function walk(node, context) {
} }
} }
function walkChildren(node, context) { function walkChildren(node, context) {
let child2 = node.firstChild; let child = node.firstChild;
while (child2) { while (child) {
child2 = walk(child2, context) || child2.nextSibling; child = walk(child, context) || child.nextSibling;
} }
} }
var evalFuncCache = {}; var evalFuncCache = {};
@ -1245,37 +1245,21 @@ function flattenRefs(scope) {
} }
// src/demo.ts // src/demo.ts
var child = {
template: html`
<div>
hello from child, food: "{{food}}" (does not inherit)
<div>
<slot />
</div>
</div>
`,
main() {
const food = ref("\u{1F354}");
return { food };
}
};
var main = { var main = {
template: html` template: html`
<div class="hero sans-serif f2"> <div class="hero sans-serif f2" :scope="{ visible: true }">
<div :scope="{ food: '🍕' }"> <div :show="visible">ON</div>
<!-- <div> --> <div :show="!visible">OFF</div>
<div>Scoped data: {{food}}</div> <button @click="() => visible = !visible" class="padding-x-1 padding-y-0_5 border-radius-1">Toggle</button>
<child>Child slot, food: {{food}}</child>
<div :if="food === 'nothing'">No pizza 😢</div>
<div :else-if="food === '🍕'">Pizza!</div>
</div>
</div> </div>
`, `,
main() { main() {
return { food: ref("nothing") }; const onClick = () => {
console.log("ok");
};
return { onClick };
} }
}; };
var app = new App2(); var app = new App2();
app.register("child", child);
app.mount(main, "#app"); app.mount(main, "#app");
//# sourceMappingURL=demo.js.map //# sourceMappingURL=demo.js.map

6
public/demo.js.map
View File

File diff suppressed because one or more lines are too long

71
src/demo.ts
View File

@ -1,4 +1,5 @@
import { App } from "."; import { App } from ".";
import { reactive } from "./reactivity/reactive";
import { ref } from "./reactivity/ref"; import { ref } from "./reactivity/ref";
import { html } from "./util"; import { html } from "./util";
@ -262,38 +263,60 @@ import { html } from "./util";
// ------------------------------------------------ // ------------------------------------------------
// :scope // :scope
const child = { // const child = {
template: html` // template: html`
<div> // <div>
hello from child, food: "{{food}}" (does not inherit) // hello from child, food: "{{food}}" (does not inherit)
<div> // <div>
<slot /> // <slot />
</div> // </div>
</div> // </div>
`, // `,
main() { // main() {
const food = ref("🍔"); // const food = ref("🍔");
return { food }; // return { food };
}, // },
}; // };
//
// const main = {
// template: html`
// <div class="hero sans-serif f2" :scope="{ drink: '🍹' }">
// <div :scope="{ food: '🍕' }">
// <!-- <div> -->
// <div>Scoped data: {{food}}</div>
// <child>Child slot, food: {{food}} {{drink}}</child>
// <div :if="food === 'nothing'">No pizza 😢</div>
// <div :else-if="food === '🍕'">Pizza!</div>
// </div>
// </div>
// `,
// main() {
// return { food: ref("nothing") };
// },
// };
//
// const app = new App();
// app.register("child", child);
// app.mount(main, "#app");
// ------------------------------------------------
// Practical :scope demo
const main = { const main = {
template: html` template: html`
<div class="hero sans-serif f2"> <div class="hero sans-serif f2" :scope="{ visible: true }">
<div :scope="{ food: '🍕' }"> <div :show="visible">ON</div>
<!-- <div> --> <div :show="!visible">OFF</div>
<div>Scoped data: {{food}}</div> <button @click="() => visible = !visible" class="padding-x-1 padding-y-0_5 border-radius-1">Toggle</button>
<child>Child slot, food: {{food}}</child>
<div :if="food === 'nothing'">No pizza 😢</div>
<div :else-if="food === '🍕'">Pizza!</div>
</div>
</div> </div>
`, `,
main() { main() {
return { food: ref("nothing") }; const onClick = () => {
console.log("ok");
};
return { onClick };
}, },
}; };
const app = new App(); const app = new App();
app.register("child", child);
app.mount(main, "#app"); app.mount(main, "#app");