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

[yash-builder]

Description

This PR addresses a critical reactivity issue in the Qwik SDK where deeply nested content updates weren't properly triggering.

The core problem was that when content was updated through the Builder.io editor, the changes were correctly stored in state but weren't causing components to re-render.

I've implemented a key-based approach for the InteractiveElement component that uses a dynamic key derived from the component options, forcing Qwik to update it's component when options changes. This effectively bypasses limitations in Qwik's resumability model where prop changes to dynamic components aren't always detected. While using JSON.stringify in keys isn't ideal for performance, but it provides a reliable solution that ensures content updates are immediately reflected in the UI without requiring page refreshes.

JIRA
https://builder-io.atlassian.net/browse/ENG-7299

Loom
https://www.loom.com/share/2b4d1b2872fe4151b1a9f2f131bab780?sid=7fc0f143-0623-41f4-aa94-e947530dde55

[changeset-bot]

🦋 Changeset detected

Latest commit: 3478c53

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@builder.io/sdk-qwik	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[gitguardian]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard.
Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
2708648	Triggered	Generic High Entropy Secret	3c65c71	examples/angular-gen2/src/environments/environment.ts	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secret safely. Learn here the best practices.
3. Revoke and rotate this secret.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 3478c53.

Command	Status	Duration	Result
nx test @e2e/qwik-city	❌ Failed	6m 31s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-18 05:58:52 UTC

[samijaber]

Suggested change

console.log('json', JSON.stringify(json, null, 2));

[samijaber]

we want to avoid hardcoded timeouts unless there's a special reason for them. Playwright has automated waiting and retrying so that we don't need to provide hardcoded timeout values all the time. Also, in this case, the default is already 5000 so this does nothing:

builder/packages/sdks-tests/playwright.config.ts

Line 69 in b351bd8

timeout: testType === 'snippet' ? 30000 : 5000,

you also don't need to redefine the locator twice:

Suggested change

	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();
	// Re-query the item1 element as it might have been recreated
	const updatedItem1 = page.frameLocator('iframe').getByText('Item 1');
	await expect(updatedItem1).toBeVisible();
	await updatedItem1.click();