@react-three/fiber 8.0.0-alpha.0 → 8.0.0-beta-04

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

@@ -0,0 +1,336 @@
+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 { 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';
+
+/**
+ * Generates an asset based on input type.
+ */
+
+const getAsset = input => {
+  if (input instanceof Asset) return input;
+
+  switch (typeof input) {
+    case 'string':
+      return Asset.fromURI(input);
+
+    case 'number':
+      return Asset.fromModule(input);
+
+    default:
+      throw 'Invalid asset! Must be a URI or module.';
+  }
+};
+/**
+ * Downloads from a local URI and decodes into an ArrayBuffer.
+ */
+
+
+const toBuffer = async localUri => readAsStringAsync(localUri, {
+  encoding: 'base64'
+}).then(decode);
+
+function loadingFn(extensions, onProgress) {
+  return function (Proto, ...input) {
+    // Construct new loader and run extensions
+    const loader = new Proto();
+    if (extensions) extensions(loader); // Go through the urls and load them
+
+    return Promise.all(input.map(entry => new Promise(async (res, reject) => {
+      // Construct URL
+      const url = typeof entry === 'string' ? loader.path + entry : entry; // There's no Image in native, so we create & pass a data texture instead
+
+      if (loader instanceof THREE.TextureLoader) {
+        const asset = await getAsset(url).downloadAsync();
+        const texture = new THREE.Texture();
+        texture.isDataTexture = true;
+        texture.image = {
+          data: asset,
+          width: asset.width,
+          height: asset.height
+        };
+        texture.needsUpdate = true;
+        return res(texture);
+      } // Do similar for CubeTextures
+
+
+      if (loader instanceof THREE.CubeTextureLoader) {
+        const texture = new THREE.CubeTexture();
+        texture.isDataTexture = true;
+        texture.images = await Promise.all(url.map(async src => {
+          const asset = await getAsset(src).downloadAsync();
+          return {
+            data: asset,
+            width: asset.width,
+            height: asset.height
+          };
+        }));
+        texture.needsUpdate = true;
+        return res(texture);
+      } // If asset is external and not an Image, load it
+
+
+      if (url.startsWith != null && url.startsWith('http') && Proto.prototype.hasOwnProperty('load')) {
+        return loader.load(entry, data => {
+          if (data.scene) Object.assign(data, buildGraph(data.scene));
+          res(data);
+        }, onProgress, error => reject(`Could not load ${url}: ${error.message}`));
+      } // Otherwise, create a localUri and a file buffer
+
+
+      const {
+        localUri
+      } = await getAsset(url).downloadAsync();
+      const arrayBuffer = await toBuffer(localUri); // Parse it
+
+      const parsed = loader.parse == null ? void 0 : loader.parse(arrayBuffer, undefined, data => {
+        if (data.scene) Object.assign(data, buildGraph(data.scene));
+        res(data);
+      }, error => reject(`Could not load ${url}: ${error.message}`)); // Respect synchronous parsers which don't have callbacks
+
+      if (parsed) return res(parsed);
+    })));
+  };
+}
+
+function useLoader(Proto, input, extensions, onProgress) {
+  // Use suspense to load async assets
+  const keys = Array.isArray(input) ? input : [input];
+  const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: is.equ
+  }); // Return the object/s
+
+  return Array.isArray(input) ? results : results[0];
+}
+
+useLoader.preload = function (Proto, input, extensions) {
+  const keys = Array.isArray(input) ? input : [input];
+  return preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return clear([Proto, ...keys]);
+};
+
+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);
+
+  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 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();
+
+      if (events.connected) {
+        events.connected.reset();
+        set(state => ({
+          events: { ...state.events,
+            connected: false
+          }
+        }));
+      }
+    }
+  };
+}
+
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+
+function Block({
+  set
+}) {
+  React.useLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      error: false
+    };
+  }
+
+  componentDidCatch(error) {
+    this.props.set(error);
+  }
+
+  render() {
+    return this.state.error ? null : this.props.children;
+  }
+
+}
+
+ErrorBoundary.getDerivedStateFromError = () => ({
+  error: true
+});
+
+const Canvas = /*#__PURE__*/React.forwardRef(({
+  children,
+  fallback,
+  style,
+  events,
+  ...props
+}, forwardedRef) => {
+  // Create a known catalogue of Threejs-native elements
+  // This will include the entire THREE namespace by default, users can extend
+  // their own elements by using the createRoot API instead
+  React.useMemo(() => extend(THREE), []);
+  const [{
+    width,
+    height
+  }, setSize] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const [canvas, setCanvas] = React.useState(null);
+  const [bind, setBind] = React.useState();
+  const canvasProps = pick(props, CANVAS_PROPS);
+  const viewProps = omit(props, CANVAS_PROPS);
+  const [block, setBlock] = React.useState(false);
+  const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
+
+  if (block) throw block; // Throw exception outwards if anything within canvas throws
+
+  if (error) throw error;
+  const onLayout = React.useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setSize({
+      width,
+      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();
+      };
+
+      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,
+      onCreated
+    }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+      set: setError
+    }, /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement(Block, {
+        set: setBlock
+      })
+    }, children)));
+  }
+
+  React.useEffect(() => {
+    return () => unmountComponentAtNode(canvas);
+  }, [canvas]);
+  return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
+    ref: forwardedRef,
+    onLayout: onLayout,
+    style: {
+      flex: 1,
+      ...style
+    }
+  }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
+    onContextCreate: onContextCreate,
+    style: StyleSheet.absoluteFill
+  }));
+});
+
+export { Canvas, createTouchEvents as events, useLoader };

