Skip to content

💀 Skeleton 💀 for LitElement app with TypeScript, Webpack, PostCSS and Service Workers ready.

License

Notifications You must be signed in to change notification settings

sipi/type-scripted-lit-element-skeleton

Repository files navigation

TypeScripted LitElement Skeleton

GitHub release Build Status GitHub issues XO code style

A mininum boilerplate to deliver a LitElement 2.x with TypeScript, Webpack, PostCSS and Service Workers ready.

Features

Loaders

Supported Browsers

All modern browsers. 🕶

But as the features said, we are also transpiling the bundle for "oldie" browsers. Of course we are not covering things like IE11.

Usage

Clone this repository:

git clone --depth 1 https://github.com/sipi/type-scripted-lit-element-skeleton [your-app-name]

Remove the .git folder and change details within:

  • package.json
  • src/manifest.json

Then start building your application!

yarn

Developing

Start the webpack-dev-server on localhost http://localhost:3000 with hot-reload and watch on .pcss files.

yarn dev

Test

XO for code style, Stylelint for PostCSS linting, and WCT for components tests:

yarn test

Run Lighthouse for testing the PWA capabilities:

yarn test:lighthouse

Build

(Almost) production-ready (webpack --optimize-minimze and copy statics) to dist folder. Also generating Service Workers. The command will also create the module version of the bundle ready to be loaded as type=module.

yarn build

Styling components with PostCSS

During development .pcss files will be watched, compiled and injected to the relative <style> tag within the component template. The CSS is scoped to the component so don't worry about CSS specificity, you can also use :host, :host-context and :root selectors. Read more about styling web components and custom CSS properties.

We also include Autoprefixer plugin, if you don't know how it works (...and you should), it allows you to write CSS without worrying about vendor prefixes. Just write your css properties prefix-free and let autoprefixer do the work for you when compiling.

How about commons styles? You can simply import any other .pcss file within your main component .ts file and print it inside the render().

We are getting the webpcomponents-loader.js polyfill from GitHub using NPM/Yarn and copying it into a vendor folder with a Node script.

Contributors

Name Website
Alessio Occhipinti https://godev.space
Mattia Astorino http://equinsuocha.io/
Clément Sipieter http://clement-sipieter.fr

License

PolymerX © MIT Clément SIPIETER © MIT

About

💀 Skeleton 💀 for LitElement app with TypeScript, Webpack, PostCSS and Service Workers ready.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published