@zendesk/zcli-themes
Version:
zcli theme commands live here
82 lines (81 loc) • 4.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.livereloadScript = void 0;
const getManifest_1 = require("./getManifest");
const getTemplates_1 = require("./getTemplates");
const getVariables_1 = require("./getVariables");
const getAssets_1 = require("./getAssets");
const chalk = require("chalk");
const zcli_core_1 = require("@zendesk/zcli-core");
const errors_1 = require("@oclif/core/lib/errors");
const core_1 = require("@oclif/core");
const validationErrorsToString_1 = require("./validationErrorsToString");
const getLocalServerBaseUrl_1 = require("./getLocalServerBaseUrl");
async function preview(themePath, flags) {
const manifest = (0, getManifest_1.default)(themePath);
const templates = (0, getTemplates_1.default)(themePath);
const variables = (0, getVariables_1.default)(themePath, manifest.settings, flags);
const assets = (0, getAssets_1.default)(themePath, flags);
const { livereload } = flags;
const variablesPayload = variables.reduce((payload, variable) => (Object.assign(Object.assign({}, payload), { [variable.identifier]: variable.value })), {});
const assetsPayload = assets.reduce((payload, [parsedPath, url]) => (Object.assign(Object.assign({}, payload), { [parsedPath.base]: url })), {});
const metadataPayload = { api_version: manifest.api_version };
try {
core_1.CliUx.ux.action.start('Uploading theme');
const { config: { baseURL } } = await zcli_core_1.request.requestAPI('/hc/api/internal/theming/local_preview', {
method: 'put',
headers: {
'X-Zendesk-Request-Originator': 'zcli themes:preview'
},
data: {
templates: Object.assign(Object.assign({}, templates), { css: '', js: '', document_head: `
<link rel="stylesheet" href="${(0, getLocalServerBaseUrl_1.getLocalServerBaseUrl)(flags)}/guide/style.css">
${templates.document_head}
<script src="${(0, getLocalServerBaseUrl_1.getLocalServerBaseUrl)(flags)}/guide/script.js"></script>
${livereload ? livereloadScript(flags) : ''}
`, assets: assetsPayload, variables: variablesPayload, metadata: metadataPayload })
},
validateStatus: (status) => status === 200
});
core_1.CliUx.ux.action.stop('Ok');
return baseURL;
}
catch (e) {
core_1.CliUx.ux.action.stop(chalk.bold.red('!'));
const { response, message } = e;
if (response) {
const { template_errors: templateErrors, general_error: generalError } = response.data;
if (templateErrors)
handlePreviewError(themePath, templateErrors);
else if (generalError)
(0, errors_1.error)(generalError);
else
(0, errors_1.error)(message);
}
else {
(0, errors_1.error)(e);
}
}
}
exports.default = preview;
function livereloadScript(flags) {
return `<script>(() => {
const socket = new WebSocket('${(0, getLocalServerBaseUrl_1.getLocalServerBaseUrl)(flags, true)}/livereload');
socket.onopen = () => console.log('Listening to theme changes...');
socket.onmessage = e => e.data === 'reload' && location.reload();
})()</script>
`;
}
exports.livereloadScript = livereloadScript;
function handlePreviewError(themePath, templateErrors) {
const validationErrors = {};
for (const [template, errors] of Object.entries(templateErrors)) {
// the preview endpoint returns the template identifier as the 'key' instead of
// the template path. We must fix this so we can reuse `validationErrorsToString`
// and align with the job import error handling
validationErrors[`templates/${template}.hbs`] = errors;
}
const title = `${chalk.bold('InvalidTemplates')} - Template(s) with syntax error(s)`;
const details = (0, validationErrorsToString_1.default)(themePath, validationErrors);
(0, errors_1.error)(`${title}\n${details}`);
}