fix: template slots not passing through ExternalComponents (#34)

prevwong · May 15, 2023 · de97826 · de97826
1 parent 6f81ace
commit de97826
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 1 deletion.
diff --git a/.changeset/violet-tips-rush.md b/.changeset/violet-tips-rush.md
@@ -0,0 +1,6 @@
+---
+'@rekajs/types': patch
+'@rekajs/core': patch
+---
+
+Fix template slots not passing through ExternalComponents
diff --git a/packages/core/src/component.ts b/packages/core/src/component.ts
@@ -51,12 +51,21 @@ export class ComponentViewEvaluator {
       this.rekaComponentPropsComputation = null;
       this.rekaComponentStateComputation = null;
 
+      const children = this.template.children.flatMap((child) =>
+        this.evaluator.computeTemplate(child, {
+          ...this.ctx,
+          path: [...this.ctx.path, child.id],
+          owner: this.ctx.owner,
+        })
+      );
+
       return [
         t.externalComponentView({
           frame: this.evaluator.frame.id,
           component,
           key: this.key,
           template: this.template,
+          children: children || [],
           props: Object.keys(this.template.props).reduce(
             (accum, key) => ({
               ...accum,

diff --git a/packages/types/src/generated/types.generated.ts b/packages/types/src/generated/types.generated.ts
@@ -528,11 +528,13 @@ type ExternalComponentViewParameters = {
   frame: string;
   owner?: ComponentView | null;
   component: ExternalComponent;
+  children?: View[];
   props: Record<string, string | number | boolean | Function>;
 };
 
 export class ExternalComponentView extends ComponentView {
   declare component: ExternalComponent;
+  declare children: View[];
   declare props: Record<string, string | number | boolean | Function>;
   constructor(value: ExternalComponentViewParameters) {
     super('ExternalComponentView', value);

diff --git a/packages/types/src/types.definition.ts b/packages/types/src/types.definition.ts
@@ -266,6 +266,7 @@ Schema.define('ExternalComponentView', {
   extends: 'ComponentView',
   fields: (t) => ({
     component: t.node('ExternalComponent'),
+    children: t.defaultValue(t.array(t.node('View')), []),
     props: t.map(t.union(t.string, t.number, t.boolean, t.func)),
   }),
 });

diff --git a/site/components/frame/Renderer/Renderer.tsx b/site/components/frame/Renderer/Renderer.tsx
@@ -160,7 +160,12 @@ const RenderExternalComponentView = observer(
     }, [onConnect, props.view]);
 
     return React.cloneElement(
-      props.view.component.render({ ...props.view.props }),
+      props.view.component.render({
+        ...props.view.props,
+        children: props.view.children.map((child) => (
+          <InternalRenderer key={child.id} view={child} />
+        )),
+      }),
       {
         ref: domRef,
       }