b18c9c1dc8
- Dark/light preview theme toggle with localStorage persistence and dark CSS injection in preview, export, and embed - External CSS/JS resources modal with per-fiddle persistence in options column, injected as link/script tags - Keyboard shortcuts cheat sheet modal (? button or ? key) - Mobile-responsive CSS with breakpoints at 768px and 480px for both editor and browse pages
91 lines
2.6 KiB
JavaScript
91 lines
2.6 KiB
JavaScript
import { getFrameworkRuntime } from './js-preprocessors.js';
|
|
import { extractBareImports, buildImportMapTag } from './import-map.js';
|
|
|
|
/**
|
|
* Export a fiddle as a standalone HTML file and trigger download.
|
|
*/
|
|
export function exportHtml({ title, html, css, js, mode, extraCss = '', isModule = false, tailwind = false, renderedHtml = null, previewTheme = 'light', resources = [] }) {
|
|
const runtime = getFrameworkRuntime(mode);
|
|
const allCss = extraCss ? `${css}\n${extraCss}` : css;
|
|
|
|
const finalHtml = renderedHtml || html;
|
|
const finalJs = renderedHtml ? '' : js;
|
|
|
|
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 effectiveIsModule = isModule || mode === 'svelte';
|
|
|
|
// Build importmap for module scripts with bare imports
|
|
let importMapTag = '';
|
|
if (effectiveIsModule && finalJs) {
|
|
const bareImports = extractBareImports(finalJs);
|
|
if (bareImports.length) {
|
|
importMapTag = buildImportMapTag(bareImports);
|
|
}
|
|
}
|
|
|
|
let scripts = '';
|
|
if (finalJs) {
|
|
if (effectiveIsModule) {
|
|
scripts = `<script type="module">\n${finalJs}\n<\/script>`;
|
|
} else {
|
|
for (const url of runtime.scripts) {
|
|
scripts += `<script src="${url}"><\/script>\n`;
|
|
}
|
|
scripts += `<script>\n${finalJs}\n<\/script>`;
|
|
}
|
|
}
|
|
|
|
const tailwindScript = tailwind
|
|
? `<script src="https://cdn.tailwindcss.com"><\/script>\n`
|
|
: '';
|
|
|
|
const darkCss = previewTheme === 'dark'
|
|
? `<style>body { background: #1e1e1e; color: #ccc; }</style>\n`
|
|
: '';
|
|
|
|
let resourceTags = '';
|
|
if (resources && resources.length) {
|
|
for (const r of resources) {
|
|
if (r.type === 'css') resourceTags += `<link rel="stylesheet" href="${r.url}">\n`;
|
|
else if (r.type === 'js') resourceTags += `<script src="${r.url}"><\/script>\n`;
|
|
}
|
|
}
|
|
|
|
const doc = `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>${escHtml(title)}</title>
|
|
${darkCss}${resourceTags}${tailwindScript}<style>
|
|
${allCss}
|
|
</style>
|
|
${importMapTag}
|
|
</head>
|
|
<body>
|
|
${bodyContent}
|
|
${scripts}
|
|
</body>
|
|
</html>`;
|
|
|
|
const blob = new Blob([doc], { type: 'text/html' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${title.replace(/[^a-zA-Z0-9_-]/g, '_')}.html`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function escHtml(str) {
|
|
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|