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

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, d as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from '../../dist/loop-b00a3b86.esm.js';
-export { t as ReactThreeFiber, _ as _roots, w as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, q as applyProps, x as buildGraph, p as context, c as createEvents, o as createPortal, d as createRoot, v as dispose, e as extend, g as flushGlobalEffects, s as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/loop-b00a3b86.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-26d2636c.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, p as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, v as getRootState, m as invalidate, r as reconciler, o as render, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-26d2636c.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
@@ -12,91 +12,9 @@ import { fromByteArray } from 'base64-js';
 import { Buffer } from 'buffer';
 import 'react-reconciler/constants';
 import 'zustand/traditional';
+import 'suspend-react';
 import 'react-reconciler';
 import 'scheduler';
-import 'suspend-react';
-
-/** Default R3F event manager for react-native */
-function createTouchEvents(store) {
-  const {
-    handlePointer
-  } = createEvents(store);
-  const handleTouch = (event, name) => {
-    event.persist()
-
-    // Apply offset
-    ;
-    event.nativeEvent.offsetX = event.nativeEvent.locationX;
-    event.nativeEvent.offsetY = event.nativeEvent.locationY;
-
-    // Emulate DOM event
-    const callback = handlePointer(name);
-    callback(event.nativeEvent);
-    return true;
-  };
-  const responder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponderCapture: () => true,
-    onPanResponderTerminationRequest: () => true,
-    onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
-    onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
-    onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
-    onPanResponderEnd: (e, state) => {
-      handleTouch(e, 'onPointerUp');
-      if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
-    },
-    onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
-    onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
-    onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
-  });
-  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: responder.panHandlers,
-    update: () => {
-      var _internal$lastEvent;
-      const {
-        events,
-        internal
-      } = store.getState();
-      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
-        handlePointer('onPointerMove')(internal.lastEvent.current);
-      }
-    },
-    connect: () => {
-      const {
-        set,
-        events
-      } = store.getState();
-      events.disconnect == null ? void 0 : events.disconnect();
-      set(state => ({
-        events: {
-          ...state.events,
-          connected: true
-        }
-      }));
-    },
-    disconnect: () => {
-      const {
-        set
-      } = store.getState();
-      set(state => ({
-        events: {
-          ...state.events,
-          connected: false
-        }
-      }));
-    }
-  };
-}
 
 // TODO: React 19 needs support from react-native
 const _View = View;
@@ -108,7 +26,7 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
   children,
   style,
   gl,
-  events = createTouchEvents,
+  events = createPointerEvents,
   shadows,
   linear,
   flat,
