padl
Develop pattern libraries with lit-element
Last updated 3 months ago by jholt1 .
MIT · Original npm · Tarball · package.json
$ cnpm install padl 
SYNC missed versions from official npm registry.

PaDL - Pattern Design Library System

Installation

npm i -g padl

About

This is a project that allows you to easily create pattern libraries, with pure webcomponents using polymer (or lit). It bundles all of your components together with the needed polyfills so that you only require one js file.

Why use?

Padl does a few things that makes developing webcomponents easier:

  1. ???? Generates all the files that you need, when creating a pattern library and when creating a new component.
  2. ????‍???? Creates a kickass development environment, using storybook.
  3. ???? Bundles and tree shakes all the needed files together.

Example structure

If we create a hello-world pattern library with a primary-button web component:

├─┬ hello-world
  ├─┬ src
  | └─┬ primary-button
  |   ├── component.js
  |   ├── story.js
  |   └── styles.less
  ├─┬ test
  | ├─┬ primary-button
  | | ├── primary-button_test.js
  | | └── primary-button_test.html
  | └── index.html
  └─┬ dist
    ├── hello-world.min.js
    └── components.min.js

To create this example:

 npm i -g padl
 padl new hello-world
 cd hello-world && npm i
 padl g primary-button
 padl build

Integration

As seen in the example, hello-world.min.js file is created.

This will add all the polyfills, components, lit-element and can inline your global styles. This is in an effort to reduce the amount of blocking, while keeping the file as small as possible.

Note:

Our browser coverage is last 2 browsers + IE11. For this reason we aren't moving forward with ES modules, however with this setup it will allow us to start to look into how to implement.

How to

Create a new pattern library

  padl new [name]

Options

  • type: polymer, lit (default: polymer)
 padl new [name] --type lit

After creating a new pattern library you can:

 cd [name] && npm i

Create a new component

Inside your pattern library

 padl g [component-name]

This will create a polymer or lit component (based on your .padl type). It will also generate the story.js, styles.less and the test files.

Delete a component

Inside your pattern library

 padl d [component-name]

Build your library

Inside your pattern library

 padl build

In your dist folder will find the components.min.js

Serve a component

Inside your pattern library

 padl serve

This will generate a storybook of all your component stories at localhost:9001

Options

  • port: 8080 (default: 9001)
 padl serve --port 8080

Config file

  • type polymer/lit (String, Default: polymer, prefilled on setup)
  • watch (Object)
    • watchGlob (Array)
    • commands (Array)
  • static (Array)
  • globalStyle
    • input (String)
    • output (String)
    • watch (String|Array|Glob)
{
  "type": "lit",
  "watch": {
    "watchGlob": ["styles/**", "dist/*"],
    "commands": ["npm run less:watch"]
  },
  "static": ["./styles/fonts"],
  "globalStyle": {
    "inline": true,
    "input": "./styles/base/all.less",
    "output": "./dist/styles.min.css",
    "watch": "./styles/**"
  }
}

Test your components

Inside your pattern library

 padl test

Options

  • persistent (default: false)
  • headless (default: false)
Persistent
 padl test --persistent
 padl test -p
Headless

For headless testing to work you need a config file in your project root called wct.headless.config.json.

An example of how this file could be:

{
  "plugins": {
    "local": {
      "browsers": ["chrome", "firefox"],
      "browserOptions": {
        "chrome": [
          "headless"
        ],
        "firefox": [
          "-headless"
        ]
      }
    }
  }
}
 padl test --headless
 padl test -h

Dependencies

This uses a variety of other resources:

  • Lit Element
  • Storybook

Current Tags

  • 1.0.0-alpha.3                                ...           experimental (9 days ago)
  • 0.3.7                                ...           latest (3 months ago)
  • 0.3.7-beta.1                                ...           next (3 months ago)

