web-component-ui
A web component build tool and styleguide generator CLI tool.
Last updated 2 years ago by emolr .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install web-component-ui 
SYNC missed versions from official npm registry.

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:

<!--
```
<custom-element-demo>
  <template>
    <script src="my-component.bundle.js">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<my-component></my-component>
```

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:

@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.

Development

For development, you can use this demo project that uses all the features of the cli web-component-ui-demo

The future?

  • Implement a testing suite like 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.

Current Tags

  • 0.0.20                                ...           latest (2 years ago)

20 Versions

  • 0.0.20                                ...           2 years ago
  • 0.0.19                                ...           2 years ago
  • 0.0.18                                ...           2 years ago
  • 0.0.17                                ...           2 years ago
  • 0.0.16                                ...           2 years ago
  • 0.0.15                                ...           2 years ago
  • 0.0.14                                ...           2 years ago
  • 0.0.13                                ...           2 years ago
  • 0.0.12                                ...           2 years ago
  • 0.0.11                                ...           2 years ago
  • 0.0.10                                ...           2 years ago
  • 0.0.9                                ...           2 years ago
  • 0.0.8                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (2)
Downloads
Today 1
This Week 1
This Month 23
Last Day 0
Last Week 21
Last Month 6
Dependencies (25)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |