Shopify · michenly · Jun 14, 2024 · Jun 14, 2024 · Jun 14, 2024 · Jun 14, 2024
diff --git a/.changeset/big-otters-brake.md b/.changeset/big-otters-brake.md
@@ -0,0 +1,6 @@
+---
+'@shopify/remix-oxygen': patch
+'skeleton': patch
+---
+
+Update `@shopify/oxygen-workers-types` to v4.1.1
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/hydrogen-codegen/tsconfig.json b/packages/hydrogen-codegen/tsconfig.json
@@ -5,6 +5,7 @@
   "compilerOptions": {
     "moduleResolution": "node",
     "rootDir": ".",
-    "outDir": "dist"
+    "outDir": "dist",
+    "types": ["node"]
   }
 }
diff --git a/packages/hydrogen/hydrogen.config.d.ts → packages/hydrogen/examples.config.d.ts b/packages/hydrogen/hydrogen.config.d.ts → packages/hydrogen/examples.config.d.ts
@@ -1,4 +1,10 @@
-import type {HydrogenCart, Storefront} from '@shopify/hydrogen';
+/**
+ * This file is used to provide types for doc examples.
+ * Do not place here types needed for the library itself.
+ */
+
+import type {HydrogenCart, Storefront} from './src/index';
+import type {WaitUntil} from './src/types';
 
 declare global {
   /**
@@ -17,6 +23,10 @@ declare global {
     PUBLIC_STOREFRONT_ID: string;
     PUBLIC_CHECKOUT_DOMAIN: string;
   }
+
+  interface ExecutionContext {
+    waitUntil: WaitUntil;
+  }
 }
 
 /**

diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json
@@ -65,8 +65,8 @@
   "dependencies": {
     "@shopify/hydrogen-react": "2024.4.4",
     "content-security-policy-builder": "^2.2.0",
-    "type-fest": "^4.5.0",
     "source-map-support": "^0.5.21",
+    "type-fest": "^4.5.0",
     "use-resize-observer": "^9.1.0",
     "worktop": "^0.7.3"
   },

diff --git a/packages/hydrogen/src/cache/create-with-cache.ts b/packages/hydrogen/src/cache/create-with-cache.ts
@@ -6,12 +6,13 @@ import {
   CacheKey,
   runWithCache,
 } from './run-with-cache';
+import type {WaitUntil} from '../types';
 
 type CreateWithCacheOptions = {
   /** An instance that implements the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache) */
   cache: Cache;
   /** The `waitUntil` function is used to keep the current request/response lifecycle alive even after a response has been sent. It should be provided by your platform. */
-  waitUntil: ExecutionContext['waitUntil'];
+  waitUntil: WaitUntil;
   /** The `request` object is used to access certain headers for debugging */
   request?: CrossRuntimeRequest;
 };

diff --git a/packages/hydrogen/src/cache/run-with-cache.ts b/packages/hydrogen/src/cache/run-with-cache.ts
@@ -12,6 +12,7 @@ import {
 } from './sub-request';
 import {type StackInfo} from '../utils/callsites';
 import {hashKey} from '../utils/hash';
