Included update capability

smapiot · Jun 10, 2024 · cc32496 · cc32496
1 parent 19cef19
commit cc32496
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Improved setup of event listeners in `piral-blazor` (#696)
 - Improved fallback signature in `piral-translate`
 - Updated dependencies
+- Added update capabilities to `piral-blazor` extension boundaries
 
 ## 1.5.6 (May 21, 2024)
 

diff --git a/src/converters/piral-blazor/src/converter.ts b/src/converters/piral-blazor/src/converter.ts
@@ -76,10 +76,12 @@ export function createConverter(
   language?: LanguageOptions,
   logLevel?: BlazorLogLevel,
 ) {
+  let configurable = false;
   const bootLoader = createBootLoader(bootConfig.url, bootConfig.satellites);
   const boot = (opts?: WebAssemblyStartOptions) =>
     bootLoader(opts).then(async ({ config, first }) => {
       const [_, capabilities] = config;
+      configurable = capabilities.includes('configurable');
 
       if (typeof logLevel === 'number' && capabilities.includes('logging')) {
         await setLogLevel(logLevel);
@@ -150,8 +152,9 @@ export function createConverter(
         el,
         (ev) => {
           ev.stopPropagation();
-          const { target, props } = ev.detail;
+          const { target, props, configure } = ev.detail;
           piral.renderHtmlExtension(target, props);
+          configurable && configure();
         },
         (ev) => {
           ev.stopPropagation();

diff --git a/src/converters/piral-blazor/src/events.ts b/src/converters/piral-blazor/src/events.ts
@@ -32,6 +32,7 @@ const globalEventNames = [
 
 const eventNames = {
   render: 'render-blazor-extension',
+  update: 'extension-props-changed',
   navigate: 'navigate-blazor',
   forward: 'forward-event',
 };
@@ -83,14 +84,45 @@ function getFallback(fallbackComponent: string, params: any) {
   return undefined;
 }
 
+function getOrder(sourceRef: any) {
+  return typeof sourceRef !== 'undefined'
+    ? (elements: Array<ExtensionRegistration>) => {
+        const oldItems = elements.map((el, id) => ({
+          id,
+          pilet: el.pilet,
+          defaults: el.defaults ?? {},
+        }));
+        const newItems: Array<{ id: number }> = sourceRef.invokeMethod('Order', oldItems);
+        return newItems.map(({ id }) => elements[id]).filter(Boolean);
+      }
+    : undefined;
+}
+
+function getProps(name: string, params: any, sourceRef: any, fallbackComponent: string | null) {
+  const empty = getFallback(fallbackComponent, params);
+  const order = getOrder(sourceRef);
+
+  return {
+    name,
+    params,
+    empty,
+    order,
+  };
+}
+
 export function emitUpdateEvent(
   source: HTMLElement,
   name: string,
   params: any,
   sourceRef: any,
   fallbackComponent: string | null,
 ) {
-  //TODO
+  const target = findTarget(source);
+  const eventInit = {
+    detail: getProps(name, params, sourceRef, fallbackComponent),
+  };
+
+  target.dispatchEvent(new CustomEvent(eventNames.update, eventInit));
 }
 
 export function emitRenderEvent(
@@ -101,20 +133,6 @@ export function emitRenderEvent(
   fallbackComponent: string | null,
 ) {
   const target = findTarget(source);
-  const empty = getFallback(fallbackComponent, params);
-  const order =
-    typeof sourceRef !== 'undefined'
-      ? (elements: Array<ExtensionRegistration>) => {
-          const oldItems = elements.map((el, id) => ({
-            id,
-            pilet: el.pilet,
-            defaults: el.defaults ?? {},
-          }));
-          const newItems: Array<{ id: number }> = sourceRef.invokeMethod('Order', oldItems);
-          return newItems.map(({ id }) => elements[id]).filter(Boolean);
-        }
-      : undefined;
-
   const eventInit = {
     bubbles: true,
     detail: {
@@ -124,14 +142,10 @@ export function emitRenderEvent(
         });
       },
       target,
-      props: {
-        name,
-        params,
-        empty,
-        order,
-      },
+      props: getProps(name, params, sourceRef, fallbackComponent),
     },
   };
+
   const delayEmit = () =>
     requestAnimationFrame(() => {
       if (!isRooted(target)) {
@@ -140,6 +154,7 @@ export function emitRenderEvent(
         delayEmit();
       }
     });
+
   delayEmit();
 }