@storybook/react 6.5.0-alpha.55 → 6.5.0-alpha.58

package/dist/cjs/client/preview/index.js

@@ -7,7 +7,7 @@ exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = expo
 
 require("core-js/modules/es.array.concat.js");
 
-var _client = require("@storybook/core/client");
+var _core = require("@storybook/core");
 
 require("./globals");
 
@@ -15,7 +15,7 @@ var _render = require("./render");
 
 /* eslint-disable prefer-destructuring */
 var framework = 'react';
-var api = (0, _client.start)(_render.renderToDOM, {
+var api = (0, _core.start)(_render.renderToDOM, {
   render: _render.render
 });
 

package/dist/cjs/client/preview/render.js

@@ -2,20 +2,14 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
-require("core-js/modules/es.object.get-prototype-of.js");
-
-require("core-js/modules/es.reflect.construct.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.string.iterator.js");
-
 require("core-js/modules/es.weak-map.js");
 
-require("core-js/modules/web.dom-collections.iterator.js");
-
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 
+require("core-js/modules/es.object.get-prototype-of.js");
+
+require("core-js/modules/es.reflect.construct.js");
+
 require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
@@ -30,21 +24,27 @@ exports.renderToDOM = renderToDOM;
 
 require("regenerator-runtime/runtime.js");
 
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.map.js");
+
 require("core-js/modules/es.object.to-string.js");
 
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
 require("core-js/modules/es.promise.js");
 
+require("core-js/modules/es.string.starts-with.js");
+
 require("core-js/modules/es.array.concat.js");
 
 var _global = _interopRequireDefault(require("global"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-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; }
+var _reactDom = _interopRequireWildcard(require("react-dom"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -68,11 +68,17 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-var FRAMEWORK_OPTIONS = _global.default.FRAMEWORK_OPTIONS;
+var FRAMEWORK_OPTIONS = _global.default.FRAMEWORK_OPTIONS; // A map of all rendered React 18 nodes
+
+var nodes = new Map();
 
 var render = function render(args, context) {
   var id = context.id,
@@ -89,17 +95,30 @@ exports.render = render;
 
 var renderElement = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el) {
+    var root;
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
+            _context.next = 2;
+            return getReactRoot(el);
+
+          case 2:
+            root = _context.sent;
             return _context.abrupt("return", new Promise(function (resolve) {
-              _reactDom.default.render(node, el, function () {
-                return resolve(null);
-              });
+              if (root) {
+                root.render(node);
+                setTimeout(function () {
+                  resolve(null);
+                }, 0);
+              } else {
+                _reactDom.default.render(node, el, function () {
+                  return resolve(null);
+                });
+              }
             }));
 
-          case 1:
+          case 4:
           case "end":
             return _context.stop();
         }
@@ -112,6 +131,70 @@ var renderElement = /*#__PURE__*/function () {
   };
 }();
 
+var canUseNewReactRootApi = _reactDom.version.startsWith('18') || _reactDom.version.startsWith('0.0.0');
+
+var shouldUseNewRootApi = (FRAMEWORK_OPTIONS === null || FRAMEWORK_OPTIONS === void 0 ? void 0 : FRAMEWORK_OPTIONS.legacyRootApi) !== true;
+var isUsingNewReactRootApi = shouldUseNewRootApi && canUseNewReactRootApi;
+
+var unmountElement = function unmountElement(el) {
+  var root = nodes.get(el);
+
+  if (root && isUsingNewReactRootApi) {
+    root.unmount();
+    nodes.delete(el);
+  } else {
+    _reactDom.default.unmountComponentAtNode(el);
+  }
+};
+
+var getReactRoot = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(el) {
+    var root, reactDomClient;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (isUsingNewReactRootApi) {
+              _context2.next = 2;
+              break;
+            }
+
+            return _context2.abrupt("return", null);
+
+          case 2:
+            root = nodes.get(el);
+
+            if (root) {
+              _context2.next = 9;
+              break;
+            }
+
+            _context2.next = 6;
+            return Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('react-dom/client'));
+            });
+
+          case 6:
+            reactDomClient = _context2.sent;
+            root = reactDomClient.createRoot(el);
+            nodes.set(el, root);
+
+          case 9:
+            return _context2.abrupt("return", root);
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function getReactRoot(_x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
 var ErrorBoundary = /*#__PURE__*/function (_ReactComponent) {
   _inherits(ErrorBoundary, _ReactComponent);
 
@@ -171,18 +254,18 @@ var ErrorBoundary = /*#__PURE__*/function (_ReactComponent) {
 
 var Wrapper = FRAMEWORK_OPTIONS !== null && FRAMEWORK_OPTIONS !== void 0 && FRAMEWORK_OPTIONS.strictMode ? _react.StrictMode : _react.Fragment;
 
-function renderToDOM(_x3, _x4) {
+function renderToDOM(_x4, _x5) {
   return _renderToDOM.apply(this, arguments);
 }
 
 function _renderToDOM() {
-  _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref2, domElement) {
+  _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref3, domElement) {
     var storyContext, unboundStoryFn, showMain, showException, forceRemount, Story, content, element;
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) {
-        switch (_context2.prev = _context2.next) {
+        switch (_context3.prev = _context3.next) {
           case 0:
-            storyContext = _ref2.storyContext, unboundStoryFn = _ref2.unboundStoryFn, showMain = _ref2.showMain, showException = _ref2.showException, forceRemount = _ref2.forceRemount;
+            storyContext = _ref3.storyContext, unboundStoryFn = _ref3.unboundStoryFn, showMain = _ref3.showMain, showException = _ref3.showException, forceRemount = _ref3.forceRemount;
             Story = unboundStoryFn;
             content = /*#__PURE__*/_react.default.createElement(ErrorBoundary, {
               showMain: showMain,
@@ -196,18 +279,18 @@ function _renderToDOM() {
             // (This is not the case when we change args or globals to the story however)
 
             if (forceRemount) {
-              _reactDom.default.unmountComponentAtNode(domElement);
+              unmountElement(domElement);
             }
 
-            _context2.next = 7;
+            _context3.next = 7;
             return renderElement(element, domElement);
 
           case 7:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
       }
-    }, _callee2);
+    }, _callee3);
   }));
   return _renderToDOM.apply(this, arguments);
 }

package/dist/cjs/server/framework-preset-react-dom-hack.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webpackFinal = webpackFinal;
+
+require("core-js/modules/es.promise.js");
+
+var _fsExtra = require("fs-extra");
+
+var _webpack = require("webpack");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// this is a hack to allow importing react-dom/client even when it's not available
+// this should be removed once we drop support for react-dom < 18
+async function webpackFinal(config) {
+  var reactDomPkg = await (0, _fsExtra.readJSON)(require.resolve('react-dom/package.json'));
+  return _objectSpread(_objectSpread({}, config), {}, {
+    plugins: [...config.plugins, reactDomPkg.version.startsWith('18') || reactDomPkg.version.startsWith('0.0.0') ? null : new _webpack.IgnorePlugin({
+      resourceRegExp: /react-dom\/client$/,
+      contextRegExp: /(app\/react|@storybook\/react)/ // TODO this needs to work for both in our MONOREPO and in the user's NODE_MODULES
+
+    })].filter(Boolean)
+  });
+}

package/dist/cjs/server/preset.js

@@ -12,5 +12,5 @@ var previewAnnotations = function (entries = []) {
 };
 
 exports.previewAnnotations = previewAnnotations;
-var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];
+var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-react-dom-hack'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];
 exports.addons = addons;

package/dist/esm/client/preview/index.js

@@ -1,7 +1,7 @@
 import "core-js/modules/es.array.concat.js";
 
 /* eslint-disable prefer-destructuring */
-import { start } from '@storybook/core/client';
+import { start } from '@storybook/core';
 import './globals';
 import { renderToDOM, render } from './render';
 var framework = 'react';

package/dist/esm/client/preview/render.js

@@ -21,26 +21,30 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 import "regenerator-runtime/runtime.js";
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.map.js";
 import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.promise.js";
+import "core-js/modules/es.string.starts-with.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.get-prototype-of.js";
 import "core-js/modules/es.reflect.construct.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
 import global from 'global';
 import React, { Component as ReactComponent, StrictMode, Fragment } from 'react';
-import ReactDOM from 'react-dom';
-var FRAMEWORK_OPTIONS = global.FRAMEWORK_OPTIONS;
+import ReactDOM, { version as reactDomVersion } from 'react-dom';
+var FRAMEWORK_OPTIONS = global.FRAMEWORK_OPTIONS; // A map of all rendered React 18 nodes
+
+var nodes = new Map();
 export var render = function render(args, context) {
   var id = context.id,
       Component = context.component;
@@ -54,17 +58,30 @@ export var render = function render(args, context) {
 
 var renderElement = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el) {
+    var root;
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
+            _context.next = 2;
+            return getReactRoot(el);
+
+          case 2:
+            root = _context.sent;
             return _context.abrupt("return", new Promise(function (resolve) {
-              ReactDOM.render(node, el, function () {
-                return resolve(null);
-              });
+              if (root) {
+                root.render(node);
+                setTimeout(function () {
+                  resolve(null);
+                }, 0);
+              } else {
+                ReactDOM.render(node, el, function () {
+                  return resolve(null);
+                });
+              }
             }));
 
-          case 1:
+          case 4:
           case "end":
             return _context.stop();
         }
@@ -77,6 +94,67 @@ var renderElement = /*#__PURE__*/function () {
   };
 }();
 
+var canUseNewReactRootApi = reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0');
+var shouldUseNewRootApi = (FRAMEWORK_OPTIONS === null || FRAMEWORK_OPTIONS === void 0 ? void 0 : FRAMEWORK_OPTIONS.legacyRootApi) !== true;
+var isUsingNewReactRootApi = shouldUseNewRootApi && canUseNewReactRootApi;
+
+var unmountElement = function unmountElement(el) {
+  var root = nodes.get(el);
+
+  if (root && isUsingNewReactRootApi) {
+    root.unmount();
+    nodes.delete(el);
+  } else {
+    ReactDOM.unmountComponentAtNode(el);
+  }
+};
+
+var getReactRoot = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(el) {
+    var root, reactDomClient;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (isUsingNewReactRootApi) {
+              _context2.next = 2;
+              break;
+            }
+
+            return _context2.abrupt("return", null);
+
+          case 2:
+            root = nodes.get(el);
+
+            if (root) {
+              _context2.next = 9;
+              break;
+            }
+
+            _context2.next = 6;
+            return import('react-dom/client');
+
+          case 6:
+            reactDomClient = _context2.sent;
+            root = reactDomClient.createRoot(el);
+            nodes.set(el, root);
+
+          case 9:
+            return _context2.abrupt("return", root);
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function getReactRoot(_x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
 var ErrorBoundary = /*#__PURE__*/function (_ReactComponent) {
   _inherits(ErrorBoundary, _ReactComponent);
 
@@ -135,18 +213,18 @@ var ErrorBoundary = /*#__PURE__*/function (_ReactComponent) {
 }(ReactComponent);
 
 var Wrapper = FRAMEWORK_OPTIONS !== null && FRAMEWORK_OPTIONS !== void 0 && FRAMEWORK_OPTIONS.strictMode ? StrictMode : Fragment;
-export function renderToDOM(_x3, _x4) {
+export function renderToDOM(_x4, _x5) {
   return _renderToDOM.apply(this, arguments);
 }
 
 function _renderToDOM() {
-  _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref2, domElement) {
+  _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref3, domElement) {
     var storyContext, unboundStoryFn, showMain, showException, forceRemount, Story, content, element;
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) {
-        switch (_context2.prev = _context2.next) {
+        switch (_context3.prev = _context3.next) {
           case 0:
-            storyContext = _ref2.storyContext, unboundStoryFn = _ref2.unboundStoryFn, showMain = _ref2.showMain, showException = _ref2.showException, forceRemount = _ref2.forceRemount;
+            storyContext = _ref3.storyContext, unboundStoryFn = _ref3.unboundStoryFn, showMain = _ref3.showMain, showException = _ref3.showException, forceRemount = _ref3.forceRemount;
             Story = unboundStoryFn;
             content = /*#__PURE__*/React.createElement(ErrorBoundary, {
               showMain: showMain,
@@ -160,18 +238,18 @@ function _renderToDOM() {
             // (This is not the case when we change args or globals to the story however)
 
             if (forceRemount) {
-              ReactDOM.unmountComponentAtNode(domElement);
+              unmountElement(domElement);
             }
 
-            _context2.next = 7;
+            _context3.next = 7;
             return renderElement(element, domElement);
 
           case 7:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
       }
-    }, _callee2);
+    }, _callee3);
   }));
   return _renderToDOM.apply(this, arguments);
 }

package/dist/esm/server/framework-preset-react-dom-hack.js

@@ -0,0 +1,21 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import "core-js/modules/es.promise.js";
+import { readJSON } from 'fs-extra';
+import { IgnorePlugin } from 'webpack'; // this is a hack to allow importing react-dom/client even when it's not available
+// this should be removed once we drop support for react-dom < 18
+
+export async function webpackFinal(config) {
+  var reactDomPkg = await readJSON(require.resolve('react-dom/package.json'));
+  return _objectSpread(_objectSpread({}, config), {}, {
+    plugins: [...config.plugins, reactDomPkg.version.startsWith('18') || reactDomPkg.version.startsWith('0.0.0') ? null : new IgnorePlugin({
+      resourceRegExp: /react-dom\/client$/,
+      contextRegExp: /(app\/react|@storybook\/react)/ // TODO this needs to work for both in our MONOREPO and in the user's NODE_MODULES
+
+    })].filter(Boolean)
+  });
+}

package/dist/esm/server/preset.js

@@ -2,4 +2,4 @@ import { findDistEsm } from '@storybook/core-common';
 export var previewAnnotations = function (entries = []) {
   return [...entries, findDistEsm(__dirname, 'client/preview/config')];
 };
-export var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];
+export var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-react-dom-hack'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];

package/dist/modern/client/preview/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable prefer-destructuring */
-import { start } from '@storybook/core/client';
+import { start } from '@storybook/core';
 import './globals';
 import { renderToDOM, render } from './render';
 const framework = 'react';

package/dist/modern/client/preview/render.js

@@ -1,9 +1,11 @@
 import global from 'global';
 import React, { Component as ReactComponent, StrictMode, Fragment } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { version as reactDomVersion } from 'react-dom';
 const {
   FRAMEWORK_OPTIONS
-} = global;
+} = global; // A map of all rendered React 18 nodes
+
+const nodes = new Map();
 export const render = (args, context) => {
   const {
     id,
@@ -17,9 +19,53 @@ export const render = (args, context) => {
   return /*#__PURE__*/React.createElement(Component, args);
 };
 
-const renderElement = async (node, el) => new Promise(resolve => {
-  ReactDOM.render(node, el, () => resolve(null));
-});
+const renderElement = async (node, el) => {
+  // Create Root Element conditionally for new React 18 Root Api
+  const root = await getReactRoot(el);
+  return new Promise(resolve => {
+    if (root) {
+      root.render(node);
+      setTimeout(() => {
+        resolve(null);
+      }, 0);
+    } else {
+      ReactDOM.render(node, el, () => resolve(null));
+    }
+  });
+};
+
+const canUseNewReactRootApi = reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0');
+const shouldUseNewRootApi = (FRAMEWORK_OPTIONS === null || FRAMEWORK_OPTIONS === void 0 ? void 0 : FRAMEWORK_OPTIONS.legacyRootApi) !== true;
+const isUsingNewReactRootApi = shouldUseNewRootApi && canUseNewReactRootApi;
+
+const unmountElement = el => {
+  const root = nodes.get(el);
+
+  if (root && isUsingNewReactRootApi) {
+    root.unmount();
+    nodes.delete(el);
+  } else {
+    ReactDOM.unmountComponentAtNode(el);
+  }
+};
+
+const getReactRoot = async el => {
+  if (!isUsingNewReactRootApi) {
+    return null;
+  }
+
+  let root = nodes.get(el);
+
+  if (!root) {
+    // Skipping webpack's static analysis of import paths by defining the path value outside the import statement.
+    // eslint-disable-next-line import/no-unresolved
+    const reactDomClient = await import('react-dom/client');
+    root = reactDomClient.createRoot(el);
+    nodes.set(el, root);
+  }
+
+  return root;
+};
 
 class ErrorBoundary extends ReactComponent {
   constructor(...args) {
@@ -89,7 +135,7 @@ export async function renderToDOM({
   // (This is not the case when we change args or globals to the story however)
 
   if (forceRemount) {
-    ReactDOM.unmountComponentAtNode(domElement);
+    unmountElement(domElement);
   }
 
   await renderElement(element, domElement);

package/dist/modern/server/framework-preset-react-dom-hack.js

@@ -0,0 +1,21 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import "core-js/modules/es.promise.js";
+import { readJSON } from 'fs-extra';
+import { IgnorePlugin } from 'webpack'; // this is a hack to allow importing react-dom/client even when it's not available
+// this should be removed once we drop support for react-dom < 18
+
+export async function webpackFinal(config) {
+  var reactDomPkg = await readJSON(require.resolve('react-dom/package.json'));
+  return _objectSpread(_objectSpread({}, config), {}, {
+    plugins: [...config.plugins, reactDomPkg.version.startsWith('18') || reactDomPkg.version.startsWith('0.0.0') ? null : new IgnorePlugin({
+      resourceRegExp: /react-dom\/client$/,
+      contextRegExp: /(app\/react|@storybook\/react)/ // TODO this needs to work for both in our MONOREPO and in the user's NODE_MODULES
+
+    })].filter(Boolean)
+  });
+}

package/dist/modern/server/preset.js

@@ -2,4 +2,4 @@ import { findDistEsm } from '@storybook/core-common';
 export var previewAnnotations = function (entries = []) {
   return [...entries, findDistEsm(__dirname, 'client/preview/config')];
 };
-export var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];
+export var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-react-dom-hack'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];

package/dist/ts3.4/server/framework-preset-react-dom-hack.d.ts

@@ -0,0 +1,32 @@
+import { Configuration } from 'webpack';
+export declare function webpackFinal(config: Configuration): Promise<{
+    plugins: import("webpack").Plugin[];
+    mode?: "none" | "production" | "development";
+    name?: string;
+    context?: string;
+    entry?: string | string[] | import("webpack").Entry | import("webpack").EntryFunc;
+    devtool?: string | boolean;
+    output?: import("webpack").Output;
+    module?: import("webpack").Module;
+    resolve?: import("webpack").Resolve;
+    resolveLoader?: import("webpack").ResolveLoader;
+    externals?: string | RegExp | import("webpack").ExternalsObjectElement | import("webpack").ExternalsFunctionElement | import("webpack").ExternalsElement[];
+    target?: "node" | "web" | "webworker" | "async-node" | "node-webkit" | "atom" | "electron" | "electron-renderer" | "electron-preload" | "electron-main" | ((compiler?: any) => void);
+    bail?: boolean;
+    profile?: boolean;
+    cache?: boolean | object;
+    watch?: boolean;
+    watchOptions?: import("webpack").ICompiler.WatchOptions;
+    node?: false | import("webpack").Node;
+    amd?: {
+        [moduleName: string]: boolean;
+    };
+    recordsPath?: string;
+    recordsInputPath?: string;
+    recordsOutputPath?: string;
+    stats?: import("webpack").Stats.ToStringOptions;
+    performance?: false | import("webpack").Options.Performance;
+    parallelism?: number;
+    optimization?: import("webpack").Options.Optimization;
+    infrastructureLogging?: import("webpack").Options.InfrastructureLogging;
+}>;

package/dist/ts3.9/client/preview/render.d.ts

@@ -1,4 +1,4 @@
-import { RenderContext } from '@storybook/store';
+import type { RenderContext } from '@storybook/store';
 import { ArgsStoryFn } from '@storybook/csf';
 import { ReactFramework } from './types-6-0';
 export declare const render: ArgsStoryFn<ReactFramework>;

package/dist/ts3.9/server/framework-preset-react-dom-hack.d.ts

@@ -0,0 +1,32 @@
+import { Configuration } from 'webpack';
+export declare function webpackFinal(config: Configuration): Promise<{
+    plugins: import("webpack").Plugin[];
+    mode?: "none" | "production" | "development";
+    name?: string;
+    context?: string;
+    entry?: string | string[] | import("webpack").Entry | import("webpack").EntryFunc;
+    devtool?: string | boolean;
+    output?: import("webpack").Output;
+    module?: import("webpack").Module;
+    resolve?: import("webpack").Resolve;
+    resolveLoader?: import("webpack").ResolveLoader;
+    externals?: string | RegExp | import("webpack").ExternalsObjectElement | import("webpack").ExternalsFunctionElement | import("webpack").ExternalsElement[];
+    target?: "node" | "web" | "webworker" | "async-node" | "node-webkit" | "atom" | "electron" | "electron-renderer" | "electron-preload" | "electron-main" | ((compiler?: any) => void);
+    bail?: boolean;
+    profile?: boolean;
+    cache?: boolean | object;
+    watch?: boolean;
+    watchOptions?: import("webpack").ICompiler.WatchOptions;
+    node?: false | import("webpack").Node;
+    amd?: {
+        [moduleName: string]: boolean;
+    };
+    recordsPath?: string;
+    recordsInputPath?: string;
+    recordsOutputPath?: string;
+    stats?: import("webpack").Stats.ToStringOptions;
+    performance?: false | import("webpack").Options.Performance;
+    parallelism?: number;
+    optimization?: import("webpack").Options.Optimization;
+    infrastructureLogging?: import("webpack").Options.InfrastructureLogging;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "6.5.0-alpha.55",
+  "version": "6.5.0-alpha.58",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -49,16 +49,16 @@
     "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addons": "6.5.0-alpha.55",
-    "@storybook/client-logger": "6.5.0-alpha.55",
-    "@storybook/core": "6.5.0-alpha.55",
-    "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.55",
-    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/addons": "6.5.0-alpha.58",
+    "@storybook/client-logger": "6.5.0-alpha.58",
+    "@storybook/core": "6.5.0-alpha.58",
+    "@storybook/core-common": "6.5.0-alpha.58",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/docs-tools": "6.5.0-alpha.58",
+    "@storybook/node-logger": "6.5.0-alpha.58",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.55",
+    "@storybook/store": "6.5.0-alpha.58",
     "@types/estree": "^0.0.51",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
@@ -69,6 +69,7 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "core-js": "^3.8.2",
     "escodegen": "^2.0.0",
+    "fs-extra": "^9.0.1",
     "global": "^4.4.0",
     "html-tags": "^3.1.0",
     "lodash": "^4.17.21",
@@ -118,6 +119,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
+  "gitHead": "bf25496b2d3d2daa91ab211a9b73b1f4d5b0b52d",
   "sbmodern": "dist/modern/client/index.js"
 }

package/types/index.ts

@@ -7,5 +7,13 @@ export interface StorybookConfig extends BaseConfig {
   reactOptions?: {
     fastRefresh?: boolean;
     strictMode?: boolean;
+    /**
+     * Use React's legacy root API to mount components
+     * @description
+     * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. concurrent features)
+     * If this flag is true, the legacy Root API is used to mount components to make it easier to migrate step by step to React 18.
+     * @default false
+     */
+    legacyRootApi?: boolean;
   };
 }