feat: direct ref

Author: skokenes

package.json

@@ -18,8 +18,8 @@
   },
   "homepage": "https://github.com/malloydata/malloy-render-react#readme",
   "dependencies": {
-    "@malloydata/db-duckdb": "^0.0.144",
-    "@malloydata/render": "^0.0.144"
+    "@malloydata/db-duckdb": "^0.0.145",
+    "@malloydata/render": "^0.0.145"
   },
   "devDependencies": {
     "@types/emscripten": "^1.39.11",

src/malloy-render.tsx

@@ -1,48 +1,32 @@
 import "@malloydata/render";
-import { Result, QueryResult, ModelDef } from "@malloydata/malloy";
+import type { MalloyRenderProps } from "@malloydata/render";
 import React, { useEffect, useRef } from "react";
 
+type MalloyRenderElement = HTMLElement & MalloyRenderProps;
+
 declare global {
   namespace JSX {
     interface IntrinsicElements {
       "malloy-render": React.DetailedHTMLProps<
         React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      > & {
-        result?: Result;
-        queryResult?: QueryResult;
-        modelDef?: ModelDef;
-      }; // todo: malloy render props exports
+        MalloyRenderElement
+      >;
     }
   }
 }
 
-type MalloyRenderProps = {
-  result?: Result;
-  queryResult?: QueryResult;
-  modelDef?: ModelDef;
-};
-
 export function MalloyRender({
   result,
   queryResult,
   modelDef,
 }: MalloyRenderProps) {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<MalloyRenderElement>(null);
   useEffect(() => {
     if (ref.current) {
-      let render = ref.current.querySelector("malloy-render");
-      if (!render) {
-        render = document.createElement("malloy-render");
-        render.result = result;
-        render.queryResult = queryResult;
-        render.modelDef = modelDef;
-        ref.current.appendChild(render);
-      }
-      render.result = result;
-      render.queryResult = queryResult;
-      render.modelDef = modelDef;
+      ref.current.result = result;
+      ref.current.queryResult = queryResult;
+      ref.current.modelDef = modelDef;
     }
   }, [result, queryResult, modelDef]);
-  return <div ref={ref} />;
+  return <malloy-render ref={ref} />;
 }

tsconfig.json

@@ -15,7 +15,8 @@
     "lib": ["es6", "dom"],
     "declaration": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "skipLibCheck": true
   },
   "include": ["./src"],
   "exclude": ["node_modules", "dist"]