example for scope mini-van-plate

bun-examples/hydration/src/client.ts

@@ -1,27 +1,26 @@
-import van from "vanjs-core"
-import Hello from "./components/hello.js"
-import Counter from "./components/counter.js"
-
-const {button, p} = van.tags
-
-van.add(document.getElementById("hello-container")!, Hello({van}))
+import {vanWrap, vanWrapper} from "mini-van-plate/shared";
+import vanOriginal from "vanjs-core";
+import Counter from "./components/counter.js";
+import Hello from "./components/hello.js";
 
 const hydrate = () => {
-  van.hydrate(document.getElementById("basic-counter")!, dom => Counter({
-    van,
+  vanOriginal.hydrate(document.getElementById("basic-counter")!, dom => Counter({
     id: dom.id,
     init: Number(dom.getAttribute("data-counter")),
   }))
 
   const styleSelectDom = <HTMLSelectElement>document.getElementById("button-style")
   const buttonStyle = van.state(styleSelectDom.value)
   styleSelectDom.oninput = e => buttonStyle.val = (<HTMLSelectElement>e.target).value
-  van.hydrate(document.getElementById("styled-counter")!, dom => Counter({
-    van,
+  vanOriginal.hydrate(document.getElementById("styled-counter")!, dom => Counter({
     id: dom.id,
     init: Number(dom.getAttribute("data-counter")),
     buttonStyle,
   }))
 }
 
-van.add(document.getElementById("counter-container")!, p(button({onclick: hydrate}, "Hydrate")))
+vanWrap(vanOriginal, (van) => {
+  const {button, p} = van.tags
+  van.add(document.getElementById("hello-container")!, Hello({}))
+  van.add(document.getElementById("counter-container")!, p(button({onclick: vanWrapper(hydrate)}, "Hydrate")))
+})

bun-examples/hydration/src/components/counter.ts

@@ -1,15 +1,20 @@
-import { VanObj, State } from "mini-van-plate/shared"
+import {State, getVan, vanWrapper} from "mini-van-plate/shared"
 
 interface Props {
-  van: VanObj
   id?: string
   init?: number
   buttonStyle?: string | State<string>
 }
 
+function Heart(counter: number) {
+  const {span} = getVan().tags
+  return span("❤️ ", counter, " ")
+}
+
 export default ({
-  van, id, init = 0, buttonStyle = "👍👎",
+  id, init = 0, buttonStyle = "👍👎",
 }: Props) => {
+  const van = getVan();
   const {button, div} = van.tags
 
   const stateProto = Object.getPrototypeOf(van.state())
@@ -20,7 +25,7 @@ export default ({
   const [up, down] = [...val(buttonStyle)]
   const counter = van.state(init)
   return div({...(id ? {id} : {}), "data-counter": counter},
-    "❤️ ", counter, " ",
+    vanWrapper(() => Heart(counter.val)),
     button({onclick: () => ++counter.val}, up),
     button({onclick: () => --counter.val}, down),
   )

bun-examples/hydration/src/components/hello.ts

@@ -1,10 +1,7 @@
-import { VanObj } from "mini-van-plate/shared"
+import {getVan} from "mini-van-plate/shared"
 
-interface Props {
-  van: VanObj
-}
-
-export default ({van} : Props) => {
+export default () => {
+  const van = getVan()
   const {a, div, li, p, ul} = van.tags
 
   const fromServer = typeof window === "undefined"

bun-examples/hydration/src/server.ts

@@ -1,8 +1,7 @@
+import {vanWrap} from "mini-van-plate/shared"
 import van from "mini-van-plate/van-plate"
-import Hello from "./components/hello.js"
 import Counter from "./components/counter.js"
-
-const {body, div, h1, h2, head, link, meta, option, p, script, select, title} = van.tags
+import Hello from "./components/hello.js"
 
 const server = Bun.serve({
   port: Bun.argv[2] ?? 8080,
@@ -11,35 +10,40 @@ const server = Bun.serve({
     if (url.pathname.endsWith(".js")) return new Response(Bun.file("." + url.pathname))
     const counterInit = Number(url.searchParams.get("counter-init"))
     return new Response(van.html(
-      head(
-        link({rel: "icon", href: "logo.svg"}),
-        title("SSR and Hydration Example"),
-        meta({name: "viewport", content: "width=device-width, initial-scale=1"}),
-      ),
-      body(
-        script({type: "text/javascript", src: `dist/client.js`, defer: true}),
-        h1("Hello Components"),
-        div({id: "hello-container"},
-          Hello({van}),
-        ),
-        h1("Counter Components"),
-        div({id: "counter-container"},
-          h2("Basic Counter"),
-          Counter({van, id: "basic-counter", init: counterInit}),
-          h2("Styled Counter"),
-          p("Select the button style: ",
-            select({id: "button-style", value: "👆👇"},
-              option("👆👇"),
-              option("👍👎"),
-              option("🔼🔽"),
-              option("⏫⏬"),
-              option("📈📉"),
-            ),
+      ...vanWrap(van, (van) => {
+        const {body, div, h1, h2, head, link, meta, option, p, script, select, title} = van.tags
+        return [
+          head(
+            link({rel: "icon", href: "logo.svg"}),
+            title("SSR and Hydration Example"),
+            meta({name: "viewport", content: "width=device-width, initial-scale=1"}),
           ),
-          Counter({van, id: "styled-counter", init: counterInit, buttonStyle: "👆👇"}),
-        ),
-      )
-    ), {headers: {"Content-Type": "text/html; charset=UTF-8"}})
+          body(
+            script({type: "text/javascript", src: `dist/client.js`, defer: true}),
+            h1("Hello Components"),
+            div({id: "hello-container"},
+              Hello({van}),
+            ),
+            h1("Counter Components"),
+            div({id: "counter-container"},
+              h2("Basic Counter"),
+              Counter({van, id: "basic-counter", init: counterInit}),
+              h2("Styled Counter"),
+              p("Select the button style: ",
+                select({id: "button-style", value: "👆👇"},
+                  option("👆👇"),
+                  option("👍👎"),
+                  option("🔼🔽"),
+                  option("⏫⏬"),
+                  option("📈📉"),
+                ),
+              ),
+              Counter({van, id: "styled-counter", init: counterInit, buttonStyle: "👆👇"}),
+            ),
+          )
+        ]
+      }
+      )), {headers: {"Content-Type": "text/html; charset=UTF-8"}})
   }
 })
 console.log(`Try visiting the server via http://localhost:${server.port}.