fix: react code should use destructuring to replace defaultProps (#211)

packages/compiler/package.json

@@ -38,6 +38,7 @@
     "@builder.io/mitosis": "0.4.3",
     "@builder.io/mitosis-cli": "0.4.3",
     "@interchain-ui/vue-codemod": "workspace:*",
+    "@interchain-ui/react-codemod": "workspace:*",
     "@parcel/watcher": "^2.4.1",
     "cli-color": "^2.0.4",
     "command-line-args": "^5.2.1",
@@ -67,4 +68,4 @@
     "typescript": "^5.5.3"
   },
   "gitHead": "05adf69046d07d6f764b96cf54cbaa492de06d95"
-}
+}

packages/compiler/src/plugins/react.plugin.js

@@ -1,4 +1,5 @@
 // @ts-check
+const { reactCodemod } = require("@interchain-ui/react-codemod");
 const scaffolds = require("../scaffold.config.js");
 const scaffoldConfig = scaffolds.reactScaffoldConfig;
 
@@ -38,13 +39,14 @@ module.exports = function reactCompilerPlugin() {
     code: {
       // Happens before formatting
       pre: (codeStr) => {
-        return [fixReactTypeIssuesPlugin, fixIncorrectRefNamePlugin].reduce(
-          (acc, transform) => {
-            acc = transform(codeStr);
-            return acc;
-          },
-          codeStr,
-        );
+        return [
+          fixReactTypeIssuesPlugin,
+          fixIncorrectRefNamePlugin,
+          reactCodemod,
+        ].reduce((acc, transform) => {
+          acc = transform(acc);
+          return acc;
+        }, codeStr);
       },
     },
   };

packages/react-codemod/.parcelrc

@@ -0,0 +1,8 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{ts,tsx}": [
+      "@parcel/transformer-typescript-tsc"
+    ]
+  }
+}

packages/react-codemod/README.md

@@ -0,0 +1,17 @@
+# `@interchain-ui/react-codemod`
+
+Internal utility package used by the compiler package to transform React code during the build process.
+
+## Purpose
+
+This package contains codemod utilities and transformations that help:
+
+- Convert React components to match internal standards
+- Apply optimizations and best practices
+- Fix Mitosis bugs and limitations or inconsistencies
+
+## Usage
+
+This package is intended for internal use only by the compiler package. It is not meant to be used directly.
+
+The transformations are applied automatically during the build process.

packages/react-codemod/__fixtures__/input-1/input.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import Box from "../box";
+import AvatarImage from "../avatar-image";
+import { store } from "../../models/store";
+import { avatarSize } from "./avatar.helper";
+import { avatarSizeVar, avatar } from "./avatar.css";
+import type { AvatarProps } from "./avatar.types";
+
+function Avatar(props: AvatarProps) {
+  const cleanupRef = useRef<() => void>(null);
+  const [internalTheme, setInternalTheme] = useState(() => "light");
+
+  const [isLoaded, setIsLoaded] = useState(() => false);
+
+  const [sizeValue, setSizeValue] = useState(() => avatarSize(props.size));
+
+  function cssVars() {
+    return assignInlineVars({
+      [avatarSizeVar]: sizeValue,
+    });
+  }
+
+  useEffect(() => {
+    setInternalTheme(store.getState().theme);
+    cleanupRef.current = store.subscribe((newState) => {
+      setInternalTheme(newState.theme);
+    });
+  }, []);
+
+  useEffect(() => {
+    setSizeValue(avatarSize(props.size));
+  }, [props.size]);
+
+  useEffect(() => {
+    return () => {
+      if (typeof cleanupRef.current === "function") cleanupRef.current();
+    };
+  }, []);
+
+  return (
+    <Box
+      as="span"
+      display="inline-flex"
+      borderWidth={props.showBorder ? "$sm" : undefined}
+      borderColor={props.borderColor}
+      borderRadius={props.rounded ? "$full" : "none"}
+      backgroundColor={props.backgroundColor}
+      attributes={props.attributes}
+      className={props.className}
+    >
+      <span
+        data-loaded={isLoaded}
+        data-custom-bg={!!props.backgroundColor}
+        style={cssVars()}
+        className={avatar[internalTheme]}
+      >
+        <AvatarImage
+          src={props.src}
+          srcSet={props.srcSet}
+          loading={props.loading}
+          fallbackMode={props.fallbackMode}
+          onLoad={(event) => {
+            props.onLoad?.(event);
+            setIsLoaded(true);
+          }}
+          width={sizeValue}
+          height={sizeValue}
+          onError={(event) => props.onError}
+          getInitials={props.getInitials}
+          name={props.name}
+          borderRadius={props.borderRadius}
+          ignoreFallback={props.ignoreFallback}
+          crossOrigin={props.crossOrigin}
+          referrerPolicy={props.referrerPolicy}
+        />
+        {props.children}
+      </span>
+    </Box>
+  );
+}
+
+Avatar.defaultProps = { size: "md", rounded: true, fallbackMode: "initials" };
+
+export default Avatar;

