Merge pull request #49 from EranGrin/feature/init-promise

Feature/init-promise

Author: EranGrin

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [1.7.0] - 10.02.2025
+### Added
+- Added support for `asyncInitialization`
+- Added support for loader
+- Added support for `hideSlotContentUntilMounted`
+
 ## [1.6.11] - 16.12.2024
 ### Fixed
 - Fixed issue with slots with no shadow DOM

README.md

@@ -46,7 +46,9 @@ See the [Documentation](https://erangrin.github.io/vue-web-component-wrapper) fo
 - **Disable Removal of Styles on Unmount**: Control the removal of styles upon component unmount to solve issues with CSS transitions.
 - **Disable Shadow DOM**: Option to disable Shadow DOM for web components.
 - **Replace `:root` with `:host`**: Optionally replace `:root` selectors with `:host` in your CSS to ensure styles are correctly scoped within the Shadow DOM.
-
+- **Async Initialization**: Option to delay the initialization until its Promise resolves.
+- **Loader Support**: Support for loader spinner elements until the application is fully initialized.
+- **Hide slot content until the component is fully mounted**: Option to hide the content of named slots until the web-component is fully mounted.
 ## CSS Frameworks Examples
 
 - **Tailwind CSS**: [Demo](https://stackblitz.com/edit/vue-web-component-wrapper?file=README.md&startScript=tailwind-demo)
@@ -144,6 +146,8 @@ createWebComponent({
   disableStyleRemoval: false, // default is false
   disableShadowDOM: false,    // default is false
   replaceRootWithHostInCssFramework: false, // default is false
+  loaderAttribute: 'data-web-component-loader', // default is 'data-web-component-loader'
+  hideSlotContentUntilMounted: true, // default is false
 });
 ```
 
@@ -160,11 +164,92 @@ createWebComponent({
 - **disableStyleRemoval**: Disable removal of styles on unmount (useful for CSS transitions).
 - **disableShadowDOM**: Disable Shadow DOM for web components.
 - **replaceRootWithHostInCssFramework**: Replace `:root` selectors with `:host` in your CSS styles.
+- **asyncInitialization**: Accepts a function that returns a Promise.
+- **loaderAttribute**: Defines the attribute used to mark loader spinner (default is `data-web-component-loader`).
+- **hideSlotContentUntilMounted**: Hide the content of named slots until the component is fully mounted.
+
+### asyncInitialization
+
+The `asyncInitialization` option accepts a function that returns a Promise. The custom element waits for this Promise to resolve before completing its initialization. This is useful for performing asynchronous tasks (e.g., API calls, dynamic imports) before the app mounts.
+
+#### Example Usage
+
+```javascript
+const asyncPromise = () => { 
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve()
+    }, 1000)
+  })
+}
+
+createWebComponent({
+  rootComponent: App,
+  elementName: 'my-web-component',
+  plugins: pluginsWrapper,
+  cssFrameworkStyles: tailwindStyles,
+  VueDefineCustomElement,
+  h,
+  createApp,
+  getCurrentInstance,
+  asyncInitialization: asyncPromise, // default is Promise.resolve() 
+  loaderAttribute: 'data-web-component-loader',
+  hideSlotContentUntilMounted: true, // default is false
+});
+```
+
+### loaderAttribute
+
+The `loaderAttribute` option defines the attribute used to mark loader spinner elements in your custom element's DOM. Elements with this attribute will be removed automatically once the component is fully mounted.
+
+```html
+    <my-web-component
+      class="my-web-component"
+    >
+      <!-- named slot -->
+      <div class="customName" data-web-component-loader slot="customName">
+        <div class="spinner"></div>
+      </div>
+    </my-web-component>
+
+  <style>
+    .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #4a90e2; /* Customize spinner color if needed */
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 1s linear infinite;
+    margin: auto;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  </style>
+```
+
+### hideSlotContentUntilMounted
+
+The `hideSlotContentUntilMounted` option hides the content of named slots until the component is fully mounted.
+- By using the `hidden` attribute on the slot element, the content will be hidden until the component is fully mounted, and the web component wrapper will remove the `hidden` attribute once the component is fully mounted.
+- This could be break the layout of your application, if you use the `hidden` attribute internally in your application.
+- If you want to use the `hidden` attribute internally in your application, you can set the `hideSlotContentUntilMounted` option to `false`.
+
+```html
+<my-web-component>
+  <!-- named slot -->
+  <div class="customName" hidden slot="customName">I am a custom named slot </div>
+</my-web-component>
+```
 
 ### replaceRootWithHostInCssFramework
 
 The `replaceRootWithHostInCssFramework` option replaces all occurrences of `:root` with `:host` in your `cssFrameworkStyles`. This is useful when working with CSS variables defined on `:root`, ensuring they are properly scoped within the Shadow DOM.
 
+
 #### Example Usage
 
 ```javascript

demo-app-vite/index.html

@@ -58,7 +58,10 @@ <h2>Custom Event</h2>
       ></my-child-component>
 
       <!-- named slot -->
