wip: add react, vanilla and vue components

opitzconsulting · Apr 19, 2024 · 7e2ffe3 · 7e2ffe3
1 parent 888c0ff
commit 7e2ffe3
Show file tree

Hide file tree

Showing 27 changed files with 1,107 additions and 329 deletions.
diff --git a/main/src/app/app.component.html b/main/src/app/app.component.html
@@ -2,7 +2,9 @@
   <div>
     <h1>Hallo, Welt!</h1>
 
-    <span class="counter">Zustand:  <b>{{this.count}}</b> </span>
+    <span class="counter"
+      >Zustand: <b>{{ this.count }}</b>
+    </span>
 
     <p>
       Dieser Text ist Teil des Host-Frontends. Hier sind 2 weitere Komponenten
@@ -13,10 +15,22 @@ <h1>Hallo, Welt!</h1>
     </p>
 
     <app-remote-web-component
-      moduleAddress="http://localhost:5000/webcomponent-react.js"
-      styleAddress="http://localhost:5000/style.css"
+      moduleAddress="http://localhost:5000/webcomponent.js"
       name="webcomponent-react"
+      [count]="count"
+      (countUpdated)="count = $event"
+    ></app-remote-web-component>
 
+    <app-remote-web-component
+      moduleAddress="http://localhost:5001/webcomponent.js"
+      name="webcomponent-vanilla"
+      [count]="count"
+      (countUpdated)="count = $event"
+    ></app-remote-web-component>
+
+    <app-remote-web-component
+      moduleAddress="http://localhost:5002/webcomponent.js"
+      name="webcomponent-vue"
       [count]="count"
       (countUpdated)="count = $event"
     ></app-remote-web-component>

diff --git a/main/src/app/app.component.scss b/main/src/app/app.component.scss
@@ -7,7 +7,6 @@ div#main {
   align-items: center;
   flex-direction: column;
   color: white;
-
   > div {
     max-width: 64rem;
     border: wheat solid 1px;
@@ -16,3 +15,4 @@ div#main {
   }
 
 }
+
diff --git a/main/src/app/remote-web-component/remote-web-component.component.scss b/main/src/app/remote-web-component/remote-web-component.component.scss
@@ -2,4 +2,5 @@ div.root {
   border: wheat 1px solid;
   border-radius: 10px;
   padding: 20px;
+  margin-top: 10px;
 }
diff --git a/main/src/app/remote-web-component/remote-web-component.component.ts b/main/src/app/remote-web-component/remote-web-component.component.ts
@@ -65,15 +65,13 @@ export class RemoteWebComponentComponent implements OnInit, OnChanges {
 
       // @ts-ignore
       this.webcomponent.count = this.count;
-      // @ts-ignore
-      this.webcomponent.setCount = (count: number) => {
-        this.countUpdated.emit(count)
-      }
-
-      this.child.nativeElement.appendChild(this.webcomponent)
-
 
+      this.webcomponent.addEventListener("count-updated", (event) => {
+        // @ts-ignore
+        this.countUpdated.emit(event.detail)
+      })
 
+      this.child.nativeElement.appendChild(this.webcomponent)
     }
     catch(err) {
       console.error(err)