# dash-components-archetype

> A [Builder](https://github.com/FormidableLabs/builder) Archetype for Dash components suites

Latest version **0.3.0-rc1** (published 2018-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install dash-components-archetype
pnpm add dash-components-archetype
yarn add dash-components-archetype
bun add dash-components-archetype
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0-rc1 |
| Published | 2018-08-03 |
| First published | 2016-06-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 47.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Per Nilsson |
| Maintainers | chriddyp |
| Keywords | Dash, Builder |

## Links

- npm: https://www.npmjs.com/package/dash-components-archetype
- Repository: https://github.com/plotly/dash-components-archetype
- Homepage: https://github.com/plotly/dash-components-archetype#readme
- Issues: https://github.com/plotly/dash-components-archetype/issues
- npm.io page: https://npm.io/package/dash-components-archetype

## Dependencies (16)

- [ramda](https://npm.io/package/ramda.md) ^0.23.0
- [react](https://npm.io/package/react.md) ^15.5.4
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [rimraf](https://npm.io/package/rimraf.md) ^2.6.1
- [webpack](https://npm.io/package/webpack.md) ^1.13.1
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.10.1
- [babel-core](https://npm.io/package/babel-core.md) ^6.9.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.9
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.4
- [react-docgen](https://npm.io/package/react-docgen.md) ^2.8.2
- [webpack-partial](https://npm.io/package/webpack-partial.md) ^1.2.0
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.5.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.6.0
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^0.1.9
- [react-addons-test-utils](https://npm.io/package/react-addons-test-utils.md) ^15.5.1
- [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.8.0

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 0.3.0-rc1 (latest) — 2018-08-03
- 0.2.11 — 2017-08-08
- 0.2.10 — 2017-08-08
- 0.2.9 — 2017-08-08
- 0.2.8 — 2017-08-07
- 0.2.7 — 2017-07-03
- 0.2.6 — 2017-05-10
- 0.2.5 — 2017-05-10
- 0.2.4 — 2017-02-15
- 0.2.3 — 2017-02-04
- 0.2.2 — 2016-08-01
- 0.2.1 — 2016-07-31
- 0.2.0 — 2016-07-31
- 0.1.9 — 2016-07-27
- 0.1.8 — 2016-07-27
- … 11 more at https://npm.io/package/dash-components-archetype/versions

## README

# Dash Components Archetype

## Overview

This is a [Builder][] archetype for [Dash][] component suites. It defines build-
and test configuration, as well as development scripts and a convenient way to
generate a new component suite project with all the necessary boilerplate.

> :mega: **Component authors**: Subscribe to https://github.com/plotly/dash-components-archetype/issues/40 to be notified of **breaking changes** :mega:


## Generating a component suite project

```sh
$ npm install -g builder-init
$ builder-init dash-components-archetype
```

Answer the prompts, then:

```sh
$ cd [YOUR-COMPONENT-SUITE-NAME]
$ npm install
```

## Development

### Demo Server

If your component suite project has a `demo/` directory following the same
structure as the [`init/demo`](./init/demo) directory in this archetype, you can
start up a demo development server:

```sh
$ npm run demo
$ open http://localhost:9000
```

This lets you see a demo of the rendered components. You have to maintain the
list of components in `demo/Demo.react.js`.

### Code quality

To run lint:

```sh
$ npm test
```

TODO: ESLint is not reporting problems
https://github.com/plotly/dash-components-archetype/issues/15

### Testing your components in Dash

The best way to test your components in the real Dash context is by linking into
`dash2` and testing them from there.

1. Prepare your component suite module by linking and watching for changes

        # Symlink module
        $ npm link

        # Transpile components to `lib/` and watch for changes
        $ npm start

2. Link module into `dash2` project

        # In the `dash2/renderer` project directory:
        $ npm link [YOUR-COMPONENT-SUITE-NAME]

Now you should be able to restart the webpack process (in `dash2/renderer`:
`ctrl-c`, `npm start`), after which webpack will automatically pick up new
changes to the component suite.


## Customizing your project

You can override any `npm` script in the archetype with your own implementation.
To see the list of supported scripts, run `./node_modules/bin/builder run`. For
more details, see [Builder Archetypes][].

## Release

To tag and release a new version of the archetype, follow these instructions.
You might be tempted to add some of these steps to NPM's `*version` lifecycle
methods, but that would interfere with versioning and publishing of the actual
project depending on the archetype, since [Builder][] merges the project
package.json scripts with the archetype's package.json scripts.


```sh
# 1. Bump package.json `version` according to [semver][]
vi package.json

# 2. Generate `dev/*` package files
node_modules/.bin/builder-support gen-dev

# 3. Run tests
npm run builder:check

# 4. Commit and tag
git add package.json dev
git commit -m "vx.x.x"
git tag -a "vx.x.x" -m "vx.x.x"
git push --follow-tags

5. Publish main and dev package
npm publish && cd dev && npm publish && cd -
```

[Builder]: https://github.com/FormidableLabs/builder
[Builder Archetypes]: https://github.com/FormidableLabs/builder#archetypes
[Dash]: https://plot.ly/dash
[dash-core-components]: https://github.com/plotly/dash-core-components
[semver]: http://semver.org/

## Contributing

You can test component generation with this library with `npm link` and with the absolute file path option of `builder-init`.

```
npm install -g builder-init
git clone https://github.com/plotly/dash-components-archetype.git
cd dash-components-archetype
npm link
cd dev
npm link
cd ../..
builder-init /ABSOLUTE/PATH/TO/dash-components-archetype/
# answer prompts to create new file

# Enter new package folder
cd new-package # replace with the name of your package from the prompt
npm link dash-components-archetype
npm link dash-components-archetype-dev
npm i
```

---
_Source: https://npm.io/package/dash-components-archetype · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._