Repository: parcel-bundler/parcel
File: packages/runtimes/hmr/src/loaders/hmr-runtime.js (JavaScript)

Code before:
  // Web extension context
  var extCtx =
    typeof browser === 'undefined'
      ? typeof chrome === 'undefined'
        ? null
        : chrome
      : browser;

  // Safari doesn't support sourceURL in error stacks.
  // eval may also be disabled via CSP, so do a quick check.
  var supportsSourceURL = false;
  try {
    (0, eval)('throw new Error("test"); //# sourceURL=test.js');
  } catch (err) {
    supportsSourceURL = err.stack.includes('test.js');
  }

  // $FlowFixMe
  ws.onmessage = async function (event /*: {data: string, ...} */) {
    checkedAssets = ({} /*: {|[string]: boolean|} */);
    assetsToAccept = [];
    assetsToDispose = [];

    var data /*: HMRMessage */ = JSON.parse(event.data);

    if (data.type === 'partial-update') {
      // Received a partial update, store it until the update event comes through
      partialAssets.push(...data.assets);
    } else if (data.type === 'update') {
      // Remove error overlay if there is one
      if (typeof document !== 'undefined') {
        removeErrorOverlay();
      }

      let allAssets = [...partialAssets, ...data.assets];
      // Clean up partial assets so we don't leak memory
      partialAssets = [];

      let assets = data.assets.filter(asset => asset.envHash === HMR_ENV_HASH);

      // Handle HMR Update
      let handled = assets.every(asset => {
        return (
          asset.type === 'css' ||
          (asset.type === 'js' &&
            hmrAcceptCheck(module.bundle.root, asset.id, asset.depsByBundle))
        );
      });

      if (handled) {
        console.clear();

Review comment (bug):
Is there a potential edge case where we "lose" the update message and are left with incomplete / incorrect data here? Should a groups of `partial-update` messages have some sort of unique identifier? We know how many partial-updates we're going to send so they could even contain an `x of y` type thing.

Not sure what the delivery reliability for websockets is like, and whether it's worth the additional complexity.

Code after:
  var extCtx =
    typeof browser === 'undefined'
      ? typeof chrome === 'undefined'
        ? null
        : chrome
      : browser;

  // Safari doesn't support sourceURL in error stacks.
  // eval may also be disabled via CSP, so do a quick check.
  var supportsSourceURL = false;
  try {
    (0, eval)('throw new Error("test"); //# sourceURL=test.js');
  } catch (err) {
    supportsSourceURL = err.stack.includes('test.js');
  }

  // $FlowFixMe
  ws.onmessage = async function (event /*: {data: string, ...} */) {
    checkedAssets = ({} /*: {|[string]: boolean|} */);
    assetsToAccept = [];
    assetsToDispose = [];

    var data /*: HMRMessage */ = JSON.parse(event.data);

    if (data.type === 'reload') {
      fullReload();
    } else if (data.type === 'update') {
      // Remove error overlay if there is one
      if (typeof document !== 'undefined') {
        removeErrorOverlay();
      }

      let assets = data.assets.filter(asset => asset.envHash === HMR_ENV_HASH);

      // Handle HMR Update
      let handled = assets.every(asset => {
        return (
          asset.type === 'css' ||
          (asset.type === 'js' &&
            hmrAcceptCheck(module.bundle.root, asset.id, asset.depsByBundle))
        );
      });

      if (handled) {
        console.clear();

        // Dispatch custom event so other runtimes (e.g React Refresh) are aware.
        if (
          typeof window !== 'undefined' &&
          typeof CustomEvent !== 'undefined'
        ) {