From 1f1e147bf378fc00e351da4bfb4b8b41d8dba997 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Fri, 13 Jan 2023 17:21:11 -0400
Subject: [PATCH] Fix: Solid Dynamic components (#979)

* publish

* add missing cases

* cleanup override file logic

* fix react imports

* check all extensions

* fix override filename logic

* move

* remove logs

* remove

* refactor

* add test

* fix imports

* fix Dynamic component props

* update test
---
 .../__snapshots__/solid.test.ts.snap          | 48 +++++++------------
 packages/core/src/generators/solid/index.ts   | 13 +++--
 2 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 4294df4388..3ba87b6095 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -4871,17 +4871,13 @@ function RenderBlock(props) {
       fallback={
         <Dynamic
           {...renderComponentProps()}
-          component={state.renderComponentTag}
+          component={renderComponentTag()}
         ></Dynamic>
       }
       when={shouldWrap()}
     >
       <Show when={isEmptyHtmlElement(tag())}>
-        <Dynamic
-          {...attributes()}
-          {...actions()}
-          component={state.tag}
-        ></Dynamic>
+        <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
       </Show>
       <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
         <For each={repeatItemData()}>
@@ -4898,10 +4894,10 @@ function RenderBlock(props) {
         </For>
       </Show>
       <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
-        <Dynamic {...attributes()} {...actions()} component={state.tag}>
+        <Dynamic {...attributes()} {...actions()} component={tag()}>
           <Dynamic
             {...renderComponentProps()}
-            component={state.renderComponentTag}
+            component={renderComponentTag()}
           ></Dynamic>
           <For each={childrenWithoutParentComponent()}>
             {(child, _index) => {
@@ -5150,17 +5146,13 @@ function RenderBlock(props) {
         fallback={
           <Dynamic
             {...renderComponentProps()}
-            component={state.renderComponentTag}
+            component={renderComponentTag()}
           ></Dynamic>
         }
         when={shouldWrap()}
       >
         <Show when={isEmptyHtmlElement(tag())}>
-          <Dynamic
-            {...attributes()}
-            {...actions()}
-            component={state.tag}
-          ></Dynamic>
+          <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
         </Show>
         <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
           <For each={repeatItemData()}>
@@ -5177,10 +5169,10 @@ function RenderBlock(props) {
           </For>
         </Show>
         <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
-          <Dynamic {...attributes()} {...actions()} component={state.tag}>
+          <Dynamic {...attributes()} {...actions()} component={tag()}>
             <Dynamic
               {...renderComponentProps()}
-              component={state.renderComponentTag}
+              component={renderComponentTag()}
             ></Dynamic>
             <For each={childrenWithoutParentComponent()}>
               {(child, _index) => {
@@ -10770,17 +10762,13 @@ function RenderBlock(props) {
       fallback={
         <Dynamic
           {...renderComponentProps()}
-          component={state.renderComponentTag}
+          component={renderComponentTag()}
         ></Dynamic>
       }
       when={shouldWrap()}
     >
       <Show when={isEmptyHtmlElement(tag())}>
-        <Dynamic
-          {...attributes()}
-          {...actions()}
-          component={state.tag}
-        ></Dynamic>
+        <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
       </Show>
       <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
         <For each={repeatItemData()}>
@@ -10797,10 +10785,10 @@ function RenderBlock(props) {
         </For>
       </Show>
       <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
-        <Dynamic {...attributes()} {...actions()} component={state.tag}>
+        <Dynamic {...attributes()} {...actions()} component={tag()}>
           <Dynamic
             {...renderComponentProps()}
-            component={state.renderComponentTag}
+            component={renderComponentTag()}
           ></Dynamic>
           <For each={childrenWithoutParentComponent()}>
             {(child, _index) => {
@@ -11049,17 +11037,13 @@ function RenderBlock(props) {
         fallback={
           <Dynamic
             {...renderComponentProps()}
-            component={state.renderComponentTag}
+            component={renderComponentTag()}
           ></Dynamic>
         }
         when={shouldWrap()}
       >
         <Show when={isEmptyHtmlElement(tag())}>
-          <Dynamic
-            {...attributes()}
-            {...actions()}
-            component={state.tag}
-          ></Dynamic>
+          <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
         </Show>
         <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
           <For each={repeatItemData()}>
@@ -11076,10 +11060,10 @@ function RenderBlock(props) {
           </For>
         </Show>
         <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
-          <Dynamic {...attributes()} {...actions()} component={state.tag}>
+          <Dynamic {...attributes()} {...actions()} component={tag()}>
             <Dynamic
               {...renderComponentProps()}
-              component={state.renderComponentTag}
+              component={renderComponentTag()}
             ></Dynamic>
             <For each={childrenWithoutParentComponent()}>
               {(child, _index) => {
diff --git a/packages/core/src/generators/solid/index.ts b/packages/core/src/generators/solid/index.ts
index 5cc09608c5..35743891cc 100644
--- a/packages/core/src/generators/solid/index.ts
+++ b/packages/core/src/generators/solid/index.ts
@@ -32,7 +32,7 @@ import { CODE_PROCESSOR_PLUGIN } from '../../helpers/plugins/process-code';
 import { hasGetContext } from '../helpers/context';
 import { blockToSolid } from './blocks';
 
-// Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
+// Transform <foo.bar key={value} /> to <Dynamic compnent={foo.bar} key={value} />
 function processDynamicComponents(json: MitosisComponent, options: ToSolidOptions) {
   let found = false;
   traverse(json).forEach((node) => {
@@ -118,16 +118,15 @@ export const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>> =
     const componentHasStyles = hasCss(json);
     const addWrapper =
       json.children.filter(filterEmptyTextNodes).length !== 1 || options.stylesType === 'style-tag';
+
+    // we need to run this before we run the code processor plugin, so the dynamic component variables are transformed
+    const foundDynamicComponents = processDynamicComponents(json, options);
+
     if (options.plugins) {
       json = runPostJsonPlugins(json, options.plugins);
     }
     stripMetaProperties(json);
-    const foundDynamicComponents = processDynamicComponents(json, options);
-    const css =
-      options.stylesType === 'style-tag' &&
-      collectCss(json, {
-        prefix: hash(json),
-      });
+    const css = options.stylesType === 'style-tag' && collectCss(json, { prefix: hash(json) });
 
     const state = getState({ json, options });
     const componentsUsed = getComponentsUsed(json);