# web-component-ui

> A web component build tool and styleguide generator CLI tool.

Latest version **0.0.20** (published 2018-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install web-component-ui
pnpm add web-component-ui
yarn add web-component-ui
bun add web-component-ui
```

Provides the command `wui`.

## 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.0.20 |
| Published | 2018-01-03 |
| First published | 2017-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 25 |
| Known vulnerabilities | 0 (+9 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Emil Rune Møller |
| Maintainers | emolr |

## Links

- npm: https://www.npmjs.com/package/web-component-ui
- Repository: https://github.com/emolr/web-component-ui
- Issues: https://github.com/emolr/web-component-ui/issues
- npm.io page: https://npm.io/package/web-component-ui

## Dependencies (25)

- [del](https://npm.io/package/del.md) ^3.0.0
- [glob](https://npm.io/package/glob.md) ^7.1.2
- [gulp](https://npm.io/package/gulp.md) 3.9.1
- [chalk](https://npm.io/package/chalk.md) ^2.3.0
- [rollup](https://npm.io/package/rollup.md) ^0.52.1
- [postcss](https://npm.io/package/postcss.md) ^6.0.13
- [fs-extra](https://npm.io/package/fs-extra.md) ^4.0.2
- [through2](https://npm.io/package/through2.md) ^2.0.3
- [commander](https://npm.io/package/commander.md) ^2.12.1
- [node-sass](https://npm.io/package/node-sass.md) ^4.5.3
- [uglify-es](https://npm.io/package/uglify-es.md) ^3.2.2
- [gulp-newer](https://npm.io/package/gulp-newer.md) ^1.3.0
- [handlebars](https://npm.io/package/handlebars.md) ^4.0.11
- [typescript](https://npm.io/package/typescript.md) ^2.5.3
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^7.1.5
- [browser-sync](https://npm.io/package/browser-sync.md) ^2.18.13
- [html-entities](https://npm.io/package/html-entities.md) ^1.2.1
- [gulp-uglify-es](https://npm.io/package/gulp-uglify-es.md) ^0.1.8
- [gulp-sourcemaps](https://npm.io/package/gulp-sourcemaps.md) ^2.6.1
- [gulp-typescript](https://npm.io/package/gulp-typescript.md) ^3.2.3
- [gulp-marked-json](https://npm.io/package/gulp-marked-json.md) ^1.0.0
- [rollup-plugin-commonjs](https://npm.io/package/rollup-plugin-commonjs.md) ^8.2.6
- [vinyl-sourcemaps-apply](https://npm.io/package/vinyl-sourcemaps-apply.md) ^0.2.1
- [rollup-plugin-typescript](https://npm.io/package/rollup-plugin-typescript.md) ^0.8.1
- [rollup-plugin-node-resolve](https://npm.io/package/rollup-plugin-node-resolve.md) ^3.0.0

## Recent versions

- 0.0.20 (latest) — 2018-01-03
- 0.0.19 — 2018-01-03
- 0.0.18 — 2017-12-27
- 0.0.17 — 2017-12-23
- 0.0.16 — 2017-12-23
- 0.0.15 — 2017-12-22
- 0.0.14 — 2017-12-20
- 0.0.13 — 2017-12-19
- 0.0.12 — 2017-12-14
- 0.0.11 — 2017-12-14
- 0.0.10 — 2017-12-12
- 0.0.9 — 2017-12-11
- 0.0.8 — 2017-12-10
- 0.0.7 — 2017-11-30
- 0.0.6 — 2017-11-30
- … 5 more at https://npm.io/package/web-component-ui/versions

## README

# Web Component UI
Web Component UI is a dead simple reusable web component compiler and documentation tool.

### Simple
Tiny tooling, non-opinionated, zero configuration, Typescript and SASS support with no overhead.

### Integration ready
Compiles into UMD, bundle and clean vanillaJS automatically.

### Shareable
Compiles Markdown into static HTML and JSON, with live examples.


## Getting started

### Install the CLI

```
$ npm install -g web-component-ui
```

### Create a project

```
project/
├── my-component.ts
├── my-component.scss
└── readme.md

```

From the project root run:

```
$ wui build
```

This will generate:

```
project/
├── dist
│   ├── my-component.html // Demo file
│   ├── my-component.js // es6
│   ├── my-component.js.map // sourcemap
│   ├── my-component.bundle.js // Rollup IIFE es2015 bundle
│   ├── my-component.bundle.js.map // Bundle sourcemap
│   ├── my-component.module.js // UMD module
│   ├── my-component.module.js.map // Module sourcemap
│   └── readme.md // Copied readme.md
├── my-component.ts
├── my-component.scss
└── readme.md
```

### CLI options

| Command      | Option            | Description                                                            |
|--------------|-------------------|------------------------------------------------------------------------|
| `wui build`  |                   | Compiles all files in project folder.                                  |
| `wui build`  | -s, --styleguide  | Generates a index.html with a navigation to all component demos        |

| Command      | Option            | Description                                                            |
|--------------|-------------------|------------------------------------------------------------------------|
| `wui start`  |                   | Compiles and watches for file changes                                  |
| `wui start`  | -o, --open        | Opens styleguide in the default browser                                |
| `wui start`  | -e, --entry `path_to.md` | Opens styleguide for referenced styleguide file                 |


### Inline CSS from SASS in component

In a `<style>` tag, make an absolute path reference to sass file:

```
const template = `
    <style>
        @style('project/my-component.scss')
    </style>
`
```

_SASS compiles into autoprefixed CSS 2 browser versions behind based on caniuse_

### Component styleguide
wui compiles all `.md` into HTML and JSON, not limited to components and follows the directory structure.

#### Inline component demo
In markdown write:

<pre>&lt;!--
```
&lt;custom-element-demo&gt;
  &lt;template&gt;
    <span>&lt;script src="my-component.bundle.js"&gt;</span>
    <span>&lt;next-code-block&gt;&lt;/next-code-block&gt;</span>
  &lt;/template&gt;
&lt;/custom-element-demo&gt;
```
--&gt;<span>
```html
&lt;my-component&gt;&lt;/my-component&gt;
```
</span></pre>

> Paths should be relative from the files location in dist folder.

> All code in `<template>...</template>` will execute on demo page load.

### Make a web component library
If you have a project like this, make a single `my-component-libary.ts` file that imports the other components and the compiler compiles it into UMD, bundle and es2015:

```
project/
├── my-component-libary.ts
└── components
    ├── my-component
    │   ├── my-component.ts
    │   ├── my-component.scss
    │   └── my-component.md
    └── my-other-component
        ├── my-other-component.ts
        └── my-other-component.md
```

In `my-component-libary.ts`:

```typescript
@import './components/my-component/my-component.js';
@import './components/my-other-component/my-other-component.js';
```

_When referencing to component files use ending `.js` so it works with native modules loading in supported browsers_

## Can you help?

Yes! The more people (and bots) the better.

Please create an issue, make a pull request, start a discussion or ping me on [twitter - @emolrmoeller](https://twitter.com/emilrmoeller).

## Development

For development, you can use this demo project that uses all the features of the cli [web-component-ui-demo](https://github.com/emolr/web-component-ui-demo)

## The future? 

* Implement a testing suite like [web-component-tester](https://github.com/Polymer/web-component-tester).
* Make the documentation pages themable and add features reading from package.json. Like add a git link if git has been configured in a package.json file for example.
* Update style on documentation in general.
* Have tests on this codebase.

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