Introduce a "--storybook" CLI parameter for "heft start"

Author: octogonz

apps/heft/src/cli/actions/StartAction.ts

@@ -10,6 +10,7 @@ import { Logging } from '../../utilities/Logging';
 export class StartAction extends HeftActionBase {
   private _buildStandardParameters!: IBuildStageStandardParameters;
   private _cleanFlag!: CommandLineFlagParameter;
+  private _storybookFlag!: CommandLineFlagParameter;
 
   public constructor(heftActionOptions: IHeftActionBaseOptions) {
     super(
@@ -31,6 +32,13 @@ export class StartAction extends HeftActionBase {
       parameterLongName: '--clean',
       description: 'If specified, clean the package before starting the development server.'
     });
+
+    // TODO: Expose an API for custom CLI parameters similar to HeftSession.registerAction()
+    this._storybookFlag = this.defineFlagParameter({
+      parameterLongName: '--storybook',
+      description:
+        '(EXPERIMENTAL) Used by the "@rushstack/heft-storybook-plugin" package to launch Storybook.'
+    });
   }
 
   protected async actionExecuteAsync(): Promise<void> {
@@ -52,6 +60,7 @@ export class StartAction extends HeftActionBase {
       watchMode: true,
       serveMode: true
     };
+
     await buildStage.initializeAsync(buildStageOptions);
     await buildStage.executeAsync();
   }

apps/heft/src/cli/test/__snapshots__/CommandLineHelp.test.ts.snap

@@ -67,7 +67,7 @@ Optional arguments:
 exports[`CommandLineHelp prints the help for each action: start 1`] = `
 "usage: heft start [-h] [-v] [--production] [--locale LOCALE] [-l]
                   [--typescript-max-write-parallelism PARALLEILSM]
-                  [--max-old-space-size SIZE] [--clean]
+                  [--max-old-space-size SIZE] [--clean] [--storybook]
                   
 
 Optional arguments:
@@ -85,6 +85,9 @@ Optional arguments:
                         Used to specify the max old space size.
   --clean               If specified, clean the package before starting the 
                         development server.
+  --storybook           (EXPERIMENTAL) Used by the 
+                        \\"@rushstack/heft-storybook-plugin\\" package to launch 
+                        Storybook.
 "
 `;
 

build-tests-samples/heft-storybook-react-tutorial/.vscode/launch.json

@@ -4,25 +4,15 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Debug fake.js",
-      "program": "${workspaceFolder}/fake.js",
-      "args": [ "-p", "6006"],
-      "cwd": "${workspaceFolder}",
-      "console": "integratedTerminal",
-      "sourceMaps": false
-    },
     {
       "type": "node",
       "request": "launch",
       "name": "Debug \"heft start\"",
       "program": "${workspaceFolder}/node_modules/@rushstack/heft/lib/start.js",
       "cwd": "${workspaceFolder}",
-      "args": ["--debug", "start"],
+      "args": ["--debug", "start", "--storybook"],
       "console": "integratedTerminal",
-      "sourceMaps": true
+      "sourceMaps": false
     },
   ]
 }

heft-plugins/heft-storybook-plugin/src/StorybookPlugin.ts

@@ -75,6 +75,18 @@ export class StorybookPlugin implements IHeftPlugin<IStorybookPluginOptions> {
     this._startupModulePath = options.startupModulePath;
 
     heftSession.hooks.build.tap(PLUGIN_NAME, (build: IBuildStageContext) => {
+      // TODO: Expose an API for custom CLI parameters similar to HeftSession.registerAction()
+      if (process.argv.indexOf('--storybook') < 0) {
+        this._logger.terminal.writeVerboseLine(
+          'The command line does not include "--storybook", so bundling will proceed without Storybook'
+        );
+        return;
+      }
+
+      this._logger.terminal.writeVerboseLine(
+        'The command line includes "--storybook", redirecting Webpack to Storybook'
+      );
+
       build.hooks.preCompile.tap(PLUGIN_NAME, (preCompile: IPreCompileSubstage) => {
         preCompile.hooks.run.tap(PLUGIN_NAME, () => {
           this._onPreCompile(heftSession, heftConfiguration);