feat: dispatch hydrate events to browser.

Author: nickreese

package-lock.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,

package.json

@@ -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);
 

src/partialHydration/hydrateComponents.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,