Component Lab
A component development and testing tool built for Angular, inspired by React Storybook
Getting Started
Installation
npm install component-lab --save-dev
OR
yarn add component-lab --dev
Experiments
Experiments are used to run your components, directives and pipes in many different isolated scenarios. Create an experiment in the directory where your component is located.
button.component.exp.ts
; .case'Experiment 1 Name', .case'Experiment 2 Name', ;
Experiments can also provide both a template context object and an array of styles.
Some cases can be ignored by using xcase
instead of case
; .case'Normal Button', .case'Warning Button', .xcase'Not Yet Implemented', ;
Usage
Angular CLI
Custom Webpack Config
Angular CLI
-
Create some experiments for your component, directive or pipe.
-
Create a
lab.ts
file in yoursrc
folder for your lab.
;; ; declare ; createLab;
- Create a
lab.html
in yoursrc
folder to use for the component-lab app.
Component Lab Loading...
- Create a
tsconfig.lab.json
in your src folder. This file should be a copy of yourtsconfig.app.json
with theangularCompilerOptions
added to specify anentryModule
with the path to thelab
.
- Create another app in your
.angular-cli.json
file in theapps
array to point it to the lab files.
- Update your
tsconfig.app.json
to exclude your lab files.
- Run the CLI with your lab app.
npm start -- --app component-lab --port 8080
OR
yarn start -- --app component-lab --port 8080
Custom Webpack Config
-
Create some experiments for your component, directive or pipe.
-
Create a
lab.ts
file for your configuration.
;; ; declare ; createLab;
- Create a
component-lab.config.js
file in the root of your project
/** * Export a single configuration object */ moduleexports = /** * Webpack configuration object used to load your experiments */ webpackConfig: ... /** * Host and port of the Component Lab webpack development server */ host: 'localhost' port: 8080 /** * Additional list of files to include in the bundle */ include: /** * Dictionary of suites. Each suite should be a lab configuration * module (see "Experiments") */ suites: feature: './src/lab.ts' ;
- In the
scripts
section of your package.json add a script to start Component Lab.
- Start the Component Lab with the suite name.
npm run component-lab -- feature
OR
yarn run component-lab -- feature