@storybook/react 6.5.0-alpha.6 → 6.5.0-alpha.60

package/dist/cjs/client/docs/react-argtypes.stories.js

@@ -0,0 +1,129 @@
+"use strict";
+
+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.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.object.entries.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
+
+var _components = require("@storybook/components");
+
+var _store = require("@storybook/store");
+
+var _ = require("..");
+
+var _extractArgTypes = require("./extractArgTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var argsTableProps = function argsTableProps(component) {
+  var argTypes = (0, _extractArgTypes.extractArgTypes)(component);
+  var parameters = {
+    __isArgsStory: true
+  };
+  var rows = (0, _store.inferControls)({
+    argTypes: argTypes,
+    parameters: parameters
+  });
+  return {
+    rows: rows
+  };
+};
+
+var ArgsStory = function ArgsStory(_ref) {
+  var component = _ref.component;
+
+  var _argsTableProps = argsTableProps(component),
+      rows = _argsTableProps.rows;
+
+  var initialArgs = (0, _mapValues.default)(rows, function (argType) {
+    return argType.defaultValue;
+  });
+
+  var _useState = (0, _react.useState)(initialArgs),
+      _useState2 = _slicedToArray(_useState, 2),
+      args = _useState2[0],
+      setArgs = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("b", null, "NOTE:"), " these stories are to help visualise the snapshot tests in", ' ', /*#__PURE__*/_react.default.createElement("code", null, "./react-properties.test.js"), "."), /*#__PURE__*/_react.default.createElement(_components.ArgsTable, {
+    rows: rows,
+    args: args,
+    updateArgs: function updateArgs(val) {
+      return setArgs(Object.assign({}, args, val));
+    }
+  }), /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, "arg name"), /*#__PURE__*/_react.default.createElement("th", null, "argType"))), /*#__PURE__*/_react.default.createElement("tbody", null, Object.entries(args).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        val = _ref3[1];
+
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      key: key
+    }, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("code", null, key)), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(rows[key]))));
+  }))));
+};
+
+var issuesFixtures = ['js-class-component', 'js-function-component', 'js-function-component-inline-defaults', 'js-function-component-inline-defaults-no-propTypes', 'ts-function-component', 'ts-function-component-inline-defaults', '9399-js-proptypes-shape', '8663-js-styled-components', '9626-js-default-values', '9668-js-proptypes-no-jsdoc', '8143-ts-react-fc-generics', '8143-ts-imported-types', '8279-js-styled-docgen', '8140-js-prop-types-oneof', '9023-js-hoc', '8740-ts-multi-props', '9556-ts-react-default-exports', '9592-ts-styled-props', '9591-ts-import-types', '9721-ts-deprecated-jsdoc', '9827-ts-default-values', '9586-js-react-memo', '9575-ts-camel-case', '9493-ts-display-name', '8894-9511-ts-forward-ref', '9465-ts-type-props', '8428-js-static-prop-types', '9764-ts-extend-props', '9922-ts-component-props'];
+var issuesStories = (0, _.storiesOf)('ArgTypes/Issues', module);
+issuesFixtures.forEach(function (fixture) {
+  // eslint-disable-next-line import/no-dynamic-require, global-require
+  var _require = require("./__testfixtures__/".concat(fixture, "/input")),
+      component = _require.component;
+
+  issuesStories.add(fixture, function () {
+    return /*#__PURE__*/_react.default.createElement(ArgsStory, {
+      component: component
+    });
+  }, {
+    chromatic: {
+      disable: true
+    }
+  });
+});

