@skbkontur/storybook-addon-live-examples/dist/cjs/components/useCode.js

Storybook live examples plugin

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.formatCode = void 0;
exports.useCode = useCode;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = require("react");
var _standalone = require("prettier/standalone");
var prettierPluginBabel = _interopRequireWildcard(require("prettier/plugins/babel"));
var prettierPluginEstree = _interopRequireWildcard(require("prettier/plugins/estree"));
var _utils = require("./utils");
var _events = require("./events");
var _useStorage2 = require("./useStorage");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
var CHUNK_SEPARATOR = /^\s*(?:@|\/\/)MOBILE@?/m;
var formatCode = exports.formatCode = /*#__PURE__*/function () {
  var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(code) {
    return _regenerator["default"].wrap(function (_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          _context.next = 1;
          return (0, _standalone.format)(code, {
            parser: 'babel',
            plugins: [prettierPluginBabel, prettierPluginEstree]
          });
        case 1:
          return _context.abrupt("return", _context.sent);
        case 2:
        case "end":
          return _context.stop();
      }
    }, _callee);
  }));
  return function formatCode(_x) {
    return _ref.apply(this, arguments);
  };
}();
var transpile = function transpile(code) {
  return (0, _utils.transpileTs)(code).then(function (jsCode) {
    return formatCode(jsCode).then(function (code) {
      return code;
    });
  });
};
function useCode(_ref2) {
  var initialCode = _ref2.initialCode,
    live = _ref2.live,
    language = _ref2.language,
    _ref2$storage = _ref2.storage,
    storage = _ref2$storage === void 0 ? sessionStorage : _ref2$storage,
    storageKey = _ref2.storageKey;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    ready = _useState2[0],
    setReady = _useState2[1];
  var needsTranspile = live && ['typescript', 'tsx'].includes(language);
  var _useState3 = (0, _react.useState)(+new Date()),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    resetKey = _useState4[0],
    setResetKey = _useState4[1];
  var _useStorage = (0, _useStorage2.useStorage)({
      storageKey: storageKey,
      storage: storage
    }),
    codeInStorage = _useStorage.codeInStorage,
    updateCodeInStorage = _useStorage.updateCodeInStorage,
    resetCodeInStorage = _useStorage.resetCodeInStorage;
  var _useState5 = (0, _react.useState)(''),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    commonCode = _useState6[0],
    setCommonCode = _useState6[1];
  var initialCodeRef = (0, _react.useRef)();
  var hasCodeInStorage = codeInStorage !== null;
  (0, _react.useEffect)(function () {
    (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
      var _t;
      return _regenerator["default"].wrap(function (_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            if (hasCodeInStorage) {
              setCommonCode(codeInStorage);
              setReady(true);
            }
            _context2.prev = 1;
            _context2.next = 2;
            return Promise.all(initialCode.split(CHUNK_SEPARATOR).map(function (s) {
              return s.trim();
            }).map(function (codeChunk) {
              return needsTranspile ? transpile(codeChunk) : codeChunk;
            })).then(function (_ref4) {
              var _ref5 = (0, _slicedToArray2["default"])(_ref4, 1),
                _ref5$ = _ref5[0],
                commonCode = _ref5$ === void 0 ? '' : _ref5$;
              initialCodeRef.current = commonCode;
              if (!hasCodeInStorage) {
                setCommonCode(commonCode);
                setReady(true);
              }
            });
          case 2:
            _context2.next = 4;
            break;
          case 3:
            _context2.prev = 3;
            _t = _context2["catch"](1);
            initialCodeRef.current = initialCode;
          case 4:
          case "end":
            return _context2.stop();
        }
      }, _callee2, null, [[1, 3]]);
    }))();
  }, []);
  var resetCode = (0, _react.useCallback)(function () {
    setResetKey(+new Date());
    (0, _events.dispatchCustomEvent)(_events.CUSTOM_EVENTS.REFRESH);
    setCommonCode(initialCodeRef.current);
    resetCodeInStorage();
  }, [resetCodeInStorage, setCommonCode, setResetKey]);
  var setCode = (0, _react.useCallback)(function (code) {
    setCommonCode(code);
    updateCodeInStorage(code);
  }, [setCommonCode, updateCodeInStorage]);
  return {
    code: commonCode,
    setCode: setCode,
    resetCode: resetCode,
    resetKey: resetKey,
    setResetKey: setResetKey,
    ready: ready,
    hasCodeInStorage: hasCodeInStorage
  };
}