From e3a4f34b05a59006c454e6f4800a02be7075d521 Mon Sep 17 00:00:00 2001
From: Eran Grinberg <soniceran@gmail.com>
Date: Thu, 25 Jan 2024 00:41:55 +0100
Subject: [PATCH] REFACTOR | Refactor component structure and update slots with
 provide/inject

---
 demo-app-vite/index.html           |  10 +-
 demo-app-webpack/public/index.html |  10 +-
 demo-app-webpack/src/App.vue       | 204 +++++++++++++++--------------
 demo-app-webpack/src/AppChild.vue  |  64 +++++++++
 demo-app-webpack/src/main.js       |  14 +-
 5 files changed, 192 insertions(+), 110 deletions(-)
 create mode 100644 demo-app-webpack/src/AppChild.vue

diff --git a/demo-app-vite/index.html b/demo-app-vite/index.html
index b30adb7..683edfa 100644
--- a/demo-app-vite/index.html
+++ b/demo-app-vite/index.html
@@ -51,11 +51,11 @@ <h2>Custom Event</h2>
       model-value="v-model-value"
     >
       <!-- default slot -->
-    <my-child-component
-      lang="de"
-      route="/route1"
-      class="my-child-component"
-    ></my-child-component>
+      <my-child-component
+        lang="de"
+        route="/route1"
+        class="my-child-component"
+      ></my-child-component>
       
       <!-- named slot -->
       <div slot="customName">I am a custom named slot </div>
diff --git a/demo-app-webpack/public/index.html b/demo-app-webpack/public/index.html
index 89fd1fe..3101a8a 100644
--- a/demo-app-webpack/public/index.html
+++ b/demo-app-webpack/public/index.html
@@ -78,13 +78,17 @@ <h2>Custom Event</h2>
       model-value="v-model-value"
     >
       <!-- default slot -->
-      <h1>I am a default slot</h1>
+      <my-child-component
+        lang="de"
+        route="/route1"
+        class="my-child-component"
+      ></my-child-component>
       
       <!-- named slot -->
-      <div slot="customName">I am a custom slot </div>
+      <div slot="customName">I am a custom named slot </div>
     </my-web-component>
 
-    <script type="module" src="./src/main.ts"></script>
+    <script type="module" src="./src/main.js"></script>
   
     <script >
       const myWebComponent = document.querySelector('my-web-component');
diff --git a/demo-app-webpack/src/App.vue b/demo-app-webpack/src/App.vue
index 2aeeaa1..6a78802 100644
--- a/demo-app-webpack/src/App.vue
+++ b/demo-app-webpack/src/App.vue
@@ -1,107 +1,109 @@
 <template>
-    <div>
-      <header class="bg-blue-300 rounded-lg shadow-lg p-4 mx-0 md:mx-20">
-  
-        <nav>
-          <ul class="flex justify-between sm:mx-1 md:mx-20">
-            <li>
-              <router-link to="/">Home</router-link>
-            </li>
-            <li>
-              <router-link to="/test1">Test route 1</router-link>
-            </li>
-            <li>
-              <router-link to="/test2">Test route 2</router-link>
-            </li>
-
-          </ul>
-        </nav>
-      </header>
-      <header
-        class="bg-gray-800 text-white text-center p-4 mt-4 rounded-lg shadow-lg mx-0 md:mx-20"
+  <div>
+    <header class="bg-blue-300 rounded-lg shadow-lg p-4 mx-0 md:mx-20">
+      <nav>
+        <ul class="flex justify-between sm:mx-1 md:mx-20">
+          <li>
+            <router-link to="/">Home</router-link>
+          </li>
+          <li>
+            <router-link to="/test1">Test route 1</router-link>
+          </li>
+          <li>
+            <router-link to="/test2">Test route 2</router-link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <header
+      class="bg-gray-800 text-white text-center p-4 mt-4 rounded-lg shadow-lg mx-0 md:mx-20"
+    >
+    <div 
+       style="display: flex; justify-content: space-between; "
       >
-      <div 
-         style="display: flex; justify-content: space-between; "
-        >
-        <div class=" text-black flex">
-          <input
-          class="p-2 rounded-lg shadow-lg"
-          :value="modelValue"
-          @input="$emit('update:modelValue', $event?.target?.value)"
-          />
-          <div class="text-white ml-4 align self-center">
-            {{ modelValue }}
-          </div>
+      <div class=" text-black flex">
+        <input
+        class="p-2 rounded-lg shadow-lg"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event?.target?.value)"
+        />
+        <div class="text-white ml-4 align self-center">
+          {{ modelValue }}
         </div>
-        
-        <button
-          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-          @click="testEmit"
-        >
-          emit event outside
-        </button>
       </div>
