StencilJS & Web Worker: A Fairy Tale

The story of the Stencil’s compiler and its magical integration of the Web Worker API.

Once upon a time, there was a compiler that generates Web Components and builds high performance web apps called StencilJS. Among all the build-time tool ever created, it had for goal to build faster, more capable components that worked across all major frameworks.

On the internet next door, there lived a boy (me 😉). And the boy watched the compiler grow more and more effective, more and more developer friendly with each passing year.

One day, as he was developing something new in his beloved project DeckDeckGo, the boy had the idea to experiment a feature of the compiler he had never tried so far, the integration of Web Workers.

He was so blew away by the results, that he had to share that magical encounter.

Chapter One: Abracadabra

A boy publishes a blog post but would not reveal any unknown secret spells. Meanwhile, there would be no good fairy tale without magic words.

Fortunately, the compiler has shared its sorcery to anyone publicly in a very well documented grimoire called “documentation”.

Valiant knights seeking to technically defeat such implementation, let me suggest you to have a look to these spells but, if to the contrary you are here to find a quest, stay with me and let me tell you the rest of the story.

Chapter Two: Init Camelot

King Arthur and the Round Table had Camelot, we, developer, have Web Components and shadow DOM, which can be metaphorically represented as castles. That’s why we are initializing a new Stencil playground before experimenting new magical tricks.

npm init stencil

In addition, to replicate the exact formula the boy had tried out, we enhance our fortifications with the usage of Marked.js so that we give our component the goal to render a magical sentence from Markdown to HTML.

npm i marked @types/marked

Having found some mortar, we are creating a component which aims to reproduce the rendering spell by transforming…