Upgrade Mini-Van to 0.6.0

Author: Tao-VanJS

bun-examples/hydration/README.md

@@ -7,7 +7,7 @@ This is a [Bun 1.0](https://bun.sh/blog/bun-v1.0)-based variation of the fullsta
 
 ```json
   "dependencies": {
-    "mini-van-plate": "^0.5.7",
+    "mini-van-plate": "^0.6.0",
     "vanjs-core": "^1.5.0"
   },
   "devDependencies": {

bun-examples/hydration/package-lock.json

@@ -8,11 +8,11 @@
     "build": "bun build --minify src/client.ts --outdir dist && echo Run the following command to start the server: bun src/server.ts [port]"
   },
   "dependencies": {
-    "mini-van-plate": "^0.5.7",
+    "mini-van-plate": "^0.6.0",
     "vanjs-core": "^1.5.0"
   },
   "devDependencies": {
-    "bun": "^1.0.0",
-    "bun-types": "^1.0.1"
+    "@types/bun": "^1.1.6",
+    "bun": "^1.0.0"
   }
 }

bun-examples/hydration/package.json

@@ -1,14 +1,16 @@
 import van from "vanjs-core"
+import { registerEnv } from "mini-van-plate/shared"
 import Hello from "./components/hello.js"
 import Counter from "./components/counter.js"
 
+registerEnv({van})
+
 const {button, p} = van.tags
 
-van.add(document.getElementById("hello-container")!, Hello({van}))
+van.add(document.getElementById("hello-container")!, Hello())
 
 const hydrate = () => {
   van.hydrate(document.getElementById("basic-counter")!, dom => Counter({
-    van,
     id: dom.id,
     init: Number(dom.getAttribute("data-counter")),
   }))
@@ -17,7 +19,6 @@ const hydrate = () => {
   const buttonStyle = van.state(styleSelectDom.value)
   styleSelectDom.oninput = e => buttonStyle.val = (<HTMLSelectElement>e.target).value
   van.hydrate(document.getElementById("styled-counter")!, dom => Counter({
-    van,
     id: dom.id,
     init: Number(dom.getAttribute("data-counter")),
     buttonStyle,

bun-examples/hydration/src/client.ts

@@ -1,24 +1,21 @@
-import { VanObj, State } from "mini-van-plate/shared"
+import { env, State } from "mini-van-plate/shared"
 
 interface Props {
-  van: VanObj
-  id?: string
-  init?: number
-  buttonStyle?: string | State<string>
+  readonly id?: string
+  readonly init?: number
+  readonly buttonStyle?: string | State<string>
 }
 
-export default ({
-  van, id, init = 0, buttonStyle = "👍👎",
-}: Props) => {
-  const {button, div} = van.tags
+export default ({id, init = 0, buttonStyle = "👍👎"}: Props) => {
+  const {button, div} = env.van.tags
 
-  const stateProto = Object.getPrototypeOf(van.state())
+  const stateProto = Object.getPrototypeOf(env.van.state())
 
   const val = <T>(v: T | State<T>) =>
     Object.getPrototypeOf(v ?? 0) === stateProto ? (<State<T>>v).val : <T>v
 
   const [up, down] = [...val(buttonStyle)]
-  const counter = van.state(init)
+  const counter = env.van.state(init)
   return div({...(id ? {id} : {}), "data-counter": counter},
     "❤️ ", counter, " ",
     button({onclick: () => ++counter.val}, up),

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

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

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

@@ -1,23 +1,20 @@
-import { VanObj, State } from "mini-van-plate/shared"
+import { env, State } from "mini-van-plate/shared"
 
 interface Props {
-  van: VanObj
-  id?: string
-  init?: number
-  buttonStyle?: string | State<string>
+  readonly id?: string
+  readonly init?: number
+  readonly buttonStyle?: string | State<string>
 }
 
-export default ({
-  van, id, init = 0, buttonStyle = "👍👎",
-}: Props) => {
-  const {button, div} = van.tags
+export default ({id, init = 0, buttonStyle = "👍👎"}: Props) => {
+  const {button, div} = env.van.tags
 
-  const stateProto = Object.getPrototypeOf(van.state())
+  const stateProto = Object.getPrototypeOf(env.van.state())
 
   const val = <T>(v: T | State<T>) =>
     Object.getPrototypeOf(v ?? 0) === stateProto ? (<State<T>>v).val : <T>v
 
-  const counter = van.state(init)
+  const counter = env.van.state(init)
   return div({...(id ? {id} : {}), "data-counter": counter},
     "❤️ ", counter, " ",
     button({onclick: () => ++counter.val}, () => [...val(buttonStyle)][0]),

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

@@ -1,9 +1,12 @@
 import van from "mini-van-plate/van-plate"
+import { registerEnv } from "mini-van-plate/shared"
 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
 
+registerEnv({van})
+
 const server = Bun.serve({
   port: Bun.argv[2] ?? 8080,
   fetch(req) {
@@ -19,13 +22,11 @@ const server = Bun.serve({
       body(
         script({type: "text/javascript", src: `dist/client.js`, defer: true}),
         h1("Hello Components"),
-        div({id: "hello-container"},
-          Hello({van}),
-        ),
+        div({id: "hello-container"}, Hello()),
         h1("Counter Components"),
         div({id: "counter-container"},
           h2("Basic Counter"),
-          Counter({van, id: "basic-counter", init: counterInit}),
+          Counter({id: "basic-counter", init: counterInit}),
           h2("Styled Counter"),
           p("Select the button style: ",
             select({id: "button-style", value: "👆👇"},
@@ -36,7 +37,7 @@ const server = Bun.serve({
               option("📈📉"),
             ),
           ),
-          Counter({van, id: "styled-counter", init: counterInit, buttonStyle: "👆👇"}),
+          Counter({id: "styled-counter", init: counterInit, buttonStyle: "👆👇"}),
         ),
       )
     ), {headers: {"Content-Type": "text/html; charset=UTF-8"}})

bun-examples/hydration/src/server.ts

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM"],
     "module": "ESNext",
     "target": "ESNext",
     "moduleResolution": "bundler",
@@ -14,13 +14,7 @@
     "jsx": "preserve",
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
-    "allowJs": true,
-    "types": [
-      "bun-types" // add Bun global
-    ]
+    "allowJs": true
   },
-  "include": [
-    "src/components/*.ts",
-    "src/server.ts"
-  ]
+  "include": ["src"]
 }