📘

Note

Components are only supported in @tapcart/tapcart-cli^0.1.10

The Tapcart CLI supports developing reusable chunks of code that can be shared across blocks. Each of these components is another React component that can be embedded across many blocks.

Your application's components will live in your project's components/ directory. Note that the command structure is very similar to the block command - you can just substitute component for block 🎉.

Creating components

Create a new App Studio component:

yarn tapcart component create MyComponent

This will create a new component in the components/ directory.

Component Structure

Because a component is just an embeddable React component, it closely mirrors the structure of a block.

Each component contains these four files:

• code.jsx
  • The source code for your component
• config.json
  • A configuration file for component metadata
  • Supported fields are: label, tags, dependencies
• manifest.json
  • A file to house component configurations. These configurations populate the right rail of App Studio when configuring a block. This allows users to customize the block’s appearance and more without any code changes. Documentation on available manifest configurations is available here .
• manifestConfig.json
  • This file contains overrides to the defaults in manifest.
• mockData.json
  • This file is for development purposes only. It will be read when developing locally and inject variables that will be available for the block via the useVariables prop in the block. This will only be read when developing the component in isolation; when bundling components into blocks, the block's mock data will be read.

Developing a component

Run a local development server for your component:

yarn tapcart component dev

This will start a development server where you can preview and test your component with hot-reloading.

Pulling components

Pull down the latest version of a component from the server:

yarn tapcart component pull -c ProductCard

Pull a specific version of a component:

yarn tapcart component pull -c ProductCard --version 2

Pull multiple components:

yarn tapcart component pull -c ProductCard Button

Pull all components:

yarn tapcart component pull -a

🚧

Warning

The Tapcart CLI does not track any local changes. Pulling a component will overwrite any changes with the currently live version of the component

Pushing components

Push your local code to the server, and store as the latest version:

yarn tapcart component push -c ProductCard

Add the --live flag when pushing to make it live. Otherwise it's just a draft version on the server:

yarn tapcart component push -c ProductCard --live

Push multiple components:

yarn tapcart component push -c ProductCard Button

Push all components:

yarn tapcart component push -a

Component Versioning

List all versions of a component:

yarn tapcart component versions list

This will show your local and remote versions:

% tapcart component versions list -c MyComponent   
✔ Component versions:
┌─────────┬──────────────────────────┬──────────────┬──────────────┐
│ Version │ ID                       │ LocalVersion │ RemoteVersion│
├─────────┼──────────────────────────┼──────────────┼──────────────┤
│ 1       │ 682e718543b1cca504093661 │ -            │ live         │
│ 2       │ 682e717b15ff420ed63d1de3 │ active       │ -            │
│ 3       │ 682e717243b1cca504093654 │ -            │ -            │
└─────────┴──────────────────────────┴──────────────┴──────────────┘
%

Set a specific version as the active version on the server

yarn tapcart component versions set -c MyComponent -v 2

Note that the version index is 1-based, so set MyComponent 1 sets the first
version as active.