VanJS: Getting Started
To get started, add the line below to your script:
import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.1.min.js"
To code without ES6 modules, add the following line to your HTML file instead:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.1.nomodule.min.js"></script>
Alternative, you can download the files (van-1.2.1.min.js
, van-1.2.1.nomodule.min.js
) and serve them locally.
NPM Integration
It's also possible to integrate with VanJS via NPM, making it handy to build web applications with tools like Vite or Parcel. You can also build your own NPM packages that depend on VanJS. To get started with VanJS via NPM, run:
npm install vanjs-core
To use the VanJS NPM package, add this line to your script:
import van from "vanjs-core"
or this line if you want to import the debug version of VanJS:
import van from "vanjs-core/debug"
You can check out the Hello World
app built with VanJS NPM + Vite (source code).
Test It Out
The following code will produce a funnier Hello
component:
const {button, div, pre} = van.tags
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const Run = ({sleepMs}) => {
const headingSpaces = van.state(40), trailingUnderscores = van.state(0)
const animate = async () => {
while (headingSpaces.val > 0) {
await sleep(sleepMs)
--headingSpaces.val, ++trailingUnderscores.val
}
}
animate()
return pre(() =>
`${" ".repeat(headingSpaces.val)}ππ¨Hello VanJS!${"_".repeat(trailingUnderscores.val)}`)
}
const Hello = () => {
const dom = div()
return div(
dom,
button({onclick: () => van.add(dom, Run({sleepMs: 2000}))}, "Hello π"),
button({onclick: () => van.add(dom, Run({sleepMs: 500}))}, "Hello π’"),
button({onclick: () => van.add(dom, Run({sleepMs: 100}))}, "Hello πΆββοΈ"),
button({onclick: () => van.add(dom, Run({sleepMs: 10}))}, "Hello ποΈ"),
button({onclick: () => van.add(dom, Run({sleepMs: 2}))}, "Hello π"),
)
}
van.add(document.body, Hello())
Demo: