react-cosmos 5.6.4

package/dist/dom/DomFixtureLoader.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DomFixtureLoader = DomFixtureLoader;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FixtureLoader = require("react-cosmos-shared2/FixtureLoader");
+
+var _ErrorCatch = require("./ErrorCatch");
+
+var _rendererConnect = require("./rendererConnect");
+
+var _rendererId = require("./rendererId");
+
+var _renderMessage = require("./renderMessage");
+
+var _selectedFixtureId = require("./selectedFixtureId");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function DomFixtureLoader(_ref) {
+  var fixtures = _ref.fixtures,
+      decorators = _ref.decorators,
+      onErrorReset = _ref.onErrorReset;
+  return /*#__PURE__*/_react.default.createElement(_FixtureLoader.FixtureLoader, {
+    rendererId: _rendererId.rendererId,
+    rendererConnect: _rendererConnect.rendererConnect,
+    fixtures: fixtures,
+    selectedFixtureId: _selectedFixtureId.selectedFixtureId,
+    systemDecorators: [_ErrorCatch.ErrorCatch],
+    userDecorators: decorators,
+    renderMessage: _renderMessage.renderMessage,
+    onErrorReset: onErrorReset
+  });
+}

package/dist/dom/ErrorCatch.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ReactDecoratorProps } from 'react-cosmos-shared2/react';
+declare type State = {
+    error: null | string;
+};
+export declare class ErrorCatch extends React.Component<ReactDecoratorProps, State> {
+    state: State;
+    componentDidCatch(error: Error, info: {
+        componentStack: string;
+    }): void;
+    componentDidUpdate(prevProps: ReactDecoratorProps): void;
+    render(): React.ReactNode;
+    renderError(error: string): JSX.Element | null;
+}
+export {};

package/dist/dom/ErrorCatch.js

@@ -0,0 +1,117 @@
+"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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorCatch = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _lodash = require("lodash");
+
+var _react2 = require("react-cosmos-shared2/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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 _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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ErrorCatch = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorCatch, _React$Component);
+
+  var _super = _createSuper(ErrorCatch);
+
+  function ErrorCatch() {
+    var _this;
+
+    _classCallCheck(this, ErrorCatch);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      error: null
+    });
+
+    return _this;
+  }
+
+  _createClass(ErrorCatch, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      this.setState({
+        error: "".concat(error.message, "\n").concat(info.componentStack)
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // A change in fixture (children) or fixture state signifies that the
+      // problem that caused the current error might've been solved. If the error
+      // persists, it will organically trigger the error state again in the next
+      // update
+      if (this.state.error && (fixtureChanged(this.props.children, prevProps.children) || fixtureStateChanged(this.props.fixtureState, prevProps.fixtureState))) {
+        this.setState({
+          error: null
+        });
+        this.props.onErrorReset();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.state.error ? this.renderError(this.state.error) : this.props.children;
+    }
+  }, {
+    key: "renderError",
+    value: function renderError(error) {
+      // Don't render error details here in dev mode because react-error-overlay
+      // takes care of it in a nicer way. We used to render both for a while but
+      // it proved annoying. react-error-overlay has a slight delay and seeing
+      // the same error reported twice feels clumsy.
+      if (__DEV__) {
+        return null;
+      } // In static exports, however, where react-error-overlay is missing,
+      // rendering plain error details is superior to showing a blank screen.
+
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, "Ouch, something wrong!")), /*#__PURE__*/_react.default.createElement("pre", null, error), /*#__PURE__*/_react.default.createElement("p", null, "Check console for more info."));
+    }
+  }]);
+
+  return ErrorCatch;
+}(_react.default.Component);
+
+exports.ErrorCatch = ErrorCatch;
+
+function fixtureChanged(f1, f2) {
+  return !(0, _react2.areNodesEqual)(f1, f2, true);
+}
+
+function fixtureStateChanged(fS1, fS2) {
+  return !(0, _lodash.isEqual)(fS1, fS2);
+}

package/dist/dom/container.d.ts

