@knapsack/app
Version:
Build Design Systems on top of knapsack, by Basalt
229 lines (199 loc) • 7.14 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.KnapsackRendererBase = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _chokidar = _interopRequireDefault(require("chokidar"));
var _jsonSchemaToTypescript = require("json-schema-to-typescript");
var _path = require("path");
var _fsExtra = _interopRequireDefault(require("fs-extra"));
var _events = require("./events");
var log = _interopRequireWildcard(require("../cli/log"));
var _serverUtils = require("./server-utils");
var _patterns = require("../schemas/patterns");
var _utils = require("../lib/utils");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
/* eslint-disable class-methods-use-this, no-empty-function, no-unused-vars */
class KnapsackRendererBase {
constructor({
id,
extension,
language
}) {
(0, _defineProperty2.default)(this, "id", void 0);
(0, _defineProperty2.default)(this, "extension", void 0);
(0, _defineProperty2.default)(this, "language", void 0);
(0, _defineProperty2.default)(this, "outputDirName", void 0);
(0, _defineProperty2.default)(this, "logPrefix", void 0);
(0, _defineProperty2.default)(this, "cacheDir", void 0);
(0, _defineProperty2.default)(this, "outputDir", void 0);
this.id = id;
this.extension = extension;
this.language = language;
this.outputDirName = `knapsack-renderer-${this.id}`;
this.logPrefix = `templateRenderer:${this.id}`;
}
async init({
cacheDir
}) {
this.cacheDir = cacheDir;
this.outputDir = (0, _path.join)(cacheDir, this.outputDirName);
await _fsExtra.default.ensureDir(this.outputDir);
}
/**
* Each sub-class should implement this themselves, probably using `KnapsackRendererBase.formatCode()`
* This base implementation just returns the original code so it can be reliably ran
* @see {KnapsackRendererBase.formatCode}
*/
formatCode(code) {
return code === null || code === void 0 ? void 0 : code.trim();
}
getHead({
cssUrls = [],
headJsUrls = [],
inlineHead = ''
}) {
return `
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
${inlineHead}
${cssUrls.map(cssUrl => `<link rel="stylesheet" type="text/css" href="${cssUrl}">`).join('\n')}
${headJsUrls.map(jsUrl => `<script src="${jsUrl}" type="text/javascript"></script>`).join('\n')}
</head>
<body>
`;
}
getFoot({
jsUrls = [],
inlineJs = '',
inlineCss = '',
inlineFoot = ''
}) {
return `
${jsUrls.map(jsUrl => `<script src="${jsUrl}" type="text/javascript"></script>`).join('\n')}
<style>${inlineCss}</style>
<script>${inlineJs}</script>
${inlineFoot}
</body>
</html>
`;
}
wrapHtml({
html,
cssUrls = [],
jsUrls = [],
headJsUrls = [],
inlineJs = '',
inlineCss = '',
inlineHead = '',
inlineFoot = '',
isInIframe
}) {
return `
${this.getHead({
cssUrls,
headJsUrls,
inlineHead,
isInIframe
})}
${isInIframe ? `<div class="knapsack-wrapper knapsack-pattern-direct-parent">${html}</div>` : html}
${this.getFoot({
jsUrls,
inlineJs,
inlineCss,
inlineFoot,
isInIframe
})}
`;
}
onChange({
path
}) {
_events.knapsackEvents.emit(_events.EVENTS.PATTERN_TEMPLATE_CHANGED, {
path
});
}
onAdd({
path
}) {
_events.knapsackEvents.emit(_events.EVENTS.PATTERN_TEMPLATE_ADDED, {
path
});
}
onRemove({
path
}) {
_events.knapsackEvents.emit(_events.EVENTS.PATTERN_TEMPLATE_REMOVED, {
path
});
}
watch({
templatePaths
}) {
return new Promise((resolve, reject) => {
const watcher = _chokidar.default.watch(templatePaths, {
ignoreInitial: true
});
watcher.on('add', path => this.onAdd({
path
})).on('change', path => this.onChange({
path
})).on('unlink', path => this.onRemove({
path
})).on('error', error => {
log.error('Error watching', error, `templateRender:${this.id}`);
reject(error);
});
watcher.on('ready', () => {
log.silly('Watching these files:', watcher.getWatched(), `templateRender:${this.id}`);
resolve();
});
});
}
static async convertSchemaToTypeScriptDefs({
schema,
title,
description = '',
patternId,
templateId,
preBanner,
postBanner
}) {
const theSchema = _objectSpread({}, schema, {
additionalProperties: false,
description,
title
});
const bannerComment = `
/**
* patternId: "${patternId}" templateId: "${templateId}"
* This file was automatically generated by Knapsack.
* DO NOT MODIFY IT BY HAND.
* Instead, adjust it's spec, by either:
* 1) go to "/patterns/${patternId}/${templateId}" and use the UI to edit the spec
* 2) OR edit the "knapsack.pattern.${patternId}.json" file's "spec.props".
* Run Knapsack again to regenerate this file.
*/`.trim();
const typeDefs = await (0, _jsonSchemaToTypescript.compile)(theSchema, theSchema.title, {
bannerComment: [preBanner, bannerComment, postBanner].filter(Boolean).join('\n\n'),
style: {
singleQuote: true
}
});
return typeDefs.split('\n').map(line => line.replace('export type', 'type')).join('\n');
}
}
exports.KnapsackRendererBase = KnapsackRendererBase;
(0, _defineProperty2.default)(KnapsackRendererBase, "formatCode", _serverUtils.formatCode);
(0, _defineProperty2.default)(KnapsackRendererBase, "isSlottedText", _patterns.isSlottedText);
(0, _defineProperty2.default)(KnapsackRendererBase, "isDataDemo", _patterns.isDataDemo);
(0, _defineProperty2.default)(KnapsackRendererBase, "isTemplateDemo", _patterns.isTemplateDemo);
(0, _defineProperty2.default)(KnapsackRendererBase, "isSlottedTemplateDemo", _patterns.isSlottedTemplateDemo);
(0, _defineProperty2.default)(KnapsackRendererBase, "validateSpec", _utils.validateSpec);