@react-three/fiber 8.0.0-alpha-09 → 8.0.0-beta-03

package/native/dist/react-three-fiber-native.cjs.d.ts

@@ -0,0 +1 @@
+export * from "../../dist/declarations/src/native";

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -0,0 +1,589 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var hooks = require('../../dist/hooks-6526f63c.cjs.dev.js');
+var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var THREE = require('three');
+var reactNative = require('react-native');
+var expoGl = require('expo-gl');
+var constants = require('react-reconciler/constants');
+var Pressability = require('react-native/Libraries/Pressability/Pressability');
+var expoAsset = require('expo-asset');
+var expoFileSystem = require('expo-file-system');
+var base64Arraybuffer = require('base64-arraybuffer');
+var suspendReact = require('suspend-react');
+require('react-reconciler');
+require('scheduler');
+require('zustand');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
+
+// @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 constants.DiscreteEventPriority;
+
+    case EVENTS.HOVERIN:
+    case EVENTS.HOVEROUT:
+    case EVENTS.PRESSMOVE:
+      return constants.ContinuousEventPriority;
+
+    default:
+      return constants.DefaultEventPriority;
+  }
+}
+function createTouchEvents(store) {
+  const {
+    handlePointer
+  } = hooks.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__default['default'](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.
+ */
+
+const getAsset = input => {
+  if (input instanceof expoAsset.Asset) return input;
+
+  switch (typeof input) {
+    case 'string':
+      return expoAsset.Asset.fromURI(input);
+
+    case 'number':
+      return expoAsset.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 => expoFileSystem.readAsStringAsync(localUri, {
+  encoding: 'base64'
+}).then(base64Arraybuffer.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__namespace.TextureLoader) {
+        const asset = await getAsset(url).downloadAsync();
+        const texture = new THREE__namespace.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__namespace.CubeTextureLoader) {
+        const texture = new THREE__namespace.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, hooks.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, hooks.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 = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: hooks.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 suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.clear([Proto, ...keys]);
+};
+
+const roots = new Map();
+const {
+  invalidate,
+  advance
+} = hooks.createLoop(roots);
+const {
+  reconciler,
+  applyProps
+} = hooks.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 (hooks.isRenderer(customRenderer)) return customRenderer; // Create renderer and pass our canvas and its context
+
+  const renderer = new THREE__namespace.WebGLRenderer({
+    powerPreference: 'high-performance',
+    antialias: true,
+    alpha: true,
+    ...gl,
+    canvas,
+    context
+  }); // Set color management
+
+  renderer.outputEncoding = THREE__namespace.sRGBEncoding;
+  renderer.toneMapping = THREE__namespace.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;
+};
+
+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 = hooks.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: reactNative.PixelRatio.get()
+        });
+        const state = store.getState(); // Create renderer
+
+        fiber = reconciler.createContainer(store, constants.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);
+        }
+      }
+
+      if (store && fiber) {
+        reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+          store: store,
+          element: element,
+          onCreated: onCreated
+        }), fiber, null, () => undefined);
+        return store;
+      } else {
+        throw 'Error creating root!';
+      }
+    },
+    unmount: () => unmountComponentAtNode(context)
+  };
+}
+
+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__namespace.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__namespace.createElement(hooks.context.Provider, {
+    value: store
+  }, element);
+}
+
+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();
+            hooks.dispose(state);
+            roots.delete(context);
+            if (callback) callback(context);
+          } catch (e) {
+            /* ... */
+          }
+        }, 500);
+      }
+    });
+  }
+}
+
+const act = React__namespace.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({
+  set
+}) {
+  React__namespace.useLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
+
+class ErrorBoundary extends React__namespace.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__namespace.forwardRef(({
+  children,
+  fallback,
+  style,
+  events,
+  nativeRef_EXPERIMENTAL,
+  onContextCreate,
+  ...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__namespace.useMemo(() => hooks.extend(THREE__namespace), []);
+  const [{
+    width,
+    height
+  }, setSize] = React__namespace.useState({
+    width: 0,
+    height: 0
+  });
+  const [context, setContext] = React__namespace.useState(null);
+  const [bind, setBind] = React__namespace.useState();
+  const canvasProps = hooks.pick(props, CANVAS_PROPS);
+  const viewProps = hooks.omit(props, CANVAS_PROPS);
+  const [block, setBlock] = React__namespace.useState(false);
+  const [error, setError] = React__namespace.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__namespace.useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setSize({
+      width,
+      height
+    });
+  }, []);
+
+  if (width > 0 && height > 0 && context) {
+    const store = createRoot(context, { ...canvasProps,
+      size: {
+        width,
+        height
+      },
+      events: events || createTouchEvents
+    }).render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+      set: setError
+    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+      fallback: /*#__PURE__*/React__namespace.createElement(Block, {
+        set: setBlock
+      })
+    }, children)));
+    const state = store.getState();
+    setBind(state.events.connected.getEventHandlers());
+  }
+
+  React__namespace.useEffect(() => {
+    return () => unmountComponentAtNode(context);
+  }, [context]);
+  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
+    ref: forwardedRef,
+    onLayout: onLayout,
+    style: {
+      flex: 1,
+      ...style
+    }
+  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.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);
+    },
+    style: reactNative.StyleSheet.absoluteFill
+  }));
+});
+
+exports.ReactThreeFiber = hooks.threeTypes;
+exports.addAfterEffect = hooks.addAfterEffect;
+exports.addEffect = hooks.addEffect;
+exports.addTail = hooks.addTail;
+exports.context = hooks.context;
+exports.dispose = hooks.dispose;
+exports.extend = hooks.extend;
+exports.useFrame = hooks.useFrame;
+exports.useGraph = hooks.useGraph;
+exports.useStore = hooks.useStore;
+exports.useThree = hooks.useThree;
+exports.Canvas = Canvas;
+exports._roots = roots;
+exports.act = act;
+exports.advance = advance;
+exports.applyProps = applyProps;
+exports.createPortal = createPortal;
+exports.createRoot = createRoot;
+exports.events = createTouchEvents;
+exports.invalidate = invalidate;
+exports.reconciler = reconciler;
+exports.render = render;
+exports.unmountComponentAtNode = unmountComponentAtNode;
+exports.useLoader = useLoader;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./react-three-fiber-native.cjs.prod.js");
+} else {
+  module.exports = require("./react-three-fiber-native.cjs.dev.js");
+}