fix[qwik]: ENG-7299 Default value not updating for custom components on ContentEditor

packages/sdks-tests/src/e2e-tests/custom-components.spec.ts

@@ -9,7 +9,7 @@ const LAST_COMPONENT_REGISTERED_MESSAGE =
 
 test.describe('Custom components', () => {
   test('correctly renders custom component', async ({ page, packageName, sdk }) => {
-    test.skip(!['angular', 'react'].includes(sdk));
+    test.skip(!['angular', 'react', 'qwik-city'].includes(sdk));
     test.skip(
       ['react-sdk-next-14-app', 'react-sdk-next-15-app', 'remix', 'hydrogen'].includes(packageName)
     );

packages/sdks-tests/src/e2e-tests/editing.spec.ts

@@ -1,4 +1,4 @@
 import { expect } from '@playwright/test';
 import {
   COLUMNS_WITH_NEW_SPACE,
   COLUMNS_WITH_NEW_TEXT,
@@ -18,6 +18,7 @@
 import { ADD_A_TEXT_BLOCK } from '../specs/duplicated-content-using-nested-symbols.js';
 import { EDITING_STYLES } from '../specs/editing-styles.js';
 import { ACCORDION_WITH_NO_DETAIL } from '../specs/accordion.js';
+import { CUSTOM_COMPONENT_NO_DEFAULT_VALUE } from '../specs/custom-component-no-default-value.js';
 import { NEW_BLOCK_ADD, NEW_BLOCK_ADD_2 } from '../specs/new-block-add.js';
 
 const editorTests = ({
@@ -151,6 +152,16 @@
     }
   });
 
+  test('correctly updating custom components when default value is not set', async ({ page, basePort, sdk, packageName }) => {
+    test.skip(!['react', 'qwik-city'].includes(packageName));
+    await launchEmbedderAndWaitForSdk({ path: '/custom-components-no-default-value', basePort, page, sdk });
+    const newContent = cloneContent(CUSTOM_COMPONENT_NO_DEFAULT_VALUE);
+    newContent.data.blocks[0].component.options.text = "Hello";
+    await sendContentUpdateMessage({ page, newContent, model: 'page' });
+    const helloWorldText = page.frameLocator('iframe').locator('[builder-id="builder-d01784d1ca964e0da958ab4a4a891b08"]')
+    await expect(helloWorldText).toHaveText('Hello');
+  })
+
   test('removal of styles should work properly', async ({ page, packageName, sdk, basePort }) => {
     test.skip(packageName === 'nextjs-sdk-next-app' || checkIsGen1React(sdk));
 
@@ -332,14 +343,20 @@
         model: 'page',
       });
 
-      await item1.click();
+      await expect(
+        page.frameLocator('iframe').getByText('Item 1')
+      ).toBeVisible({ timeout: 5000 });
+
+      // Re-query the item1 element as it might have been recreated
+      const updatedItem1 = page.frameLocator('iframe').getByText('Item 1');
+      await updatedItem1.click();
 
       const detailElement = page.frameLocator('iframe').getByText(NEW_DETAILS_TEXT);
       await detailElement.waitFor();
 
       const [titleBox, detailBox] = await Promise.all([
-        item1.boundingBox(),
+        updatedItem1.boundingBox(),
         detailElement.boundingBox(),
       ]);
 
       if (!titleBox || !detailBox) {
@@ -549,7 +566,7 @@
       expect(endTextBlockBox).toBeDefined();
 
       if (!middleTextBlockBox || !topTextBlockBox || !endTextBlockBox) {
         throw new Error('New text block or text block not found');
       }
 
       expect(middleTextBlockBox.y).toBeGreaterThan(topTextBlockBox.y);

packages/sdks-tests/src/specs/custom-component-no-default-value.ts

@@ -0,0 +1,27 @@
+export const CUSTOM_COMPONENT_NO_DEFAULT_VALUE = {
+  data: {
+    title: 'dynamic-button-sdk-test',
+    themeId: false,
+    blocks: [
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-d01784d1ca964e0da958ab4a4a891b08',
+        component: {
+          name: 'Description',
+          options: {},
+        },
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+            marginTop: '20px',
+          },
+        },
+      },
+    ],
+  },
+};

packages/sdks-tests/src/specs/index.ts

@@ -87,6 +87,7 @@ import { VIDEO_LAZY_LOAD } from './video-lazy-load.js';
 import { COLUMNS_VERTICAL_CENTER_FLEX } from './columns-vertical-center-flex.js';
 import { DYNAMIC_ELEMENT } from './dynamic-element.js';
 import { CUSTOM_CODE_DOM_UPDATE } from './custom-code-dom-update.js';
+import { CUSTOM_COMPONENT_NO_DEFAULT_VALUE } from './custom-component-no-default-value.js';
 import { NEW_BLOCK_ADD } from './new-block-add.js';
 
 import { DYNAMIC_BUTTON } from './dynamic-button.js';
@@ -196,6 +197,7 @@ export const PAGES: Record<string, Page> = {
   '/accordion-no-detail': { content: ACCORDION_WITH_NO_DETAIL },
   '/symbol-tracking': { content: SYMBOL_TRACKING },
   '/columns-with-different-widths': { content: COLUMNS_WITH_DIFFERENT_WIDTHS },
+  '/custom-components-no-default-value': { content: CUSTOM_COMPONENT_NO_DEFAULT_VALUE },
   '/custom-components-models-show': {
     content: CUSTOM_COMPONENTS_MODELS_RESTRICTION,
     target: ['react'],

packages/sdks/e2e/qwik-city/src/components/Description.tsx

@@ -0,0 +1,9 @@
+import { component$ } from '@builder.io/qwik';
+
+export const Description = component$((props: { text: string }) => {
+  return (
+    <div>
+      <h3>{props.text}</h3>
+    </div>
+  );
+});

packages/sdks/e2e/qwik-city/src/components/Hello.tsx

@@ -0,0 +1,7 @@
+import { component$ } from '@builder.io/qwik';
+
+export const Hello = component$(() => {
+  return (
+    <div>hello</div>
+  );
+});

packages/sdks/e2e/qwik-city/src/routes/[...index]/index.tsx

@@ -3,6 +3,8 @@ import { routeLoader$ } from '@builder.io/qwik-city';
 import { Content, _processContentResult } from '@builder.io/sdk-qwik';
 import { getProps } from '@sdk/tests';
 import BuilderBlockWithClassName from '~/components/BuilderBlockWithClassName';
+import { Description } from '~/components/Description';
+import { Hello } from '~/components/Hello';
 
 const builderBlockWithClassNameCustomComponent = {
   name: 'BuilderBlockWithClassName',
@@ -46,6 +48,25 @@ const builderBlockWithClassNameCustomComponent = {
   ],
 };
 
+const CUSTOM_COMPONENT = [
+  {
+  name: 'Hello',
+  component: Hello,
+  inputs: [],
+},
+{
+  name: 'Description',
+  component: Description,
+  inputs: [
+    {
+      name: 'text',
+      type: 'string',
+      defaultValue: 'Hello',
+    },
+  ],
+  },
+];
+
 export const useBuilderContentLoader = routeLoader$(async (event) => {
   const data = await getProps({
     pathname: event.url.pathname,
@@ -67,7 +88,9 @@ export default component$(() => {
       {contentProps.value ? (
         <Content
           {...(contentProps.value as any)}
-          customComponents={[builderBlockWithClassNameCustomComponent]}
+          customComponents={[
+            ...CUSTOM_COMPONENT,
+          builderBlockWithClassNameCustomComponent]}
         />
       ) : (
         <div>Content Not Found</div>

packages/sdks/e2e/react/src/App.tsx

@@ -10,6 +10,7 @@ import { builderBlockWithClassNameCustomComponent } from './components/BuilderBl
 import ComponentNeedsHello from './components/ComponentNeedsHello';
 import { componentWithLocalizedSubfieldsInfo } from './components/ComponentWithLocalizedSubfields';
 import Hello from './components/Hello';
+import { Description } from './components/Description';
 
 const DataComp = (props: {
   pathname: string;
@@ -88,6 +89,17 @@ function App() {
                 models: ['test-model'],
               }),
             },
+            {
+              name: 'Description',
+              component: Description,
+              inputs: [
+                {
+                  name: 'text',
+                  type: 'string',
+                  defaultValue: 'Hello',
+                },
+              ],
+            },
             {
               name: 'ComponentNeedsHello',
               component: ComponentNeedsHello,

packages/sdks/e2e/react/src/components/Description.tsx

@@ -0,0 +1,7 @@
+export const Description = (props: { text: string }) => {
+  return (
+    <div>
+      <h3>{props.text}</h3>
+    </div>
+  );
+};

packages/sdks/mitosis.config.cjs

@@ -960,6 +960,21 @@ const QWIK_ONUPDATE_TO_USEVISIBLETASK = () => ({
   },
 });
 
+const QWIK_FORCE_RENDER_COUNT_FOR_RENDERING_CUSTOM_COMPONENT_DEFAULT_VALUE = () => ({
+  json: {
+    post: (json) => {
+      if (json.name === 'InteractiveElement') {
+        console.log('json', JSON.stringify(json, null, 2));
+        json.children[0].meta.else.bindings['key'] = {
+          code: "'wrapper-' + state.forceRenderCount",
+          bindingType: "expression",
+          type: "single"
+        };
+      }
+    },
+  },
+});
+
 /**
  * @type {MitosisConfig}
  */
@@ -1239,6 +1254,7 @@ module.exports = {
             },
           },
         }),
+        QWIK_FORCE_RENDER_COUNT_FOR_RENDERING_CUSTOM_COMPONENT_DEFAULT_VALUE,
         QWIK_ONUPDATE_TO_USEVISIBLETASK,
       ],
     },

packages/sdks/src/components/block/components/interactive-element.lite.tsx

@@ -1,4 +1,11 @@
-import { Show, useMetadata, useStore, type Signal } from '@builder.io/mitosis';
+import {
+  Show,
+  onUpdate,
+  useMetadata,
+  useStore,
+  useTarget,
+  type Signal,
+} from '@builder.io/mitosis';
 import type { BuilderContextInterface } from '../../../context/types.js';
 import { getBlockActions } from '../../../functions/get-block-actions.js';
 import { getBlockProperties } from '../../../functions/get-block-properties.js';
@@ -32,6 +39,7 @@ useMetadata({
  */
 export default function InteractiveElement(props: InteractiveElementProps) {
   const state = useStore({
+    forceRenderCount: 0,
     get attributes() {
       return props.includeBlockProps
         ? {
@@ -51,6 +59,16 @@ export default function InteractiveElement(props: InteractiveElementProps) {
     },
   });
 
+  // Use onUpdate to track prop changes (Mitosis equivalent of useEffect/useTask)
+  onUpdate(() => {
+    useTarget({
+      qwik: () => {
+        state.forceRenderCount = state.forceRenderCount + 1;
+      },
+      default: () => {},
+    });
+  }, [props.wrapperProps, props.block?.component?.options]);
+
   return (
     <Show
       when={props.Wrapper.load}