Re-using my sample QR Code StencilJS Web Component
A quick post showing how to integrate a StencilJS Web Component
A few years back (October 2017), I made a sample QR Code web component/Custom Element using StencilJS.
Last year I tried to show this off on this blog, and only succeeded today .
Better late than never!
The hard part was finding how to import an ES Module built by StencilJS and published on a Github Page.
This Stackoverflow post showed me how to use async imports to load an ES Module.
You can find the page on the github repository, try it in the playground web-component page; I also combined Markdown parsing + Svelte to integrate it in this post below.
Try it out
Here is a QR Code Custom Element with Svelte bindings to make it more reactive.
And now an Angular Application (packaged as a Web Component using Angular Elements)
Maybe I’ll need to import zone.js
…
The code
Seems simple, after having spent a few hours on trying to make it work !
<script lang="ts">
import { onMount } from 'svelte';
let qrCodeContents = "test";
onMount(async () => {
// this one is a StencilJS component
await import("https://doppelganger9.github.io/stencil-qrcode-component/build/stqrcmp.esm.js");
// this one is an Angular Element application and needs Zone.js
await import("https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js");
await import("https://doppelganger9.github.io/tables-multiplications/table-multiplication-app.js");
});
</script>
<label for="qr-content">You can change the QR Code contents here:</label>
<input id="qr-content" type="text" bind:value={qrCodeContents} />
<qr-code
class="with-rounded-corners"
contents={qrCodeContents}
output-mode="SVG"
style="width: 300px;height: 300px;">
</qr-code>
<style>
qr-code {
padding: 5px;
margin: 0 auto;
}
</style>
<!-- And the Angular App Custom Element: -->
<tables-multiplications-app></tables-multiplications-app>
towards Micro-Frontends ?
This is an example to show how to mix 3 frameworks (Svelte, StencilJS, Angular) with SvelteKit as the Host, and StencilJS or Angular providing custom web components. One of these custom elements is an entire app (albeit small)!
My ultimate goal is to learn by experimenting on how to integrate/federate different apps built with different technologies (React, Angular, StencilJS, Svelte, Vue).
To do that, this blog is an interesting playground. Also I have other side projects in these technologies, that I could federate and explain more in this blog.
- a Vue app : https://github.com/doppelganger9/hystoire-de-fou
- a React app : https://github.com/doppelganger9/react-cv-template
So, my next goal is to try integrating one of those 2 apps.
Maybe this blog will become a complete website, we’ll see…
See you in a year! …well, just kidding, I hope not, we’ll see !
(EDIT: I integrated an Angular App a few days later. I will complete this post with more details.)
Reference
See https://github.com/doppelganger9/stencil-qrcode-component
Image credit : “Photo Boards” from Unsplash user @createandbloom
Discussion
As always, feel free to reply to this post below , also my DMs are open on Twitter or you can find me on Mastodon: @david_lacourt@mamot.fr!