feat: update SolidJS to 1.4

swordev · Aug 30, 2022 · b7da6ee · b7da6ee
1 parent c827289
commit b7da6ee
Show file tree

Hide file tree

Showing 97 changed files with 225 additions and 240 deletions.
diff --git a/.changeset/sour-onions-double.md b/.changeset/sour-onions-double.md
@@ -0,0 +1,12 @@
+---
+"@suid/base": minor
+"@suid/icons-material": minor
+"@suid/material": minor
+"@suid/site": patch
+"@suid/styled-engine": minor
+"@suid/system": minor
+"@suid/types": minor
+"@suid/utils": minor
+---
+
+Update SolidJS to 1.4
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "@wspa/cli": "^0.5.1",
     "@wspa/config": "^0.2.2",
     "babel-jest": "^29.0.1",
-    "babel-preset-solid": "^1.3.17",
+    "babel-preset-solid": "^1.4.7",
     "eslint": "^8.23.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
@@ -83,7 +83,7 @@
     "prettier-plugin-packagejson": "^2.2.18",
     "prettier-plugin-sort-json": "^0.0.3",
     "solid-jest": "^0.2.0",
-    "solid-js": "^1.3.17",
+    "solid-js": "^1.4.7",
     "solid-testing-library": "^0.3.0",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.9.1",

diff --git a/packages/base/package.json b/packages/base/package.json
@@ -16,7 +16,7 @@
     "clsx": "^1.2.1"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.0"
+    "solid-js": "^1.4.0"
   },
   "publishConfig": {
     "directory": "lib"

diff --git a/packages/base/src/BackdropUnstyled/BackdropUnstyled.tsx b/packages/base/src/BackdropUnstyled/BackdropUnstyled.tsx
@@ -58,11 +58,7 @@ const BackdropUnstyled = $.component(function BackdropUnstyled({
         ownerState: allProps,
       })}
       component={Root()}
-      className={clsx(
-        classes.root,
-        rootProps().className,
-        otherProps.className
-      )}
+      class={clsx(classes.root, rootProps().class, otherProps.class)}
     />
   );
 });

