a rough sketch of writing reactive components.

reactive-components.html

<template component="MyComponent" store="global">
  <div 
    @click="(e) => console.log('Clicked on: ' + this.name)" // event listeners 
    .name={{ name }} // properties
    name="{{ name }}" // attributes
  >
    Hello {{ name }}
  </div>
</template>

<div component="MyComponent"></div>

<script type="module">
  import { createStore } from "fe-framework"
  
  const globalStore = createStore("global", {
    name: null
  })
  setTimeout(() => {
    globalStore.name = "Cory"
  }, 2_000)

                             
  // Listen to changes
  globalStore.addEventListener("update", (e) => {
    console.log(e.changedProperties)
    // => Map { "name": { oldValue: null, newValue: "Cory" } }                 
  })
</script>