feat: renderer html extractor

malloydata · Nov 12, 2024 · 26dd177 · 26dd177
1 parent b5f056d
commit 26dd177
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 30 deletions.
diff --git 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 = `
-<div>
-  <style>
-    ${styles}
+  <div>
+    <style>
+      ${styles}
 
-    form.vega-bindings {
-      margin-block: 0em;
-    }
-  </style>
-  <div class="malloy_html_host" style="${shadowStyle}">
-    ${element.shadowRoot.innerHTML}
+      form.vega-bindings {
+        margin-block: 0em;
+      }
+    </style>
+    <div class="malloy_html_host" style="${shadowStyle}">
+      ${element.shadowRoot.innerHTML}
+    </div>
   </div>
-</div>
-  `;
+    `;
     }
   } 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
@@ -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
@@ -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;
+        }
+        `;
+      }
+    },
+  };
+}