Components
Class Components

Class Components in Fortis: Building Standard Web Components

Class components in Fortis are a powerful way to create standard web components. These components are registered with the custom element registry when needed, allowing you to encapsulate complex functionality and user interfaces in a highly modular and reusable manner. In this article, we'll explore the concept of class components in Fortis, how to define them, and why they are a valuable tool for web development.

Defining Class Components

In Fortis, class components are created by extending the Component function, where the first parameter specifies the type description of the component's props. The props are the attributes and properties that can be passed to and manipulated within the component. Fortis provides a set of utilities for defining prop types, making it easy to specify their required, optional, or event listener characteristics.

Prop Types

Here are some key prop types you can use when defining class components in Fortis:

  • Required: This indicates that the prop is required for the component to function properly. For example, Required.string denotes that the prop must be a string.

  • Optional: This indicates that the prop is optional, and it can have a default value. For example, Optional<number>(0) denotes an optional numeric prop with a default value of 0.

  • Listener: Signifies that the prop is an event listener. In the prop type declaration, you don't use 'on' as a prefix, but when constructing the JSX element, you do. You can also fire synthetic events using this.props.on{event}(detail?), where detail is optional data sent with the custom event.

Creating a Class Component

Here's an example of creating a class component in Fortis:

import {f, Component, Required, Listener, Optional} from 'fortis';
 
class WebComponent extends Component({
    message: Required.string,
    left: Listener,
    delay: Optional<number>(0)
}) {
    static css = `
        :host {
            display: block;
            padding: 1rem;
            border: 1px solid black;
        }
    `;
 
    render() {
        return (
            <div title={this.props.message} onmouseleave={() => setTimeout(() => this.props.onleft(), this.props.delay)}>
                {this.props.children}
            </div>
        );
    }
}

In this example, we've defined a WebComponent class that has required and optional props and an event listener. The static css property is used to style the shadow DOM, providing encapsulated styles for your component.

Using Class Components

Using class components in Fortis is as simple as instantiating them in your application. You can use these components just like any other HTML elements. Here's an example:

document.body.appendChild(
    <WebComponent message="Hovered." onleft={() => console.log("Left.")}>
        <h1>Hello world!</h1>
    </WebComponent>
);

In this code, we create an instance of the WebComponent class, passing the required and optional props as needed. This component will now behave as a standard web component, encapsulating the functionality defined in the class.

Advanced Features

Class components in Fortis offer several advanced features, including decorators. The @name decorator, for instance, allows you to specify a custom element name, ensuring that your component's tag name is more user-friendly. This is especially useful for improving component naming and maintainability. Here's an example:

@name("counter")
class Counter extends Component({
    count: Required.number
}) {
    render() {
        return (
            <div>
                <p>Count: {this.props.count}</p>
                <button onclick={() => this.props.count++}>Increment</button>
            </div>
        );
    }
}

The name now becomes <fortis-counter> instead of something like <fortis-lo1l995l>.

Additionally, Fortis provides a static css property that allows you to apply styles to the shadow root of your component. This ensures that your component's styles are encapsulated and won't affect the global scope.

Conclusion

Class components in Fortis are a powerful tool for building standard web components with encapsulated functionality, styles, and clear prop definitions. They provide a clean and structured way to create custom elements and can be seamlessly integrated into your Fortis application. Whether you're building reusable UI elements or complex interactive components, class components empower you to create modular and maintainable web solutions.

ComponentsFunction Components