Merge branch 'main' into all-contributors/add-thednp

.all-contributorsrc

@@ -521,6 +521,72 @@
         "plugin",
         "code"
       ]
+    },
+    {
+      "login": "pearmini",
+      "name": "Bairui Su",
+      "avatar_url": "https://avatars.githubusercontent.com/u/49330279?v=4",
+      "profile": "https://github.com/pearmini",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "jroush-ipg",
+      "name": "jroush-ipg",
+      "avatar_url": "https://avatars.githubusercontent.com/u/144253148?v=4",
+      "profile": "https://github.com/jroush-ipg",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "kangaroolab",
+      "name": "kangaroolab",
+      "avatar_url": "https://avatars.githubusercontent.com/u/163623573?v=4",
+      "profile": "https://github.com/kangaroolab",
+      "contributions": [
+        "example"
+      ]
+    },
+    {
+      "login": "gramie",
+      "name": "Graham Stratford",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1507443?v=4",
+      "profile": "https://github.com/gramie",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "kursataktas",
+      "name": "Kursat Aktas",
+      "avatar_url": "https://avatars.githubusercontent.com/u/17837825?v=4",
+      "profile": "https://github.com/kursataktas",
+      "contributions": [
+        "code",
+        "plugin"
+      ]
+    },
+    {
+      "login": "bleistivt",
+      "name": "bleistivt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5205806?v=4",
+      "profile": "http://bleistivt.net",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "dbismut",
+      "name": "David Bismut",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5003380?v=4",
+      "profile": "https://github.com/dbismut",
+      "contributions": [
+        "code",
+        "plugin",
+        "bug"
+      ]
     }
   ],
   "repoType": "github"

.vscode/settings.json