package/native/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "dist/react-three-fiber-native.cjs.js",
+  "module": "dist/react-three-fiber-native.esm.js",
+  "types": "dist/react-three-fiber-native.cjs.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.0-alpha.00",
+  "version": "8.0.0-beta-04",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -12,7 +12,8 @@
   "author": "Paul Henschel (https://github.com/drcmda)",
   "license": "MIT",
   "maintainers": [
-    "Josh Ellis (https://github.com/joshuaellis)"
+    "Josh Ellis (https://github.com/joshuaellis)",
+    "Cody Bennett (https://github.com/codyjasonbennett)"
   ],
   "bugs": {
     "url": "https://github.com/pmndrs/react-three-fiber/issues"
@@ -29,11 +30,12 @@
   "main": "dist/react-three-fiber.cjs.js",
   "module": "dist/react-three-fiber.esm.js",
   "types": "dist/react-three-fiber.cjs.d.ts",
-  "react-native": "dist/native.js",
+  "react-native": "native/dist/react-three-fiber-native.cjs.js",
   "sideEffects": false,
   "preconstruct": {
     "entrypoints": [
-      "index.tsx"
+      "index.tsx",
+      "native.tsx"
     ]
   },
   "scripts": {
@@ -41,23 +43,32 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
+    "base64-arraybuffer": "^1.0.1",
+    "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-alpha-1314299c7-20210901",
-    "react-use-measure": "^2.0.4",
+    "react-reconciler": "^0.27.0-rc.0",
+    "react-use-measure": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "scheduler": "^0.21.0-alpha-1314299c7-20210901",
-    "use-asset": "^1.0.4",
+    "scheduler": "0.21.0-rc.0",
+    "suspend-react": "^0.0.8",
     "utility-types": "^3.10.0",
     "zustand": "^3.5.10"
   },
   "peerDependencies": {
     "react": ">=18.0",
     "react-dom": ">=18.0",
+    "react-native": ">=0.64",
     "three": ">=0.132"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
+    },
+    "react-native": {
+      "optional": true
     }
   }
 }

package/readme.md

