vanjs-router Upgraded to 2.0.4

[iuroc]

vanjs-router v2.0: Key Improvements and Framework Overview

Key Improvements from v1 to v2

1. Delayed Page Loading:

   • v2 introduces support for delaying page display until asynchronous operations (e.g., Promises) complete. This allows for smoother transitions and ensures pages are fully prepared before being shown.

2. Optimized Execution of onFirst and onLoad:

   • The execution sequence of onFirst and onLoad has been enhanced using async/await. This ensures that onFirst completes before onLoad is executed, providing better control over asynchronous workflows.

3. Simplified API and Method Body:

   • v2 refines method bodies and optimizes this context handling. The framework now exports only nowHash, now, Handler, Route, and goto, with Route being essential. This streamlines usage and reduces complexity.

4. Focus on Simplicity:

   • The framework maintains its focus on simplicity and ease of use, making it ideal for small projects where a lightweight routing solution is desirable.

Usage Example

npm i vanjs-router

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanjs-router.min.js"></script>
<script>
    const { Route, goto } = router
    const { div, button } = van.tags
    
    const Home = () => Route({
        rule: 'home',
        Loader() {
            return div(
                'This Is Home Page.',
                button({ onclick: () => goto('about') }, 'Go To About')
            )
        },
        onFirst() {
            console.log('home onfirst')
        },
        onLoad() {
            console.log('home onload')
        },
    })
    
    const About = () => Route({
        rule: 'about',
        delayed: true,
        Loader() {
            return div(
                'This Is About Page.',
                button({ onclick: () => goto('home') }, 'Go To Home')
            )
        },
        onLoad() {
            this.show()
        }
    })
    
    van.add(document.body, Home(), About())
</script>