perf: isolate reactivity and avoid calls

swordev · Apr 20, 2022 · 6d3daf3 · 6d3daf3
1 parent de3f0a2
commit 6d3daf3
Show file tree

Hide file tree

Showing 27 changed files with 277 additions and 163 deletions.
diff --git a/.changeset/three-sheep-hide.md b/.changeset/three-sheep-hide.md
@@ -0,0 +1,8 @@
+---
+"@suid/base": patch
+"@suid/material": patch
+"@suid/site": patch
+"@suid/system": patch
+---
+
+Improve performance
diff --git a/packages/base/src/BadgeUnstyled/useBadge.ts b/packages/base/src/BadgeUnstyled/useBadge.ts
@@ -56,8 +56,12 @@ export default function useBadge(inProps: UseBadgeProps) {
     }
   });
 
-  return mergeProps(badge, () => ({
-    invisible: invisible(),
-    displayValue: displayValue(),
-  }));
+  return mergeProps(badge, {
+    get invisible() {
+      return invisible();
+    },
+    get displayValue() {
+      return displayValue();
+    },
+  });
 }
diff --git a/packages/base/src/ButtonUnstyled/ButtonUnstyled.tsx b/packages/base/src/ButtonUnstyled/ButtonUnstyled.tsx
@@ -53,10 +53,14 @@ const ButtonUnstyled = $.component(function ButtonUnstyled({
   props,
 }) {
   const button = useButton(props);
-  const ownerState = mergeProps(props, () => ({
-    active: button.active,
-    focusVisible: button.focusVisible,
-  }));
+  const ownerState = mergeProps(props, {
+    get active() {
+      return button.active;
+    },
+    get focusVisible() {
+      return button.focusVisible;
+    },
+  });
 
   const ButtonRoot = () =>
     otherProps.component ?? otherProps.components?.Root ?? "button";

diff --git a/packages/base/src/utils/appendOwnerState.ts b/packages/base/src/utils/appendOwnerState.ts
@@ -15,16 +15,12 @@ export default function appendOwnerState(
   ownerState: object
 ) {
   const mergedOwnerState = mergeProps(
-    () => existingProps().ownerState,
-    () => ownerState
+    () => existingProps().ownerState || {},
+    ownerState
   );
-  return mergeProps(existingProps, () => {
-    if (isHostComponent(elementType())) {
-      return {};
-    } else {
-      return {
-        ownerState: mergedOwnerState,
-      };
-    }
+  return mergeProps(existingProps, {
+    get ownerState() {
+      if (!isHostComponent(elementType())) return mergedOwnerState;
+    },
   });
 }
diff --git a/packages/material/src/Badge/Badge.tsx b/packages/material/src/Badge/Badge.tsx
@@ -241,9 +241,11 @@ const Badge = $.component(function Badge({ allProps, otherProps, props }) {
   const invisible = useBadgeInvisibleMemo(allProps);
   const badge = mergeProps(() => (invisible() ? prevProps : allProps));
 
-  const ownerState = mergeProps(allProps, () => ({
-    invisible: invisible(),
-  }));
+  const ownerState = mergeProps(allProps, {
+    get invisible() {
+      return invisible();
+    },
+  });
 
   const classes = $.useClasses(ownerState);
 

diff --git a/packages/material/src/Breadcrumbs/Breadcrumbs.tsx b/packages/material/src/Breadcrumbs/Breadcrumbs.tsx
@@ -123,9 +123,11 @@ const Breadcrumbs = $.component(function Breadcrumbs({
 }) {
   const [expanded, setExpanded] = createSignal(false);
   const listElement = createElementRef();
-  const ownerState = mergeProps(allProps, () => ({
-    expanded: expanded(),
-  }));
+  const ownerState = mergeProps(allProps, {
+    get expanded() {
+      return expanded();
+    },
+  });
 
   const handleClickExpand = () => {
     setExpanded(true);

diff --git a/packages/material/src/CardMedia/CardMedia.tsx b/packages/material/src/CardMedia/CardMedia.tsx
@@ -86,11 +86,15 @@ const CardMedia = $.component(function CardMedia({
       : {}
   );
 
-  const ownerState = mergeProps(allProps, () => ({
-    isMediaComponent: isMediaComponent(),
-    isImageComponent:
-      IMAGE_COMPONENTS.indexOf(otherProps.component as any) !== -1,
-  }));
+  const ownerState = mergeProps(allProps, {
+    get isMediaComponent() {
+      return isMediaComponent();
+    },
+    get isImageComponent() {
+      return IMAGE_COMPONENTS.indexOf(otherProps.component as any) !== -1;
+    },
+  });
+
   return (
     <CardMediaRoot
       role={!isMediaComponent() && props.image ? "img" : undefined}

diff --git a/packages/material/src/Checkbox/Checkbox.tsx b/packages/material/src/Checkbox/Checkbox.tsx
@@ -120,10 +120,7 @@ const Checkbox = $.component(function Checkbox({ allProps, classes, props }) {
     "size",
   ]);
 
-  const allClasses = mergeProps(
-    () => props.classes || {},
-    () => classes
-  );
+  const allClasses = mergeProps(() => props.classes || {}, classes);
 
   return (
     <SvgIconContext.Provider

diff --git a/packages/material/src/FormControlLabel/FormControlLabel.tsx b/packages/material/src/FormControlLabel/FormControlLabel.tsx
@@ -141,15 +141,14 @@ const FormControlLabel = $.component(function FormControlLabel({
     states: ["error"],
   });
 
-  const ownerState = mergeProps(
-    allProps,
-    () => ({
-      error: fcs.error,
-    }),
-    () => ({
-      disabled: childDisabled(),
-    })
-  );
+  const ownerState = mergeProps(allProps, {
+    get error() {
+      return fcs.error;
+    },
+    get disabled() {
+      return childDisabled();
+    },
+  });
 
   const classes = $.useClasses(ownerState);
 

diff --git a/packages/material/src/FormGroup/FormGroup.tsx b/packages/material/src/FormGroup/FormGroup.tsx
@@ -68,9 +68,11 @@ const FormGroup = $.component(function FormGroup({
     states: ["error"],
   });
 
-  const ownerState = mergeProps(allProps, () => ({
-    error: fcs.error,
-  }));
+  const ownerState = mergeProps(allProps, {
+    get error() {
+      return fcs.error;
+    },
+  });
 
   return (
     <FormGroupRoot

diff --git a/packages/material/src/FormHelperText/FormHelperText.tsx b/packages/material/src/FormHelperText/FormHelperText.tsx
@@ -115,16 +115,32 @@ const FormHelperText = $.component(function FormHelperText({
     ],
   });
 
-  const ownerState = mergeProps(allProps, () => ({
-    contained: fcs.variant === "filled" || fcs.variant === "outlined",
-    variant: fcs.variant,
-    size: fcs.size,
-    disabled: fcs.disabled,
-    error: fcs.error,
-    filled: fcs.filled,
-    focused: fcs.focused,
-    required: fcs.required,
-  }));
+  const ownerState = mergeProps(allProps, {
+    get contained() {
+      return fcs.variant === "filled" || fcs.variant === "outlined";
+    },
+    get variant() {
+      return fcs.variant;
+    },
+    get size() {
+      return fcs.size;
+    },
+    get disabled() {
+      return fcs.disabled;
+    },
+    get error() {
+      return fcs.error;
+    },
+    get filled() {
+      return fcs.filled;
+    },
+    get focused() {
+      return fcs.focused;
+    },
+    get required() {
+      return fcs.required;
+    },
+  });
 
   const resolved = children(() => props.children);
 

diff --git a/packages/material/src/FormLabel/FormLabel.tsx b/packages/material/src/FormLabel/FormLabel.tsx
@@ -101,14 +101,26 @@ const FormLabel = $.component(function FormLabel({
     states: ["color", "required", "focused", "disabled", "error", "filled"],
   });
 
-  const ownerState = mergeProps(allProps, () => ({
-    color: fcs.color || "primary",
-    disabled: fcs.disabled,
-    error: fcs.error,
-    filled: fcs.filled,
-    focused: fcs.focused,
-    required: fcs.required,
-  }));
+  const ownerState = mergeProps(allProps, {
+    get color() {
+      return fcs.color || "primary";
+    },
+    get disabled() {
+      return fcs.disabled;
+    },
+    get error() {
+      return fcs.error;
+    },
+    get filled() {
+      return fcs.filled;
+    },
+    get focused() {
+      return fcs.focused;
+    },
+    get required() {
+      return fcs.required;
+    },
+  });
 
   const classes = $.useClasses(ownerState);
 

diff --git a/packages/material/src/InputBase/InputBase.tsx b/packages/material/src/InputBase/InputBase.tsx
@@ -402,12 +402,11 @@ const InputBase = $.component(function InputBase({
     ],
   });
 
-  const fcs = mergeProps(
-    () => partialFcs,
-    () => ({
-      focused: muiFormControl ? muiFormControl.focused : focused(),
-    })
-  );
+  const fcs = mergeProps(partialFcs, {
+    get focused() {
+      return muiFormControl ? muiFormControl.focused : focused();
+    },
+  });
 
   // The blur won't fire when the disabled state is set on a focused input.
   // We need to book keep the focused state manually.
@@ -485,33 +484,49 @@ const InputBase = $.component(function InputBase({
     muiFormControl?.setAdornedStart(Boolean(props.startAdornment));
   });
 
-  const ownerState = mergeProps(allProps, () => ({
-    color: fcs.color || "primary",
-    disabled: fcs.disabled,
-    error: fcs.error,
-    focused: fcs.focused,
-    formControl: muiFormControl,
-    hiddenLabel: fcs.hiddenLabel,
-    size: fcs.size,
-  }));
+  const ownerState = mergeProps(allProps, {
+    get color() {
+      return fcs.color || "primary";
+    },
+    get disabled() {
+      return fcs.disabled;
+    },
+    get error() {
+      return fcs.error;
+    },
+    get focused() {
+      return fcs.focused;
+    },
+    get formControl() {
+      return muiFormControl;
+    },
+    get hiddenLabel() {
+      return fcs.hiddenLabel;
+    },
+    get size() {
+      return fcs.size;
+    },
+  });
 
   const classes = $.useClasses(ownerState);
   const Root = () => props.components.Root || InputBaseRoot;
   const rootProps = () => props.componentsProps.root || {};
   const Input = () => props.components.Input || InputBaseComponent;
 
   const rootOwnerState = mergeProps(
-    () => ownerState,
+    ownerState,
     () => ((rootProps() as any)["ownerState"] || {}) as typeof ownerState
   );
   const inputOwnerState = mergeProps(
-    () => ownerState,
+    ownerState,
     () => ((inputProps() as any)["ownerState"] || {}) as typeof ownerState
   );
 
-  const renderSuffixProps = mergeProps(fcs, () => ({
-    startAdornment: props.startAdornment,
-  }));
+  const renderSuffixProps = mergeProps(fcs, {
+    get startAdornment() {
+      return props.startAdornment;
+    },
+  });
 
   const suffix = createMemo(() => props.renderSuffix?.(renderSuffixProps));
 

diff --git a/packages/material/src/InputLabel/InputLabel.tsx b/packages/material/src/InputLabel/InputLabel.tsx
@@ -173,13 +173,23 @@ const InputLabel = $.component(function InputLabel({ allProps, props }) {
     states: ["size", "variant", "required"],
   });
 
-  const ownerState = mergeProps(allProps, () => ({
-    formControl: muiFormControl,
-    shrink: shrink(),
-    size: fcs.size,
-    variant: fcs.variant,
-    required: fcs.required,
-  }));
+  const ownerState = mergeProps(allProps, {
+    get formControl() {
+      return muiFormControl;
+    },
+    get shrink() {
+      return shrink();
+    },
+    get size() {
+      return fcs.size;
+    },
+    get variant() {
+      return fcs.variant;
+    },
+    get required() {
+      return fcs.required;
+    },
+  });
 
   const classes = $.useClasses(ownerState);
 

diff --git a/packages/material/src/Link/Link.tsx b/packages/material/src/Link/Link.tsx
@@ -135,9 +135,11 @@ const LinkRoot = styled(Typography, {
 const Link = $.component(function Link({ allProps, otherProps, props }) {
   const visible = useIsFocusVisible();
   const [focusVisible, setFocusVisible] = createSignal(false);
-  const ownerState = mergeProps(allProps, () => ({
-    focusVisible: focusVisible(),
-  }));
+  const ownerState = mergeProps(allProps, {
+    get focusVisible() {
+      return focusVisible();
+    },
+  });
   const classes = $.useClasses(ownerState);
 
   return (