104 lines
4.1 KiB
Markdown
104 lines
4.1 KiB
Markdown
---
|
|
title: On Web Components
|
|
description: They're ready for the mainstream. Automation testable. Even IE11 compatible, mostly.
|
|
date: 2019-01-23
|
|
tags:
|
|
- Tech
|
|
- Testing
|
|
- Retrospective
|
|
---
|
|
|
|
Components were designed to share reusable code within a project. Sometimes between projects. But, what if a projects' base technology is fundamentally different (Ember, React, Vue)? **Luckily all web apps speak Javascript and the DOM which is where native web components come in.**
|
|
|
|
## Hybrids (Web Component Framework)
|
|
|
|
|
|
|
|
Frameworks serve the purpose of **abstracting away browser inconsistencies**, providing a **richer API for development** and tools for **automation testing**. [Hybrids](https://hybrids.js.org/) accomplishes all this in a small 19.6kb (6.3kb gzipped) plus some for browser compatibility.
|
|
|
|
|
|
|
|
## Polyfills (Browser support)
|
|
|
|
To achieve this level of browser support with a modern web standard such as web components a polyfill. There are additional challenges such as CSS scoping that are essential for true web components. Hybrids integrates conditional shims and polyfills to handle this as best as it can.
|
|
|
|
## Testing (Automation)
|
|
|
|
I've found leveraging Hybrids, Karma and Jasmine can lead to some really clean automation tests. Hybrids offers an importable `html` helpers, which is the same helper it uses under the hood for its own testing and base functionality. So long as you pay close attention to when you need to target a [shadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot) rendering tests become easy with standard DOM methods to manipulate and access the details of your component.
|
|
|
|
``` javascript
|
|
it('renders logo with src and alt', () => {
|
|
return renderComponent(html`<my-component></my-component>`).then(component => {
|
|
let img = component.shadowRoot.querySelector('[data-test-id=componentImg]')
|
|
expect(img.getAttribute('src')).toEqual('foo.png')
|
|
expect(img.getAttribute('alt')).toEqual('foo')
|
|
})
|
|
})
|
|
```
|
|
|
|
## Bundling
|
|
|
|
### Parcel
|
|
|
|
Initially I had great success bundling together Hybrids with [Parcel](https://parceljs.org/). It was as simple as pointing parcel to my html index.
|
|
|
|
However, Parcel is built for websites rather than consumable libraries. Thus I moved on to Webpack.
|
|
|
|
### Webpack
|
|
|
|
Assuming you have a `src/index.js` file that imports a component it's pretty simple to get started. I unfortunately cannot include a reference to the closed source repository here but it should get the idea across for a base webpack configuration. This config also supports JS files that [importing CSS into components which Hybrids supports](https://hybrids.js.org/template-engine/styling#css-stylesheet).
|
|
|
|
``` javascript
|
|
// ./webpack.config.js
|
|
const path = require('path');
|
|
|
|
module.exports = function(env, argv) {
|
|
return {
|
|
context: path.resolve(__dirname),
|
|
|
|
entry: path.resolve(__dirname, 'src/index.js'),
|
|
output: {
|
|
path: path.resolve(__dirname, 'dist'),
|
|
filename: argv.mode === 'test' ? '[name].js' : 'index.js',
|
|
},
|
|
|
|
module: {
|
|
rules: [
|
|
{
|
|
// Inline/Component CSS
|
|
test: /\.css$/,
|
|
use: [ "css-loader" ],
|
|
}, {
|
|
// Javascript
|
|
test: /\.m?js$/,
|
|
exclude: /(node_modules)/,
|
|
use: {
|
|
loader: 'babel-loader',
|
|
options: {
|
|
presets: [
|
|
[ '@babel/preset-env', { modules: false } ]
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
};
|
|
};
|
|
```
|
|
|
|
## Component Structure
|
|
|
|
Finally, I landed on the this project structure which I hope you may be inspired by if you follow in these footsteps.
|
|
|
|
* src
|
|
* components
|
|
* component-name
|
|
* index.js
|
|
* view.js
|
|
* test.js
|
|
* style.css
|
|
|
|
---
|
|
|
|
Wish I could post the full project here and go into more detail. Even still, I hope this serves as a guiding light for those interested in exploring web components in their next project.
|