@@ -171,22 +89,87 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
   // Called on context create or swap
   // https://github.com/pmndrs/react-three-fiber/pull/2297
   const onContextCreate = React.useCallback(context => {
-    const canvasShim = {
+    const listeners = new Map();
+    const canvas = {
+      style: {},
       width: context.drawingBufferWidth,
       height: context.drawingBufferHeight,
-      style: {},
-      addEventListener: () => {},
-      removeEventListener: () => {},
+      clientWidth: context.drawingBufferWidth,
       clientHeight: context.drawingBufferHeight,
       getContext: (_, {
         antialias = false
       }) => {
         setAntialias(antialias);
         return context;
+      },
+      addEventListener(type, listener) {
+        let callbacks = listeners.get(type);
+        if (!callbacks) {
+          callbacks = [];
+          listeners.set(type, callbacks);
+        }
+        callbacks.push(listener);
+      },
+      removeEventListener(type, listener) {
+        const callbacks = listeners.get(type);
+        if (callbacks) {
+          const index = callbacks.indexOf(listener);
+          if (index !== -1) callbacks.splice(index, 1);
+        }
+      },
+      dispatchEvent(event) {
+        Object.assign(event, {
+          target: this
+        });
+        const callbacks = listeners.get(event.type);
+        if (callbacks) {
+          for (const callback of callbacks) {
+            callback(event);
+          }
+        }
+      },
+      setPointerCapture() {
+        // TODO
+      },
+      releasePointerCapture() {
+        // TODO
       }
     };
-    root.current = createRoot(canvasShim);
-    setCanvas(canvasShim);
+
+    // TODO: this is wrong but necessary to trick controls
+    // @ts-ignore
+    canvas.ownerDocument = canvas;
+    canvas.getRootNode = () => canvas;
+    root.current = createRoot(canvas);
+    setCanvas(canvas);
+    function handleTouch(gestureEvent, type) {
+      gestureEvent.persist();
+      canvas.dispatchEvent(Object.assign(gestureEvent.nativeEvent, {
+        type,
+        offsetX: gestureEvent.nativeEvent.locationX,
+        offsetY: gestureEvent.nativeEvent.locationY,
+        pointerType: 'touch',
+        pointerId: gestureEvent.nativeEvent.identifier
+      }));
+      return true;
+    }
+    const responder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+      onPanResponderTerminationRequest: () => true,
+      onStartShouldSetPanResponderCapture: e => handleTouch(e, 'pointercapture'),
+      onPanResponderStart: e => handleTouch(e, 'pointerdown'),
+      onPanResponderMove: e => handleTouch(e, 'pointermove'),
+      onPanResponderEnd: (e, state) => {
+        handleTouch(e, 'pointerup');
+        if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'click');
+      },
+      onPanResponderRelease: e => handleTouch(e, 'pointerleave'),
+      onPanResponderTerminate: e => handleTouch(e, 'lostpointercapture'),
+      onPanResponderReject: e => handleTouch(e, 'lostpointercapture')
+    });
+    setBind(responder.panHandlers);
   }, []);
   if (root.current && width > 0 && height > 0) {
     root.current.configure({
@@ -215,9 +198,6 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       // Overwrite onCreated to apply RN bindings
       onCreated: state => {
-        // Bind events after creation
-        setBind(state.events.handlers);
-
         // Bind render to RN bridge
         const context = state.gl.getContext();
         const renderFrame = state.gl.render.bind(state.gl);
@@ -275,6 +255,88 @@ const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref)
   });
 });
 
