EDU-135: Product details for all the frameworks

packages/sdks-tests/playwright.config.ts

@@ -66,7 +66,7 @@ export default defineConfig({
     /**
      * Increase the default timeout for snippet tests because they're not deterministic.
      */
-    timeout: testType === 'snippet' ? 30000 : 5000,
+    timeout: testType === 'snippet' ? 50000 : 5000,
   },
 
   /* Configure projects for major browsers */

packages/sdks-tests/src/snippet-tests/blueprints-product-details.spec.ts

@@ -3,7 +3,21 @@ import { test } from '../helpers/index.js';
 
 test.describe('Product Details Component', () => {
   test.beforeEach(async ({ page, packageName }) => {
-    test.skip(!['angular-16', 'angular-16-ssr', 'react'].includes(packageName));
+    test.skip(
+      ![
+        'angular-16',
+        'angular-16-ssr',
+        'react',
+        'vue',
+        'nuxt',
+        'svelte',
+        'sveltekit',
+        'qwik-city',
+        'react-sdk-next-14-app',
+        'react-sdk-next-pages',
+        'hydrogen',
+      ].includes(packageName)
+    );
     // Visit the page where ProductDetailsComponent is rendered
     await page.goto('/product/category/jacket');
   });

packages/sdks/snippets/hydrogen/app/routes/category.$handle.tsx

@@ -0,0 +1,30 @@
+import {fetchOneEntry} from '@builder.io/sdk-react';
+import type {LoaderFunctionArgs} from '@remix-run/node';
+import {useLoaderData} from '@remix-run/react';
+
+export const loader = async ({params}: LoaderFunctionArgs) => {
+  const productDetails = await fetchOneEntry({
+    model: 'product-details',
+    apiKey: 'ee9f13b4981e489a9a1209887695ef2b',
+    query: {
+      'data.handle': params.handle,
+    },
+  });
+
+  return {productDetails};
+};
+
+export default function ProductDetailsPage() {
+  const {productDetails} = useLoaderData<typeof loader>();
+
+  return (
+    productDetails && (
+      <div className="product-details-page">
+        <h1>{productDetails.data?.name}</h1>
+        <img src={productDetails.data?.image} alt={productDetails.data?.name} />
+        <p>{productDetails.data?.collection.value.data.copy}</p>
+        <p>Price: {productDetails.data?.collection.value.data.price}</p>
+      </div>
+    )
+  );
+}

packages/sdks/snippets/hydrogen/vite.config.ts

@@ -15,6 +15,11 @@ export default defineConfig({
         v3_relativeSplatPath: true,
         v3_throwAbortReason: true,
       },
+      routes(defineRoutes) {
+        return defineRoutes((route) => {
+          route('/product/category/:handle', 'routes/category.$handle.tsx');
+        });
+      },
     }),
     tsconfigPaths({
       root: './',

packages/sdks/snippets/nuxt/pages/product/category/[handle].vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useAsyncData } from '#app'
+import { fetchOneEntry } from '@builder.io/sdk-vue'
+import { useRoute } from 'nuxt/app'
+
+const route = useRoute();
+const { data: productDetails, pending } = await useAsyncData('product-details', () =>
+  fetchOneEntry({
+    model: 'product-details',
+    apiKey: 'ee9f13b4981e489a9a1209887695ef2b',
+    query: {
+      'data.handle': route.params.handle,
+    },
+  }),
+)
+</script>
+
+<template>
+  <div v-if="pending">Loading product details...</div>
+
+  <div class="product-details-page" v-if="productDetails?.data">
+    <h1>{{ productDetails.data.name }}</h1>
+    <img :src="productDetails.data.image" :alt="productDetails.data.name" />
+    <p>{{ productDetails.data.collection.value.data.copy }}</p>
+    <p>Price: {{ productDetails.data.collection.value.data.price }}</p>
+  </div>
+</template>

packages/sdks/snippets/qwik-city/src/routes/product/category/[handle]/index.tsx

@@ -0,0 +1,31 @@
+import { component$ } from '@builder.io/qwik';
+import { routeLoader$ } from '@builder.io/qwik-city';
+import { fetchOneEntry } from '@builder.io/sdk-qwik';
+
+export const useProductDetails = routeLoader$(async ({ params }) => {
+  return await fetchOneEntry({
+    model: 'product-details',
+    apiKey: 'ee9f13b4981e489a9a1209887695ef2b',
+    query: {
+      'data.handle': params.handle,
+    },
+  });
+});
+
+export default component$(() => {
+  const productResource = useProductDetails();
+
+  return (
+    productResource.value && (
+      <div class="product-details-page">
+        <h1>{productResource.value.data?.name}</h1>
+        <img
+          src={productResource.value.data?.image}
+          alt={productResource.value.data?.name}
+        />
+        <p>{productResource.value.data?.collection.value.data.copy}</p>
+        <p>Price: {productResource.value.data?.collection.value.data.price}</p>
+      </div>
+    )
+  );
+});

packages/sdks/snippets/react-sdk-next-14-app/app/(blueprints-product-details)/product/category/[handle]/page.tsx

@@ -0,0 +1,31 @@
+import { fetchOneEntry } from '@builder.io/sdk-react';
+import Image from 'next/image';
+
+export default async function ProductDetailsPage({
+  params,
+}: {
+  params: { handle: string };
+}) {
+  const productDetails = await fetchOneEntry({
+    model: 'product-details',
+    apiKey: 'ee9f13b4981e489a9a1209887695ef2b',
+    query: {
+      'data.handle': params.handle,
+    },
+  });
+
+  return (
+    productDetails && (
+      <div className="product-details-page">
+        <h1>{productDetails.data?.name}</h1>
+        <Image
+          src={`${productDetails.data?.image}`}
+          alt={productDetails.data?.name}
+          priority={true}
+        />
+        <p>{productDetails.data?.collection.value.data.copy}</p>
+        <p>Price: {productDetails.data?.collection.value.data.price}</p>
+      </div>
+    )
+  );
+}

packages/sdks/snippets/react-sdk-next-14-app/next.config.mjs

@@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        hostname: 'cdn.builder.io',
+      },
+    ],
+  },
+};
 
 export default nextConfig;

