diff --git a/packages/malloy-render/src/component/copy-to-html.ts b/packages/malloy-render/src/component/copy-to-html.ts index 13c1427bf..e8c0844bc 100644 --- a/packages/malloy-render/src/component/copy-to-html.ts +++ b/packages/malloy-render/src/component/copy-to-html.ts @@ -2,6 +2,18 @@ import {MalloyRenderProps} from './render'; export async function copyMalloyRenderHTML( element: HTMLElement & MalloyRenderProps +) { + const html = await getMalloyRenderHTML(element); + try { + await navigator.clipboard.writeText(html); + } catch (error) { + /* eslint-disable no-console */ + console.error('Failed to copy text: ', error); + } +} + +export async function getMalloyRenderHTML( + element: HTMLElement & MalloyRenderProps ) { let html = ''; @@ -23,6 +35,9 @@ export async function copyMalloyRenderHTML( ); element.dashboardConfig = copyHTMLDashboardConfig; + // Give charts time to re-render after configuration changes + await sleep(1000); + if (element.shadowRoot) { let styles = ''; for (const stylesheet of [...element.shadowRoot.adoptedStyleSheets]) { @@ -34,29 +49,31 @@ export async function copyMalloyRenderHTML( styles = styles.replaceAll(':host', '.malloy_html_host'); const shadowStyle = element.getAttribute('style'); html = ` -
- -
- ${element.shadowRoot.innerHTML} + form.vega-bindings { + margin-block: 0em; + } + +
+ ${element.shadowRoot.innerHTML} +
-
- `; + `; } } else html = element.innerHTML; - try { - await navigator.clipboard.writeText(html); - element.tableConfig = originalTableConfig; - element.dashboardConfig = originalDashboardConfig; - } catch (error) { - /* eslint-disable no-console */ - console.error('Failed to copy text: ', error); - element.tableConfig = originalTableConfig; - element.dashboardConfig = originalDashboardConfig; - } + + // Reset element configuration + element.tableConfig = originalTableConfig; + element.dashboardConfig = originalDashboardConfig; + + return html; +} + +function sleep(n: number) { + return new Promise(resolve => { + setTimeout(resolve, n); + }); } diff --git a/packages/malloy-render/src/index.ts b/packages/malloy-render/src/index.ts index 11944ace2..f611bdac2 100644 --- a/packages/malloy-render/src/index.ts +++ b/packages/malloy-render/src/index.ts @@ -26,4 +26,7 @@ export * from './html/data_styles'; export type {MalloyRenderProps} from './component/render'; // Needed for test only. export {getDrillQuery} from './html/drill'; -export {copyMalloyRenderHTML} from './component/copy-to-html'; +export { + copyMalloyRenderHTML, + getMalloyRenderHTML, +} from './component/copy-to-html'; diff --git a/packages/malloy-render/vite.config.base.ts b/packages/malloy-render/vite.config.base.ts index 0445f2904..d3bbee4dd 100644 --- a/packages/malloy-render/vite.config.base.ts +++ b/packages/malloy-render/vite.config.base.ts @@ -1,19 +1,14 @@ -import {fileURLToPath} from 'node:url'; -import {defineConfig} from 'vite'; +import {PluginOption, defineConfig} from 'vite'; import solidPlugin from 'vite-plugin-solid'; export default defineConfig({ - plugins: [solidPlugin()], + plugins: [viteStripMalloyDevToolsPlugin(), solidPlugin()], optimizeDeps: { include: ['@malloydata/malloy'], }, build: { rollupOptions: { - external: [ - fileURLToPath( - new URL('src/component/chart/chart-dev-tool.tsx', import.meta.url) - ), - ], + external: [], output: {}, }, commonjsOptions: { @@ -24,3 +19,18 @@ export default defineConfig({ 'process.env': {}, }, }); + +function viteStripMalloyDevToolsPlugin(): PluginOption { + return { + name: 'vite-plugin-strip-malloy-dev-tools', + async transform(code, id) { + if (id.endsWith('chart-dev-tool.tsx')) { + return ` + export default function noop() { + return null; + } + `; + } + }, + }; +}