From 468ccd210effb18987bbe573dfb7bafeb13074b5 Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Sat, 17 May 2025 21:32:44 -0500 Subject: [PATCH 01/16] rebase main --- .../angular-16-ssr/src/app/app.resolver.ts | 13 +++ .../e2e/angular-16/src/app/app.component.ts | 81 +++++++++++++++++++ .../src/app/catch-all.component.ts | 2 - .../src/app/[[...slug]]/page.tsx | 2 - .../src/app/[[...slug]]/page.tsx | 2 - .../src/app/[[...slug]]/page.tsx | 2 - .../announcement-bar.resolver.ts | 8 +- .../app/components/AnnouncementBarPage.tsx | 7 +- .../snippets/hydrogen/app/components/app.tsx | 1 - .../app/[[...slug]]/page.tsx | 2 - .../app/announcements/[...slug]/page.tsx | 3 +- .../sdks/snippets/nuxt/pages/[...app].vue | 2 +- .../nuxt/pages/announcements/[...app].vue | 2 +- .../qwik-city/src/routes/[...index]/index.tsx | 7 +- .../routes/announcements/[...index]/index.tsx | 3 +- .../app/[[...slug]]/page.tsx | 16 +--- .../app/announcements/[...slug]/page.tsx | 2 - .../react/src/routes/AnnouncementBar.tsx | 2 - .../react/src/routes/IntegratingPages.tsx | 2 - .../custom-components/advanced-child.tsx | 2 - .../routes/custom-components/custom-child.tsx | 2 - .../custom-components/editable-region.tsx | 2 - .../src/routes/[...catchall]/+page.server.js | 3 +- .../[...catchall]/+page.server.js | 4 +- .../vue/src/views/AnnouncementBar.vue | 2 - .../snippets/vue/src/views/QuickStart.vue | 2 +- 26 files changed, 108 insertions(+), 68 deletions(-) create mode 100644 packages/sdks/e2e/angular-16-ssr/src/app/app.resolver.ts create mode 100644 packages/sdks/e2e/angular-16/src/app/app.component.ts diff --git a/packages/sdks/e2e/angular-16-ssr/src/app/app.resolver.ts b/packages/sdks/e2e/angular-16-ssr/src/app/app.resolver.ts new file mode 100644 index 00000000000..4c187b8767c --- /dev/null +++ b/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 = (route: ActivatedRouteSnapshot) => { + const urlPath = `/${route.url.join('/')}`; + + return getProps({ + pathname: urlPath, + _processContentResult, + fetchOneEntry, + }); +}; diff --git a/packages/sdks/e2e/angular-16/src/app/app.component.ts b/packages/sdks/e2e/angular-16/src/app/app.component.ts new file mode 100644 index 00000000000..1a7646e6dab --- /dev/null +++ b/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: ` + + + + + +
404 - Content not found
+ + `, +}) +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; + } +} diff --git a/packages/sdks/e2e/angular-19-ssr/src/app/catch-all.component.ts b/packages/sdks/e2e/angular-19-ssr/src/app/catch-all.component.ts index a57030de90e..5742081b31f 100644 --- a/packages/sdks/e2e/angular-19-ssr/src/app/catch-all.component.ts +++ b/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, diff --git a/packages/sdks/e2e/nextjs-sdk-next-app/src/app/[[...slug]]/page.tsx b/packages/sdks/e2e/nextjs-sdk-next-app/src/app/[[...slug]]/page.tsx index 5e04b42a490..a8af36fcefd 100644 --- a/packages/sdks/e2e/nextjs-sdk-next-app/src/app/[[...slug]]/page.tsx +++ b/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, }); diff --git a/packages/sdks/e2e/react-sdk-next-14-app/src/app/[[...slug]]/page.tsx b/packages/sdks/e2e/react-sdk-next-14-app/src/app/[[...slug]]/page.tsx index e7424dc0a9e..182b3dce06f 100644 --- a/packages/sdks/e2e/react-sdk-next-14-app/src/app/[[...slug]]/page.tsx +++ b/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, }); diff --git a/packages/sdks/e2e/react-sdk-next-15-app/src/app/[[...slug]]/page.tsx b/packages/sdks/e2e/react-sdk-next-15-app/src/app/[[...slug]]/page.tsx index cf982b07aac..8384512b08e 100644 --- a/packages/sdks/e2e/react-sdk-next-15-app/src/app/[[...slug]]/page.tsx +++ b/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, }); diff --git a/packages/sdks/snippets/angular-16-ssr/src/app/announcement-bar/announcement-bar.resolver.ts b/packages/sdks/snippets/angular-16-ssr/src/app/announcement-bar/announcement-bar.resolver.ts index 325670b3330..d53090314a2 100644 --- a/packages/sdks/snippets/angular-16-ssr/src/app/announcement-bar/announcement-bar.resolver.ts +++ b/packages/sdks/snippets/angular-16-ssr/src/app/announcement-bar/announcement-bar.resolver.ts @@ -1,15 +1,10 @@ import type { ActivatedRouteSnapshot, ResolveFn } from '@angular/router'; -import { - BuilderContent, - fetchOneEntry, - getBuilderSearchParams, -} from '@builder.io/sdk-angular'; +import { BuilderContent, fetchOneEntry } from '@builder.io/sdk-angular'; export const announcementBarResolver: ResolveFn = ( route: ActivatedRouteSnapshot ) => { const urlPath = `/${route.url.join('/')}`; - const searchParams = getBuilderSearchParams(route.queryParams); return fetchOneEntry({ apiKey: 'ee9f13b4981e489a9a1209887695ef2b', @@ -17,6 +12,5 @@ export const announcementBarResolver: ResolveFn = ( userAttributes: { urlPath, }, - options: searchParams, }); }; diff --git a/packages/sdks/snippets/hydrogen/app/components/AnnouncementBarPage.tsx b/packages/sdks/snippets/hydrogen/app/components/AnnouncementBarPage.tsx index 911884f94f6..225c2a19632 100644 --- a/packages/sdks/snippets/hydrogen/app/components/AnnouncementBarPage.tsx +++ b/packages/sdks/snippets/hydrogen/app/components/AnnouncementBarPage.tsx @@ -3,11 +3,7 @@ * snippets/hydrogen/app/components/AnnouncementBarPage.tsx */ -import { - Content, - fetchOneEntry, - getBuilderSearchParams, -} from '@builder.io/sdk-react'; +import {Content, fetchOneEntry} from '@builder.io/sdk-react'; import type {LoaderFunction} from '@remix-run/node'; import {useLoaderData} from '@remix-run/react'; import {useNonce} from '@shopify/hydrogen'; @@ -29,7 +25,6 @@ export const announcementsLoader: LoaderFunction = async ({ userAttributes: { urlPath: pathname, }, - options: getBuilderSearchParams(url.searchParams), }); return {content, model}; diff --git a/packages/sdks/snippets/hydrogen/app/components/app.tsx b/packages/sdks/snippets/hydrogen/app/components/app.tsx index 67dc4edc666..25e0b23ce6b 100644 --- a/packages/sdks/snippets/hydrogen/app/components/app.tsx +++ b/packages/sdks/snippets/hydrogen/app/components/app.tsx @@ -26,7 +26,6 @@ export const builderLoader: LoaderFunction = async ({params, request}) => { userAttributes: { urlPath: pathname, }, - options: getBuilderSearchParams(url.searchParams), }); return {content, model}; } catch (e) { diff --git a/packages/sdks/snippets/nextjs-sdk-next-app/app/[[...slug]]/page.tsx b/packages/sdks/snippets/nextjs-sdk-next-app/app/[[...slug]]/page.tsx index 655f96e0665..68ea91c14a3 100644 --- a/packages/sdks/snippets/nextjs-sdk-next-app/app/[[...slug]]/page.tsx +++ b/packages/sdks/snippets/nextjs-sdk-next-app/app/[[...slug]]/page.tsx @@ -6,7 +6,6 @@ import { Content, fetchOneEntry, - getBuilderSearchParams, isPreviewing, } from '@builder.io/sdk-react-nextjs'; @@ -23,7 +22,6 @@ export default async function Page(props: PageProps) { const urlPath = '/' + (props.params?.slug?.join('/') || ''); const content = await fetchOneEntry({ - options: getBuilderSearchParams(props.searchParams), apiKey: PUBLIC_API_KEY, model: 'page', userAttributes: { urlPath }, diff --git a/packages/sdks/snippets/nextjs-sdk-next-app/app/announcements/[...slug]/page.tsx b/packages/sdks/snippets/nextjs-sdk-next-app/app/announcements/[...slug]/page.tsx index 14f90f35db5..a25887e0851 100644 --- a/packages/sdks/snippets/nextjs-sdk-next-app/app/announcements/[...slug]/page.tsx +++ b/packages/sdks/snippets/nextjs-sdk-next-app/app/announcements/[...slug]/page.tsx @@ -6,7 +6,6 @@ import { Content, fetchOneEntry, - getBuilderSearchParams, isEditing, isPreviewing, } from '@builder.io/sdk-react-nextjs'; @@ -27,7 +26,7 @@ export default async function Page(props: PageProps) { const content = await fetchOneEntry({ apiKey, model, - options: getBuilderSearchParams(props.searchParams), + userAttributes: { urlPath }, }); diff --git a/packages/sdks/snippets/nuxt/pages/[...app].vue b/packages/sdks/snippets/nuxt/pages/[...app].vue index ff00915bd60..d610881ef21 100644 --- a/packages/sdks/snippets/nuxt/pages/[...app].vue +++ b/packages/sdks/snippets/nuxt/pages/[...app].vue @@ -22,7 +22,7 @@ const { data: content } = await useAsyncData( fetchOneEntry({ model, apiKey, - options: getBuilderSearchParams(route.query), + userAttributes: { urlPath: route.path }, }) ); diff --git a/packages/sdks/snippets/nuxt/pages/announcements/[...app].vue b/packages/sdks/snippets/nuxt/pages/announcements/[...app].vue index 5c1473c41a5..670e45e69a0 100644 --- a/packages/sdks/snippets/nuxt/pages/announcements/[...app].vue +++ b/packages/sdks/snippets/nuxt/pages/announcements/[...app].vue @@ -23,7 +23,7 @@ const { data: announcement } = await useAsyncData( fetchOneEntry({ model, apiKey, - options: getBuilderSearchParams(route.query), + userAttributes: { urlPath: route.path }, }) ); diff --git a/packages/sdks/snippets/qwik-city/src/routes/[...index]/index.tsx b/packages/sdks/snippets/qwik-city/src/routes/[...index]/index.tsx index 88f8d082b06..5913f15cff7 100644 --- a/packages/sdks/snippets/qwik-city/src/routes/[...index]/index.tsx +++ b/packages/sdks/snippets/qwik-city/src/routes/[...index]/index.tsx @@ -4,11 +4,7 @@ */ import { component$ } from '@builder.io/qwik'; import { routeLoader$ } from '@builder.io/qwik-city'; -import { - Content, - fetchOneEntry, - getBuilderSearchParams, -} from '@builder.io/sdk-qwik'; +import { Content, fetchOneEntry } from '@builder.io/sdk-qwik'; // Define Builder's public API key and content model. // TO DO: Replace with your Public API Key @@ -22,7 +18,6 @@ export const useBuilderContent = routeLoader$(async ({ url }) => { const builderContent = await fetchOneEntry({ model: BUILDER_MODEL, apiKey: BUILDER_PUBLIC_API_KEY, - options: getBuilderSearchParams(url.searchParams), userAttributes: { urlPath: url.pathname, }, diff --git a/packages/sdks/snippets/qwik-city/src/routes/announcements/[...index]/index.tsx b/packages/sdks/snippets/qwik-city/src/routes/announcements/[...index]/index.tsx index 0ba4fb55632..12a23db84d2 100644 --- a/packages/sdks/snippets/qwik-city/src/routes/announcements/[...index]/index.tsx +++ b/packages/sdks/snippets/qwik-city/src/routes/announcements/[...index]/index.tsx @@ -8,7 +8,6 @@ import { routeLoader$ } from '@builder.io/qwik-city'; import { Content, fetchOneEntry, - getBuilderSearchParams, } from '@builder.io/sdk-qwik'; export const BUILDER_PUBLIC_API_KEY = 'ee9f13b4981e489a9a1209887695ef2b'; @@ -18,7 +17,7 @@ export const useBuilderContent = routeLoader$(async ({ url }) => { const announcementBar = await fetchOneEntry({ model: BUILDER_MODEL, apiKey: BUILDER_PUBLIC_API_KEY, - options: getBuilderSearchParams(url.searchParams), + userAttributes: { urlPath: url.pathname, }, diff --git a/packages/sdks/snippets/react-sdk-next-14-app/app/[[...slug]]/page.tsx b/packages/sdks/snippets/react-sdk-next-14-app/app/[[...slug]]/page.tsx index a8d5f7c464e..c1a80631f6d 100644 --- a/packages/sdks/snippets/react-sdk-next-14-app/app/[[...slug]]/page.tsx +++ b/packages/sdks/snippets/react-sdk-next-14-app/app/[[...slug]]/page.tsx @@ -3,12 +3,7 @@ * snippets/nextjs-app-dir-client/app/[[...slug]].tsx * Uses @builder.io/sdk-react */ -import { - Content, - fetchOneEntry, - getBuilderSearchParams, - isPreviewing, -} from '@builder.io/sdk-react'; +import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-react'; interface PageProps { params: { @@ -23,7 +18,6 @@ export default async function Page(props: PageProps) { const urlPath = '/' + (props.params?.slug?.join('/') || ''); const content = await fetchOneEntry({ - options: getBuilderSearchParams(props.searchParams), apiKey: PUBLIC_API_KEY, model: 'page', userAttributes: { urlPath }, @@ -32,12 +26,8 @@ export default async function Page(props: PageProps) { const canShowContent = content || isPreviewing(props.searchParams); if (!canShowContent) { - return ( - <> -

404

-

Make sure you have your content published at Builder.io.

- - ); + return

Not Found

; } + return ; } diff --git a/packages/sdks/snippets/react-sdk-next-14-app/app/announcements/[...slug]/page.tsx b/packages/sdks/snippets/react-sdk-next-14-app/app/announcements/[...slug]/page.tsx index a4efdfae86e..9e620673ed9 100644 --- a/packages/sdks/snippets/react-sdk-next-14-app/app/announcements/[...slug]/page.tsx +++ b/packages/sdks/snippets/react-sdk-next-14-app/app/announcements/[...slug]/page.tsx @@ -6,7 +6,6 @@ import { Content, fetchOneEntry, - getBuilderSearchParams, isEditing, isPreviewing, } from '@builder.io/sdk-react'; @@ -27,7 +26,6 @@ export default async function Page(props: PageProps) { const announcementBar = await fetchOneEntry({ apiKey, model, - options: getBuilderSearchParams(props.searchParams), userAttributes: { urlPath }, }); diff --git a/packages/sdks/snippets/react/src/routes/AnnouncementBar.tsx b/packages/sdks/snippets/react/src/routes/AnnouncementBar.tsx index 7c36b6357ae..e41f66d4104 100644 --- a/packages/sdks/snippets/react/src/routes/AnnouncementBar.tsx +++ b/packages/sdks/snippets/react/src/routes/AnnouncementBar.tsx @@ -6,7 +6,6 @@ import { Content, fetchOneEntry, - getBuilderSearchParams, type BuilderContent, } from '@builder.io/sdk-react'; import { useEffect, useState } from 'react'; @@ -24,7 +23,6 @@ export default function AnnouncementBar() { userAttributes: { urlPath: window.location.pathname, }, - options: getBuilderSearchParams(new URL(location.href).searchParams), }) .then((content) => { if (content) { diff --git a/packages/sdks/snippets/react/src/routes/IntegratingPages.tsx b/packages/sdks/snippets/react/src/routes/IntegratingPages.tsx index 9da40949106..e376465b91f 100644 --- a/packages/sdks/snippets/react/src/routes/IntegratingPages.tsx +++ b/packages/sdks/snippets/react/src/routes/IntegratingPages.tsx @@ -5,7 +5,6 @@ import { Content, fetchOneEntry, - getBuilderSearchParams, isPreviewing, type BuilderContent, } from '@builder.io/sdk-react'; @@ -29,7 +28,6 @@ export default function App() { userAttributes: { urlPath: window.location.pathname, }, - options: getBuilderSearchParams(new URL(location.href).searchParams), }) .then((content) => { if (content) { diff --git a/packages/sdks/snippets/react/src/routes/custom-components/advanced-child.tsx b/packages/sdks/snippets/react/src/routes/custom-components/advanced-child.tsx index 79d5f7b3935..87a2f64ad83 100644 --- a/packages/sdks/snippets/react/src/routes/custom-components/advanced-child.tsx +++ b/packages/sdks/snippets/react/src/routes/custom-components/advanced-child.tsx @@ -6,7 +6,6 @@ import { Content, fetchOneEntry, - getBuilderSearchParams, isPreviewing, type BuilderContent, } from '@builder.io/sdk-react'; @@ -28,7 +27,6 @@ export default function AdvancedChildRoute() { userAttributes: { urlPath: window.location.pathname, }, - options: getBuilderSearchParams(new URL(location.href).searchParams), }) .then((content) => { if (content) { diff --git a/packages/sdks/snippets/react/src/routes/custom-components/custom-child.tsx b/packages/sdks/snippets/react/src/routes/custom-components/custom-child.tsx index b79d13704aa..e96cc6bc915 100644 --- a/packages/sdks/snippets/react/src/routes/custom-components/custom-child.tsx +++ b/packages/sdks/snippets/react/src/routes/custom-components/custom-child.tsx @@ -6,7 +6,6 @@ import { Content, fetchOneEntry, - getBuilderSearchParams, isPreviewing, type BuilderContent, } from '@builder.io/sdk-react'; @@ -28,7 +27,6 @@ export default function CustomChildRoute() { userAttributes: { urlPath: window.location.pathname, }, - options: getBuilderSearchParams(new URL(location.href).searchParams), }) .then((content) => { if (content) { diff --git a/packages/sdks/snippets/react/src/routes/custom-components/editable-region.tsx b/packages/sdks/snippets/react/src/routes/custom-components/editable-region.tsx index da64789644f..2217c1ac0e3 100644 --- a/packages/sdks/snippets/react/src/routes/custom-components/editable-region.tsx +++ b/packages/sdks/snippets/react/src/routes/custom-components/editable-region.tsx @@ -6,7 +6,6 @@ import { Content, fetchOneEntry, - getBuilderSearchParams, isPreviewing, type BuilderContent, } from '@builder.io/sdk-react'; @@ -28,7 +27,6 @@ export default function EditableRegionRoute() { userAttributes: { urlPath: window.location.pathname, }, - options: getBuilderSearchParams(new URL(location.href).searchParams), }) .then((content) => { if (content) { diff --git a/packages/sdks/snippets/sveltekit/src/routes/[...catchall]/+page.server.js b/packages/sdks/snippets/sveltekit/src/routes/[...catchall]/+page.server.js index d979ada725e..47baeec866d 100644 --- a/packages/sdks/snippets/sveltekit/src/routes/[...catchall]/+page.server.js +++ b/packages/sdks/snippets/sveltekit/src/routes/[...catchall]/+page.server.js @@ -2,7 +2,7 @@ * Quickstart snippet * snippets/sveltekit/src/routes/[...catchall]/+page.server.js */ -import { fetchOneEntry, getBuilderSearchParams } from '@builder.io/sdk-svelte'; +import { fetchOneEntry } from '@builder.io/sdk-svelte'; /** @type {import('../$types').PageServerLoad} */ export async function load(event) { @@ -10,7 +10,6 @@ export async function load(event) { const content = await fetchOneEntry({ model: 'page', apiKey: 'ee9f13b4981e489a9a1209887695ef2b', // TO DO: Add your Public API Key - options: getBuilderSearchParams(event.url.searchParams), userAttributes: { urlPath: event.url.pathname || '/', }, diff --git a/packages/sdks/snippets/sveltekit/src/routes/announcements/[...catchall]/+page.server.js b/packages/sdks/snippets/sveltekit/src/routes/announcements/[...catchall]/+page.server.js index 57a9b6b4951..dfc7ccc423e 100644 --- a/packages/sdks/snippets/sveltekit/src/routes/announcements/[...catchall]/+page.server.js +++ b/packages/sdks/snippets/sveltekit/src/routes/announcements/[...catchall]/+page.server.js @@ -3,7 +3,7 @@ * https://www.builder.io/c/blueprints/announcement-bar * src/routes/announcements/[...catchall]/+page.server.js */ -import { fetchOneEntry, getBuilderSearchParams } from '@builder.io/sdk-svelte'; +import { fetchOneEntry } from '@builder.io/sdk-svelte'; /** @type {import('../../$types').PageServerLoad} */ export async function load(event) { @@ -11,7 +11,7 @@ export async function load(event) { const content = await fetchOneEntry({ model: 'announcement-bar', apiKey: 'ee9f13b4981e489a9a1209887695ef2b', // TO DO: Add your Public API Key - options: getBuilderSearchParams(event.url.searchParams), + userAttributes: { urlPath: event.url.pathname || '/', }, diff --git a/packages/sdks/snippets/vue/src/views/AnnouncementBar.vue b/packages/sdks/snippets/vue/src/views/AnnouncementBar.vue index d3c54887edb..b05b2966abf 100644 --- a/packages/sdks/snippets/vue/src/views/AnnouncementBar.vue +++ b/packages/sdks/snippets/vue/src/views/AnnouncementBar.vue @@ -6,7 +6,6 @@ import { Content, type BuilderContent, fetchOneEntry, - getBuilderSearchParams, isPreviewing, } from '@builder.io/sdk-vue'; import { onMounted, ref } from 'vue'; @@ -20,7 +19,6 @@ onMounted(async () => { content.value = await fetchOneEntry({ model, apiKey, - options: getBuilderSearchParams(new URL(location.href).searchParams), userAttributes: { urlPath: window.location.pathname, }, diff --git a/packages/sdks/snippets/vue/src/views/QuickStart.vue b/packages/sdks/snippets/vue/src/views/QuickStart.vue index 0e5981593cf..f2b8ceb67d2 100644 --- a/packages/sdks/snippets/vue/src/views/QuickStart.vue +++ b/packages/sdks/snippets/vue/src/views/QuickStart.vue @@ -20,7 +20,7 @@ onMounted(async () => { content.value = await fetchOneEntry({ model, apiKey, - options: getBuilderSearchParams(new URL(location.href).searchParams), + userAttributes: { urlPath: window.location.pathname, }, From c657b3e83e80eef036757c6d27574a85ac7bea57 Mon Sep 17 00:00:00 2001 From: Sami Jaber Date: Thu, 6 Mar 2025 15:39:24 -0400 Subject: [PATCH 02/16] =?UTF-8?q?=F0=9F=91=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/functions/get-builder-search-params/index.ts | 10 ++++++++-- packages/sdks/src/functions/is-previewing.ts | 10 ++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/sdks/src/functions/get-builder-search-params/index.ts b/packages/sdks/src/functions/get-builder-search-params/index.ts index 8bdefdee125..54042c11117 100644 --- a/packages/sdks/src/functions/get-builder-search-params/index.ts +++ b/packages/sdks/src/functions/get-builder-search-params/index.ts @@ -6,8 +6,14 @@ const BUILDER_SEARCHPARAMS_PREFIX = 'builder.'; const BUILDER_OPTIONS_PREFIX = 'options.'; /** - * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are - * relevant to the Builder SDK. + * Receives a `URLSearchParams` object or a regular query object, and returns + * the subset of query params that are relevant to the Builder SDK. + * + * Outputs a key-value object to be passed to `fetchOneEntry` or `fetchEntries` + * functions as the `options` argument. + * + * NOTE: This function is generally not needed. Instead, it is recommended to use `isPreviewing()` + * to check if the current page requires previewed content. * * @returns */ diff --git a/packages/sdks/src/functions/is-previewing.ts b/packages/sdks/src/functions/is-previewing.ts index 96a76eddf08..f3a35ed03ae 100644 --- a/packages/sdks/src/functions/is-previewing.ts +++ b/packages/sdks/src/functions/is-previewing.ts @@ -2,6 +2,16 @@ import type { Search } from '../helpers/search/search.js'; import { getSearchString } from '../helpers/search/search.js'; import { isBrowser } from './is-browser.js'; +/** + * Checks the current URL's search parameters to see if it is attempting to + * preview Builder Content. + * + * When called on the client, it uses `window.location.search`. + * When called on the server (SSR), it requires a `search` argument. + * + * @param _search - The search parameters to check. Can be a URL string (containing the search parameters), `URLSearchParams`, or a key-value object containing the search parameters. + * @returns `true` if the current page is being previewed, `false` otherwise. + */ export function isPreviewing(_search?: Search) { const search = _search || (isBrowser() ? window.location.search : undefined); From 14fd25938bcae31dda7aebeb7444a433a1ab35f2 Mon Sep 17 00:00:00 2001 From: Sami Jaber Date: Thu, 6 Mar 2025 15:39:48 -0400 Subject: [PATCH 03/16] =?UTF-8?q?=F0=9F=91=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/brown-avocados-dream.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 .changeset/brown-avocados-dream.md diff --git a/.changeset/brown-avocados-dream.md b/.changeset/brown-avocados-dream.md new file mode 100644 index 00000000000..90aacc3970c --- /dev/null +++ b/.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` From b499470d2e92e843d7491cb2baace1017eba2270 Mon Sep 17 00:00:00 2001 From: Sami Jaber Date: Thu, 6 Mar 2025 15:41:34 -0400 Subject: [PATCH 04/16] =?UTF-8?q?=F0=9F=91=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/sdks/src/functions/is-previewing.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/sdks/src/functions/is-previewing.ts b/packages/sdks/src/functions/is-previewing.ts index f3a35ed03ae..3f4ffe70e1f 100644 --- a/packages/sdks/src/functions/is-previewing.ts +++ b/packages/sdks/src/functions/is-previewing.ts @@ -9,21 +9,22 @@ import { isBrowser } from './is-browser.js'; * When called on the client, it uses `window.location.search`. * When called on the server (SSR), it requires a `search` argument. * - * @param _search - The search parameters to check. Can be a URL string (containing the search parameters), `URLSearchParams`, or a key-value object containing the search parameters. + * @param search - The search parameters to check. Can be a URL string (containing the search parameters), `URLSearchParams`, or a key-value object containing the search parameters. * @returns `true` if the current page is being previewed, `false` otherwise. */ -export function isPreviewing(_search?: Search) { - const search = _search || (isBrowser() ? window.location.search : undefined); +export function isPreviewing(search?: Search) { + const searchToUse = + search || (isBrowser() ? window.location.search : undefined); /** * If this function is called on the server without an explicit `search` argument, * then it can't check if the user is previewing, and will return `false`. */ - if (!search) { + if (!searchToUse) { return false; } - const normalizedSearch = getSearchString(search); + const normalizedSearch = getSearchString(searchToUse); return Boolean(normalizedSearch.indexOf('builder.preview=') !== -1); } From 700dfebfd7154de7f98d047f840b8268e77ef80f Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Sat, 17 May 2025 21:35:38 -0500 Subject: [PATCH 05/16] merge conflicts --- .../src/app/catch-all/catch-all.resolver.ts | 16 ++++--- .../advanced-child.component.ts | 3 +- .../announcement-bar.component.ts | 12 +++-- .../blog-article/blog-article.component.ts | 16 ++++--- .../src/app/catch-all/catch-all.component.ts | 9 ++-- .../custom-child/custom-child.component.ts | 9 ++-- .../editable-regions.component.ts | 3 +- .../live-preview/live-preview.component.ts | 27 ++++++++++- .../src/app/nav-bar/nav-bar.component.ts | 10 +++- .../product-details.component.ts | 24 ++++++---- .../product-editorial.component.ts | 8 +++- .../snippets/hydrogen/app/components/app.tsx | 6 +-- .../sdks/snippets/nuxt/pages/[...app].vue | 1 - .../nuxt/pages/announcements/[...app].vue | 1 - packages/sdks/snippets/solidjs/src/App.tsx | 5 +- .../src/components/AnnouncementBar.tsx | 5 +- .../src/components/AnnouncementBar.svelte | 7 ++- .../svelte/src/components/CatchAll.svelte | 48 +++++++++++-------- .../svelte/src/components/LivePreview.svelte | 47 +++++++++++++++--- .../snippets/vue/src/views/QuickStart.vue | 2 - 20 files changed, 175 insertions(+), 84 deletions(-) diff --git a/packages/sdks/snippets/angular-16-ssr/src/app/catch-all/catch-all.resolver.ts b/packages/sdks/snippets/angular-16-ssr/src/app/catch-all/catch-all.resolver.ts index 7acdfff0e5d..f27cec61078 100644 --- a/packages/sdks/snippets/angular-16-ssr/src/app/catch-all/catch-all.resolver.ts +++ b/packages/sdks/snippets/angular-16-ssr/src/app/catch-all/catch-all.resolver.ts @@ -1,15 +1,19 @@ import type { ActivatedRouteSnapshot, ResolveFn } from '@angular/router'; -import { - BuilderContent, - fetchOneEntry, - getBuilderSearchParams, -} from '@builder.io/sdk-angular'; +import { fetchOneEntry, isPreviewing } from '@builder.io/sdk-angular'; export const catchAllResolver: ResolveFn = ( route: ActivatedRouteSnapshot ) => { const urlPath = `/${route.url.join('/')}`; - const searchParams = getBuilderSearchParams(route.queryParams); + const searchParams = route.queryParams; + + const canShowContent = isPreviewing(searchParams); + + if (!canShowContent) { + return { + notFound: true, + }; + } return fetchOneEntry({ apiKey: 'ee9f13b4981e489a9a1209887695ef2b', diff --git a/packages/sdks/snippets/angular-16/src/app/advanced-child/advanced-child.component.ts b/packages/sdks/snippets/angular-16/src/app/advanced-child/advanced-child.component.ts index 1045366f240..6b36fbf4414 100644 --- a/packages/sdks/snippets/angular-16/src/app/advanced-child/advanced-child.component.ts +++ b/packages/sdks/snippets/angular-16/src/app/advanced-child/advanced-child.component.ts @@ -3,6 +3,7 @@ import { Component, type OnInit } from '@angular/core'; import { Content, fetchOneEntry, + isPreviewing, type BuilderContent, } from '@builder.io/sdk-angular'; import { @@ -43,6 +44,6 @@ export class AdvancedChildComponent implements OnInit { }, }); - this.notFound = !this.content; + this.notFound = !this.content && !isPreviewing(); } } diff --git a/packages/sdks/snippets/angular-16/src/app/announcement-bar/announcement-bar.component.ts b/packages/sdks/snippets/angular-16/src/app/announcement-bar/announcement-bar.component.ts index 5682c099527..be6e11f4bb1 100644 --- a/packages/sdks/snippets/angular-16/src/app/announcement-bar/announcement-bar.component.ts +++ b/packages/sdks/snippets/angular-16/src/app/announcement-bar/announcement-bar.component.ts @@ -9,6 +9,7 @@ import { Component } from '@angular/core'; import { Content, fetchOneEntry, + isPreviewing, type BuilderContent, } from '@builder.io/sdk-angular'; @@ -17,7 +18,7 @@ import { standalone: true, imports: [CommonModule, Content], template: ` - + + +
404 - Content not found
+
The rest of your page goes here
`, @@ -33,6 +37,7 @@ export class AnnouncementBarComponent { apiKey = 'ee9f13b4981e489a9a1209887695ef2b'; model = 'announcement-bar'; content: BuilderContent | null = null; + notFound = false; async ngOnInit() { const urlPath = window.location.pathname || ''; @@ -45,10 +50,7 @@ export class AnnouncementBarComponent { }, }); - if (!content) { - return; - } - this.content = content; + this.notFound = !content && !isPreviewing(); } } diff --git a/packages/sdks/snippets/angular-16/src/app/blog-article/blog-article.component.ts b/packages/sdks/snippets/angular-16/src/app/blog-article/blog-article.component.ts index 7bffe8dbf58..d65cc6568b3 100644 --- a/packages/sdks/snippets/angular-16/src/app/blog-article/blog-article.component.ts +++ b/packages/sdks/snippets/angular-16/src/app/blog-article/blog-article.component.ts @@ -3,6 +3,7 @@ import { Component } from '@angular/core'; import { Content, fetchOneEntry, + isPreviewing, type BuilderContent, } from '@builder.io/sdk-angular'; @@ -10,16 +11,18 @@ import { selector: 'app-blog-article', standalone: true, imports: [Content, CommonModule], - template: `
-

{{ article.data?.title }}

-

{{ article.data?.['blurb'] }}

- - -
`, + template: `
+

{{ article?.data?.title }}

+

{{ article?.data?.['blurb'] }}

+ + +
+
404 - Content not found
`, }) export class BlogArticleComponent { article: BuilderContent | null = null; model = 'blog-article'; + notFound = false; async ngOnInit() { this.article = await fetchOneEntry({ @@ -29,5 +32,6 @@ export class BlogArticleComponent { 'data.handle': 'new-product-line', }, }); + this.notFound = !this.article && !isPreviewing(); } } diff --git a/packages/sdks/snippets/angular-16/src/app/catch-all/catch-all.component.ts b/packages/sdks/snippets/angular-16/src/app/catch-all/catch-all.component.ts index 369ce1c3fc3..6e6dc1568bb 100644 --- a/packages/sdks/snippets/angular-16/src/app/catch-all/catch-all.component.ts +++ b/packages/sdks/snippets/angular-16/src/app/catch-all/catch-all.component.ts @@ -8,6 +8,7 @@ import { Component } from '@angular/core'; import { Content, fetchOneEntry, + isPreviewing, type BuilderContent, } from '@builder.io/sdk-angular'; @@ -16,7 +17,7 @@ import { standalone: true, imports: [Content, CommonModule], template: ` - + +
-
404 Not Found
`, }) @@ -39,9 +39,6 @@ export class CustomChildComponent implements OnInit { urlPath: window.location.pathname, }, }); - - if (!this.content) { - this.notFound = true; - } + this.notFound = !this.content && !isPreviewing(); } } diff --git a/packages/sdks/snippets/angular-16/src/app/editable-regions/editable-regions.component.ts b/packages/sdks/snippets/angular-16/src/app/editable-regions/editable-regions.component.ts index 8388112372d..674823d207f 100644 --- a/packages/sdks/snippets/angular-16/src/app/editable-regions/editable-regions.component.ts +++ b/packages/sdks/snippets/angular-16/src/app/editable-regions/editable-regions.component.ts @@ -3,6 +3,7 @@ import { Component, type OnInit } from '@angular/core'; import { Content, fetchOneEntry, + isPreviewing, type BuilderContent, } from '@builder.io/sdk-angular'; import { customColumnsInfo } from './custom-columns/custom-columns.component'; @@ -38,6 +39,6 @@ export class EditableRegionComponent implements OnInit { urlPath: window.location.pathname, }, }); - this.notFound = !this.content; + this.notFound = !this.content && !isPreviewing(); } } diff --git a/packages/sdks/snippets/angular-16/src/app/live-preview/live-preview.component.ts b/packages/sdks/snippets/angular-16/src/app/live-preview/live-preview.component.ts index 244da8b4683..7010d185dfb 100644 --- a/packages/sdks/snippets/angular-16/src/app/live-preview/live-preview.component.ts +++ b/packages/sdks/snippets/angular-16/src/app/live-preview/live-preview.component.ts @@ -2,31 +2,54 @@ import { CommonModule } from '@angular/common'; import type { OnDestroy, OnInit } from '@angular/core'; import { Component } from '@angular/core'; import type { BuilderContent } from '@builder.io/sdk-angular'; -import { subscribeToEditor } from '@builder.io/sdk-angular'; +import { + fetchOneEntry, + isPreviewing, + subscribeToEditor, +} from '@builder.io/sdk-angular'; @Component({ standalone: true, selector: 'app-live-preview', imports: [CommonModule], template: ` -
+
Loading Data...
+ +
Blog Title: {{ content.data?.title }}
Authored by: {{ content.data?.['author'] }}
Handle: {{ content.data?.['handle'] }}
+
404 - Content not found
`, }) export class LivePreviewComponent implements OnInit, OnDestroy { content: BuilderContent | null = null; + loading = true; + notFound = false; private unsubscribeFn: () => void = () => {}; ngOnInit(): void { + fetchOneEntry({ + model: 'blog-data', + apiKey: 'ee9f13b4981e489a9a1209887695ef2b', + userAttributes: { urlPath: this.router.url }, + }) + .then((data) => { + this.content = data; + this.notFound = !this.content && !isPreviewing(); + }) + .finally(() => { + this.loading = false; + }); + this.unsubscribeFn = subscribeToEditor({ model: 'blog-data', apiKey: 'ee9f13b4981e489a9a1209887695ef2b', callback: (updatedContent) => { this.content = updatedContent; + this.notFound = !this.content && !isPreviewing(); }, }); } diff --git a/packages/sdks/snippets/angular-16/src/app/nav-bar/nav-bar.component.ts b/packages/sdks/snippets/angular-16/src/app/nav-bar/nav-bar.component.ts index f49c004486e..cfaf9da2971 100644 --- a/packages/sdks/snippets/angular-16/src/app/nav-bar/nav-bar.component.ts +++ b/packages/sdks/snippets/angular-16/src/app/nav-bar/nav-bar.component.ts @@ -1,6 +1,10 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; -import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-angular'; +import { + fetchOneEntry, + isPreviewing, + type BuilderContent, +} from '@builder.io/sdk-angular'; import { NavLinksComponent } from './nav-links/nav-links.component'; @Component({ @@ -10,6 +14,7 @@ import { NavLinksComponent } from './nav-links/nav-links.component'; template: ` +
404 - Navigation not found
`, }) export class NavBarComponent { links: BuilderContent = { data: { links: [] } }; + notFound = false; async ngOnInit() { this.links = @@ -33,5 +40,6 @@ export class NavBarComponent { model: 'navigation-links', apiKey: 'ee9f13b4981e489a9a1209887695ef2b', })) || this.links; + this.notFound = !this.links?.data?.['links']?.length && !isPreviewing(); } } diff --git a/packages/sdks/snippets/angular-16/src/app/product-details/product-details.component.ts b/packages/sdks/snippets/angular-16/src/app/product-details/product-details.component.ts index eb5dfab769b..c65e355609c 100644 --- a/packages/sdks/snippets/angular-16/src/app/product-details/product-details.component.ts +++ b/packages/sdks/snippets/angular-16/src/app/product-details/product-details.component.ts @@ -1,33 +1,38 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; -import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-angular'; +import { + fetchOneEntry, + isPreviewing, + type BuilderContent, +} from '@builder.io/sdk-angular'; @Component({ selector: 'app-product-details', standalone: true, imports: [CommonModule], template: ` -
-

{{ productDetails.data?.['name'] }}

+
+

{{ productDetails?.data?.['name'] }}

-

{{ productDetails.data?.['collection'].value.data.copy }}

+

{{ productDetails?.data?.['collection'].value.data.copy }}

Price: - {{ productDetails.data?.['collection'].value.data.price }} + {{ productDetails?.data?.['collection'].value.data.price }}

-
-

Loading product details...

+
+

404 - Product not found

`, }) export class ProductDetailsComponent { productDetails: BuilderContent | null = null; apiKey: string = 'ee9f13b4981e489a9a1209887695ef2b'; + notFound = false; async ngOnInit() { this.productDetails = await fetchOneEntry({ @@ -37,5 +42,6 @@ export class ProductDetailsComponent { 'data.handle': 'jacket', }, }); + this.notFound = !this.productDetails && !isPreviewing(); } } diff --git a/packages/sdks/snippets/angular-16/src/app/product-editorial/product-editorial.component.ts b/packages/sdks/snippets/angular-16/src/app/product-editorial/product-editorial.component.ts index c5670e982a4..bcce8b4cf3b 100644 --- a/packages/sdks/snippets/angular-16/src/app/product-editorial/product-editorial.component.ts +++ b/packages/sdks/snippets/angular-16/src/app/product-editorial/product-editorial.component.ts @@ -3,6 +3,7 @@ import { Component } from '@angular/core'; import { Content, fetchOneEntry, + isPreviewing, type BuilderContent, } from '@builder.io/sdk-angular'; import { FooterComponent } from './footer/footer.component'; @@ -24,7 +25,10 @@ import { ProductInfoComponent } from './product-info/product-info.component'; - + + + +
404
`, @@ -33,11 +37,13 @@ export class ProductEditorialComponent { product: any; editorial: BuilderContent | null = null; productId?: string; + notFound = false; async ngOnInit() { this.productId = window.location.pathname.split('/').pop() || ''; if (this.productId) { await this.fetchProductAndEditorial(); + this.notFound = !this.editorial && !isPreviewing(); } } diff --git a/packages/sdks/snippets/hydrogen/app/components/app.tsx b/packages/sdks/snippets/hydrogen/app/components/app.tsx index 25e0b23ce6b..d6b40c29460 100644 --- a/packages/sdks/snippets/hydrogen/app/components/app.tsx +++ b/packages/sdks/snippets/hydrogen/app/components/app.tsx @@ -3,11 +3,7 @@ * snippets/hydrogen/app/components/app.tsx */ -import { - Content, - fetchOneEntry, - getBuilderSearchParams, -} from '@builder.io/sdk-react'; +import {Content, fetchOneEntry} from '@builder.io/sdk-react'; import type {LoaderFunction} from '@remix-run/node'; import {useLoaderData} from '@remix-run/react'; import {useNonce} from '@shopify/hydrogen'; diff --git a/packages/sdks/snippets/nuxt/pages/[...app].vue b/packages/sdks/snippets/nuxt/pages/[...app].vue index d610881ef21..661d6dfee07 100644 --- a/packages/sdks/snippets/nuxt/pages/[...app].vue +++ b/packages/sdks/snippets/nuxt/pages/[...app].vue @@ -5,7 +5,6 @@ import { Content, fetchOneEntry, - getBuilderSearchParams, isPreviewing, } from '@builder.io/sdk-vue'; import { ref } from 'vue'; diff --git a/packages/sdks/snippets/nuxt/pages/announcements/[...app].vue b/packages/sdks/snippets/nuxt/pages/announcements/[...app].vue index 670e45e69a0..1e057f37615 100644 --- a/packages/sdks/snippets/nuxt/pages/announcements/[...app].vue +++ b/packages/sdks/snippets/nuxt/pages/announcements/[...app].vue @@ -7,7 +7,6 @@ import { Content, fetchOneEntry, isPreviewing, - getBuilderSearchParams, } from '@builder.io/sdk-vue'; import { ref } from 'vue'; diff --git a/packages/sdks/snippets/solidjs/src/App.tsx b/packages/sdks/snippets/solidjs/src/App.tsx index 7dd4d00a24d..ae45a1f1558 100644 --- a/packages/sdks/snippets/solidjs/src/App.tsx +++ b/packages/sdks/snippets/solidjs/src/App.tsx @@ -5,6 +5,7 @@ import { Content, fetchOneEntry, + isPreviewing, type BuilderContent, } from '@builder.io/sdk-solid'; import { createEffect, createSignal } from 'solid-js'; @@ -13,6 +14,7 @@ const BUILDER_API_KEY = 'ee9f13b4981e489a9a1209887695ef2b'; function App() { const [content, setContent] = createSignal(null); + const [canShowContent, setCanShowContent] = createSignal(false); createEffect(() => { fetchOneEntry({ @@ -23,12 +25,13 @@ function App() { }, }).then((data: any) => { setContent(data); + setCanShowContent(data ? true : isPreviewing()); }); }); return ( <> - {content() ? ( + {canShowContent() ? ( ) : (
Not found
diff --git a/packages/sdks/snippets/solidjs/src/components/AnnouncementBar.tsx b/packages/sdks/snippets/solidjs/src/components/AnnouncementBar.tsx index b38e8a3d603..fd9023dd514 100644 --- a/packages/sdks/snippets/solidjs/src/components/AnnouncementBar.tsx +++ b/packages/sdks/snippets/solidjs/src/components/AnnouncementBar.tsx @@ -6,6 +6,7 @@ import { Content, fetchOneEntry, + isPreviewing, type BuilderContent, } from '@builder.io/sdk-solid'; import { createEffect, createSignal } from 'solid-js'; @@ -15,6 +16,7 @@ const MODEL = 'announcement-bar'; function AnnouncementBar() { const [content, setContent] = createSignal(null); + const [canShowContent, setCanShowContent] = createSignal(false); createEffect(() => { fetchOneEntry({ @@ -25,12 +27,13 @@ function AnnouncementBar() { }, }).then((data: any) => { setContent(data); + setCanShowContent(data ? true : isPreviewing()); }); }); return ( <> - {content() && ( + {canShowContent() && ( )} diff --git a/packages/sdks/snippets/svelte/src/components/AnnouncementBar.svelte b/packages/sdks/snippets/svelte/src/components/AnnouncementBar.svelte index 23aac27d96e..d23d56776f8 100644 --- a/packages/sdks/snippets/svelte/src/components/AnnouncementBar.svelte +++ b/packages/sdks/snippets/svelte/src/components/AnnouncementBar.svelte @@ -7,12 +7,14 @@ Content, fetchOneEntry, type BuilderContent, + isPreviewing, } from '@builder.io/sdk-svelte'; let apiKey = 'ee9f13b4981e489a9a1209887695ef2b'; let model = 'announcement-bar'; let announcementBar: BuilderContent | null = null; + let canShowContent = false; async function fetchContent() { announcementBar = await fetchOneEntry({ @@ -22,16 +24,17 @@ urlPath: window.location.pathname, }, }); + canShowContent = announcementBar ? true : isPreviewing(); } fetchContent();
- {#if announcementBar} + {#if canShowContent} {/if} - +
The rest of your page goes here
diff --git a/packages/sdks/snippets/svelte/src/components/CatchAll.svelte b/packages/sdks/snippets/svelte/src/components/CatchAll.svelte index 880b28dc3ca..5c87e75fc5d 100644 --- a/packages/sdks/snippets/svelte/src/components/CatchAll.svelte +++ b/packages/sdks/snippets/svelte/src/components/CatchAll.svelte @@ -2,35 +2,41 @@ - {content?.data?.title || "Unpublished"} + {content?.data?.title || 'Unpublished'}
- {#if content} - - {:else} - Content Not Found - {/if} + {#if canShowContent} + + {:else} + Content Not Found + {/if}
- \ No newline at end of file diff --git a/packages/sdks/snippets/svelte/src/components/LivePreview.svelte b/packages/sdks/snippets/svelte/src/components/LivePreview.svelte index 59e6e3599dc..cd3b8d2cd51 100644 --- a/packages/sdks/snippets/svelte/src/components/LivePreview.svelte +++ b/packages/sdks/snippets/svelte/src/components/LivePreview.svelte @@ -1,11 +1,38 @@ -{#if content} -
-
Blog Title: {content.data?.title}
-
Authored by: {content.data?.author}
-
Handle: {content.data?.handle}
-
+{#if isLoading && !content} +
Loading...
{/if} + +
+ {#if canShowContent} +
+
Blog Title: {content?.data?.title}
+
Authored by: {content?.data?.author}
+
Handle: {content?.data?.handle}
+
+ {/if} +
diff --git a/packages/sdks/snippets/vue/src/views/QuickStart.vue b/packages/sdks/snippets/vue/src/views/QuickStart.vue index f2b8ceb67d2..7e80967e22a 100644 --- a/packages/sdks/snippets/vue/src/views/QuickStart.vue +++ b/packages/sdks/snippets/vue/src/views/QuickStart.vue @@ -6,7 +6,6 @@ import { Content, type BuilderContent, fetchOneEntry, - getBuilderSearchParams, isPreviewing, } from '@builder.io/sdk-vue'; import { onMounted, ref } from 'vue'; @@ -20,7 +19,6 @@ onMounted(async () => { content.value = await fetchOneEntry({ model, apiKey, - userAttributes: { urlPath: window.location.pathname, }, From 808fd915a3d9fb06614d1df8655e2e0043b15b31 Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Tue, 3 Jun 2025 15:35:20 -0500 Subject: [PATCH 06/16] angular ssr init --- .../src/app/advanced-child/advanced-child.component.ts | 8 +++++++- .../app/announcement-bar/announcement-bar.component.ts | 9 ++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/sdks/snippets/angular-16-ssr/src/app/advanced-child/advanced-child.component.ts b/packages/sdks/snippets/angular-16-ssr/src/app/advanced-child/advanced-child.component.ts index 4d994e85911..733f351d20f 100644 --- a/packages/sdks/snippets/angular-16-ssr/src/app/advanced-child/advanced-child.component.ts +++ b/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, @@ -36,6 +40,8 @@ export class AdvancedChildComponent implements OnInit { ngOnInit() { this.route.data.subscribe((data: any) => { this.content = data.content; + const searchParams = this.route.snapshot.queryParams; + this.notFound = !this.content && !isPreviewing(searchParams); }); } } diff --git a/packages/sdks/snippets/angular-16-ssr/src/app/announcement-bar/announcement-bar.component.ts b/packages/sdks/snippets/angular-16-ssr/src/app/announcement-bar/announcement-bar.component.ts index 447b0fdacb9..57d09ef0f4d 100644 --- a/packages/sdks/snippets/angular-16-ssr/src/app/announcement-bar/announcement-bar.component.ts +++ b/packages/sdks/snippets/angular-16-ssr/src/app/announcement-bar/announcement-bar.component.ts @@ -7,7 +7,11 @@ import { CommonModule } from '@angular/common'; import { Component } 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'; @Component({ selector: 'app-announcement-bar', @@ -30,12 +34,15 @@ export class AnnouncementBarComponent { apiKey = 'ee9f13b4981e489a9a1209887695ef2b'; model = 'announcement-bar'; content: BuilderContent | null = null; + notFound = false; constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { this.activatedRoute.data.subscribe((data: any) => { this.content = data.content; + const searchParams = this.activatedRoute.snapshot.queryParams; + this.notFound = !this.content && !isPreviewing(searchParams); }); } } From 6c94acd410394b87dc84f79e322872d310ef426b Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Tue, 3 Jun 2025 16:03:35 -0500 Subject: [PATCH 07/16] add support for nextjs with getBuilderSearchParams --- .../sdks/snippets/nextjs-sdk-next-app/app/[[...slug]]/page.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/sdks/snippets/nextjs-sdk-next-app/app/[[...slug]]/page.tsx b/packages/sdks/snippets/nextjs-sdk-next-app/app/[[...slug]]/page.tsx index 68ea91c14a3..2dcb914c6b0 100644 --- a/packages/sdks/snippets/nextjs-sdk-next-app/app/[[...slug]]/page.tsx +++ b/packages/sdks/snippets/nextjs-sdk-next-app/app/[[...slug]]/page.tsx @@ -6,6 +6,7 @@ import { Content, fetchOneEntry, + getBuilderSearchParams, isPreviewing, } from '@builder.io/sdk-react-nextjs'; @@ -25,6 +26,7 @@ export default async function Page(props: PageProps) { apiKey: PUBLIC_API_KEY, model: 'page', userAttributes: { urlPath }, + options: getBuilderSearchParams(props.searchParams), }); const canShowContent = content || isPreviewing(props.searchParams); From d4f1ad5e2664fb4ffefd422344696bd16c7a5bf7 Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Tue, 3 Jun 2025 16:17:45 -0500 Subject: [PATCH 08/16] hydrogen ssr init --- .../sdks/snippets/hydrogen/app/components/app.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/sdks/snippets/hydrogen/app/components/app.tsx b/packages/sdks/snippets/hydrogen/app/components/app.tsx index d6b40c29460..e5661c1e472 100644 --- a/packages/sdks/snippets/hydrogen/app/components/app.tsx +++ b/packages/sdks/snippets/hydrogen/app/components/app.tsx @@ -3,7 +3,7 @@ * snippets/hydrogen/app/components/app.tsx */ -import {Content, fetchOneEntry} from '@builder.io/sdk-react'; +import {Content, fetchOneEntry, isPreviewing} from '@builder.io/sdk-react'; import type {LoaderFunction} from '@remix-run/node'; import {useLoaderData} from '@remix-run/react'; import {useNonce} from '@shopify/hydrogen'; @@ -23,7 +23,7 @@ export const builderLoader: LoaderFunction = async ({params, request}) => { urlPath: pathname, }, }); - return {content, model}; + return {content, model, isPreviewing: isPreviewing(url.searchParams)}; } catch (e) { console.error(e); return {content: null}; @@ -31,12 +31,16 @@ export const builderLoader: LoaderFunction = async ({params, request}) => { }; export default function BuilderPage() { - const {content, model} = useLoaderData<{content: any; model: string}>(); + const {content, model, isPreviewing} = useLoaderData<{ + content: any; + model: string; + isPreviewing: boolean; + }>(); const nonce = useNonce(); return (
- {content && ( + {content && !isPreviewing && ( Date: Tue, 3 Jun 2025 16:32:12 -0500 Subject: [PATCH 09/16] hydrogen ssr fix --- .../sdks/snippets/hydrogen/app/components/app.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/sdks/snippets/hydrogen/app/components/app.tsx b/packages/sdks/snippets/hydrogen/app/components/app.tsx index e5661c1e472..c76e55b6b23 100644 --- a/packages/sdks/snippets/hydrogen/app/components/app.tsx +++ b/packages/sdks/snippets/hydrogen/app/components/app.tsx @@ -23,7 +23,7 @@ export const builderLoader: LoaderFunction = async ({params, request}) => { urlPath: pathname, }, }); - return {content, model, isPreviewing: isPreviewing(url.searchParams)}; + return {content, model, searchParams: Object.fromEntries(url.searchParams)}; } catch (e) { console.error(e); return {content: null}; @@ -31,24 +31,27 @@ export const builderLoader: LoaderFunction = async ({params, request}) => { }; export default function BuilderPage() { - const {content, model, isPreviewing} = useLoaderData<{ + const {content, model, searchParams} = useLoaderData<{ content: any; model: string; - isPreviewing: boolean; + searchParams: Record; }>(); const nonce = useNonce(); + const canShowContent = content || isPreviewing(searchParams); + return (
- {content && !isPreviewing && ( + {canShowContent ? ( + ) : ( +
404
)} -
The rest of your page goes here
); } From 5f1408f0e08b93df325c68990d2f6344b4824e23 Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Tue, 3 Jun 2025 17:37:29 -0500 Subject: [PATCH 10/16] ssr init for sveltekit, qwik, nuxt --- .../hydrogen/app/routes/advanced-child.tsx | 18 +++++++---- .../hydrogen/app/routes/blogs.$handle.tsx | 17 +++++++--- .../hydrogen/app/routes/custom-child.tsx | 20 +++++++----- .../hydrogen/app/routes/editable-region.tsx | 18 +++++++---- .../snippets/hydrogen/app/routes/home.tsx | 14 +++++--- .../snippets/nuxt/pages/advanced-child.vue | 6 +++- .../snippets/nuxt/pages/blogs/[handle].vue | 8 +++-- .../sdks/snippets/nuxt/pages/custom-child.vue | 6 +++- .../snippets/nuxt/pages/editable-region.vue | 32 +++++++++++-------- packages/sdks/snippets/nuxt/pages/home.vue | 6 +++- .../src/routes/advanced-child/index.tsx | 21 ++++++++---- .../src/routes/blogs/[handle]/index.tsx | 32 +++++++++++++------ .../src/routes/custom-child/index.tsx | 28 ++++++++-------- .../src/routes/editable-region/index.tsx | 23 +++++++++---- .../qwik-city/src/routes/home/index.tsx | 21 +++++++++--- .../src/routes/[...catchall]/+page.svelte | 15 +++------ .../src/routes/advanced-child/+page.svelte | 2 +- .../announcements/[...catchall]/+page.svelte | 2 +- .../src/routes/blogs/[handle]/+page.svelte | 2 +- .../src/routes/custom-child/+page.svelte | 2 +- .../src/routes/editable-region/+page.svelte | 2 +- .../sveltekit/src/routes/home/+page.svelte | 2 +- 22 files changed, 191 insertions(+), 106 deletions(-) diff --git a/packages/sdks/snippets/hydrogen/app/routes/advanced-child.tsx b/packages/sdks/snippets/hydrogen/app/routes/advanced-child.tsx index 423e6a852d7..4f202e84611 100644 --- a/packages/sdks/snippets/hydrogen/app/routes/advanced-child.tsx +++ b/packages/sdks/snippets/hydrogen/app/routes/advanced-child.tsx @@ -6,29 +6,33 @@ import {customTabsInfo} from '~/components/CustomTabs'; const MODEL_NAME = 'advanced-child'; const API_KEY = 'ee9f13b4981e489a9a1209887695ef2b'; -export const loader: LoaderFunction = async ({params}) => { +export const loader: LoaderFunction = async ({params, request}) => { + const url = new URL(request.url); const content = await fetchOneEntry({ model: MODEL_NAME, apiKey: API_KEY, userAttributes: {urlPath: params.pathname}, }); - return {content}; + return {content, searchParams: Object.fromEntries(url.searchParams)}; }; export default function AdvancedChildRoute() { - const {content} = useLoaderData(); + const {content, searchParams} = useLoaderData<{ + content: any; + searchParams: Record; + }>(); - if (!content && !isPreviewing()) { - return
404
; - } + const canShowContent = content || isPreviewing(searchParams); - return ( + return canShowContent ? ( + ) : ( +
404
); } diff --git a/packages/sdks/snippets/hydrogen/app/routes/blogs.$handle.tsx b/packages/sdks/snippets/hydrogen/app/routes/blogs.$handle.tsx index 4d7b544a37c..8f9fb2b7f24 100644 --- a/packages/sdks/snippets/hydrogen/app/routes/blogs.$handle.tsx +++ b/packages/sdks/snippets/hydrogen/app/routes/blogs.$handle.tsx @@ -5,25 +5,32 @@ import {fetchOneEntry, Content, isPreviewing} from '@builder.io/sdk-react'; const MODEL = 'blog-article'; const API_KEY = 'ee9f13b4981e489a9a1209887695ef2b'; -export const loader = async ({params}: LoaderFunctionArgs) => { +export const loader = async ({params, request}: LoaderFunctionArgs) => { + const url = new URL(request.url); const content = await fetchOneEntry({ model: MODEL, apiKey: API_KEY, query: {'data.handle': params.handle}, }); - return {content}; + return {content, searchParams: Object.fromEntries(url.searchParams)}; }; + export default function BlogArticlePage() { - const {content} = useLoaderData<{content: any}>(); + const {content, searchParams} = useLoaderData<{ + content: any; + searchParams: Record; + }>(); - if (!content && !isPreviewing()) return
404
; + const canShowContent = content || isPreviewing(searchParams); - return ( + return canShowContent ? (

{content.data?.title}

{content.data?.blurb}

{content.data?.title}
+ ) : ( +
404
); } diff --git a/packages/sdks/snippets/hydrogen/app/routes/custom-child.tsx b/packages/sdks/snippets/hydrogen/app/routes/custom-child.tsx index f828a1bd840..d7b068300ce 100644 --- a/packages/sdks/snippets/hydrogen/app/routes/custom-child.tsx +++ b/packages/sdks/snippets/hydrogen/app/routes/custom-child.tsx @@ -1,4 +1,4 @@ -import type {LoaderFunction, LoaderFunctionArgs} from '@remix-run/node'; +import type {LoaderFunction} from '@remix-run/node'; import {useLoaderData} from '@remix-run/react'; import {Content, fetchOneEntry, isPreviewing} from '@builder.io/sdk-react'; import {customHeroInfo} from '~/components/CustomHero'; @@ -6,7 +6,8 @@ import {customHeroInfo} from '~/components/CustomHero'; const MODEL_NAME = 'custom-child'; const API_KEY = 'ee9f13b4981e489a9a1209887695ef2b'; -export const loader: LoaderFunction = async ({params}) => { +export const loader: LoaderFunction = async ({params, request}) => { + const url = new URL(request.url); const content = await fetchOneEntry({ model: MODEL_NAME, apiKey: API_KEY, @@ -14,21 +15,24 @@ export const loader: LoaderFunction = async ({params}) => { urlPath: params.pathname, }, }); - return {content}; + return {content, searchParams: Object.fromEntries(url.searchParams)}; }; export default function CustomChildRoute() { - const {content} = useLoaderData(); + const {content, searchParams} = useLoaderData<{ + content: any; + searchParams: Record; + }>(); - if (!content && !isPreviewing()) { - return
404
; - } + const canShowContent = content || isPreviewing(searchParams); - return ( + return canShowContent ? ( + ) : ( +
404
); } diff --git a/packages/sdks/snippets/hydrogen/app/routes/editable-region.tsx b/packages/sdks/snippets/hydrogen/app/routes/editable-region.tsx index 86703daf74a..13693029778 100644 --- a/packages/sdks/snippets/hydrogen/app/routes/editable-region.tsx +++ b/packages/sdks/snippets/hydrogen/app/routes/editable-region.tsx @@ -6,29 +6,33 @@ import {customColumnsInfo} from '~/components/CustomColumns'; const MODEL_NAME = 'editable-regions'; const API_KEY = 'ee9f13b4981e489a9a1209887695ef2b'; -export const loader: LoaderFunction = async ({params}) => { +export const loader: LoaderFunction = async ({params, request}) => { + const url = new URL(request.url); const content = await fetchOneEntry({ model: MODEL_NAME, apiKey: API_KEY, userAttributes: {urlPath: params.pathname}, }); - return {content}; + return {content, searchParams: Object.fromEntries(url.searchParams)}; }; export default function EditableRegionsRoute() { - const {content} = useLoaderData(); + const {content, searchParams} = useLoaderData<{ + content: any; + searchParams: Record; + }>(); - if (!content && !isPreviewing()) { - return
404
; - } + const canShowContent = content || isPreviewing(searchParams); - return ( + return canShowContent ? ( + ) : ( +
404
); } diff --git a/packages/sdks/snippets/hydrogen/app/routes/home.tsx b/packages/sdks/snippets/hydrogen/app/routes/home.tsx index 6a18d58a242..ec065ee3186 100644 --- a/packages/sdks/snippets/hydrogen/app/routes/home.tsx +++ b/packages/sdks/snippets/hydrogen/app/routes/home.tsx @@ -5,18 +5,24 @@ import {useLoaderData} from '@remix-run/react'; const model = 'homepage'; const apiKey = 'ee9f13b4981e489a9a1209887695ef2b'; -export const loader: LoaderFunction = async () => { +export const loader: LoaderFunction = async ({request}) => { + const url = new URL(request.url); const content = await fetchOneEntry({ model: model, apiKey: apiKey, }); - return {content}; + return {content, searchParams: Object.fromEntries(url.searchParams)}; }; export default function Home() { - const {content} = useLoaderData(); + const {content, searchParams} = useLoaderData<{ + content: any; + searchParams: Record; + }>(); - return content || isPreviewing() ? ( + const canShowContent = content || isPreviewing(searchParams); + + return canShowContent ? ( ) : (
404
diff --git a/packages/sdks/snippets/nuxt/pages/advanced-child.vue b/packages/sdks/snippets/nuxt/pages/advanced-child.vue index be5ff612ce1..359988369c2 100644 --- a/packages/sdks/snippets/nuxt/pages/advanced-child.vue +++ b/packages/sdks/snippets/nuxt/pages/advanced-child.vue @@ -7,6 +7,10 @@ const route = useRoute(); const model = 'advanced-child'; const apiKey = 'ee9f13b4981e489a9a1209887695ef2b'; +const searchParams = process.server + ? new URLSearchParams(useRequestURL().search) + : new URLSearchParams(window.location.search); + const { data: content, pending } = await useAsyncData( `builder-${model}-${route.path}`, () => @@ -23,7 +27,7 @@ const { data: content, pending } = await useAsyncData(