@react-three/fiber 8.0.0-beta-03 → 8.0.0-beta-04

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

@@ -1,112 +1,19 @@
-import { c as createEvents, s as buildGraph, v as is, a as createLoop, b as createRenderer, e as createStore, f as context, g as dispose, i as isRenderer, h as extend, p as pick, o as omit } from '../../dist/hooks-15c12e3e.esm.js';
-export { t as ReactThreeFiber, k as addAfterEffect, j as addEffect, l as addTail, f as context, g as dispose, h as extend, n as useFrame, q as useGraph, u as useStore, m as useThree } from '../../dist/hooks-15c12e3e.esm.js';
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
+import { z as buildGraph, A as is, c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from '../../dist/index-fccd77b0.esm.js';
+export { t as ReactThreeFiber, y as _roots, x as act, v as addAfterEffect, s as addEffect, w as addTail, q as advance, l as applyProps, i as context, j as createPortal, a as createRoot, m as dispose, e as extend, n as invalidate, k as reconciler, r as render, u as unmountComponentAtNode, f as useFrame, g as useGraph, b as useStore, d as useThree } from '../../dist/index-fccd77b0.esm.js';
 import * as THREE from 'three';
-import { PixelRatio, View, StyleSheet } from 'react-native';
-import { GLView } from 'expo-gl';
-import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
-import Pressability from 'react-native/Libraries/Pressability/Pressability';
 import { Asset } from 'expo-asset';
 import { readAsStringAsync } from 'expo-file-system';
 import { decode } from 'base64-arraybuffer';
 import { suspend, preload, clear } from 'suspend-react';
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { PixelRatio, View, StyleSheet } from 'react-native';
+import { GLView } from 'expo-gl';
+import Pressability from 'react-native/Libraries/Pressability/Pressability';
+import 'react-reconciler/constants';
+import 'zustand';
 import 'react-reconciler';
 import 'scheduler';
-import 'zustand';
-
-// @ts-ignore
-const EVENTS = {
-  PRESS: 'onPress',
-  PRESSIN: 'onPressIn',
-  PRESSOUT: 'onPressOut',
-  LONGPRESS: 'onLongPress',
-  HOVERIN: 'onHoverIn',
-  HOVEROUT: 'onHoverOut',
-  PRESSMOVE: 'onPressMove'
-};
-const DOM_EVENTS = {
-  [EVENTS.PRESS]: 'onClick',
-  [EVENTS.PRESSIN]: 'onPointerDown',
-  [EVENTS.PRESSOUT]: 'onPointerUp',
-  [EVENTS.LONGPRESS]: 'onDoubleClick',
-  [EVENTS.HOVERIN]: 'onPointerOver',
-  [EVENTS.HOVEROUT]: 'onPointerOut',
-  [EVENTS.PRESSMOVE]: 'onPointerMove'
-}; // https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
-// Gives React a clue as to how import the current interaction is
-
-function getEventPriority() {
-  var _window, _window$event;
-
-  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
-
-  switch (name) {
-    case EVENTS.PRESS:
-    case EVENTS.PRESSIN:
-    case EVENTS.PRESSOUT:
-    case EVENTS.LONGPRESS:
-      return DiscreteEventPriority;
-
-    case EVENTS.HOVERIN:
-    case EVENTS.HOVEROUT:
-    case EVENTS.PRESSMOVE:
-      return ContinuousEventPriority;
-
-    default:
-      return DefaultEventPriority;
-  }
-}
-function createTouchEvents(store) {
-  const {
-    handlePointer
-  } = createEvents(store);
-
-  const handleTouch = (event, name) => {
-    event.persist() // Apply offset
-    ;
-    event.nativeEvent.offsetX = event.nativeEvent.pageX;
-    event.nativeEvent.offsetY = event.nativeEvent.pageY; // Emulate DOM event
-
-    const callback = handlePointer(DOM_EVENTS[name]);
-    return callback(event.nativeEvent);
-  };
-
-  return {
-    connected: false,
-    handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
-      [name]: event => handleTouch(event, name)
-    }), {}),
-    connect: () => {
-      const {
-        set,
-        events
-      } = store.getState();
-      events.disconnect == null ? void 0 : events.disconnect();
-      const manager = new Pressability(events == null ? void 0 : events.handlers);
-      set(state => ({
-        events: { ...state.events,
-          connected: manager
-        }
-      }));
-    },
-    disconnect: () => {
-      const {
-        set,
-        events
-      } = store.getState();
-
-      if (events.connected) {
-        events.connected.reset();
-        set(state => ({
-          events: { ...state.events,
-            connected: false
-          }
-        }));
-      }
-    }
-  };
-}
 
 /**
  * Generates an asset based on input type.
@@ -218,205 +125,77 @@ useLoader.clear = function (Proto, input) {
   return clear([Proto, ...keys]);
 };
 
-const roots = new Map();
-const {
-  invalidate,
-  advance
-} = createLoop(roots);
-const {
-  reconciler,
-  applyProps
-} = createRenderer(roots, getEventPriority);
-
-const createRendererInstance = (gl, context) => {
-  // Create canvas shim
-  const canvas = {
-    width: context.drawingBufferWidth,
-    height: context.drawingBufferHeight,
-    style: {},
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    clientHeight: context.drawingBufferHeight
-  }; // If a renderer is specified, return it
-
-  const customRenderer = typeof gl === 'function' ? gl(canvas, context) : gl;
-  if (isRenderer(customRenderer)) return customRenderer; // Create renderer and pass our canvas and its context
-
-  const renderer = new THREE.WebGLRenderer({
-    powerPreference: 'high-performance',
-    antialias: true,
-    alpha: true,
-    ...gl,
-    canvas,
-    context
-  }); // Set color management
-
-  renderer.outputEncoding = THREE.sRGBEncoding;
-  renderer.toneMapping = THREE.ACESFilmicToneMapping; // Set GL props
-
-  if (gl) applyProps(renderer, gl); // Bind render to RN bridge
-
-  if (context.endFrameEXP) {
-    const renderFrame = renderer.render.bind(renderer);
-
-    renderer.render = (scene, camera) => {
-      renderFrame(scene, camera);
-      context.endFrameEXP();
-    };
-  }
-
-  return renderer;
+const EVENTS = {
+  PRESS: 'onPress',
+  PRESSIN: 'onPressIn',
+  PRESSOUT: 'onPressOut',
+  LONGPRESS: 'onLongPress',
+  HOVERIN: 'onHoverIn',
+  HOVEROUT: 'onHoverOut',
+  PRESSMOVE: 'onPressMove'
 };
+const DOM_EVENTS = {
+  [EVENTS.PRESS]: 'onClick',
+  [EVENTS.PRESSIN]: 'onPointerDown',
+  [EVENTS.PRESSOUT]: 'onPointerUp',
+  [EVENTS.LONGPRESS]: 'onDoubleClick',
+  [EVENTS.HOVERIN]: 'onPointerOver',
+  [EVENTS.HOVEROUT]: 'onPointerOut',
+  [EVENTS.PRESSMOVE]: 'onPointerMove'
+};
+function createTouchEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
 
-function createRoot(context, config) {
-  return {
-    render: element => {
-      var _store;
-
-      let {
-        gl,
-        size = {
-          width: 0,
-          height: 0
-        },
-        events,
-        onCreated,
-        ...props
-      } = config || {};
-      let root = roots.get(context);
-      let fiber = root == null ? void 0 : root.fiber;
-      let store = root == null ? void 0 : root.store;
-      let state = (_store = store) == null ? void 0 : _store.getState();
-
-      if (fiber && state) {
-        // When a root was found, see if any fundamental props must be changed or exchanged
-        // Check size
-        if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
-
-        if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
-        // Changes to the color-space
-
-        const linearChanged = props.linear !== state.internal.lastProps.linear;
-
-        if (linearChanged) {
-          unmountComponentAtNode(context);
-          fiber = undefined;
-        }
-      }
-
-      if (!fiber) {
-        // If no root has been found, make one
-        // Create gl
-        const glRenderer = createRendererInstance(gl, context); // Create store
-
-        store = createStore(applyProps, invalidate, advance, {
-          gl: glRenderer,
-          size,
-          ...props,
-          // expo-gl can only render at native dpr/resolution
-          // https://github.com/expo/expo-three/issues/39
-          dpr: PixelRatio.get()
-        });
-        const state = store.getState(); // Create renderer
-
-        fiber = reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
-
-        roots.set(context, {
-          fiber,
-          store
-        }); // Store event manager internally and connect it
-
-        if (events) {
-          var _state$get$events$con, _state$get$events;
-
-          state.set({
-            events: events(store)
-          });
-          (_state$get$events$con = (_state$get$events = state.get().events).connect) == null ? void 0 : _state$get$events$con.call(_state$get$events, context);
-        }
-      }
+  const handleTouch = (event, name) => {
+    event.persist() // Apply offset
+    ;
+    event.nativeEvent.offsetX = event.nativeEvent.pageX;
+    event.nativeEvent.offsetY = event.nativeEvent.pageY; // Emulate DOM event
 
-      if (store && fiber) {
-        reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
-          store: store,
-          element: element,
-          onCreated: onCreated
-        }), fiber, null, () => undefined);
-        return store;
-      } else {
-        throw 'Error creating root!';
-      }
-    },
-    unmount: () => unmountComponentAtNode(context)
+    const callback = handlePointer(DOM_EVENTS[name]);
+    return callback(event.nativeEvent);
   };
-}
-
-function render(element, context, config = {}) {
-  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
-  return createRoot(context, config).render(element);
-}
-
-function Provider({
-  store,
-  element,
-  onCreated
-}) {
-  React.useEffect(() => {
-    const state = store.getState(); // Flag the canvas active, rendering will now begin
 
-    state.set(state => ({
-      internal: { ...state.internal,
-        active: true
-      }
-    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
-
-    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/React.createElement(context.Provider, {
-    value: store
-  }, element);
-}
+  return {
+    connected: false,
+    handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
+      [name]: event => handleTouch(event, name)
+    }), {}),
+    connect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      const connected = new Pressability(events == null ? void 0 : events.handlers);
+      const handlers = connected.getEventHandlers();
+      set(state => ({
+        events: { ...state.events,
+          connected,
+          handlers
+        }
+      }));
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
 
-function unmountComponentAtNode(context, callback) {
-  const root = roots.get(context);
-  const fiber = root == null ? void 0 : root.fiber;
-
-  if (fiber) {
-    const state = root == null ? void 0 : root.store.getState();
-    if (state) state.internal.active = false;
-    reconciler.updateContainer(null, fiber, null, () => {
-      if (state) {
-        setTimeout(() => {
-          try {
-            var _state$gl, _state$gl$renderLists, _state$gl2;
-
-            state.events.disconnect == null ? void 0 : state.events.disconnect();
-            (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
-            (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
-            dispose(state);
-            roots.delete(context);
-            if (callback) callback(context);
-          } catch (e) {
-            /* ... */
+      if (events.connected) {
+        events.connected.reset();
+        set(state => ({
+          events: { ...state.events,
+            connected: false
           }
-        }, 500);
+        }));
       }
