@storybook/cli 6.5.0-alpha.9 → 6.5.0-beta.2

package/dist/esm/repro.js

@@ -25,9 +25,9 @@ var _scripts = require("./repro-generators/scripts");
 
 var configs = _interopRequireWildcard(require("./repro-generators/configs"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -169,6 +169,7 @@ const repro = async ({
     }));
   } catch (error) {
     logger.error('🚨 Failed to create repro');
+    throw new Error(error);
   }
 };
 

package/dist/esm/typings.d.ts

@@ -0,0 +1,3 @@
+declare module '@storybook/codemod';
+declare module 'envinfo';
+declare module '@storybook/semver';

package/dist/esm/upgrade.js

@@ -3,12 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.upgrade = exports.addExtraFlags = exports.checkVersionConsistency = exports.isCorePackage = exports.getStorybookVersion = void 0;
+exports.upgrade = exports.isCorePackage = exports.getStorybookVersion = exports.checkVersionConsistency = exports.addExtraFlags = void 0;
+
+require("core-js/modules/es.array.sort.js");
 
 require("core-js/modules/es.promise.js");
 
 var _crossSpawn = require("cross-spawn");
 
+var _telemetry = require("@storybook/telemetry");
+
 var _semver = _interopRequireDefault(require("@storybook/semver"));
 
 var _nodeLogger = require("@storybook/node-logger");
@@ -19,8 +23,12 @@ var _helpers = require("./helpers");
 
 var _automigrate = require("./automigrate");
 
