@storybook/react 7.0.0-alpha.1 → 7.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/cjs/config.js +4 -12
  2. package/dist/cjs/docs/config.js +3 -7
  3. package/dist/cjs/docs/extractArgTypes.js +20 -27
  4. package/dist/cjs/docs/extractProps.js +9 -29
  5. package/dist/cjs/docs/jsxDecorator.js +50 -117
  6. package/dist/cjs/docs/lib/captions.js +6 -6
  7. package/dist/cjs/docs/lib/componentTypes.js +2 -12
  8. package/dist/cjs/docs/lib/defaultValues/createDefaultValue.js +16 -11
  9. package/dist/cjs/docs/lib/defaultValues/createFromRawDefaultProp.js +38 -58
  10. package/dist/cjs/docs/lib/defaultValues/generateArray.js +8 -6
  11. package/dist/cjs/docs/lib/defaultValues/generateObject.js +8 -6
  12. package/dist/cjs/docs/lib/defaultValues/index.js +2 -8
  13. package/dist/cjs/docs/lib/defaultValues/prettyIdentifier.js +6 -4
  14. package/dist/cjs/docs/lib/generateCode.js +10 -25
  15. package/dist/cjs/docs/lib/index.js +4 -10
  16. package/dist/cjs/docs/lib/inspection/acornParser.js +34 -58
  17. package/dist/cjs/docs/lib/inspection/index.js +2 -8
  18. package/dist/cjs/docs/lib/inspection/inspectValue.js +1 -3
  19. package/dist/cjs/docs/lib/inspection/types.js +1 -1
  20. package/dist/cjs/docs/lib/isHtmlTag.js +0 -4
  21. package/dist/cjs/docs/propTypes/createType.js +102 -115
  22. package/dist/cjs/docs/propTypes/generateFuncSignature.js +13 -23
  23. package/dist/cjs/docs/propTypes/handleProp.js +13 -15
  24. package/dist/cjs/docs/propTypes/rawDefaultPropResolvers.js +10 -14
  25. package/dist/cjs/docs/propTypes/sortProps.js +4 -20
  26. package/dist/cjs/docs/react-argtypes.stories.js +30 -92
  27. package/dist/cjs/docs/typeScript/handleProp.js +11 -11
  28. package/dist/cjs/index.js +10 -16
  29. package/dist/cjs/preview/config.js +2 -2
  30. package/dist/cjs/preview/globals.js +3 -1
  31. package/dist/cjs/preview/index.js +12 -20
  32. package/dist/cjs/preview/render.js +113 -258
  33. package/dist/cjs/preview/types-6-3.js +1 -7
  34. package/dist/cjs/testing/index.js +3 -3
  35. package/dist/esm/docs/config.js +0 -2
  36. package/dist/types/config.d.ts +0 -1
  37. package/dist/types/docs/config.d.ts +1 -4
  38. package/package.json +7 -7
@@ -1,57 +1,11 @@
1
1
  "use strict";
2
2
 
3
- 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); }
4
-
5
- require("core-js/modules/es.symbol.js");
6
-
7
- require("core-js/modules/es.symbol.description.js");
8
-
9
- require("core-js/modules/es.symbol.iterator.js");
10
-
11
- require("core-js/modules/es.symbol.async-iterator.js");
12
-
13
- require("core-js/modules/es.symbol.to-string-tag.js");
14
-
15
- require("core-js/modules/es.json.to-string-tag.js");
16
-
17
- require("core-js/modules/es.math.to-string-tag.js");
18
-
19
- require("core-js/modules/es.object.get-prototype-of.js");
20
-
21
- require("core-js/modules/web.dom-collections.for-each.js");
22
-
23
- require("core-js/modules/es.function.name.js");
24
-
25
- require("core-js/modules/es.array.slice.js");
26
-
27
- require("core-js/modules/es.weak-map.js");
28
-
29
- require("core-js/modules/es.object.get-own-property-descriptor.js");
30
-
31
- require("core-js/modules/es.reflect.construct.js");
32
-
33
3
  Object.defineProperty(exports, "__esModule", {
34
4
  value: true
35
5
  });
36
6
  exports.render = void 0;
37
7
  exports.renderToDOM = renderToDOM;
38
8
 
39
- require("core-js/modules/es.array.iterator.js");
40
-
41
- require("core-js/modules/es.map.js");
42
-
43
- require("core-js/modules/es.object.to-string.js");
44
-
45
- require("core-js/modules/es.string.iterator.js");
46
-
47
- require("core-js/modules/web.dom-collections.iterator.js");
48
-
49
- require("core-js/modules/es.promise.js");
50
-
51
- require("core-js/modules/es.string.starts-with.js");
52
-
53
- require("core-js/modules/es.array.concat.js");
54
-
55
9
  var _global = _interopRequireDefault(require("global"));
