Add remix-hydrogen test app.

Author: onurtemizkan

.github/workflows/build.yml

@@ -873,6 +873,7 @@ jobs:
             'node-experimental-fastify-app',
             'remix-cloudflare-workers',
             'remix-cloudflare-pages',
+            'remix-hydrogen',
           ]
         build-command:
           - false

packages/e2e-tests/test-applications/remix-hydrogen/.eslintignore

@@ -0,0 +1,5 @@
+build
+node_modules
+bin
+*.d.ts
+dist

packages/e2e-tests/test-applications/remix-hydrogen/.eslintrc.js

@@ -0,0 +1,6 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: ['plugin:hydrogen/recommended', 'plugin:hydrogen/typescript'],
+};

packages/e2e-tests/test-applications/remix-hydrogen/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+/.cache
+/build
+/dist
+/public/build
+/.mf
+.env
+.shopify
+env.ts

packages/e2e-tests/test-applications/remix-hydrogen/.graphqlrc.yml

@@ -0,0 +1 @@
+schema: node_modules/@shopify/hydrogen-react/storefront.schema.json

packages/e2e-tests/test-applications/remix-hydrogen/.npmrc

@@ -0,0 +1,4 @@
+@shopify:registry=https://registry.npmjs.com
+progress=false
+@sentry:registry=http://localhost:4873
+@sentry-internal:registry=http://localhost:4873

packages/e2e-tests/test-applications/remix-hydrogen/README.md

@@ -0,0 +1,42 @@
+# Hydrogen template: Hello World
+
+Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework. This template contains a **minimal setup** of components, queries and tooling to get started with Hydrogen.
+
+[Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
+[Get familiar with Remix](https://remix.run/docs/en/v1)
+
+## What's included
+
+- Remix
+- Hydrogen
+- Oxygen
+- Shopify CLI
+- ESLint
+- Prettier
+- GraphQL generator
+- TypeScript and JavaScript flavors
+- Minimal setup of components and routes
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 16.14.0 or higher
+
+```bash
+npm create @shopify/hydrogen@latest -- --template hello-world
+```
+
+Remember to update `.env` with your shop's domain and Storefront API token!
+
+## Building for production
+
+```bash
+npm run build
+```
+
+## Local development
+
+```bash
+npm run dev
+```

packages/e2e-tests/test-applications/remix-hydrogen/app/entry.client.tsx

@@ -0,0 +1,49 @@
+import {RemixBrowser, useLocation, useMatches} from '@remix-run/react';
+import {startTransition, StrictMode, useEffect} from 'react';
+import {hydrateRoot} from 'react-dom/client';
+import * as Sentry from '@sentry/remix';
+import {env} from '../env';
+
+Sentry.init({
+  dsn: env.SENTRY_DSN,
+  integrations: [
+    new Sentry.BrowserTracing({
+      routingInstrumentation: Sentry.remixRouterInstrumentation(
+        useEffect,
+        useLocation,
+        useMatches,
+      ),
+    }),
+    new Sentry.Replay(),
+  ],
+  // Performance Monitoring
+  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  debug: true,
+});
+
+Sentry.addGlobalEventProcessor((event) => {
+  if (
+    event.type === 'transaction' &&
+    (event.contexts?.trace?.op === 'pageload' ||
+      event.contexts?.trace?.op === 'navigation')
+  ) {
+    const eventId = event.event_id;
+    if (eventId) {
+      window.recordedTransactions = window.recordedTransactions || [];
+      window.recordedTransactions.push(eventId);
+    }
+  }
+
+  return event;
+});
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});

packages/e2e-tests/test-applications/remix-hydrogen/app/entry.server.tsx

@@ -0,0 +1,52 @@
+import type {DataFunctionArgs, EntryContext} from '@shopify/remix-oxygen';
+import {RemixServer} from '@remix-run/react';
+import isbot from 'isbot';
+import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
+import * as Sentry from '@sentry/remix';
+import {env} from '../env';
+
+Sentry.workerInit({
+  dsn: env.SENTRY_DSN,
+  // Performance Monitoring
+  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
+});
+
+export function handleError(error: unknown, {request}: DataFunctionArgs): void {
+  Sentry.captureRemixServerException(error, 'remix.server', request);
+}
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
+
+  const body = await renderToReadableStream(
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
+    {
+      nonce,
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
+  );
+
+  if (isbot(request.headers.get('user-agent'))) {
+    await body.allReady;
+  }
+
+  responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

packages/e2e-tests/test-applications/remix-hydrogen/app/root.tsx

@@ -0,0 +1,107 @@
+import {type LinksFunction, type LoaderArgs} from '@shopify/remix-oxygen';
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  LiveReload,
+  ScrollRestoration,
+  useLoaderData,
+  type ShouldRevalidateFunction,
+  useRouteError,
+} from '@remix-run/react';
+import type {Shop} from '@shopify/hydrogen/storefront-api-types';
+import appStyles from './styles/app.css';
+import favicon from '../public/favicon.svg';
+import {useNonce} from '@shopify/hydrogen';
+import * as Sentry from '@sentry/remix';
+
+// This is important to avoid re-fetching root queries on sub-navigations
+export const shouldRevalidate: ShouldRevalidateFunction = ({
+  formMethod,
+  currentUrl,
+  nextUrl,
+}) => {
+  // revalidate when a mutation is performed e.g add to cart, login...
+  if (formMethod && formMethod !== 'GET') {
+    return true;
+  }
+
+  // revalidate when manually revalidating via useRevalidator
+  if (currentUrl.toString() === nextUrl.toString()) {
+    return true;
+  }
+
+  return false;
+};
+
+export const links: LinksFunction = () => {
+  return [
+    {rel: 'stylesheet', href: appStyles},
+    {
+      rel: 'preconnect',
+      href: 'https://cdn.shopify.com',
+    },
+    {
+      rel: 'preconnect',
+      href: 'https://shop.app',
+    },
+    {rel: 'icon', type: 'image/svg+xml', href: favicon},
+  ];
+};
+
+export async function loader({context}: LoaderArgs) {
+  const layout = await context.storefront.query<{shop: Shop}>(LAYOUT_QUERY);
+  return {
+    layout,
+  };
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+  const eventId = Sentry.captureRemixErrorBoundaryError(error);
+
+  return (
+    <div>
+      <span>ErrorBoundary Error</span>
+      <span id="event-id">{eventId}</span>
+    </div>
+  );
+}
+
+function App() {
+  const nonce = useNonce();
+  const data = useLoaderData<typeof loader>();
+
+  const {name} = data.layout.shop;
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <h1>Hello, {name}</h1>
+        <p>This is a custom storefront powered by Hydrogen</p>
+        <Outlet />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
+      </body>
+    </html>
+  );
+}
+
+export default Sentry.withSentry(App);
+
+const LAYOUT_QUERY = `#graphql
+  query layout {
+    shop {
+      name
+      description
+    }
+  }
+`;