feat[vue+svelte]: support of variant containers (#3957)

## Description

Adds support of Variant Containers in Gen2 Vue and Svelte SDK updating
the approach to be synonymous with how we handle A/B tests in Gen2 SDKs
(general support) so that we can expand this approach and support VCs in
other gen2 SDKs in the future.

Jira
https://builder-io.atlassian.net/browse/ENG-7677

Demo
https://www.loom.com/share/678e5b23a666445d87e3758f32a81b3a

Author: sidmohanty11

.changeset/angry-hounds-fix.md

@@ -0,0 +1,23 @@
+---
+'@builder.io/sdk-vue': patch
+---
+
+Feat: Add support for passing `BlocksWrapperProps` to `<Blocks />` component. This allows overriding global props set via `<Content />` with specific props for individual Blocks instances. Note that local props completely replace global props unless manually merged.
+
+Example usage:
+
+```vue
+<!-- Set global props, applies to all <Blocks /> -->
+<Content :blocksWrapperProps="{ style: { padding: '10px' } }" />
+
+<!-- Override global props -->
+<Blocks :BlocksWrapperProps="{ style: { backgroundColor: 'red' } }" />
+
+<!-- Merge global and local props -->
+<Blocks
+  :BlocksWrapperProps="{
+    ...builderContext.BlocksWrapperProps,
+    style: { backgroundColor: 'red' }, // applies both bg color and padding
+  }"
+/>
+```

.changeset/brown-buses-swim.md

@@ -0,0 +1,28 @@
+---
+'@builder.io/sdk-react-nextjs': patch
+'@builder.io/sdk-qwik': patch
+'@builder.io/sdk-react': patch
+'@builder.io/sdk-react-native': patch
+'@builder.io/sdk-solid': patch
+'@builder.io/sdk-svelte': patch
+---
+
+Feat: Add support for passing `BlocksWrapperProps` to `<Blocks />` component. This allows overriding global props set via `<Content />` with specific props for individual Blocks instances. Note that local props completely replace global props unless manually merged.
+
+Example usage:
+
+```tsx
+// Set global props, applies to all <Blocks />
+<Content blocksWrapperProps={{ style: { padding: 10 } }} />
+
+// Override global props
+<Blocks BlocksWrapperProps={{ style: { backgroundColor: 'red' } }} />
+
+// Merge global and local props
+<Blocks
+  BlocksWrapperProps={{
+    ...builderContext.BlocksWrapperProps,
+    style: { backgroundColor: 'red' } // applies both bg color and padding
+  }}
+/>
+```

.changeset/flat-needles-do.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/sdk-react": patch
+---
+
+Refactor: variant containers approach, now uses global level scripts and avoids re-initialization

.changeset/healthy-cups-impress.md

@@ -0,0 +1,23 @@
+---
+'@builder.io/sdk-angular': patch
+---
+
+Feat: Add support for passing `BlocksWrapperProps` to `<blocks>` component. This allows overriding global props set via `<builder-content>` with specific props for individual blocks instances. Note that local props completely replace global props unless manually merged.
+
+Example usage:
+
+```html
+<!-- Set global props, applies to all blocks -->
+<builder-content [blocksWrapperProps]="{ style: { padding: '10px' } }"></builder-content>
+
+<!-- Override global props -->
+<blocks [BlocksWrapperProps]="{ style: { backgroundColor: 'red' } }"></blocks>
+
+<!-- Merge global and local props -->
+<blocks
+  [BlocksWrapperProps]="{
+    ...builderContext.BlocksWrapperProps,
+    style: { backgroundColor: 'red' } // applies both bg color and padding
+  }"
+></blocks>
+```

.changeset/witty-lemons-report.md

@@ -0,0 +1,6 @@
+---
+"@builder.io/sdk-svelte": patch
+"@builder.io/sdk-vue": patch
+---
+
+Feat: support of Variant Containers and block level personalization

packages/sdks-tests/src/e2e-tests/personalization-container.spec.ts

@@ -1,8 +1,11 @@
 import type { Browser } from '@playwright/test';
 import { expect } from '@playwright/test';
-import { excludeGen2, isSSRFramework, test } from '../helpers/index.js';
+import { isSSRFramework, test } from '../helpers/index.js';
 import { launchEmbedderAndWaitForSdk } from '../helpers/visual-editor.js';
+import type { Sdk } from '../helpers/sdk.js';
+
 const SELECTOR = 'div[builder-content-id]';
+const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte'] as Sdk[];
 
 const createContextWithCookies = async ({
   cookies,
@@ -36,18 +39,9 @@ const initializeUserAttributes = async (
     page: _page,
     baseURL,
     browser,
-    packageName,
-    sdk,
-  }: Pick<
-    Parameters<Parameters<typeof test>[2]>[0],
-    'page' | 'baseURL' | 'browser' | 'packageName' | 'sdk'
-  >,
+  }: Pick<Parameters<Parameters<typeof test>[2]>[0], 'page' | 'baseURL' | 'browser'>,
   { userAttributes }: { userAttributes: Record<string, string> }
 ) => {
-  // gen1-remix started failing on this test for an unknown reason.
-  test.skip(packageName === 'gen1-remix');
-  test.skip(excludeGen2(sdk) && sdk !== 'react');
-
   if (!baseURL) throw new Error('Missing baseURL');
 
   const context = await createContextWithCookies({
@@ -62,6 +56,11 @@ const initializeUserAttributes = async (
 };
 
 test.describe('Personalization Container', () => {
+  test.beforeEach(({ sdk, packageName }) => {
+    test.skip(!SDKS_SUPPORTING_PERSONALIZATION.includes(sdk));
+    test.skip(packageName === 'gen1-remix');
+  });
+
   test.describe('entire page', () => {
     const TEXTS = {
       DEFAULT_CONTENT: 'Default',
@@ -73,20 +72,12 @@ test.describe('Personalization Container', () => {
 
     // Manually run tests 10 times to ensure we don't have any flakiness.
     for (let i = 1; i <= TRIES; i++) {
-      test(`#${i}/${TRIES}: Render default w/ SSR`, async ({
-        page: _page,
-        baseURL,
-        browser,
-        packageName,
-        sdk,
-      }) => {
+      test(`#${i}/${TRIES}: Render default w/ SSR`, async ({ page: _page, baseURL, browser }) => {
         const { page } = await initializeUserAttributes(
           {
             page: _page,
             baseURL,
             browser,
-            sdk,
-            packageName,
           },
           // empty should render default, non-personalized content
           {
@@ -102,20 +93,12 @@ test.describe('Personalization Container', () => {
         await expect(page.locator(SELECTOR, { hasText: TEXTS.EXPERIMENT_B })).toBeHidden();
       });
 
-      test(`#${i}/${TRIES}: Render variant A w/ SSR`, async ({
-        page: _page,
-        baseURL,
-        browser,
-        sdk,
-        packageName,
-      }) => {
+      test(`#${i}/${TRIES}: Render variant A w/ SSR`, async ({ page: _page, baseURL, browser }) => {
         const { page } = await initializeUserAttributes(
           {
             page: _page,
             baseURL,
             browser,
-            sdk,
-            packageName,
           },
           // empty should render default, non-personalized content
           {
@@ -131,20 +114,12 @@ test.describe('Personalization Container', () => {
         await expect(page.locator(SELECTOR, { hasText: TEXTS.DEFAULT_CONTENT })).toBeHidden();
       });
 
-      test(`#${i}/${TRIES}: Render variant B w/ SSR`, async ({
-        page: _page,
-        baseURL,
-        browser,
-        sdk,
-        packageName,
-      }) => {
+      test(`#${i}/${TRIES}: Render variant B w/ SSR`, async ({ page: _page, baseURL, browser }) => {
         const { page } = await initializeUserAttributes(
           {
             page: _page,
             baseURL,
             browser,
-            sdk,
-            packageName,
           },
           // empty should render default, non-personalized content
           {
@@ -167,7 +142,9 @@ test.describe('Personalization Container', () => {
     packageName,
   }) => {
     // here we are checking specifically for winning variant content by setting the user attributes
-    test.skip(!['react-sdk-next-15-app', 'gen1-next15-app'].includes(packageName));
+    test.skip(
+      !['react-sdk-next-15-app', 'gen1-next15-app', 'nuxt', 'sveltekit'].includes(packageName)
+    );
     await page.goto('/variant-containers');
 
     // content 1
@@ -179,12 +156,8 @@ test.describe('Personalization Container', () => {
     await expect(page.getByText('Tablet content 2')).toBeVisible();
   });
 
-  test('only default variants are ssred on the server', async ({ browser, packageName, sdk }) => {
+  test('only default variants are ssred on the server', async ({ browser, packageName }) => {
     test.skip(!isSSRFramework(packageName));
-    test.skip(!['react', 'oldReact'].includes(sdk));
-    // Cannot read properties of null (reading 'useContext')
-    test.skip(packageName === 'gen1-remix');
-
     const context = await browser.newContext({
       javaScriptEnabled: false,
     });
@@ -197,11 +170,7 @@ test.describe('Personalization Container', () => {
     await expect(page.getByText('Default content 2')).toBeVisible();
   });
 
-  test('root style attribute is correctly set', async ({ page, sdk, packageName }) => {
-    test.skip(!['react', 'oldReact'].includes(sdk));
-    // Cannot read properties of null (reading 'useContext')
-    test.skip(packageName === 'gen1-remix');
-
+  test('root style attribute is correctly set', async ({ page }) => {
     await page.goto('/variant-containers');
 
     const secondPersonalizationContainer = page
@@ -215,12 +184,7 @@ test.describe('Personalization Container', () => {
       page,
       sdk,
       basePort,
-      packageName,
     }) => {
-      test.skip(!['react', 'oldReact'].includes(sdk));
-      // Cannot read properties of null (reading 'useContext')
-      test.skip(packageName === 'gen1-remix');
-
       const paths = [
         '/variant-containers-with-previewing-index-0',
         '/variant-containers-with-previewing-index-1',

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

@@ -250,39 +250,15 @@ export const PAGES: Record<string, Page> = {
   '/video-lazy-load': { content: VIDEO_LAZY_LOAD },
   '/variant-containers': {
     content: VARIANT_CONTAINERS,
-    target: [
-      'react-sdk-next-15-app',
-      'gen1-next15-app',
-      'react-sdk-next-pages',
-      'gen1-next14-pages',
-    ],
   },
   '/variant-containers-with-previewing-index-0': {
     content: VARIANT_CONTAINERS,
-    target: [
-      'react-sdk-next-15-app',
-      'gen1-next15-app',
-      'react-sdk-next-pages',
-      'gen1-next14-pages',
-    ],
   },
   '/variant-containers-with-previewing-index-1': {
     content: VARIANT_CONTAINERS_WITH_PREVIEWING_INDEX_1,
-    target: [
-      'react-sdk-next-15-app',
-      'gen1-next15-app',
-      'react-sdk-next-pages',
-      'gen1-next14-pages',
-    ],
   },
   '/variant-containers-with-previewing-index-undefined': {
     content: VARIANT_CONTAINERS_WITH_PREVIEWING_INDEX_UNDEFINED,
-    target: [
-      'react-sdk-next-15-app',
-      'gen1-next15-app',
-      'react-sdk-next-pages',
-      'gen1-next14-pages',
-    ],
   },
   '/columns-vertical-center-flex': { content: COLUMNS_VERTICAL_CENTER_FLEX },
   '/can-track-false-pre-init': { content: HOMEPAGE, target: 'gen1' },

packages/sdks-tests/src/specs/variant-containers.ts

@@ -143,7 +143,7 @@ export const VARIANT_CONTAINERS = {
       {
         '@type': '@builder.io/sdk:Element',
         '@version': 2,
-        id: 'builder-f90383ccd64745ada9399da4f492b466',
+        id: 'builder-a1fa7007203347ce817e860661bbea79',
         component: {
           name: 'PersonalizationContainer',
           options: {

packages/sdks/README.md

@@ -93,3 +93,4 @@ Legend:
 | Global Content Styles          | ✅   | ✅    | ✅                                       | ✅  | ❌ (Does not apply) | ✅     | ✅    | ✅      |         |
 | CSS Nesting (`&` operator)     | ✅   | ✅    | ✅                                       | ✅  | ❌ (Does not apply) | ✅     | ✅    | ✅      |         |
 | Locale Support                 | ✅   | ✅    | ✅                                       | ✅  | ✅                  | ✅     | ✅    | ✅      |         |
+| Variant Containers             | 🏗   | ✅    | 🏗                                       | ✅  | 🏗                  | ✅     | 🏗    | 🏗      |         |