-      </header>
-      <main class="mt-4 p-4 mx-0 md:mx-20 bg-gray-200 rounded-lg shadow-lg">
-        <router-view />
-      </main>
-      <footer class="bg-gray-800 text-white text-center p-4 mt-4 rounded-lg shadow-lg mx-0 md:mx-20">
-        <div class="mb-2">
-  
-          <slot></slot>
-        </div>
-        <div class="flex justify-center">
-          <slot name="customName"></slot>
-        </div>
-      </footer>
+      
+      <button
+        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        @click="testEmit"
+      >
+        emit event outside
+      </button>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'App',
-    namedSlots: ['customName'],
-    emits: ['customEventTest', 'update:modelValue'],
-    props: {
-      apiToken: { type: String, required: true },
-      baseUri: { type: String, default: 'test.me' },
-      modelValue: { type: String },
-    },
-  
-    data: () => ({
-      configuration: {},
-      credentials: {
-        apiToken: '',
-        baseUri: '',
-      },
-    }),
-  
-  
-    methods: {
-      testEmit() {
-        this.$emit('customEventTest', 
-          { 
-            testEvent: '123456789',
-          }
-        )
-      }
+    </header>
+    <main class="mt-4 p-4 mx-0 md:mx-20 bg-gray-200 rounded-lg shadow-lg">
+      <router-view />
+    </main>
+    <footer class="bg-gray-800 text-white text-center p-4 mt-4 rounded-lg shadow-lg mx-0 md:mx-20">
+      <div class="mb-2">
+
+        <slot></slot>
+      </div>
+      <div class="flex justify-center">
+        <slot name="customName"></slot>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  namedSlots: ['customName'],
+  emits: ['customEventTest', 'update:modelValue'],
+  provide() {
+    return {
+      testKey: 'I am provide/inject data via default slot',
+    };
+  },
+  props: {
+    apiToken: { type: String, required: true },
+    baseUri: { type: String, default: 'test.me' },
+    modelValue: { type: String },
+  },
+
+  data: () => ({
+    configuration: {},
+    credentials: {
+      apiToken: '',
+      baseUri: '',
     },
-  }
-  </script>
-  <style>
-  .test-heading {
-    font-size: 2em;
-    margin-top: 2rem;
-  }
-  a {
-    @apply text-gray-900 hover:text-gray-700;
-  }
-  
-  header  {
-    @apply font-sans;
-  }
-  
-  main {
-    @apply font-sans;
-  }
-  </style>
\ No newline at end of file
+  }),
+
+  methods: {
+    testEmit() {
+      this.$emit('customEventTest', 
+        { 
+          testEvent: '123456789',
+        }
+      )
+    }
+  },
+}
+</script>
+<style>
+.test-heading {
+  font-size: 2em;
+  margin-top: 2rem;
+}
+a {
+  @apply text-gray-900 hover:text-gray-700;
+}
+
+header  {
+  @apply font-sans;
+}
+
+main {
+  @apply font-sans;
+}
+</style>
diff --git a/demo-app-webpack/src/AppChild.vue b/demo-app-webpack/src/AppChild.vue
new file mode 100644
index 0000000..fa738d8
--- /dev/null
+++ b/demo-app-webpack/src/AppChild.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <h1 class="text-xl">
+      {{ testInject }}
+    </h1>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  namedSlots: ['customName'],
+  emits: ['customEventTest', 'update:modelValue'],
+
+  inject: ['testKey'],
+
+  props: {
+    baseUri: { type: String, default: 'test.me' },
+    modelValue: { type: String },
+    apiToken: { type: String, required: true },
+  },
+
+  data: () => ({
+    configuration: {},
+    credentials: {
+      apiToken: '',
+      baseUri: '',
+    },
+    testInject: '',
+  }),
+  mounted() {
+    console.log(this.testKey); // Outputs: 'This is test data'
+    this.testInject = this.testKey;
+  },
+
+  methods: {
+    testEmit() {
+      this.$emit('customEventTest', 
+        { 
+          testEvent: '123456789',
+        }
+      )
+    }
+  },
+}
+</script>
+<style>
+.test-heading {
+  font-size: 2em;
+  margin-top: 2rem;
+}
+a {
+  @apply text-gray-900 hover:text-gray-700;
+}
+
+header  {
+  @apply font-sans;
+}
+
+main {
+  @apply font-sans;
+}
+</style>
diff --git a/demo-app-webpack/src/main.js b/demo-app-webpack/src/main.js
index 001dc88..6d9e53a 100644
--- a/demo-app-webpack/src/main.js
+++ b/demo-app-webpack/src/main.js
@@ -1,4 +1,5 @@
 import App from './App.vue';
+import AppChild from './AppChild.vue';
 import tailwindStyles from './assets/tailwind.css?raw';
 import { createWebHashHistory, createRouter } from "vue-router";
 import { createI18n } from 'vue-i18n';
@@ -6,7 +7,7 @@ import { createStore } from 'vuex'
 import { defaultRoutes} from './main.routes.js'
 import { store } from './store/index.js'
 import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue';
-import { createWebComponent } from 'vue-web-component-wrapper';
+import { createWebComponent } from '../../package/index.js';
 
 const pluginsWrapper = {
   install(GivenVue) {
@@ -39,3 +40,14 @@ createWebComponent({
   disableRemoveStylesOnUnmount: true,
 });
 
+createWebComponent({
+  rootComponent: AppChild,
+  elementName: 'my-child-component',
+  plugins: pluginsWrapper,
+  cssFrameworkStyles: tailwindStyles,
+  VueDefineCustomElement,
+  h,
+  createApp,
+  getCurrentInstance,
+  disableRemoveStylesOnUnmount: true,
+});