+import type {WaitUntil} from '../types';
 
 /**
  * The cache key is used to uniquely identify a value in the cache.
@@ -50,7 +51,7 @@ type WithCacheOptions<T = unknown> = {
   strategy?: CachingStrategy | null;
   cacheInstance?: Cache;
   shouldCacheResult?: (value: T) => boolean;
-  waitUntil?: ExecutionContext['waitUntil'];
+  waitUntil?: WaitUntil;
   debugInfo?: DebugOptions;
 };
 

diff --git a/packages/hydrogen/src/cache/server-fetch.ts b/packages/hydrogen/src/cache/server-fetch.ts
@@ -4,13 +4,14 @@ import {
   runWithCache,
   type DebugOptions,
 } from './run-with-cache.js';
+import type {WaitUntil} from '../types.js';
 
 export type FetchCacheOptions = {
   cache?: CachingStrategy;
   cacheInstance?: Cache;
   cacheKey?: CacheKey;
   shouldCacheResponse?: (body: any, response: Response) => boolean;
-  waitUntil?: ExecutionContext['waitUntil'];
+  waitUntil?: WaitUntil;
   returnType?: 'json' | 'text' | 'arrayBuffer' | 'blob';
   debugInfo?: DebugOptions;
 };

diff --git a/packages/hydrogen/src/customer/auth.helpers.test.ts b/packages/hydrogen/src/customer/auth.helpers.test.ts
@@ -1,5 +1,5 @@
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
-import type {HydrogenSession} from '../hydrogen';
+import type {HydrogenSession} from '../types';
 import {CUSTOMER_ACCOUNT_SESSION_KEY} from '../constants';
 import {checkExpires, clearSession, refreshToken} from './auth.helpers';
 

diff --git a/packages/hydrogen/src/customer/auth.helpers.ts b/packages/hydrogen/src/customer/auth.helpers.ts
@@ -1,4 +1,4 @@
-import type {HydrogenSession} from '../hydrogen';
+import type {HydrogenSession} from '../types';
 import {BadRequest} from './BadRequest';
 import {
   USER_AGENT,
@@ -130,9 +130,11 @@ export async function refreshToken({
     });
   }
 
-  const {access_token, expires_in, refresh_token} = await response.json<
-    Omit<AccessTokenResponse, 'id_token'>
-  >();
+  const {
+    access_token,
+    expires_in,
+    refresh_token,
+  }: Omit<AccessTokenResponse, 'id_token'> = await response.json();
 
   const accessToken = await exchangeAccessToken(
     access_token,
@@ -295,7 +297,7 @@ export async function exchangeAccessToken(
     ...debugInfo,
   });
 
-  const data = await response.json<AccessTokenResponse>();
+  const data: AccessTokenResponse = await response.json();
 
   if (data.error) {
     throw new BadRequest(data.error_description);

diff --git a/packages/hydrogen/src/customer/customer.test.ts b/packages/hydrogen/src/customer/customer.test.ts
@@ -1,5 +1,5 @@
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
-import type {HydrogenSession, HydrogenSessionData} from '../hydrogen';
+import type {HydrogenSession, HydrogenSessionData} from '../types';
 import {createCustomerAccountClient} from './customer';
 import {BUYER_SESSION_KEY, CUSTOMER_ACCOUNT_SESSION_KEY} from '../constants';
 import crypto from 'node:crypto';

diff --git a/packages/hydrogen/src/customer/customer.ts b/packages/hydrogen/src/customer/customer.ts
@@ -486,8 +486,12 @@ export function createCustomerAccountClient({
         });
       }
 
-      const {access_token, expires_in, id_token, refresh_token} =
-        await response.json<AccessTokenResponse>();
+      const {
+        access_token,
+        expires_in,
+        id_token,
+        refresh_token,
+      }: AccessTokenResponse = await response.json();
 
       const sessionNonce = session.get(CUSTOMER_ACCOUNT_SESSION_KEY)?.nonce;
       const responseNonce = await getNonce(id_token);

diff --git a/packages/hydrogen/src/customer/types.ts b/packages/hydrogen/src/customer/types.ts
@@ -4,7 +4,7 @@ import type {
 } from '@shopify/hydrogen-codegen';
 import {type GraphQLError} from '../utils/graphql';
 import type {CrossRuntimeRequest} from '../utils/request';
-import type {HydrogenSession} from '../hydrogen';
+import type {HydrogenSession, WaitUntil} from '../types';
 import type {
   LanguageCode,
   BuyerInput,
@@ -137,7 +137,7 @@ export type CustomerAccountOptions = {
   /** The object for the current Request. It should be provided by your platform. */
   request: CrossRuntimeRequest;
   /** The waitUntil function is used to keep the current request/response lifecycle alive even after a response has been sent. It should be provided by your platform. */
-  waitUntil?: ExecutionContext['waitUntil'];
+  waitUntil?: WaitUntil;
   /** This is the route in your app that authorizes the customer after logging in. Make sure to call `customer.authorize()` within the loader on this route. It defaults to `/account/authorize`. */
   authUrl?: string;
   /** Use this method to overwrite the default logged-out redirect behavior. The default handler [throws a redirect](https://remix.run/docs/en/main/utils/redirect#:~:text=!session) to `/account/login` with current path as `return_to` query param. */

diff --git a/packages/hydrogen/src/index.ts b/packages/hydrogen/src/index.ts
@@ -158,4 +158,4 @@ export type {
   StorefrontApiResponsePartial,
 } from '@shopify/hydrogen-react';
 
-export type {HydrogenSessionData, HydrogenSession} from './hydrogen';
+export type {HydrogenSessionData, HydrogenSession} from './types';
diff --git a/packages/hydrogen/src/storefront.ts b/packages/hydrogen/src/storefront.ts
@@ -53,6 +53,7 @@ import {
   withSyncStack,
   type StackInfo,
 } from './utils/callsites';
