@react-three/fiber - npm Package Compare versions

Comparing version 6.0.0-alpha.12 to 6.0.0-alpha.13

dist/declarations/src/three-types.d.ts

@@ -14,3 +14,3 @@ /// <reference types="react" />
 export declare type Vector4 = THREE.Vector4 | Parameters<THREE.Vector4['set']> | Parameters<THREE.Vector4['setScalar']>[0];
-export declare type Color = THREE.Color | number | string;
+export declare type Color = ConstructorParameters<typeof THREE.Color> | THREE.Color | number | string;
 export declare type ColorArray = typeof THREE.Color | Parameters<THREE.Color['set']>;
@@ -17,0 +17,0 @@ export declare type Layers = THREE.Layers | Parameters<THREE.Layers['set']>;

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

@@ -7,3 +7,4 @@ import * as React from 'react';
     resize?: ResizeOptions;
+    context?: React.Context<any>[];
 }
-export declare function Canvas({ children, resize, style, className, ...props }: Props): JSX.Element;
+export declare function Canvas({ children, resize, style, className, context, ...props }: Props): JSX.Element;

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

@@ -240,4 +240,10 @@ 'use strict';
           if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.Layers)) {
-            // If value is an array it has got to be the set function
-            if (Array.isArray(value)) targetProp.set(...value); // Test again target.copy(class) next ...
+            // If value is an array
+            if (Array.isArray(value)) {
+              if (targetProp.fromArray) {
+                targetProp.fromArray(value);
+              } else {
+                targetProp.set(...value);
+              }
+            } // Test again target.copy(class) next ...
             else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
@@ -256,2 +262,3 @@ targetProp.copy(value);
                 } // Else, just overwrite the value
