77f64d2862
- Tailwind CSS: toolbar checkbox injects Play CDN into preview, persisted per-fiddle via new options JSON column - Markdown mode: uses marked.js CDN, renders markdown to HTML preview with CSS tab for custom styling - WASM mode: starter template with inline WebAssembly add function, supports top-level await via module detection - npm imports: auto-detect bare import specifiers in module code and inject importmap pointing to esm.sh CDN - Module auto-detection for html-css-js mode (import/export statements) - DB migration adds options column, server passes through all API endpoints - All features work across preview, export, and embed
125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
import { getFrameworkRuntime } from './js-preprocessors.js';
|
|
import { extractBareImports, buildImportMapTag } from './import-map.js';
|
|
|
|
const consoleInterceptor = `
|
|
<script>
|
|
(function() {
|
|
const methods = ['log', 'warn', 'error', 'info', 'debug', 'clear'];
|
|
methods.forEach(function(method) {
|
|
var original = console[method];
|
|
console[method] = function() {
|
|
if (method === 'clear') {
|
|
parent.postMessage({ type: 'console', method: 'clear' }, '*');
|
|
if (original) original.apply(console, arguments);
|
|
return;
|
|
}
|
|
var args = Array.from(arguments).map(function(a) {
|
|
if (a === null) return 'null';
|
|
if (a === undefined) return 'undefined';
|
|
if (typeof a === 'object') {
|
|
try { return JSON.stringify(a, null, 2); } catch(e) { return String(a); }
|
|
}
|
|
return String(a);
|
|
});
|
|
parent.postMessage({ type: 'console', method: method, args: args }, '*');
|
|
if (original) original.apply(console, arguments);
|
|
};
|
|
});
|
|
window.onerror = function(msg, url, line, col) {
|
|
parent.postMessage({ type: 'console', method: 'error', args: ['Error: ' + msg + ' (line ' + line + ')'] }, '*');
|
|
};
|
|
})();
|
|
<\/script>
|
|
`;
|
|
|
|
/**
|
|
* Escape </script in user code to prevent premature HTML script tag closing.
|
|
*/
|
|
function escapeScriptClose(code) {
|
|
return code.replace(/<\/script/gi, '<\\/script');
|
|
}
|
|
|
|
/**
|
|
* Build script tags for the preview iframe.
|
|
* Uses static <script src> tags for runtime libraries (parser-blocking per HTML spec)
|
|
* followed by an inline <script> for user code.
|
|
*/
|
|
function buildLoaderScript(runtimeUrls, userJs, isModule) {
|
|
if (isModule) {
|
|
return `\n<script type="module">\n${escapeScriptClose(userJs)}\n<\/script>`;
|
|
}
|
|
|
|
let parts = '';
|
|
for (const url of runtimeUrls) {
|
|
parts += `<script src="${url}"><\/script>\n`;
|
|
}
|
|
parts += `<script>\n${escapeScriptClose(userJs)}\n<\/script>`;
|
|
return parts;
|
|
}
|
|
|
|
/**
|
|
* Render compiled code into the preview iframe.
|
|
* @param {string} html - HTML content
|
|
* @param {string} css - Compiled CSS
|
|
* @param {string} js - Compiled JS
|
|
* @param {string} mode - Framework mode
|
|
* @param {string} extraCss - Extra CSS (e.g. from Vue/Svelte)
|
|
* @param {object} options - { tailwind, isModule, renderedHtml }
|
|
*/
|
|
export function renderPreview(html, css, js, mode = 'html-css-js', extraCss = '', options = {}) {
|
|
const frame = document.getElementById('preview-frame');
|
|
const runtime = getFrameworkRuntime(mode);
|
|
|
|
// Combine CSS
|
|
const allCss = extraCss ? `${css}\n${extraCss}` : css;
|
|
|
|
// If renderedHtml is provided (e.g. Markdown), use it as the body and skip JS
|
|
const finalHtml = options.renderedHtml || html;
|
|
const finalJs = options.renderedHtml ? '' : js;
|
|
|
|
// Determine body content
|
|
let bodyContent;
|
|
if (mode === 'vue' || mode === 'svelte') {
|
|
bodyContent = finalHtml ? `${finalHtml}\n${runtime.bodyHtml}` : runtime.bodyHtml;
|
|
} else if (runtime.bodyHtml) {
|
|
bodyContent = `${finalHtml}\n${runtime.bodyHtml}`;
|
|
} else {
|
|
bodyContent = finalHtml;
|
|
}
|
|
|
|
const isModule = options.isModule || mode === 'svelte';
|
|
|
|
// Build importmap for module scripts with bare imports
|
|
let importMapTag = '';
|
|
if (isModule && finalJs) {
|
|
const bareImports = extractBareImports(finalJs);
|
|
if (bareImports.length) {
|
|
importMapTag = buildImportMapTag(bareImports);
|
|
}
|
|
}
|
|
|
|
const loaderScript = finalJs
|
|
? buildLoaderScript(runtime.scripts, finalJs, isModule)
|
|
: '';
|
|
|
|
// Tailwind CDN injection
|
|
const tailwindScript = options.tailwind
|
|
? `<script src="https://cdn.tailwindcss.com"><\/script>\n`
|
|
: '';
|
|
|
|
const doc = `<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
${consoleInterceptor}
|
|
${tailwindScript}<style>${allCss}</style>
|
|
${importMapTag}
|
|
</head>
|
|
<body>
|
|
${bodyContent}
|
|
${loaderScript}
|
|
</body>
|
|
</html>`;
|
|
frame.srcdoc = doc;
|
|
}
|