@@ -156,7 +156,7 @@ ReactDOM.render(
 You need to be versed in both React and Threejs before rushing into this. If you are unsure about React consult the official [React docs](https://reactjs.org/docs/getting-started.html), especially [the section about hooks](https://reactjs.org/docs/hooks-reference.html). As for Threejs, make sure you at least glance over the following links:
 
 1. Make sure you have a [basic grasp of Threejs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.
-2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/react-spring/react-three-fiber#what-does-it-look-like).
+2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).
 3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.
 4. Try changing some values, scroll though our [Api](/markdown/api.md) to see what the various settings and hooks do.
 
@@ -171,15 +171,15 @@ Some reading material:
 
 # Ecosystem
 
-- [`@react-three/gltfjsx`](https://github.com/react-spring/gltfjsx) – turns GLTFs into JSX components
-- [`@react-three/drei`](https://github.com/react-spring/drei) – useful helpers for react-three-fiber
-- [`@react-three/postprocessing`](https://github.com/react-spring/react-postprocessing) – post-processing effects
-- [`@react-three/flex`](https://github.com/react-spring/react-three-flex) – flexbox for react-three-fiber
-- [`@react-three/xr`](https://github.com/react-spring/react-xr) – VR/AR controllers and events
-- [`@react-three/cannon`](https://github.com/react-spring/use-cannon) – physics based hooks
-- [`zustand`](https://github.com/react-spring/zustand) – state management
-- [`react-spring`](https://github.com/react-spring/react-spring) – a spring-physics-based animation library
-- [`react-use-gesture`](https://github.com/react-spring/react-use-gesture) – mouse/touch gestures
+- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) – turns GLTFs into JSX components
+- [`@react-three/drei`](https://github.com/pmndrs/drei) – useful helpers for react-three-fiber
+- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) – post-processing effects
+- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) – flexbox for react-three-fiber
+- [`@react-three/xr`](https://github.com/pmndrs/react-xr) – VR/AR controllers and events
+- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) – physics based hooks
+- [`zustand`](https://github.com/pmndrs/zustand) – state management
+- [`react-spring`](https://github.com/pmndrs/react-spring) – a spring-physics-based animation library
+- [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) – mouse/touch gestures
 
 # How to contribute
 

package/__mocks__/react-use-measure/index.ts

@@ -1,22 +0,0 @@
-import * as React from 'react'
-
-export default function useMeasure() {
-  const element = React.useRef<HTMLElement | null>(null)
-  const [bounds] = React.useState({
-    left: 0,
-    top: 0,
-    width: 1280,
-    height: 800,
-    bottom: 0,
-    right: 0,
-    x: 0,
-    y: 0,
-  })
-  const ref = (node: HTMLElement) => {
-    if (!node || element.current) {
-      return
-    }
-    element.current = node
-  }
-  return [ref, bounds]
-}

package/dist/declarations/src/core/is.d.ts

@@ -1,9 +0,0 @@
-export declare const is: {
-    obj: (a: any) => boolean;
-    fun: (a: any) => a is Function;
-    str: (a: any) => a is string;
-    num: (a: any) => a is number;
-    und: (a: any) => boolean;
-    arr: (a: any) => boolean;
-    equ(a: any, b: any): boolean;
-};

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

@@ -1,30 +0,0 @@
-/// <reference types="react-reconciler" />
-import * as THREE from 'three';
-import * as React from 'react';
-import { UseStore } from 'zustand';
-import { StoreProps, context, RootState, Size } from '../core/store';
-import { extend, Root } from '../core/renderer';
-import { addEffect, addAfterEffect, addTail } from '../core/loop';
-import { createPointerEvents as events } from './events';
-import { Canvas } from './Canvas';
-import { EventManager } from '../core/events';
-declare const roots: Map<Element, 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: (instance: import("../core/renderer").Instance, newProps: import("../core/renderer").InstanceProps, oldProps?: import("../core/renderer").InstanceProps, accumulative?: boolean) => void;
-export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
-    gl?: THREE.WebGLRenderer | THREE.WebGLRendererParameters;
-    events?: (store: UseStore<RootState>) => EventManager<TCanvas>;
-    size?: Size;
-    onCreated?: (state: RootState) => void;
-};
-declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, { gl, size, events, onCreated, ...props }?: RenderProps<TCanvas>): UseStore<RootState>;
-declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
-declare function dispose<TObj extends {
-    dispose?: () => void;
-    type?: string;
-    [key: string]: any;
-}>(obj: TObj): void;
-declare const act: (callback: () => import("react-reconciler").Thenable<unknown>) => import("react-reconciler").Thenable<void>;
-declare function createPortal(children: React.ReactNode, container: THREE.Object3D, implementation?: any, key?: any): React.ReactNode;
-export * from '../core/hooks';
-export { context, render, unmountComponentAtNode, createPortal, events, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, Canvas, act, roots as _roots, };