+/** Default R3F event manager for react-native */
+function createTouchEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
+  const handleTouch = (event, name) => {
+    event.persist()
+
+    // Apply offset
+    ;
+    event.nativeEvent.offsetX = event.nativeEvent.locationX;
+    event.nativeEvent.offsetY = event.nativeEvent.locationY;
+
+    // Emulate DOM event
+    const callback = handlePointer(name);
+    callback(event.nativeEvent);
+    return true;
+  };
+  const responder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderTerminationRequest: () => true,
+    onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
+    onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
+    onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
+    onPanResponderEnd: (e, state) => {
+      handleTouch(e, 'onPointerUp');
+      if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
+    },
+    onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
+    onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
+    onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
+  });
+  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: responder.panHandlers,
+    update: () => {
+      var _internal$lastEvent;
+      const {
+        events,
+        internal
+      } = store.getState();
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
+        handlePointer('onPointerMove')(internal.lastEvent.current);
+      }
+    },
+    connect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: true
+        }
+      }));
+    },
+    disconnect: () => {
+      const {
+        set
+      } = store.getState();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: false
+        }
+      }));
+    }
+  };
+}
+
 // http://stackoverflow.com/questions/105034
 function uuidv4() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {

package/package.json

@@ -1,86 +1,88 @@
-{
-  "name": "@react-three/fiber",
-  "version": "9.0.0-beta.1",
-  "description": "A React renderer for Threejs",
-  "keywords": [
-    "react",
-    "renderer",
-    "fiber",
-    "three",
-    "threejs"
-  ],
-  "author": "Paul Henschel (https://github.com/drcmda)",
-  "license": "MIT",
-  "maintainers": [
-    "Josh Ellis (https://github.com/joshuaellis)",
-    "Cody Bennett (https://github.com/codyjasonbennett)"
-  ],
-  "bugs": {
-    "url": "https://github.com/pmndrs/react-three-fiber/issues"
-  },
-  "homepage": "https://github.com/pmndrs/react-three-fiber#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pmndrs/react-three-fiber.git"
-  },
-  "collective": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/react-three-fiber"
-  },
-  "main": "dist/react-three-fiber.cjs.js",
-  "module": "dist/react-three-fiber.esm.js",
-  "types": "dist/react-three-fiber.cjs.d.ts",
-  "react-native": "native/dist/react-three-fiber-native.cjs.js",
-  "sideEffects": false,
-  "preconstruct": {
-    "entrypoints": [
-      "index.tsx",
-      "native.tsx"
-    ]
-  },
-  "scripts": {
-    "prebuild": "cp ../../readme.md readme.md"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.17.8",
-    "@types/react-reconciler": "^0.28.8",
-    "base64-js": "^1.5.1",
-    "buffer": "^6.0.3",
-    "its-fine": "^1.2.5",
-    "react-reconciler": "0.31.0-rc.0",
-    "react-use-measure": "^2.1.1",
-    "scheduler": "0.25.0-rc.0",
-    "suspend-react": "^0.1.3",
-    "zustand": "^4.1.2"
-  },
-  "peerDependencies": {
-    "expo": ">=43.0",
-    "expo-asset": ">=8.4",
-    "expo-gl": ">=11.0",
-    "expo-file-system": ">=11.0",
-    "react": ">=19.0",
-    "react-dom": ">=19.0",
-    "react-native": ">=0.69",
-    "three": ">=0.141"
-  },
-  "peerDependenciesMeta": {
-    "react-dom": {
-      "optional": true
-    },
-    "react-native": {
-      "optional": true
-    },
-    "expo": {
-      "optional": true
-    },
-    "expo-asset": {
-      "optional": true
-    },
-    "expo-file-system": {
-      "optional": true
-    },
-    "expo-gl": {
-      "optional": true
-    }
-  }
-}
+{
+  "name": "@react-three/fiber",
+  "version": "9.0.0-rc.1",
+  "description": "A React renderer for Threejs",
+  "keywords": [
+    "react",
+    "renderer",
+    "fiber",
+    "three",
+    "threejs"
+  ],
+  "author": "Paul Henschel (https://github.com/drcmda)",
+  "license": "MIT",
+  "maintainers": [
+    "Josh Ellis (https://github.com/joshuaellis)",
+    "Cody Bennett (https://github.com/codyjasonbennett)"
+  ],
+  "bugs": {
+    "url": "https://github.com/pmndrs/react-three-fiber/issues"
+  },
+  "homepage": "https://github.com/pmndrs/react-three-fiber#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pmndrs/react-three-fiber.git"
+  },
+  "collective": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/react-three-fiber"
+  },
+  "main": "dist/react-three-fiber.cjs.js",
+  "module": "dist/react-three-fiber.esm.js",
+  "types": "dist/react-three-fiber.cjs.d.ts",
+  "react-native": "native/dist/react-three-fiber-native.cjs.js",
+  "sideEffects": false,
+  "preconstruct": {
+    "entrypoints": [
+      "index.tsx",
+      "native.tsx"
+    ]
+  },
+  "scripts": {
+    "prebuild": "cp ../../readme.md readme.md"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.17.8",
+    "@types/debounce": "^1.2.1",
+    "@types/react-reconciler": "^0.28.8",
+    "@types/webxr": "*",
+    "base64-js": "^1.5.1",
+    "buffer": "^6.0.3",
+    "debounce": "^1.2.1",
+    "its-fine": "^1.2.5",
+    "react-reconciler": "0.31.0-rc.1",
+    "scheduler": "0.25.0-rc.1",
+    "suspend-react": "^0.1.3",
+    "zustand": "^4.1.2"
+  },
+  "peerDependencies": {
+    "expo": ">=43.0",
+    "expo-asset": ">=8.4",
+    "expo-gl": ">=11.0",
+    "expo-file-system": ">=11.0",
+    "react": ">=19.0",
+    "react-dom": ">=19.0",
+    "react-native": ">=0.69",
+    "three": ">=0.141"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "expo": {
+      "optional": true
+    },
+    "expo-asset": {
+      "optional": true
+    },
+    "expo-file-system": {
+      "optional": true
+    },
+    "expo-gl": {
+      "optional": true
+    }
+  }
+}