react-two.js 0.1.0

package/dist/react-two-main.es.js

@@ -0,0 +1,508 @@
+import { jsx as v, Fragment as y } from "react/jsx-runtime";
+import h, { createContext as I, useContext as L, useRef as m, useEffect as l, useState as T, useImperativeHandle as R, useLayoutEffect as G } from "react";
+import w from "two.js";
+const E = I({ two: null, parent: null, width: 0, height: 0 }), g = () => L(E), j = (o, a = []) => {
+  const { two: u } = g(), r = m(o);
+  l(() => {
+    r.current = o;
+  }, [o, ...a]), l(() => {
+    if (!u)
+      return;
+    let i = 0;
+    return u.bind("update", f), () => u.unbind("update", f);
+    function f(t, n) {
+      var e;
+      i += n / 1e3, (e = r.current) == null || e.call(r, i, n);
+    }
+  }, [u, ...a]);
+}, H = (o) => {
+  const { two: a, parent: u } = g(), r = m(null), [i, f] = T({
+    two: a,
+    parent: u,
+    width: 0,
+    height: 0
+  });
+  l(t, [o]);
+  function t() {
+    let n = () => {
+    };
+    if (!a) {
+      let c = function() {
+        const b = s.width !== k, C = !1;
+        b && (k = s.width), (b || C) && f((q) => ({ ...q, width: k, height: S }));
+      };
+      const d = { ...o };
+      delete d.children;
+      const s = new w(d).appendTo(r.current);
+      let k = s.width, S = s.height;
+      f({ two: s, parent: s.scene, width: k, height: S }), s.bind("update", c), n = () => {
+        var C;
+        (C = s.renderer.domElement.parentElement) == null || C.removeChild(
+          s.renderer.domElement
+        ), s.unbind("update", c);
+        const b = w.Instances.indexOf(s);
+        w.Instances.splice(b, 1), s.pause();
+      };
+    }
+    return n;
+  }
+  return /* @__PURE__ */ v(E.Provider, { value: i, children: /* @__PURE__ */ v("div", { ref: r, children: o.children }) });
+}, O = h.forwardRef(
+  ({ x: o, y: a, ...u }, r) => {
+    const { two: i, parent: f, width: t, height: n } = g(), [e, c] = T(null);
+    l(() => {
+      if (i) {
+        const s = new w.Group();
+        return typeof o == "number" && (s.position.x = o), typeof a == "number" && (s.position.y = a), c(s), () => {
+          c(null);
+        };
+      }
+    }, [o, a, i]), l(() => {
+      const s = e;
+      if (f && s)
+        return f.add(s), d(), () => {
+          f.remove(s);
+        };
+    }, [e, f]), l(d, [u]);
+    function d() {
+      c((s) => {
+        if (s) {
+          const k = { ...u };
+          delete k.children;
+          for (const S in k)
+            S in s && (s[S] = k[S]);
+        }
+        return s;
+      });
+    }
+    return R(r, () => e, [e]), /* @__PURE__ */ v(E.Provider, { value: { two: i, parent: e, width: t, height: n }, children: u.children });
+  }
+), _ = h.forwardRef(
+  ({ manual: o, ...a }, u) => {
+    const { two: r, parent: i } = g(), f = m(null);
+    l(() => {
+      const n = new w.Path();
+      return f.current = n, o && (f.current.automatic = !1), () => {
+        f.current = null;
+      };
+    }, [o, r]), l(() => {
+      const n = f.current;
+      if (i && n)
+        return i.add(n), t(), () => {
+          i.remove(n);
+        };
+    }, [i]), l(t, [a]);
+    function t() {
+      if (f.current) {
+        const n = f.current;
+        for (const e in a)
+          e in n && (n[e] = a[e]);
+      }
+    }
+    return R(u, () => f.current), /* @__PURE__ */ v(y, {});
+  }
+), z = h.forwardRef(
+  (o, a) => {
+    const { two: u, parent: r } = g(), i = m(null);
+    l(() => {
+      const t = new w.Points();
+      return i.current = t, () => {
+        i.current = null;
+      };
+    }, [u]), l(() => {
+      const t = i.current;
+      if (r && t)
+        return r.add(t), f(), () => {
+          r.remove(t);
+        };
+    }, [r]), l(f, [o]);
+    function f() {
+      if (i.current) {
+        const t = i.current;
+        for (const n in o)
+          n in t && (t[n] = o[n]);
+      }
+    }
+    return R(a, () => i.current), /* @__PURE__ */ v(y, {});
+  }
+), B = h.forwardRef(
+  ({ x: o, y: a, ...u }, r) => {
+    const { two: i, parent: f } = g(), t = m(null);
+    l(() => {
+      const e = new w.Text(u.value, o, a);
+      return t.current = e, () => {
+        t.current = null;
+      };
+    }, [o, a, i]), l(() => {
+      const e = t.current;
+      if (f && e)
+        return f.add(e), n(), () => {
+          f.remove(e);
+        };
+    }, [f]), l(n, [u]);
+    function n() {
+      if (t.current) {
+        const e = t.current;
+        for (const c in u)
+          c in e && (e[c] = u[c]);
+      }
+    }
+    return R(r, () => t.current), /* @__PURE__ */ v(y, {});
+  }
+), J = h.forwardRef(
+  ({ x: o, y: a, resolution: u, ...r }, i) => {
+    const { two: f, parent: t } = g(), n = m(null);
+    l(() => {
+      const c = new w.ArcSegment(
+        o,
+        a,
+        r.innerRadius,
+        r.outerRadius,
+        r.startAngle,
+        r.endAngle,
+        u
+      );
+      return n.current = c, () => {
+        n.current = null;
+      };
+    }, [o, a, u, f]), l(() => {
+      const c = n.current;
+      if (t && c)
+        return t.add(c), e(), () => {
+          t.remove(c);
+        };
+    }, [t]), l(e, [r]);
+    function e() {
+      if (n.current) {
+        const c = n.current;
+        for (const d in r)
+          d in c && (c[d] = r[d]);
+      }
+    }
+    return R(i, () => n.current), /* @__PURE__ */ v(y, {});
+  }
+), K = h.forwardRef(
+  ({ x: o, y: a, resolution: u, ...r }, i) => {
+    const { two: f, parent: t } = g(), n = m(null);
+    l(() => {
+      const c = new w.Circle(o, a, r.radius, u);
+      return n.current = c, () => {
+        n.current = null;
+      };
+    }, [o, a, u, f]), l(() => {
+      const c = n.current;
+      if (t && c)
+        return t.add(c), e(), () => {
+          t.remove(c);
+        };
+    }, [t]), l(e, [r]);
+    function e() {
+      if (n.current) {
+        const c = n.current;
+        for (const d in r)
+          d in c && (c[d] = r[d]);
+      }
+    }
+    return R(i, () => n.current), /* @__PURE__ */ v(y, {});
+  }
+), M = h.forwardRef(
+  ({ x: o, y: a, resolution: u, ...r }, i) => {
+    const { two: f, parent: t } = g(), n = m(null);
+    l(() => {
+      const c = new w.Ellipse(
+        o,
+        a,
+        typeof r.width == "number" ? r.width / 2 : void 0,
+        typeof r.height == "number" ? r.height / 2 : void 0,
+        u
+      );
+      return n.current = c, () => {
+        n.current = null;
+      };
+    }, [o, a, u, f]), l(() => {
+      const c = n.current;
+      if (t && c)
+        return t.add(c), e(), () => {
+          t.remove(c);
+        };
+    }, [t]), l(e, [r]);
+    function e() {
+      if (n.current) {
+        const c = n.current;
+        for (const d in r)
+          d in c && (c[d] = r[d]);
+      }
+    }
+    return R(i, () => n.current), /* @__PURE__ */ v(y, {});
+  }
+), N = h.forwardRef(
+  ({ paths: o, x: a, y: u, autoPlay: r, ...i }, f) => {
+    const { two: t, parent: n } = g(), e = m(null);
+    G(() => {
+      const d = new w.ImageSequence(o, a, u, i.frameRate);
+      return e.current = d, r && e.current.play(), () => {
+        e.current = null;
+      };
+    }, [o, a, u, t]), l(() => {
+      const d = e.current;
+      if (n && d)
+        return n.add(d), c(), () => {
+          n.remove(d);
+        };
+    }, [n]), l(() => {
+      var d, s;
+      r ? (d = e.current) == null || d.play() : (s = e.current) == null || s.pause();
+    }, [r]), l(c, [i]);
+    function c() {
+      if (e.current) {
+        const d = e.current;
+        for (const s in i)
+          s in d && (d[s] = i[s]);
+      }
+    }
+    return R(f, () => e.current), /* @__PURE__ */ v(y, {});
+  }
+), Q = h.forwardRef(
+  ({ x1: o, y1: a, x2: u, y2: r, ...i }, f) => {
+    const { two: t, parent: n } = g(), e = m(null);
+    l(() => {
+      const d = new w.Line(o, a, u, r);
+      return e.current = d, () => {
+        e.current = null;
+      };
+    }, [o, a, u, r, t]), l(() => {
+      const d = e.current;
+      if (n && d)
+        return n.add(d), c(), () => {
+          n.remove(d);
+        };
+    }, [n]), l(c, [i]);
+    function c() {
+      if (e.current) {
+        const d = e.current;
+        for (const s in i)
+          s in d && (d[s] = i[s]);
+      }
+    }
+    return R(f, () => e.current), /* @__PURE__ */ v(y, {});
+  }
+), U = h.forwardRef(
+  ({ x: o, y: a, radius: u, ...r }, i) => {
+    const { two: f, parent: t } = g(), n = m(null);
+    l(() => {
+      const c = new w.Polygon(o, a, u, r.sides);
+      return n.current = c, () => {
+        n.current = null;
+      };
+    }, [o, a, u, f]), l(() => {
+      const c = n.current;
+      if (t && c)
+        return t.add(c), e(), () => {
+          t.remove(c);
+        };
+    }, [t]), l(e, [r]);
+    function e() {
+      if (n.current) {
+        const c = n.current;
+        for (const d in r)
+          d in c && (c[d] = r[d]);
+      }
+    }
+    return R(i, () => n.current), /* @__PURE__ */ v(y, {});
+  }
+), V = h.forwardRef(
+  ({ x: o, y: a, ...u }, r) => {
+    const { two: i, parent: f } = g(), t = m(null);
+    l(() => {
+      const e = new w.Rectangle(o, a, u.width, u.height);
+      return t.current = e, () => {
+        t.current = null;
+      };
+    }, [o, a, i]), l(() => {
+      const e = t.current;
+      if (f && e)
+        return f.add(e), n(), () => {
+          f.remove(e);
+        };
+    }, [f]), l(n, [u]);
+    function n() {
+      if (t.current) {
+        const e = t.current;
+        for (const c in u)
+          c in e && (e[c] = u[c]);
+      }
+    }
+    return R(r, () => t.current), /* @__PURE__ */ v(y, {});
+  }
+), W = h.forwardRef(({ x: o, y: a, ...u }, r) => {
+  const { two: i, parent: f } = g(), t = m(null);
+  l(() => {
+    const e = new w.RoundedRectangle(
+      o,
+      a,
+      u.width,
+      u.height,
+      u.radius
+    );
+    return t.current = e, () => {
+      t.current = null;
+    };
+  }, [o, a, i]), l(() => {
+    const e = t.current;
+    if (f && e)
+      return f.add(e), n(), () => {
+        f.remove(e);
+      };
+  }, [f]), l(n, [u]);
+  function n() {
+    if (t.current) {
+      const e = t.current;
+      for (const c in u)
+        c in e && (e[c] = u[c]);
+    }
+  }
+  return R(r, () => t.current), /* @__PURE__ */ v(y, {});
+}), Z = h.forwardRef(
+  ({ path: o, x: a, y: u, autoPlay: r, ...i }, f) => {
+    const { two: t, parent: n } = g(), e = m(null);
+    G(() => {
+      const d = new w.Sprite(
+        o,
+        a,
+        u,
+        i.columns,
+        i.rows,
+        i.frameRate
+      );
+      return e.current = d, r && e.current.play(), () => {
+        e.current = null;
+      };
+    }, [o, a, u, t]), l(() => {
+      const d = e.current;
+      if (n && d)
+        return n.add(d), c(), () => {
+          n.remove(d);
+        };
+    }, [n]), l(() => {
+      var d, s;
+      r ? (d = e.current) == null || d.play() : (s = e.current) == null || s.pause();
+    }, [r]), l(c, [i]);
+    function c() {
+      if (e.current) {
+        const d = e.current;
+        for (const s in i)
+          s in d && (d[s] = i[s]);
+      }
+    }
+    return R(f, () => e.current), /* @__PURE__ */ v(y, {});
+  }
+), $ = h.forwardRef(
+  ({ x: o, y: a, ...u }, r) => {
+    const { two: i, parent: f } = g(), t = m(null);
+    l(() => {
+      const e = new w.Star(
+        o,
+        a,
+        u.innerRadius,
+        u.outerRadius,
+        u.sides
+      );
+      return t.current = e, () => {
+        t.current = null;
+      };
+    }, [o, a, i]), l(() => {
+      const e = t.current;
+      if (f && e)
+        return f.add(e), n(), () => {
+          f.remove(e);
+        };
+    }, [f]), l(n, [u]);
+    function n() {
+      if (t.current) {
+        const e = t.current;
+        for (const c in u)
+          c in e && (e[c] = u[c]);
+      }
+    }
+    return R(r, () => t.current), /* @__PURE__ */ v(y, {});
+  }
+), D = h.forwardRef(
+  ({ x1: o, y1: a, x2: u, y2: r, ...i }, f) => {
+    const { two: t } = g(), n = m(null);
+    !n.current && t && (n.current = new w.LinearGradient(o, a, u, r, i.stops)), l(() => {
+      n.current && (typeof o == "number" && (n.current.left.x = o), typeof a == "number" && (n.current.left.y = a), typeof u == "number" && (n.current.right.x = u), typeof r == "number" && (n.current.right.y = r));
+    }, [o, a, u, r]), l(e, [i]);
+    function e() {
+      if (n.current) {
+        const c = n.current;
+        for (const d in i)
+          d in c && (c[d] = i[d]);
+      }
+    }
+    return R(f, () => n.current), null;
+  }
+), x = h.forwardRef(
+  ({ x: o, y: a, focalX: u, focalY: r, ...i }, f) => {
+    const { two: t } = g(), n = m(null);
+    !n.current && t && (n.current = new w.RadialGradient(
+      o,
+      a,
+      i.radius,
+      i.stops,
+      u,
+      r
+    )), l(() => {
+      n.current && (typeof o == "number" && (n.current.center.x = o), typeof a == "number" && (n.current.center.y = a));
+    }, [o, a]), l(() => {
+      n.current && (typeof u == "number" && (n.current.focal.x = u), typeof r == "number" && (n.current.focal.y = r));
+    }, [u, r]), l(e, [i]);
+    function e() {
+      if (n.current) {
+        const c = n.current;
+        for (const d in i)
+          d in c && (c[d] = i[d]);
+      }
+    }
+    return R(f, () => n.current), null;
+  }
+), X = h.forwardRef(
+  ({ source: o, ...a }, u) => {
+    const r = m(null);
+    l(() => {
+      const f = new w.Texture(o);
+      return r.current = f, () => {
+      };
+    }, [o]), l(i, [a]);
+    function i() {
+      if (r.current) {
+        const f = r.current;
+        for (const t in a)
+          t in f && (f[t] = a[t]);
+      }
+    }
+    return R(u, () => r.current), null;
+  }
+);
+export {
+  J as ArcSegment,
+  H as Canvas,
+  K as Circle,
+  E as Context,
+  M as Ellipse,
+  O as Group,
+  N as ImageSequence,
+  Q as Line,
+  D as LinearGradient,
+  _ as Path,
+  z as Points,
+  U as Polygon,
+  x as RadialGradient,
+  V as Rectangle,
+  W as RoundedRectangle,
+  Z as Sprite,
+  $ as Star,
+  B as Text,
+  X as Texture,
+  j as useFrame,
+  g as useTwo
+};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "react-two.js",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "A React virtual DOM for Two.js — a renderer agnostic two-dimensional drawing API for the web",
+  "main": "./dist/react-two-main.es.js",
+  "module": "./dist/react-two-main.es.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/react-two-main.es.js",
+      "types": "./dist/main.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jonobr1/react-two.js.git"
+  },
+  "keywords": [
+    "react",
+    "two.js",
+    "canvas",
+    "svg",
+    "webgl",
+    "graphics",
+    "animation",
+    "2d",
+    "drawing"
+  ],
+  "author": "Jono Brandel",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jonobr1/react-two.js/issues"
+  },
+  "homepage": "https://github.com/jonobr1/react-two.js#readme",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc --p ./tsconfig.build.json",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.10.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/ui": "^3.2.4",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "jsdom": "^26.1.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "two.js": "^v0.8.19"
+  }
+}