@@ -0,0 +1 @@
+export declare function getDomContainer(querySelector: null | string): Element;

package/dist/dom/container.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDomContainer = getDomContainer;
+
+function getDomContainer(querySelector) {
+  if (!querySelector) {
+    return getFallbackDomContainer();
+  }
+
+  var existingContainer = document.querySelector(querySelector);
+
+  if (!existingContainer) {
+    console.warn("Query selector \"".concat(querySelector, "\" doesn't match any existing DOM element. ") + "Are you using a custom HTML template? " + "Add an element matching \"".concat(querySelector, "\" to your template or change the containerQuerySelector setting."));
+    return getFallbackDomContainer();
+  }
+
+  return existingContainer;
+}
+
+function getFallbackDomContainer() {
+  return document.getElementById('root') || createDomContainer();
+}
+
+function createDomContainer() {
+  var container = document.createElement('div');
+  container.setAttribute('id', 'root');
+  document.body.appendChild(container);
+  return container;
+}

package/dist/dom/globalErrorHandler.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dom/globalErrorHandler.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _rendererId = require("./rendererId");
+
+var _rendererConnect = require("./rendererConnect");
+
+window.addEventListener('error', function () {
+  _rendererConnect.rendererConnect.postMessage({
+    type: 'rendererError',
+    payload: {
+      rendererId: _rendererId.rendererId
+    }
+  });
+});

package/dist/dom/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactDecoratorsByPath, ReactFixtureExportsByPath } from 'react-cosmos-shared2/react';
+import { DomRendererConfig } from '../shared/rendererConfig';
+import './globalErrorHandler';
+import { rendererConnect } from './rendererConnect';
+import { rendererId } from './rendererId';
+export { rendererId, rendererConnect };
+declare type Args = {
+    rendererConfig: DomRendererConfig;
+    fixtures: ReactFixtureExportsByPath;
+    decorators: ReactDecoratorsByPath;
+    onErrorReset?: () => unknown;
+};
+export declare function mountDomRenderer({ rendererConfig, fixtures, decorators, onErrorReset, }: Args): void;

package/dist/dom/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mountDomRenderer = mountDomRenderer;
+Object.defineProperty(exports, "rendererConnect", {
+  enumerable: true,
+  get: function get() {
+    return _rendererConnect.rendererConnect;
+  }
+});
+Object.defineProperty(exports, "rendererId", {
+  enumerable: true,
+  get: function get() {
+    return _rendererId.rendererId;
+  }
+});
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _container = require("./container");
+
+var _DomFixtureLoader = require("./DomFixtureLoader");
+
+require("./globalErrorHandler");
+
+var _rendererConnect = require("./rendererConnect");
+
+var _rendererId = require("./rendererId");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function mountDomRenderer(_ref) {
+  var rendererConfig = _ref.rendererConfig,
+      fixtures = _ref.fixtures,
+      decorators = _ref.decorators,
+      onErrorReset = _ref.onErrorReset;
+  var domContainer = (0, _container.getDomContainer)(rendererConfig.containerQuerySelector);
+  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_DomFixtureLoader.DomFixtureLoader, {
+    fixtures: fixtures,
+    decorators: decorators,
+    onErrorReset: onErrorReset
+  }), domContainer);
+}

package/dist/dom/renderMessage.d.ts

@@ -0,0 +1,3 @@
+export declare function renderMessage({ msg }: {
+    msg: string;
+}): JSX.Element;

package/dist/dom/renderMessage.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderMessage = renderMessage;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var containerStyle = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontFamily: '-apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", Helvetica, sans-serif',
+  fontSize: 14
+};
+
+function renderMessage(_ref) {
+  var msg = _ref.msg;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: containerStyle
+  }, msg);
+}

package/dist/dom/rendererConnect.d.ts

@@ -0,0 +1 @@
+export declare const rendererConnect: import("react-cosmos-shared2/renderer").RendererConnect<import("react-cosmos-shared2/renderer").RendererRequest, import("react-cosmos-shared2/renderer").RendererResponse>;

