Tools

A list of tools and how-to that will improve your experience with DNA.

Custom Elements Manifest

The Custom Elements Manifest is a JSON file that describes Custom Elements definitions. It can be used to generate documentation or to provide hints to the IDE when using them. The CEM Analyzer is a CLI to generate the manifest with support for JSDoc, TypeScript and a bunch of flavors based on most common frameworks. You can use the analyzer DNA plugin to correctly detect features by components interface.
For example:

custom-elements-manifest.config.js

import dnaPlugins from '@chialab/manifest-analyzer-dna-plugin';

export default {
    plugins: [...dnaPlugins()],
};

src/dna-map.ts

import { Component, customElement, property, fires, type EventHandler } from '@chialab/dna';

/**
 * A map component based on mapbox-gl.
 */
@customElement('x-map')
class MapboxMap extends Component {
    /**
     * The latitude value for the map center.
     */
    @property() latitude: number;

    /**
     * The longitude value for the map center.
     */
    @property() longitude: number;

    /**
     * The map zoom level changed.
     */
    @fires()
    onzoom: EventHandler<CustomEvent<number>>;

    /**
     * The map center point changed.
     */
    @fires()
    onmove: EventHandler<CustomEvent<{ latitude: number; longitude: number }>>
}

Run:

cem analyze src/dna-map.ts

# dna-map

A map component based on mapbox-gl.

## Properties

| Property    | Attribute   | Type     | Description                             |
| ----------- | ----------- | -------- | --------------------------------------- |
| `latitude`  | `latitude`  | `number` | The latitude value for the map center.  |
| `longitude` | `longitude` | `number` | The longitude value for the map center. |

## Events

| Event  | Description                   |
| ------ | ----------------------------- |
| `move` | The map center point changed. |
| `zoom` | The map zoom level changed.   |

Storybook

Storybook is a fantastic tool for components development. You can create samples for your elements, provide a documentation and an API reference, run accessibility tests and more. Since version 5.6 it also supports Web Components.

A DNA preset for Storybook is available with automatic Custom Elements Manifest scans that run across your components to generate documentation and controls.
You can install it using the @chialab/storybook-dna-vite package from NPM:

npm

npm i @chialab/storybook-dna-vite -D

yarn

yarn add @chialab/storybook-dna-vite -D

pnpm

pnpm add @chialab/storybook-dna-vite -D

And load it in the main.js config file:

export default {
    framework: {
        name: '@chialab/storybook-dna-vite',
        options: {},
    },
    docs: {
        autodocs: 'tag',
    },
};