SPA?

[zhcy2050]

Is there any solution for SPA web. Since van's size so small, will be fast to load and show, so to be the best SPA framework ever.

[Tao-VanJS]

VanJS enables you to build reusable UI components and do reactive state bindings, which are quite handy for building SPA (single-page-applications). VanJS doesn't have a built-in routing solution and is unopinionated about routing, thus you can bring your own routing solution to the app you want to build.

[artydev]

Here is a simple example using ViteJS Van&Vite
Very simple to setup.
For routing you can use Navigo
Regards

[ansarizafar]

I would like to see a builtin router specially designed for Vanjs.

[Tao-VanJS]

Hi @zhcy2050, @ansarizafar,

Here is an SPA example with client-side routing support, based on VanJS's powerful builtin state management and state derivation:

https://vanjs.org/demo#code-browser

[iuroc]

Hello, I've implemented a routing management library that is very easy to use. I have published it on both GitHub and the Npm repository.

Npm: https://www.npmjs.com/package/vanjs-router
GitHub: https://github.com/iuroc/vanjs-router
Demo: https://iuroc.github.io/vanjs-router/

vanjs-router 1.1.7

Frontend routing control system based on Van.js

Installation

Install van.js and vanjs-router.

npm install vanjs-core vanjs-router

Import and Usage

import van from 'vanjs-core'
import { Route, routeTo } from 'vanjs-router'

const { button, div } = van.tags

const App = () => {
    return div(
        Route({ name: 'home' },
            'Page Home. ',
            button({ onclick: () => routeTo('about') }, 'Go To About'),
            ' ',
            button({ onclick: () => routeTo('list', ['hot', '15']) }, 'Go To Hot List'),
        ),
        Route({ name: 'about' },
            button({ onclick: () => routeTo('home') }, 'Back To Home'), ' ',
            'Page About.',
        ),
        () => {
            const listType = van.state('')
            const listId = van.state('')
            const welcome = van.state('')
            return Route({
                name: 'list',
                onFirst() {
                    welcome.val = 'Welcome!'
                },
                onLoad(route) {
                    let [type, id] = route.args
                    listType.val = type
                    listId.val = id
                }
            },
                button({ onclick: () => routeTo('home') }, 'Back To Home'), ' ',
                welcome,
                div('List Type: ', listType),
                div('List Id: ', listId),
            )
        }
    )
}

van.add(document.body, App())

Switch Routes

routeTo('home')               // location.hash = ''
routeTo('about')              // location.hash = '#/about'
routeTo('list', ['hot', 15])  // location.hash = '#/list/hot/15'

vanjs-router 1.0.2

Frontend routing control system based on Van.js

Installation

Install van.js and vanjs-router.

npm install vanjs-core vanjs-router

Import and Usage

import van from 'vanjs-core'
import { router, Route } from 'vanjs-router'

const { div } = van.tags

const App = () => {
    return div(
        Route(0, div('This is the page with ID 0')),
        Route(1, div('This is the page with ID 1')),
        Route(2, div('This is the page with ID 2')),
    )
}

const routeId = router()

Set Route Events

const routeId = router(add => {
    add(0, () => {
        console.log('Currently on the page with ID 0')
    })
    add(0, () => {
        console.log('Event overlay')
    })
    add(1, () => {
        console.log('Currently on the page with ID 1')
    })
})

Switch Routes

Route(0,
    button({
        onclick() { routeId.val = 1 }
    }, 'Go to the page with ID 1')
)
Route(1, 'This is page 1')

Source Code

Here is the complete source code. Please note that this is written in TypeScript, and you'll need to compile it on your own:

import van, { ChildDom } from 'vanjs-core'

const { div } = van.tags

van.derive(() => {
    location.hash = routeId.val.toString()
})

interface RouteEvent {
    id: number
    handle: RouteHandle
}

type AddEvent = (id: number, handle: RouteHandle) => void
type RouteHandle = (add: AddEvent) => void

const routeEvents: RouteEvent[] = []

const getRouteId = () => {
    let value = parseInt(location.hash.substring(1))
    return isNaN(value) ? 0 : value
}

const routeId = van.state(getRouteId())

export const Route = (id: number, ...rest: readonly ChildDom[]) => {
    return div({ hidden: () => routeId.val !== id }, ...rest)
}

export const router = (event?: Event | ((add: AddEvent) => void)) => {
    const add: AddEvent = (id, handle) => routeEvents.push({ id, handle })
    routeId.val = getRouteId()

    if (event instanceof Event === false) {
        window.addEventListener('hashchange', router)
        if (event !== undefined) event(add)
    }

    routeEvents.forEach((event) => {
        const { id, handle } = event
        if (routeId.val === id) handle(add)
    })

    return routeId
}

This code defines a simple routing system using the Van.js library. It uses the location.hash to track the route and triggers events when the hash changes. The Route function creates a div with content that is hidden unless the route matches the specified ID. The router function handles route changes and triggers associated events.

[iuroc]

Here is a routing management tool I implemented myself. However, it does not rely on Van.js but only requires native JS. It can be easily used for any web application: https://github.com/iuroc/apee-router

[Tao-VanJS]

Thanks @iuroc!

I added vanjs-router to the Community Add-ons section. Thanks a lot for your contribution!

[iuroc]

Okay, I'm honored, and I will continuously update and optimize it to make it better.

[iuroc]

https://www.bilibili.com/video/BV13K411474d/

[Tao-VanJS]

Thanks @iuroc!

Added your video into the Media Coverage page of VanJS.

[b-rad-c]

@zhcy2050 - hey there, you can checkout my add-on Van Cone, it has a built in router that integrates with history and a navLink component for generating links based on the route's name and will also do dynamic styling when it is the active route. It's still in beta mode, I just released version 0.0.3 available on npm and I'm waiting on my pull request to be approved to merge the new version into the vanjs repo.