@knapsack/app
Version:
Build Design Systems with Knapsack
87 lines • 3.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.wrapHtmlRenderResult = wrapHtmlRenderResult;
function createHtmlTag({ tagName, attributes, children, }) {
const isSelfClosing = ['link'].includes(tagName);
const attr = Object.entries(attributes || {})
.map(([key, value]) => {
switch (typeof value) {
case 'string':
return `${key}="${value}"`;
case 'boolean':
return value ? `${key}` : '';
default:
return `${key}="${JSON.stringify(value)}"`;
}
})
.join(' ');
const opening = `<${tagName}${attr ? ` ${attr}` : ''}`;
if (isSelfClosing) {
return `${opening} />`;
}
if (children) {
return `${opening}>${children}</${tagName}>`;
}
return `${opening}></${tagName}>`;
}
function assetToTag({ type, publicPath, src, attributes = {}, }) {
switch (type) {
case 'css':
return createHtmlTag({
tagName: 'link',
attributes: {
href: publicPath,
type: 'text/css',
rel: 'stylesheet',
// spread allows overrides of above
...attributes,
},
});
case 'js':
case 'mjs':
return createHtmlTag({
tagName: 'script',
attributes: {
src: publicPath,
type: 'text/javascript',
// spread allows overrides of above
...attributes,
},
});
default:
throw new Error(`Asset Sets in Renderer Base: tried to make a HTML tag from an unknown Asset Set type of "${type}". Original src is "${src}", resolved publicPath is "${publicPath}"`);
}
}
function assetsToTags(assets) {
return `${assets
.filter(({ type }) => type === 'css')
.map(assetToTag)
.join('\n')}
${assets
.filter(({ type }) => type !== 'css')
.map(assetToTag)
.join('\n')}`;
}
function wrapHtmlRenderResult({ assets, html, bodyAttributes = {}, inlineCss, inlineFoot, inlineHead, inlineJs, isInIframe, }) {
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}
${assetsToTags(assets.filter(({ tagLocation }) => tagLocation === 'head'))}
</head>
<body ${Object.entries(bodyAttributes)
.map(([key, value]) => `${key}="${value}"`)
.join(' ')}>
<div class="knapsack-wrapper knapsack-pattern-direct-parent">${html}</div>
${assetsToTags(assets.filter(({ tagLocation }) => tagLocation === 'foot'))}
${inlineCss ? `<style>${inlineCss}</style>` : ''}
${inlineJs ? `<script>${inlineJs}</script>` : ''}
${inlineFoot}
</body>
</html>
`;
}
//# sourceMappingURL=wrap-html-render-result.js.map