-    });
-  }
-}
-
-const act = React.unstable_act;
-
-function createPortal(children, container) {
-  return reconciler.createPortal(children, container, null, null);
+    }
+  };
 }
 
-reconciler.injectIntoDevTools({
-  bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
-  rendererPackageName: '@react-three/fiber',
-  version: '18.0.0'
-});
-
 const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 
 function Block({
@@ -456,8 +235,6 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   fallback,
   style,
   events,
-  nativeRef_EXPERIMENTAL,
-  onContextCreate,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
@@ -471,7 +248,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
     width: 0,
     height: 0
   });
-  const [context, setContext] = React.useState(null);
+  const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
   const canvasProps = pick(props, CANVAS_PROPS);
   const viewProps = omit(props, CANVAS_PROPS);
@@ -491,14 +268,46 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       height
     });
   }, []);
+  const onContextCreate = React.useCallback(context => {
+    const canvasShim = {
+      width: context.drawingBufferWidth,
+      height: context.drawingBufferHeight,
+      style: {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      clientHeight: context.drawingBufferHeight,
+      getContext: () => context
+    };
+    setCanvas(canvasShim);
+  }, []);
+
+  if (width > 0 && height > 0 && canvas) {
+    // Overwrite onCreated to apply RN bindings
+    const 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);
+
+      state.gl.render = (scene, camera) => {
+        renderFrame(scene, camera);
+        context.endFrameEXP();
+      };
 
-  if (width > 0 && height > 0 && context) {
-    const store = createRoot(context, { ...canvasProps,
+      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
+    };
+
+    createRoot(canvas, { ...canvasProps,
+      // expo-gl can only render at native dpr/resolution
+      // https://github.com/expo/expo-three/issues/39
+      dpr: PixelRatio.get(),
       size: {
         width,
         height
       },
-      events: events || createTouchEvents
+      events: events || createTouchEvents,
+      onCreated
     }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React.createElement(React.Suspense, {
@@ -506,13 +315,11 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
         set: setBlock
       })
     }, children)));
