test: update example apps

vuestorefront · Jun 20, 2024 · c45d540 · c45d540
1 parent 9a003a9
commit c45d540
Show file tree

Hide file tree

Showing 27 changed files with 141 additions and 76 deletions.
diff --git a/packages/next/__tests__/apps/app-router/.env b/packages/next/__tests__/apps/app-router/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL="http://localhost:4000"
diff --git a/packages/next/__tests__/apps/app-router/.env.example b/packages/next/__tests__/apps/app-router/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL="http://localhost:4000"
diff --git a/packages/next/__tests__/apps/app-router/app/csr/ClientComponent.tsx b/packages/next/__tests__/apps/app-router/app/csr/ClientComponent.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useSdk } from "../../hooks";
+import { useSdk } from "../../sdk/sdk-provider";
 
 export function ClientComponentUsingSdk() {
   const sdk = useSdk();

diff --git a/packages/next/__tests__/apps/app-router/app/layout.tsx b/packages/next/__tests__/apps/app-router/app/layout.tsx
@@ -1,9 +1,16 @@
 import { ReactNode } from "react";
+import { PublicEnvScript } from 'next-runtime-env';
 import { Providers } from "./providers";
+import { getSdkOptions } from "../sdk/options";
 
 export default function RootLayout({ children }: { children: ReactNode }) {
+  const sdkOptions = getSdkOptions();
+
   return (
     <html lang="en">
+      <head>
+        <PublicEnvScript />
+      </head>
       <body>
         <nav>
           <ul>
@@ -15,7 +22,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             </li>
           </ul>
         </nav>
-        <Providers>{children}</Providers>
+        <Providers sdkOptions={sdkOptions}>{children}</Providers>
       </body>
     </html>
   );

diff --git a/packages/next/__tests__/apps/app-router/app/providers.tsx b/packages/next/__tests__/apps/app-router/app/providers.tsx
@@ -1,8 +1,18 @@
 "use client";
 
 import { ReactNode } from "react";
-import { SdkProvider } from "../hooks";
+import { createSdk, type CreateSdkOptions } from "@vue-storefront/next";
+import { SdkProvider } from "../sdk/sdk-provider";
+import { getSdkConfig } from "../sdk/config";
 
-export function Providers({ children }: { children: ReactNode }) {
-  return <SdkProvider>{children}</SdkProvider>;
+export function Providers({
+  children,
+  sdkOptions,
+}: {
+  children: ReactNode;
+  sdkOptions: CreateSdkOptions;
+  }) {
+  const { getSdk } = createSdk(sdkOptions, getSdkConfig());
+
+  return <SdkProvider sdk={getSdk()}>{children}</SdkProvider>;
 }
diff --git a/packages/next/__tests__/apps/app-router/app/ssr/page.tsx b/packages/next/__tests__/apps/app-router/app/ssr/page.tsx
@@ -1,5 +1,5 @@
 import { headers } from "next/headers";
-import { getSdk } from "../../sdk.config";
+import { getSdk } from "../../sdk/sdk.server";
 
 export default async function SsrPage() {
   const pageData = await getSdk({

diff --git a/packages/next/__tests__/apps/app-router/hooks/index.ts b/packages/next/__tests__/apps/app-router/hooks/index.ts
diff --git a/packages/next/__tests__/apps/app-router/middleware.ts b/packages/next/__tests__/apps/app-router/middleware.ts
@@ -2,7 +2,7 @@
  * @docs https://nextjs.org/docs/advanced-features/middleware
  */
 import { NextRequest, NextResponse } from "next/server";
-import { getSdk } from "./sdk.config";
+import { getSdk } from "./sdk/sdk.server";
 
 export async function middleware(request: NextRequest) {
   const response = NextResponse.next();

diff --git a/packages/next/__tests__/apps/app-router/package.json b/packages/next/__tests__/apps/app-router/package.json
@@ -9,10 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@vue-storefront/next": "*",
+    "@vue-storefront/next": "file:../../../",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.4"
+    "next": "14.0.4",
+    "next-runtime-env": "3.2.2"
   },
   "devDependencies": {
     "typescript": "^5",

diff --git a/packages/next/__tests__/apps/app-router/sdk.config.ts b/packages/next/__tests__/apps/app-router/sdk.config.ts
diff --git a/packages/next/__tests__/apps/app-router/sdk/config.ts b/packages/next/__tests__/apps/app-router/sdk/config.ts
@@ -0,0 +1,13 @@
+import { Endpoints } from "@storefront/shared";
+import { defineSdkConfig } from "@vue-storefront/next";
+
+export function getSdkConfig() {
+  return defineSdkConfig(({ buildModule, middlewareModule, config, getRequestHeaders }) => ({
+    example: buildModule(middlewareModule<Endpoints>, {
+      apiUrl: `${config.middlewareUrl}/test_integration`,
+      defaultRequestConfig: {
+        headers: getRequestHeaders(),
+      },
+    }),
+  }));
+}
diff --git a/packages/next/__tests__/apps/app-router/sdk/options.ts b/packages/next/__tests__/apps/app-router/sdk/options.ts
@@ -0,0 +1,10 @@
+import type { CreateSdkOptions } from "@vue-storefront/next";
+import { env } from "next-runtime-env";
+
+export function getSdkOptions() {
+  return {
+    middleware: {
+      apiUrl: env('NEXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL'),
+    },
+  } satisfies CreateSdkOptions;
+}
diff --git a/packages/next/__tests__/apps/app-router/sdk/sdk-provider.tsx b/packages/next/__tests__/apps/app-router/sdk/sdk-provider.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { createSdkContext } from "@vue-storefront/next/client";
+
+import type { Sdk } from "./sdk.server";
+
+export const [SdkProvider, useSdk] = createSdkContext<Sdk>();
diff --git a/packages/next/__tests__/apps/app-router/sdk/sdk.server.ts b/packages/next/__tests__/apps/app-router/sdk/sdk.server.ts
@@ -0,0 +1,9 @@
+import { createSdk } from "@vue-storefront/next";
+import { getSdkOptions } from "./options";
+import { getSdkConfig } from "./config";
+
+export const { getSdk } = createSdk(
+  getSdkOptions(), getSdkConfig()
+);
+
+export type Sdk = ReturnType<typeof getSdk>;
diff --git a/packages/next/__tests__/apps/pages-router/.env b/packages/next/__tests__/apps/pages-router/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL="http://localhost:4000"
diff --git a/packages/next/__tests__/apps/pages-router/.env.example b/packages/next/__tests__/apps/pages-router/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL="http://localhost:4000"
diff --git a/packages/next/__tests__/apps/pages-router/hooks/index.ts b/packages/next/__tests__/apps/pages-router/hooks/index.ts
diff --git a/packages/next/__tests__/apps/pages-router/middleware.ts b/packages/next/__tests__/apps/pages-router/middleware.ts
@@ -2,7 +2,7 @@
  * @docs https://nextjs.org/docs/advanced-features/middleware
  */
 import { NextRequest, NextResponse } from "next/server";
-import { getSdk } from "./sdk.config";
+import { getSdk } from "./sdk/sdk.server";
 
 export async function middleware(request: NextRequest) {
   const response = NextResponse.next();

diff --git a/packages/next/__tests__/apps/pages-router/package.json b/packages/next/__tests__/apps/pages-router/package.json
@@ -9,10 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@vue-storefront/next": "*",
+    "@vue-storefront/next": "file:../../../",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.4"
+    "next": "14.0.4",
+    "next-runtime-env": "3.2.2"
   },
   "devDependencies": {
     "typescript": "^5",

diff --git a/packages/next/__tests__/apps/pages-router/pages/_app.tsx b/packages/next/__tests__/apps/pages-router/pages/_app.tsx
@@ -1,20 +1,33 @@
 import type { AppProps } from "next/app";
-import { SdkProvider } from "../hooks";
+import { createSdk } from "@vue-storefront/next";
+import { SdkProvider } from "../sdk/sdk-provider";
+import { getSdkOptions } from "../sdk/options";
+import { getSdkConfig } from "../sdk/config";
+import { PublicEnvScript } from "next-runtime-env";
 
 export default function App({ Component, pageProps }: AppProps) {
+  const { getSdk } = createSdk(getSdkOptions(), getSdkConfig());
+
   return (
-    <SdkProvider>
-      <nav>
-        <ul>
-          <li>
-            <a href="/ssr">SSR Page</a>
-          </li>
-          <li>
-            <a href="/csr">CSR Page</a>
-          </li>
-        </ul>
-      </nav>
-      <Component {...pageProps} />
-    </SdkProvider>
+    <html>
+      <head>
+        <PublicEnvScript />
+      </head>
+      <body>
+        <SdkProvider sdk={getSdk()}>
+          <nav>
+            <ul>
+              <li>
+                <a href="/ssr">SSR Page</a>
+              </li>
+              <li>
+                <a href="/csr">CSR Page</a>
+              </li>
+            </ul>
+          </nav>
+          <Component {...pageProps} />
+        </SdkProvider>
+      </body>
+    </html>
   );
 }
diff --git a/packages/next/__tests__/apps/pages-router/pages/csr.tsx b/packages/next/__tests__/apps/pages-router/pages/csr.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useSdk } from "../hooks";
+import { useSdk } from "../sdk/sdk-provider";
 
 export default function ClientPage() {
   const sdk = useSdk();

diff --git a/packages/next/__tests__/apps/pages-router/pages/ssr.tsx b/packages/next/__tests__/apps/pages-router/pages/ssr.tsx
@@ -1,5 +1,5 @@
 import { GetServerSideProps } from "next";
-import { getSdk } from "../sdk.config";
+import { getSdk } from "../sdk/sdk.server";
 
 export default function SsrPage({ result }: any) {
   return (

diff --git a/packages/next/__tests__/apps/pages-router/sdk.config.ts b/packages/next/__tests__/apps/pages-router/sdk.config.ts
diff --git a/packages/next/__tests__/apps/pages-router/sdk/config.ts b/packages/next/__tests__/apps/pages-router/sdk/config.ts
@@ -0,0 +1,13 @@
+import { defineSdkConfig } from "@vue-storefront/next";
+import type { Endpoints } from "@storefront/shared";
+
+export function getSdkConfig() {
+  return defineSdkConfig(({ buildModule, middlewareModule, config, getRequestHeaders }) => ({
+    example: buildModule(middlewareModule<Endpoints>, {
+      apiUrl: `${config.middlewareUrl}/test_integration`,
+      defaultRequestConfig: {
+        headers: getRequestHeaders(),
+      },
+    })
+  }));
+}
diff --git a/packages/next/__tests__/apps/pages-router/sdk/options.ts b/packages/next/__tests__/apps/pages-router/sdk/options.ts
@@ -0,0 +1,11 @@
+import type { CreateSdkOptions } from "@vue-storefront/next";
+import { env } from "next-runtime-env";
+
+export function getSdkOptions() {
+  return {
+    middleware: {
+      apiUrl:
+        env("NEXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL") ?? "http://localhost:4000",
+    },
+  } satisfies CreateSdkOptions;
+}
diff --git a/packages/next/__tests__/apps/pages-router/sdk/sdk-provider.tsx b/packages/next/__tests__/apps/pages-router/sdk/sdk-provider.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { createSdkContext } from "@vue-storefront/next/client";
+
+import type { Sdk } from "./sdk.server";
+
+export const [SdkProvider, useSdk] = createSdkContext<Sdk>();
diff --git a/packages/next/__tests__/apps/pages-router/sdk/sdk.server.ts b/packages/next/__tests__/apps/pages-router/sdk/sdk.server.ts
@@ -0,0 +1,7 @@
+import { createSdk } from "@vue-storefront/next";
+import { getSdkConfig } from "./config";
+import { getSdkOptions } from "./options";
+
+export const { getSdk } = createSdk(getSdkOptions(), getSdkConfig());
+
+export type Sdk = ReturnType<typeof getSdk>;