Component templates

Although components can be used directly within any liquid files in static/, often your component has a set structure that you would have to create and maintain at multiple locations in your theme. SALVO-TS supports defining a template for a component alongside it's script, which you can then use elsewhere in this theme using a convenient preprocessor tag.

This has two benefits:

• When the component's HTML/liquid changes, you now only have a single place to update it.
• SALVO-TS will automatically validate that required props are passed into the template in Liquid.

Creating component templates

Component templates are stored in a file with the same name as the component and the .liquid extension.

Example:

typescript
// src/components/MyComponent.ts
@Component
export class MyComponent extends ThemeComponent {
    @Prop name!: string;
}

typescript
// src/components/MyComponent.ts
@Component
export class MyComponent extends ThemeComponent {
    @Prop name!: string;
}

html
// src/components/MyComponent.liquid
<my-component 
    name="{{ name|json|escape }}">
    Hello, <span>{{ name }}</span>
</my-component>

html
// src/components/MyComponent.liquid
<my-component 
    name="{{ name|json|escape }}">
    Hello, <span>{{ name }}</span>
</my-component>

Using component templates

You can include a component from any liquid file using the following syntax:

twig
{! component 'ComponentName', prop1: value, prop2: value, prop3: value !}

twig
{! component 'ComponentName', prop1: value, prop2: value, prop3: value !}

tip

See SALVO Preprocessor for more information about this and other preprocessor tags.

Example:

twig
<div>
    {! component 'MyComponent', name: "foobar" !}
</div>

twig
<div>
    {! component 'MyComponent', name: "foobar" !}
</div>

html
// renders:
<div>
    <my-component 
        name=""foobar"">
        Hello, <span>foobar</span>
    </my-component>
</div>

html
// renders:
<div>
    <my-component 
        name=""foobar"">
        Hello, <span>foobar</span>
    </my-component>
</div>

If you don't include a required prop, an error will be rendered on the page.

twig
<div>
    {! component 'MyComponent' !}
</div>

twig
<div>
    {! component 'MyComponent' !}
</div>

html
// renders:
<div>
    <div class="_SALVO_COMPONENT_ERROR">
        Required component prop 'name' not passed to MyComponent component template.
    </div>
</div>

html
// renders:
<div>
    <div class="_SALVO_COMPONENT_ERROR">
        Required component prop 'name' not passed to MyComponent component template.
    </div>
</div>

Required props

Props are required by default.

You can make a prop optional by passing a default value to the prop definition (i.e. @Prop({ default: 'not found' }) foo: string;), or by making them undefined-able and passing required as false (i.e. @Prop({ required: false }) foo?: string;)