Shopify · michenly · Jul 9, 2024
diff --git a/.changeset/rich-falcons-remain.md b/.changeset/rich-falcons-remain.md
@@ -0,0 +1,26 @@
+---
+'skeleton': patch
+'@shopify/hydrogen': patch
+'@shopify/create-hydrogen': patch
+---
+
+Create ShopifyEnv and use it for all the env.d.ts
+
+```diff
+// in env.d.ts
+
++ import type {ShopifyEnv} from '@shopify/hydrogen';
+
++ interface Env extends ShopifyEnv {}
+- interface Env {
+-   SESSION_SECRET: string;
+-  PUBLIC_STOREFRONT_API_TOKEN: string;
+-  PRIVATE_STOREFRONT_API_TOKEN: string;
+-  PUBLIC_STORE_DOMAIN: string;
+-  PUBLIC_STOREFRONT_ID: string;
+-  PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
+-  PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
+-  PUBLIC_CHECKOUT_DOMAIN: string;
+- }
+
+```
diff --git a/docs/shopify-dev/analytics-setup/ts/env.d.ts b/docs/shopify-dev/analytics-setup/ts/env.d.ts
@@ -10,6 +10,7 @@ import type {
   CustomerAccount,
   HydrogenCart,
   HydrogenSessionData,
+  ShopifyEnv,
 } from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
