Use Process.env instead of Oxygen.env

.changeset/mean-guests-remain.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': minor
+---
+
+Deprecate Oxygen.env. We now support process.env directly in server components in node and worker environments.

.github/deployments/cloudflare/worker.js

@@ -37,9 +37,9 @@ 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 = {};
+    // TODO: Switch to module syntax and transfer args to process.env
+    if (!globalThis.process) {
+      globalThis.process = {env: {}};
     }
 
     return await handleRequest(event.request, {

docs/framework/environment-variables.md

@@ -51,13 +51,13 @@ export default Component() {
 
 ### Private variables
 
-In Hydrogen, any variable from `.env` files that isn't prefixed with `PUBLIC_` is treated as a server runtime variable in non-production environments. These variables aren't exposed to the browser and can only be accessed from server components using the global `Oxygen.env` object:
+In Hydrogen, any variable from `.env` files that isn't prefixed with `PUBLIC_` is treated as a server runtime variable in non-production environments. These variables aren't exposed to the browser and can only be accessed from server components using the global `process.env` object:
 
 {% codeblock file, filename: 'Page.server.jsx' %}
 
-```
+``` js
 export default Page() {
-  const token = Oxygen.env.MY_SECRET_API_TOKEN
+  const token = process.env.MY_SECRET_API_TOKEN
 
   // ...
 }

packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-middleware.ts

@@ -33,7 +33,7 @@ export default (pluginOptions: HydrogenVitePluginOptions) => {
         return await server.transformIndexHtml(url, indexHtml);
       }
 
-      await polyfillOxygenEnv(server.config);
+      addEnvVarsToProcessEnv(server.config);
 
       // The default vite middleware rewrites the URL `/graphqil` to `/index.html`
       // By running this middleware first, we avoid that.
@@ -110,13 +110,8 @@ 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) {
-  const env = await loadEnv(config.mode, config.root, '');
+function addEnvVarsToProcessEnv(config: ResolvedConfig) {
+  const env = loadEnv(config.mode, config.root, '');
 
   const publicPrefixes = Array.isArray(config.envPrefix)
     ? config.envPrefix
@@ -125,10 +120,10 @@ async function polyfillOxygenEnv(config: ResolvedConfig) {
   for (const key of Object.keys(env)) {
     if (publicPrefixes.some((prefix) => key.startsWith(prefix))) {
       delete env[key];
+    } else {
+      process.env[key] = env[key];
     }
   }
-
-  globalThis.Oxygen = {env};
 }
 
 async function findHydrogenConfigPath(root: string, userProvidedPath?: string) {

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);

packages/hydrogen/src/platforms/worker.ts

@@ -8,23 +8,14 @@ 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};
-    }
+    // @ts-ignore NodeJS.ProcessEnv is not relevant here, because we're in a Worker.
+    globalThis.process = {env};
 
     try {
       return (await handleRequest(request, {

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(

packages/hydrogen/src/utilities/storefrontApi.ts

@@ -15,10 +15,7 @@ export function getStorefrontApiRequestHeaders({
 }) {
   const headers = {} as Record<string, any>;
 
-  const secretToken =
-    typeof Oxygen !== 'undefined'
-      ? Oxygen?.env?.[OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE]
-      : null;
+  const secretToken = process.env[OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE];
 
   /**
    * Only pass one type of storefront token at a time.

packages/playground/server-components/src/components/ClientEnv.client.jsx

@@ -3,8 +3,8 @@ export default function Env() {
   try {
     // 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;
+    // This one crashes because process is not defined in browser
+    privateVariable = import.meta.env.SSR ? '' : process.env.PRIVATE_VARIABLE;
   } catch (error) {}
 
   return (

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">

packages/playground/test-utils/load-prod-env.js

@@ -1,7 +1,7 @@
 const {loadEnv} = require('vite');
 
-module.exports.loadProdEnv = async function (cwd = __dirname) {
-  const env = await loadEnv('production', cwd, '');
+module.exports.loadProdEnv = function (cwd = __dirname) {
+  const env = loadEnv('production', cwd, '');
   Object.keys(env).forEach((key) => {
     if (['VITE_', 'PUBLIC_'].some((prefix) => key.startsWith(prefix))) {
       delete env[key];

packages/playground/test-utils/start-node.js

@@ -6,10 +6,9 @@ const {loadProdEnv} = require('./load-prod-env');
 function createServerWithEnv({cwd = process.cwd()} = {}) {
   const {createServer} = require(path.join(cwd, 'dist', 'server'));
 
-  return loadProdEnv(cwd).then((env) => {
-    Object.assign(process.env, env);
-    return createServer();
-  });
+  const env = loadProdEnv(cwd);
+  Object.assign(process.env, env);
+  return createServer();
 }
 
 if (require.main === module) {

packages/playground/test-utils/start-worker.js

@@ -8,7 +8,7 @@ async function createServer({root = process.cwd()} = {}) {
   const mf = new Miniflare({
     scriptPath: path.resolve(root, 'dist/worker/index.js'),
     sitePath: path.resolve(root, 'dist/client'),
-    bindings: await loadProdEnv(root),
+    bindings: loadProdEnv(root),
   });
 
   const app = mf.createServer();

packages/playground/test-utils/worker-entry.js

@@ -1,8 +1,16 @@
 import {getAssetFromKV} from '@cloudflare/kv-asset-handler';
 
 export default function setup({handleRequest, indexTemplate}) {
-  // Mock Oxygen global
-  globalThis.Oxygen = {env: globalThis};
+  // TODO: Switch to module syntax and grab variables that way instead.
+  const varAllowList = ['PRIVATE_VARIABLE', 'HYDROGEN_ENABLE_WORKER_STREAMING'];
+
+  globalThis.process = {env: {}};
+
+  varAllowList.forEach((key) => {
+    if (globalThis[key]) {
+      process.env[key] = globalThis[key];
+    }
+  });
 
   function isAsset(url) {
     return /\.(png|jpe?g|gif|css|js|svg|ico|map)$/i.test(url.pathname);