The HTML Component Pattern HCP

Frank Lemanschik — Sat, 22 Feb 2020 11:22:45 +0000

I am at Present Promoting the HTML Component Pattern that i have invented and want to exchange it more with the world to get Response from none Senior Devs if they understand it or not.

I found on this page this article and thought I should Post my Pattern here.

https://dev.to/megazear7/the-vanilla-javascript-component-pattern-37la

I also hate react for what they did with the Specs and how they try to compensate that with even more bad code.

A Little CodePen to play with https://codepen.io/frank-dspeed/pen/xxGRYxp?editors=1011

So let me start to introduce the pattern I will let you think about it.

The Rules:
Return always String and let the Browser do the Execution we call this Declarative Templating.

Here is a basic HTML Component no custom-element is needed to Archive our Goal while we could use customElement api if we want to but we have no need most times if we only use the connectedCallback the Script tag is like a custom Controlled connectedCallback or let us Say ComponentDidMount Hook

<!-- gets processed before DOMContentLoaded -->
<p>My <span>component</span></p>
<script defer>{
    const customElement = document.currentScript.previousElementSibling;
    customElement.querySelector('span').innerText = 'Component'
    customElement.innerHTML += ' Works!';
}</script>

this example defers also code execution and Component Handling to be executed after DOMContentLoaded event the example before will be executed before DOMContentLoaded

<p>My <span>component</span></p>
<script defer>{
    const customElement = document.currentScript.previousElementSibling;
    document.addEventListener('DOMContentLoaded', () => {
      customElement.querySelector('span').innerText = 'Component'
      customElement.innerHTML += ' Works after DOMContentLoaded!';
    });  
}</script>
//import.meta.scriptElement.getRootNode()

I hope you get the idea and that I could give you some insights into how the Browser Works. As the First that a Browser does is Parsing HTML it makes sense to Work with HTML to control the Loading pipeline.

I also want to show a class based Example

This is the customElement aka Component

lets call the file my-element.js


export class myElementDefinition {
 connectedCallback() {
      this.querySelector('span').innerText = 'Component'
      this.innerHTML += ' Works after DOMContentLoaded!';
 }

}

index.html


<p>My <span>component</span></p>
<script defer>{
    const customElement = document.currentScript.previousElementSibling;
    // Download the Module and Instantiate it but don't use it
    // Thanks to defer this gets done in parallel none-blocking.
    const myElementModule = import('./my-element.js')
    document.addEventListener('DOMContentLoaded', async () => {
      // At this Stage our Module is fetched and Instatiated lets use it
      const { myElementDefinition } = await myElementModule
      const { connectedCallback } = myElementDefinition.prototype
      connectedCallback.apply(customElement)
    });  
}</script>

If you wonder why the hell I used apply and all that this is related to the customElement Spec its the same process that the Browser uses to register nativ customElement definitions.

And Please comment any suggestions or problems that you have with this Pattern thanks a lot happy coding.

Final lets show NodeJS SSR of such a Component

import fs from 'fs'
// This references the index.html from prev example assuming everything in same folder

function requestHandler(req,res) {
   res.end(`<html><body>${fs.readFileSync('./index.html')}</body></html>`)
}

This illustrates that we can render such components and the component handles it self the loading

Note for my Self

I should expand on this to a few other general topics like

How to Import a .html file as single file component.
- In that i should introduce the template tag
I should show inharitance. of HTML Components.
I Should show Reactive State via Stream Observeables

DEV Community: Frank Lemanschik

The HTML Component Pattern HCP

Final lets show NodeJS SSR of such a Component

Note for my Self