I Made a Mini Framework with Nested Routing and Lifecycle Hooks on top of ArrowJS

[anthony-autrey]

I discovered arrowjs recently and decided I wanted to see if I could add some bells and whistles to make developing projects with it easier for me. I decided the main things I'd need are inheritable class components, lifecycle hooks, nested routing, and state management.

Check out the demo, the github repo, and everything in a Stackblitz IDE.

To understand how it works, I'd recommend starting with two files (I attempted to comment them well):

src/user-interface/core/component.ts
src/user-interface/core/router.ts

Here are some details pulled straight from the readme...

A component looks something like this:

interface MyState {favoriteFood: 🍔 | 🍟}
class MyComponent extends Component<MyState> {
    constructor () {
        super({favoriteFood: 🍔})
    }

    onMount () {
        console.log('I'm in the DOM')
    }

    onUnmount () {
        console.log('I've left the DOM')
    }

    get html () {
      return html`
        //⚠️uuid attribute must be set for lifecycle hooks to run
        <div uuid="${this.uuid}">
            ${() => this.state.favoriteFood}
        </div>`
    }
}

Then use it in your app like this:

const myComponent = new MyComponent();
html`myComponent.html`

You can add the below functions to your component, and they will be automatically called on their triggering events:

• onMount() is called when the component's element is first detected in the DOM
• onUnmount() is called when the component's element is removed from the DOM, but only after onMount() has been called.
• onDomMutation() is called any time the DOM is updated.

From within a component, access the following properties

• element: the Component's element in the DOM
• uuid: the component's auto-generated universally unique ID
• state: the component's internal state

The simple routing scheme takes a router configuration and matches routes to RouterView components in your app.

const router = new Router([
    {   path: '/', 
        element: html`
            <div>I'm Home</div>
            <div>${new RouterView().html}</div>
        `,
        children: [{ path: '/knock', element: html`🚪`}]
    },
    {
        path: '/animals',
        element: new Animals().html,
        children: [
            { path: '/horse', element: html`🐎`},
            { path: '/turtle', element: html`🐢`},
            { path: '/elephant', element: html`🐘`},
        ]
    }
])

Just set up your routes by initializing a Router and putting RouterView components in your app. These routes will be resolved to the RouterViews and will show the correct elements based on the browser path. You can nest these routes as deeply as you need!

Components (and any other code) can share state through a pattern of Static classes that have a private state, made reactive by arrowjs. Simply import a class and watch for changes across your application.

There are probably a lot of improvements that could be made to this, but I thought I'd share what I have since I've read other discussions here about the desire for implementing lifecycle hooks and nested routing. Thanks for reading! 🙏