diff --git a/packages/base/src/BadgeUnstyled/BadgeUnstyled.tsx b/packages/base/src/BadgeUnstyled/BadgeUnstyled.tsx
@@ -91,13 +91,13 @@ const BadgeUnstyled = $.component(function BadgeUnstyled({
       {...rootProps}
       {...otherProps}
       component={Root()}
-      className={clsx(classes.root, rootProps.className, otherProps.className)}
+      class={clsx(classes.root, rootProps.class, otherProps.class)}
     >
       {props.children}
       <Dynamic
         {...badgeProps}
         component={Badge()}
-        className={clsx(classes.badge, badgeProps.className)}
+        class={clsx(classes.badge, badgeProps.class)}
       >
         {badge.displayValue}
       </Dynamic>

diff --git a/packages/base/src/BadgeUnstyled/useBadge.ts b/packages/base/src/BadgeUnstyled/useBadge.ts
@@ -36,7 +36,7 @@ export default function useBadge(inProps: UseBadgeProps) {
       max: 99,
       showZero: false,
       variant: "standard",
-    },
+    } as const,
     inProps
   );
 

diff --git a/packages/base/src/ButtonUnstyled/ButtonUnstyled.tsx b/packages/base/src/ButtonUnstyled/ButtonUnstyled.tsx
@@ -76,11 +76,7 @@ const ButtonUnstyled = $.component(function ButtonUnstyled({
       component={ButtonRoot()}
       {...button.getRootProps()}
       {...buttonRootProps}
-      className={clsx(
-        classes.root,
-        otherProps.className,
-        buttonRootProps.className
-      )}
+      class={clsx(classes.root, otherProps.class, buttonRootProps.class)}
     >
       {otherProps.children}
     </Dynamic>

diff --git a/packages/base/src/ButtonUnstyled/ButtonUnstyledProps.ts b/packages/base/src/ButtonUnstyled/ButtonUnstyledProps.ts
@@ -14,7 +14,7 @@ export interface ButtonUnstyledOwnProps extends Omit<UseButtonProps, "ref"> {
    */
   // action?: React.Ref<ButtonUnstyledActions>;
   children?: JSXElement;
-  className?: string;
+  class?: string;
   componentsProps?: {
     root?: JSX.IntrinsicElements["button"] &
       ButtonUnstyledComponentsPropsOverrides;

diff --git a/packages/base/src/ModalUnstyled/ModalUnstyled.tsx b/packages/base/src/ModalUnstyled/ModalUnstyled.tsx
@@ -219,11 +219,7 @@ const ModalUnstyled = $.component(function ModalUnstyled({
               ownerState: allProps,
             })}
             onKeyDown={handleKeyDown}
-            className={clsx(
-              classes.root,
-              rootProps().className,
-              otherProps.className
-            )}
+            class={clsx(classes.root, rootProps().class, otherProps.class)}
             ref={element}
           >
             <Show when={!props.hideBackdrop && !!props.BackdropComponent}>

diff --git a/packages/base/src/PopperUnstyled/PopperUnstyled.tsx b/packages/base/src/PopperUnstyled/PopperUnstyled.tsx
@@ -276,7 +276,7 @@ const PopperUnstyled = $.component(function PopperUnstyled({
                 props.keepMounted &&
                 (!props.transition || exited())
                   ? "none"
-                  : null,
+                  : (null as any),
               ...(otherProps.style && typeof otherProps.style !== "string"
                 ? otherProps.style
                 : {}),

diff --git a/packages/icons-material/package.json b/packages/icons-material/package.json
@@ -11,7 +11,7 @@
     "@suid/material": "workspace:*"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.0"
+    "solid-js": "^1.4.0"
   },
   "publishConfig": {
     "directory": "lib"

diff --git a/packages/material/package.json b/packages/material/package.json
@@ -17,7 +17,7 @@
     "clsx": "^1.2.1"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.0"
+    "solid-js": "^1.4.0"
   },
   "publishConfig": {
     "directory": "lib"

diff --git a/packages/material/src/Alert/Alert.tsx b/packages/material/src/Alert/Alert.tsx
@@ -173,24 +173,24 @@ const Alert = $.component(function Alert({
       role={props.role}
       elevation={0}
       ownerState={allProps}
-      className={clsx(classes.root, otherProps.className)}
+      class={clsx(classes.root, otherProps.class)}
       {...otherProps}
     >
       <Show when={props.icon !== false}>
-        <AlertIcon ownerState={allProps} className={classes.icon}>
+        <AlertIcon ownerState={allProps} class={classes.icon}>
           {props.icon ||
             props.iconMapping?.[props.severity] ||
             defaultIconMapping[props.severity]}
         </AlertIcon>
       </Show>
-      <AlertMessage ownerState={allProps} className={classes.message}>
+      <AlertMessage ownerState={allProps} class={classes.message}>
         {otherProps.children}
       </AlertMessage>
       <Show when={!!props.action}>
-        <AlertAction className={classes.action}>{props.action}</AlertAction>
+        <AlertAction class={classes.action}>{props.action}</AlertAction>
       </Show>
       <Show when={!props.action && props.onClose}>
-        <AlertAction ownerState={allProps} className={classes.action}>
+        <AlertAction ownerState={allProps} class={classes.action}>
           <IconButton
             size="small"
             aria-label={props.closeText}

diff --git a/packages/material/src/AlertTitle/AlertTitle.tsx b/packages/material/src/AlertTitle/AlertTitle.tsx
@@ -50,7 +50,7 @@ const AlertTitle = $.component(function AlertTitle({
       gutterBottom
       {...otherProps}
       ownerState={allProps}
-      className={clsx(classes.root, otherProps.className)}
+      class={clsx(classes.root, otherProps.class)}
     >
       {props.children}
     </AlertTitleRoot>

diff --git a/packages/material/src/AppBar/AppBar.tsx b/packages/material/src/AppBar/AppBar.tsx
@@ -133,12 +133,12 @@ const AppBar = $.component(function AppBar({
       square
       ownerState={allProps}
       elevation={4}
-      className={clsx(
+      class={clsx(
         classes.root,
         {
           "mui-fixed": props.position === "fixed", // Useful for the Dialog
         },
-        otherProps.className
+        otherProps.class
       )}
       {...otherProps}
     />

diff --git a/packages/material/src/Avatar/Avatar.tsx b/packages/material/src/Avatar/Avatar.tsx
@@ -167,7 +167,7 @@ const Avatar = $.defineComponent(function Avatar(inProps) {
   const [, other] = splitProps(props, [
     "alt",
     "children",
-    "className",
+    "class",
     "component",
     "imgProps",
     "sizes",
@@ -221,7 +221,7 @@ const Avatar = $.defineComponent(function Avatar(inProps) {
           srcSet={props.srcSet}
           sizes={props.sizes}
           ownerState={ownerState}
-          className={classes.img}
+          class={classes.img}
           {...(props.imgProps || {})}
         />
       );
@@ -234,15 +234,15 @@ const Avatar = $.defineComponent(function Avatar(inProps) {
     } else if (hasImg() && props.alt) {
       return props.alt[0];
     } else {
-      return <AvatarFallback className={classes.fallback} />;
+      return <AvatarFallback class={classes.fallback} />;
     }
   };
 
   return (
     <AvatarRoot
       component={baseProps.component}
       ownerState={ownerState}
-      className={clsx(classes.root, props.className)}
+      class={clsx(classes.root, props.class)}
       {...other}
     >
       {children}

diff --git a/packages/material/src/Backdrop/Backdrop.tsx b/packages/material/src/Backdrop/Backdrop.tsx
@@ -58,7 +58,7 @@ const Backdrop = $.component(function Backdrop({ props, otherProps }) {
     <Fade in={props.open} timeout={props.transitionDuration} {...fadeProps}>
       <BackdropUnstyled
         {...backdropProps}
-        className={otherProps.className}
+        class={otherProps.class}
         invisible={otherProps.invisible}
         components={{
           Root: BackdropRoot,

diff --git a/packages/material/src/Box/Box.tsx b/packages/material/src/Box/Box.tsx
@@ -19,7 +19,7 @@ export const Box = $.component(function Box({ otherProps, classes }) {
     <SystemBox
       theme={theme}
       {...otherProps}
-      className={clsx(classes.root, otherProps.className)}
+      class={clsx(classes.root, otherProps.class)}
     />
   );
 });

diff --git a/packages/material/src/Breadcrumbs/Breadcrumbs.tsx b/packages/material/src/Breadcrumbs/Breadcrumbs.tsx
@@ -91,7 +91,7 @@ function insertSeparators(
         <BreadcrumbsSeparator
           component={"div"}
           aria-hidden
-          className={className}
+          class={className}
           ownerState={ownerState}
         >
           {separator}
@@ -179,18 +179,18 @@ const Breadcrumbs = $.component(function Breadcrumbs({
   const allItems = createMemo(() => {
     const value = resolved();
     const array = Array.isArray(value) ? value : [value];
-    return array.map((item) => <li className={classes.li}>{item}</li>);
+    return array.map((item) => <li class={classes.li}>{item}</li>);
   });
 
   return (
     <BreadcrumbsRoot
       color="text.secondary"
       {...otherProps}
-      className={clsx(classes.root, otherProps.className)}
+      class={clsx(classes.root, otherProps.class)}
       ownerState={ownerState}
     >
       <BreadcrumbsOl
-        className={classes.ol}
+        class={classes.ol}
         ownerState={ownerState}
         ref={listElement}
       >

diff --git a/packages/material/src/Button/Button.tsx b/packages/material/src/Button/Button.tsx
@@ -342,11 +342,7 @@ const Button = $.component(function Button({
   return (
     <ButtonRoot
       ownerState={allProps}
-      className={clsx(
-        classes.root,
-        otherProps.className,
-        contextProps.className
-      )}
+      class={clsx(classes.root, otherProps.class, contextProps.class)}
       disabled={props.disabled}
       focusRipple={!props.disableFocusRipple}
       focusVisibleClassName={clsx(
@@ -359,13 +355,13 @@ const Button = $.component(function Button({
       classes={props.classes}
     >
       <Show when={!!props.startIcon}>
-        <ButtonStartIcon className={classes.startIcon} ownerState={allProps}>
+        <ButtonStartIcon class={classes.startIcon} ownerState={allProps}>
           {props.startIcon}
         </ButtonStartIcon>
       </Show>
       {props.children}
       <Show when={!!props.endIcon}>
-        <ButtonEndIcon className={classes.endIcon} ownerState={allProps}>
+        <ButtonEndIcon class={classes.endIcon} ownerState={allProps}>
           {props.endIcon}
         </ButtonEndIcon>
       </Show>

diff --git a/packages/material/src/ButtonBase/ButtonBase.tsx b/packages/material/src/ButtonBase/ButtonBase.tsx
@@ -354,7 +354,7 @@ const ButtonBase = $.component(function ButtonBase({
     <ButtonBaseRoot
       {...buttonProps()}
       {...otherProps}
-      className={clsx(classes.root, otherProps.className)}
+      class={clsx(classes.root, otherProps.class)}
       ownerState={ownerState}
       onFocusOut={handleBlur}
       onClick={otherProps.onClick}

diff --git a/packages/material/src/ButtonBase/Ripple.tsx b/packages/material/src/ButtonBase/Ripple.tsx
@@ -7,7 +7,7 @@ import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
 const $ = createComponentFactory<RipplePropsTypeMap>()({
   name: "MuiRipple",
   selfPropNames: [
-    "className",
+    "class",
     "classes",
     "pulsate",
     "rippleX",
@@ -32,7 +32,7 @@ const Ripple = $.component(function Ripple({ props, otherProps }) {
 
   const rippleClassName = createMemo(() =>
     clsx(
-      props.className,
+      props.class,
       props.classes.ripple,
       props.classes.rippleVisible,
       props.classes.ripplePulsate && {
@@ -79,11 +79,11 @@ const Ripple = $.component(function Ripple({ props, otherProps }) {
   return (
     <Box
       component="span"
-      className={rippleClassName()}
+      class={rippleClassName()}
       style={rippleStyles()}
       sx={otherProps.sx}
     >
-      <span className={childClassName()} />
+      <span class={childClassName()} />
     </Box>
   );
 });

diff --git a/packages/material/src/ButtonBase/RippleProps.ts b/packages/material/src/ButtonBase/RippleProps.ts
@@ -3,7 +3,7 @@ import SxProps from "@suid/system/sxProps";
 export interface RipplePropsTypeMap {
   defaultPropNames: "pulsate" | "classes";
   selfProps: {
-    className?: string;
+    class?: string;
     classes?: {
       ripple?: string;
       rippleVisible?: string;

diff --git a/packages/material/src/ButtonBase/TouchRipple.tsx b/packages/material/src/ButtonBase/TouchRipple.tsx
@@ -326,10 +326,10 @@ const TouchRipple = $.component(function TouchRipple({ props, otherProps }) {
 
   return (
     <TouchRippleRoot
-      className={clsx(
+      class={clsx(
         props.classes.root,
         touchRippleClasses.root,
-        otherProps.className
+        otherProps.class
       )}
       ref={container}
       {...otherProps}

diff --git a/packages/material/src/ButtonGroup/ButtonGroup.tsx b/packages/material/src/ButtonGroup/ButtonGroup.tsx
@@ -227,7 +227,7 @@ const ButtonGroup = $.component(function ButtonGroup({
   props,
 }) {
   const context = () => ({
-    className: classes.grouped,
+    class: classes.grouped,
     color: props.color,
     disabled: props.disabled,
     disableElevation: props.disableElevation,
@@ -242,7 +242,7 @@ const ButtonGroup = $.component(function ButtonGroup({
     <ButtonGroupRoot
       as={otherProps.component}
       role="group"
-      className={clsx(classes.root, otherProps.className)}
+      class={clsx(classes.root, otherProps.class)}
       ownerState={allProps}
       {...otherProps}
     >

diff --git a/packages/material/src/ButtonGroup/ButtonGroupContext.ts b/packages/material/src/ButtonGroup/ButtonGroupContext.ts
@@ -2,7 +2,7 @@ import { ButtonGroupProps } from ".";
 import { createContext } from "solid-js";
 
 interface IButtonGroupContext {
-  className?: string;
+  class?: string;
   color?: ButtonGroupProps["color"];
   disabled?: boolean;
   disableElevation?: boolean;