@skbkontur/storybook-addon-live-examples
Version:
Storybook live examples plugin
140 lines (139 loc) • 6.45 kB
JavaScript
;
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 _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); }
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; }
var CHUNK_SEPARATOR = /^\s*(?:@|\/\/)MOBILE@?/m;
var formatCode = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(code) {
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return (0, _standalone.format)(code, {
parser: 'babel',
plugins: [prettierPluginBabel, prettierPluginEstree]
});
case 2:
return _context.abrupt("return", _context.sent);
case 3:
case "end":
return _context.stop();
}
}, _callee);
}));
return function formatCode(_x) {
return _ref.apply(this, arguments);
};
}();
exports.formatCode = formatCode;
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() {
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
if (hasCodeInStorage) {
setCommonCode(codeInStorage);
setReady(true);
}
_context2.prev = 1;
_context2.next = 4;
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 4:
_context2.next = 9;
break;
case 6:
_context2.prev = 6;
_context2.t0 = _context2["catch"](1);
initialCodeRef.current = initialCode;
case 9:
case "end":
return _context2.stop();
}
}, _callee2, null, [[1, 6]]);
}))();
}, []);
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
};
}