Improved event forwarding

src/converters/piral-blazor/src/events.ts

@@ -74,6 +74,15 @@ function dispatchToRoot(event: any) {
   }
 }
 
+function getFallback(fallbackComponent: string, params: any) {
+  if (  typeof fallbackComponent === 'string') {
+    const empty = undefined;
+    return () => createElement('piral-extension', { name: fallbackComponent, params, empty });
+  }
+
+  return undefined;
+}
+
 export function emitRenderEvent(
   source: HTMLElement,
   name: string,
@@ -82,10 +91,7 @@ export function emitRenderEvent(
   fallbackComponent: string | null,
 ) {
   const target = findTarget(source);
-  const empty =
-    typeof fallbackComponent === 'string'
-      ? () => createElement('piral-extension', { name: fallbackComponent, params })
-      : undefined;
+  const empty = getFallback(fallbackComponent, params);
   const order =
     typeof sourceRef !== 'undefined'
       ? (elements: Array<ExtensionRegistration>) => {
@@ -155,11 +161,15 @@ export function attachLocalEvents(
   host.addEventListener(eventNames.navigate, navigate, false);
   // install proxy handlers
   globalEventNames.forEach((eventName) => host.addEventListener(eventName, dispatchToRoot));
+  // register host as event parent
+  eventParents.push(host);
 
   return () => {
     host.removeEventListener(eventNames.render, render, false);
     host.removeEventListener(eventNames.navigate, navigate, false);
     // uninstall proxy handlers
     globalEventNames.forEach((eventName) => host.removeEventListener(eventName, dispatchToRoot));
+    // unregister host as event parent
+    eventParents.splice(eventParents.indexOf(host), 1);
   };
 }

src/converters/piral-ng/src/standalone.ts

@@ -10,20 +10,20 @@ import {
 import type { BaseComponentProps, HtmlComponent } from 'piral-core';
 import { CoreRoutingService } from './CoreRoutingService';
 
-function isLazyLoader<TProps>(thing: NgStandaloneComponent<TProps>): thing is NgStandaloneComponentLoader<TProps> {
+function isLazyLoader(thing: NgStandaloneComponent): thing is NgStandaloneComponentLoader {
   return typeof thing === 'function' && thing.hasOwnProperty('prototype') && thing.hasOwnProperty('arguments');
 }
 
 export interface DefaultExport<T> {
   default: T;
 }
 
-export type NgStandaloneComponentLoader<TProps> = () => Promise<DefaultExport<Type<TProps>>>;
+export type NgStandaloneComponentLoader = () => Promise<DefaultExport<Type<any>>>;
 
-export type NgStandaloneComponent<TProps> = Type<TProps> | NgStandaloneComponentLoader<TProps>;
+export type NgStandaloneComponent = Type<any> | NgStandaloneComponentLoader;
 
 export interface NgStandaloneConverter {
-  <TProps extends BaseComponentProps>(component: NgStandaloneComponent<TProps>): HtmlComponent<TProps>;
+  <TProps extends BaseComponentProps>(component: NgStandaloneComponent): HtmlComponent<TProps>;
 }
 
 export function createConverter(options: ApplicationConfig): NgStandaloneConverter {

src/framework/piral-core/src/components/ExtensionSlot.tsx

@@ -26,7 +26,7 @@ export function ExtensionSlot<T extends string>(props: ExtensionSlotProps<T>) {
   const extensions = useGlobalState((s) => s.registry.extensions[name] || none);
   const isEmpty = extensions.length === 0 && isfunc(empty);
   const content = isEmpty
-    ? [defaultRender(empty(), 'empty')]
+    ? [defaultRender(empty(params), 'empty')]
     : order(extensions).map(({ component: Component, reference, defaults = {} }, i) => (
         <Component
           key={`${reference?.displayName || '_'}${i}`}

src/framework/piral-core/src/types/extension.ts

@@ -19,7 +19,7 @@ export interface BaseExtensionSlotProps<TName, TParams> {
    * Defines what should be rendered when no components are available
    * for the specified extension.
    */
-  empty?(): ReactNode;
+  empty?(props: TParams): ReactNode;
   /**
    * Determines if the `render` function should be called in case no
    * components are available for the specified extension.