@react-three/fiber 9.0.0-beta.1 → 9.0.0-rc.0

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,6 @@
+import * as ReactThreeFiber from "./three-types.js";
+export { ReactThreeFiber };
+export * from "./three-types.js";
+export * from "./core/index.js";
+export * from "./web/Canvas.js";
+export { createPointerEvents as events } from "./web/events.js";

package/dist/declarations/src/native/Canvas.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+import { RenderProps } from "../core/index.js";
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, Omit<ViewProps, 'children'> {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+export interface Props extends CanvasProps {
+}
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<View>>;

package/dist/declarations/src/native/events.d.ts

@@ -0,0 +1,4 @@
+import { RootStore } from "../core/store.js";
+import { EventManager } from "../core/events.js";
+/** Default R3F event manager for react-native */
+export declare function createTouchEvents(store: RootStore): EventManager<HTMLElement>;

package/dist/declarations/src/native.d.ts

@@ -0,0 +1,6 @@
+import * as ReactThreeFiber from "./three-types.js";
+export { ReactThreeFiber };
+export * from "./three-types.js";
+export * from "./core/index.js";
+export * from "./native/Canvas.js";
+export { createTouchEvents as events } from "./native/events.js";

package/dist/declarations/src/three-types.d.ts

@@ -0,0 +1,62 @@
+import type * as THREE from 'three';
+import type { Args, EventHandlers, InstanceProps, ConstructorRepresentation } from "./core/index.js";
+import type { Overwrite, Mutable } from "./core/utils.js";
+export interface MathRepresentation {
+    set(...args: number[]): any;
+}
+export interface VectorRepresentation extends MathRepresentation {
+    setScalar(value: number): any;
+}
+export type MathTypes = MathRepresentation | THREE.Euler | THREE.Color;
+export type MathType<T extends MathTypes> = T extends THREE.Color ? Args<typeof THREE.Color> | THREE.ColorRepresentation : T extends VectorRepresentation | THREE.Layers | THREE.Euler ? T | Parameters<T['set']> | number : T | Parameters<T['set']>;
+export type MathProps<P> = {
+    [K in keyof P as P[K] extends MathTypes ? K : never]: P[K] extends MathTypes ? MathType<P[K]> : never;
+};
+export type Vector2 = MathType<THREE.Vector2>;
+export type Vector3 = MathType<THREE.Vector3>;
+export type Vector4 = MathType<THREE.Vector4>;
+export type Color = MathType<THREE.Color>;
+export type Layers = MathType<THREE.Layers>;
+export type Quaternion = MathType<THREE.Quaternion>;
+export type Euler = MathType<THREE.Euler>;
+export type Matrix3 = MathType<THREE.Matrix3>;
+export type Matrix4 = MathType<THREE.Matrix4>;
+export interface RaycastableRepresentation {
+    raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
+}
+export type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : {};
+export interface ReactProps<P> {
+    children?: React.ReactNode;
+    ref?: React.Ref<P>;
+    key?: React.Key;
+}
+export type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<Overwrite<P, MathProps<P> & ReactProps<P> & EventProps<P>>>;
+export type ThreeElement<T extends ConstructorRepresentation> = Mutable<Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>>;
+type ThreeExports = typeof THREE;
+type ThreeElementsImpl = {
+    [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation ? ThreeElement<ThreeExports[K]> : never;
+};
+export interface ThreeElements extends ThreeElementsImpl {
+    primitive: Omit<ThreeElement<any>, 'args'> & {
+        object: object;
+    };
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
+declare module 'react/jsx-dev-runtime' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
+export {};

package/dist/declarations/src/web/Canvas.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Options as ResizeOptions } from "./use-measure.js";
+import { RenderProps } from "../core/index.js";
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Canvas fallback content, similar to img's alt prop */
+    fallback?: React.ReactNode;
+    /**
+     * Options to pass to useMeasure.
+     * @see https://github.com/pmndrs/react-use-measure#api
+     */
+    resize?: ResizeOptions;
+    /** The target where events are being subscribed to, default: the div that wraps canvas */
+    eventSource?: HTMLElement | React.RefObject<HTMLElement>;
+    /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
+    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
+}
+export interface Props extends CanvasProps {
+}
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -0,0 +1,4 @@
+import { RootStore } from "../core/store.js";
+import { EventManager } from "../core/events.js";
+/** Default R3F event manager for web */
+export declare function createPointerEvents(store: RootStore): EventManager<HTMLElement>;

package/dist/declarations/src/web/use-measure.d.ts

@@ -0,0 +1,34 @@
+declare type ResizeObserverCallback = (entries: any[], observer: ResizeObserver) => void;
+declare class ResizeObserver {
+    constructor(callback: ResizeObserverCallback);
+    observe(target: Element, options?: any): void;
+    unobserve(target: Element): void;
+    disconnect(): void;
+    static toString(): string;
+}
+export interface RectReadOnly {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+    [key: string]: number;
+}
+type HTMLOrSVGElement = HTMLElement | SVGElement;
+type Result = [(element: HTMLOrSVGElement | null) => void, RectReadOnly, () => void];
+export type Options = {
+    debounce?: number | {
+        scroll: number;
+        resize: number;
+    };
+    scroll?: boolean;
+    polyfill?: {
+        new (cb: ResizeObserverCallback): ResizeObserver;
+    };
+    offsetSize?: boolean;
+};
+export declare function useMeasure({ debounce, scroll, polyfill, offsetSize }?: Options): Result;
+export {};

package/dist/{loop-b00a3b86.esm.js → events-5a08b43f.esm.js}

@@ -2,11 +2,11 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { NoEventPriority, DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import { createWithEqualityFn } from 'zustand/traditional';
+import { suspend, preload, clear } from 'suspend-react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
 import Reconciler from 'react-reconciler';
 import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { suspend, preload, clear } from 'suspend-react';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -289,8 +289,8 @@ function swapInstances() {
   reconstructed.length = 0;
 }
 
-// Don't handle text instances, warn on undefined behavior
-const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
+// Don't handle text instances, make it no-op
+const handleTextInstance = () => {};
 const NO_CONTEXT = {};
 let currentUpdatePriority = NoEventPriority;
 
@@ -2281,4 +2281,90 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('after', timestamp);
 }
 
-export { useThree as A, Block as B, useFrame as C, useGraph as D, ErrorBoundary as E, useLoader as F, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createEvents as c, createRoot as d, extend as e, unmountComponentAtNode as f, flushGlobalEffects as g, addEffect as h, isRef as i, addAfterEffect as j, addTail as k, invalidate as l, advance as m, render as n, createPortal as o, context as p, applyProps as q, reconciler as r, getRootState as s, threeTypes as t, useBridge as u, dispose as v, act as w, buildGraph as x, useInstanceHandle as y, useStore as z };
+const DOM_EVENTS = {
+  onClick: ['click', false],
+  onContextMenu: ['contextmenu', false],
+  onDoubleClick: ['dblclick', false],
+  onWheel: ['wheel', true],
+  onPointerDown: ['pointerdown', true],
+  onPointerUp: ['pointerup', true],
+  onPointerLeave: ['pointerleave', true],
+  onPointerMove: ['pointermove', true],
+  onPointerCancel: ['pointercancel', true],
+  onLostPointerCapture: ['lostpointercapture', true]
+};
+
+/** Default R3F event manager for web */
+function createPointerEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
+  return {
+    priority: 1,
+    enabled: true,
+    compute(event, state, previous) {
+      // https://github.com/pmndrs/react-three-fiber/pull/782
+      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, state.camera);
+    },
+    connected: undefined,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
+      ...acc,
+      [key]: handlePointer(key)
+    }), {}),
+    update: () => {
+      var _internal$lastEvent;
+      const {
+        events,
+        internal
+      } = store.getState();
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+    },
+    connect: target => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: target
+        }
+      }));
+      if (events.handlers) {
+        for (const name in events.handlers) {
+          const event = events.handlers[name];
+          const [eventName, passive] = DOM_EVENTS[name];
+          target.addEventListener(eventName, event, {
+            passive
+          });
+        }
+      }
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      if (events.connected) {
+        if (events.handlers) {
+          for (const name in events.handlers) {
+            const event = events.handlers[name];
+            const [eventName] = DOM_EVENTS[name];
+            events.connected.removeEventListener(eventName, event);
+          }
+        }
+        set(state => ({
+          events: {
+            ...state.events,
+            connected: undefined
+          }
+        }));
+      }
+    }
+  };
+}
+
+export { useStore as A, Block as B, useThree as C, useFrame as D, ErrorBoundary as E, useGraph as F, useLoader as G, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createRoot as c, unmountComponentAtNode as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, render as o, createPortal as p, context as q, reconciler as r, applyProps as s, threeTypes as t, useBridge as u, getRootState as v, dispose as w, act as x, buildGraph as y, useInstanceHandle as z };

