@storybook/react 6.5.10 → 6.5.11-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 (4) hide show
  1. package/dist/cjs/client/preview/render.js +25 -10
  2. package/dist/esm/client/preview/render.js +26 -11
  3. package/dist/modern/client/preview/render.js +19 -5
  4. package/package.json +9 -9
package/dist/cjs/client/preview/render.js CHANGED
@@ -93,8 +93,21 @@ var render = function render(args, context) {
93
93
 
94
94
  exports.render = render;
95
95
 
96
+ var WithCallback = function WithCallback(_ref) {
97
+ var callback = _ref.callback,
98
+ children = _ref.children;
99
+ // See https://github.com/reactwg/react-18/discussions/5#discussioncomment-2276079
100
+ var once = (0, _react.useRef)(false);
101
+ (0, _react.useLayoutEffect)(function () {
102
+ if (once.current) return;
103
+ once.current = true;
104
+ callback();
105
+ }, [callback]);
106
+ return children;
107
+ };
108
+
96
109
  var renderElement = /*#__PURE__*/function () {
97
- var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el) {
110
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el) {
98
111
  var root;
99
112
  return regeneratorRuntime.wrap(function _callee$(_context) {
100
113
  while (1) {
@@ -107,10 +120,12 @@ var renderElement = /*#__PURE__*/function () {
107
120
  root = _context.sent;
108
121
  return _context.abrupt("return", new Promise(function (resolve) {
109
122
  if (root) {
110
- root.render(node);
111
- setTimeout(function () {
112
- resolve(null);
113
- }, 0);
123
+ root.render( /*#__PURE__*/_react.default.createElement(WithCallback, {
124
+ key: Math.random(),
125
+ callback: function callback() {
126
+ return resolve(null);
127
+ }
128
+ }, node));
114
129
  } else {
115
130
  _reactDom.default.render(node, el, function () {
116
131
  return resolve(null);
@@ -127,7 +142,7 @@ var renderElement = /*#__PURE__*/function () {
127
142
  }));
128
143
 
129
144
  return function renderElement(_x, _x2) {
130
- return _ref.apply(this, arguments);
145
+ return _ref2.apply(this, arguments);
131
146
  };
132
147
  }();
133
148
 
@@ -148,7 +163,7 @@ var unmountElement = function unmountElement(el) {
148
163
  };
149
164
 
150
165
  var getReactRoot = /*#__PURE__*/function () {
151
- var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(el) {
166
+ var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(el) {
152
167
  var root, reactDomClient;
153
168
  return regeneratorRuntime.wrap(function _callee2$(_context2) {
154
169
  while (1) {
@@ -191,7 +206,7 @@ var getReactRoot = /*#__PURE__*/function () {
191
206
  }));
192
207
 
193
208
  return function getReactRoot(_x3) {
194
- return _ref2.apply(this, arguments);
209
+ return _ref3.apply(this, arguments);
195
210
  };
196
211
  }();
197
212
 
@@ -259,13 +274,13 @@ function renderToDOM(_x4, _x5) {
259
274
  }
260
275
 
261
276
  function _renderToDOM() {
262
- _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref3, domElement) {
277
+ _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref4, domElement) {
263
278
  var storyContext, unboundStoryFn, showMain, showException, forceRemount, Story, content, element;
264
279
  return regeneratorRuntime.wrap(function _callee3$(_context3) {
265
280
  while (1) {
266
281
  switch (_context3.prev = _context3.next) {
267
282
  case 0:
268
- storyContext = _ref3.storyContext, unboundStoryFn = _ref3.unboundStoryFn, showMain = _ref3.showMain, showException = _ref3.showException, forceRemount = _ref3.forceRemount;
283
+ storyContext = _ref4.storyContext, unboundStoryFn = _ref4.unboundStoryFn, showMain = _ref4.showMain, showException = _ref4.showException, forceRemount = _ref4.forceRemount;
269
284
  Story = unboundStoryFn;
270
285
  content = /*#__PURE__*/_react.default.createElement(ErrorBoundary, {
271
286
  showMain: showMain,
package/dist/esm/client/preview/render.js CHANGED
@@ -40,7 +40,7 @@ import "core-js/modules/es.symbol.js";
40
40
  import "core-js/modules/es.symbol.description.js";
41
41
  import "core-js/modules/es.symbol.iterator.js";
42
42
  import global from 'global';
43
- import React, { Component as ReactComponent, StrictMode, Fragment } from 'react';
43
+ import React, { Component as ReactComponent, StrictMode, Fragment, useLayoutEffect, useRef } from 'react';
44
44
  import ReactDOM, { version as reactDomVersion } from 'react-dom';
45
45
  var FRAMEWORK_OPTIONS = global.FRAMEWORK_OPTIONS; // A map of all rendered React 18 nodes
46
46
 
@@ -56,8 +56,21 @@ export var render = function render(args, context) {
56
56
  return /*#__PURE__*/React.createElement(Component, args);
57
57
  };
58
58
 
59
+ var WithCallback = function WithCallback(_ref) {
60
+ var callback = _ref.callback,
61
+ children = _ref.children;
62
+ // See https://github.com/reactwg/react-18/discussions/5#discussioncomment-2276079
63
+ var once = useRef(false);
64
+ useLayoutEffect(function () {
65
+ if (once.current) return;
66
+ once.current = true;
67
+ callback();
68
+ }, [callback]);
69
+ return children;
70
+ };
71
+
59
72
  var renderElement = /*#__PURE__*/function () {
60
- var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el) {
73
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el) {
61
74
  var root;
62
75
  return regeneratorRuntime.wrap(function _callee$(_context) {
63
76
  while (1) {
@@ -70,10 +83,12 @@ var renderElement = /*#__PURE__*/function () {
70
83
  root = _context.sent;
71
84
  return _context.abrupt("return", new Promise(function (resolve) {
72
85
  if (root) {
73
- root.render(node);
74
- setTimeout(function () {
75
- resolve(null);
76
- }, 0);
86
+ root.render( /*#__PURE__*/React.createElement(WithCallback, {
87
+ key: Math.random(),
88
+ callback: function callback() {
89
+ return resolve(null);
90
+ }
91
+ }, node));
77
92
  } else {
78
93
  ReactDOM.render(node, el, function () {
79
94
  return resolve(null);
@@ -90,7 +105,7 @@ var renderElement = /*#__PURE__*/function () {
90
105
  }));
91
106
 
92
107
  return function renderElement(_x, _x2) {
93
- return _ref.apply(this, arguments);
108
+ return _ref2.apply(this, arguments);
94
109
  };
95
110
  }();
96
111
 
@@ -110,7 +125,7 @@ var unmountElement = function unmountElement(el) {
110
125
  };
111
126
 
112
127
  var getReactRoot = /*#__PURE__*/function () {
113
- var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(el) {
128
+ var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(el) {
114
129
  var root, reactDomClient;
115
130
  return regeneratorRuntime.wrap(function _callee2$(_context2) {
116
131
  while (1) {
@@ -151,7 +166,7 @@ var getReactRoot = /*#__PURE__*/function () {
151
166
  }));
152
167
 
153
168
  return function getReactRoot(_x3) {
154
- return _ref2.apply(this, arguments);
169
+ return _ref3.apply(this, arguments);
155
170
  };
156
171
  }();
157
172
 
@@ -218,13 +233,13 @@ export function renderToDOM(_x4, _x5) {
218
233
  }
219
234
 
220
235
  function _renderToDOM() {
221
- _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref3, domElement) {
236
+ _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref4, domElement) {
222
237
  var storyContext, unboundStoryFn, showMain, showException, forceRemount, Story, content, element;
223
238
  return regeneratorRuntime.wrap(function _callee3$(_context3) {
224
239
  while (1) {
225
240
  switch (_context3.prev = _context3.next) {
226
241
  case 0:
227
- storyContext = _ref3.storyContext, unboundStoryFn = _ref3.unboundStoryFn, showMain = _ref3.showMain, showException = _ref3.showException, forceRemount = _ref3.forceRemount;
242
+ storyContext = _ref4.storyContext, unboundStoryFn = _ref4.unboundStoryFn, showMain = _ref4.showMain, showException = _ref4.showException, forceRemount = _ref4.forceRemount;
228
243
  Story = unboundStoryFn;
229
244
  content = /*#__PURE__*/React.createElement(ErrorBoundary, {
230
245
  showMain: showMain,
package/dist/modern/client/preview/render.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import global from 'global';
2
- import React, { Component as ReactComponent, StrictMode, Fragment } from 'react';
2
+ import React, { Component as ReactComponent, StrictMode, Fragment, useLayoutEffect, useRef } from 'react';
3
3
  import ReactDOM, { version as reactDomVersion } from 'react-dom';
4
4
  const {
5
5
  FRAMEWORK_OPTIONS
@@ -19,15 +19,29 @@ export const render = (args, context) => {
19
19
  return /*#__PURE__*/React.createElement(Component, args);
20
20
  };
21
21
 
22
+ const WithCallback = ({
23
+ callback,
24
+ children
25
+ }) => {
26
+ // See https://github.com/reactwg/react-18/discussions/5#discussioncomment-2276079
27
+ const once = useRef(false);
28
+ useLayoutEffect(() => {
29
+ if (once.current) return;
30
+ once.current = true;
31
+ callback();
32
+ }, [callback]);
33
+ return children;
34
+ };
35
+
22
36
  const renderElement = async (node, el) => {
23
37
  // Create Root Element conditionally for new React 18 Root Api
24
38
  const root = await getReactRoot(el);
25
39
  return new Promise(resolve => {
26
40
  if (root) {
27
- root.render(node);
28
- setTimeout(() => {
29
- resolve(null);
30
- }, 0);
41
+ root.render( /*#__PURE__*/React.createElement(WithCallback, {
42
+ key: Math.random(),
43
+ callback: () => resolve(null)
44
+ }, node));
31
45
  } else {
32
46
  ReactDOM.render(node, el, () => resolve(null));
33
47
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/react",
3
- "version": "6.5.10",
3
+ "version": "6.5.11-alpha.2",
4
4
  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
5
5
  "keywords": [
6
6
  "storybook"
@@ -49,16 +49,16 @@
49
49
  "@babel/preset-flow": "^7.12.1",
50
50
  "@babel/preset-react": "^7.12.10",
51
51
  "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
52
- "@storybook/addons": "6.5.10",
53
- "@storybook/client-logger": "6.5.10",
54
- "@storybook/core": "6.5.10",
55
- "@storybook/core-common": "6.5.10",
52
+ "@storybook/addons": "6.5.11-alpha.2",
53
+ "@storybook/client-logger": "6.5.11-alpha.2",
54
+ "@storybook/core": "6.5.11-alpha.2",
55
+ "@storybook/core-common": "6.5.11-alpha.2",
56
56
  "@storybook/csf": "0.0.2--canary.4566f4d.1",
57
- "@storybook/docs-tools": "6.5.10",
58
- "@storybook/node-logger": "6.5.10",
57
+ "@storybook/docs-tools": "6.5.11-alpha.2",
58
+ "@storybook/node-logger": "6.5.11-alpha.2",
59
59
  "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
60
60
  "@storybook/semver": "^7.3.2",
61
- "@storybook/store": "6.5.10",
61
+ "@storybook/store": "6.5.11-alpha.2",
62
62
  "@types/estree": "^0.0.51",
63
63
  "@types/node": "^14.14.20 || ^16.0.0",
64
64
  "@types/webpack-env": "^1.16.0",
@@ -119,6 +119,6 @@
119
119
  "publishConfig": {
120
120
  "access": "public"
121
121
  },
122
- "gitHead": "893881ff6f87272c0ab0f21776ef8fef990d0c36",
122
+ "gitHead": "069134850deba5a8f7497cc66d4dee834ac95ba5",
123
123
  "sbmodern": "dist/modern/client/index.js"
124
124
  }