add docs code snippets (#4130)

## Description

This PR is a rebased and squashed update of
#4078 that I'm taking over. It
adds code snippets for the docs to the repo and was previously approved,
but the author hadn't signed their commits.

Co-authored-by: Uttej V S K <[email protected]>

Author: kapunahelewong

.changeset/brown-avocados-dream.md

@@ -0,0 +1,12 @@
+---
+"@builder.io/sdk-angular": patch
+"@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
+"@builder.io/sdk-vue": patch
+---
+
+docs: document `getBuilderSearchParams` and `isPreviewing`

packages/sdks-tests/src/snippet-tests/advanced-child.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { test, testClickAndVerifyVisibility } from '../helpers/index.js';
+import { findTextInPage, test, testClickAndVerifyVisibility } from '../helpers/index.js';
 
 test.describe('Advanced child sub components', () => {
   test('Display two buttons with label Tab 1 and Tab 2', async ({ page, packageName }) => {
@@ -62,4 +62,19 @@ test.describe('Advanced child sub components', () => {
     expect(Tab2ContentVisible).toBe(true);
     expect(await page.locator('div').filter({ hasText: 'Tab 1 Content' }).isVisible()).toBeFalsy();
   });
+
+  test('Advanced child components work in preview mode with isPreviewing', async ({
+    page,
+    packageName,
+  }) => {
+    test.skip(!['react-none-gen2'].includes(packageName));
+
+    await page.goto(
+      '/advanced-child?builder.space=ee9f13b4981e489a9a1209887695ef2b&builder.cachebust=true&builder.preview=page&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.page=91744fcdc9f04bb8884a5f4c9feb0dc1&builder.overrides.91744fcdc9f04bb8884a5f4c9feb0dc1=91744fcdc9f04bb8884a5f4c9feb0dc1&builder.overrides.page:/advanced-child=91744fcdc9f04bb8884a5f4c9feb0dc1'
+    );
+
+    await page.waitForLoadState('networkidle');
+
+    await findTextInPage({ page, text: 'advanced child draft' });
+  });
 });

packages/sdks-tests/src/snippet-tests/editable-regions.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { test } from '../helpers/index.js';
+import { findTextInPage, test } from '../helpers/index.js';
 
 test.describe('Editable regions in custom components', () => {
   test('should render a div with two columns with builder-path attr', async ({
@@ -57,4 +57,19 @@ test.describe('Editable regions in custom components', () => {
     expect(columnTexts).toContain('column 1 text');
     expect(columnTexts).toContain('column 2 text');
   });
+
+  test('Editable regions show draft content in preview mode with isPreviewing', async ({
+    page,
+    packageName,
+  }) => {
+    test.skip(!['react-none-gen2'].includes(packageName));
+
+    await page.goto(
+      '/editable-region?builder.space=ee9f13b4981e489a9a1209887695ef2b&builder.cachebust=true&builder.preview=page&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.page=bb909e043ad34915b0075091911647e8&builder.overrides.bb909e043ad34915b0075091911647e8=bb909e043ad34915b0075091911647e8&builder.overrides.page:/editable-region=bb909e043ad34915b0075091911647e8'
+    );
+    await findTextInPage({ page, text: 'draft: column 1 text' });
+    await findTextInPage({ page, text: 'draft: column 2 text' });
+
+    await page.waitForLoadState('networkidle');
+  });
 });

packages/sdks/e2e/angular-16-ssr/src/app/app.resolver.ts

@@ -0,0 +1,13 @@
+import type { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
+import { _processContentResult, fetchOneEntry } from '@builder.io/sdk-angular';
+import { getProps } from '@sdk/tests';
+
+export const appResolver: ResolveFn<any> = (route: ActivatedRouteSnapshot) => {
+  const urlPath = `/${route.url.join('/')}`;
+
+  return getProps({
+    pathname: urlPath,
+    _processContentResult,
+    fetchOneEntry,
+  });
+};

packages/sdks/e2e/angular-16/src/app/app.component.ts

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+import {
+  _processContentResult,
+  fetchOneEntry,
+  type RegisteredComponent,
+} from '@builder.io/sdk-angular';
+import { getProps } from '@sdk/tests';
+import { customComponents } from './custom-components';
+
+interface BuilderProps {
+  apiVersion: string;
+  canTrack?: boolean;
+  trustedHosts?: undefined;
+  apiKey: string;
+  model: string;
+  content: any;
+  data?: any;
+  apiHost?: string;
+  locale?: string;
+}
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <ng-container *ngIf="content; else notFound">
+      <builder-content
+        [model]="model"
+        [content]="content"
+        [apiKey]="apiKey"
+        [trustedHosts]="trustedHosts"
+        [canTrack]="canTrack"
+        [customComponents]="customComponents"
+        [data]="data"
+        [apiHost]="apiHost"
+        [locale]="locale"
+      ></builder-content>
+    </ng-container>
+
+    <ng-template #notFound>
+      <div>404 - Content not found</div>
+    </ng-template>
+  `,
+})
+export class AppComponent {
+  title = 'angular';
+  apiVersion: BuilderProps['apiVersion'] = 'v3';
+  canTrack: BuilderProps['canTrack'];
+  trustedHosts: BuilderProps['trustedHosts'];
+  apiKey: BuilderProps['apiKey'] = 'abcd';
+  model: BuilderProps['model'] = 'page';
+  content: BuilderProps['content'];
+  data: BuilderProps['data'];
+  apiHost: BuilderProps['apiHost'];
+  locale: BuilderProps['locale'];
+
+  customComponents: RegisteredComponent[] = customComponents;
+
+  async ngOnInit() {
+    const urlPath = window.location.pathname || '';
+
+    const builderProps = await getProps({
+      pathname: urlPath,
+      _processContentResult,
+      fetchOneEntry,
+    });
+
+    if (!builderProps) {
+      return;
+    }
+
+    this.content = builderProps.content;
+    this.canTrack = builderProps.canTrack;
+    this.trustedHosts = builderProps.trustedHosts;
+    this.apiKey = builderProps.apiKey;
+    this.model = builderProps.model;
+    this.apiVersion = builderProps.apiVersion;
+    this.data = builderProps.data;
+    this.apiHost = builderProps.apiHost;
+    this.locale = builderProps.locale;
+  }
+}

packages/sdks/e2e/angular-19-ssr/src/app/catch-all.component.ts

@@ -7,7 +7,6 @@ import {
   Content,
   _processContentResult,
   fetchOneEntry,
-  getBuilderSearchParams,
   registerAction,
   type RegisteredComponent,
 } from '@builder.io/sdk-angular';
@@ -95,7 +94,6 @@ export class CatchAllComponent {
     const builderProps = await getProps({
       pathname: urlPath,
       _processContentResult,
-      options: getBuilderSearchParams(searchParams),
       fetchOneEntry: (args) => {
         return fetchOneEntry({
           ...args,

packages/sdks/e2e/nextjs-sdk-next-app/src/app/[[...slug]]/page.tsx

@@ -5,7 +5,6 @@ import {
   Content,
   _processContentResult,
   fetchOneEntry,
-  getBuilderSearchParams,
 } from '@builder.io/sdk-react-nextjs';
 import { getProps } from '@sdk/tests';
 import MyTextBox from '../../components/MyTextBox/MyTextBox';
@@ -73,7 +72,6 @@ export default async function Page(props: MyPageProps) {
   const builderProps = await getProps({
     pathname: urlPath,
     _processContentResult,
-    options: getBuilderSearchParams(props.searchParams),
     fetchOneEntry,
   });
 

packages/sdks/e2e/react-sdk-next-14-app/src/app/[[...slug]]/page.tsx

@@ -3,7 +3,6 @@ import {
   Content,
   _processContentResult,
   fetchOneEntry,
-  getBuilderSearchParams,
 } from '@builder.io/sdk-react';
 import { getProps } from '@sdk/tests';
 
@@ -63,7 +62,6 @@ export default async function Page(props: PageProps) {
   const builderProps = await getProps({
     pathname: urlPath,
     _processContentResult,
-    options: getBuilderSearchParams(props.searchParams),
     fetchOneEntry,
   });
 

packages/sdks/e2e/react-sdk-next-15-app/src/app/[[...slug]]/page.tsx

@@ -4,7 +4,6 @@ import {
   Content,
   _processContentResult,
   fetchOneEntry,
-  getBuilderSearchParams,
 } from '@builder.io/sdk-react';
 import { getProps } from '@sdk/tests';
 
@@ -22,7 +21,6 @@ export default async function Page(props: PageProps) {
   const builderProps = await getProps({
     pathname: urlPath,
     _processContentResult,
-    options: getBuilderSearchParams(await props.searchParams),
     fetchOneEntry,
   });
 

packages/sdks/snippets/angular-16-ssr/src/app/advanced-child/advanced-child.component.ts

@@ -1,7 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { Component, type OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Content, type BuilderContent } from '@builder.io/sdk-angular';
+import {
+  Content,
+  isPreviewing,
+  type BuilderContent,
+} from '@builder.io/sdk-angular';
 import {
   CustomTabsComponent,
   customTabsInfo,
@@ -12,30 +16,32 @@ import {
   standalone: true,
   imports: [CommonModule, Content, CustomTabsComponent],
   template: `
-    <div *ngIf="content">
+    <div *ngIf="canShowContent; else notFound">
       <builder-content
         [content]="content"
         [model]="modelName"
         [apiKey]="apiKey"
         [customComponents]="customComponents"
       />
     </div>
-    <div *ngIf="notFound">404</div>
+    <ng-template #notFound> 404 </ng-template>
   `,
 })
 export class AdvancedChildComponent implements OnInit {
   apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
   modelName = 'page';
 
   content: BuilderContent | null = null;
-  notFound = false;
+  canShowContent = false;
   customComponents = [customTabsInfo];
 
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit() {
     this.route.data.subscribe((data: any) => {
       this.content = data.content;
+      const searchParams = this.route.snapshot.queryParams;
+      this.canShowContent = !!this.content || isPreviewing(searchParams);
     });
   }
 }