56
10
 
57
11
  var _react = _interopRequireWildcard(require("react"));
@@ -60,46 +14,24 @@ var _reactDom = _interopRequireWildcard(require("react-dom"));
60
14
 
61
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
62
16
 
63
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
64
-
65
- 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); } }
66
-
67
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
68
-
69
- 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); }
70
-
71
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
72
-
73
- 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); }; }
74
-
75
- 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); }
76
-
77
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
78
-
79
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
80
-
81
- function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
17
+ 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); }
82
18
 
83
- 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); }
19
+ 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; }
84
20
 
85
- 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; }
21
+ const {
22
+ FRAMEWORK_OPTIONS
23
+ } = _global.default; // A map of all rendered React 18 nodes
86
24
 
87
- function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
25
+ const nodes = new Map();
88
26
 
89
- 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); } }
90
-
91
- 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); }); }; }
92
-
93
- var FRAMEWORK_OPTIONS = _global.default.FRAMEWORK_OPTIONS; // A map of all rendered React 18 nodes
94
-
95
- var nodes = new Map();
96
-
97
- var render = function render(args, context) {
98
- var id = context.id,
99
- Component = context.component;
27
+ const render = (args, context) => {
28
+ const {
29
+ id,
30
+ component: Component
31
+ } = context;
100
32
 
101
33
  if (!Component) {
102
- throw new Error("Unable to render story ".concat(id, " as the component annotation is missing from the default export"));
34
+ throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
103
35
  }
104
36
 
105
37
  return /*#__PURE__*/_react.default.createElement(Component, args);
@@ -107,51 +39,28 @@ var render = function render(args, context) {
107
39
 
108
40
  exports.render = render;
109
41
 
110
- var renderElement = /*#__PURE__*/function () {
111
- var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(node, el) {
112
- var root;
113
- return _regeneratorRuntime().wrap(function _callee$(_context) {
114
- while (1) {
115
- switch (_context.prev = _context.next) {
116
- case 0:
117
- _context.next = 2;
118
- return getReactRoot(el);
119
-
120
- case 2:
121
- root = _context.sent;
122
- return _context.abrupt("return", new Promise(function (resolve) {
123
- if (root) {
124
- root.render(node);
125
- setTimeout(function () {
126
- resolve(null);
127
- }, 0);
128
- } else {
129
- _reactDom.default.render(node, el, function () {
130
- return resolve(null);
131
- });
132
- }
133
- }));
134
-
135
- case 4:
136
- case "end":
137
- return _context.stop();
138
- }
139
- }
140
- }, _callee);
141
- }));
142
-
143
- return function renderElement(_x, _x2) {
144
- return _ref.apply(this, arguments);
145
- };
146
- }();
147
-
148
- var canUseNewReactRootApi = _reactDom.version && (_reactDom.version.startsWith('18') || _reactDom.version.startsWith('0.0.0'));
149
-
150
- var shouldUseNewRootApi = (FRAMEWORK_OPTIONS === null || FRAMEWORK_OPTIONS === void 0 ? void 0 : FRAMEWORK_OPTIONS.legacyRootApi) !== true;
151
- var isUsingNewReactRootApi = shouldUseNewRootApi && canUseNewReactRootApi;
152
-
153
- var unmountElement = function unmountElement(el) {
154
- var root = nodes.get(el);
42
+ const renderElement = async (node, el) => {
43
+ // Create Root Element conditionally for new React 18 Root Api
44
+ const root = await getReactRoot(el);
45
+ return new Promise(resolve => {
46
+ if (root) {
47
+ root.render(node);
48
+ setTimeout(() => {
49
+ resolve(null);
50
+ }, 0);
51
+ } else {
52
+ _reactDom.default.render(node, el, () => resolve(null));
53
+ }
54
+ });
55
+ };
56
+
57
+ const canUseNewReactRootApi = _reactDom.version && (_reactDom.version.startsWith('18') || _reactDom.version.startsWith('0.0.0'));
58
+
59
+ const shouldUseNewRootApi = (FRAMEWORK_OPTIONS === null || FRAMEWORK_OPTIONS === void 0 ? void 0 : FRAMEWORK_OPTIONS.legacyRootApi) !== true;
60
+ const isUsingNewReactRootApi = shouldUseNewRootApi && canUseNewReactRootApi;
61
+
62
+ const unmountElement = el => {
63
+ const root = nodes.get(el);
155
64
 
156
65
  if (root && isUsingNewReactRootApi) {
157
66
  root.unmount();
@@ -161,150 +70,96 @@ var unmountElement = function unmountElement(el) {
161
70
  }
162
71
  };
163
72
 
164
- var getReactRoot = /*#__PURE__*/function () {
165
- var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(el) {
166
- var root, reactDomClient;
167
- return _regeneratorRuntime().wrap(function _callee2$(_context2) {
168
- while (1) {
169
- switch (_context2.prev = _context2.next) {
170
- case 0:
171
- if (isUsingNewReactRootApi) {
172
- _context2.next = 2;
173
- break;
174
- }
175
-
176
- return _context2.abrupt("return", null);
177
-
178
- case 2:
179
- root = nodes.get(el);
180
-
181
- if (root) {
182
- _context2.next = 9;
183
- break;
184
- }
185
-
186
- _context2.next = 6;
187
- return Promise.resolve().then(function () {
188
- return _interopRequireWildcard(require('react-dom/client'));
189
- });
190
-
191
- case 6:
192
- reactDomClient = _context2.sent.default;
193
- root = reactDomClient.createRoot(el);
194
- nodes.set(el, root);
195
-
196
- case 9:
197
- return _context2.abrupt("return", root);
198
-
199
- case 10:
200
- case "end":
201
- return _context2.stop();
202
- }
203
- }
204
- }, _callee2);
205
- }));
206
-
207
- return function getReactRoot(_x3) {
208
- return _ref2.apply(this, arguments);
209
- };
210
- }();
211
-
212
- var ErrorBoundary = /*#__PURE__*/function (_ReactComponent) {
213
- _inherits(ErrorBoundary, _ReactComponent);
214
-
215
- var _super = _createSuper(ErrorBoundary);
216
-
217
- function ErrorBoundary() {
218
- var _this;
219
-
220
- _classCallCheck(this, ErrorBoundary);
221
-
222
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
223
- args[_key] = arguments[_key];
224
- }
73
+ const getReactRoot = async el => {
74
+ if (!isUsingNewReactRootApi) {
75
+ return null;
76
+ }
77
+
78
+ let root = nodes.get(el);
79
+
80
+ if (!root) {
81
+ // eslint-disable-next-line import/no-unresolved
82
+ const reactDomClient = (await Promise.resolve().then(() => _interopRequireWildcard(require('react-dom/client')))).default;
83
+ root = reactDomClient.createRoot(el);
84
+ nodes.set(el, root);
85
+ }
86
+
87
+ return root;
88
+ };
225
89
 
226
- _this = _super.call.apply(_super, [this].concat(args));
227
- _this.state = {
90
+ class ErrorBoundary extends _react.Component {
91
+ constructor(...args) {
92
+ super(...args);
93
+ this.state = {
228
94
  hasError: false
229
95
  };
230
- return _this;
231
96
  }
232
97
 
233
- _createClass(ErrorBoundary, [{
234
- key: "componentDidMount",
235
- value: function componentDidMount() {
236
- var hasError = this.state.hasError;
237
- var showMain = this.props.showMain;
98
+ static getDerivedStateFromError() {
99
+ return {
100
+ hasError: true
101
+ };
102
+ }
238
103
 
239
- if (!hasError) {
240
- showMain();
241
- }
242
- }
243
- }, {
244
- key: "componentDidCatch",
245
- value: function componentDidCatch(err) {
246
- var showException = this.props.showException; // message partially duplicates stack, strip it
104
+ componentDidMount() {
105
+ const {
106
+ hasError
107
+ } = this.state;
108
+ const {
109
+ showMain
110
+ } = this.props;
247
111
 
248
- showException(err);
249
- }
250
- }, {
251
- key: "render",
252
- value: function render() {
253
- var hasError = this.state.hasError;
254
- var children = this.props.children;
255
- return hasError ? null : children;
112
+ if (!hasError) {
113
+ showMain();
256
114
  }
257
- }], [{
258
- key: "getDerivedStateFromError",
259
- value: function getDerivedStateFromError() {
260
- return {
261
- hasError: true
262
- };
263
- }
264
- }]);
115
+ }
265
116
 
266
- return ErrorBoundary;
267
- }(_react.Component);
117
+ componentDidCatch(err) {
118
+ const {
119
+ showException
120
+ } = this.props; // message partially duplicates stack, strip it
121
+
122
+ showException(err);
123
+ }
268
124
 
269
- var Wrapper = FRAMEWORK_OPTIONS !== null && FRAMEWORK_OPTIONS !== void 0 && FRAMEWORK_OPTIONS.strictMode ? _react.StrictMode : _react.Fragment;
125
+ render() {
126
+ const {
127
+ hasError
128
+ } = this.state;
129
+ const {
130
+ children
131
+ } = this.props;
132
+ return hasError ? null : children;
133
+ }
270
134
 
271
- function renderToDOM(_x4, _x5) {
272
- return _renderToDOM.apply(this, arguments);
273
135
  }
274
136
 
275
- function _renderToDOM() {
276
- _renderToDOM = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref3, domElement) {
277
- var storyContext, unboundStoryFn, showMain, showException, forceRemount, Story, content, element;
278
- return _regeneratorRuntime().wrap(function _callee3$(_context3) {
279
- while (1) {
280
- switch (_context3.prev = _context3.next) {
281
- case 0:
282
- storyContext = _ref3.storyContext, unboundStoryFn = _ref3.unboundStoryFn, showMain = _ref3.showMain, showException = _ref3.showException, forceRemount = _ref3.forceRemount;
283
- Story = unboundStoryFn;
284
- content = /*#__PURE__*/_react.default.createElement(ErrorBoundary, {
285
- showMain: showMain,
286
- showException: showException
287
- }, /*#__PURE__*/_react.default.createElement(Story, storyContext)); // For React 15, StrictMode & Fragment doesn't exists.
288
-
289
- element = Wrapper ? /*#__PURE__*/_react.default.createElement(Wrapper, null, content) : content; // In most cases, we need to unmount the existing set of components in the DOM node.
290
- // Otherwise, React may not recreate instances for every story run.
291
- // This could leads to issues like below:
292
- // https://github.com/storybookjs/react-storybook/issues/81
293
- // (This is not the case when we change args or globals to the story however)
294
-
295
- if (forceRemount) {
296
- unmountElement(domElement);
297
- }
298
-
299
- _context3.next = 7;
300
- return renderElement(element, domElement);
301
-
302
- case 7:
303
- case "end":
304
- return _context3.stop();
305
- }
306
- }
307
- }, _callee3);
308
- }));
309
- return _renderToDOM.apply(this, arguments);
137
+ const Wrapper = FRAMEWORK_OPTIONS !== null && FRAMEWORK_OPTIONS !== void 0 && FRAMEWORK_OPTIONS.strictMode ? _react.StrictMode : _react.Fragment;
138
+
139
+ async function renderToDOM({
140
+ storyContext,
141
+ unboundStoryFn,
142
+ showMain,
143
+ showException,
144
+ forceRemount
145
+ }, domElement) {
146
+ const Story = unboundStoryFn;
147
+
148
+ const content = /*#__PURE__*/_react.default.createElement(ErrorBoundary, {
149
+ showMain: showMain,
150
+ showException: showException
151
+ }, /*#__PURE__*/_react.default.createElement(Story, storyContext)); // For React 15, StrictMode & Fragment doesn't exists.
152
+
153
+
154
+ const element = Wrapper ? /*#__PURE__*/_react.default.createElement(Wrapper, null, content) : content; // In most cases, we need to unmount the existing set of components in the DOM node.
155
+ // Otherwise, React may not recreate instances for every story run.
156
+ // This could leads to issues like below:
157
+ // https://github.com/storybookjs/react-storybook/issues/81
158
+ // (This is not the case when we change args or globals to the story however)
159
+
160
+ if (forceRemount) {
161
+ unmountElement(domElement);
162
+ }
163
+
164
+ await renderElement(element, domElement);
310
165
  }
@@ -1,11 +1,5 @@
1
1
  "use strict";
2
2
 
3
- require("core-js/modules/es.object.to-string.js");
4
-
5
- require("core-js/modules/web.dom-collections.for-each.js");
6
-
7
- require("core-js/modules/es.object.keys.js");
8
-
9
3
  Object.defineProperty(exports, "__esModule", {
10
4
  value: true
11
5
  });
@@ -17,7 +11,7 @@ Object.keys(_types).forEach(function (key) {
17
11
  if (key in exports && exports[key] === _types[key]) return;
18
12
  Object.defineProperty(exports, key, {
19
13
  enumerable: true,
20
- get: function get() {
14
+ get: function () {
21
15
  return _types[key];
22
16
  }
23
17
  });
@@ -39,13 +39,13 @@ function setProjectAnnotations(projectAnnotations) {
39
39
 
40
40
 
41
41
  function setGlobalConfig(projectAnnotations) {
42
- _clientLogger.once.warn("setGlobalConfig is deprecated. Use setProjectAnnotations instead.");
42
+ _clientLogger.once.warn(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`);
43
43
 
44
44
  setProjectAnnotations(projectAnnotations);
45
45
  } // This will not be necessary once we have auto preset loading
46
46
 
47
47
 
48
- var defaultProjectAnnotations = {
48
+ const defaultProjectAnnotations = {
49
49
  render: _render.render
50
50
  };
51
51
  /**
@@ -107,6 +107,6 @@ function composeStory(story, componentAnnotations, projectAnnotations, exportsNa
107
107
 
108
108
 
109
109
  function composeStories(csfExports, projectAnnotations) {
110
- var composedStories = (0, _store.composeStories)(csfExports, projectAnnotations, composeStory);
110
+ const composedStories = (0, _store.composeStories)(csfExports, projectAnnotations, composeStory);
111
111
  return composedStories;
112
112
  }
@@ -4,8 +4,6 @@ import { jsxDecorator } from './jsxDecorator';
4
4
  export const parameters = {
5
5
  docs: {
6
6
  inlineStories: true,
7
- // NOTE: that the result is a react element. Hooks support is provided by the outer code.
8
- prepareForInline: storyFn => storyFn(),
9
7
  extractArgTypes,
10
8
  extractComponentDescription
11
9
  }
@@ -1,7 +1,6 @@
1
1
  export declare const parameters: {
2
2
  docs: {
3
3
  inlineStories: boolean;
4
- prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import(".").ReactFramework, import("@storybook/csf").Args>) => import("./preview/types").StoryFnReactReturnType;
5
4
  extractArgTypes: import("lib/docs-tools/dist/types").ArgTypesExtractor;
6
5
  extractComponentDescription: typeof import("lib/docs-tools/dist/types").extractComponentDescription;
7
6
  };
@@ -1,13 +1,10 @@
1
- import type { PartialStoryFn } from '@storybook/csf';
2
1
  import { extractComponentDescription } from '@storybook/docs-tools';
3
- import { ReactFramework } from '..';
4
2
  export declare const parameters: {
5
3
  docs: {
6
4
  inlineStories: boolean;
7
- prepareForInline: (storyFn: PartialStoryFn<ReactFramework>) => import("../preview/types").StoryFnReactReturnType;
8
5
  extractArgTypes: import("@storybook/docs-tools").ArgTypesExtractor;
9
6
  extractComponentDescription: typeof extractComponentDescription;
10
7
  };
11
8
  };
12
- export declare const decorators: ((storyFn: PartialStoryFn<ReactFramework, import("@storybook/csf").Args>, context: import("@storybook/csf").StoryContext<ReactFramework, import("@storybook/csf").Args>) => import("../preview/types").StoryFnReactReturnType)[];
9
+ export declare const decorators: ((storyFn: import("@storybook/csf").PartialStoryFn<import("..").ReactFramework, import("@storybook/csf").Args>, context: import("@storybook/csf").StoryContext<import("..").ReactFramework, import("@storybook/csf").Args>) => import("../preview/types").StoryFnReactReturnType)[];
13
10
  export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("lib/addons/dist/types").Parameters)[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/react",
3
- "version": "7.0.0-alpha.1",
3
+ "version": "7.0.0-alpha.2",
4
4
  "description": "Storybook React renderer",
5
5
  "keywords": [
6
6
  "storybook"
@@ -33,12 +33,12 @@
33
33
  "prepare": "node ../../scripts/prepare.js"
34
34
  },
35
35
  "dependencies": {
36
- "@storybook/addons": "7.0.0-alpha.1",
37
- "@storybook/client-logger": "7.0.0-alpha.1",
38
- "@storybook/core-client": "7.0.0-alpha.1",
36
+ "@storybook/addons": "7.0.0-alpha.2",
37
+ "@storybook/client-logger": "7.0.0-alpha.2",
38
+ "@storybook/core-client": "7.0.0-alpha.2",
39
39
  "@storybook/csf": "0.0.2--canary.4566f4d.1",
40
- "@storybook/docs-tools": "7.0.0-alpha.1",
41
- "@storybook/store": "7.0.0-alpha.1",
40
+ "@storybook/docs-tools": "7.0.0-alpha.2",
41
+ "@storybook/store": "7.0.0-alpha.2",
42
42
  "@types/estree": "^0.0.51",
43
43
  "@types/node": "^14.14.20 || ^16.0.0",
44
44
  "acorn": "^7.4.1",
@@ -76,5 +76,5 @@
76
76
  "publishConfig": {
77
77
  "access": "public"
78
78
  },
79
- "gitHead": "b90b85210f66da59656c2ef58b0910b156256bea"
79
+ "gitHead": "44920e2b6bd51981bac5124743c29fb9f5517e44"
80
80
  }