package/dist/{loop-dfcc9ca9.cjs.prod.js → events-aef54ace.cjs.prod.js}

@@ -4,11 +4,11 @@ var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
+var suspendReact = require('suspend-react');
+var jsxRuntime = require('react/jsx-runtime');
 var itsFine = require('its-fine');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
-var jsxRuntime = require('react/jsx-runtime');
-var suspendReact = require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -315,8 +315,8 @@ function swapInstances() {
   reconstructed.length = 0;
 }
 
-// Don't handle text instances, warn on undefined behavior
-const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
+// Don't handle text instances, make it no-op
+const handleTextInstance = () => {};
 const NO_CONTEXT = {};
 let currentUpdatePriority = constants.NoEventPriority;
 
@@ -2306,6 +2306,92 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('after', timestamp);
 }
 
+const DOM_EVENTS = {
+  onClick: ['click', false],
+  onContextMenu: ['contextmenu', false],
+  onDoubleClick: ['dblclick', false],
+  onWheel: ['wheel', true],
+  onPointerDown: ['pointerdown', true],
+  onPointerUp: ['pointerup', true],
+  onPointerLeave: ['pointerleave', true],
+  onPointerMove: ['pointermove', true],
+  onPointerCancel: ['pointercancel', true],
+  onLostPointerCapture: ['lostpointercapture', true]
+};
+
+/** Default R3F event manager for web */
+function createPointerEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
+  return {
+    priority: 1,
+    enabled: true,
+    compute(event, state, previous) {
+      // https://github.com/pmndrs/react-three-fiber/pull/782
+      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, state.camera);
+    },
+    connected: undefined,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
+      ...acc,
+      [key]: handlePointer(key)
+    }), {}),
+    update: () => {
+      var _internal$lastEvent;
+      const {
+        events,
+        internal
+      } = store.getState();
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+    },
+    connect: target => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: target
+        }
+      }));
+      if (events.handlers) {
+        for (const name in events.handlers) {
+          const event = events.handlers[name];
+          const [eventName, passive] = DOM_EVENTS[name];
+          target.addEventListener(eventName, event, {
+            passive
+          });
+        }
+      }
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      if (events.connected) {
+        if (events.handlers) {
+          for (const name in events.handlers) {
+            const event = events.handlers[name];
+            const [eventName] = DOM_EVENTS[name];
+            events.connected.removeEventListener(eventName, event);
+          }
+        }
+        set(state => ({
+          events: {
+            ...state.events,
+            connected: undefined
+          }
+        }));
+      }
+    }
+  };
+}
+
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
 exports._roots = _roots;