+import type {WaitUntil} from './types';
 
 export type I18nBase = {
   language: LanguageCode;
@@ -168,7 +169,7 @@ type HydrogenClientProps<TI18n> = {
   /** The globally unique identifier for the Shop */
   storefrontId?: string;
   /** The `waitUntil` function is used to keep the current request/response lifecycle alive even after a response has been sent. It should be provided by your platform. */
-  waitUntil?: ExecutionContext['waitUntil'];
+  waitUntil?: WaitUntil;
   /** An object containing a country code and language code */
   i18n?: TI18n;
   /** Whether it should print GraphQL errors automatically. Defaults to true */

diff --git a/packages/hydrogen/src/hydrogen.d.ts → packages/hydrogen/src/types.d.ts b/packages/hydrogen/src/hydrogen.d.ts → packages/hydrogen/src/types.d.ts
@@ -36,6 +36,8 @@ export interface HydrogenSession<
   isPending?: boolean;
 }
 
+export type WaitUntil = (promise: Promise<unknown>) => void;
+
 declare global {
   interface Window {
     privacyBanner: PrivacyBanner;

diff --git a/packages/hydrogen/src/vite/request-events.ts b/packages/hydrogen/src/vite/request-events.ts
@@ -2,6 +2,7 @@ import path from 'node:path';
 import {EventEmitter} from 'node:events';
 import type {IncomingMessage, ServerResponse} from 'node:http';
 import {mapSourcePosition} from 'source-map-support';
+import type {WaitUntil} from '../types.js';
 
 const IGNORED_ROUTES = new Set([
   '/graphiql',
@@ -29,7 +30,7 @@ export type RequestEventPayload = {
   startTime: number;
   endTime?: number;
   cacheStatus?: 'MISS' | 'HIT' | 'STALE' | 'PUT';
-  waitUntil?: ExecutionContext['waitUntil'];
+  waitUntil?: WaitUntil;
   graphql?: string | null;
   stackInfo?: {
     file?: string;

diff --git a/packages/hydrogen/tsconfig.json b/packages/hydrogen/tsconfig.json
@@ -1,15 +1,9 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src", "./hydrogen.config.d.ts"],
+  "include": ["src", "examples.config.d.ts"],
   "compilerOptions": {
     "jsx": "react-jsx",
-    "types": [
-      "@shopify/oxygen-workers-types",
-      "node",
-      "vite/client",
-      "jest",
-      "@testing-library/jest-dom"
-    ],
+    "types": ["node", "vite/client", "jest", "@testing-library/jest-dom"],
     "paths": {
       "@shopify/hydrogen": ["./src"],
       "~/mini-oxygen/*": ["../mini-oxygen/src/*"]

diff --git a/packages/mini-oxygen/package.json b/packages/mini-oxygen/package.json
@@ -61,7 +61,7 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@shopify/oxygen-workers-types": "^4.0.0",
+    "@shopify/oxygen-workers-types": "^4.1.1",
     "@types/body-parser": "1.19.3",
     "@types/connect": "^3.4.35",
     "@types/eventsource": "^1.1.10",

diff --git a/packages/mini-oxygen/src/vite/server-middleware.ts b/packages/mini-oxygen/src/vite/server-middleware.ts
@@ -15,7 +15,7 @@ import {
   type CustomEntryPointErrorHandler,
 } from './entry-error.js';
 
-import type {ViteEnv} from './worker-entry.js';
+import type {ViteEnv} from './types.js';
 import type {RequestHookInfo} from '../worker/handler.js';
 const scriptPath = fileURLToPath(new URL('./worker-entry.js', import.meta.url));
 

diff --git a/packages/mini-oxygen/src/vite/types.ts b/packages/mini-oxygen/src/vite/types.ts
@@ -0,0 +1,15 @@
+export interface ViteEnv {
+  __VITE_ROOT: string;
+  __VITE_HMR_URL: string;
+  __VITE_FETCH_MODULE_PATHNAME: string;
+  __VITE_RUNTIME_EXECUTE_URL: string;
+  __VITE_WARMUP_PATHNAME: string;
+  __VITE_REQUEST_HOOK?: {fetch: typeof fetch};
+  __VITE_SETUP_ENV: (request: Request) => void;
+  // Ref: https://github.com/cloudflare/workerd/blob/main/src/workerd/api/unsafe.h
+  __VITE_UNSAFE_EVAL: {
+    eval(code: string, name?: string): Function;
+    newFunction(code: string, name?: string, ...args: string[]): Function;
+    newAsyncFunction(code: string, name?: string, ...args: string[]): Function;
+  };
+}
diff --git a/packages/mini-oxygen/src/vite/worker-entry.ts b/packages/mini-oxygen/src/vite/worker-entry.ts
@@ -13,24 +13,9 @@ import {
 } from 'vite/runtime';
 import type {HMRPayload} from 'vite';
 import type {Response} from 'miniflare';
+import type {ViteEnv} from './types.js';
 import {withRequestHook} from '../worker/handler.js';
 
-export interface ViteEnv {
-  __VITE_ROOT: string;
-  __VITE_HMR_URL: string;
-  __VITE_FETCH_MODULE_PATHNAME: string;
-  __VITE_RUNTIME_EXECUTE_URL: string;
-  __VITE_WARMUP_PATHNAME: string;
-  __VITE_REQUEST_HOOK?: {fetch: typeof fetch};
-  __VITE_SETUP_ENV: (request: Request) => void;
-  // Ref: https://github.com/cloudflare/workerd/blob/main/src/workerd/api/unsafe.h
-  __VITE_UNSAFE_EVAL: {
-    eval(code: string, name?: string): Function;
-    newFunction(code: string, name?: string, ...args: string[]): Function;
-    newAsyncFunction(code: string, name?: string, ...args: string[]): Function;
-  };
-}
-
 const O2_PREFIX = '[o2:runtime]';
 
 export default {