@react-three/fiber 9.3.0 → 9.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 9.4.0
+
+### Minor Changes
+
+- f0976dc14a2d3203af267d0e3524d45a07f3248a: feat: improve applyProps errors, harden pierced props setting
+
 ## 9.3.0
 
 ### Minor Changes

package/dist/{events-d0a20a9c.cjs.prod.js → events-3afec6fc.cjs.prod.js}

@@ -241,24 +241,46 @@ function prepare(target, root, type, props) {
   return instance;
 }
 function resolve(root, key) {
-  let target = root[key];
   if (!key.includes('-')) return {
     root,
     key,
-    target
+    target: root[key]
   };
 
-  // Resolve pierced target
-  target = root;
-  for (const part of key.split('-')) {
-    var _target;
+  // First try the entire key as a single property (e.g., 'foo-bar')
+  if (key in root) {
+    return {
+      root,
+      key,
+      target: root[key]
+    };
+  }
+
+  // Try piercing (e.g., 'material-color' -> material.color)
+  let target = root;
+  const parts = key.split('-');
+  for (const part of parts) {
+    if (typeof target !== 'object' || target === null) {
+      if (target !== undefined) {
+        // Property exists but has unexpected shape
+        const remaining = parts.slice(parts.indexOf(part)).join('-');
+        return {
+          root: target,
+          key: remaining,
+          target: undefined
+        };
+      }
+      // Property doesn't exist - fallback to original key
+      return {
+        root,
+        key,
+        target: undefined
+      };
+    }
     key = part;
     root = target;
-    target = (_target = target) == null ? void 0 : _target[key];
+    target = target[key];
   }
-
-  // TODO: change key to 'foo-bar' if target is undefined?
-
   return {
     root,
     key,
@@ -401,6 +423,11 @@ function applyProps(object, props) {
       target
     } = resolve(object, prop);
 
+    // Throw an error if we attempted to set a pierced prop to a non-object
+    if (target === undefined && (typeof root !== 'object' || root === null)) {
+      throw Error(`R3F: Cannot set "${prop}". Ensure it is an object before setting "${key}".`);
+    }
+
     // Layers must be written to the mask property
     if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
       target.mask = value.mask;

package/dist/{events-d0449b76.cjs.dev.js → events-6ab58ae5.cjs.dev.js}

@@ -241,24 +241,46 @@ function prepare(target, root, type, props) {
   return instance;
 }
 function resolve(root, key) {
-  let target = root[key];
   if (!key.includes('-')) return {
     root,
     key,
-    target
+    target: root[key]
   };
 
-  // Resolve pierced target
-  target = root;
-  for (const part of key.split('-')) {
-    var _target;
+  // First try the entire key as a single property (e.g., 'foo-bar')
+  if (key in root) {
+    return {
+      root,
+      key,
+      target: root[key]
+    };
+  }
+
+  // Try piercing (e.g., 'material-color' -> material.color)
+  let target = root;
+  const parts = key.split('-');
+  for (const part of parts) {
+    if (typeof target !== 'object' || target === null) {
+      if (target !== undefined) {
+        // Property exists but has unexpected shape
+        const remaining = parts.slice(parts.indexOf(part)).join('-');
+        return {
+          root: target,
+          key: remaining,
+          target: undefined
+        };
+      }
+      // Property doesn't exist - fallback to original key
+      return {
+        root,
+        key,
+        target: undefined
+      };
+    }
     key = part;
     root = target;
-    target = (_target = target) == null ? void 0 : _target[key];
+    target = target[key];
   }
-
-  // TODO: change key to 'foo-bar' if target is undefined?
-
   return {
     root,
     key,
@@ -401,6 +423,11 @@ function applyProps(object, props) {
       target
     } = resolve(object, prop);
 
+    // Throw an error if we attempted to set a pierced prop to a non-object
+    if (target === undefined && (typeof root !== 'object' || root === null)) {
+      throw Error(`R3F: Cannot set "${prop}". Ensure it is an object before setting "${key}".`);
+    }
+
     // Layers must be written to the mask property
     if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
       target.mask = value.mask;

package/dist/{events-e3cb66e2.esm.js → events-f8cd670d.esm.js}

@@ -215,24 +215,46 @@ function prepare(target, root, type, props) {
   return instance;
 }
 function resolve(root, key) {
-  let target = root[key];
   if (!key.includes('-')) return {
     root,
     key,
-    target
+    target: root[key]
   };
 
-  // Resolve pierced target
-  target = root;
-  for (const part of key.split('-')) {
-    var _target;
+  // First try the entire key as a single property (e.g., 'foo-bar')
+  if (key in root) {
+    return {
+      root,
+      key,
+      target: root[key]
+    };
+  }
+
+  // Try piercing (e.g., 'material-color' -> material.color)
+  let target = root;
+  const parts = key.split('-');
+  for (const part of parts) {
+    if (typeof target !== 'object' || target === null) {
+      if (target !== undefined) {
+        // Property exists but has unexpected shape
+        const remaining = parts.slice(parts.indexOf(part)).join('-');
+        return {
+          root: target,
+          key: remaining,
+          target: undefined
+        };
+      }
+      // Property doesn't exist - fallback to original key
+      return {
+        root,
+        key,
+        target: undefined
+      };
+    }
     key = part;
     root = target;
-    target = (_target = target) == null ? void 0 : _target[key];
+    target = target[key];
   }
-
-  // TODO: change key to 'foo-bar' if target is undefined?
-
   return {
     root,
     key,
@@ -375,6 +397,11 @@ function applyProps(object, props) {
       target
     } = resolve(object, prop);
 
+    // Throw an error if we attempted to set a pierced prop to a non-object
+    if (target === undefined && (typeof root !== 'object' || root === null)) {
+      throw Error(`R3F: Cannot set "${prop}". Ensure it is an object before setting "${key}".`);
+    }
+
     // Layers must be written to the mask property
     if (target instanceof THREE.Layers && value instanceof THREE.Layers) {
       target.mask = value.mask;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-d0449b76.cjs.dev.js');
+var events = require('./events-6ab58ae5.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-d0a20a9c.cjs.prod.js');
+var events = require('./events-3afec6fc.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');

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

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-e3cb66e2.esm.js';
-export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-e3cb66e2.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-f8cd670d.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-f8cd670d.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-d0449b76.cjs.dev.js');
+var events = require('../../dist/events-6ab58ae5.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-d0a20a9c.cjs.prod.js');
+var events = require('../../dist/events-3afec6fc.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

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

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-e3cb66e2.esm.js';
-export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-e3cb66e2.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-f8cd670d.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-f8cd670d.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",