perf: reduce calls to propDefaults

swordev · Apr 27, 2022 · 70a0607 · 70a0607
1 parent 938d054
commit 70a0607
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 59 deletions.
diff --git a/.changeset/fresh-files-play.md b/.changeset/fresh-files-play.md
@@ -0,0 +1,6 @@
+---
+"@suid/base": patch
+"@suid/material": patch
+---
+
+Increase performance reducing calls
diff --git a/packages/base/src/createComponentFactory.ts b/packages/base/src/createComponentFactory.ts
@@ -81,13 +81,12 @@ function createComponentFactory<
       const theme = useTheme();
       const set = (v: any) => v;
       const inProps = mergeProps(
-        () =>
-          options.propDefaults?.({
-            set,
-            theme,
-            inProps: input.inProps ?? (inProps as any),
-          }) ?? {},
-        () => theme.components?.[options.name]?.defaultProps ?? {},
+        options.propDefaults?.({
+          set,
+          theme,
+          inProps: input.inProps,
+        }) || {},
+        () => theme.components?.[options.name]?.defaultProps || {},
         input.inProps
       ) as InProps;
       const [props, otherProps] = splitProps(inProps, options.selfPropNames);

diff --git a/packages/material/src/Button/Button.tsx b/packages/material/src/Button/Button.tsx
@@ -31,14 +31,28 @@ const $ = createComponentFactory<ButtonTypeMap>()({
   propDefaults: ({ set }) => {
     const contextProps = useContext(ButtonGroupContext);
     return set({
-      color: contextProps.color ?? "primary",
+      get color() {
+        return contextProps.color ?? "primary";
+      },
       component: "button",
-      disabled: contextProps.disabled ?? false,
-      disableElevation: contextProps.disableElevation ?? false,
-      disableFocusRipple: contextProps.disableFocusRipple ?? false,
-      fullWidth: contextProps.fullWidth ?? false,
-      size: contextProps.size ?? "medium",
-      variant: contextProps.variant ?? "text",
+      get disabled() {
+        return contextProps.disabled ?? false;
+      },
+      get disableElevation() {
+        return contextProps.disableElevation ?? false;
+      },
+      get disableFocusRipple() {
+        return contextProps.disableFocusRipple ?? false;
+      },
+      get fullWidth() {
+        return contextProps.fullWidth ?? false;
+      },
+      get size() {
+        return contextProps.size ?? "medium";
+      },
+      get variant() {
+        return contextProps.variant ?? "text";
+      },
     });
   },
   utilityClass: getButtonUtilityClass,

diff --git a/packages/material/src/Divider/Divider.tsx b/packages/material/src/Divider/Divider.tsx
@@ -21,11 +21,15 @@ const $ = createComponentFactory<DividerTypeMap>()({
   propDefaults: ({ set, inProps }) =>
     set({
       absolute: false,
-      component: inProps.children ? "div" : "hr",
+      get component() {
+        return inProps.children ? "div" : "hr";
+      },
       flexItem: false,
       light: false,
       orientation: "horizontal",
-      role: inProps.component !== "hr" ? "separator" : undefined,
+      get role() {
+        return inProps.component !== "hr" ? "separator" : undefined;
+      },
       textAlign: "center",
       variant: "fullWidth",
     }),

diff --git a/packages/material/src/Drawer/Drawer.tsx b/packages/material/src/Drawer/Drawer.tsx
@@ -49,23 +49,23 @@ const $ = createComponentFactory<DrawerTypeMap>()({
         `paperAnchorDocked${capitalize(ownerState.anchor)}`,
     ],
   }),
-  propDefaults: ({ set }) => {
-    const theme = useTheme();
-    return set({
+  propDefaults: ({ set, theme }) =>
+    set({
       component: "div",
       anchor: "left",
       elevation: 16,
       hideBackdrop: false,
       ModalProps: {},
       open: false,
       PaperProps: {},
-      transitionDuration: {
-        enter: theme.transitions.duration.enteringScreen,
-        exit: theme.transitions.duration.leavingScreen,
+      get transitionDuration() {
+        return {
+          enter: theme.transitions.duration.enteringScreen,
+          exit: theme.transitions.duration.leavingScreen,
+        };
       },
       variant: "temporary",
-    });
-  },
+    }),
 });
 
 const DrawerRoot = styled(Modal, {

diff --git a/packages/material/src/Fade/Fade.tsx b/packages/material/src/Fade/Fade.tsx
@@ -11,16 +11,16 @@ import { children, createMemo, useContext } from "solid-js";
 const $ = createComponentFactory<FadeTypeMap>()({
   name: "MuiFader",
   selfPropNames: ["appear", "children", "easing", "in", "timeout"],
-  propDefaults: ({ set }) => {
-    const theme = useTheme();
-    return set({
+  propDefaults: ({ set, theme }) =>
+    set({
       appear: true,
-      timeout: {
-        enter: theme.transitions.duration.enteringScreen,
-        exit: theme.transitions.duration.leavingScreen,
+      get timeout() {
+        return {
+          enter: theme.transitions.duration.enteringScreen,
+          exit: theme.transitions.duration.leavingScreen,
+        };
       },
-    });
-  },
+    }),
 });
 
 export const fadeSelfPropNames = $.selfPropNames;

diff --git a/packages/material/src/Grid/Grid.tsx b/packages/material/src/Grid/Grid.tsx
@@ -59,8 +59,12 @@ const $ = createComponentFactory<GridTypeMap>()({
       xl: false,
       xs: false,
       zeroMinWidth: false,
-      rowSpacing: inProps.rowSpacing ?? inProps.spacing ?? 0,
-      columnSpacing: inProps.columnSpacing ?? inProps.spacing ?? 0,
+      get rowSpacing() {
+        return inProps.rowSpacing ?? inProps.spacing ?? 0;
+      },
+      get columnSpacing() {
+        return inProps.columnSpacing ?? inProps.spacing ?? 0;
+      },
     }),
   utilityClass: getGridUtilityClass,
   slotClasses: (o) => ({

diff --git a/packages/material/src/List/List.tsx b/packages/material/src/List/List.tsx
@@ -1,5 +1,5 @@
 import styled from "../styles/styled";
-import ListContext, { createListContextMutable } from "./ListContext";
+import ListContext from "./ListContext";
 import { ListTypeMap } from "./ListProps";
 import { getListUtilityClass } from "./listClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
@@ -75,11 +75,14 @@ const List = $.component(function List({
   otherProps,
   props,
 }) {
-  const context = createListContextMutable({
-    dense: props.dense,
-  });
   return (
-    <ListContext.Provider value={context}>
+    <ListContext.Provider
+      value={{
+        get dense() {
+          return props.dense;
+        },
+      }}
+    >
       <ListRoot
         {...otherProps}
         className={clsx(classes.root, otherProps.className)}

diff --git a/packages/material/src/List/ListContext.ts b/packages/material/src/List/ListContext.ts
@@ -1,5 +1,4 @@
 import { createContext, useContext } from "solid-js";
-import { createMutable } from "solid-js/store";
 
 export interface ListContext {
   dense: boolean;
@@ -15,8 +14,4 @@ export function useListContext() {
   return useContext(ListContext);
 }
 
-export function createListContextMutable(data: ListContext) {
-  return createMutable(data);
-}
-
 export default ListContext;
diff --git a/packages/material/src/Slide/Slide.tsx b/packages/material/src/Slide/Slide.tsx
@@ -19,21 +19,23 @@ const $ = createComponentFactory<SlideTypeMap>()({
     "in",
     "timeout",
   ],
-  propDefaults: ({ set }) => {
-    const theme = useTheme();
-    return set({
+  propDefaults: ({ set, theme }) =>
+    set({
       appear: true,
       direction: "down",
-      easing: {
-        enter: theme.transitions.easing.easeOut,
-        exit: theme.transitions.easing.sharp,
+      get easing() {
+        return {
+          enter: theme.transitions.easing.easeOut,
+          exit: theme.transitions.easing.sharp,
+        };
       },
-      timeout: {
-        enter: theme.transitions.duration.enteringScreen,
-        exit: theme.transitions.duration.leavingScreen,
+      get timeout() {
+        return {
+          enter: theme.transitions.duration.enteringScreen,
+          exit: theme.transitions.duration.leavingScreen,
+        };
       },
-    });
-  },
+    }),
 });
 
 type Direction = "left" | "right" | "up" | "down";

diff --git a/packages/material/src/SvgIcon/SvgIcon.tsx b/packages/material/src/SvgIcon/SvgIcon.tsx
@@ -25,7 +25,9 @@ const $ = createComponentFactory<SvgIconTypeMap>()({
     return set({
       component: "svg",
       color: "inherit",
-      fontSize: context?.fontSize ?? "medium",
+      get fontSize() {
+        return context?.fontSize ?? "medium";
+      },
       inheritViewBox: false,
       viewBox: "0 0 24 24",
     });

diff --git a/packages/material/src/ToggleButton/ToggleButton.tsx b/packages/material/src/ToggleButton/ToggleButton.tsx
@@ -32,11 +32,17 @@ const $ = createComponentFactory<ToggleButtonTypeMap>()({
   propDefaults: ({ set }) => {
     const context = useContext(ToggleButtonGroupContext);
     return set({
-      color: context.color ?? "standard",
-      disabled: context.disabled ?? false,
+      get color() {
+        return context.color ?? "standard";
+      },
+      get disabled() {
+        return context.disabled ?? false;
+      },
       disableFocusRipple: false,
       fullWidth: false,
-      size: context.size ?? "medium",
+      get size() {
+        return context.size ?? "medium";
+      },
     });
   },
   autoCallUseClasses: false,