@photonviz/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Photon contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode, RefObject } from 'react';
+import { AreaOptions, BarOptions, LineOptions, PlotOptions, ScatterOptions, YAxisOptions, Plot as Plot$1 } from '@photonviz/core';
+
+/** Imperative escape hatch: get a ref + the underlying core Plot instance. */
+declare function usePlot(options?: PlotOptions): [RefObject<HTMLDivElement>, Plot$1 | null];
+interface PlotProps {
+    options?: PlotOptions;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/** Container component. Children (Line, Scatter, …) register once it mounts. */
+declare function Plot({ options, className, style, children }: PlotProps): react.JSX.Element;
+type LineProps = LineOptions;
+declare function Line({ x, y, color, width, name, yAxis, step, join, decimate }: LineProps): null;
+type ScatterProps = ScatterOptions;
+declare function Scatter({ x, y, color, size, name, yAxis, colorBy }: ScatterProps): null;
+type BarProps = BarOptions;
+declare function Bar({ x, y, base, width, offset, color, name, yAxis }: BarProps): null;
+type AreaProps = AreaOptions;
+declare function Area({ x, y, base, color, name, yAxis }: AreaProps): null;
+interface YAxisProps extends YAxisOptions {
+    id: string;
+}
+/** Register an additional Y axis. (Core has no live removal, so it persists.) */
+declare function YAxis({ id, ...opts }: YAxisProps): null;
+
+export { Area, type AreaProps, Bar, type BarProps, Line, type LineProps, Plot, type PlotProps, Scatter, type ScatterProps, YAxis, type YAxisProps, usePlot };

package/dist/index.js

@@ -0,0 +1,135 @@
+// src/index.tsx
+import {
+  Plot as CorePlot
+} from "@photonviz/core";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var PlotContext = createContext(null);
+function usePlot(options) {
+  const ref = useRef(null);
+  const [plot, setPlot] = useState(null);
+  const optsRef = useRef(options);
+  useEffect(() => {
+    if (!ref.current) return;
+    const p = new CorePlot(ref.current, optsRef.current);
+    setPlot(p);
+    return () => p.destroy();
+  }, []);
+  return [ref, plot];
+}
+function Plot({ options, className, style, children }) {
+  const [ref, plot] = usePlot(options);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className,
+      style: { position: "relative", width: "100%", height: "100%", ...style },
+      children: /* @__PURE__ */ jsx(PlotContext.Provider, { value: plot, children: plot ? children : null })
+    }
+  );
+}
+function Line({ x, y, color, width, name, yAxis, step, join, decimate }) {
+  const plot = useContext(PlotContext);
+  const layer = useRef(null);
+  useEffect(() => {
+    if (!plot) return;
+    const l = plot.addLine({ x, y, color, width, name, yAxis, step, join, decimate });
+    layer.current = l;
+    return () => {
+      plot.removeLayer(l);
+      layer.current = null;
+    };
+  }, [plot, color, width, name, yAxis, step, join, decimate]);
+  useEffect(() => {
+    if (layer.current && plot) {
+      layer.current.setData(x, y);
+      plot.render();
+    }
+  }, [x, y]);
+  return null;
+}
+function Scatter({ x, y, color, size, name, yAxis, colorBy }) {
+  const plot = useContext(PlotContext);
+  const layer = useRef(null);
+  useEffect(() => {
+    if (!plot) return;
+    const l = plot.addScatter({ x, y, color, size, name, yAxis, colorBy });
+    layer.current = l;
+    return () => {
+      plot.removeLayer(l);
+      layer.current = null;
+    };
+  }, [plot, color, size, name, yAxis, colorBy]);
+  useEffect(() => {
+    if (layer.current && plot) {
+      layer.current.setData(x, y);
+      plot.render();
+    }
+  }, [x, y]);
+  return null;
+}
+function Bar({ x, y, base, width, offset, color, name, yAxis }) {
+  const plot = useContext(PlotContext);
+  const layer = useRef(null);
+  useEffect(() => {
+    if (!plot) return;
+    const l = plot.addBar({ x, y, base, width, offset, color, name, yAxis });
+    layer.current = l;
+    return () => {
+      plot.removeLayer(l);
+      layer.current = null;
+    };
+  }, [plot, width, offset, color, name, yAxis]);
+  useEffect(() => {
+    if (layer.current && plot) {
+      layer.current.setData(x, y, base);
+      plot.render();
+    }
+  }, [x, y, base]);
+  return null;
+}
+function Area({ x, y, base, color, name, yAxis }) {
+  const plot = useContext(PlotContext);
+  const layer = useRef(null);
+  useEffect(() => {
+    if (!plot) return;
+    const l = plot.addArea({ x, y, base, color, name, yAxis });
+    layer.current = l;
+    return () => {
+      plot.removeLayer(l);
+      layer.current = null;
+    };
+  }, [plot, color, name, yAxis]);
+  useEffect(() => {
+    if (layer.current && plot) {
+      layer.current.setData(x, y, base);
+      plot.render();
+    }
+  }, [x, y, base]);
+  return null;
+}
+function YAxis({ id, ...opts }) {
+  const plot = useContext(PlotContext);
+  useEffect(() => {
+    if (!plot) return;
+    plot.addYAxis(id, opts);
+  }, [plot, id]);
+  return null;
+}
+export {
+  Area,
+  Bar,
+  Line,
+  Plot,
+  Scatter,
+  YAxis,
+  usePlot
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import {\n  AreaLayer,\n  BarLayer,\n  LineLayer,\n  Plot as CorePlot,\n  ScatterLayer,\n  type AreaOptions,\n  type BarOptions,\n  type LineOptions,\n  type PlotOptions,\n  type ScatterOptions,\n  type YAxisOptions,\n} from \"@photonviz/core\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\n\nconst PlotContext = createContext<CorePlot | null>(null);\n\n/** Imperative escape hatch: get a ref + the underlying core Plot instance. */\nexport function usePlot(options?: PlotOptions): [RefObject<HTMLDivElement>, CorePlot | null] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [plot, setPlot] = useState<CorePlot | null>(null);\n  const optsRef = useRef(options);\n  useEffect(() => {\n    if (!ref.current) return;\n    const p = new CorePlot(ref.current, optsRef.current);\n    setPlot(p);\n    return () => p.destroy();\n  }, []);\n  return [ref, plot];\n}\n\nexport interface PlotProps {\n  options?: PlotOptions;\n  className?: string;\n  style?: CSSProperties;\n  children?: ReactNode;\n}\n\n/** Container component. Children (Line, Scatter, …) register once it mounts. */\nexport function Plot({ options, className, style, children }: PlotProps) {\n  const [ref, plot] = usePlot(options);\n  return (\n    <div\n      ref={ref}\n      className={className}\n      style={{ position: \"relative\", width: \"100%\", height: \"100%\", ...style }}\n    >\n      <PlotContext.Provider value={plot}>{plot ? children : null}</PlotContext.Provider>\n    </div>\n  );\n}\n\nexport type LineProps = LineOptions;\n\nexport function Line({ x, y, color, width, name, yAxis, step, join, decimate }: LineProps) {\n  const plot = useContext(PlotContext);\n  const layer = useRef<LineLayer | null>(null);\n  useEffect(() => {\n    if (!plot) return;\n    const l = plot.addLine({ x, y, color, width, name, yAxis, step, join, decimate });\n    layer.current = l;\n    return () => {\n      plot.removeLayer(l);\n      layer.current = null;\n    };\n    // Structural props → recreate the layer.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [plot, color, width, name, yAxis, step, join, decimate]);\n  useEffect(() => {\n    if (layer.current && plot) {\n      layer.current.setData(x, y);\n      plot.render();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [x, y]);\n  return null;\n}\n\nexport type ScatterProps = ScatterOptions;\n\nexport function Scatter({ x, y, color, size, name, yAxis, colorBy }: ScatterProps) {\n  const plot = useContext(PlotContext);\n  const layer = useRef<ScatterLayer | null>(null);\n  useEffect(() => {\n    if (!plot) return;\n    const l = plot.addScatter({ x, y, color, size, name, yAxis, colorBy });\n    layer.current = l;\n    return () => {\n      plot.removeLayer(l);\n      layer.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [plot, color, size, name, yAxis, colorBy]);\n  useEffect(() => {\n    if (layer.current && plot) {\n      layer.current.setData(x, y);\n      plot.render();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [x, y]);\n  return null;\n}\n\nexport type BarProps = BarOptions;\n\nexport function Bar({ x, y, base, width, offset, color, name, yAxis }: BarProps) {\n  const plot = useContext(PlotContext);\n  const layer = useRef<BarLayer | null>(null);\n  useEffect(() => {\n    if (!plot) return;\n    const l = plot.addBar({ x, y, base, width, offset, color, name, yAxis });\n    layer.current = l;\n    return () => {\n      plot.removeLayer(l);\n      layer.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [plot, width, offset, color, name, yAxis]);\n  useEffect(() => {\n    if (layer.current && plot) {\n      layer.current.setData(x, y, base);\n      plot.render();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [x, y, base]);\n  return null;\n}\n\nexport type AreaProps = AreaOptions;\n\nexport function Area({ x, y, base, color, name, yAxis }: AreaProps) {\n  const plot = useContext(PlotContext);\n  const layer = useRef<AreaLayer | null>(null);\n  useEffect(() => {\n    if (!plot) return;\n    const l = plot.addArea({ x, y, base, color, name, yAxis });\n    layer.current = l;\n    return () => {\n      plot.removeLayer(l);\n      layer.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [plot, color, name, yAxis]);\n  useEffect(() => {\n    if (layer.current && plot) {\n      layer.current.setData(x, y, base);\n      plot.render();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [x, y, base]);\n  return null;\n}\n\nexport interface YAxisProps extends YAxisOptions {\n  id: string;\n}\n\n/** Register an additional Y axis. (Core has no live removal, so it persists.) */\nexport function YAxis({ id, ...opts }: YAxisProps) {\n  const plot = useContext(PlotContext);\n  useEffect(() => {\n    if (!plot) return;\n    plot.addYAxis(id, opts);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [plot, id]);\n  return null;\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@photonviz/react",
+  "version": "0.1.0",
+  "description": "React bindings for Photon — WebGL2 scientific plotting",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@photonviz/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "@types/react": "^18.3.12"
+  },
+  "keywords": [
+    "react",
+    "webgl2",
+    "plot",
+    "chart",
+    "photon",
+    "visualization"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/coredumpdev/photon.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/coredumpdev/photon#readme",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}