From 81d98949b385647bda73b9cfb44a8c66e2fff5f8 Mon Sep 17 00:00:00 2001
From: Waldemar Lehner <waldemar.lehner@opitz-consulting.com>
Date: Tue, 23 Apr 2024 11:27:39 +0200
Subject: [PATCH] feat: Implement Vue Web Component, add nested Vue Web
 Component into Vanilla TS app

---
 webcomponent-react/src/main.tsx               |  1 -
 webcomponent-vanilla/src/Frontend.ts          | 36 ++++++++++++++++++
 webcomponent-vanilla/src/index.module.scss    |  4 ++
 webcomponent-vue/src/App.vue                  |  2 +-
 .../src/components/Frontend.ce.vue            |  1 +
 webcomponent-vue/src/webcomponent.ts          | 38 +++++++------------
 webcomponent-vue/vite-webcomponent.config.ts  |  2 -
 7 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/webcomponent-react/src/main.tsx b/webcomponent-react/src/main.tsx
index 3d7150d..e63eef4 100644
--- a/webcomponent-react/src/main.tsx
+++ b/webcomponent-react/src/main.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
diff --git a/webcomponent-vanilla/src/Frontend.ts b/webcomponent-vanilla/src/Frontend.ts
index 064339e..b6de886 100644
--- a/webcomponent-vanilla/src/Frontend.ts
+++ b/webcomponent-vanilla/src/Frontend.ts
@@ -19,9 +19,16 @@ const template = `
     <p>
       Diese Komponent ist mit Vanilla TS / Vite implementiert
     </p>
+
+    <p>Als Demonstration, dass Verschachtelung auch möglich ist, wurde hier die Vite+Vue3 Komponente verschachtelt einbunden und an den <b>lokalen</b> Zustand angebunden </p>
+
+    <div id="nested-frontend"> Loading... </div>
+
   </div>
   `
 
