@shopify/hydrogen 1.3.1 → 1.3.2

package/dist/node/framework/plugins/vite-plugin-platform-entry.js

@@ -9,10 +9,23 @@ const magic_string_1 = __importDefault(require("magic-string"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
 const fast_glob_1 = __importDefault(require("fast-glob"));
+const vite_js_1 = require("../../utilities/vite.js");
 const SSR_BUNDLE_NAME = 'index.js';
 // Keep this in the outer scope to share it
 // across client <> server builds.
 let clientBuildPath;
+/* -- Plugin notes:
+ * This plugin simplifies the way a platform entry file imports user files. This is
+ * needed to write generic integrations with different platform providers.
+ *
+ * Instead of using relative paths:
+ * `import handleRequest from '../../<arbitrary_path>/src/App.server';`
+ * `import indexTemplate from '../../<arbitrary_path>/dist/client/index.html?raw';`
+ *
+ *  It allows importing from a known static path which dynamically resolves the user files:
+ * `import {handleRequest, indexTemplate} from '@shopify/hydrogen/platforms';`
+ *
+ */
 exports.default = () => {
     let config;
     let isESM;
@@ -23,7 +36,7 @@ exports.default = () => {
             config = _config;
             if (config.build.ssr) {
                 const { output = {} } = config.build.rollupOptions || {};
-                const { format = '' } = (Array.isArray(output) ? output[0] : output) || {};
+                const { format = vite_js_1.isVite3 ? 'es' : '' } = (Array.isArray(output) ? output[0] : output) || {};
                 isESM = Boolean(process.env.WORKER) || ['es', 'esm'].includes(format);
             }
         },

package/dist/node/framework/plugins/vite-plugin-ssr-interop.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+/* -- Plugin notes:
+ * This plugin makes sure we don't leak server logic to the browser when importing
+ * the `useEnvContext` utility.
+ */
 exports.default = () => {
     return {
-        name: 'vite-plugin-ssr-interop',
+        name: 'hydrogen:ssr-interop',
         enforce: 'pre',
         transform(code, id, options = {}) {
             if (options.ssr && id.includes('foundation/ssr-interop')) {

package/dist/node/framework/viteception.js

@@ -2,12 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.viteception = void 0;
 const vite_1 = require("vite");
+const vite_js_1 = require("../utilities/vite.js");
 async function viteception(paths, options) {
     const isWorker = process.env.WORKER;
     delete process.env.WORKER;
     const server = await (0, vite_1.createServer)({
         clearScreen: false,
-        server: { middlewareMode: 'ssr' },
+        server: {
+            middlewareMode: vite_js_1.isVite3 ? true : 'ssr',
+            hmr: false,
+        },
+        // @ts-ignore
+        appType: 'custom',
         ...options,
     });
     if (isWorker) {

package/dist/node/utilities/vite.d.ts

@@ -0,0 +1 @@
+export declare const isVite3: any;

package/dist/node/utilities/vite.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isVite3 = void 0;
+// `version` is only exported in Vite 3
+const vite = __importStar(require("vite"));
+// @ts-ignore
+exports.isVite3 = vite.version?.startsWith('3.');

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -119,7 +119,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "serve-static": "^1.14.1",
-    "vite": "^2.9.0"
+    "vite": "^2.9.0 || ^3.0.0"
   },
   "peerDependenciesMeta": {
     "body-parser": {
@@ -151,7 +151,7 @@
     "react-helmet-async": "^1.3.0",
     "serve-static": "^1.15.0",
     "set-cookie-parser": "^2.5.0",
-    "undici": "^5.5.1",
+    "undici": "^5.8.2",
     "uuid": "^8.3.2",
     "vite-plugin-inspect": "^0.3.6",
     "web-streams-polyfill": "^3.2.0",

package/vendor/react-server-dom-vite/cjs/react-server-dom-vite-plugin.js

@@ -14,9 +14,9 @@
 
 var esModuleLexer = require('es-module-lexer');
 var MagicString = require('magic-string');
-var vite = require('vite');
 var fs = require('fs');
 var path = require('path');
+var vite = require('vite');
 
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
@@ -94,6 +94,10 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
 
 var assign = Object.assign;
 
+var normalizePath = vite.normalizePath,
+    transformWithEsbuild = vite.transformWithEsbuild,
+    createServer = vite.createServer;
+var isVite3 = vite.version && vite.version.startsWith('3.');
 var rscViteFileRE = /\/react-server-dom-vite.js/;
 var noProxyRE = /[&?]no-proxy($|&)/;
 
@@ -267,11 +271,11 @@ function ReactFlightVitePlugin() {
         var injectGlobs = function (clientComponents) {
           var importerPath = path.dirname(id);
           var importers = clientComponents.map(function (absolutePath) {
-            return vite.normalizePath(path.relative(importerPath, absolutePath));
+            return normalizePath(path.relative(importerPath, absolutePath));
           });
           var injectedGlobs = "Object.assign(Object.create(null), " + importers.map(function (glob) {
             return (// Mark the globs to modify the result after Vite resolves them.
-              "\n/* HASH_BEGIN */ " + ("import.meta.glob('" + vite.normalizePath(glob) + "') /* HASH_END */")
+              "\n/* HASH_BEGIN */ " + ("import.meta.glob('" + normalizePath(glob) + "') /* HASH_END */")
             );
           }).join(', ') + ");";
           s.replace(INJECTING_RE, injectedGlobs);
@@ -358,7 +362,7 @@ async function proxyClientComponent(filepath, src) {
     src = await fs.promises.readFile(filepath, 'utf-8');
   }
 
-  var _await$transformWithE = await vite.transformWithEsbuild(src, filepath),
+  var _await$transformWithE = await transformWithEsbuild(src, filepath),
       code = _await$transformWithE.code;
 
   var _parse = esModuleLexer.parse(code),
@@ -407,12 +411,14 @@ function findClientBoundaries(moduleGraph) {
 
 async function findClientBoundariesForClientBuild(serverEntries, optimizeBoundaries, root) {
   // Viteception
-  var server = await vite.createServer({
+  var server = await createServer({
     root: root,
     clearScreen: false,
     server: {
-      middlewareMode: 'ssr'
-    }
+      middlewareMode: isVite3 ? true : 'ssr',
+      hmr: false
+    },
+    appType: 'custom'
   });
 
   try {
@@ -435,9 +441,10 @@ var hashImportsPlugin = {
     if (rscViteFileRE.test(id)) {
       var s = new MagicString(code);
       s.replace(/\/\*\s*HASH_BEGIN\s*\*\/\s*([^]+?)\/\*\s*HASH_END\s*\*\//gm, function (_, imports) {
-        return imports.trim().replace(/"([^"]+?)":/gm, function (__, relativePath) {
+        return imports.trim().replace(/"([^"]+?)":/gm, function (all, relativePath) {
+          if (relativePath === '__VITE_PRELOAD__') return all;
           var absolutePath = path.resolve(path.dirname(id.split('?')[0]), relativePath);
-          return "\"" + getComponentId(vite.normalizePath(absolutePath)) + "\":";
+          return "\"" + getComponentId(normalizePath(absolutePath)) + "\":";
         });
       });
       return {
@@ -529,17 +536,20 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
   });
 }
 
-function resolveModPath(modPath, dirname, retryExtension) {
-  var absolutePath = '';
+var RESOLVE_EXTENSIONS = ['', '.js', '.ts', '.jsx', '.tsx', '/index', '/index.js', '/index.ts', '/index.jsx', '/index.tsx']; // Resolve relative paths  and aliases. Examples:
+// - import {XYZ} from '~/components' => import {XYZ} from '<absolute>/src/components/index.ts'
+// - import {XYZ} from '/src/component.client' => import {XYZ} from '<absolute>/src/component.client.jsx'`
 
-  try {
-    absolutePath = modPath.startsWith('.') ? vite.normalizePath(path.resolve(dirname, modPath)) : modPath;
-    return vite.normalizePath(require.resolve(absolutePath + (retryExtension || '')));
-  } catch (error) {
-    if (!/\.[jt]sx?$/.test(absolutePath) && retryExtension !== '.tsx') {
-      // Node cannot infer .[jt]sx extensions.
-      // Append them here and retry a couple of times.
-      return resolveModPath(absolutePath, dirname, retryExtension ? '.tsx' : '.jsx');
+function resolveModPath(modPath, dirname) {
+  var extensions = /\.[jt]sx?$/.test(modPath) ? [''] : RESOLVE_EXTENSIONS;
+
+  for (var i = 0; i < extensions.length; i++) {
+    var extension = extensions[i];
+
+    try {
+      var absolutePath = modPath.startsWith('.') ? normalizePath(path.resolve(dirname, modPath)) : modPath;
+      return normalizePath(require.resolve(absolutePath + extension));
+    } catch (error) {// Do not throw, this is likely a virtual module or another exception
     }
   }
 }
@@ -551,7 +561,7 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
   var _id$split = id.split('?'),
       source = _id$split[0];
 
-  var dirname = vite.normalizePath(path.dirname(source));
+  var dirname = normalizePath(path.dirname(source));
 
   var _parse2 = esModuleLexer.parse(code),
       rawImports = _parse2[0],
@@ -582,7 +592,7 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
 
     if (modPath && modPath.startsWith('/src/')) {
       // Vite default alias
-      modPath = vite.normalizePath(path.join(root, modPath));
+      modPath = normalizePath(path.join(root, modPath));
     }
 
     var resolvedPath = resolveModPath(modPath, dirname);

package/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.development.server.js

@@ -168,6 +168,11 @@ function processModelChunk(request, id, model) {
   var row = serializeRowHeader('J', id) + json + '\n';
   return stringToChunk(row);
 }
+function processReferenceChunk(request, id, reference) {
+  var json = stringify(reference);
+  var row = serializeRowHeader('J', id) + json + '\n';
+  return stringToChunk(row);
+}
 function processModuleChunk(request, id, moduleMetaData) {
   var json = stringify(moduleMetaData);
   var row = serializeRowHeader('M', id) + json + '\n';
@@ -510,6 +515,7 @@ var startInlineScript = stringToPrecomputedChunk('<script>');
 var endInlineScript = stringToPrecomputedChunk('</script>');
 var startScriptSrc = stringToPrecomputedChunk('<script src="');
 var startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
+var scriptIntegirty = stringToPrecomputedChunk('" integrity="');
 var endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
 var textSeparator = stringToPrecomputedChunk('<!-- -->');
@@ -987,6 +993,10 @@ function getOrCreateServerContext(globalName) {
   return ContextRegistry[globalName];
 }
 
+var PENDING = 0;
+var COMPLETED = 1;
+var ABORTED = 3;
+var ERRORED = 4;
 var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function defaultErrorHandler(error) {
@@ -997,7 +1007,8 @@ var OPEN = 0;
 var CLOSING = 1;
 var CLOSED = 2;
 function createRequest(model, bundlerConfig, onError, context, identifierPrefix) {
-  var pingedSegments = [];
+  var abortSet = new Set();
+  var pingedTasks = [];
   var request = {
     status: OPEN,
     fatalError: null,
@@ -1006,7 +1017,8 @@ function createRequest(model, bundlerConfig, onError, context, identifierPrefix)
     cache: new Map(),
     nextChunkId: 0,
     pendingChunks: 0,
-    pingedSegments: pingedSegments,
+    abortableTasks: abortSet,
+    pingedTasks: pingedTasks,
     completedModuleChunks: [],
     completedJSONChunks: [],
     completedErrorChunks: [],
@@ -1022,8 +1034,8 @@ function createRequest(model, bundlerConfig, onError, context, identifierPrefix)
   };
   request.pendingChunks++;
   var rootContext = createRootContext(context);
-  var rootSegment = createSegment(request, model, rootContext);
-  pingedSegments.push(rootSegment);
+  var rootTask = createTask(request, model, rootContext, abortSet);
+  pingedTasks.push(rootTask);
   return request;
 }
 
@@ -1121,28 +1133,30 @@ function attemptResolveElement(type, key, ref, props) {
   throw new Error("Unsupported server component type: " + describeValueForErrorMessage(type));
 }
 
-function pingSegment(request, segment) {
-  var pingedSegments = request.pingedSegments;
-  pingedSegments.push(segment);
+function pingTask(request, task) {
+  var pingedTasks = request.pingedTasks;
+  pingedTasks.push(task);
 
-  if (pingedSegments.length === 1) {
+  if (pingedTasks.length === 1) {
     scheduleWork(function () {
       return performWork(request);
     });
   }
 }
 
-function createSegment(request, model, context) {
+function createTask(request, model, context, abortSet) {
   var id = request.nextChunkId++;
-  var segment = {
+  var task = {
     id: id,
+    status: PENDING,
     model: model,
     context: context,
     ping: function () {
-      return pingSegment(request, segment);
+      return pingTask(request, task);
     }
   };
-  return segment;
+  abortSet.add(task);
+  return task;
 }
 
 function serializeByValueID(id) {
@@ -1377,12 +1391,12 @@ function resolveModelToJSON(request, parent, key, value) {
       }
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-        // Something suspended, we'll need to create a new segment and resolve it later.
+        // Something suspended, we'll need to create a new task and resolve it later.
         request.pendingChunks++;
-        var newSegment = createSegment(request, value, getActiveContext());
-        var ping = newSegment.ping;
+        var newTask = createTask(request, value, getActiveContext(), request.abortableTasks);
+        var ping = newTask.ping;
         x.then(ping, ping);
-        return serializeByRefID(newSegment.id);
+        return serializeByRefID(newTask.id);
       } else {
         logRecoverableError(request, x); // Something errored. We'll still send everything we have up until this point.
         // We'll replace this element with a lazy reference that throws on the client
@@ -1590,34 +1604,43 @@ function emitProviderChunk(request, id, contextName) {
   request.completedJSONChunks.push(processedChunk);
 }
 
-function retrySegment(request, segment) {
-  switchContext(segment.context);
+function retryTask(request, task) {
+  if (task.status !== PENDING) {
+    // We completed this by other means before we had a chance to retry it.
+    return;
+  }
+
+  switchContext(task.context);
 
   try {
-    var _value3 = segment.model;
+    var _value3 = task.model;
 
     while (typeof _value3 === 'object' && _value3 !== null && _value3.$$typeof === REACT_ELEMENT_TYPE) {
       // TODO: Concatenate keys of parents onto children.
       var element = _value3; // Attempt to render the server component.
-      // Doing this here lets us reuse this same segment if the next component
+      // Doing this here lets us reuse this same task if the next component
       // also suspends.
 
-      segment.model = _value3;
+      task.model = _value3;
       _value3 = attemptResolveElement(element.type, element.key, element.ref, element.props);
     }
 
-    var processedChunk = processModelChunk(request, segment.id, _value3);
+    var processedChunk = processModelChunk(request, task.id, _value3);
     request.completedJSONChunks.push(processedChunk);
+    request.abortableTasks.delete(task);
+    task.status = COMPLETED;
   } catch (x) {
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
       // Something suspended again, let's pick it back up later.
-      var ping = segment.ping;
+      var ping = task.ping;
       x.then(ping, ping);
       return;
     } else {
+      request.abortableTasks.delete(task);
+      task.status = ERRORED;
       logRecoverableError(request, x); // This errored, we need to serialize this error to the
 
-      emitErrorChunk(request, segment.id, x);
+      emitErrorChunk(request, task.id, x);
     }
   }
 }
@@ -1630,12 +1653,12 @@ function performWork(request) {
   prepareToUseHooksForRequest(request);
 
   try {
-    var pingedSegments = request.pingedSegments;
-    request.pingedSegments = [];
+    var pingedTasks = request.pingedTasks;
+    request.pingedTasks = [];
 
-    for (var i = 0; i < pingedSegments.length; i++) {
-      var segment = pingedSegments[i];
-      retrySegment(request, segment);
+    for (var i = 0; i < pingedTasks.length; i++) {
+      var task = pingedTasks[i];
+      retryTask(request, task);
     }
 
     if (request.destination !== null) {
@@ -1651,6 +1674,15 @@ function performWork(request) {
   }
 }
 
+function abortTask(task, request, errorId) {
+  task.status = ABORTED; // Instead of emitting an error per task.id, we emit a model that only
+  // has a single value referencing the error.
+
+  var ref = serializeByValueID(errorId);
+  var processedChunk = processReferenceChunk(request, task.id, ref);
+  request.completedJSONChunks.push(processedChunk);
+}
+
 function flushCompletedChunks(request, destination) {
   beginWriting();
 
@@ -1750,6 +1782,34 @@ function startFlowing(request, destination) {
     logRecoverableError(request, error);
     fatalError(request, error);
   }
+} // This is called to early terminate a request. It creates an error at all pending tasks.
+
+function abort(request, reason) {
+  try {
+    var abortableTasks = request.abortableTasks;
+
+    if (abortableTasks.size > 0) {
+      // We have tasks to abort. We'll emit one error row and then emit a reference
+      // to that row from every row that's still remaining.
+      var _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason;
+
+      logRecoverableError(request, _error);
+      request.pendingChunks++;
+      var errorId = request.nextChunkId++;
+      emitErrorChunk(request, errorId, _error);
+      abortableTasks.forEach(function (task) {
+        return abortTask(task, request, errorId);
+      });
+      abortableTasks.clear();
+    }
+
+    if (request.destination !== null) {
+      flushCompletedChunks(request, request.destination);
+    }
+  } catch (error) {
+    logRecoverableError(request, error);
+    fatalError(request, error);
+  }
 }
 
 function importServerContexts(contexts) {
@@ -1787,6 +1847,22 @@ function renderToReadableStream(model, options) {
     }
   }), {}, // Manifest, not used
   options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined);
+
+  if (options && options.signal) {
+    var signal = options.signal;
+
+    if (signal.aborted) {
+      abort(request, signal.reason);
+    } else {
+      var listener = function () {
+        abort(request, signal.reason);
+        signal.removeEventListener('abort', listener);
+      };
+
+      signal.addEventListener('abort', listener);
+    }
+  }
+
   var stream = new ReadableStream({
     type: 'bytes',
     start: function (controller) {