+const _excluded = ["prerelease", "skipCheck", "useNpm", "dryRun", "yes"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 const versionRegex = /(@storybook\/[^@]+)@(\S+)/;
 
 const getStorybookVersion = line => {
@@ -34,7 +42,7 @@ const getStorybookVersion = line => {
 };
 
 exports.getStorybookVersion = getStorybookVersion;
-const excludeList = ['@storybook/linter-config', '@storybook/design-system', '@storybook/ember-cli-storybook', '@storybook/semver', '@storybook/eslint-config-storybook', '@storybook/bench', '@storybook/addon-bench', '@storybook/addon-console', '@storybook/csf', '@storybook/storybook-deployer'];
+const excludeList = ['@storybook/linter-config', '@storybook/design-system', '@storybook/ember-cli-storybook', '@storybook/semver', '@storybook/eslint-config-storybook', '@storybook/bench', '@storybook/addon-bench', '@storybook/addon-console', '@storybook/csf', '@storybook/storybook-deployer', '@storybook/addon-postcss', '@storybook/react-docgen-typescript-plugin', '@storybook/babel-plugin-require-context-hook', '@storybook/builder-vite', '@storybook/mdx1-csf', '@storybook/mdx2-csf', '@storybook/expect', '@storybook/jest', '@storybook/test-runner', '@storybook/testing-library'];
 
 const isCorePackage = pkg => pkg.startsWith('@storybook/') && !pkg.startsWith('@storybook/preset-') && !excludeList.includes(pkg);
 
@@ -118,16 +126,26 @@ const addExtraFlags = (extraFlags, flags, {
 
 exports.addExtraFlags = addExtraFlags;
 
-const upgrade = async ({
-  prerelease,
-  skipCheck,
-  useNpm,
-  dryRun,
-  yes
-}) => {
+const upgrade = async _ref => {
+  let {
+    prerelease,
+    skipCheck,
+    useNpm,
+    dryRun,
+    yes
+  } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager(useNpm);
 
   (0, _helpers.commandLog)(`Checking for latest versions of '@storybook/*' packages`);
+
+  if (!options.disableTelemetry) {
+    (0, _telemetry.telemetry)('upgrade', {
+      prerelease
+    });
+  }
+
   let flags = [];
   if (!dryRun) flags.push('--upgrade');
   flags.push('--target');

package/dist/esm/versions.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// auto generated file, do not edit
+var _default = {
+  '@storybook/addon-a11y': '6.5.0-beta.2',
+  '@storybook/addon-actions': '6.5.0-beta.2',
+  '@storybook/addon-backgrounds': '6.5.0-beta.2',
+  '@storybook/addon-controls': '6.5.0-beta.2',
+  '@storybook/addon-docs': '6.5.0-beta.2',
+  '@storybook/addon-essentials': '6.5.0-beta.2',
+  '@storybook/addon-interactions': '6.5.0-beta.2',
+  '@storybook/addon-jest': '6.5.0-beta.2',
+  '@storybook/addon-links': '6.5.0-beta.2',
+  '@storybook/addon-measure': '6.5.0-beta.2',
+  '@storybook/addon-outline': '6.5.0-beta.2',
+  '@storybook/addon-storyshots': '6.5.0-beta.2',
+  '@storybook/addon-storyshots-puppeteer': '6.5.0-beta.2',
+  '@storybook/addon-storysource': '6.5.0-beta.2',
+  '@storybook/addon-toolbars': '6.5.0-beta.2',
+  '@storybook/addon-viewport': '6.5.0-beta.2',
+  '@storybook/addons': '6.5.0-beta.2',
+  '@storybook/angular': '6.5.0-beta.2',
+  '@storybook/api': '6.5.0-beta.2',
+  '@storybook/builder-webpack4': '6.5.0-beta.2',
+  '@storybook/builder-webpack5': '6.5.0-beta.2',
+  '@storybook/channel-postmessage': '6.5.0-beta.2',
+  '@storybook/channel-websocket': '6.5.0-beta.2',
+  '@storybook/channels': '6.5.0-beta.2',
+  '@storybook/cli': '6.5.0-beta.2',
+  '@storybook/client-api': '6.5.0-beta.2',
+  '@storybook/client-logger': '6.5.0-beta.2',
+  '@storybook/codemod': '6.5.0-beta.2',
+  '@storybook/components': '6.5.0-beta.2',
+  '@storybook/core': '6.5.0-beta.2',
+  '@storybook/core-client': '6.5.0-beta.2',
+  '@storybook/core-common': '6.5.0-beta.2',
+  '@storybook/core-events': '6.5.0-beta.2',
+  '@storybook/core-server': '6.5.0-beta.2',
+  '@storybook/csf-tools': '6.5.0-beta.2',
+  '@storybook/docs-tools': '6.5.0-beta.2',
+  '@storybook/ember': '6.5.0-beta.2',
+  '@storybook/html': '6.5.0-beta.2',
+  '@storybook/instrumenter': '6.5.0-beta.2',
+  '@storybook/manager-webpack4': '6.5.0-beta.2',
+  '@storybook/manager-webpack5': '6.5.0-beta.2',
+  '@storybook/node-logger': '6.5.0-beta.2',
+  '@storybook/postinstall': '6.5.0-beta.2',
+  '@storybook/preact': '6.5.0-beta.2',
+  '@storybook/preview-web': '6.5.0-beta.2',
+  '@storybook/react': '6.5.0-beta.2',
+  '@storybook/router': '6.5.0-beta.2',
+  '@storybook/server': '6.5.0-beta.2',
+  '@storybook/source-loader': '6.5.0-beta.2',
+  '@storybook/store': '6.5.0-beta.2',
+  '@storybook/svelte': '6.5.0-beta.2',
+  '@storybook/telemetry': '6.5.0-beta.2',
+  '@storybook/theming': '6.5.0-beta.2',
+  '@storybook/ui': '6.5.0-beta.2',
+  '@storybook/vue': '6.5.0-beta.2',
+  '@storybook/vue3': '6.5.0-beta.2',
+  '@storybook/web-components': '6.5.0-beta.2'
+};
+exports.default = _default;

package/dist/esm/window.d.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/modern/add.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.add = add;
-exports.addStorybookAddonToFile = exports.getPackageArg = exports.getInstalledStorybookVersion = exports.getPackageName = exports.storybookAddonScope = void 0;
+exports.storybookAddonScope = exports.getPackageName = exports.getPackageArg = exports.getInstalledStorybookVersion = exports.addStorybookAddonToFile = void 0;
 
 require("core-js/modules/es.promise.js");
 
@@ -77,14 +77,14 @@ const installAddon = (packageManager, addonName, isOfficialAddon) => {
 
 const addStorybookAddonToFile = (addonName, addonsFile, isOfficialAddon) => {
   const addonNameNoTag = addonName.split('@')[0];
-  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/register`));
+  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/manager`));
 
   if (alreadyRegistered) {
     return addonsFile;
   }
 
   const latestImportIndex = addonsFile.reduce((prev, curr, currIndex) => curr.startsWith('import') && curr.includes('register') ? currIndex : prev, -1);
-  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`, ...addonsFile.slice(latestImportIndex + 1)];
+  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/manager';`, ...addonsFile.slice(latestImportIndex + 1)];
 };
 
 exports.addStorybookAddonToFile = addStorybookAddonToFile;

package/dist/modern/automigrate/fixes/builder-vite.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.builderVite = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _csfTools = require("@storybook/csf-tools");
+
+var _coreCommon = require("@storybook/core-common");
+
+var _jsPackageManager = require("../../js-package-manager");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const logger = console;
+
+/**
+ * Is the user using 'storybook-builder-vite' in their project?
+ *
+ * If so, prompt them to upgrade to '@storybook/builder-vite'.
+ *
+ * - Add '@storybook/builder-vite' as dev dependency
+ * - Remove 'storybook-builder-vite' dependency
+ * - Add core.builder = '@storybook/builder-vite' to main.js
+ */
+const builderVite = {
+  id: 'builder-vite',
+
+  async check({
+    packageManager
+  }) {
+    const packageJson = packageManager.retrievePackageJson();
+    const {
+      mainConfig
+    } = (0, _coreCommon.getStorybookInfo)(packageJson);
+
+    if (!mainConfig) {
+      logger.warn('Unable to find storybook main.js config');
+      return null;
+    }
+
+    const main = await (0, _csfTools.readConfig)(mainConfig);
+    const builder = main.getFieldValue(['core', 'builder']);
+    const builderName = typeof builder === 'string' ? builder : builder === null || builder === void 0 ? void 0 : builder.name;
+
+    if (builderName !== 'storybook-builder-vite') {
+      return null;
+    }
+
+    return {
+      builder,
+      main,
+      packageJson
+    };
+  },
+
+  prompt({
+    builder
+  }) {
+    const builderFormatted = _chalk.default.cyan(JSON.stringify(builder, null, 2));
+
+    return (0, _tsDedent.default)`
+      We've detected you're using the community vite builder: ${builderFormatted}
+      
+      'storybook-builder-vite' is deprecated and now located at ${_chalk.default.cyan('@storybook/builder-vite')}.
+
+      We can upgrade your project to use the new builder automatically.
+      
+      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed')}
+    `;
+  },
+
+  async run({
+    result: {
+      builder,
+      main,
+      packageJson
+    },
+    packageManager,
+    dryRun
+  }) {
+    const {
+      dependencies = {},
+      devDependencies = {}
+    } = packageJson;
+    logger.info(`Removing existing 'storybook-builder-vite' dependency`);
+
+    if (!dryRun) {
+      delete dependencies['storybook-builder-vite'];
+      delete devDependencies['storybook-builder-vite'];
+      (0, _jsPackageManager.writePackageJson)(packageJson);
+    }
+
+    logger.info(`Adding '@storybook/builder-vite' as dev dependency`);
+
+    if (!dryRun) {
+      packageManager.addDependencies({
+        installAsDevDependencies: true
+      }, ['@storybook/builder-vite']);
+    }
+
+    logger.info(`Updating main.js to use vite builder`);
+
+    if (!dryRun) {
+      const updatedBuilder = typeof builder === 'string' ? '@storybook/builder-vite' : {
+        name: '@storybook/builder-vite',
+        options: builder.options
+      };
+      main.setFieldValue(['core', 'builder'], updatedBuilder);
+      await (0, _csfTools.writeConfig)(main);
+    }
+  }
+
+};
+exports.builderVite = builderVite;

package/dist/modern/automigrate/fixes/eslint-plugin.js

@@ -13,9 +13,9 @@ var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
 var _csfTools = require("@storybook/csf-tools");
 
-var _getEslintInfo = require("../helpers/getEslintInfo");
+var _coreCommon = require("@storybook/core-common");
 
-var _getStorybookInfo = require("../helpers/getStorybookInfo");
+var _getEslintInfo = require("../helpers/getEslintInfo");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -45,7 +45,7 @@ const eslintPlugin = {
       return null;
     }
 
-    const config = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
+    const config = (0, _coreCommon.getStorybookInfo)(packageJson);
     const {
       mainConfig
     } = config;

package/dist/modern/automigrate/fixes/index.js

@@ -18,6 +18,8 @@ var _mainjsFramework = require("./mainjsFramework");
 
 var _eslintPlugin = require("./eslint-plugin");
 
+var _builderVite = require("./builder-vite");
+
 var _types = require("../types");
 
 Object.keys(_types).forEach(function (key) {
@@ -31,5 +33,5 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin];
+const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite];
 exports.fixes = fixes;

package/dist/modern/automigrate/fixes/mainjsFramework.js

@@ -15,7 +15,7 @@ var _semver = _interopRequireDefault(require("@storybook/semver"));
 
 var _csfTools = require("@storybook/csf-tools");
 
-var _getStorybookInfo = require("../helpers/getStorybookInfo");
+var _coreCommon = require("@storybook/core-common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,7 +33,7 @@ const mainjsFramework = {
       mainConfig,
       framework,
       version: storybookVersion
-    } = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
+    } = (0, _coreCommon.getStorybookInfo)(packageJson);
 
     if (!mainConfig) {
       logger.warn('Unable to find storybook main.js config, skipping');

package/dist/modern/automigrate/fixes/webpack5.js

@@ -15,7 +15,7 @@ var _semver = _interopRequireDefault(require("@storybook/semver"));
 
 var _csfTools = require("@storybook/csf-tools");
 
-var _getStorybookInfo = require("../helpers/getStorybookInfo");
+var _coreCommon = require("@storybook/core-common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,7 +40,7 @@ const webpack5 = {
     const {
       mainConfig,
       version: storybookVersion
-    } = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
+    } = (0, _coreCommon.getStorybookInfo)(packageJson);
     const storybookCoerced = storybookVersion && ((_semver$coerce = _semver.default.coerce(storybookVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version);
 
     if (!storybookCoerced) {

package/dist/modern/automigrate/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/modern/babel-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateStorybookBabelConfig = exports.generateStorybookBabelConfigInCWD = void 0;
+exports.generateStorybookBabelConfigInCWD = exports.generateStorybookBabelConfig = void 0;
 
 require("core-js/modules/es.promise.js");
 

package/dist/modern/detect.js

@@ -3,15 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.detect = detect;
+exports.detectBuilder = detectBuilder;
 exports.detectFrameworkPreset = detectFrameworkPreset;
-exports.isStorybookInstalled = isStorybookInstalled;
 exports.detectLanguage = detectLanguage;
-exports.detect = detect;
+exports.isStorybookInstalled = isStorybookInstalled;
 
 var _path = _interopRequireDefault(require("path"));
 
 var _fs = _interopRequireDefault(require("fs"));
 
+var _findUp = _interopRequireDefault(require("find-up"));
+
 var _project_types = require("./project_types");
 
 var _helpers = require("./helpers");
@@ -20,6 +23,8 @@ var _jsPackageManager = require("./js-package-manager");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
+
 const hasDependency = (packageJson, name, matcher) => {
   var _packageJson$dependen, _packageJson$devDepen;
 
@@ -96,6 +101,52 @@ function detectFrameworkPreset(packageJson = {}) {
   });
   return result ? result.preset : _project_types.ProjectType.UNDETECTED;
 }
+/**
+ * Attempts to detect which builder to use, by searching for a vite config file.  If one is found, the vite builder
+ * will be used, otherwise, webpack4 is the default.
+ *
+ * @returns CoreBuilder
+ */
+
+
+function detectBuilder(packageManager) {
+  const viteConfig = _findUp.default.sync(viteConfigFiles);
+
+  if (viteConfig) {
+    (0, _helpers.paddedLog)('Detected vite project, setting builder to @storybook/builder-vite');
+    return _project_types.CoreBuilder.Vite;
+  }
+
+  try {
+    let out = '';
+
+    if (packageManager.type === 'npm') {
+      try {
+        // npm <= v7
+        out = packageManager.executeCommand('npm', ['ls', 'webpack']);
+      } catch (e2) {
+        // npm >= v8
+        out = packageManager.executeCommand('npm', ['why', 'webpack']);
+      }
+    } else {
+      out = packageManager.executeCommand('yarn', ['why', 'webpack']);
+    } // if the user has BOTH webpack 4 and 5 installed already, we'll pick the safest options (4)
+
+
+    if (out.includes('webpack@4') || out.includes('webpack@npm:4')) {
+      return _project_types.CoreBuilder.Webpack5;
+    } // the user has webpack 4 installed, but not 5
+
+
+    if (out.includes('webpack@5') || out.includes('webpack@npm:5')) {
+      return _project_types.CoreBuilder.Webpack5;
+    }
+  } catch (err) {//
+  } // Fallback to webpack4
+
+
+  return _project_types.CoreBuilder.Webpack4;
+}
 
 function isStorybookInstalled(dependencies, force) {
   if (!dependencies) {
@@ -117,7 +168,13 @@ function isStorybookInstalled(dependencies, force) {
 
 function detectLanguage() {
   let language = _project_types.SupportedLanguage.JAVASCRIPT;
-  const packageJson = (0, _jsPackageManager.readPackageJson)();
+  let packageJson;
+
+  try {
+    packageJson = (0, _jsPackageManager.readPackageJson)();
+  } catch (err) {//
+  }
+
   const bowerJson = (0, _helpers.getBowerJson)();
 
   if (!packageJson && !bowerJson) {
@@ -132,7 +189,13 @@ function detectLanguage() {
 }
 
 function detect(options = {}) {
-  const packageJson = (0, _jsPackageManager.readPackageJson)();
+  let packageJson;
+
+  try {
+    packageJson = (0, _jsPackageManager.readPackageJson)();
+  } catch (err) {//
+  }
+
   const bowerJson = (0, _helpers.getBowerJson)();
 
   if (!packageJson && !bowerJson) {

package/dist/modern/extract.js

@@ -24,8 +24,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const read = async url => {
   const browser = await usePuppeteerBrowser();
   const page = await browser.newPage();
-  await page.goto(url);
-  await page.waitForFunction('window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract()');
+  await page.goto(url); // we don't know whether we are running against a new or old storybook
+  // FIXME: add tests for both
+
+  await page.waitForFunction(`
+    (window.__STORYBOOK_PREVIEW__ && window.__STORYBOOK_PREVIEW__.extract && window.__STORYBOOK_PREVIEW__.extract()) ||
+    (window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract())
+  `);
   const data = JSON.parse(await page.evaluate(async () => {
     // eslint-disable-next-line no-undef
     return JSON.stringify(window.__STORYBOOK_STORY_STORE__.getStoriesJsonData(), null, 2);

package/dist/modern/frameworks/common/header.css

@@ -24,3 +24,9 @@ h1 {
 button + button {
   margin-left: 10px;
 }
+
+.welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}

package/dist/modern/frameworks/html/js/Header.js

@@ -26,6 +26,8 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
 
   const account = document.createElement('div');
   if (user) {
+    const welcomeMessage = `<span class="welcome">Welcome, <b>${user.name}</b>!</span>`;
+    account.innerHTML = welcomeMessage;
     account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));
   } else {
     account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));

package/dist/modern/frameworks/html/js/Header.stories.js

@@ -2,6 +2,11 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    layout: 'fullscreen',
+  },
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
@@ -13,7 +18,9 @@ const Template = (args) => createHeader(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/modern/frameworks/html/js/Page.js

@@ -1,11 +1,38 @@
 import './page.css';
 import { createHeader } from './Header';
 
-export const createPage = ({ user, onLogout, onLogin, onCreateAccount }) => {
+export const createPage = () => {
   const article = document.createElement('article');
+  let user = null;
+  let header = null;
 
-  const header = createHeader({ onLogin, onLogout, onCreateAccount, user });
+  const rerenderHeader = () => {
+    const wrapper = document.getElementsByTagName('article')[0];
+    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+  };
+
+  const onLogin = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const onLogout = () => {
+    user = null;
+    rerenderHeader();
+  };
+
+  const onCreateAccount = () => {
+    user = { name: 'Jane Doe' };
+    rerenderHeader();
+  };
+
+  const createHeaderElement = () => {
+    return createHeader({ onLogin, onLogout, onCreateAccount, user });
+  };
+
+  header = createHeaderElement();
   article.appendChild(header);
+
   const section = `
   <section>
     <h2>Pages in Storybook</h2>