@react-three/fiber 7.0.28 → 7.0.29

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

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from './index';
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'events'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-    events?: (store: UseBoundStore<RootState>) => EventManager<any>;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from './index';
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'events'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+    events?: (store: UseBoundStore<RootState>) => EventManager<any>;
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

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

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import type { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import type { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

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

@@ -1,36 +1,36 @@
-/// <reference types="react-reconciler" />
-import * as THREE from 'three';
-import * as React from 'react';
-import { UseBoundStore } from 'zustand';
-import { Renderer, 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 modes: readonly ["legacy", "blocking", "concurrent"];
-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, data: import("../core/renderer").DiffSet | import("../core/renderer").InstanceProps) => import("../core/renderer").Instance;
-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) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
-export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
-    gl?: GLProps;
-    events?: (store: UseBoundStore<RootState>) => EventManager<TCanvas>;
-    size?: Size;
-    mode?: typeof modes[number];
-    onCreated?: (state: RootState) => void;
-};
-declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, { gl, size, mode, events, onCreated, ...props }?: RenderProps<TCanvas>): UseBoundStore<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): 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, };
+/// <reference types="react-reconciler" />
+import * as THREE from 'three';
+import * as React from 'react';
+import { UseBoundStore } from 'zustand';
+import { Renderer, 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 modes: readonly ["legacy", "blocking", "concurrent"];
+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, data: import("../core/renderer").DiffSet | import("../core/renderer").InstanceProps) => import("../core/renderer").Instance;
+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) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
+export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
+    gl?: GLProps;
+    events?: (store: UseBoundStore<RootState>) => EventManager<TCanvas>;
+    size?: Size;
+    mode?: typeof modes[number];
+    onCreated?: (state: RootState) => void;
+};
+declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, { gl, size, mode, events, onCreated, ...props }?: RenderProps<TCanvas>): UseBoundStore<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): 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, };

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

