Typescript Web Component Boilerplate
These components where built with the code from this link:
https://github.com/lucabro81/typescript-web-component-boilerplate.git
This (IMO) is the cleanest example of a web component, typescript, and webpack combination builder that is
nicely put together. The repository pointed to by the link above has helped me understand web components at a deeper level. The source code will tell you what steps that you need to take to make a web component and prepare it for distribution.
Template to build lazy loaded web components collections with Typescript and nothing(almost)else. Well, there're some other dependencies but are mainly for webpack.
Installation
https://github.com/lucabro81/typescript-web-component-boilerplate.git
cd path/to/project/folder
npm install
How to use
npm run create-new-component nameComponent
This command will create a component folder in /src, named /name-component, with seven files inside: a Typescript class and dts, a file that exports an array of observed attributes, an index file and relatively dts to export a function to register the component, the css file and the html template.
An import will be added to main.ts
Scripts
npm run start
Start a webpack dev server with hot reloading
npm run watch
Start a webpack watcher
npm run build
Guess what... yep.
npm run build:prod:patch | build:prod:minor | build:prod:major
Guess what... yep, but production mode. Useful when you want to deploy to a cdn the components' library. Also bump the version project
npm run build:npm
Prepare the package for the npm publish
npm run publish:npm:patch | publish:npm:minor ! publish:npm:major
Clean the package folder, emit the js ready for the publication, move, dts in the right place and publish. Also bump the version project
npm run clean
Get rid of node_modules and package-lock.json and reinstall all the (few) dependencies
npm run update
Update dependencies.
npm run lint
Linter and prettier that run on staged changes, it seems the git hook on commit doesn't work with phpstorm, I've to understand why