From de97826222f7006d1b0e84c51244fbfe9e434d4f Mon Sep 17 00:00:00 2001
From: Prev Wong <prevwong@gmail.com>
Date: Mon, 15 May 2023 12:11:43 +0800
Subject: [PATCH] fix: template slots not passing through ExternalComponents
 (#34)

---
 .changeset/violet-tips-rush.md                  | 6 ++++++
 packages/core/src/component.ts                  | 9 +++++++++
 packages/types/src/generated/types.generated.ts | 2 ++
 packages/types/src/types.definition.ts          | 1 +
 site/components/frame/Renderer/Renderer.tsx     | 7 ++++++-
 5 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/violet-tips-rush.md

diff --git a/.changeset/violet-tips-rush.md b/.changeset/violet-tips-rush.md
new file mode 100644
index 00000000..dd4e99cd
--- /dev/null
+++ 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
index eb37d6c7..61476f7b 100644
--- 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
index 3b3b03cc..ac6198fc 100644
--- 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
index c8cd33b1..b2f4d259 100644
--- 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
index f006cc14..83d57522 100644
--- 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,
       }