packages/sdks/snippets/react-sdk-next-pages/next.config.mjs

@@ -1,6 +1,21 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  async rewrites() {
+    return [
+      {
+        source: '/product/category/:handle',
+        destination: '/product-details/product/category/:handle',
+      },
+    ];
+  },
+  images: {
+    remotePatterns: [
+      {
+        hostname: 'cdn.builder.io',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

packages/sdks/snippets/react-sdk-next-pages/src/pages/product-details/product/category/[handle].tsx

@@ -0,0 +1,36 @@
+import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-react';
+import type { GetServerSideProps, InferGetServerSidePropsType } from 'next';
+import Image from 'next/image';
+
+export const getServerSideProps = (async ({ params }) => {
+  const productDetails = await fetchOneEntry({
+    model: 'product-details',
+    apiKey: 'ee9f13b4981e489a9a1209887695ef2b',
+    query: {
+      'data.handle': params?.handle,
+    },
+  });
+
+  return { props: { productDetails } };
+}) satisfies GetServerSideProps<{
+  productDetails: BuilderContent | null;
+}>;
+
+export default function ProductCategoryPage({
+  productDetails,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return (
+    productDetails && (
+      <div className="product-details-page">
+        <h1>{productDetails.data?.name}</h1>
+        <Image
+          src={productDetails.data?.image}
+          alt={productDetails.data?.name}
+          priority={true}
+        />
+        <p>{productDetails.data?.collection.value.data.copy}</p>
+        <p>Price: {productDetails.data?.collection.value.data.price}</p>
+      </div>
+    )
+  );
+}

packages/sdks/snippets/svelte/src/App.svelte

@@ -6,6 +6,7 @@
   import CatchAll from './components/CatchAll.svelte';
   import AnnouncementBar from './components/AnnouncementBar.svelte';
   import LivePreview from './components/LivePreview.svelte';
+  import ProductDetails from './components/blueprints/ProductDetails.svelte';
   export let url = '';
 </script>
 
@@ -16,5 +17,6 @@
 <Router {url}>
   <Route path="/announcements/:id" component={AnnouncementBar} />
   <Route path="/live-preview" component={LivePreview} />
+  <Route path="/product/category/:handle" component={ProductDetails} />
   <Route path="/*" component={CatchAll} />
 </Router>

packages/sdks/snippets/svelte/src/components/blueprints/ProductDetails.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-svelte';
+
+  export let handle: string;
+  let productDetails: BuilderContent | null = null;
+
+  onMount(() => {
+    fetchOneEntry({
+      model: 'product-details',
+      apiKey: 'ee9f13b4981e489a9a1209887695ef2b',
+      query: { 'data.handle': handle },
+    }).then((data) => (productDetails = data));
+  });
+</script>
+
+{#if !productDetails}
+  <p>Loading product details...</p>
+{:else}
+  <div class="product-details-page">
+    <h1>{productDetails.data?.name}</h1>
+    <img src={productDetails.data?.image} alt={productDetails.data?.name} />
+    <p>{productDetails.data?.collection.value.data.copy}</p>
+    <p>Price: {productDetails.data?.collection.value.data.price}</p>
+  </div>
+{/if}

packages/sdks/snippets/sveltekit/src/routes/product/category/[handle]/+page.server.ts

@@ -0,0 +1,14 @@
+import { fetchOneEntry } from '@builder.io/sdk-svelte';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+  const productDetails = await fetchOneEntry({
+    model: 'product-details',
+    apiKey: 'ee9f13b4981e489a9a1209887695ef2b',
+    query: {
+      'data.handle': params.handle,
+    },
+  });
+
+  return { productDetails };
+};

packages/sdks/snippets/sveltekit/src/routes/product/category/[handle]/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  export let data: PageData;
+</script>
+
+{#if !data.productDetails}
+  <p>Loading product details...</p>
+{:else}
+  <div class="product-details-page">
+    <h1>{data.productDetails.data?.name}</h1>
+    <img
+      src={data.productDetails.data?.image}
+      alt={data.productDetails.data?.name}
+    />
+    <p>{data.productDetails.data?.collection.value.data.copy}</p>
+    <p>Price: {data.productDetails.data?.collection.value.data.price}</p>
+  </div>
+{/if}

packages/sdks/snippets/vue/src/router/index.ts

@@ -1,6 +1,7 @@
 import AnnouncementBar from '@/views/AnnouncementBar.vue';
 import LivePreview from '@/views/LivePreview.vue';
 import QuickStart from '@/views/QuickStart.vue';
+import ProductDetails from '@/views/blueprints/ProductDetails.vue';
 import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
@@ -9,6 +10,7 @@ const router = createRouter({
     // will match /announcements/:id or /announcements
     { path: '/announcements/:id?', component: AnnouncementBar },
     { path: '/live-preview', component: LivePreview },
+    { path: '/product/category/:handle', component: ProductDetails },
     // will match everything and put it under `route.params.pathMatch`
     { path: '/:pathMatch(.*)*', component: QuickStart },
   ],

packages/sdks/snippets/vue/src/views/blueprints/ProductDetails.vue

@@ -0,0 +1,34 @@
+<template>
+    <div v-if="!productDetails?.data">
+      <p>Loading product details...</p>
+    </div>
+    <div class="product-details-page" v-else>
+      <h1>{{ productDetails.data.name }}</h1>
+      <img
+        :src="productDetails.data.image"
+        :alt="productDetails.data.name"
+      />
+      <p>{{ productDetails.data.collection.value.data.copy }}</p>
+      <p>Price: {{ productDetails.data.collection.value.data.price }}</p>
+    </div>
+  </template>
+
+  <script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+  import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-vue'
+  import { useRoute } from 'vue-router'
+
+  const route = useRoute()
+  const productDetails = ref<BuilderContent | null>(null);
+
+  onMounted( () => {
+    fetchOneEntry({
+        model: 'product-details',
+        apiKey: 'ee9f13b4981e489a9a1209887695ef2b',
+        query: { 'data.handle': route.params.handle },
+      }).then((data) => {
+        productDetails.value = data
+      })
+  })
+  </script>
+