feat: add useNamedSlots to support named slots

packages/direflow-component/src/DireflowComponent.tsx

@@ -45,6 +45,7 @@ class DireflowComponent {
     const tagName = configuration.tagname || 'direflow-component';
     const shadow = configuration.useShadow !== undefined ? configuration.useShadow : true;
     const anonymousSlot = configuration.useAnonymousSlot !== undefined ? configuration.useAnonymousSlot : false;
+    const namedSlots = Array.isArray(configuration.useNamedSlots) ? configuration.useNamedSlots : false;
 
     (async () => {
       /**
@@ -57,6 +58,7 @@ class DireflowComponent {
         component,
         shadow,
         anonymousSlot,
+        namedSlots,
         plugins,
         callback,
       ).create();

packages/direflow-component/src/WebComponentFactory.tsx

@@ -16,6 +16,7 @@ class WebComponentFactory {
     private rootComponent: React.FC<any> | React.ComponentClass<any, any>,
     private shadow?: boolean,
     private anonymousSlot?: boolean,
+    private namedSlots?: string[],
     private plugins?: IDireflowPlugin[],
     private connectCallback?: (element: HTMLElement) => void,
   ) {
@@ -230,9 +231,10 @@ class WebComponentFactory {
        */
       public mountReactApp(options?: { initial: boolean }) {
         const anonymousSlot = factory.anonymousSlot ? React.createElement('slot') : undefined;
+        const namedSlots = factory.namedSlots ? factory.namedSlots.map((name) => React.createElement('slot', { name })) : undefined;
         const application = (
           <EventProvider value={this.eventDispatcher}>
-            {React.createElement(factory.rootComponent, this.reactProps(), anonymousSlot)}
+            {React.createElement(factory.rootComponent, this.reactProps(), [anonymousSlot, namedSlots])}
           </EventProvider>
         );
 

packages/direflow-component/src/types/DireflowConfig.ts

@@ -9,6 +9,7 @@ export interface IDireflowConfig {
   tagname: string;
   useShadow?: boolean;
   useAnonymousSlot?: boolean;
+  useNamedSlots?: string[];
 }
 
 export interface IDireflowPlugin {