@@ -22,18 +23,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    // [START envtype]
-    PUBLIC_CHECKOUT_DOMAIN: string;
-    // [END envtype]
-  }
+  interface Env extends ShopifyEnv {}
 }
 
 declare module '@shopify/remix-oxygen' {

diff --git a/examples/b2b/app/remix.env.d.ts b/examples/b2b/app/remix.env.d.ts
@@ -10,6 +10,7 @@ import type {
   CustomerAccount,
   HydrogenCart,
   HydrogenSessionData,
+  ShopifyEnv,
 } from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
@@ -22,16 +23,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
-  }
+  interface Env extends ShopifyEnv {}
 }
 
 declare module '@shopify/remix-oxygen' {

diff --git a/examples/classic-remix/remix.env.d.ts b/examples/classic-remix/remix.env.d.ts
@@ -10,6 +10,7 @@ import type {
   CustomerAccount,
   HydrogenCart,
   HydrogenSessionData,
+  ShopifyEnv,
 } from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
@@ -22,16 +23,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
-  }
+  interface Env extends ShopifyEnv {}
 }
 
 declare module '@shopify/remix-oxygen' {

diff --git a/examples/custom-cart-method/env.d.ts b/examples/custom-cart-method/env.d.ts
@@ -12,6 +12,7 @@ import type {
   HydrogenCartCustom,
   HydrogenSessionData,
   CartQueryDataReturn,
+  ShopifyEnv,
 } from '@shopify/hydrogen';
 import type {
   SelectedOptionInput,
@@ -28,16 +29,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
-  }
+  interface Env extends ShopifyEnv {}
 }
 
 declare module '@shopify/remix-oxygen' {

diff --git a/examples/express/env.d.ts b/examples/express/env.d.ts
@@ -10,6 +10,7 @@ import type {
   CustomerAccount,
   HydrogenCart,
   HydrogenSessionData,
+  ShopifyEnv,
 } from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
@@ -22,16 +23,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
-  }
+  interface Env extends ShopifyEnv {}
 }
 
 declare module '@shopify/remix-oxygen' {

diff --git a/examples/legacy-customer-account-flow/env.d.ts b/examples/legacy-customer-account-flow/env.d.ts
@@ -5,7 +5,7 @@
 // Enhance TypeScript's built-in typings.
 import '@total-typescript/ts-reset';
 
-import type {Storefront, HydrogenCart} from '@shopify/hydrogen';
+import type {Storefront, HydrogenCart, ShopifyEnv} from '@shopify/hydrogen';
 import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
 import type {AppSession} from '~/lib/session';
 
@@ -18,14 +18,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
-  }
+  interface Env extends ShopifyEnv {}
 }
 
 declare module '@shopify/remix-oxygen' {

diff --git a/examples/metaobjects/env.d.ts b/examples/metaobjects/env.d.ts
@@ -10,6 +10,7 @@ import type {
   CustomerAccount,
   HydrogenCart,
   HydrogenSessionData,
+  ShopifyEnv,
 } from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
@@ -22,15 +23,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
+  interface Env extends ShopifyEnv {
     /***********************************************/
     /**********  EXAMPLE UPDATE STARTS  ************/
     PUBLIC_SHOPIFY_STORE_DOMAIN: string;

diff --git a/examples/multipass/env.d.ts b/examples/multipass/env.d.ts
@@ -10,6 +10,7 @@ import type {
   CustomerAccount,
   HydrogenCart,
   HydrogenSessionData,
+  ShopifyEnv,
 } from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
@@ -22,15 +23,8 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
+
+  interface Env extends ShopifyEnv {
     /***********************************************/
     /**********  EXAMPLE UPDATE STARTS  ************/
     PRIVATE_SHOPIFY_STORE_MULTIPASS_SECRET: string;

diff --git a/examples/partytown/README.md b/examples/partytown/README.md
@@ -214,12 +214,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
+  interface Env extends ShopifyEnv {
 +   GTM_CONTAINER_ID: `GTM-${string}`;
   }
 }

diff --git a/examples/partytown/env.d.ts b/examples/partytown/env.d.ts
@@ -10,6 +10,7 @@ import type {
   CustomerAccount,
   HydrogenCart,
   HydrogenSessionData,
+  ShopifyEnv,
 } from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
@@ -22,15 +23,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
+  interface Env extends ShopifyEnv {
     /***********************************************/
     /**********  EXAMPLE UPDATE STARTS  ************/
     GTM_CONTAINER_ID: `GTM-${string}`;

diff --git a/examples/third-party-queries-caching/env.d.ts b/examples/third-party-queries-caching/env.d.ts
@@ -10,6 +10,7 @@ import type {
   CustomerAccount,
   HydrogenCart,
   HydrogenSessionData,
+  ShopifyEnv,
 } from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 import {createRickAndMortyClient} from './app/lib/createRickAndMortyClient.server';
@@ -23,16 +24,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
-  }
+  interface Env extends ShopifyEnv {}
 }
 
 declare module '@shopify/remix-oxygen' {

diff --git a/packages/cli/src/lib/setups/i18n/replacers.test.ts b/packages/cli/src/lib/setups/i18n/replacers.test.ts
@@ -59,6 +59,7 @@ describe('i18n replacers', () => {
           CustomerAccount,
           HydrogenCart,
           HydrogenSessionData,
+          ShopifyEnv,
         } from "@shopify/hydrogen";
         import type {
           LanguageCode,
@@ -75,16 +76,7 @@ describe('i18n replacers', () => {
           /**
            * Declare expected Env parameter in fetch handler.
            */
-          interface Env {
-            SESSION_SECRET: string;
-            PUBLIC_STOREFRONT_API_TOKEN: string;
-            PRIVATE_STOREFRONT_API_TOKEN: string;
-            PUBLIC_STORE_DOMAIN: string;
-            PUBLIC_STOREFRONT_ID: string;
-            PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-            PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-            PUBLIC_CHECKOUT_DOMAIN: string;
-          }
+          interface Env extends ShopifyEnv {}
 
           /**
            * The I18nLocale used for Storefront API query context.

diff --git a/packages/hydrogen/dev.env.d.ts b/packages/hydrogen/dev.env.d.ts
@@ -4,7 +4,7 @@
  */
 
 import type {HydrogenCart, Storefront} from './src/index';
-import type {WaitUntil} from './src/types';
+import type {WaitUntil, ShopifyEnv} from './src/types';
 
 declare global {
   /**
@@ -15,14 +15,7 @@ declare global {
   /**
    * Declare expected Env parameter in fetch handler.
    */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
-  }
+  interface Env extends ShopifyEnv {}
 
   /**
    * This type is used to import types from mini-oxygen

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 './types';
+export type {HydrogenSessionData, HydrogenSession, ShopifyEnv} from './types';
diff --git a/packages/hydrogen/src/types.d.ts b/packages/hydrogen/src/types.d.ts
@@ -41,6 +41,17 @@ export interface HydrogenSession<
 
 export type WaitUntil = (promise: Promise<unknown>) => void;
 
+export interface ShopifyEnv {
+  SESSION_SECRET: string;
+  PUBLIC_STOREFRONT_API_TOKEN: string;
+  PRIVATE_STOREFRONT_API_TOKEN: string;
+  PUBLIC_STORE_DOMAIN: string;
+  PUBLIC_STOREFRONT_ID: string;
+  PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
+  PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
+  PUBLIC_CHECKOUT_DOMAIN: string;
+}
+
 declare global {
   interface Window {
     privacyBanner: PrivacyBanner;