Fix: Solid Dynamic components (BuilderIO#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
jesse-forked · Jan 13, 2023 · 1f1e147 · 1f1e147
1 parent c3b0933
commit 1f1e147
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 39 deletions.
diff --git 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
@@ -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);