Update @shopify/oxygen-workers-types to v4.1.2 (#2252)

* Update `@shopify/oxygen-workers-types` to v4.1.1 * add the package to hydrogen * Add type to codegen * Update changeset * Remove workers types dependency from hydrogen-codegen * Remove workers types dependency from hydrogen and refactor type files * Split types in MiniOxygen to avoid checking worker types in Hydrogen * Add extension to CLI import * Update changeset * Remove workers types dependency from hydrogen package.json * Workaround wrong types * Fix types in CLI to avoid depending on workers types * Revert type split and fix it in origin * Update to types 4.1.2 and remove workaround * Fix type in hydrogen-react * Changesets * Merge main * Dedup package-lock.json * Cleanup --------- Co-authored-by: Fran Dios <[email protected]>
Shopify · Jul 3, 2024 · a0e84d7 · a0e84d7
1 parent 710625c
commit a0e84d7
Show file tree

Hide file tree

Showing 28 changed files with 438 additions and 360 deletions.
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 fix issues on Windows.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cli/remix.env.d.ts → packages/cli/dev.env.d.ts b/packages/cli/remix.env.d.ts → packages/cli/dev.env.d.ts
@@ -1,9 +1,11 @@
-/// <reference types="@shopify/remix-oxygen" />
+/**
+ * This file is used to provide types for generator utilities.
+ */
 
 import type {
-  storefront,
-  customeraccount,
-  hydrogencart,
+  Storefront,
+  CustomerAccount,
+  HydrogenCart,
 } from '@shopify/hydrogen';
 import type {
   LanguageCode,
@@ -26,10 +28,23 @@ declare module '@shopify/remix-oxygen' {
 declare global {
   /**
    * The I18nLocale used for Storefront API query context.
+   * Also used for the generated i18n functions.
    */
   type I18nLocale = {
     language: LanguageCode;
     country: CountryCode;
-    pathPrefix: string;
+    pathPrefix?: string;
   };
+
+  /**
+   * This type is used to import types from mini-oxygen
+   */
+  type ExecutionContext = {
+    waitUntil: (promise: Promise<unknown>) => void;
+  };
+
+  /**
+   * This type is used to import types from mini-oxygen
+   */
+  type ExportedHandlerFetchHandler = Function;
 }
diff --git a/packages/cli/src/commands/hydrogen/upgrade.ts b/packages/cli/src/commands/hydrogen/upgrade.ts
@@ -294,7 +294,7 @@ export async function getChangelog(): Promise<ChangeLog> {
       throw new Error('Failed to fetch changelog.json');
     }
 
-    const json = await response.json<ChangeLog>();
+    const json: ChangeLog = await response.json();
 
     if ('releases' in json && 'url' in json) {
       CACHED_CHANGELOG = json;

diff --git a/packages/cli/src/lib/mini-oxygen/node.ts b/packages/cli/src/lib/mini-oxygen/node.ts
@@ -50,7 +50,7 @@ export async function startNodeServer({
             method: 'POST',
             body: JSON.stringify({
               ...(asyncLocalStorage.getStore() as Record<string, string>),
-              ...(await request.json<Record<string, string>>()),
+              ...((await request.json()) as Record<string, string>),
             }),
           }),
         ),

diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
@@ -1,13 +1,13 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src", "remix.env.d.ts", "assets"],
+  "include": ["src", "dev.env.d.ts", "assets"],
   "exclude": ["dist", "__tests__", "node_modules", ".turbo"],
   "compilerOptions": {
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "jsx": "react-jsx",
     "noUncheckedIndexedAccess": true,
-    "types": ["@shopify/oxygen-workers-types", "node", "@remix-run/dev"],
+    "types": ["node", "@remix-run/dev"],
     "outDir": "dist",
     "paths": {
       "~/mini-oxygen/*": ["../mini-oxygen/src/*"],

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-react/src/useMoney.tsx b/packages/hydrogen-react/src/useMoney.tsx
@@ -117,7 +117,7 @@ export function useMoney(money: MoneyV2): UseMoneyValue {
 
   const options = useMemo(
     () => ({
-      style: 'currency',
+      style: 'currency' as const,
       currency: money.currencyCode,
     }),
     [money.currencyCode],

diff --git a/packages/hydrogen/hydrogen.config.d.ts → packages/hydrogen/dev.env.d.ts b/packages/hydrogen/hydrogen.config.d.ts → packages/hydrogen/dev.env.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,18 @@ declare global {
     PUBLIC_STOREFRONT_ID: string;
     PUBLIC_CHECKOUT_DOMAIN: string;
   }
+
+  /**
+   * This type is used to import types from mini-oxygen
+   */
+  interface ExecutionContext {
+    waitUntil: WaitUntil;
+  }
+
+  /**
+   * This type is used to import types from mini-oxygen
+   */
+  type ExportedHandlerFetchHandler = Function;
 }
 
 /**

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
@@ -161,4 +161,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", "dev.env.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.17.1"
   },
   "devDependencies": {
-    "@shopify/oxygen-workers-types": "^4.0.0",
+    "@shopify/oxygen-workers-types": "^4.1.2",
     "@types/body-parser": "1.19.3",
     "@types/connect": "^3.4.35",
     "@types/eventsource": "^1.1.10",

diff --git a/packages/remix-oxygen/package.json b/packages/remix-oxygen/package.json
@@ -41,10 +41,10 @@
   ],
   "devDependencies": {
     "@remix-run/server-runtime": "^2.9.2",
-    "@shopify/oxygen-workers-types": "^4.0.0"
+    "@shopify/oxygen-workers-types": "^4.1.2"
   },
   "peerDependencies": {
     "@remix-run/server-runtime": "^2.1.0",
-    "@shopify/oxygen-workers-types": "^3.17.3 || ^4.0.0"
+    "@shopify/oxygen-workers-types": "^3.17.3 || ^4.1.2"
   }
 }
diff --git a/packages/remix-oxygen/tsconfig.json b/packages/remix-oxygen/tsconfig.json
@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src"]
+  "include": ["src"],
+  "compilerOptions": {
+    "types": ["@shopify/oxygen-workers-types", "node"]
+  }
 }
diff --git a/templates/skeleton/package.json b/templates/skeleton/package.json
@@ -32,7 +32,7 @@
     "@remix-run/eslint-config": "^2.9.2",
     "@shopify/hydrogen-codegen": "^0.3.1",
     "@shopify/mini-oxygen": "^3.0.3",
-    "@shopify/oxygen-workers-types": "^4.0.0",
+    "@shopify/oxygen-workers-types": "^4.1.2",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",

diff --git a/tsconfig.json b/tsconfig.json
@@ -5,7 +5,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "target": "ESNext",
     "module": "ESNext",
-    "types": ["@shopify/oxygen-workers-types", "node"],
+    "types": ["node"],
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true,
     "strict": true,