refactor: extract functions

swordev · May 2, 2022 · 7c5faf6 · 7c5faf6
1 parent 7a9523f
commit 7c5faf6
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 69 deletions.
diff --git a/.changeset/neat-spoons-pump.md b/.changeset/neat-spoons-pump.md
@@ -0,0 +1,6 @@
+---
+"@suid/base": patch
+"@suid/material": patch
+---
+
+Extract `createComponentFactory` functions
diff --git a/packages/base/src/createComponentFactory.ts b/packages/base/src/createComponentFactory.ts
@@ -1,22 +1,17 @@
 import composeClasses from "./composeClasses";
-import useTheme from "./useTheme";
-import { Theme } from "@suid/system/createTheme";
+import useBaseThemeProps, {
+  PropDefaultsCb,
+  ThemePropOptions,
+} from "./useThemeProps";
 import {
-  DefaultPropsOf,
   InPropsOf,
   PropsOf,
   OverridableComponent,
   OverridableTypeMap,
   SuidComponentType,
   SuidElement,
 } from "@suid/types";
-import {
-  batch,
-  createComputed,
-  JSXElement,
-  mergeProps,
-  splitProps,
-} from "solid-js";
+import { batch, createComputed, JSXElement, splitProps } from "solid-js";
 import { createMutable } from "solid-js/store";
 
 function createComponentFactory<
@@ -30,11 +25,7 @@ function createComponentFactory<
   >(options: {
     name: NonNullable<C["name"]>;
     selfPropNames: Exclude<keyof C["selfProps"], "sx">[];
-    propDefaults?: (data: {
-      set: (props: Omit<DefaultPropsOf<C>, "children">) => InProps;
-      theme: Theme;
-      inProps: Props;
-    }) => InProps;
+    propDefaults?: PropDefaultsCb<C>;
     utilityClass?: (slot: string) => string;
     slotClasses?: (ownerState: O) => S;
     /**
@@ -71,26 +62,22 @@ function createComponentFactory<
       return classes as Readonly<typeof classes>;
     }
 
-    function useProps(input: {
-      inProps: Props;
-      propDefaults?: (data: {
-        set: (props: InProps) => InProps;
-        inProps: Props;
-      }) => InProps;
-    }) {
-      const theme = useTheme();
-      const set = (v: any) => v;
-      const inProps = mergeProps(
-        options.propDefaults?.({
-          set,
-          theme,
-          inProps: input.inProps,
-        }) || {},
-        () => theme.components?.[options.name]?.defaultProps || {},
-        input.inProps
-      ) as InProps;
-      const [props, otherProps] = splitProps(inProps, options.selfPropNames);
-      return { allProps: inProps, props, otherProps };
+    function splitInProps(allProps: InPropsOf<C>) {
+      const [props, otherProps] = splitProps(allProps, options.selfPropNames);
+      return { allProps, props, otherProps };
+    }
+
+    function useThemeProps(input: Omit<ThemePropOptions<C>, "name">) {
+      return useBaseThemeProps({
+        propDefaults: options.propDefaults,
+        ...input,
+        name: options.name,
+      });
+    }
+
+    function useProps(props: PropsOf<C>) {
+      const themeProps = useThemeProps({ props });
+      return splitInProps(themeProps);
     }
 
     function defineComponent(
@@ -109,11 +96,7 @@ function createComponentFactory<
       }) => JSXElement
     ): C extends OverridableTypeMap ? OverridableComponent<C> : SuidElement<C> {
       const Component = defineComponent(function Component(inProps) {
-        const { allProps, otherProps, props } = useProps({
-          inProps,
-          propDefaults: options.propDefaults as any,
-        });
-
+        const { allProps, otherProps, props } = useProps(inProps);
         const classes =
           options.autoCallUseClasses ?? true
             ? useClasses(allProps as O)
@@ -134,7 +117,11 @@ function createComponentFactory<
       name: options.name,
       selfPropNames: options.selfPropNames,
       component,
+      defineComponent,
       useClasses,
+      useThemeProps,
+      useProps,
+      splitInProps,
     };
   };
 }

diff --git a/packages/base/src/useThemeProps.ts b/packages/base/src/useThemeProps.ts
@@ -0,0 +1,35 @@
+import useTheme from "./useTheme";
+import { PropsOf, InPropsOf, DefaultPropsOf } from "@suid/types";
+import { mergeProps } from "solid-js";
+
+export type ThemePropOptions<C> = {
+  name: string;
+  props: PropsOf<C>;
+  propDefaults?: DefaultPropsOf<C> | PropDefaultsCb<C>;
+};
+
+export type PropDefaultsCb<C> = (data: {
+  set: (props: Omit<DefaultPropsOf<C>, "children">) => InPropsOf<C>;
+  theme: ReturnType<typeof useTheme>;
+  inProps: PropsOf<C>;
+}) => InPropsOf<C>;
+
+export default function useThemeProps<C>(options: ThemePropOptions<C>) {
+  const theme = useTheme();
+  const set = (v: any) => v;
+  const propDefaults =
+    typeof options.propDefaults === "function"
+      ? (options.propDefaults as PropDefaultsCb<C>)({
+          set,
+          theme,
+          inProps: options.props,
+        })
+      : options.propDefaults;
+  return mergeProps(
+    ...[
+      ...(propDefaults ? [propDefaults] : []),
+      () => theme.components?.[options.name]?.defaultProps || {},
+      options.props,
+    ]
+  ) as InPropsOf<C>;
+}
diff --git a/packages/material/src/styles/useThemeProps.ts b/packages/material/src/styles/useThemeProps.ts
@@ -1,37 +1,22 @@
 import * as ComponentTypes from "./components-types";
-import useTheme from "./useTheme";
-import { PropsOf, InPropsOf } from "@suid/types";
-import { mergeProps } from "solid-js";
+import useBaseThemeProps, {
+  ThemePropOptions as BaseThemePropOptions,
+} from "@suid/base/useThemeProps";
 
-export type UseThemePropsName = keyof typeof ComponentTypes;
-export type UseThemePropsComponent<N extends UseThemePropsName> =
+export type ThemePropsName = keyof typeof ComponentTypes;
+export type ThemePropsComponent<N extends ThemePropsName> =
   typeof ComponentTypes[N];
-export type UseThemePropsOptions<
-  N extends UseThemePropsName,
-  C = UseThemePropsComponent<N>
-> = {
+
+export type ThemePropOptions<
+  N extends ThemePropsName,
+  C = ThemePropsComponent<N>
+> = Omit<BaseThemePropOptions<C>, "name"> & {
   name: N;
-  props: PropsOf<C>;
-  propDefaults?: (data: {
-    set: (props: InPropsOf<C>) => InPropsOf<C>;
-    inProps: PropsOf<C>;
-  }) => InPropsOf<C>;
 };
 
 export default function useThemeProps<
-  N extends UseThemePropsName,
-  C = UseThemePropsComponent<N>
->(options: UseThemePropsOptions<N, C>) {
-  const theme = useTheme();
-  const set = (v: any) => v;
-  const inProps = mergeProps(
-    () => theme.components?.[options.name]?.defaultProps ?? {},
-    () =>
-      options.propDefaults?.({
-        set,
-        inProps: options.props ?? (inProps as any),
-      }) ?? {},
-    options.props
-  ) as InPropsOf<C>;
-  return inProps;
+  N extends ThemePropsName,
+  C = ThemePropsComponent<N>
+>(options: ThemePropOptions<N, C>) {
+  return useBaseThemeProps<C>(options);
 }