@malloy-publisher/sdk 0.0.76 → 0.0.78

package/src/components/RenderedResult/RenderedResult.tsx

@@ -1,9 +1,13 @@
 /* eslint-disable react/prop-types */
-import type { MalloyRenderProps } from "@malloydata/render";
-import { MalloyRenderer } from "@malloydata/render";
-import React, { useEffect, useRef, useState, useLayoutEffect } from "react";
+import React, {
+   useEffect,
+   useRef,
+   useState,
+   useLayoutEffect,
+   Suspense,
+} from "react";
 
-type MalloyRenderElement = HTMLElement & MalloyRenderProps;
+type MalloyRenderElement = HTMLElement & Record<string, unknown>;
 
 declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -22,23 +26,25 @@ interface RenderedResultProps {
    height?: number;
    isFillElement?: (boolean) => void;
    onSizeChange?: (height: number) => void;
-   onDrill?: (element: any) => void;
+   onDrill?: (element: unknown) => void;
 }
 
-// RendererResult does some magic to make it work for both fill and non-fill elements.
-// Generally text results and complicated results are non-fill. That is, they have a natural, fixed height.
-// Simple charts are fill. That is, they scale to fill the available space.
-// We only know what kind of element we're dealing with after the viz is rendered.
-// So we use a callback to notify the parent that we're in a fill element.
-// The parent can then set the height for the element, otherwise it will have size 0.
-//
-// In order to make this work when contained in a "Suspend" component, we need to
-// make sure that the rendering process is started after the DOM element is available.
-// We do this by using a useLayoutEffect to start the rendering process.
-// We also need to make sure that the rendering process is started before the
-// Suspense component is rendered.
-// We do this by using a useEffect to start the rendering process.
-export default function RenderedResult({
+// Simple dynamic import function
+const createRenderer = async (onDrill?: (element: unknown) => void) => {
+   // Only import when we're in a browser environment
+   if (typeof window === "undefined") {
+      throw new Error("MalloyRenderer can only be used in browser environment");
+   }
+
+   const { MalloyRenderer } = await import("@malloydata/render");
+   const renderer = new MalloyRenderer({
+      onClick: onDrill,
+   });
+   return renderer.createViz();
+};
+
+// Inner component that actually renders the visualization
+function RenderedResultInner({
    result,
    height,
    isFillElement,
@@ -47,66 +53,47 @@ export default function RenderedResult({
 }: RenderedResultProps) {
    const ref = useRef<HTMLDivElement>(null);
    const [isRendered, setIsRendered] = useState(false);
-   const [renderingStarted, setRenderingStarted] = useState(false);
-   const [wasMeasured, setWasMeasured] = useState(false);
-   // Each component instance manages its own promise and resolver
-   const renderingPromiseRef = useRef<Promise<void> | null>(null);
-   const renderingResolverRef = useRef<(() => void) | null>(null);
 
-   // Start rendering process after DOM element is available
+   // Render the visualization once the component mounts
    useLayoutEffect(() => {
-      if (ref.current && result && !renderingStarted) {
-         setRenderingStarted(true);
+      if (!ref.current || !result) return;
 
-         // Create the promise now that we're ready to start rendering
-         if (!renderingPromiseRef.current) {
-            renderingPromiseRef.current = new Promise<void>((resolve) => {
-               renderingResolverRef.current = resolve;
-            });
-         }
-
-         const renderer = new MalloyRenderer({
-            onClick: onDrill,
-         });
-         const viz = renderer.createViz();
+      let isMounted = true;
+      const element = ref.current;
 
-         // Remove all content from ref.current before rendering new viz
-         while (ref.current.firstChild) {
-            ref.current.removeChild(ref.current.firstChild);
-         }
+      // Clear previous content
+      while (element.firstChild) {
+         element.removeChild(element.firstChild);
+      }
 
-         // Set up a mutation observer to detect when content is added
-         const observer = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-               if (
-                  mutation.type === "childList" &&
-                  mutation.addedNodes.length > 0
-               ) {
-                  // Check if actual content (not just empty elements) was added
-                  const hasContent = Array.from(mutation.addedNodes).some(
-                     (node) => {
-                        return node.nodeType === Node.ELEMENT_NODE;
-                     },
-                  );
-                  if (hasContent) {
-                     // Content detected, mark as rendered
-                     observer.disconnect();
-                     setTimeout(() => {
-                        setIsRendered(true);
-                        if (renderingResolverRef.current) {
-                           renderingResolverRef.current();
-                           renderingResolverRef.current = null;
-                           renderingPromiseRef.current = null;
-                        }
-                     }, 50); // Small delay to ensure content is fully rendered
-                     break;
+      createRenderer(onDrill)
+         .then((viz) => {
+            if (!isMounted) return;
+
+            // Set up a mutation observer to detect when content is added
+            const observer = new MutationObserver((mutations) => {
+               for (const mutation of mutations) {
+                  if (
+                     mutation.type === "childList" &&
+                     mutation.addedNodes.length > 0
+                  ) {
+                     const hasContent = Array.from(mutation.addedNodes).some(
+                        (node) => node.nodeType === Node.ELEMENT_NODE,
+                     );
+                     if (hasContent) {
+                        observer.disconnect();
+                        setTimeout(() => {
+                           if (isMounted) {
+                              setIsRendered(true);
+                           }
+                        }, 50);
+                        break;
+                     }
                   }
                }
-            }
-         });
+            });
 
-         if (ref.current) {
-            observer.observe(ref.current, {
+            observer.observe(element, {
                childList: true,
                subtree: true,
                characterData: true,
@@ -114,33 +101,27 @@ export default function RenderedResult({
 
             try {
                viz.setResult(JSON.parse(result));
-               viz.render(ref.current);
+               viz.render(element);
             } catch (error) {
                console.error("Error rendering visualization:", error);
                observer.disconnect();
-               setIsRendered(true);
-               if (renderingResolverRef.current) {
-                  renderingResolverRef.current();
-                  renderingResolverRef.current = null;
-                  renderingPromiseRef.current = null;
+               if (isMounted) {
+                  setIsRendered(true);
                }
             }
-         }
-      }
-   }, [result, onDrill, renderingStarted]);
+         })
+         .catch((error) => {
+            console.error("Failed to create renderer:", error);
+            if (isMounted) {
+               setIsRendered(true);
+            }
+         });
+
+      return () => {
+         isMounted = false;
+      };
+   }, [result, onDrill]);
 
-   // Reset rendering state when result changes
-   useEffect(() => {
-      setIsRendered(false);
-      setRenderingStarted(false);
-      renderingPromiseRef.current = null;
-      renderingResolverRef.current = null;
-   }, [result]);
-
-   // If rendering has started but not completed, throw the promise to trigger Suspense
-   if (renderingStarted && !isRendered && renderingPromiseRef.current) {
-      throw renderingPromiseRef.current;
-   }
    // Set up size measurement using scrollHeight instead of ResizeObserver
    useEffect(() => {
       if (!ref.current || !isRendered) return;
@@ -151,7 +132,9 @@ export default function RenderedResult({
          if (element) {
             const measuredHeight = element.offsetHeight;
             if (measuredHeight > 0) {
-               onSizeChange && onSizeChange(measuredHeight);
+               if (onSizeChange) {
+                  onSizeChange(measuredHeight);
+               }
             } else if (isFillElement && element.firstChild) {
                // HACK- we If there's a child and it's height is 0, then we're in a fill element
                // We use the callback `isFillElement` to notify the parent that we're in a fill element
@@ -172,14 +155,12 @@ export default function RenderedResult({
 
       let observer: MutationObserver | null = null;
       // Also measure when the malloy result changes
-      if (!wasMeasured) {
-         observer = new MutationObserver(measureSize);
-         observer.observe(element, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-         });
-      }
+      observer = new MutationObserver(measureSize);
+      observer.observe(element, {
+         childList: true,
+         subtree: true,
+         attributes: true,
+      });
 
       // Cleanup
       return () => {
@@ -198,3 +179,45 @@ export default function RenderedResult({
       />
    );
 }
+
+// Main component with error boundary and fallback
+export default function RenderedResult(props: RenderedResultProps) {
+   // Show loading state if we're in server-side rendering
+   if (typeof window === "undefined") {
+      return (
+         <div
+            style={{
+               width: "100%",
+               height: props.height ? `${props.height}px` : "100%",
+               display: "flex",
+               alignItems: "center",
+               justifyContent: "center",
+               color: "#666",
+            }}
+         >
+            Loading...
+         </div>
+      );
+   }
+
+   return (
+      <Suspense
+         fallback={
+            <div
+               style={{
+                  width: "100%",
+                  height: props.height ? `${props.height}px` : "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#666",
+               }}
+            >
+               Loading visualization...
+            </div>
+         }
+      >
+         <RenderedResultInner {...props} />
+      </Suspense>
+   );
+}

package/dist/RenderedResult-C4b9CwSp.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),S=require("@malloydata/render"),t=require("react");function C({result:i,height:b,isFillElement:f,onSizeChange:l,onDrill:m}){const e=t.useRef(null),[a,h]=t.useState(!1),[R,v]=t.useState(!1),[y,N]=t.useState(!1),s=t.useRef(null),n=t.useRef(null);if(t.useLayoutEffect(()=>{if(e.current&&i&&!R){v(!0),s.current||(s.current=new Promise(r=>{n.current=r}));const o=new S.MalloyRenderer({onClick:m}).createViz();for(;e.current.firstChild;)e.current.removeChild(e.current.firstChild);const d=new MutationObserver(r=>{for(const c of r)if(c.type==="childList"&&c.addedNodes.length>0&&Array.from(c.addedNodes).some(g=>g.nodeType===Node.ELEMENT_NODE)){d.disconnect(),setTimeout(()=>{h(!0),n.current&&(n.current(),n.current=null,s.current=null)},50);break}});if(e.current){d.observe(e.current,{childList:!0,subtree:!0,characterData:!0});try{o.setResult(JSON.parse(i)),o.render(e.current)}catch(r){console.error("Error rendering visualization:",r),d.disconnect(),h(!0),n.current&&(n.current(),n.current=null,s.current=null)}}}},[i,m,R]),t.useEffect(()=>{h(!1),v(!1),s.current=null,n.current=null},[i]),R&&!a&&s.current)throw s.current;return t.useEffect(()=>{if(!e.current||!a)return;const u=e.current,o=()=>{if(u){const c=u.offsetHeight;c>0?l&&l(c):f&&u.firstChild&&(u.firstChild.offsetHeight==0?f(!0):f(!1))}},d=setTimeout(o,100);let r=null;return y||(r=new MutationObserver(o),r.observe(u,{childList:!0,subtree:!0,attributes:!0})),()=>{clearTimeout(d),r?.disconnect()}},[l,i,f,a]),M.jsx("div",{ref:e,style:{width:"100%",height:b?`${b}px`:"100%"}})}exports.default=C;

package/dist/RenderedResult-DXlUZo0k.js

@@ -1,79 +0,0 @@
-import { jsx as M } from "react/jsx-runtime";
-import { MalloyRenderer as N } from "@malloydata/render";
-import { useRef as m, useState as v, useLayoutEffect as H, useEffect as w } from "react";
-function x({
-  result: c,
-  height: R,
-  isFillElement: d,
-  onSizeChange: f,
-  onDrill: b
-}) {
-  const e = m(null), [l, a] = v(!1), [h, g] = v(!1), [y, L] = v(!1), n = m(null), t = m(null);
-  if (H(() => {
-    if (e.current && c && !h) {
-      g(!0), n.current || (n.current = new Promise((r) => {
-        t.current = r;
-      }));
-      const i = new N({
-        onClick: b
-      }).createViz();
-      for (; e.current.firstChild; )
-        e.current.removeChild(e.current.firstChild);
-      const o = new MutationObserver((r) => {
-        for (const u of r)
-          if (u.type === "childList" && u.addedNodes.length > 0 && Array.from(u.addedNodes).some(
-            (p) => p.nodeType === Node.ELEMENT_NODE
-          )) {
-            o.disconnect(), setTimeout(() => {
-              a(!0), t.current && (t.current(), t.current = null, n.current = null);
-            }, 50);
-            break;
-          }
-      });
-      if (e.current) {
-        o.observe(e.current, {
-          childList: !0,
-          subtree: !0,
-          characterData: !0
-        });
-        try {
-          i.setResult(JSON.parse(c)), i.render(e.current);
-        } catch (r) {
-          console.error("Error rendering visualization:", r), o.disconnect(), a(!0), t.current && (t.current(), t.current = null, n.current = null);
-        }
-      }
-    }
-  }, [c, b, h]), w(() => {
-    a(!1), g(!1), n.current = null, t.current = null;
-  }, [c]), h && !l && n.current)
-    throw n.current;
-  return w(() => {
-    if (!e.current || !l) return;
-    const s = e.current, i = () => {
-      if (s) {
-        const u = s.offsetHeight;
-        u > 0 ? f && f(u) : d && s.firstChild && (s.firstChild.offsetHeight == 0 ? d(!0) : d(!1));
-      }
-    }, o = setTimeout(i, 100);
-    let r = null;
-    return y || (r = new MutationObserver(i), r.observe(s, {
-      childList: !0,
-      subtree: !0,
-      attributes: !0
-    })), () => {
-      clearTimeout(o), r?.disconnect();
-    };
-  }, [f, c, d, l]), /* @__PURE__ */ M(
-    "div",
-    {
-      ref: e,
-      style: {
-        width: "100%",
-        height: R ? `${R}px` : "100%"
-      }
-    }
-  );
-}
-export {
-  x as default
-};