@trpc-playground/html
Version:
html for trpc-playground
82 lines (79 loc) • 2.85 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
renderPlaygroundPage: () => renderPlaygroundPage
});
module.exports = __toCommonJS(stdin_exports);
var import_xss = require("xss");
const CONFIG_ID = "playground-config";
const filter = (val) => (0, import_xss.filterXSS)(val, {
whiteList: [],
stripIgnoreTag: true,
stripIgnoreTagBody: ["script"]
});
const renderConfig = (config) => {
return (0, import_xss.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 `<!DOCTYPE html>
<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>`;
};