vue-styleguidist
Version:
Vue components style guide generator
230 lines • 10.6 kB
JavaScript
import "core-js/modules/es.reflect.construct.js";
import "core-js/modules/es.object.keys.js";
import "core-js/modules/es.symbol.js";
import "core-js/modules/es.array.filter.js";
import "core-js/modules/es.object.get-own-property-descriptor.js";
import "core-js/modules/web.dom-collections.for-each.js";
import "core-js/modules/es.object.get-own-property-descriptors.js";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.regexp.to-string.js";
import "core-js/modules/es.promise.js";
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 _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; } }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import PlaygroundError from 'rsg-components/PlaygroundError';
import Context from 'rsg-components/Context';
import { addScopedStyle } from 'vue-inbrowser-compiler-utils';
import { DocumentedComponentContext } from '../VsgReactComponent/ReactComponent';
import { RenderJsxContext, EnhanceAppContext } from '../../utils/renderStyleguide';
import { getCompiledExampleComponent } from './getCompiledExampleComponent';
import { getVueApp } from './getVueApp';
var PreviewAsync = /*#__PURE__*/function (_Component) {
_inherits(PreviewAsync, _Component);
var _super = _createSuper(PreviewAsync);
function PreviewAsync() {
var _this;
_classCallCheck(this, PreviewAsync);
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
});
_defineProperty(_assertThisInitialized(_this), "handleError", function (err) {
_this.unmountPreview();
_this.setState({
error: err.toString()
});
console.error(err); // eslint-disable-line no-console
});
return _this;
}
_createClass(PreviewAsync, [{
key: "componentDidMount",
value: function componentDidMount() {
// Clear console after hot reload, do not clear on the first load
// to keep any warnings
if (this.context.codeRevision > 0) {
// eslint-disable-next-line no-console
console.clear();
}
if (this.props.code.compiled) {
this.setCompiledPreview(this.props.code.compiled);
} else {
this.executeCode(this.props.code.raw);
}
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
return this.state.error !== nextState.error || this.props.code !== nextProps.code;
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (this.props.code.raw !== prevProps.code.raw) {
this.executeCode(this.props.code.raw);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.unmountPreview();
}
}, {
key: "unmountPreview",
value: function unmountPreview() {
this.destroyVueInstance();
if (this.mountNode) {
var _this$vueInstance, _this$vueInstance$unm;
var el = this.mountNode.children[0];
if (!el) {
this.mountNode.innerHTML = ' ';
this.mountNode.appendChild(document.createElement('div'));
el = this.mountNode.children[0];
}
(_this$vueInstance = this.vueInstance) === null || _this$vueInstance === void 0 ? void 0 : (_this$vueInstance$unm = _this$vueInstance.unmount) === null || _this$vueInstance$unm === void 0 ? void 0 : _this$vueInstance$unm.call(_this$vueInstance);
el = getVueApp({
data: function data() {
return {};
},
template: '<div></div>'
}, el, function () {});
}
}
}, {
key: "destroyVueInstance",
value: function destroyVueInstance() {
if (this.vueInstance) {
try {
var _this$vueInstance$unm2, _this$vueInstance2, _this$vueInstance$$de, _this$vueInstance3;
(_this$vueInstance$unm2 = (_this$vueInstance2 = this.vueInstance).unmount) === null || _this$vueInstance$unm2 === void 0 ? void 0 : _this$vueInstance$unm2.call(_this$vueInstance2);
(_this$vueInstance$$de = (_this$vueInstance3 = this.vueInstance).$destroy) === null || _this$vueInstance$$de === void 0 ? void 0 : _this$vueInstance$$de.call(_this$vueInstance3);
} catch (err) {
// eat the error
}
this.vueInstance = null;
}
}
}, {
key: "executeCode",
value: function executeCode(newCode) {
var _this2 = this;
import( /* webpackChunkName: "compiler" */'vue-inbrowser-compiler').then(function (opts) {
_this2.setState({
error: null
});
return opts;
}).then(function (opts) {
var moduleId = 'v-' + Math.floor(Math.random() * 1000) + 1;
var compile = opts.compile;
try {
var example = compile(newCode, _objectSpread(_objectSpread(_objectSpread({}, _this2.context.config.compilerConfig), _this2.context.config.jsxInExamples ? {
jsx: '__pragma__(h)',
objectAssign: 'concatenate'
} : {}), {}, {
moduleId: moduleId
}));
_this2.setCompiledPreview(example, moduleId);
} catch (err) {
_this2.handleError(err);
}
});
}
}, {
key: "setCompiledPreview",
value: function setCompiledPreview(example, moduleId) {
var _this3 = this;
var _this$props = this.props,
vuex = _this$props.vuex,
component = _this$props.component,
renderRootJsx = _this$props.renderRootJsx,
enhancePreviewApp = _this$props.enhancePreviewApp;
var el = this.mountNode.children[0];
if (!el) {
this.mountNode.innerHTML = ' ';
this.mountNode.appendChild(document.createElement('div'));
el = this.mountNode.children[0];
}
var _getCompiledExampleCo = getCompiledExampleComponent({
compiledExample: example,
evalInContext: this.props.evalInContext,
vuex: vuex,
component: component,
renderRootJsx: renderRootJsx,
enhancePreviewApp: enhancePreviewApp,
destroyVueInstance: function destroyVueInstance() {
return _this3.destroyVueInstance();
},
handleError: function handleError(e) {
_this3.handleError(e);
},
el: el,
locallyRegisterComponents: this.context.config.locallyRegisterComponents,
moduleId: moduleId
}),
app = _getCompiledExampleCo.app,
style = _getCompiledExampleCo.style;
this.vueInstance = app;
if (style) {
addScopedStyle(style, moduleId);
}
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var error = this.state.error;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
ref: function ref(_ref) {
return _this4.mountNode = _ref;
}
}, /*#__PURE__*/React.createElement("div", null)), error && /*#__PURE__*/React.createElement(PlaygroundError, {
message: error
}));
}
}]);
return PreviewAsync;
}(Component);
_defineProperty(PreviewAsync, "propTypes", {
code: PropTypes.shape({
raw: PropTypes.string.isRequired,
compiled: PropTypes.oneOfType([PropTypes.shape({
script: PropTypes.string,
template: PropTypes.string,
style: PropTypes.string
}), PropTypes.bool])
}).isRequired,
evalInContext: PropTypes.func.isRequired,
vuex: PropTypes.object,
component: PropTypes.object,
renderRootJsx: PropTypes.object,
enhancePreviewApp: PropTypes.func.isRequired
});
_defineProperty(PreviewAsync, "contextType", Context);
export default function PreviewWithComponent(props) {
return /*#__PURE__*/React.createElement(EnhanceAppContext.Consumer, null, function (enhancePreviewApp) {
return /*#__PURE__*/React.createElement(RenderJsxContext.Consumer, null, function (renderRootJsx) {
return /*#__PURE__*/React.createElement(DocumentedComponentContext.Consumer, null, function (component) {
return /*#__PURE__*/React.createElement(PreviewAsync, _extends({}, props, {
component: component,
renderRootJsx: renderRootJsx,
enhancePreviewApp: enhancePreviewApp
}));
});
});
});
}