-      <div slot="customName">I am a custom named slot </div>
+      <div class="customName" hidden slot="customName">I am a custom named slot </div>
+      <div class="customName" data-web-component-loader slot="customName">
+        <div class="spinner"></div>
+      </div>
     </my-web-component>
 
     <script type="module" src="./src/main.ts"></script>
@@ -117,5 +120,20 @@ <h2>Custom Event</h2>
     color: white;
     font-weight: bold;
   }
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #4a90e2; /* Customize spinner color if needed */
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 1s linear infinite;
+    margin: auto;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
   </style>
 </html>

demo-app-vite/src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <header class="bg-blue-300 rounded-lg shadow-lg p-4 mx-0 md:mx-20">
-
+  <div :style="{ opacity: componentOpacity, transition: 'opacity 0.5s ease' }">  <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>
@@ -22,34 +20,38 @@
     <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 class=" text-black flex">
-        <input
-        class="p-2 rounded-lg shadow-lg"
-        :value="modelValue"
-        @input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
-        />
-        <div class="text-white ml-4 align self-center">
-          {{ modelValue }}
+      <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 as HTMLInputElement)?.value
+              )
+            "
+          />
+          <div class="text-white ml-4 align self-center">
+            {{ modelValue }}
+          </div>
         </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>
-      
-      <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">
+    <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">
@@ -60,6 +62,8 @@
 </template>
 
 <script lang="ts">
+
+
 export default {
   name: 'App',
   namedSlots: ['customName'], // only needed with Shadow DOM
@@ -81,19 +85,25 @@ export default {
       apiToken: '',
       baseUri: '',
     },
+    componentOpacity: 0,     // Initial opacity set to 0
   }),
 
+  mounted() {
+    // Delay setting opacity to 1 to trigger fade-in
+    setTimeout(() => {
+      this.componentOpacity = 1;
+    }, 10); // Small delay, adjust if needed
+  },
+
 
   methods: {
     testEmit() {
-      this.$emit('customEventTest', 
-        { 
-          testEvent: '123456789',
-        }
-      )
-    }
+      this.$emit('customEventTest', {
+        testEvent: '123456789',
+      });
+    },
   },
-}
+};
 </script>
 <style>
 .test-heading {
@@ -104,11 +114,12 @@ a {
   @apply text-gray-900 hover:text-gray-700;
 }
 
-header  {
+header {
   @apply font-sans;
 }
 
 main {
   @apply font-sans;
 }
-</style>
+
+</style>

demo-app-vite/src/main.ts

@@ -15,6 +15,14 @@ import createWebComponent  from '../../package/index.js'
 // import createWebComponent from 'vue-web-component-wrapper'
 // add vue-web-component-wrapper to package.json asl well
 
+const asyncPromise = () => { 
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve("p1")
+    }, 1000)
+  })
+}
+
 createWebComponent({
   rootComponent: app,
   elementName: 'my-web-component',
@@ -24,15 +32,21 @@ createWebComponent({
   h,
   createApp,
   getCurrentInstance,
+  disableShadowDOM: false,
+  asyncInitialization: asyncPromise,
+  hideSlotContentUntilMounted: true
 })
 
 createWebComponent({
   rootComponent: appChild,
   elementName: 'my-child-component',
   plugins: pluginsWrapper,
   cssFrameworkStyles: style,
+  disableShadowDOM: false,
   VueDefineCustomElement,
   h,
   createApp,
   getCurrentInstance,
+  asyncInitialization: () => new Promise((res) => setTimeout(() => res("p1"), 1000)),
+  hideSlotContentUntilMounted: true
 })

demo-app-vite/src/routes/test1-page.vue

@@ -12,10 +12,24 @@
 
 <script lang="ts">
 import TestComponent1 from '../components/TestComponent1.vue'
+import { useRoute }  from 'vue-router';
+
 export default {
   components: {
     TestComponent1,
   },
+
+  setup() {
+
+    const route = useRoute();
+    const param = route.query.param;
+
+  
+    console.log(param);
+
+    return {}
+  },
+
 }
 </script>
 

demo-app-vite/src/routes/test2-page.vue

@@ -3,10 +3,23 @@
     <h1 class="test2 text-2xl bg-blue-400 rounded-xl p-4">
       I am a route 2
       <span class=".nest text-4xl">Test SCSS</span>
+
+      <a href="http://localhost:5173/#/test1?param=test" target="blank">http://localhost:8080/?param=1</a>
     </h1>
   </div>
 </template>
 
+<script lang="ts">
+export default {
+  created() {
+      // this.$route.query.param;
+      console.log(this.$route.query.param);
+      console.log("created")
+    },
+}
+
+</script>
+
 <style scoped lang="scss">
 .test2 {
   color: red;

docs/.vitepress/config.js

@@ -22,6 +22,8 @@ export default {
           { text: 'disable-shadow-dom', link: '/disable-shadow-dom' },
           { text: 'host-implementation', link: '/host-implementation' },
           { text: 'SFC as Custom Element', link: '/sfc-as-custom-element' },
+          { text: 'Async Initialization', link: '/async-initialization' },
+          { text: 'Replace :root with :host', link: '/replace-root-with-host' },
         ],
       },
       {