Merge pull request #83 from pmndrs/feature/set-style-merge

feat: setStyle merge with exsisting styles by default

docs/advanced/performance.md

@@ -28,7 +28,7 @@ export function AnimateBackground() {
 }
 ```
 
-Setting executing `setStyle(undefined)` resets all changes back to the initial properties provided to the directly to the component.
+Setting executing `setStyle(undefined, true)` resets all changes back to the initial properties provided to the directly to the component.
 
 ### using signals
 

docs/getting-started/components-and-properties.md

@@ -532,17 +532,17 @@ All Components support [all R3F event handlers](https://docs.pmnd.rs/react-three
 
 Each component exposes the `ComponentInternals` when using a `ref`. The component internals provide you with access to
 
-| Property            | Explanation                                                                                                |
-| ------------------- | ---------------------------------------------------------------------------------------------------------- |
-| borderInset         | a tuple containing the border sizes on all 4 sides `[top, right, bottom, left]`                            |
-| paddingInset        | a tuple containing the padding sizes on all 4 sides `[top, right, bottom, left]`                           |
-| center              | the offset between from the element's center to its parent's center                                        |
-| size                | the outer width/height of the element                                                                      |
-| interactionPanel    | the mesh added to the scene graph to capture events                                                        |
-| scrollPosition      | the x/y scroll position of the children when the element is scrollable                                     |
-| pixelSize           | the size of one pixel                                                                                      |
-| maxScrollPosition   | the maximum x/y scroll position, based on the size of the children                                         |
-| isClipped           | exploses whether the element is fully clipped by some ancestor                                             |
-| setStyle            | set the styles of the element (the provided styles have a higher precedence then the element's properties) |
-| getStyle            | get the object last written to `setStyle`                                                                  |
-| getComputedProperty | read the current value for any property (combines default properties, direct properties, and styles)       |
+| Property            | Explanation                                                                                                     |
+| ------------------- | --------------------------------------------------------------------------------------------------------------- |
+| borderInset         | a tuple containing the border sizes on all 4 sides `[top, right, bottom, left]`                                 |
+| paddingInset        | a tuple containing the padding sizes on all 4 sides `[top, right, bottom, left]`                                |
+| center              | the offset between from the element's center to its parent's center                                             |
+| size                | the outer width/height of the element                                                                           |
+| interactionPanel    | the mesh added to the scene graph to capture events                                                             |
+| scrollPosition      | the x/y scroll position of the children when the element is scrollable                                          |
+| pixelSize           | the size of one pixel                                                                                           |
+| maxScrollPosition   | the maximum x/y scroll position, based on the size of the children                                              |
+| isClipped           | exploses whether the element is fully clipped by some ancestor                                                  |
+| setStyle            | modifies the styles of the element (the provided styles have a higher precedence then the element's properties) |
+| getStyle            | get the current style of the object                                                                       |
+| getComputedProperty | read the current value for any property (combines default properties, direct properties, and styles)            |

packages/react/src/ref.ts

@@ -54,7 +54,7 @@ export type ComponentInternals<T = ContainerProperties> = {
   /**
    * set the styles of the element (the provided styles have a higher precedence then the element's properties)
    */
-  setStyle(style: T | undefined): void
+  setStyle(style: T | undefined, replace?: boolean): void
   /**
    * get the object last written to `setStyle`
    */
@@ -91,7 +91,8 @@ export function useComponentInternals<T, O = {}>(
     () => {
       const { scrollPosition, paddingInset, borderInset, relativeCenter, size, maxScrollPosition } = internals
       return {
-        setStyle: (style: T | undefined) => (styleSignal.value = style),
+        setStyle: (style: T | undefined, replace?: boolean) =>
+          (styleSignal.value = replace ? style : ({ ...styleSignal.value, ...style } as T)),
         getStyle: () => styleSignal.peek(),
         getComputedProperty: <K extends keyof T>(key: K) =>
           untracked(() => internals.mergedProperties.value.read<T[K] | undefined>(key as string, undefined)),

packages/uikit/src/vanilla/container.ts

@@ -58,8 +58,8 @@ export class Container extends Parent {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: ContainerProperties | undefined) {
-    this.styleSignal.value = style
+  setStyle(style: ContainerProperties | undefined, replace?: boolean) {
+    this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
   }
 
   setProperties(properties: ContainerProperties | undefined) {

packages/uikit/src/vanilla/content.ts

@@ -90,8 +90,8 @@ export class Content extends Component {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: ContentProperties | undefined) {
-    this.styleSignal.value = style
+  setStyle(style: ContentProperties | undefined, replace?: boolean) {
+    this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
   }
 
   setProperties(properties: ContentProperties | undefined) {

packages/uikit/src/vanilla/custom.ts

@@ -64,8 +64,8 @@ export class CustomContainer extends Component {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: CustomContainerProperties | undefined) {
-    this.styleSignal.value = style
+  setStyle(style: CustomContainerProperties | undefined, replace?: boolean) {
+    this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
   }
 
   setProperties(properties: CustomContainerProperties | undefined) {

packages/uikit/src/vanilla/fullscreen.ts

@@ -77,8 +77,8 @@ export class Fullscreen extends Root {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: FullscreenProperties | undefined): void {
-    super.setStyle(style)
+  setStyle(style: FullscreenProperties | undefined, replace?: boolean): void {
+    super.setStyle(style, replace)
   }
 
   setProperties(properties: FullscreenProperties | undefined): void {

packages/uikit/src/vanilla/icon.ts

@@ -66,8 +66,8 @@ export class Icon extends Component {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: IconProperties | undefined) {
-    this.styleSignal.value = style
+  setStyle(style: IconProperties | undefined, replace?: boolean) {
+    this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
   }
 
   setProperties(properties: IconProperties | undefined) {

packages/uikit/src/vanilla/image.ts

@@ -57,8 +57,8 @@ export class Image extends Parent {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: ImageProperties | undefined) {
-    this.styleSignal.value = style
+  setStyle(style: ImageProperties | undefined, replace?: boolean) {
+    this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
   }
 
   setProperties(properties: ImageProperties | undefined) {

packages/uikit/src/vanilla/input.ts

@@ -58,8 +58,8 @@ export class Input extends Component {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: InputProperties | undefined) {
-    this.styleSignal.value = style
+  setStyle(style: InputProperties | undefined, replace?: boolean) {
+    this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
   }
 
   setProperties(properties: InputProperties | undefined) {

packages/uikit/src/vanilla/root.ts

@@ -89,8 +89,8 @@ export class Root extends Parent {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: RootProperties | undefined) {
-    this.styleSignal.value = style
+  setStyle(style: RootProperties | undefined, replace?: boolean) {
+    this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
   }
 
   setProperties(properties: (RootProperties & WithReactive<{ pixelSize?: number }>) | undefined) {

packages/uikit/src/vanilla/svg.ts

@@ -60,8 +60,8 @@ export class Svg extends Parent {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: SvgProperties | undefined) {
-    this.styleSignal.value = style
+  setStyle(style: SvgProperties | undefined, replace?: boolean) {
+    this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
   }
 
   setProperties(properties: SvgProperties | undefined) {

packages/uikit/src/vanilla/text.ts

@@ -68,8 +68,8 @@ export class Text extends Component {
     return this.styleSignal.peek()
   }
 
-  setStyle(style: TextProperties | undefined) {
-    this.styleSignal.value = style
+  setStyle(style: TextProperties | undefined, replace?: boolean) {
+    this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style }
   }
 
   setProperties(properties: TextProperties | undefined) {