@trpc-playground/html
Version:
html for trpc-playground
63 lines (60 loc) • 1.92 kB
JavaScript
import { filterXSS } from "xss";
const CONFIG_ID = "playground-config";
const filter = (val) => filterXSS(val, {
whiteList: [],
stripIgnoreTag: true,
stripIgnoreTagBody: ["script"]
});
const renderConfig = (config) => {
return filterXSS(`<div id="${CONFIG_ID}">${JSON.stringify(config)}</div>`, {
whiteList: { div: ["id"] }
});
};
const renderPlaygroundPage = ({ version, cdnUrl, clientConfig }) => {
const resolvedConfig = {
trpcApiEndpoint: clientConfig.trpcApiEndpoint,
playgroundEndpoint: clientConfig.playgroundEndpoint,
polling: clientConfig.polling,
request: clientConfig.request
};
const buildCdnUrl = (packageName, suffix) => filter(`${cdnUrl}/${packageName}${version ? `@${version}` : ""}/${suffix}` || "");
return `
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tRPC Playground</title>
<script type="module" crossorigin src="${buildCdnUrl("@trpc-playground/html", "dist/assets/index-d1b39d04.js")}"><\/script>
<link rel="stylesheet" href="${buildCdnUrl("@trpc-playground/html", "dist/assets/index.css")}">
</head>
<body>
<style>
#${CONFIG_ID} {
display: none
}
</style>
${renderConfig(resolvedConfig)}
<div id="app"></div>
<script>
window.addEventListener('load', function() {
const root = document.getElementById('app');
const configText = document.getElementById('${CONFIG_ID}').innerText;
if(configText && configText.length) {
try {
TrpcPlayground.init(root, JSON.parse(configText));
}
catch(err) {
console.error("could not find config")
}
}
else {
TrpcPlayground.init(root);
}
})
<\/script>
</body>
</html>`;
};
export {
renderPlaygroundPage
};