Components

Vader.js Component Structure and Lifecycles

Vader.js is a JavaScript framework for building class-based components with customizable lifecycle methods. This guide explains the component structure and the key lifecycle methods you can use when creating components in Vader.js.

Component Structure

To create a component in Vader.js, you typically define a class that extends Vader.Component. Below is a basic example of a component structure in Vader.js:

import { Vader } from 'vader'

class Home extends Vader.Component {
    constructor() {
        super()
    }

    render() {
        return this.html(``)
    }

    componentDidMount() {
        console.log('mounted')
    }
}

• constructor(): The constructor method is used for initializing your component. In this example, we call super() to invoke the constructor of the parent class (Vader.Component).

• render(): The render method is responsible for generating HTML content for the component. You can customize this method to define your component's visual representation.

• componentDidMount(): This method is called explicitly when the component is mounted. It's not handled directly by Vader; you need to manually call it when needed in your component. You can use it to perform actions after the component has been added to the DOM.

Component Lifecycles

Vader.js provides several lifecycle methods that you can override to handle different events throughout the component's lifecycle:

componentUpdated(prev_states, prev_props, snapshot)

• The componentUpdated method is an overrideable method that is called by Vader when the component's content has changed.
• It receives three arguments:
  • prev_states: An object representing the previous instance of the component's state before it changed.
  • prev_props: An object representing the previous instance of the component's props before they changed.
  • snapshot: An object representing the last full snapshot of the component.

You can use componentUpdated to handle logic when the component's content is updated.

componentWillUnmount()

• The componentWillUnmount method is an overrideable method that is called by Vader when Vader.Component.unmount() is called.
• This method allows you to specify logic that should run when the component is about to be unmounted from the DOM. It's useful for performing cleanup tasks before the component is removed.

Example Usage

Here's an example of how you can create a component using Vader.js and utilize the mentioned lifecycle methods:

import { Vader } from 'vader'

class MyComponent extends Vader.Component {
    constructor() {
        super()
        this.state = {
            // Initialize component state here
        }
    }

    render() {
        // Generate HTML content based on component state
        return this.html(`
            <div>${this.state.someData}</div>
        `)
    }

    componentDidMount() {
        // Perform actions after component has mounted
        console.log('Component has mounted')
    }

    componentUpdated(prev_states, prev_props, snapshot) {
        // Handle component update logic here
        console.log('Component updated')
    }

    componentWillUnmount() {
        // Clean up resources before unmounting
        console.log('Component will unmount')
    }
}