Triplex 0.58: Provider Component UI

▵ Triplex 0.58 improves on the provider component, changes how the refresh scene command works, and fixes some bugs.

Thank you to Matt Black for sponsoring Triplex!

New features

Provider component props

Props declared on your provider component now appear as editable in the Triplex UI, using the same powerful system used to edit components.

export default function Provider({
  children,
+  enablePhysics = false,
+  debugPhysics = false,
}: {
  children: ReactNode;
+  enablePhysics?: boolean;
+  debugPhysics?: boolean;
}) {
  return (
    <Context.Provider value>
      <Physics paused={!enablePhysics} debug={debugPhysics}>
        {children}
      </Physics>
    </Context.Provider>
  );
}

Here's some ideas where you could start using this feature:

• Declare a string literal union and switch between different environments from @react-three/drei
• Physics/post processing/XR helpers
• Entity Component System helpers to start and stop systems

Refresh scene command

Previously using the refresh scene command (CMD+R) would perform a hard refresh of the scene. Now this command has been renamed to reload scene (CMD+SHIFT+R) and a soft refresh has taken its placed (CMD+R) that remounts the scene.

Bug fixes

• Changes made to a provider component now are flushed through the editor rather than needing to restart it.
• Components sourced from node modules now can be flagged as transformed.
• Modified marker is now reset when changes originating from the file system occur.
• Default export module names are now inferred correctly when called in a function.
• Upsert prop action no longer shifts sibling elements line numbers if the prop value was smaller than the current value.

Triplex is the React Three Fiber editor where your code is source of truth. Download today.