@@ -2,7 +2,8 @@
   "deno.enablePaths": [
     "demo/terminal/server.ts",
     "components/scripts",
-    "x/scripts"
+    "x/scripts",
+    "graph/scripts"
   ],
   "cSpell.words": [
     "currentcolor",

README.md

@@ -1,7 +1,8 @@
+[![Gurubase](https://img.shields.io/badge/Gurubase-Ask%20VanJS%20Guru-006BFF)](https://gurubase.io/g/vanjs)
+
 # 🍦 **VanJS**: The Smallest Reactive UI Framework in the World
 
 📣 [Introducing VanX →](https://github.com/vanjs-org/van/discussions/144) <br>
-📣 [Introducing VanJS App Builder →](https://github.com/vanjs-org/van/discussions/179)
 
 <div align="center">
   <table>
@@ -111,10 +112,12 @@ Simplicity at its core. Only 5 functions (`van.tags`, `van.add`, `van.state`, `v
 * Get bored? [Play a fun game](https://vanjs.org/demo#game) built with **VanJS** under 60 lines
 * Convert HTML or MD snippet to **VanJS** code with our online [HTML/MD to **VanJS** Converter](https://vanjs.org/convert)
 * Check out [**VanUI**](https://github.com/vanjs-org/van/tree/main/components) - A collection of grab 'n go reusable utility and UI components for **VanJS**
-* Want reactive list, global app state, server-driven UI, serialization and more? Check out [**VanX**](https://vanjs.org/x) - The 1.1 kB official **VanJS** extension
+* Want reactive list, global app state, server-driven UI, serialization and more? Check out [**VanX**](https://vanjs.org/x) - The 1.2kB official **VanJS** extension
 * Want server-side rendering? Check out [**Mini-Van**](https://github.com/vanjs-org/mini-van) and [Hydration](https://vanjs.org/ssr) (the entire [vanjs.org](https://vanjs.org/) site is built on top of **Mini-Van**)
+* Debugging complex dependencies in your app? checkout [**VanGraph**](https://github.com/vanjs-org/van/tree/main/graph)
 * For questions, feedback or general discussions, visit our [Discussions](https://github.com/vanjs-org/van/discussions) page
 * [How did **VanJS** get its name?](https://vanjs.org/about#name)
+* ✨ [Ask **VanJS** Guru](https://gurubase.io/g/vanjs) - a **VanJS**-focused AI to answer your questions
 
 ## IDE Plug-ins
 
@@ -130,7 +133,7 @@ Simplicity at its core. Only 5 functions (`van.tags`, `van.add`, `van.state`, `v
 
 > In the name of **Van**illa of the House **J**ava**S**cript, [the First of its name](https://vanjs.org/about#name), Smallest Reactive UI Framework, 1.0kB JSX-free Grab 'n Go Library, [Scripting Language](https://vanjs.org/about#story) for GUI, [GPT-Empowered](https://chat.openai.com/g/g-7tcSHUu27-vanjs-app-builder) Toolkit, by the word of Tao of the House Xin, Founder and Maintainer of **VanJS**, I do hereby grant you the permission of **VanJS** under [MIT License](https://github.com/vanjs-org/van/blob/main/LICENSE).
 
-Contact us: [@taoxin](https://twitter.com/intent/follow?region=follow_link&screen_name=taoxin) / [[email protected]](mailto:[email protected]) / [Tao Xin](https://www.linkedin.com/in/tao-xin-64234920/)
+Contact us: [@taoxin](https://twitter.com/intent/follow?region=follow_link&screen_name=taoxin) / [[email protected]](mailto:[email protected]) / [Tao Xin](https://www.linkedin.com/in/taoxin/)
 
 ## Community Add-ons
 
@@ -150,7 +153,7 @@ Contact us: [@taoxin](https://twitter.com/intent/follow?region=follow_link&scree
 | [vanrx](https://github.com/MeddahAbdellah/vanrx) | An ultra-lightweight Redux addon for **VanJS** | [Meddah Abdallah](https://github.com/MeddahAbdellah) |
 | [VanFS](https://github.com/ken-okabe/vanfs) | 1:1 bindings from F# to **VanJS** | [Ken Okabe](https://github.com/ken-okabe) |
 
-## Contributors (53)
+## Contributors (61)
 
 *If I miss anyone's contribution here, apologies for my oversight 🙏, please comment on [#87](https://github.com/vanjs-org/van/issues/87) to let me know.*
 
@@ -230,6 +233,15 @@ Contact us: [@taoxin](https://twitter.com/intent/follow?region=follow_link&scree
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ken-okabe/vanfs"><img src="https://avatars.githubusercontent.com/u/1316994?v=4?s=100" width="100px;" alt="Ken Okabe"/><br /><sub><b>Ken Okabe</b></sub></a><br /><a href="#plugin-ken-okabe" title="Plugin/utility libraries">🔌</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://gamedev.stackexchange.com/users/5473/arcane-engineer"><img src="https://avatars.githubusercontent.com/u/7487822?v=4?s=100" width="100px;" alt="Nick"/><br /><sub><b>Nick</b></sub></a><br /><a href="#example-ArcaneEngineer" title="Examples">💡</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/thednp"><img src="https://avatars.githubusercontent.com/u/6761246?v=4?s=100" width="100px;" alt="thednp"/><br /><sub><b>thednp</b></sub></a><br /><a href="#plugin-thednp" title="Plugin/utility libraries">🔌</a> <a href="https://github.com/vanjs-org/van/commits?author=thednp" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/pearmini"><img src="https://avatars.githubusercontent.com/u/49330279?v=4?s=100" width="100px;" alt="Bairui Su"/><br /><sub><b>Bairui Su</b></sub></a><br /><a href="https://github.com/vanjs-org/van/commits?author=pearmini" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/jroush-ipg"><img src="https://avatars.githubusercontent.com/u/144253148?v=4?s=100" width="100px;" alt="jroush-ipg"/><br /><sub><b>jroush-ipg</b></sub></a><br /><a href="https://github.com/vanjs-org/van/issues?q=author%3Ajroush-ipg" title="Bug reports">🐛</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/kangaroolab"><img src="https://avatars.githubusercontent.com/u/163623573?v=4?s=100" width="100px;" alt="kangaroolab"/><br /><sub><b>kangaroolab</b></sub></a><br /><a href="#example-kangaroolab" title="Examples">💡</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/gramie"><img src="https://avatars.githubusercontent.com/u/1507443?v=4?s=100" width="100px;" alt="Graham Stratford"/><br /><sub><b>Graham Stratford</b></sub></a><br /><a href="https://github.com/vanjs-org/van/issues?q=author%3Agramie" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/kursataktas"><img src="https://avatars.githubusercontent.com/u/17837825?v=4?s=100" width="100px;" alt="Kursat Aktas"/><br /><sub><b>Kursat Aktas</b></sub></a><br /><a href="https://github.com/vanjs-org/van/commits?author=kursataktas" title="Code">💻</a> <a href="#plugin-kursataktas" title="Plugin/utility libraries">🔌</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://bleistivt.net"><img src="https://avatars.githubusercontent.com/u/5205806?v=4?s=100" width="100px;" alt="bleistivt"/><br /><sub><b>bleistivt</b></sub></a><br /><a href="https://github.com/vanjs-org/van/issues?q=author%3Ableistivt" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/dbismut"><img src="https://avatars.githubusercontent.com/u/5003380?v=4?s=100" width="100px;" alt="David Bismut"/><br /><sub><b>David Bismut</b></sub></a><br /><a href="https://github.com/vanjs-org/van/commits?author=dbismut" title="Code">💻</a> <a href="#plugin-dbismut" title="Plugin/utility libraries">🔌</a> <a href="https://github.com/vanjs-org/van/issues?q=author%3Adbismut" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

addons/van_jsx/src/createElement.js

@@ -18,6 +18,15 @@ const createElement = (jsxTag, { children, style, ref, ...props }) => {
                 ele.addEventListener(key.replace("on", "").toLowerCase(), value);
                 continue;
             }
+
+            // Handle reactive attributes
+            if (typeof value === "object" && "val" in value) {
+                van.derive(() => {
+                  setAttribute(ele, key, value.val);
+                });
+                continue;
+            }
+
             setAttribute(ele, key, value);
             continue;
         }

addons/van_jsx/src/hyper.js

@@ -34,4 +34,12 @@ export const setAttribute = (element, key, value) => {
         element.setAttribute(key, value);
         return;
     }
+    // Set Boolean Attribute
+    if (typeof value === "boolean") {
+        if (value) {
+          element.setAttribute(key, "");
+          return;
+        }
+        element.removeAttribute(key);
+    }
 };

bun-examples/hydration/README.md

@@ -7,8 +7,8 @@ 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.6",
-    "vanjs-core": "^1.5.0"
+    "mini-van-plate": "^0.6.1",
+    "vanjs-core": "^1.5.2"
   },
   "devDependencies": {
     "bun": "^1.0.0",

bun-examples/hydration/package.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.6",
-    "vanjs-core": "^1.5.0"
+    "mini-van-plate": "^0.6.1",
+    "vanjs-core": "^1.5.2"
   },
   "devDependencies": {
-    "bun": "^1.0.0",
-    "bun-types": "^1.0.1"
+    "@types/bun": "^1.1.6",
+    "bun": "^1.0.0"
   }
 }

bun-examples/hydration/src/client.ts

@@ -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/components/counter.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/hello.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/optimized-counter.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]),