This is post 2 of 1 in the series "Blog Website"

• Blog Website - Part 1: Website
• Blog Website - Part 2: Web Component Library
• Blog Webiste - Part 3: Deployment & Hosting

General overview

During development, I came to the conclusion that I need my own list of components that I'm going to use within the markdown files to reduce the boilerplate. I decided to develop my own web component library. Obviously, I need a bundler to build a components library. I've chosen Webpack.

Web Component

I like the way when HTML, JS/TS and CSS/SASS reside in separate files. So in my ideal world, I knew that the component should consist of the following files:

• component-a.element.ts - Standard web component
• component-a.element.scss - Styles
• component-a.element.html - Template
• component-a.element.md - Element documentation file.

Environments & Configurations

The library has multiple webpack config files. I have:

• webpack.common.js - general config that is inherited by dev and prod config versions
• webpack.dev.config.js - development version that starts the dev server with a demo page
• webpack.prod.config.js - builds prod bundle, minified, uglified, without sourcemaps etc.

Angular dev environment integration

The interesting part is that I can start the development environment, and in this case, we'll see the demo page, which includes all *.element.md files. However, another option exists for developing web components in the dev environment. When I start a blog website, I can start both in dev mode concurrently with one npm command. In this way, I can make changes to the blog or the web components library at the same time. I can see and debug both, as all sourcemaps are available in this mode. For this to work, I used the concurrently node library. Now, I can develop both simultaneously by running only one command in the terminal.

Code element

The library includes many different components, but the one component that really deserves our attention is the code component. At first, the idea was to improve the single-line code component. I haven't found the single-line syntax highlighting in ngx-markdown, so I decided to implement my own tokenizer, which will highlight syntax on single-line code elements. However, during the development, I got really excited with what I was doing, and I decided to implement a code component that would work not only with single-liners but with multi-line code as well.

Here is the example of code displayed by my code component:

Pre-Push Git hook

In order to always have the "fresh" bundle with the latest changes and not allow push changes to web components without building the production bundle, I've installed husky. I added pre-push hook. Once the development of the web component is finished and changes are pushed, the production bundle is built and pushed along with the changes.