Dev: Improve the browser opening experience

code/core/assets/server/openBrowser.applescript

@@ -0,0 +1,94 @@
+(*
+Copyright (c) 2015-present, Facebook, Inc.
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*)
+
+property targetTab: null
+property targetTabIndex: -1
+property targetWindow: null
+property theProgram: "Google Chrome"
+
+on run argv
+  set theURL to item 1 of argv
+  set matchURL to item 2 of argv
+
+  -- Allow requested program to be optional,
+  -- default to Google Chrome
+  if (count of argv) > 2 then
+    set theProgram to item 3 of argv
+  end if
+
+  using terms from application "Google Chrome"
+    tell application theProgram
+
+      if (count every window) = 0 then
+        make new window
+      end if
+
+      -- 1: Looking for tab running debugger
+      -- then, Reload debugging tab if found
+      -- then return
+      set found to my lookupTabWithUrl(matchURL)
+      if found then
+        set targetWindow's active tab index to targetTabIndex
+        tell targetTab to reload
+        tell targetWindow to activate
+        set index of targetWindow to 1
+        return
+      end if
+
+      -- 2: Looking for Empty tab
+      -- In case debugging tab was not found
+      -- We try to find an empty tab instead
+      set found to my lookupTabWithUrl("chrome://newtab/")
+      if found then
+        set targetWindow's active tab index to targetTabIndex
+        set URL of targetTab to theURL
+        tell targetWindow to activate
+        return
+      end if
+
+      -- 3: Create new tab
+      -- both debugging and empty tab were not found
+      -- make a new tab with url
+      tell window 1
+        activate
+        make new tab with properties {URL:theURL}
+      end tell
+    end tell
+  end using terms from
+end run
+
+-- Function:
+-- Lookup tab with given url
+-- if found, store tab, index, and window in properties
+-- (properties were declared on top of file)
+on lookupTabWithUrl(lookupUrl)
+  using terms from application "Google Chrome"
+    tell application theProgram
+      -- Find a tab with the given url
+      set found to false
+      set theTabIndex to -1
+      repeat with theWindow in every window
+        set theTabIndex to 0
+        repeat with theTab in every tab of theWindow
+          set theTabIndex to theTabIndex + 1
+          if (theTab's URL as string) contains lookupUrl then
+            -- assign tab, tab index, and window to properties
+            set targetTab to theTab
+            set targetTabIndex to theTabIndex
+            set targetWindow to theWindow
+            set found to true
+            exit repeat
+          end if
+        end repeat
+
+        if found then
+          exit repeat
+        end if
+      end repeat
+    end tell
+  end using terms from
+  return found
+end lookupTabWithUrl

code/core/src/core-server/dev-server.ts

@@ -16,7 +16,7 @@ import { getServerChannel } from './utils/get-server-channel';
 import { getAccessControlMiddleware } from './utils/getAccessControlMiddleware';
 import { getStoryIndexGenerator } from './utils/getStoryIndexGenerator';
 import { getMiddleware } from './utils/middleware';
-import { openInBrowser } from './utils/open-in-browser';
+import { openInBrowser } from './utils/open-browser/open-in-browser';
 import { getServerAddresses } from './utils/server-address';
 import { getServer } from './utils/server-init';
 import { useStatics } from './utils/server-statics';

code/core/src/core-server/utils/open-in-browser.ts → code/core/src/core-server/utils/open-browser/open-in-browser.ts

@@ -3,10 +3,27 @@ import { logger } from 'storybook/internal/node-logger';
 import open from 'open';
 import { dedent } from 'ts-dedent';
 
+import { openBrowser } from './opener';
+
 export async function openInBrowser(address: string) {
+  let errorOccured = false;
+
+  try {
+    await openBrowser(address);
+  } catch (error) {
+    errorOccured = true;
+  }
+
   try {
-    await open(address);
+    if (errorOccured) {
+      await open(address);
+      errorOccured = false;
+    }
   } catch (error) {
+    errorOccured = true;
+  }
+
+  if (errorOccured) {
     logger.error(dedent`
         Could not open ${address} inside a browser. If you're running this command inside a
         docker container or on a CI, you need to pass the '--ci' flag to prevent opening a

code/core/src/core-server/utils/open-browser/opener.ts

@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ */
+import { execSync } from 'node:child_process';
+import { join } from 'node:path';
+
+import spawn from 'cross-spawn';
+import open, { type App } from 'open';
+import picocolors from 'picocolors';
+
+import { resolvePackageDir } from '../../../common';
+
+// https://github.com/sindresorhus/open#app
+const OSX_CHROME = 'google chrome';
+
+const Actions = Object.freeze({
+  NONE: 0,
+  BROWSER: 1,
+  SCRIPT: 2,
+});
+
+function getBrowserEnv() {
+  // Attempt to honor this environment variable.
+  // It is specific to the operating system.
+  // See https://github.com/sindresorhus/open#app for documentation.
+  const value = process.env.BROWSER;
+  const args = process.env.BROWSER_ARGS ? process.env.BROWSER_ARGS.split(' ') : [];
+  let action;
+  if (!value) {
+    // Default.
+    action = Actions.BROWSER;
+  } else if (value.toLowerCase().endsWith('.js')) {
+    action = Actions.SCRIPT;
+  } else if (value.toLowerCase() === 'none') {
+    action = Actions.NONE;
+  } else {
+    action = Actions.BROWSER;
+  }
+  return { action, value, args };
+}
+
+function executeNodeScript(scriptPath: string, url: string) {
+  const extraArgs = process.argv.slice(2);
+  const child = spawn(process.execPath, [scriptPath, ...extraArgs, url], {
+    stdio: 'inherit',
+  });
+  child.on('close', (code) => {
+    if (code !== 0) {
+      console.log();
+      console.log(picocolors.red('The script specified as BROWSER environment variable failed.'));
+      console.log(`${picocolors.cyan(scriptPath)} exited with code ${code}.`);
+      console.log();
+      return;
+    }
+  });
+  return true;
+}
+
+function startBrowserProcess(
+  browser: App | readonly App[] | undefined,
+  url: string,
+  args: string[]
+) {
+  // If we're on OS X, the user hasn't specifically
+  // requested a different browser, we can try opening
+  // Chrome with AppleScript. This lets us reuse an
+  // existing tab when possible instead of creating a new one.
+  const shouldTryOpenChromiumWithAppleScript =
+    process.platform === 'darwin' && (typeof browser !== 'string' || browser === OSX_CHROME);
+
+  if (shouldTryOpenChromiumWithAppleScript) {
+    // Will use the first open browser found from list
+    const supportedChromiumBrowsers = [
+      'Google Chrome Canary',
+      'Google Chrome Dev',
+      'Google Chrome Beta',
+      'Google Chrome',
+      'Microsoft Edge',
+      'Brave Browser',
+      'Arc',
+      'Vivaldi',
+      'Chromium',
+    ];
+
+    for (const chromiumBrowser of supportedChromiumBrowsers) {
+      try {
+        // Try our best to reuse existing tab
+        // on OSX Chromium-based browser with AppleScript
+        execSync(`ps cax | grep "${chromiumBrowser}"`);
+        const pathToApplescript = join(
+          resolvePackageDir('storybook'),
+          'assets',
+          'server',
+          'openBrowser.applescript'
+        );
+
+        const command = `osascript "${pathToApplescript}" \"`
+          .concat(encodeURI(url), '" "')
+          .concat(
+            process.env.OPEN_MATCH_HOST_ONLY === 'true'
+              ? encodeURI(new URL(url).origin)
+              : encodeURI(url),
+            '" "'
+          )
+          .concat(chromiumBrowser, '"');
+
+        execSync(command, {
+          cwd: __dirname,
+        });
+
+        return true;
+      } catch (err) {
+        // Ignore errors.
+      }
+    }
+  }
+
+  // Another special case: on OS X, check if BROWSER has been set to "open".
+  // In this case, instead of passing `open` to `opn` (which won't work),
+  // just ignore it (thus ensuring the intended behavior, i.e. opening the system browser):
+  // https://github.com/facebook/create-react-app/pull/1690#issuecomment-283518768
+  // @ts-expect-error - browser is a string
+  if (process.platform === 'darwin' && browser === 'open') {
+    browser = undefined;
+  }
+
+  // If there are arguments, they must be passed as array with the browser
+  if (typeof browser === 'string' && args.length > 0) {
+    // @ts-expect-error - browser is a string
+    browser = [browser].concat(args);
+  }
+
+  // Fallback to open
+  // (It will always open new tab)
+  try {
+    const options = { app: browser, wait: false, url: true };
+    open(url, options).catch(() => {}); // Prevent `unhandledRejection` error.
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * Reads the BROWSER environment variable and decides what to do with it. Returns true if it opened
+ * a browser or ran a node.js script, otherwise false.
+ */
+export function openBrowser(url: string) {
+  const { action, value, args } = getBrowserEnv();
+  switch (action) {
+    case Actions.NONE: {
+      // Special case: BROWSER="none" will prevent opening completely.
+      return false;
+    }
+    case Actions.SCRIPT: {
+      if (!value) {
+        throw new Error('BROWSER environment variable is not set.');
+      }
+      return executeNodeScript(value, url);
+    }
+    case Actions.BROWSER: {
+      return startBrowserProcess(value as App | readonly App[] | undefined, url, args);
+    }
+    default: {
+      throw new Error('Not implemented.');
+    }
+  }
+}