fix: adds return signature for jsr

Author: thedanchez

src/createPlotComponent.tsx

@@ -117,120 +117,122 @@ export type PlotlyModule = Pick<
  * - Supports all Plotly.js event handlers through props
  * - Includes built-in resize handling when useResize is enabled
  */
-export const createPlotComponent = (Plotly: PlotlyModule) => (props: PlotProps) => {
-  const _props = mergeProps(
-    {
-      id: "solid-plotly",
-      config: {} as PlotlyConfig,
-      data: [] as PlotlyData[],
-      frames: [] as PlotlyFrame[],
-      layout: {} as PlotlyLayout,
-      useResize: true,
-      style: {
-        position: "relative",
-        display: "inline-block",
-      } as JSX.CSSProperties,
-    },
-    props,
-  );
-
-  let container!: HTMLElement;
-  let plotElement!: PlotlyHTMLElement;
-  const [initialized, setInitialized] = createSignal(false);
-
-  const [containerProps] = splitProps(_props, ["id", "class", "style", "ref"]);
-  const [eventProps] = splitProps(_props, PLOT_COMPONENT_EVENT_NAMES);
-  const [plotProps] = splitProps(_props, [
-    "data",
-    "layout",
-    "config",
-    "onInitialized",
-    "onPurge",
-    "onUpdate",
-    "onError",
-    "onResize",
-    "useResize",
-  ]);
-
-  const layout = () =>
-    plotProps.useResize ? { ...plotProps.layout, autosize: true } : plotProps.layout;
-
-  const config = () =>
-    plotProps.useResize ? { ...plotProps.config, responsive: true } : plotProps.config;
-
-  onMount(async () => {
-    const [error, element] = await tryCatch(
-      Plotly.newPlot(container, plotProps.data, layout(), config()),
+export const createPlotComponent =
+  (Plotly: PlotlyModule) =>
+  (props: PlotProps): JSX.Element => {
+    const _props = mergeProps(
+      {
+        id: "solid-plotly",
+        config: {} as PlotlyConfig,
+        data: [] as PlotlyData[],
+        frames: [] as PlotlyFrame[],
+        layout: {} as PlotlyLayout,
+        useResize: true,
+        style: {
+          position: "relative",
+          display: "inline-block",
+        } as JSX.CSSProperties,
+      },
+      props,
     );
 
-    if (error) {
-      plotProps.onError?.(error);
-      return;
-    }
-
-    Plotly.Plots.resize(element);
-    attachComponentEvents(element, eventProps);
-
-    plotProps.onInitialized?.(getFigureData(element), element);
-    plotElement = element;
-
-    setInitialized(true);
-  });
-
-  createEffect(() => {
-    if (!initialized()) return;
-
-    const updatePlot = async () => {
+    let container!: HTMLElement;
+    let plotElement!: PlotlyHTMLElement;
+    const [initialized, setInitialized] = createSignal(false);
+
+    const [containerProps] = splitProps(_props, ["id", "class", "style", "ref"]);
+    const [eventProps] = splitProps(_props, PLOT_COMPONENT_EVENT_NAMES);
+    const [plotProps] = splitProps(_props, [
+      "data",
+      "layout",
+      "config",
+      "onInitialized",
+      "onPurge",
+      "onUpdate",
+      "onError",
+      "onResize",
+      "useResize",
+    ]);
+
+    const layout = () =>
+      plotProps.useResize ? { ...plotProps.layout, autosize: true } : plotProps.layout;
+
+    const config = () =>
+      plotProps.useResize ? { ...plotProps.config, responsive: true } : plotProps.config;
+
+    onMount(async () => {
       const [error, element] = await tryCatch(
-        Plotly.react(container, plotProps.data, layout(), config()),
+        Plotly.newPlot(container, plotProps.data, layout(), config()),
       );
 
       if (error) {
         plotProps.onError?.(error);
         return;
       }
 
-      plotProps.onUpdate?.(getFigureData(element), element);
-    };
+      Plotly.Plots.resize(element);
+      attachComponentEvents(element, eventProps);
+
+      plotProps.onInitialized?.(getFigureData(element), element);
+      plotElement = element;
+
+      setInitialized(true);
+    });
+
+    createEffect(() => {
+      if (!initialized()) return;
+
+      const updatePlot = async () => {
+        const [error, element] = await tryCatch(
+          Plotly.react(container, plotProps.data, layout(), config()),
+        );
 
-    void updatePlot();
-  });
+        if (error) {
+          plotProps.onError?.(error);
+          return;
+        }
 
-  createEffect(() => {
-    if (!initialized() || !plotProps.useResize) return;
+        plotProps.onUpdate?.(getFigureData(element), element);
+      };
 
-    const resizeHandler = () => {
-      Plotly.Plots.resize(plotElement);
-      plotProps.onResize?.();
-    };
+      void updatePlot();
+    });
+
+    createEffect(() => {
+      if (!initialized() || !plotProps.useResize) return;
+
+      const resizeHandler = () => {
+        Plotly.Plots.resize(plotElement);
+        plotProps.onResize?.();
+      };
 
-    const resizeObserver = new ResizeObserver(resizeHandler);
-    resizeObserver.observe(container);
+      const resizeObserver = new ResizeObserver(resizeHandler);
+      resizeObserver.observe(container);
+
+      onCleanup(() => {
+        resizeObserver.disconnect();
+      });
+    });
 
     onCleanup(() => {
-      resizeObserver.disconnect();
+      if (!initialized()) return;
+
+      removeComponentEvents(plotElement, eventProps);
+      Plotly.purge(plotElement);
+      plotProps.onPurge?.(getFigureData(plotElement), plotElement);
+
+      setInitialized(false);
     });
-  });
-
-  onCleanup(() => {
-    if (!initialized()) return;
-
-    removeComponentEvents(plotElement, eventProps);
-    Plotly.purge(plotElement);
-    plotProps.onPurge?.(getFigureData(plotElement), plotElement);
-
-    setInitialized(false);
-  });
-
-  return (
-    <div
-      id={containerProps.id}
-      class={containerProps.class}
-      style={containerProps.style}
-      ref={(el) => {
-        container = el;
-        containerProps.ref?.(el);
-      }}
-    />
-  );
-};
+
+    return (
+      <div
+        id={containerProps.id}
+        class={containerProps.class}
+        style={containerProps.style}
+        ref={(el) => {
+          container = el;
+          containerProps.ref?.(el);
+        }}
+      />
+    );
+  };