fix: useLoader+Suspense crash, duck-typed Material/Object3D attach, createResource for renderer init

[bigmistqke]

Three independently-valuable fixes that surfaced while working on the WebGPU + construction-firewall PRs but didn't belong in either's scope.

1. useLoader + <Suspense> crashed with "Hooks can only be used within the Canvas component"

The bug pattern (minimal repro):

function TexturedCube() {
  const texture = useLoader(THREE.TextureLoader, "/img.png")
  return <T.Mesh><T.MeshBasicMaterial map={texture()} /></T.Mesh>
}
<Canvas><Suspense><TexturedCube /></Suspense></Canvas>

Once the resource resolved, useThree() inside TexturedCube threw — the component was being re-instantiated in an owner without solid-three's context providers.

Root cause: createThree passed children to useSceneGraph via:

useSceneGraph(context.scene, mergeProps(props, { get children() { return c() }}))

mergeProps builds a resolveSources fallback chain for each key. When c() transiently returned undefined (which happened while the reactive chain re-evaluated through a <Suspense>), the chain fell through to the user's raw <Canvas> JSX children getter and invoked it — spawning a fresh Suspense from scratch, in an owner outside solid-three's Provider tree.

Fix: useSceneGraph only reads children (and an optional onUpdate Canvas never passes). No reason to merge with the full Canvas props surface. Pass a plain object literal with just the override; no fallback chain to the user's children getter.

-  useSceneGraph(context.scene, mergeProps(props, {
-    get children() { return c() }
-  }))
+  useSceneGraph(context.scene, { get children() { return c() } })

Tests:

• tests/core/use-loader-suspense.test.tsx — new regression: useLoader inside no-fallback <Suspense>, verifies the user component is instantiated exactly once and that the mesh ends up in the scene after the resource resolves. Plus a second test exercising the explicit-fallback case (named "fallback" mesh swaps to named "content" mesh on resolve).
• tests/core/hooks.test.tsx — re-enables three previously commented-out useLoader integration tests (single URL, record of URLs, onBeforeLoad option), all using <Suspense fallback={null}>.

2. Foreign Material / Object3D instances not recognized by attach logic

applySceneGraph used instanceof Material, instanceof Object3D, etc. to decide auto-attach slots. That fails when a class comes from a separate module instance of three — most notably MeshBasicNodeMaterial from three/webgpu doesn't share class identity with the Material base imported from three. Three.js itself uses duck-typed is* flags (isMaterial, isObject3D, isBufferGeometry, isFog) as the cross-version contract.

Fix:

• Adds isMaterial, isObject3D, isBufferGeometry, isFog helpers in utils.ts next to the existing isWebXRManager / isWebGLShadowMap.
• Replaces instanceof checks in src/props.ts with the new helpers. three.js imports there become type-only.

Test: tests/core/renderer.test.tsx includes a previously-failing repro "attaches a foreign Material (duck-typed isMaterial: true)" that now passes.

3. createResource instead of async createEffect for renderer init

The previous pattern was an async createEffect with closure-mutation and a hand-rolled cancelled flag for race protection:

let glInitialized = false
createEffect(async () => {
  const renderer = gl()
  glInitialized = false
  let cancelled = false
  onCleanup(() => { cancelled = true })
  const init = getPendingInit(renderer)
  if (init) { /* pre-size canvas */; await init() }
  if (!cancelled) glInitialized = true
})

createResource is the idiomatic primitive:

• Source = () => gl(). Cancellation on swap is built in — no manual cancelled flag.
• Fetcher returns sync true for renderers without init() → resource is "ready" immediately; or a Promise that resolves once init() finishes (WebGPU) → "pending" until then.
• render() gates on rendererReady.state !== "ready" instead of a closure boolean.

Canvas pre-sizing (workaround for WebGPU's depth-buffer dimension lock — see pmndrs/react-three-fiber#3651) is unchanged.

No behavior change observable to tests; all 10 init-touching tests pass.

Test plan

• Existing tests pass (pnpm test)
• tsc --noEmit clean
• New tests:
  • 2 in use-loader-suspense.test.tsx (no-fallback regression + explicit-fallback content swap)
  • 3 in hooks.test.tsx (single URL, record, onBeforeLoad — previously commented)
  • 1 in renderer.test.tsx (foreign material, previously a failing repro)
• Manual smoke test in browser — recommended for the createResource refactor since jsdom uses a fake renderer and doesn't exercise the actual async init path.

[pkg-pr-new]

• solid-three-demo

  npm i https://pkg.pr.new/solid-three@55
  

commit: 56d8d04

[bigmistqke]

Follow-up commits on this branch (push pending):

• 3c488ce refactor(utils): consolidate isRenderer (was isRendererInstance in create-three.tsx) and isWritable (was in props.ts) into utils.ts alongside the other is* guards.

• dbbe477 test: add tests/core/api-coverage.test.tsx covering previously-untested public API:

  • createEntity (constructor + args propagation)
  • meta / getMeta / hasMeta
  • useProps (reactive prop application to an existing instance)
  • load standalone (single URL + record of URLs)
  • Resource (Object3D auto-add + render-fn)
  • CursorRaycaster + CenterRaycaster (NDC mapping)

• 4ac1ac7 fix(Resource): surfaced while writing the coverage tests — <Resource attach="..." /> was a no-op. Resource called useProps(resource, rest), which split attach into local without ever writing it to the resource's meta. When the resource was rendered as a JSX child, the parent's applySceneGraph fell through to the auto-attach fallbacks and ignored the prop. Fix: wrap the resolved value with meta(value, { props }) so the parent reads attach off the child's meta. Includes a TDD regression test.