+
+
 export default function createFrontend(parent: HTMLElement, initialCount: number, setCount: (count: number) => void) {
   parent.innerHTML = template
 
@@ -30,6 +37,7 @@ export default function createFrontend(parent: HTMLElement, initialCount: number
 
   const counterElement = parent.querySelector<HTMLButtonElement>("#counter")!
   const localCounterElement = parent.querySelector<HTMLButtonElement>("#local-counter")!
+  let nestedFrontendElement: Element | undefined = undefined
 
   const updateCounter = (newCount: number) => {
     count = newCount
@@ -39,6 +47,12 @@ export default function createFrontend(parent: HTMLElement, initialCount: number
   const updateLocalCounter = (newCount: number) => {
     localCount = newCount
     localCounterElement.innerHTML = `Lokaler Zustand ${newCount}`
+
+    if(!!nestedFrontendElement) {
+      // @ts-ignore
+      nestedFrontendElement.count = localCount
+    }
+
   }
 
   counterElement.addEventListener("click", () => setCount(count + 1))
@@ -47,5 +61,27 @@ export default function createFrontend(parent: HTMLElement, initialCount: number
   updateCounter(count)
   updateLocalCounter(localCount)
 
+  const nestedFrontendRoot = parent.querySelector<HTMLDivElement>("#nested-frontend")!
+
+  insertNestedFrontend(nestedFrontendRoot, updateLocalCounter).then( e => nestedFrontendElement = e )
+
   return updateCounter
 }
+
+async function insertNestedFrontend(element: HTMLDivElement, newStateCallback: (count: number) => void) {
+  // @ts-ignore
+  (await import("http://localhost:5002/webcomponent.js")).default("webcomponent-vue") // redundant, but here anyways
+  // for consistency
+
+  element.innerHTML = `<webcomponent-vue count='0' class="${styles.nested}"></webcomponent-vue>`
+
+  const nestedFrontend = element.querySelector("webcomponent-vue")!
+
+
+  nestedFrontend.addEventListener("count", (ev) => {
+    const [count] = (ev as any).detail as [number]
+    newStateCallback(count)
+  })
+
+  return nestedFrontend
+}
diff --git a/webcomponent-vanilla/src/index.module.scss b/webcomponent-vanilla/src/index.module.scss
index 16d1ccc..bbd425f 100644
--- a/webcomponent-vanilla/src/index.module.scss
+++ b/webcomponent-vanilla/src/index.module.scss
@@ -72,3 +72,7 @@
   }
 }
 
+.nested {
+  border: wheat 1px solid;
+  display: flow-root;
+}
diff --git a/webcomponent-vue/src/App.vue b/webcomponent-vue/src/App.vue
index ae14100..5552dd4 100644
--- a/webcomponent-vue/src/App.vue
+++ b/webcomponent-vue/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import Frontend from "./components/Frontend.vue"
+import Frontend from "./components/Frontend.ce.vue"
 
 const count = ref(0)
 
diff --git a/webcomponent-vue/src/components/Frontend.ce.vue b/webcomponent-vue/src/components/Frontend.ce.vue
index 564c9c9..2cd0cb4 100644
--- a/webcomponent-vue/src/components/Frontend.ce.vue
+++ b/webcomponent-vue/src/components/Frontend.ce.vue
@@ -12,6 +12,7 @@ const localCount = ref(0)
 <template>
 <div class="root">
   <div>
+
     <a href="https://vitejs.dev" target="_blank">
       <img src="/vite.svg" class="logo" alt="Vite logo" />
     </a>
diff --git a/webcomponent-vue/src/webcomponent.ts b/webcomponent-vue/src/webcomponent.ts
index e276cd3..6ff777a 100644
--- a/webcomponent-vue/src/webcomponent.ts
+++ b/webcomponent-vue/src/webcomponent.ts
@@ -1,7 +1,7 @@
 // The web-component build process uses this as the export
 // This defines a web-component which starts the Web-App that was defined here.
-import { Ref, createApp, ref } from "vue"
-import Frontend from "./components/Frontend.vue"
+import { defineCustomElement } from "vue"
+import Frontend from "./components/Frontend.ce.vue"
 
 
 export default function register(name: string) {
@@ -14,14 +14,15 @@ export default function register(name: string) {
     customElements.define(name, MicrofrontendWebComponent)
 }
 
-class MicrofrontendWebComponent extends HTMLElement {
+
+const VueWebComponent = defineCustomElement(Frontend)
+
+// See also: https://vuejs.org/guide/extras/web-components.html
+class MicrofrontendWebComponent extends VueWebComponent {
   declare count: number
-  declare styleAddress?: string
-  #root!: ShadowRoot
 
-  #state = ref(0)
   render() {
-    this.#state.value = this.count
+    // Vue's defineCustomElement already does everything for us :)
   }
 
   private emitCountUpdate(newCount: number) {
@@ -31,25 +32,14 @@ class MicrofrontendWebComponent extends HTMLElement {
   }
 
   connectedCallback() {
-    this.#root = this.attachShadow({mode: "open"})
-    const mount = document.createElement("div")
-
-    const styleAddress = this.styleAddress ?? import.meta.env.BASE_URL + "style.css"
-
-    const style = document.createElement("link");
-    style.rel = "stylesheet"
-    style.href = styleAddress
-    this.#root.appendChild(style)
+    super.connectedCallback()
 
-    this.#root.appendChild(mount)
+    // Register update listener
+    super.addEventListener("count", (ev) => {
+      const [count] = (ev as any).detail as [number]
+      this.emitCountUpdate(count)
+    })
 
-    createApp(Frontend, {
-      count: this.#state,
-      onCount: (count: Ref<number>) => {
-        debugger
-        this.emitCountUpdate(count.value)
-      }
-    }).mount(mount);
   }
 }
 
diff --git a/webcomponent-vue/vite-webcomponent.config.ts b/webcomponent-vue/vite-webcomponent.config.ts
index c255186..05f9b74 100644
--- a/webcomponent-vue/vite-webcomponent.config.ts
+++ b/webcomponent-vue/vite-webcomponent.config.ts
@@ -5,7 +5,6 @@ import {resolve} from "node:path"
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   define: {
@@ -13,7 +12,6 @@ export default defineConfig({
   },
   base: "http://localhost:5002/",
   build: {
-    minify: false,
     lib: {
       entry: resolve(__dirname, "src/webcomponent.ts"),
       formats: [