packages/react-codemod/__fixtures__/input-1/output.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import Box from "../box";
+import AvatarImage from "../avatar-image";
+import { store } from "../../models/store";
+import { avatarSize } from "./avatar.helper";
+import { avatarSizeVar, avatar } from "./avatar.css";
+import type { AvatarProps } from "./avatar.types";
+
+function Avatar(props: AvatarProps) {
+  const { size = "md", rounded = true, fallbackMode = "initials" } = props;
+  const cleanupRef = useRef<() => void>(null);
+  const [internalTheme, setInternalTheme] = useState(() => "light");
+  const [isLoaded, setIsLoaded] = useState(() => false);
+  const [sizeValue, setSizeValue] = useState(() => avatarSize(size));
+  function cssVars() {
+    return assignInlineVars({ [avatarSizeVar]: sizeValue });
+  }
+  useEffect(() => {
+    setInternalTheme(store.getState().theme);
+    cleanupRef.current = store.subscribe((newState) => {
+      setInternalTheme(newState.theme);
+    });
+  }, []);
+  useEffect(() => {
+    setSizeValue(avatarSize(size));
+  }, [size]);
+  useEffect(() => {
+    return () => {
+      if (typeof cleanupRef.current === "function") cleanupRef.current();
+    };
+  }, []);
+  return (
+    <Box
+      as="span"
+      display="inline-flex"
+      borderWidth={props.showBorder ? "$sm" : undefined}
+      borderColor={props.borderColor}
+      borderRadius={rounded ? "$full" : "none"}
+      backgroundColor={props.backgroundColor}
+      attributes={props.attributes}
+      className={props.className}
+    >
+      <span
+        data-loaded={isLoaded}
+        data-custom-bg={!!props.backgroundColor}
+        style={cssVars()}
+        className={avatar[internalTheme]}
+      >
+        <AvatarImage
+          src={props.src}
+          srcSet={props.srcSet}
+          loading={props.loading}
+          fallbackMode={fallbackMode}
+          onLoad={(event) => {
+            props.onLoad?.(event);
+            setIsLoaded(true);
+          }}
+          width={sizeValue}
+          height={sizeValue}
+          onError={(event) => props.onError}
+          getInitials={props.getInitials}
+          name={props.name}
+          borderRadius={props.borderRadius}
+          ignoreFallback={props.ignoreFallback}
+          crossOrigin={props.crossOrigin}
+          referrerPolicy={props.referrerPolicy}
+        />
+        {props.children}
+      </span>
+    </Box>
+  );
+}
+export default Avatar;

packages/react-codemod/__fixtures__/input-2/input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import Box from "../box";
+import type { StackProps } from "./stack.types";
+
+function Stack(props: StackProps) {
+  return (
+    <Box
+      display="flex"
+      as={props.as}
+      {...props.attributes}
+      boxRef={props.boxRef}
+      flexDirection={props.direction === "horizontal" ? "row" : "column"}
+      gap={props.space}
+      attributes={props.domAttributes}
+      className={props.className}
+    >
+      {props.children}
+    </Box>
+  );
+}
+
+Stack.defaultProps = { as: "div", direction: "horizontal", space: "$0" };
+
+export default Stack;

packages/react-codemod/__fixtures__/input-2/output.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import Box from "../box";
+import type { StackProps } from "./stack.types";
+
+function Stack(props: StackProps) {
+  const { as = "div", direction = "horizontal", space = "$0" } = props;
+  return (
+    <Box
+      display="flex"
+      as={as}
+      {...props.attributes}
+      boxRef={props.boxRef}
+      flexDirection={direction === "horizontal" ? "row" : "column"}
+      gap={space}
+      attributes={props.domAttributes}
+      className={props.className}
+    >
+      {props.children}
+    </Box>
+  );
+}
+export default Stack;

packages/react-codemod/__fixtures__/input-3/input.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import Box from "../box";
+import type { AccordionProps } from "./accordion.types";
+
+function Accordion(props: AccordionProps) {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [isExpanded, setIsExpanded] = useState(() => props.isExpanded);
+
+  function toggleExpanded() {
+    if (typeof props.onToggle === "function") {
+      props.onToggle();
+      return;
+    }
+    setIsExpanded(!isExpanded);
+  }
+
+  useEffect(() => {
+    setIsExpanded(props.isExpanded);
+  }, [props.isExpanded]);
+
+  return (
+    <Box width={props.width}>
+      <div onClick={(event) => toggleExpanded()}>
+        {typeof props.renderTrigger === "function" ? (
+          <>
+            {props.renderTrigger({
+              isExpanded: isExpanded,
+            })}
+          </>
+        ) : null}
+        {typeof props.renderTrigger !== "function" ? (
+          <>{props.renderTrigger}</>
+        ) : null}
+      </div>
+      <Box
+        overflow="hidden"
+        transition={props.transition}
+        opacity={isExpanded ? 1 : 0}
+        height={`${isExpanded ? contentRef.current?.scrollHeight : 0}px`}
+        ref={contentRef}
+      >
+        {props.renderContent}
+      </Box>
+    </Box>
+  );
+}
+
+Accordion.defaultProps = {
+  width: "$full",
+  isExpanded: false,
+  transition: "all 0.2s ease-out",
+};
+
+export default Accordion;