@@ -2318,6 +2404,7 @@ exports.applyProps = applyProps;
 exports.buildGraph = buildGraph;
 exports.context = context;
 exports.createEvents = createEvents;
+exports.createPointerEvents = createPointerEvents;
 exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;

package/dist/{loop-eb3c7218.cjs.dev.js → events-fa0fb3db.cjs.dev.js}

@@ -4,11 +4,11 @@ var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
+var suspendReact = require('suspend-react');
+var jsxRuntime = require('react/jsx-runtime');
 var itsFine = require('its-fine');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
-var jsxRuntime = require('react/jsx-runtime');
-var suspendReact = require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -315,8 +315,8 @@ function swapInstances() {
   reconstructed.length = 0;
 }
 
-// Don't handle text instances, warn on undefined behavior
-const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
+// Don't handle text instances, make it no-op
+const handleTextInstance = () => {};
 const NO_CONTEXT = {};
 let currentUpdatePriority = constants.NoEventPriority;
 
@@ -2307,6 +2307,92 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('after', timestamp);
 }
 
+const DOM_EVENTS = {
+  onClick: ['click', false],
+  onContextMenu: ['contextmenu', false],
+  onDoubleClick: ['dblclick', false],
+  onWheel: ['wheel', true],
+  onPointerDown: ['pointerdown', true],
+  onPointerUp: ['pointerup', true],
+  onPointerLeave: ['pointerleave', true],
+  onPointerMove: ['pointermove', true],
+  onPointerCancel: ['pointercancel', true],
+  onLostPointerCapture: ['lostpointercapture', true]
+};
+
+/** Default R3F event manager for web */
+function createPointerEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
+  return {
+    priority: 1,
+    enabled: true,
+    compute(event, state, previous) {
+      // https://github.com/pmndrs/react-three-fiber/pull/782
+      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, state.camera);
+    },
+    connected: undefined,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
+      ...acc,
+      [key]: handlePointer(key)
+    }), {}),
+    update: () => {
+      var _internal$lastEvent;
+      const {
+        events,
+        internal
+      } = store.getState();
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+    },
+    connect: target => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: target
+        }
+      }));
+      if (events.handlers) {
+        for (const name in events.handlers) {
+          const event = events.handlers[name];
+          const [eventName, passive] = DOM_EVENTS[name];
+          target.addEventListener(eventName, event, {
+            passive
+          });
+        }
+      }
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      if (events.connected) {
+        if (events.handlers) {
+          for (const name in events.handlers) {
+            const event = events.handlers[name];
+            const [eventName] = DOM_EVENTS[name];
+            events.connected.removeEventListener(eventName, event);
+          }
+        }
+        set(state => ({
+          events: {
+            ...state.events,
+            connected: undefined
+          }
+        }));
+      }
+    }
+  };
+}
+
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
 exports._roots = _roots;
@@ -2319,6 +2405,7 @@ exports.applyProps = applyProps;
 exports.buildGraph = buildGraph;
 exports.context = context;
 exports.createEvents = createEvents;
+exports.createPointerEvents = createPointerEvents;
 exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;