package/dist/cjs/client/docs/typeScript/handleProp.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.enhanceTypeScriptProp = enhanceTypeScriptProp;
+exports.enhanceTypeScriptProps = enhanceTypeScriptProps;
+
+require("core-js/modules/es.array.map.js");
+
+var _defaultValues = require("../lib/defaultValues");
+
+function enhanceTypeScriptProp(extractedProp, rawDefaultProp) {
+  var propDef = extractedProp.propDef;
+  var defaultValue = extractedProp.docgenInfo.defaultValue;
+
+  if (defaultValue != null && defaultValue.value != null) {
+    var newDefaultValue = (0, _defaultValues.createDefaultValue)(defaultValue.value);
+
+    if (newDefaultValue != null) {
+      propDef.defaultValue = newDefaultValue;
+    }
+  } else if (rawDefaultProp != null) {
+    var _newDefaultValue = (0, _defaultValues.createDefaultValueFromRawDefaultProp)(rawDefaultProp, propDef);
+
+    if (_newDefaultValue != null) {
+      propDef.defaultValue = _newDefaultValue;
+    }
+  }
+
+  return propDef;
+}
+
+function enhanceTypeScriptProps(extractedProps) {
+  return extractedProps.map(function (prop) {
+    return enhanceTypeScriptProp(prop);
+  });
+}

package/dist/cjs/client/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.object.keys.js");
@@ -17,18 +19,6 @@ var _exportNames = {
   raw: true,
   forceReRender: true
 };
-Object.defineProperty(exports, "storiesOf", {
-  enumerable: true,
-  get: function get() {
-    return _preview.storiesOf;
-  }
-});
-Object.defineProperty(exports, "setAddon", {
-  enumerable: true,
-  get: function get() {
-    return _preview.setAddon;
-  }
-});
 Object.defineProperty(exports, "addDecorator", {
   enumerable: true,
   get: function get() {
@@ -47,6 +37,12 @@ Object.defineProperty(exports, "configure", {
     return _preview.configure;
   }
 });
+Object.defineProperty(exports, "forceReRender", {
+  enumerable: true,
+  get: function get() {
+    return _preview.forceReRender;
+  }
+});
 Object.defineProperty(exports, "getStorybook", {
   enumerable: true,
   get: function get() {
@@ -59,15 +55,35 @@ Object.defineProperty(exports, "raw", {
     return _preview.raw;
   }
 });
-Object.defineProperty(exports, "forceReRender", {
+Object.defineProperty(exports, "setAddon", {
   enumerable: true,
   get: function get() {
-    return _preview.forceReRender;
+    return _preview.setAddon;
+  }
+});
+Object.defineProperty(exports, "storiesOf", {
+  enumerable: true,
+  get: function get() {
+    return _preview.storiesOf;
   }
 });
 
 var _preview = require("./preview");
 
+var _testing = require("./testing");
+
+Object.keys(_testing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _testing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _testing[key];
+    }
+  });
+});
+
 var _types = require("./preview/types-6-3");
 
 Object.keys(_types).forEach(function (key) {

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.parameters = void 0;
 Object.defineProperty(exports, "render", {
   enumerable: true,
   get: function get() {
@@ -15,7 +16,6 @@ Object.defineProperty(exports, "renderToDOM", {
     return _render.renderToDOM;
   }
 });
-exports.parameters = void 0;
 
 var _render = require("./render");
 

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.raw = exports.getStorybook = exports.forceReRender = exports.setAddon = exports.clearDecorators = exports.addParameters = exports.addDecorator = exports.configure = exports.storiesOf = void 0;
+exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = exports.forceReRender = exports.configure = exports.clearDecorators = exports.addParameters = exports.addDecorator = void 0;
 
 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

@@ -1,20 +1,14 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-require("core-js/modules/es.object.get-prototype-of.js");
-
-require("core-js/modules/es.reflect.construct.js");
+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.weak-map.js");
 
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.object.get-prototype-of.js");
 
-require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.reflect.construct.js");
 
 require("core-js/modules/es.symbol.js");
 
@@ -25,26 +19,32 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderToDOM = renderToDOM;
 exports.render = void 0;
+exports.renderToDOM = renderToDOM;
 
 require("regenerator-runtime/runtime.js");
 
-require("core-js/modules/es.promise.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() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-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; }
+var _reactDom = _interopRequireWildcard(require("react-dom"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -52,15 +52,15 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -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/client/preview/types-6-0.js

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

package/dist/cjs/client/preview/types-6-3.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.object.keys.js");

package/dist/cjs/client/preview/types-7-0.js

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

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

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