-    const state = store.getState();
-    setBind(state.events.connected.getEventHandlers());
   }
 
   React.useEffect(() => {
-    return () => unmountComponentAtNode(context);
-  }, [context]);
+    return () => unmountComponentAtNode(canvas);
+  }, [canvas]);
   return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
     ref: forwardedRef,
     onLayout: onLayout,
@@ -521,17 +328,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       ...style
     }
   }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
-    nativeRef_EXPERIMENTAL: ref => {
-      if (nativeRef_EXPERIMENTAL && !nativeRef_EXPERIMENTAL.current) {
-        nativeRef_EXPERIMENTAL.current = ref;
-      }
-    },
-    onContextCreate: async gl => {
-      await (onContextCreate == null ? void 0 : onContextCreate(gl));
-      setContext(gl);
-    },
+    onContextCreate: onContextCreate,
     style: StyleSheet.absoluteFill
   }));
 });
 
-export { Canvas, roots as _roots, act, advance, applyProps, createPortal, createRoot, createTouchEvents as events, invalidate, reconciler, render, unmountComponentAtNode, useLoader };
+export { Canvas, createTouchEvents as events, useLoader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.0-beta-03",
+  "version": "8.0.0-beta-04",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -47,6 +47,7 @@
     "expo-asset": "^8.4.3",
     "expo-file-system": "^13.0.3",
     "expo-gl": "^11.0.3",
+    "expo": "^43.0.1",
     "react-merge-refs": "^1.1.0",
     "react-reconciler": "^0.27.0-rc.0",
     "react-use-measure": "^2.1.1",

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

@@ -1,36 +0,0 @@
-/// <reference types="react-reconciler" />
-import * as THREE from 'three';
-import * as React from 'react';
-import { UseStore } from 'zustand';
-import { dispose } from '../core/utils';
-import { Renderer, StoreProps, context, RootState, Size } from '../core/store';
-import { extend, Root } from '../core/renderer';
-import { addEffect, addAfterEffect, addTail } from '../core/loop';
-import { createTouchEvents as events } from './events';
-import { EventManager } from '../core/events';
-import { View } from 'react-native';
-import { ExpoWebGLRenderingContext } from 'expo-gl';
-export declare type GLContext = ExpoWebGLRenderingContext | WebGLRenderingContext;
-declare type Properties<T> = Pick<T, {
-    [K in keyof T]: T[K] extends (_: any) => any ? never : K;
-}[keyof T]>;
-declare type GLProps = Renderer | ((canvas: HTMLCanvasElement, context: GLContext) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
-declare const roots: Map<GLContext, Root>;
-declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
-declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: typeof import("../core/utils").applyProps;
-export declare type RenderProps<TView extends View> = Omit<StoreProps, 'gl' | 'events' | 'size' | 'dpr'> & {
-    gl?: GLProps;
-    events?: (store: UseStore<RootState>) => EventManager<TView>;
-    size?: Size;
-    onCreated?: (state: RootState) => void;
-};
-declare function createRoot<TView extends View>(context: GLContext, config?: RenderProps<TView>): {
-    render: (element: React.ReactNode) => UseStore<RootState>;
-    unmount: () => void;
-};
-declare function render<TView extends View>(element: React.ReactNode, context: GLContext, config?: RenderProps<TView>): UseStore<RootState>;
-declare function unmountComponentAtNode(context: GLContext, callback?: (context: GLContext) => void): void;
-declare const act: any;
-declare function createPortal(children: React.ReactNode, container: THREE.Object3D): React.ReactNode;
-export * from './hooks';
-export { context, render, createRoot, unmountComponentAtNode, createPortal, events, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, act, roots as _roots, };