Component Schema

Anatomy

In Weaverse, every component's behavior and interactivity within the Weaverse Studio is determined by its schema. This schema, named HydrogenComponentSchema, acts as a blueprint for your component, ensuring a consistent and user-friendly experience.

Before diving into the individual properties, let's get an overview of the full schema structure:

interface HydrogenComponentSchema {  title: string  type: string  inspector: InspectorGroup[]  childTypes?: string[]  presets?: Omit<HydrogenComponentPresets, 'type'>  limit?: number  enabledOn?: {    pages?: ('*' | PageType)[]    groups?: ('*' | 'header' | 'footer' | 'body')[]  }  toolbar?: (HydrogenToolbarAction | HydrogenToolbarAction[])[]}

Properties

With that in mind, let's dive deeper into its properties:

title and type

title: stringtype: string

• title: A user-friendly name for the component, displayed within the Weaverse Studio in the Page Outline section.

• type: A unique identifier for the component, ensuring differentiation between various components.

inspector

inspector: InspectorGroup[]

An array of InspectorGroup, where each group organizes a set of inputs for the Weaverse Studio Inspector.

The InspectorGroup structure is:

interface InspectorGroup {  group: string  inputs: BasicInput[]}

• group: A label categorizing a set of inputs.

• inputs: An array of input configurations. For an in-depth look into BasicInput, check out the Input Settings article.

childTypes

childTypes ? : string[]

This optional property lists the types of child components that can be nested within the parent component.

presets

presets ? : Omit<HydrogenComponentPresets, 'type'>

This optional property defines default configurations for components, determining their initial appearance and behavior.

The structure for HydrogenComponentPresets is:

type HydrogenComponentPresets = {  type: string  children?: HydrogenComponentPresets[]  [key: string]: any}

limit

limit ? : number

This optional property limits the number of times this component can appear on a page.

enabledOn

enabledOn ? : {  pages? : ('*' | PageType)[];  groups? : ('*' | 'header' | 'footer' | 'body')[];}

Defines where the component can be used. The PageType can be values like INDEX, PRODUCT, COLLECTION, and more.

type PageType =  | 'INDEX'  | 'PRODUCT'  | 'ALL_PRODUCTS'  | 'COLLECTION'  | 'COLLECTION_LIST'  | 'PAGE'  | 'BLOG'  | 'ARTICLE'  | 'CUSTOM'

toolbar

toolbar ? : (HydrogenToolbarAction | HydrogenToolbarAction[])[]

Determines the available actions (like duplicate, delete, general settings) for the component in the studio.

type HydrogenToolbarAction =  | 'general-settings'  | 'settings-level-2'  | 'duplicate'  | 'delete'

Example

To make all of this a bit more tangible, let's take a look at a real-world example of a component schema:

import type { HydrogenComponentSchema } from '@weaverse/hydrogen'
export let schema: HydrogenComponentSchema = {  title: 'Product Card',  type: 'product-card',  inspector: [    {      group: 'Settings',      inputs: [], // Defining input settings    },  ],  childTypes: ['image', 'product-title', 'price'],  presets: {    type: 'product-card',    children: [{ type: 'image' }, { type: 'product-title' }, { type: 'price' }],  },  limit: 3,  enabledOn: {    pages: ['INDEX', 'PRODUCT', 'ALL_PRODUCTS'],    groups: ['body'],  },  toolbar: ['general-settings', ['duplicate', 'delete']],}

Remember, this is just an example, the complexity and properties of the schema can vary based on the component's requirements.

Conclusion

The HydrogenComponentSchema provides an extensive blueprint for your Weaverse components. By understanding its structure and properties, developers can ensure a dynamic and consistent experience for users within the Weaverse Studio.

For a detailed look into the intricacies of inputs and their configurations, check out the Input Settings article.