+
           } else {
@@ -1335,2 +1342,19 @@ currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
 
+function useContextBridge(...contexts) {
+  const cRef = React.useRef([]);
+  cRef.current = contexts.map(context => React.useContext(context));
+  return React.useMemo(() => ({
+    children
+  }) => contexts.reduceRight((acc, Context, i) => /*#__PURE__*/React.createElement(Context.Provider, {
+    value: cRef.current[i],
+    children: acc
+  }), children
+  /*
+   * done this way in reference to:
+   * https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44572#issuecomment-625878049
+   * https://github.com/microsoft/TypeScript/issues/14729
+   */
+  ), []);
+}
+
 function Canvas({
@@ -1341,4 +1365,6 @@ children,
   className,
+  context = [],
   ...props
 }) {
+  const Bridge = useContextBridge(...context);
   const [ref, size] = useMeasure__default['default']({
@@ -1355,3 +1381,3 @@ scroll: true,
     if (size.width > 0 && size.height > 0) {
-      render(children, canvas.current, { ...props,
+      render( /*#__PURE__*/React.createElement(Bridge, null, children), canvas.current, { ...props,
         size,
@@ -1382,4 +1408,5 @@ events: createDOMEvents
 function useThree(selector = state => state, equalityFn) {
-  console.log("jhlkh");
-  return React.useContext(context)(selector, equalityFn);
+  const useStore = React.useContext(context);
+  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`;
+  return useStore(selector, equalityFn);
 }
@@ -1386,0 +1413,0 @@ function useFrame(callback, renderPriority = 0) {

dist/react-three-fiber.cjs.prod.js

@@ -240,4 +240,10 @@ 'use strict';
           if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.Layers)) {
-            // If value is an array it has got to be the set function
-            if (Array.isArray(value)) targetProp.set(...value); // Test again target.copy(class) next ...
+            // If value is an array
+            if (Array.isArray(value)) {
+              if (targetProp.fromArray) {
+                targetProp.fromArray(value);
+              } else {
+                targetProp.set(...value);
+              }
+            } // Test again target.copy(class) next ...
             else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
@@ -256,2 +262,3 @@ targetProp.copy(value);
                 } // Else, just overwrite the value
+
           } else {
@@ -1335,2 +1342,19 @@ currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
 
+function useContextBridge(...contexts) {
+  const cRef = React.useRef([]);
+  cRef.current = contexts.map(context => React.useContext(context));
+  return React.useMemo(() => ({
+    children
+  }) => contexts.reduceRight((acc, Context, i) => /*#__PURE__*/React.createElement(Context.Provider, {
+    value: cRef.current[i],
+    children: acc
+  }), children
+  /*
+   * done this way in reference to:
+   * https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44572#issuecomment-625878049
+   * https://github.com/microsoft/TypeScript/issues/14729
+   */
+  ), []);
+}
+
 function Canvas({
@@ -1341,4 +1365,6 @@ children,
   className,
+  context = [],
   ...props
 }) {
+  const Bridge = useContextBridge(...context);
   const [ref, size] = useMeasure__default['default']({
@@ -1355,3 +1381,3 @@ scroll: true,
     if (size.width > 0 && size.height > 0) {
-      render(children, canvas.current, { ...props,
+      render( /*#__PURE__*/React.createElement(Bridge, null, children), canvas.current, { ...props,
         size,
@@ -1382,4 +1408,5 @@ events: createDOMEvents
 function useThree(selector = state => state, equalityFn) {
-  console.log("jhlkh");
-  return React.useContext(context)(selector, equalityFn);
+  const useStore = React.useContext(context);
+  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`;
+  return useStore(selector, equalityFn);
 }
@@ -1386,0 +1413,0 @@ function useFrame(callback, renderPriority = 0) {

dist/react-three-fiber.esm.js

@@ -5,3 +5,3 @@ import * as THREE from 'three';
 import { unstable_now, unstable_runWithPriority, unstable_IdlePriority } from 'scheduler';
-import { createContext, useRef, useLayoutEffect, useEffect, createElement, useContext, useMemo } from 'react';
+import { createContext, useMemo, createElement, useRef, useLayoutEffect, useEffect, useContext } from 'react';
 import create from 'zustand';
@@ -210,4 +210,10 @@ import shallow from 'zustand/shallow';
           if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof Layers)) {
-            // If value is an array it has got to be the set function
-            if (Array.isArray(value)) targetProp.set(...value); // Test again target.copy(class) next ...
+            // If value is an array
+            if (Array.isArray(value)) {
+              if (targetProp.fromArray) {
+                targetProp.fromArray(value);
+              } else {
+                targetProp.set(...value);
+              }
+            } // Test again target.copy(class) next ...
             else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
@@ -226,2 +232,3 @@ targetProp.copy(value);
                 } // Else, just overwrite the value
+
           } else {
@@ -1305,2 +1312,19 @@ currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
 
+function useContextBridge(...contexts) {
+  const cRef = useRef([]);
+  cRef.current = contexts.map(context => useContext(context));
+  return useMemo(() => ({
+    children
+  }) => contexts.reduceRight((acc, Context, i) => /*#__PURE__*/createElement(Context.Provider, {
+    value: cRef.current[i],
+    children: acc
+  }), children
+  /*
+   * done this way in reference to:
+   * https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44572#issuecomment-625878049
+   * https://github.com/microsoft/TypeScript/issues/14729
+   */
+  ), []);
+}
+
 function Canvas({
@@ -1311,4 +1335,6 @@ children,
   className,
+  context = [],
   ...props
 }) {
+  const Bridge = useContextBridge(...context);
   const [ref, size] = useMeasure({
@@ -1325,3 +1351,3 @@ scroll: true,
     if (size.width > 0 && size.height > 0) {
-      render(children, canvas.current, { ...props,
+      render( /*#__PURE__*/createElement(Bridge, null, children), canvas.current, { ...props,
         size,
@@ -1352,4 +1378,5 @@ events: createDOMEvents
 function useThree(selector = state => state, equalityFn) {
-  console.log("jhlkh");
-  return useContext(context)(selector, equalityFn);
+  const useStore = useContext(context);
+  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`;
+  return useStore(selector, equalityFn);
 }
@@ -1356,0 +1383,0 @@ function useFrame(callback, renderPriority = 0) {

package.json

 {
   "name": "@react-three/fiber",
-  "version": "6.0.0-alpha.12",
+  "version": "6.0.0-alpha.13",
   "description": "A React renderer for Threejs",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

201372

increased by1.37%

Lines of code

4772

increased by1.62%

No dependency changes