package/dist/dom/rendererConnect.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rendererConnect = void 0;
+
+var _FixtureLoader = require("react-cosmos-shared2/FixtureLoader");
+
+var _shared = require("./shared");
+
+var rendererConnect = (0, _shared.isInsideCosmosPreviewIframe)() ? (0, _FixtureLoader.createPostMessageConnect)() : (0, _FixtureLoader.createWebSocketsConnect)(getWebSocketsUrl());
+exports.rendererConnect = rendererConnect;
+
+function getWebSocketsUrl() {
+  // TODO: Allow user to input URL
+  return location.origin;
+}

package/dist/dom/rendererId.d.ts

@@ -0,0 +1 @@
+export declare const rendererId: string;

package/dist/dom/rendererId.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rendererId = void 0;
+
+var _util = require("react-cosmos-shared2/util");
+
+var rendererId = getRendererId(); // Renderer ID is remembered to avoid announcing a new renderer when reloading
+// the renderer window. Note that each tab has creates a new session and thus
+// a new rendererId.
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
+
+exports.rendererId = rendererId;
+
+function getRendererId() {
+  var id = sessionStorage.getItem('cosmosRendererId');
+
+  if (!id) {
+    id = (0, _util.uuid)();
+    sessionStorage.setItem('cosmosRendererId', id);
+  }
+
+  return id;
+}

package/dist/dom/selectedFixtureId.d.ts

@@ -0,0 +1,2 @@
+import { FixtureId } from 'react-cosmos-shared2/renderer';
+export declare const selectedFixtureId: FixtureId | null;

package/dist/dom/selectedFixtureId.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectedFixtureId = void 0;
+
+var _url = require("react-cosmos-shared2/url");
+
+var _shared = require("./shared");
+
+var selectedFixtureId = getSelectedFixtureId(); // The selected fixture ID is stored in session because components might change
+// the URL as a side effect. This means that after the renderer stores the
+// fixture ID initially, the renderer window can be refreshed and the same
+// fixture will be selected even if the URL no longer contains the fixture ID.
+
+exports.selectedFixtureId = selectedFixtureId;
+
+function getSelectedFixtureId() {
+  var urlParams = (0, _url.parseRendererUrlQuery)(location.search);
+
+  if (urlParams._fixtureId) {
+    setFixtureIdToSession(urlParams._fixtureId);
+    return urlParams._fixtureId;
+  }
+
+  return getFixtureIdFromSession();
+}
+
+function setFixtureIdToSession(fixtureId) {
+  sessionStorage.setItem('cosmosFixtureId', JSON.stringify(fixtureId));
+}
+
+function getFixtureIdFromSession() {
+  if ((0, _shared.isInsideCosmosPreviewIframe)()) {
+    return null;
+  }
+
+  var stringifiedFixtureId = sessionStorage.getItem('cosmosFixtureId');
+  return stringifiedFixtureId ? JSON.parse(stringifiedFixtureId) : null;
+}

package/dist/dom/shared.d.ts

@@ -0,0 +1 @@
+export declare function isInsideCosmosPreviewIframe(): boolean;

package/dist/dom/shared.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isInsideCosmosPreviewIframe = isInsideCosmosPreviewIframe;
+
+function isInsideCosmosPreviewIframe() {
+  try {
+    return window.self !== window.parent;
+  } catch (e) {
+    return true;
+  }
+}

package/dist/fixture.d.ts

@@ -0,0 +1 @@
+export { FixtureContext, useSelect, useValue, Viewport, } from 'react-cosmos-shared2/FixtureLoader';

package/dist/fixture.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FixtureContext", {
+  enumerable: true,
+  get: function get() {
+    return _FixtureLoader.FixtureContext;
+  }
+});
+Object.defineProperty(exports, "useSelect", {
+  enumerable: true,
+  get: function get() {
+    return _FixtureLoader.useSelect;
+  }
+});
+Object.defineProperty(exports, "useValue", {
+  enumerable: true,
+  get: function get() {
+    return _FixtureLoader.useValue;
+  }
+});
+Object.defineProperty(exports, "Viewport", {
+  enumerable: true,
+  get: function get() {
+    return _FixtureLoader.Viewport;
+  }
+});
+
+var _FixtureLoader = require("react-cosmos-shared2/FixtureLoader");

