@storybook/server 6.5.6 → 7.0.0-alpha.0

package/README.md

@@ -1,317 +1 @@
-# Storybook for Server
-
----
-
-Storybook for Server is a UI development environment for your plain HTML snippets rendered by your server backend.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-app
-npx sb init -t server
-```
-
-To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`:
-
-```js
-export const parameters = {
-  server: {
-    url: `http://localhost:${port}/storybook_preview`,
-  },
-};
-```
-
-The URL you connect to should have the ability to render a story, see [server rendering](#server-rendering) below.
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
-## Writing Stories
-
-To write a story, use whatever API is natural for your server-side rendering framework to generate set of JSON or YAML files of stories analogous to CSF files (see the [`server-kitchen-sink`](../../examples/server-kitchen-sink/stories) example for ideas).
-
-```json
-{
-  "title": "Component",
-  "parameters": {
-    "options": { "component": "my_widget" }
-  },
-  "stories": [
-    {
-      "name": "Default",
-      "parameters": {
-        "server": { "id": "path/of/your/story" }
-      }
-    }
-  ]
-}
-```
-
-In your `.storybook/main.js` you simply provide a glob specifying the location of those JSON files, e.g.
-
-```js
-module.exports = {
-  stories: ['../stories/**/*.stories.json'],
-};
-```
-
-Notice that the JSON does not specify a rendering function -- `@storybook/server` will instead call your `parameters.server.url` with the story's server id appended.
-
-For example the JSON story above is requivalent to the CSF3 definition:
-
-```javascript
-export default {
-  title: 'Component',
-  parameters: {
-    options: {
-      component: 'my_widget',
-    },
-  },
-};
-
-export const Default = {
-  name: 'Default',
-  parameters: {
-    server: {
-      id: 'path/of/your/story"',
-    },
-  },
-};
-```
-
-With the story HTML will be fetched from the server by making a GET request to http://localhost/storybook_preview/path/of/your/story`
-
-### Ruby/Rails support
-
-In particular the [View Component::Storybook](https://github.com/jonspalmer/view_component_storybook) gem provides a Ruby API for easily creating the above with a Ruby/Rails DSL (as well as providing a server rendering endpoint).
-
-## Server rendering
-
-The server rendering side of things is relatively straightfoward. When you browse to a story in the sidebar, Storybook will make a `fetch` request to `${parameters.server.url}/{parameters.server.id}` and display the HTML that is returned.
-
-You need to ensure the route in your server app renders the appropriate HTML when called in that fashion.
-
-### Passing parameters to the server
-
-Many components are likely to be dynamic - responding to parameters that change their content or appearance. `@storybook\server` has two mechanisms for passing those parameters to the server - `params` and `args`. Parameters defined in this way are appended to the fetch url as query string parameters. The server endpoint is responsible for interpreting those parameters and vary the returned html appropriately
-
-#### Constant parameters with `params`
-
-Static parameters can be defined using the `params` story parameter. For example suppose you have a Button component that has a label and color options:
-
-```json
-{
-  "title": "Buttons",
-  "stories": [
-    {
-      "name": "Red",
-      "parameters": {
-        "server": {
-          "id": "button",
-          "params": { "color": "red", "label": "Stop" }
-        }
-      }
-    },
-    {
-      "name": "Green",
-      "parameters": {
-        "server": {
-          "id": "button",
-          "params": { "color": "green", "label": "OK" }
-        }
-      }
-    }
-  ]
-}
-```
-
-The Red and Green story HTML will be fetched from the urls `server.url/controls/button?color=red&label=Stop` and `server.url/controls/button?color=green&label=OK`
-
-Like all story parameters server params can be defined in the default export and overridden in stories.
-
-```json
-{
-  "title": "Buttons",
-  "parameters": {
-    "server": {
-      "params": { "color": "red" }
-    }
-  },
-  "stories": [
-    {
-      "name": "Default",
-      "parameters": {
-        "server": {
-          "id": "button",
-          "params": { "label": "Stop" }
-        }
-      }
-    },
-    {
-      "name": "Green",
-      "parameters": {
-        "server": {
-          "id": "button",
-          "params": { "color": "green", "label": "OK" }
-        }
-      }
-    }
-  ]
-}
-```
-
-#### Dynamic parameters with `args` and Controls
-
-Dynamic parameters can be defined using args and the Controls addon
-
-```json
-{
-  "title": "Buttons",
-  "stories": [
-    {
-      "name": "Red",
-      "parameters": {
-        "server": {
-          "id": "button"
-        }
-      },
-      "args": { "color": "red", "label": "Stop" }
-    },
-    {
-      "name": "Green",
-      "parameters": {
-        "server": {
-          "id": "button"
-        }
-      },
-      "args": { "color": "green", "label": "Go" }
-    }
-  ]
-}
-```
-
-Story args are passed to the server as url query parameters just like `params` except now they can be varied on the Controls addon panel.
-
-Just like CSF stories we can define `argTypes` to specify the controls used in the controls panel. `argTypes` can be defined at the default or story level.
-
-```json
-{
-  "title": "Buttons",
-  "argTypes": {
-    "color": { "control": { "type": "color" } }
-  },
-  "stories": [
-    {
-      "name": "Red",
-      "parameters": {
-        "server": {
-          "id": "button"
-        }
-      },
-      "args": { "color": "red", "label": "Stop" }
-    },
-    {
-      "name": "Green",
-      "parameters": {
-        "server": {
-          "id": "button"
-        }
-      },
-      "args": { "color": "green", "label": "Go" }
-    }
-  ]
-}
-```
-
-## Addon compatibility
-
-Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. As some addons assume the story is rendered in JS, they may not work with `@storybook/server` (yet!).
-
-Many addons that act on the manager side (such as `backgrounds` and `viewport`) will work out of the box with `@storybook/server` -- you can configure them with parameters written on the server as usual.
-
-### Controls
-
-To configure controls, simple add `args` and `argTypes` keys to the story JSON much like you would CSF:
-
-```json
-{
-  "title": "Controls",
-  "stories": [
-    {
-      "name": "Button",
-      "parameters": {
-        "server": { "id": "controls/button" }
-      },
-      "args": { "button_text": "Push Me", "color": "red" },
-      "argTypes": { "button_text": { "control": { "type": "color" } } }
-    }
-  ]
-}
-```
-
-The controls values will be added to your story URL as query parameters.
-
-### Actions
-
-To use actions, use the `parameters.actions.handles` parameter:
-
-```json
-{
-  "title": "Actions",
-  "stories": [
-    {
-      "name": "Button",
-      "parameters": {
-        "server": { "id": "actions/button" },
-        "actions": {
-          "handles": ["mouseover", "click .btn"]
-        }
-      }
-    }
-  ]
-}
-```
-
-## Advanced Configuration
-
-### fetchStoryHtml
-
-For control over how `@storybook/server` fetches Html from the server you can provide a `fetchStoryHtml` function as a parameter. You would typically set this in `.storybook/preview.js` but it's just a regular Storybook parameter so could be overridden at the stories or story level.
-
-```javascript
-// .storybook/preview.js
-
-const fetchStoryHtml = async (url, path, params, context) => {
-  // Custom fetch implementation
-  // ....
-  return html;
-};
-
-export const parameters = {
-  server: {
-    url: `http://localhost:${port}/storybook_preview`,
-    fetchStoryHtml,
-  },
-};
-```
-
-`fetchStoryHtml` should be an async function with the following signature
-
-```javascript
-type FetchStoryHtmlType = (
-  url: string,
-  id: string,
-  params: any,
-  context: StoryContext
-) => Promise<string | Node>;
-```
-
-- url: Server url configured by the `parameters.server.url`
-- id: Id of the story being rendered given by `parameters.server.id`
-- params: Merged story params `parameters.server.params`and story args
-- context: The context of the story
+# Storybook Server renderer

package/dist/cjs/{client/index.js → index.js}

@@ -54,6 +54,7 @@ Object.defineProperty(exports, "storiesOf", {
 
 var _preview = require("./preview");
 
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
+var _module, _module$hot;
+
+// optimization: stop HMR propagation in webpack
+(_module = module) === null || _module === void 0 ? void 0 : (_module$hot = _module.hot) === null || _module$hot === void 0 ? void 0 : _module$hot.decline();

package/dist/cjs/{client/preview → preview}/index.js

@@ -7,14 +7,14 @@ exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = expo
 
 require("core-js/modules/es.array.concat.js");
 
-var _core = require("@storybook/core");
+var _coreClient = require("@storybook/core-client");
 
 require("./globals");
 
 var _render = require("./render");
 
 var framework = 'server';
-var api = (0, _core.start)(_render.renderToDOM, {
+var api = (0, _coreClient.start)(_render.renderToDOM, {
   render: _render.render
 });
 

package/dist/cjs/preview/render.js

@@ -0,0 +1,210 @@
+"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.symbol.async-iterator.js");
+
+require("core-js/modules/es.symbol.to-string-tag.js");
+
+require("core-js/modules/es.json.to-string-tag.js");
+
+require("core-js/modules/es.math.to-string-tag.js");
+
+require("core-js/modules/es.object.get-prototype-of.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.object.freeze.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.render = void 0;
+exports.renderToDOM = renderToDOM;
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.promise.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/web.url.js");
+
+require("core-js/modules/web.url-search-params.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.search.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.function.name.js");
+
+var _global = _interopRequireDefault(require("global"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _previewWeb = require("@storybook/preview-web");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+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; }
+
+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 fetch = _global.default.fetch,
+    Node = _global.default.Node;
+
+var defaultFetchStoryHtml = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, path, params, storyContext) {
+    var fetchUrl, response;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            fetchUrl = new URL("".concat(url, "/").concat(path));
+            fetchUrl.search = new URLSearchParams(Object.assign({}, storyContext.globals, params)).toString();
+            _context.next = 4;
+            return fetch(fetchUrl);
+
+          case 4:
+            response = _context.sent;
+            return _context.abrupt("return", response.text());
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function defaultFetchStoryHtml(_x, _x2, _x3, _x4) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var buildStoryArgs = function buildStoryArgs(args, argTypes) {
+  var storyArgs = Object.assign({}, args);
+  Object.keys(argTypes).forEach(function (key) {
+    var argType = argTypes[key];
+    var control = argType.control;
+    var controlType = control && control.type.toLowerCase();
+    var argValue = storyArgs[key];
+
+    switch (controlType) {
+      case 'date':
+        // For cross framework & language support we pick a consistent representation of Dates as strings
+        storyArgs[key] = new Date(argValue).toISOString();
+        break;
+
+      case 'object':
+        // send objects as JSON strings
+        storyArgs[key] = JSON.stringify(argValue);
+        break;
+
+      default:
+    }
+  });
+  return storyArgs;
+};
+
+var render = function render(args) {};
+
+exports.render = render;
+
+function renderToDOM(_x5, _x6) {
+  return _renderToDOM.apply(this, arguments);
+}
+
+function _renderToDOM() {
+  _renderToDOM = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2, domElement) {
+    var id, title, name, showMain, showError, forceRemount, storyFn, storyContext, _ref2$storyContext, parameters, args, argTypes, storyArgs, _parameters$server, url, storyId, _parameters$server$fe, fetchStoryHtml, params, fetchId, storyParams, element;
+
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            id = _ref2.id, title = _ref2.title, name = _ref2.name, showMain = _ref2.showMain, showError = _ref2.showError, forceRemount = _ref2.forceRemount, storyFn = _ref2.storyFn, storyContext = _ref2.storyContext, _ref2$storyContext = _ref2.storyContext, parameters = _ref2$storyContext.parameters, args = _ref2$storyContext.args, argTypes = _ref2$storyContext.argTypes;
+            // Some addons wrap the storyFn so we need to call it even though Server doesn't need the answer
+            storyFn();
+            storyArgs = buildStoryArgs(args, argTypes);
+            _parameters$server = parameters.server, url = _parameters$server.url, storyId = _parameters$server.id, _parameters$server$fe = _parameters$server.fetchStoryHtml, fetchStoryHtml = _parameters$server$fe === void 0 ? defaultFetchStoryHtml : _parameters$server$fe, params = _parameters$server.params;
+            fetchId = storyId || id;
+            storyParams = Object.assign({}, params, storyArgs);
+            _context2.next = 8;
+            return fetchStoryHtml(url, fetchId, storyParams, storyContext);
+
+          case 8:
+            element = _context2.sent;
+            showMain();
+
+            if (!(typeof element === 'string')) {
+              _context2.next = 15;
+              break;
+            }
+
+            domElement.innerHTML = element;
+            (0, _previewWeb.simulatePageLoad)(domElement);
+            _context2.next = 24;
+            break;
+
+          case 15:
+            if (!(element instanceof Node)) {
+              _context2.next = 23;
+              break;
+            }
+
+            if (!(domElement.firstChild === element && forceRemount === false)) {
+              _context2.next = 18;
+              break;
+            }
+
+            return _context2.abrupt("return");
+
+          case 18:
+            domElement.innerHTML = '';
+            domElement.appendChild(element);
+            (0, _previewWeb.simulateDOMContentLoaded)();
+            _context2.next = 24;
+            break;
+
+          case 23:
+            showError({
+              title: "Expecting an HTML snippet or DOM node from the story: \"".concat(name, "\" of \"").concat(title, "\"."),
+              description: (0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        Did you forget to return the HTML snippet from the story?\n        Use \"() => <your snippet or node>\" or when defining the story.\n      "])))
+            });
+
+          case 24:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _renderToDOM.apply(this, arguments);
+}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw } from './preview'; // optimization: stop HMR propagation in webpack
+
+module?.hot?.decline();

package/dist/{modern/client → esm}/preview/index.js

@@ -1,4 +1,4 @@
-import { start } from '@storybook/core';
+import { start } from '@storybook/core-client';
 import './globals';
 import { renderToDOM, render } from './render';
 const framework = 'server';

package/dist/{ts3.9/client → types}/preview/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="webpack-env" />
-/// <reference types="node" />
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 import './globals';
 import type { IStorybookSection, ServerFramework } from './types';
@@ -16,6 +15,6 @@ export declare const configure: ClientApi['configure'];
 export declare const addDecorator: (() => never) | ((decorator: import("@storybook/csf").DecoratorFunction<ServerFramework, import("@storybook/addons").Args>) => void), addParameters: (({ globals, globalTypes, ...parameters }: import("@storybook/csf").Parameters & {
     globals?: import("@storybook/csf").Globals;
     globalTypes?: import("@storybook/csf").GlobalTypes;
-}) => void) | (() => never), clearDecorators: (() => void) | (() => never), setAddon: ((addon: any) => void) | (() => never), getStorybook: (() => never) | (() => import("@storybook/client-api/dist/ts3.9/ClientApi").GetStorybookKind<ServerFramework>[]), raw: (() => never) | (() => import("@storybook/store").BoundStory<ServerFramework>[]);
+}) => void) | (() => never), clearDecorators: (() => void) | (() => never), setAddon: ((addon: any) => void) | (() => never), getStorybook: (() => never) | (() => import("lib/client-api/dist/types/ClientApi").GetStorybookKind<ServerFramework>[]), raw: (() => never) | (() => import("lib/store/dist/types").BoundStory<ServerFramework>[]);
 export declare const forceReRender: (() => never) | (() => void);
 export {};

package/dist/{ts3.9/client → types}/preview/types.d.ts

@@ -1,5 +1,5 @@
 import type { StoryContext } from '@storybook/csf';
-export type { RenderContext } from '@storybook/core';
+export type { RenderContext } from '@storybook/core-client';
 export declare type StoryFnServerReturnType = any;
 export declare type ServerFramework = {
     component: string;