feat: dispatch hydrate events to browser.

Elderjs · Apr 1, 2022 · 023336a · 023336a
1 parent 754cd94
commit 023336a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elderjs/elderjs",
-  "version": "1.6.12",
+  "version": "1.6.13",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
   "engineStrict": true,

diff --git a/src/partialHydration/hydrateComponents.ts b/src/partialHydration/hydrateComponents.ts
@@ -10,6 +10,19 @@ const $$ejs = (par,eager)=>{
   ${decompressCode}
   const prefix = '${prefix}';
   const initComponent = (target, component) => {
+
+    if(!!CustomEvent && target.id){
+      const split = target.id.split('-ejs-');
+      document.dispatchEvent(new CustomEvent('ejs', {
+        detail: {
+          category: 'elderjs',
+          action: 'hydrate',
+          target: target,
+          label: split[0] || target.id
+        }
+      }));
+    }
+
     const propProm = ((typeof component.props === 'string') ? fetch(prefix+'/props/'+ component.props).then(p => p.json()).then(r => $ejs(r)) : new Promise((resolve) => resolve($ejs(component.props))));
     const compProm = import(prefix + '/svelte/components/' + component.component);
 

diff --git a/src/utils/svelteComponent.ts b/src/utils/svelteComponent.ts
@@ -50,7 +50,7 @@ const svelteComponent =
 
       const id = getUniqueId();
       const lowerCaseComponent = componentName.toLowerCase();
-      const uniqueComponentName = `${lowerCaseComponent}${id}`;
+      const uniqueComponentName = `${lowerCaseComponent}-ejs-${id}`;
 
       page.componentsToHydrate.push({
         name: uniqueComponentName,