add integration with @builder.io/sdk-qwik

.vscode/launch.json

@@ -13,5 +13,15 @@
         "action": "debugWithChrome"
       }
     },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome",
+      "url": "http://localhost:5001/",
+      "runtimeArgs": [
+        "--disable-web-security"
+      ],
+      "webRoot": "${workspaceRoot}"
+    }
   ]
 }

apps/hero/.env

@@ -0,0 +1,2 @@
+// ggignore -> this can be public
+VITE_BUILDER_PUBLIC_API_KEY='e7da178693a8431281a71e6568dd9d66'

apps/hero/package.json

@@ -24,6 +24,7 @@
 	},
 	"devDependencies": {
 		"@builder.io/qwik": "^0.15.2",
-		"@builder.io/qwik-city": "^0.0.128"
+		"@builder.io/qwik-city": "^0.0.128",
+		"@builder.io/sdk-qwik": "^0.0.36"
 	}
 }

apps/hero/src/routes/[heroId]/index.tsx

@@ -0,0 +1,37 @@
+import { component$, Resource, useResource$ } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
+import { getBuilderSearchParams, getContent, RenderContent } from '@builder.io/sdk-qwik';
+
+export default component$(() => {
+	const location = useLocation();
+	const builderContentRsrc = useResource$<any>(() => {
+		return getContent({
+			model: 'page',
+			apiKey: import.meta.env.VITE_BUILDER_PUBLIC_API_KEY || '',
+			options: getBuilderSearchParams(location.query),
+			userAttributes: {
+				urlPath: location.pathname || '/',
+			},
+		});
+	});
+
+	return (
+		<div class="my-4 mx-auto">
+			<Resource
+				value={builderContentRsrc}
+				onPending={() => <div>Loading...</div>}
+				onResolved={content =>
+					content ? (
+						<RenderContent
+							model="page"
+							content={content}
+							apiKey={import.meta.env.VITE_BUILDER_PUBLIC_API_KEY || ''}
+						/>
+					) : (
+						<div>your content here</div>
+					)
+				}
+			/>
+		</div>
+	);
+});

apps/host/src/components/remote-ssr.tsx

@@ -1,12 +1,15 @@
 import { component$, SSRStream, SSRStreamBlock } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
 import type { RemoteData } from '../../../../libs/shared/remotes';
 
 export interface Props {
 	remote: RemoteData;
 }
 
-export default component$((props: Props) => {
-	const { url, seamsColor, extraStyles, hideLabel } = props.remote;
+export default component$(({ remote }: Props) => {
+	const localtion = useLocation();
+	const { seamsColor, extraStyles, hideLabel } = remote;
+	const url = `${remote.url}${localtion.query[remote.name] || remote.defaultQueryParam || ''}`;
 	const decoder = new TextDecoder();
 	return (
 		<SSRStreamBlock>

apps/menu/src/routes/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { component$, Resource, useClientEffect$ } from '@builder.io/qwik';
+import { component$, Resource } from '@builder.io/qwik';
 import { useEndpoint } from '@builder.io/qwik-city';
 import QwikIcon from '~/components/icons/QwikIcon';
 import { arrayToTree } from '~/utils/array-to-tree';

libs/shared/remotes.ts

@@ -5,36 +5,38 @@ export interface RemoteData {
 	seamsColor: string;
 	extraStyles?: Record<string, string | number>;
 	hideLabel?: true;
+	defaultQueryParam?: string;
 }
 
 export const remotes: Record<string, RemoteData> = {
 	menu: {
 		name: 'menu',
-		url: 'http://localhost:5003/menu/',
+		url: 'https://qwik-dream-menu.pages.dev/menu/',
 		secondsOfDelay: 0,
 		seamsColor: '#007d81',
 	},
 	hero: {
 		name: 'hero',
-		url: 'http://localhost:5002/hero/',
+		url: 'https://qwik-dream-hero.pages.dev/hero/',
 		secondsOfDelay: 0,
 		seamsColor: '#800006',
+		defaultQueryParam: 'qwik',
 	},
 	product: {
 		name: 'product',
-		url: 'http://localhost:5004/product/',
+		url: 'https://qwik-dream-product.pages.dev/product/',
 		secondsOfDelay: 0,
 		seamsColor: '#0031ff',
 	},
 	reviews: {
 		name: 'reviews',
-		url: 'http://localhost:5005/reviews/',
+		url: 'https://qwik-dream-reviews.pages.dev/reviews/',
 		secondsOfDelay: 0,
 		seamsColor: '#bc0000',
 	},
 	cart: {
 		name: 'cart',
-		url: 'http://localhost:5006/cart/',
+		url: 'https://qwik-dream-cart.pages.dev/cart/',
 		secondsOfDelay: 0,
 		seamsColor: '',
 		extraStyles: { 'z-index': 10 },