Anatomy
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:
Guides
Defining The Component
The visual representation of your component comes to life in this step. Here are a few key principles to note:
Always use
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.
Example:
Registering the Component
Remember to include your component in the main components export. This allows it to be recognized and usable within Weaverse Studio:
Defining Types
Types enhance the predictability of your component. Once defined, you can utilize these types in your component, ensuring expected data shapes and enhancing stability.
Example:
Defining Schema
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
The 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
Component's 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.
Conclusion
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.