pyers/soma3
1
0
Fork 0
mirror of https://github.com/nvms/soma3.git synced 2025-12-13 14:40:52 +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) {
let child2 = node.firstChild;
while (child2) {
child2 = walk(child2, context) || child2.nextSibling;
let child = node.firstChild;
while (child) {
child = walk(child, context) || child.nextSibling;
}
}
var evalFuncCache = {};
@ -1245,37 +1245,21 @@ function flattenRefs(scope) {
}
// 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 = {
template: html`
<div class="hero sans-serif f2">
<div :scope="{ food: '🍕' }">
<!-- <div> -->
<div>Scoped data: {{food}}</div>
<child>Child slot, food: {{food}}</child>
<div :if="food === 'nothing'">No pizza 😢</div>
<div :else-if="food === '🍕'">Pizza!</div>
</div>
<div class="hero sans-serif f2" :scope="{ visible: true }">
<div :show="visible">ON</div>
<div :show="!visible">OFF</div>
<button @click="() => visible = !visible" class="padding-x-1 padding-y-0_5 border-radius-1">Toggle</button>
</div>
`,
main() {
return { food: ref("nothing") };
const onClick = () => {
console.log("ok");
};
return { onClick };
}
};
var app = new App2();
app.register("child", child);
app.mount(main, "#app");
//# 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 { reactive } from "./reactivity/reactive";
import { ref } from "./reactivity/ref";
import { html } from "./util";
@ -262,38 +263,60 @@ import { html } from "./util";
// ------------------------------------------------
// :scope
const child = {
template: html`
<div>
hello from child, food: "{{food}}" (does not inherit)
<div>
<slot />
</div>
</div>
`,
main() {
const food = ref("🍔");
return { food };
},
};
// const child = {
// template: html`
// <div>
// hello from child, food: "{{food}}" (does not inherit)
// <div>
// <slot />
// </div>
// </div>
// `,
// main() {
// const food = ref("🍔");
// 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 = {
template: html`
<div class="hero sans-serif f2">
<div :scope="{ food: '🍕' }">
<!-- <div> -->
<div>Scoped data: {{food}}</div>
<child>Child slot, food: {{food}}</child>
<div :if="food === 'nothing'">No pizza 😢</div>
<div :else-if="food === '🍕'">Pizza!</div>
</div>
<div class="hero sans-serif f2" :scope="{ visible: true }">
<div :show="visible">ON</div>
<div :show="!visible">OFF</div>
<button @click="() => visible = !visible" class="padding-x-1 padding-y-0_5 border-radius-1">Toggle</button>
</div>
`,
main() {
return { food: ref("nothing") };
const onClick = () => {
console.log("ok");
};
return { onClick };
},
};
const app = new App();
app.register("child", child);
app.mount(main, "#app");