74 Versions

  • 1.0.0-alpha.3                                ...           9 days ago
  • 1.0.0-alpha.2                                ...           9 days ago
  • 1.0.0-alpha.1                                ...           9 days ago
  • 0.3.8-alpha.4                                ...           2 months ago
  • 0.3.8-alpha.3                                ...           2 months ago
  • 0.3.8-alpha.2                                ...           3 months ago
  • 0.3.8-alpha.1                                ...           3 months ago
  • 0.3.7                                ...           3 months ago
  • 0.3.7-beta.1                                ...           3 months ago
  • 0.3.7-alpha.8                                ...           3 months ago
  • 0.3.7-alpha.7                                ...           3 months ago
  • 0.3.7-alpha.6                                ...           3 months ago
  • 0.3.7-alpha.5                                ...           5 months ago
  • 0.3.7-alpha.4                                ...           5 months ago
  • 0.3.7-alpha.3                                ...           5 months ago
  • 0.3.7-alpha.2                                ...           5 months ago
  • 0.3.7-alpha.1                                ...           5 months ago
  • 0.3.6                                ...           5 months ago
  • 0.3.6-alpha.5                                ...           5 months ago
  • 0.3.6-alpha.4                                ...           5 months ago
  • 0.3.6-alpha.3                                ...           5 months ago
  • 0.3.6-alpha.2                                ...           5 months ago
  • 0.3.6-alpha.1                                ...           7 months ago
  • 0.3.5                                ...           7 months ago
  • 0.3.5-alpha.1                                ...           7 months ago
  • 0.3.4                                ...           7 months ago
  • 0.3.4-beta.1                                ...           7 months ago
  • 0.3.4-alpha.18                                ...           7 months ago
  • 0.3.4-alpha.17                                ...           7 months ago
  • 0.3.4-alpha.16                                ...           7 months ago
  • 0.3.4-alpha.15                                ...           7 months ago
  • 0.3.4-alpha.14                                ...           7 months ago
  • 0.3.4-alpha.13                                ...           7 months ago
  • 0.3.4-alpha.12                                ...           7 months ago
  • 0.3.4-alpha.11                                ...           7 months ago
  • 0.3.4-alpha.10                                ...           8 months ago
  • 0.3.4-alpha.9                                ...           8 months ago
  • 0.3.4-alpha.8                                ...           8 months ago
  • 0.3.4-alpha.7                                ...           8 months ago
  • 0.3.4-alpha.6                                ...           8 months ago
  • 0.3.4-alpha.5                                ...           8 months ago
  • 0.3.4-alpha.4                                ...           8 months ago
  • 0.3.4-alpha.3                                ...           8 months ago
  • 0.3.4-alpha.2                                ...           8 months ago
  • 0.3.4-alpha.1                                ...           8 months ago
  • 0.3.3                                ...           8 months ago
  • 0.3.2                                ...           8 months ago
  • 0.3.1                                ...           8 months ago
  • 0.3.0                                ...           8 months ago
  • 0.3.0-alpha.2                                ...           8 months ago
  • 0.3.0-alpha.1                                ...           8 months ago
  • 0.2.3                                ...           10 months ago
  • 0.2.2                                ...           10 months ago
  • 0.2.1                                ...           a year ago
  • 0.2.1-alpha.3                                ...           a year ago
  • 0.2.1-alpha.2                                ...           a year ago
  • 0.2.1-alpha.1                                ...           a year ago
  • 0.2.0                                ...           a year ago
  • 0.1.5-alpha.9                                ...           a year ago
  • 0.1.5-alpha.8                                ...           a year ago
  • 0.1.5-alpha.7                                ...           a year ago
  • 0.1.5-alpha.6                                ...           a year ago
  • 0.1.5-alpha.5                                ...           a year ago
  • 0.1.5-alpha.4                                ...           a year ago
  • 0.1.5-alpha.3                                ...           a year ago
  • 0.1.5-alpha.2                                ...           a year ago
  • 0.1.5-alpha.1                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 39
Last Day 0
Last Week 39
Last Month 9
Dependencies (26)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |