Components

Ensure you’ve configured your Environment properly and you’ve read the Guidelines.

File structure

To develop on the components itself, you might want to have a look at the existing components. Each component is a directory and contains the following files:

  • template.html: The web component HTML template

  • style.css (optional): The web component CSS stylesheet

  • script.js (optional): The web component JavaScript class

By default you only need the directory with a template.html, and probably a style.css file in it. The builder will then create the rest for you.

Example component

When you’re new to components, have a look at the foo-bar component. This component includes examples for most component API’s, as well as a lot of documentation.

Build components

To build the components, run the following command:

translucent-builder build

If you want to build the components automatically when a template or component is changed, you can also use the watchdog:

translucent-builder watch

The translucent-builder tool has also more options. Have a look at the help by providing the -h or --help flag.

Important

Please read the next chapter if you want to develop on the storybook or the Django module directly / interactively.

Django components

By default, the translucent-builder command builds to the build/translucent/ directory. This is fine for testing or if you want to get a proper Translucent build for further usage. However, if you want to develop on the Django module directly, you’ve to modify the translucent-builder command to one of these:

# To build once
translucent-builder build -b confirm/translucent/django/templates/translucent/

# To use the watchdog
translucent-builder watch -b confirm/translucent/django/templates/translucent/

Build Storybook

We’re using Storybook as a styleguide for our Translucent components.

To build storybook, use one of the following commands:

# To build once
npm run build-storybook

# To use the watchdog
npm run storybook

Hint

Storybook will use the built Translucent version from the build/translucent/ directory. This means you need to rebuild the components every time you changed something.

Debugging components

How to debug

If you want to debug the components in the browser, you’ve several options. The most straight-forward options would be:

  • Have a look at the built web components files, especially the base-component.js file

  • Set a breakpoint in the JavaScript source of the developer tools

  • Enable Translucent’s Debug mode

Debug mode

To work with Translucent’s debug mode, you’ve to follow these steps:

  • Set your JavaScript console to Verbose

  • Explicitly enable the debug mode for the desired components (see Enable / disable debug mode below)

  • Reload the site or call the render() method of a component again

Manipulating the debug mode is achieved via Logger(), which can also be accessed through the meta object.

List components in debug mode

Get a list of components in debug mode:

translucent.logger.debugComponents

Enable / disable debug mode

Enable the debug mode of components via Logger.enableDebug():

translucent.logger.enableDebug('foo-bar')

Disable the debug mode of components via Logger.disableDebug():

translucent.logger.disableDebug('foo-bar')

Reset debug modes

Reset all the debug modes of all components via Logger.resetDebug():

translucent.logger.resetDebug()