Component Management

Blocklets can be composed of other blocklets, which are referred to as components. This powerful feature allows you to build complex applications by assembling smaller, reusable parts. The Blocklet CLI provides a set of commands to help you manage these component dependencies within your project's blocklet.yml file.

This section covers how to add, remove, and interact with components in your blocklet project.

Add Component#

The blocklet add command adds a new blocklet as a component to your current project. It automatically updates the components section of your blocklet.yml file and checks for circular dependencies.

blocklet add <name>[@<version>] | <url> [options]

You can add a component from a configured Blocklet Store by specifying its name and an optional version, or directly from a URL pointing to its metadata.

Examples:

• Add from a store:
  

  Add from store

  blocklet add my-component@1.2.3

• Add from a URL:
  

  Add from URL

  blocklet add https://example-store.com/blocklets/z8i.../blocklet.json

This command will add a new entry to your blocklet.yml like this:

components:
  - name: my-component
    title: My Component
    mountPoint: /my-component
    source:
      store: 'https://store.blocklet.dev'
      name: my-component
      version: 1.2.3

For more details, see the Add Component documentation.

Remove Component#

The blocklet remove command removes a component dependency from your project. It finds the component by name in your blocklet.yml and deletes its configuration entry.

blocklet remove <component-name>

Example:

blocklet remove my-component

This will remove the corresponding component object from the components array in your blocklet.yml.

For more details, see the Remove Component documentation.

Component Studio CLI#

The blocklet component command is a convenient wrapper that executes the @blocklet/component-studio-cli. This specialized tool provides more advanced functionalities for working with components.

Any arguments you pass to blocklet component are forwarded directly to the Component Studio CLI.

blocklet component [args...]

Example:

If the Component Studio CLI has a command called list, you can run it like this:

blocklet component list

This executes npx -y @blocklet/component-studio-cli list behind the scenes.

For more details, see the Component Studio CLI documentation.