@wcom/create-app

Introduction

See an example of a project created with @wcom/app here.

Simply create a modern web component library by running the following...

# NPM
$ npm init @wcom/app <my-library>

# Yarn
$ yarn create @wcom/app <my-library>

Then follow the prompts and you'll be up and running in no time!

Once you are ready, simply create your first component and test inside ./src/components and then run npm run transform. From here the worlds your oyster, keep reading for some more information on how this library works.

IDE

If you're using VSCode then consider installing the following extensions...

• ESLint
• Prettier
• lit-plugin

Build

The build script simply leverages TypeScript to do the work and outputs basic CJS and ESM exports as Polymer suggests...

We recommend publishing components as unoptimized JavaScript modules, and performing build-time optimizations at the application level. This gives build tools the best chance to deduplicate code, remove dead code, and so on.

Lint

Linting is performed by ESLint and comes out of the box with simple defaults...

• typescript-eslint
• eslint-plugin-wc
• eslint-plugin-lit
• eslint-config-prettier
• eslint-plugin-simple-import-sort

In addition, lit-analyzer is used to type-check and lint lit-html templates with the same engine and rules as lit-plugin. Finally code is formatted by Prettier.

Test

Testing is performed by the Web Test Runner. Simply create src/**/*.test.ts files and run any test:* script. See their documentation for more information.

Release

Releases are automatically run by GitHub Actions and are processed by semantic-release. Simply push to the release branch when you want to create a @latest release, and push to the next branch when you want to create a @next release.

See Conventional Commits for commit guidelines.

Documentation

Documentation is automatically generated by the transform command (more information below) and exists as a README.md file alongside your components. This is why it's recommended to create your components in separate directories.

Transform

The transform command uses @wcom/cli to parse your TypeScript files and collect metadata such as what properties, methods, events and other information each component contains. This metadata can then be transformed into other formats such as JSON and markdown. Click the link above for more information.