package/dist/getFixtureUrls.d.ts

@@ -0,0 +1,8 @@
+import { CosmosConfig } from './config';
+declare type Args = {
+    cosmosConfig: CosmosConfig;
+    fullScreen?: boolean;
+};
+export declare const getFixtureUrls: (args: Args) => Promise<string[]>;
+export declare function getFixtureUrlsSync({ cosmosConfig, fullScreen }: Args): string[];
+export {};

package/dist/getFixtureUrls.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFixtureUrlsSync = getFixtureUrlsSync;
+exports.getFixtureUrls = void 0;
+
+var _react = require("react-cosmos-shared2/react");
+
+var _url = require("react-cosmos-shared2/url");
+
+var _playgroundHtml = require("./shared/playgroundHtml");
+
+var _userDeps = require("./shared/userDeps");
+
+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 getFixtureUrls = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(args) {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            return _context.abrupt("return", getFixtureUrlsSync(args));
+
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function getFixtureUrls(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.getFixtureUrls = getFixtureUrls;
+
+function getFixtureUrlsSync(_ref2) {
+  var cosmosConfig = _ref2.cosmosConfig,
+      _ref2$fullScreen = _ref2.fullScreen,
+      fullScreen = _ref2$fullScreen === void 0 ? false : _ref2$fullScreen;
+  var host = getPlaygroundHost(cosmosConfig);
+  var fixtureUrls = [];
+
+  function pushFixtureUrl(fixtureId) {
+    fixtureUrls.push(createFixtureUrl(host, fixtureId, fullScreen));
+  }
+
+  var _getUserModules = (0, _userDeps.getUserModules)(cosmosConfig),
+      fixtureExportsByPath = _getUserModules.fixtureExportsByPath;
+
+  var fixtureNamesByPath = (0, _react.getFixtureNamesByPath)(fixtureExportsByPath);
+  Object.keys(fixtureNamesByPath).forEach(function (fixturePath) {
+    var fixtureNames = fixtureNamesByPath[fixturePath];
+
+    if (fixtureNames === null) {
+      pushFixtureUrl({
+        path: fixturePath,
+        name: null
+      });
+    } else {
+      fixtureNames.forEach(function (fixtureName) {
+        pushFixtureUrl({
+          path: fixturePath,
+          name: fixtureName
+        });
+      });
+    }
+  });
+  return fixtureUrls;
+}
+
+function createFixtureUrl(host, fixtureId, fullScreen) {
+  if (fullScreen) {
+    var _query = (0, _url.stringifyRendererUrlQuery)({
+      _fixtureId: fixtureId
+    });
+
+    return "".concat(host, "/").concat(_playgroundHtml.RENDERER_FILENAME, "?").concat(_query);
+  }
+
+  var query = (0, _url.stringifyPlaygroundUrlQuery)({
+    fixtureId: fixtureId
+  });
+  return "".concat(host, "/?").concat(query);
+}
+
+function getPlaygroundHost(_ref3) {
+  var hostname = _ref3.hostname,
+      port = _ref3.port;
+  return "".concat(hostname || 'localhost', ":").concat(port);
+}

package/dist/getFixtures.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FixtureId } from 'react-cosmos-shared2/renderer';
+import { CosmosConfig } from './config';
+declare type Args = {
+    cosmosConfig: CosmosConfig;
+};
+declare type RenderableFixture = {
+    fixtureId: FixtureId;
+    getElement: () => React.ReactElement<any>;
+};
+export declare const getFixtures: (args: Args) => Promise<RenderableFixture[]>;
+export declare function getFixturesSync({ cosmosConfig }: Args): RenderableFixture[];
+export {};