@@ -1 +1,11 @@
-export * from "../../dist/declarations/src/native";
+// are you seeing an error that a default export doesn't exist but your source file has a default export?
+// you should run `yarn` or `yarn preconstruct dev` if preconstruct dev isn't in your postinstall hook
+
+// curious why you need to?
+// this file exists so that you can import from the entrypoint normally
+// except that it points to your source file and you don't need to run build constantly
+// which means we need to re-export all of the modules from your source file
+// and since export * doesn't include default exports, we need to read your source file
+// to check for a default export and re-export it if it exists
+// it's not ideal, but it works pretty well ¯\_(ツ)_/¯
+export * from "../../src/native";

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

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-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");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../../..", "../..");
+
+// this re-exports the source file
+module.exports = require("../../src/native.tsx");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "7.0.28",
+  "version": "7.0.29",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -30,7 +30,6 @@
   "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",
   "sideEffects": false,
   "preconstruct": {
     "entrypoints": [

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

@@ -1,369 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var THREE = require('three');
-var expoAsset = require('expo-asset');
-var index = require('../../dist/index-9ced08b3.cjs.dev.js');
-var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var reactNative = require('react-native');
-var expoGl = require('expo-gl');
-var Pressability = require('react-native/Libraries/Pressability/Pressability');
-require('react-reconciler/constants');
-require('zustand');
-require('react-reconciler');
-require('scheduler');
-require('suspend-react');
-
-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 THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
-var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
-
-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'
-};
-/** Default R3F event manager for react-native */
-
-function createTouchEvents(store) {
-  const {
-    handlePointer
-  } = index.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(DOM_EVENTS[name]);
-    return callback(event.nativeEvent);
-  };
-
-  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.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__default["default"](events == null ? void 0 : events.handlers);
-      set(state => ({
-        events: { ...state.events,
-          connected
-        }
-      }));
-      const handlers = connected.getEventHandlers();
-      return handlers;
-    },
-    disconnect: () => {
-      const {
-        set,
-        events
-      } = store.getState();
-
-      if (events.connected) {
-        events.connected.reset();
-        set(state => ({
-          events: { ...state.events,
-            connected: undefined
-          }
-        }));
-      }
-    }
-  };
-}
-
-/**
- * A native canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
-  children,
-  style,
-  gl,
-  events = createTouchEvents,
-  shadows,
-  linear,
-  flat,
-  legacy,
-  orthographic,
-  frameloop,
-  performance,
-  raycaster,
-  camera,
-  onPointerMissed,
-  onCreated,
-  ...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(() => index.extend(THREE__namespace), []);
-  const [{
-    width,
-    height
-  }, setSize] = React__namespace.useState({
-    width: 0,
-    height: 0
-  });
-  const [canvas, setCanvas] = React__namespace.useState(null);
-  const [bind, setBind] = React__namespace.useState();
-  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
-  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 viewRef = React__namespace.useRef(null);
-  const root = React__namespace.useRef(null);
-  const onLayout = React__namespace.useCallback(e => {
-    const {
-      width,
-      height
-    } = e.nativeEvent.layout;
-    setSize({
-      width,
-      height
-    });
-  }, []);
-  const onContextCreate = React__namespace.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) {
-    if (!root.current) root.current = index.createRoot(canvas);
-    root.current.configure({
-      gl,
-      events,
-      shadows,
-      linear,
-      flat,
-      legacy,
-      orthographic,
-      frameloop,
-      performance,
-      raycaster,
-      camera,
-      // expo-gl can only render at native dpr/resolution
-      // https://github.com/expo/expo-three/issues/39
-      dpr: reactNative.PixelRatio.get(),
-      size: {
-        width,
-        height
-      },
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      // Overwrite onCreated to apply RN bindings
-      onCreated: state => {
-        // Bind events after creation
-        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-        setBind(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 onCreated == null ? void 0 : onCreated(state);
-      }
-    });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-        set: setBlock
-      })
-    }, children)));
-  }
-
-  React__namespace.useEffect(() => {
-    if (canvas) {
-      return () => index.unmountComponentAtNode(canvas);
-    }
-  }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
-    ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
-    onLayout: onLayout,
-    style: {
-      flex: 1,
-      ...style
-    }
-  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
-    onContextCreate: onContextCreate,
-    style: reactNative.StyleSheet.absoluteFill
-  }));
-});
-
-/**
- * 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.';
-  }
-}; // Don't pre-process urls, let expo-asset generate an absolute URL
-
-
-const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
-
-THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
-
-
-THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
-  const texture = new THREE__namespace.Texture(); // @ts-ignore
-
-  texture.isDataTexture = true;
-  getAsset(url).downloadAsync().then(asset => {
-    texture.image = {
-      data: asset,
-      width: asset.width,
-      height: asset.height
-    };
-    texture.needsUpdate = true;
-    onLoad == null ? void 0 : onLoad(texture);
-  }).catch(onError);
-  return texture;
-}; // Fetches assets via XMLHttpRequest
-
-
-THREE__namespace.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
-  if (this.path) url = this.path + url;
-  const request = new XMLHttpRequest();
-  getAsset(url).downloadAsync().then(asset => {
-    request.open('GET', asset.uri, true);
-    request.addEventListener('load', event => {
-      if (request.status === 200) {
-        onLoad == null ? void 0 : onLoad(request.response);
-        this.manager.itemEnd(url);
-      } else {
-        onError == null ? void 0 : onError(event);
-        this.manager.itemError(url);
-        this.manager.itemEnd(url);
-      }
-    }, false);
-    request.addEventListener('progress', event => {
-      onProgress == null ? void 0 : onProgress(event);
-    }, false);
-    request.addEventListener('error', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    request.addEventListener('abort', event => {
-      onError == null ? void 0 : onError(event);
-      this.manager.itemError(url);
-      this.manager.itemEnd(url);
-    }, false);
-    if (this.responseType) request.responseType = this.responseType;
-    if (this.withCredentials) request.withCredentials = this.withCredentials;
-
-    for (const header in this.requestHeader) {
-      request.setRequestHeader(header, this.requestHeader[header]);
-    }
-
-    request.send(null);
-    this.manager.itemStart(url);
-  });
-  return request;
-};
-
-exports.ReactThreeFiber = index.threeTypes;
-exports._roots = index.roots;
-exports.act = index.act;
-exports.addAfterEffect = index.addAfterEffect;
-exports.addEffect = index.addEffect;
-exports.addTail = index.addTail;
-exports.advance = index.advance;
-exports.applyProps = index.applyProps;
-exports.context = index.context;
-exports.createPortal = index.createPortal;
-exports.createRoot = index.createRoot;
-exports.dispose = index.dispose;
-exports.extend = index.extend;
-exports.getRootState = index.getRootState;
-exports.invalidate = index.invalidate;
-exports.reconciler = index.reconciler;
-exports.render = index.render;
-exports.unmountComponentAtNode = index.unmountComponentAtNode;
-exports.useFrame = index.useFrame;
-exports.useGraph = index.useGraph;
-exports.useLoader = index.useLoader;
-exports.useStore = index.useStore;
-exports.useThree = index.useThree;
-exports.Canvas = Canvas;
-exports.events = createTouchEvents;