Web Components in 2019: Part 2

We introduce HTML templates, Web Component life-cycle callbacks, and the biggie, a modern build system using webpack.

This article is part of a series starting with Web Components in 2019: Part 1.

Counter

note: The example in this article is available in the part2 branch of the larkintuckerllc/lwc-2019 GitHub repository.

In this next example, we create the “Hello World” of interactive applications, specifically a counter component.

Updating the code; src/index.ts:

Observations:

• The code introduces two new concepts, HTML templates and Web Component lifecycle callbacks; described in the MDN Web Components articles Using templates and slot and Using custom elements respectively
• The biggest difference between TypeScript and JavaScript in this example is that with TypeScript we are required to scope, type, and initialize class properties

We Need a Modern Build System

Looking at this example, we have a number of problems:

• The big one is that we have no mechanism to bundle multiple source files into a single TypeScript file; the index.ts file would quickly become unwieldily as we define additional components
• Related to the first problem, we have no mechanism to use third-party libraries (other than copying the appropriate source to the dist folder and manually adding them to the HTML file; old-school style)
• We have no mechanism to split out the template’s HTML into a separate file; we were forced into defining it as a JavaScript string (no HTML / CSS syntax highlighting in our editor)
• We do not have live-reloading, i.e., every time we edit the source code we have to manually compile the code
• Typically we consider the dist folder to be a build artifact, i.e., one typically does not commit such artifacts into source control. To follow this pattern, we would have to manually create the index.html and copy the webcomponentsjs folder in a fresh dist folder as part of the build process
• We do not have source maps; we only inspect the transpiled JavaScript in the browser’s developer tools

webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

— webpack — webpack

While this section is not a tutorial on webpack, we provide the specifics to configure it for our purpose (with some observations along the way).

We first need to install a number of development dependencies:

npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev
npm install html-loader --save-dev
npm install ts-loader --save-dev
npm install clean-webpack-plugin --save-dev
npm install copy-webpack-plugin --save-dev
npm install html-webpack-plugin --save-dev

Observations:

• webpack, webpack-cli, and webpack-dev-server are the foundation for the build process
• html-loader solves the problem with importing HTML templates
• ts-loader solves the problem with importing TypeScript source files
• clean-webpack-plugin solves the problem of creating a fresh dist folder
• copy-webpack-plugin solves the problem of copying the webcomponentsjs folder into the dist folder
• html-webpack-plugin solves the problem of creating the index.html file in the dist folder

We update package.json:

Observations:

• We use the build script to build the application’s files (in the dist folder) to distribute to a production web server
• We use the start script to develop the application with live-reloading

We update tsconfig.json:

Observations:

• With this configuration, the TypeScript compiler will transpile modules into JavaScript ES6 modules with a source map

We create the file public/index.html:

Observation:

• The build process will copy this file into the dist folder and append script tag(s) in the head for the JavaScript bundle(s)

The specifics of the build process are defined in the webpack.config.js file:

Observations:

• While most are unfamiliar with the details of webpack configuration, one can generally correlate this configuration against the problems that we identified earlier
• Did have a problem generating source-map files in the production build; something about the minification was causing trouble. Decided to not generate them in this case

Now that we have the build configuration in place, let us improve our source code.

We first extract out the CSS / HTML for the template into a file; src/template.html:

Observations:

• Yeah! We now have syntax highlighting in our editor

We then update src/index.ts to import the template file:

Observations:

• We also got rid of the Immediately Invoked Function Expression (IIFE) as webpack handles this code as a module

A TypeScript requirement is that we have to declare the typing of (non-TypeScript) imports; in this case HTML files are imported as strings. We make these declarations in a special folder src/types, in this case src/types/html.d.ts:

Next Steps

In the next article, Web Components in 2019: Part 3, we explore Web Component composition.