Use Process.env instead of Oxygen.env

Shopify · May 12, 2022 · e4e79d2 · e4e79d2
1 parent 7dc85d1
commit e4e79d2
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 39 deletions.
diff --git a/.github/deployments/cloudflare/worker.js b/.github/deployments/cloudflare/worker.js
@@ -37,11 +37,6 @@ async function handleEvent(event) {
       return await handleAsset(url, event);
     }
 
-    // TODO: Switch to module syntax and transfer args to Oxygen.env
-    if (!globalThis.Oxygen) {
-      globalThis.Oxygen = {};
-    }
-
     return await handleRequest(event.request, {
       indexTemplate,
       cache: caches.default,

diff --git a/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-middleware.ts b/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-middleware.ts
@@ -32,7 +32,7 @@ export default (pluginOptions: HydrogenVitePluginOptions) => {
         return await server.transformIndexHtml(url, indexHtml);
       }
 
-      await polyfillOxygenEnv(server.config);
+      await polyfillProcessEnv(server.config);
 
       // The default vite middleware rewrites the URL `/graphqil` to `/index.html`
       // By running this middleware first, we avoid that.
@@ -112,25 +112,18 @@ export default (pluginOptions: HydrogenVitePluginOptions) => {
   } as Plugin;
 };
 
-declare global {
-  // eslint-disable-next-line no-var
-  var Oxygen: {env: any; [key: string]: any};
-}
-
-async function polyfillOxygenEnv(config: ResolvedConfig) {
+async function polyfillProcessEnv(config: ResolvedConfig) {
   const env = await loadEnv(config.mode, config.root, '');
 
   const publicPrefixes = Array.isArray(config.envPrefix)
     ? config.envPrefix
     : [config.envPrefix || ''];
 
   for (const key of Object.keys(env)) {
-    if (publicPrefixes.some((prefix) => key.startsWith(prefix))) {
-      delete env[key];
+    if (!publicPrefixes.some((prefix) => key.startsWith(prefix))) {
+      process.env[key] = env[key];
     }
   }
-
-  globalThis.Oxygen = {env};
 }
 
 async function findHydrogenConfigPath(root: string, userProvidedPath?: string) {

diff --git a/packages/hydrogen/src/platforms/node.ts b/packages/hydrogen/src/platforms/node.ts
@@ -23,9 +23,6 @@ type CreateServerOptions = {
 };
 
 export async function createServer({cache}: CreateServerOptions = {}) {
-  // @ts-ignore
-  globalThis.Oxygen = {env: process.env};
-
   const app = connect();
 
   app.use(compression() as NextHandleFunction);

diff --git a/packages/hydrogen/src/platforms/worker.ts b/packages/hydrogen/src/platforms/worker.ts
@@ -8,23 +8,13 @@ import indexTemplate from '__INDEX_TEMPLATE__?raw';
 
 const handleRequest = entrypoint as RequestHandler;
 
-declare global {
-  // eslint-disable-next-line no-var
-  var globalThis: {
-    Oxygen: {env: any};
-    [key: string]: any;
-  };
-}
-
 export default {
   async fetch(
     request: Request,
     env: unknown,
     context: {waitUntil: (promise: Promise<any>) => void}
   ) {
-    if (!globalThis.Oxygen) {
-      globalThis.Oxygen = {env};
-    }
+    process.env = {...process.env, ...(env as Record<string, string>)};
 
     try {
       return (await handleRequest(request, {

diff --git a/packages/hydrogen/src/streaming.server.ts b/packages/hydrogen/src/streaming.server.ts
@@ -42,7 +42,8 @@ export const ssrRenderToReadableStream = _ssrRenderToReadableStream as (
 ) => Promise<ReadableStream<Uint8Array> & {allReady: Promise<void>}>;
 
 export async function isStreamingSupported() {
-  return Boolean(globalThis.Oxygen?.env?.HYDROGEN_ENABLE_WORKER_STREAMING);
+  // TODO: Check if streaming is supported natively
+  return Boolean(process?.env?.HYDROGEN_ENABLE_WORKER_STREAMING);
 }
 
 export async function bufferReadableStream(

diff --git a/packages/hydrogen/src/utilities/storefrontApi.ts b/packages/hydrogen/src/utilities/storefrontApi.ts
@@ -16,8 +16,8 @@ export function getStorefrontApiRequestHeaders({
   const headers = {} as Record<string, any>;
 
   const secretToken =
-    typeof Oxygen !== 'undefined'
-      ? Oxygen?.env?.[OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE]
+    typeof process !== 'undefined'
+      ? process?.env?.[OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE]
       : null;
 
   /**

diff --git a/packages/playground/server-components/src/components/ClientEnv.client.jsx b/packages/playground/server-components/src/components/ClientEnv.client.jsx
@@ -4,7 +4,7 @@ export default function Env() {
     // This is replaced with a string at build time
     publicVariable = import.meta.env.PUBLIC_VARIABLE;
     // This one crashes because Oxygen is not defined in browser
-    privateVariable = import.meta.env.SSR ? '' : Oxygen.env.PRIVATE_VARIABLE;
+    privateVariable = import.meta.env.SSR ? '' : process.env.PRIVATE_VARIABLE;
   } catch (error) {}
 
   return (

diff --git a/packages/playground/server-components/src/routes/env.server.jsx b/packages/playground/server-components/src/routes/env.server.jsx
@@ -7,7 +7,7 @@ export default function Env() {
 
       <div className="secrets-server">
         <div>PUBLIC_VARIABLE:{import.meta.env.PUBLIC_VARIABLE || ''}|</div>
-        <div>PRIVATE_VARIABLE:{Oxygen.env.PRIVATE_VARIABLE || ''}|</div>
+        <div>PRIVATE_VARIABLE:{process.env.PRIVATE_VARIABLE || ''}|</div>
       </div>
 
       <div className="secrets-client">

diff --git a/packages/playground/server-components/tests/e2e-test-cases.ts b/packages/playground/server-components/tests/e2e-test-cases.ts
@@ -64,7 +64,7 @@ export default async function testCases({
     expect(await page.textContent('h1')).toContain('About');
   });
 
-  it('has access to environment variables', async () => {
+  it.only('has access to environment variables', async () => {
     await page.goto(getServerUrl() + '/env');
     expect(await page.textContent('h1')).toContain('Env');
 

diff --git a/packages/playground/test-utils/worker-entry.js b/packages/playground/test-utils/worker-entry.js
@@ -1,9 +1,6 @@
 import {getAssetFromKV} from '@cloudflare/kv-asset-handler';
 
 export default function setup({handleRequest, indexTemplate}) {
-  // Mock Oxygen global
-  globalThis.Oxygen = {env: globalThis};
-
   function isAsset(url) {
     return /\.(png|jpe?g|gif|css|js|svg|ico|map)$/i.test(url.pathname);
   }