A Weaverse Component file typically comprises these parts:
Component Definition: Where the markup of the component is crafted.
Type Definitions: The contract to which the component must adhere, thanks to TypeScript 💚.
Component Schema: Configurations ensuring smooth interaction with Weaverse Studio.
Loaders: Mechanisms tasked with data retrieval.
An abbreviated glance at each part:
Defining The Component
The visual representation of your component comes to life in this step. Here are a few key principles to note:
forwardRefto define your component.
Ensure the component accepts and forwards both
refand the rest (
...rest) of the props. This guarantees proper rendering and interaction within Weaverse Studio.
Registering the Component
Remember to include your component in the main components export. This allows it to be recognized and usable within Weaverse Studio:
Types enhance the predictability of your component. Once defined, you can utilize these types in your component, ensuring expected data shapes and enhancing stability.
The schema is an object that assists in determining how your component is presented and interacted with within Weaverse Studio:
For further details, delve into the Component Schema article.
Input Settings in Schema
inspector key within your schema provides configurations to allow non-developers to modify your component within Weaverse Studio:
Explore the crafting of settings in the Input Settings article.
The Power of Loader Function
loader function have the unique ability to run on the server-side 😎, a standout feature in Weaverse, allowing your components to dynamically respond to data:
Unlock the potential of loaders with the Data Fetching & Caching article.
Components, with their multifaceted capabilities, are vital in crafting a powerful, efficient, and user-friendly theme on Weaverse.
To dive deeper into how component schemas work, check out our next article on Component Schema.