Introduction

Themes created with SALVO-TS use the concept of components to separate a sites into logical units of functionality and styling. A component encapsulates a single feature or concern completely, including all of it's logic (TS), styling (SCSS), and often it's structure (Liquid or React).

Components may be simple, like a banner or alert, or may be more complex, like a mega-menu or cart. SALVO-TS contains some tools for implementing more complex components including the use of UI frameworks like Vue.

Unlike previous iteractions of SALVO, components in SALVO-TS are Web Components. This means they act like other elements (i.e. <a>, <input>) and can be created or removed on-the-fly. This simplifies the component lifecycle and works nicely with features Shopify's new dynamic section rendering.

Directory structure

All theme components are defined under src/components:

src/
└─ components/
   ├─ FooComponent.ts      - Main component
   ├─ FooComponent.scss    - Component SCSS (optional)
   └─ FooComponent.liquid  - Component Liquid template (optional)

src/
└─ components/
   ├─ FooComponent.ts      - Main component
   ├─ FooComponent.scss    - Component SCSS (optional)
   └─ FooComponent.liquid  - Component Liquid template (optional)

You can also put components into subdirectories for better organization:

src/
└─ components/
   └─ Garage/
      ├─ GarageFooComponent.ts      - Main component
      ├─ GarageFooComponent.scss    - Component SCSS (optional)
      └─ GarageFooComponent.liquid  - Component Liquid template (optional)

src/
└─ components/
   └─ Garage/
      ├─ GarageFooComponent.ts      - Main component
      ├─ GarageFooComponent.scss    - Component SCSS (optional)
      └─ GarageFooComponent.liquid  - Component Liquid template (optional)

Component naming rules

Components must be named in a particular way in order to work correctly as Web Components, and with SALVO-TS's automatic component registration feature.

• The filename and class name must match i.e. QuantitySpinner.ts should export a class QuantitySpinner
• Components (and subdirecties under components/) must be named in PascalCase.
• Components in subdirectores must include the subdirectory as a prefix in their class name. i.e. Cart/Misc/CartMiscBanner.ts.
• Components names must have two words. This ensures there's always a hyphen (-) in their tag name, which is required by the Web Components spec to differenciate them from normal native elements.

tip

Components are referenced using the kebab-case forms in HTML (i.e. <quantity-spinner>), and their class names elsewhere (i.e. QuantitySpinner). Components in {! component ... !} tags are referenced by their class names (i.e. QuantitySpinner).