vue-styleguidist
Version:
Vue components style guide generator
206 lines (204 loc) • 14.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = _default;
exports.examplesLoader = examplesLoader;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var path = _interopRequireWildcard(require("path"));
var _filter = _interopRequireDefault(require("lodash/filter"));
var _map = _interopRequireDefault(require("lodash/map"));
var _values = _interopRequireDefault(require("lodash/values"));
var _flatten = _interopRequireDefault(require("lodash/flatten"));
var _loaderUtils = _interopRequireDefault(require("loader-utils"));
var _escodegen = require("escodegen");
var _toAst = _interopRequireDefault(require("to-ast"));
var _astTypes = require("ast-types");
var _vueInbrowserCompiler = require("vue-inbrowser-compiler");
var _chunkify = _interopRequireDefault(require("react-styleguidist/lib/loaders/utils/chunkify"));
var _requireIt = _interopRequireDefault(require("react-styleguidist/lib/loaders/utils/requireIt"));
var _resolveESModule = _interopRequireDefault(require("react-styleguidist/lib/loaders/utils/resolveESModule"));
var _expandDefaultComponent = _interopRequireDefault(require("./utils/expandDefaultComponent"));
var _getComponentVueDoc = _interopRequireDefault(require("./utils/getComponentVueDoc"));
var _importCodeExampleFile = _interopRequireDefault(require("./utils/importCodeExampleFile"));
var _absolutize = _interopRequireDefault(require("./utils/absolutize"));
var _getScript = _interopRequireDefault(require("./utils/getScript"));
var _getParser = _interopRequireDefault(require("./utils/getParser"));
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; }
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) { (0, _defineProperty2["default"])(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; }
var REQUIRE_IN_RUNTIME_PATH = (0, _absolutize["default"])('requireInRuntime');
var EVAL_IN_CONTEXT_PATH = (0, _absolutize["default"])('evalInContext');
var JSX_COMPILER_UTILS_PATH = require.resolve('vue-inbrowser-compiler-utils');
function isVueFile(filepath) {
return /.vue$/.test(filepath);
}
function isImport(req) {
return !!req.importPath;
}
function _default(source) {
var callback = this.async();
var cb = callback ? callback : function () {
return null;
};
examplesLoader.call(this, source).then(function (res) {
return cb(undefined, res);
});
}
function examplesLoader(_x) {
return _examplesLoader.apply(this, arguments);
}
function _examplesLoader() {
_examplesLoader = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(src) {
var _this = this;
var filePath, source, config, compiler, options, file, displayName, shouldShowDefaultExample, customLangs, fullFilePath, propsParser, docs, updateExample, examples, getExampleLiveImports, allCodeExamples, requiresFromExamples, fullContext, allModules, allModulesCode, requireContextCode, examplesWithEval;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
filePath = this.request.split('!').pop();
source = src;
if (filePath) {
_context.next = 4;
break;
}
return _context.abrupt("return", '');
case 4:
if (isVueFile(filePath)) {
// if it's a vue file, the examples could be in a docs block
source = (0, _getComponentVueDoc["default"])(src, filePath);
}
config = this._styleguidist;
compiler = config.compilerPackage ? require(config.compilerPackage) : {
compile: _vueInbrowserCompiler.compile,
getImports: _vueInbrowserCompiler.getImports
};
options = _loaderUtils["default"].getOptions(this) || {};
file = options.file, displayName = options.displayName, shouldShowDefaultExample = options.shouldShowDefaultExample, customLangs = options.customLangs; // Replace placeholders (__COMPONENT__) with the passed-in component name
if (!(shouldShowDefaultExample && source)) {
_context.next = 22;
break;
}
fullFilePath = path.join(path.dirname(filePath), file);
propsParser = (0, _getParser["default"])(config);
_context.prev = 12;
_context.next = 15;
return propsParser(fullFilePath);
case 15:
docs = _context.sent;
this.addDependency(fullFilePath);
source = (0, _expandDefaultComponent["default"])(source, docs);
_context.next = 22;
break;
case 20:
_context.prev = 20;
_context.t0 = _context["catch"](12);
case 22:
updateExample = function updateExample(example) {
var p = (0, _importCodeExampleFile["default"])(example, _this.resourcePath, _this);
if (p.settings) {
var settings = p.settings;
// code to satisfy react-styleguidist and transfer properties to the props object
// those properties will be added litterally to the wrapping div of the example
var props = Object.keys(settings).reduce(function (obj, key) {
if (['style', 'className'].indexOf(key) !== -1 || /^data-/.test(key)) {
obj = obj || {};
obj[key] = settings[key];
delete settings[key];
}
return obj;
}, null);
if (props) {
p.settings.props = props;
}
}
return config.updateExample ? config.updateExample(p, _this.resourcePath) : p;
}; // Load examples
examples = source ? (0, _chunkify["default"])(source, updateExample, customLangs) : [];
getExampleLiveImports = function getExampleLiveImports(liveExampleScript) {
return compiler.getImports((0, _getScript["default"])(liveExampleScript, config.jsxInExamples));
}; // Find all import statements and require() calls in examples to make them
// available in webpack context at runtime.
// Note that we can't just use require() directly at runtime,
// because webpack changes its name to something like __webpack__require__().
allCodeExamples = (0, _filter["default"])(examples, {
type: 'code'
});
requiresFromExamples = allCodeExamples.reduce(function (requires, example) {
var requiresLocal = getExampleLiveImports(example.content);
var importPath = example.settings && example.settings.importpath;
return requires.concat(importPath ? requiresLocal.map(function (p) {
return {
importPath: importPath,
path: p
};
}) : requiresLocal);
}, []); // Auto imported modules.
// We don't need to do anything here to support explicit imports: they will
// work because both imports (generated below and by rewrite-imports) will
// be eventually transpiled to `var x = require('x')`, so we'll just have two
// of them in the same scope, which is fine in non-strict mode
fullContext = _objectSpread(_objectSpread({}, config.context), displayName && config.jsxInExamples ? (0, _defineProperty2["default"])({}, displayName, file) : {}); // All required or imported modules
allModules = [].concat((0, _toConsumableArray2["default"])(requiresFromExamples), (0, _toConsumableArray2["default"])((0, _values["default"])(fullContext))); // “Prerequire” modules required in Markdown examples and context so they
// end up in a bundle and be available at runtime
allModulesCode = allModules.reduce(function (requires, requireRequest) {
// if we are looking at a remote example
// resolve the requires from there
if (isImport(requireRequest)) {
if (!requires[requireRequest.importPath]) {
requires[requireRequest.importPath] = {};
}
var relativePath = /^\./.test(requireRequest.path) ? path.join(requireRequest.importPath, requireRequest.path) : requireRequest.path;
requires[requireRequest.importPath][requireRequest.path] = (0, _requireIt["default"])(relativePath);
} else {
requires[requireRequest] = (0, _requireIt["default"])(requireRequest);
}
return requires;
}, {}); // Require context modules so they are available in an example
requireContextCode = _astTypes.builders.program((0, _flatten["default"])((0, _map["default"])(fullContext, _resolveESModule["default"]))); // Stringify examples object except the evalInContext function
examplesWithEval = examples.map(function (example) {
if (example.type === 'code') {
var importPath = example.settings && example.settings.importpath;
var evalInContext = {
toAST: function toAST() {
return _astTypes.builders.callExpression(_astTypes.builders.memberExpression(_astTypes.builders.identifier('evalInContext'), _astTypes.builders.identifier('bind')), [_astTypes.builders.identifier('null'), _astTypes.builders.callExpression(_astTypes.builders.memberExpression(_astTypes.builders.identifier('requireInRuntime'), _astTypes.builders.identifier('bind')), [_astTypes.builders.identifier('null'), importPath ? _astTypes.builders.literal(importPath) : _astTypes.builders.identifier('null')])]);
}
};
if (config.codeSplit) {
var compiled = false;
if (process.env.NODE_ENV === 'production') {
// if we are not in prod, we want to avoid running examples through
// sucrase all at the same time. We then tell it to calculate on the fly
var compiledExample = compiler.compile(example.content, _objectSpread(_objectSpread({}, config.compilerConfig), config.jsxInExamples ? {
jsx: '__pragma__(h)',
objectAssign: 'concatenate'
} : {}));
compiled = _objectSpread({}, compiledExample);
}
return _objectSpread(_objectSpread({}, example), {}, {
evalInContext: evalInContext,
compiled: compiled
});
}
return _objectSpread(_objectSpread({}, example), {}, {
evalInContext: evalInContext
});
}
return example;
});
return _context.abrupt("return", "\nif (module.hot) {\n\tmodule.hot.accept([])\n}\nvar requireMap = ".concat((0, _escodegen.generate)((0, _toAst["default"])(allModulesCode)), ";\nvar requireInRuntimeBase = require(").concat(JSON.stringify(REQUIRE_IN_RUNTIME_PATH), ");\nvar requireInRuntime = requireInRuntimeBase.bind(null, requireMap);\nvar evalInContextBase = require(").concat(JSON.stringify(EVAL_IN_CONTEXT_PATH), ");").concat(config.jsxInExamples ? "\n\nvar compilerUtils = require(".concat(JSON.stringify(JSX_COMPILER_UTILS_PATH), ");\nvar evalInContext = evalInContextBase.bind(null, \n\t").concat(JSON.stringify((0, _escodegen.generate)(requireContextCode)), ", \n\tcompilerUtils.adaptCreateElement, compilerUtils.concatenate);") : "\nvar evalInContext = evalInContextBase.bind(null, \n\t".concat(JSON.stringify((0, _escodegen.generate)(requireContextCode)), ", \n\tnull, null)"), "\nmodule.exports = ").concat((0, _escodegen.generate)((0, _toAst["default"])(examplesWithEval))));
case 33:
case "end":
return _context.stop();
}
}
}, _callee, this, [[12, 20]]);
}));
return _examplesLoader.apply(this, arguments);
}