chore: upgrade to TS 5.2.2

Required for graphql-codegen project we're adding Change-Id: Ibb0259c0be1a1b37b53c8ce2f7ebe02858fd95d6 GitOrigin-RevId: a6675b6a0dd40c1ef97dbd20e8e80b059b874b26
plasmicapp · Feb 4, 2025 · 7ed45ef · 7ed45ef
1 parent 2efc2fc
commit 7ed45ef
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 335 deletions.
diff --git a/platform/wab/package.json b/platform/wab/package.json
@@ -136,7 +136,7 @@
     "@types/pluralize": "^0.0.29",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-csv": "^1.1.3",
-    "@types/react-dom": "^18.2.14",
+    "@types/react-dom": "^18.3.5",
     "@types/react-helmet": "^6.0.0",
     "@types/react-inspector": "^4.0.1",
     "@types/react-router-dom": "^5.1.5",
@@ -272,7 +272,7 @@
     "@swc/core": "^1.3.24",
     "@thi.ng/iterators": "^5.1.32",
     "@tinymce/tinymce-react": "^4.3.2",
-    "@types/react": "^18.2.33",
+    "@types/react": "^18.3.18",
     "@xmldom/xmldom": "^0.8.10",
     "@xyflow/react": "^12.0.3",
     "@zxcvbn-ts/core": "^3.0.4",
@@ -440,13 +440,13 @@
     "query-string": "^7.1.1",
     "querystring-es3": "^0.2.1",
     "random": "^4.1.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-aria": "^3.33.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-confetti": "^6.1.0",
     "react-csv": "^2.2.2",
     "react-docgen-typescript": "^1.18.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-draggable": "^4.4.3",
     "react-error-boundary": "^3.1.3",
     "react-helmet": "^6.1.0",
@@ -508,7 +508,7 @@
     "tunnel-rat": "^0.1.2",
     "typeorm": "0.2.45",
     "typeorm-naming-strategies": "^4.1.0",
-    "typescript": "~4.7.4",
+    "typescript": "5.2.2",
     "typia": "^3.8.1",
     "underscore": "^1.10.2",
     "underscore.string": "~3.3.5",

diff --git a/platform/wab/src/wab/client/components/InlineEditable.tsx b/platform/wab/src/wab/client/components/InlineEditable.tsx
@@ -1,8 +1,10 @@
-import * as React from "react";
 import { ClickStopper } from "@/wab/client/components/widgets";
+import Textbox from "@/wab/client/components/widgets/Textbox";
 import { PlasmicInlineEditable } from "@/wab/client/plasmic/plasmic_kit_design_system/PlasmicInlineEditable";
 import { InlineEdit } from "@/wab/commons/components/InlineEdit";
 import { OnClickAway } from "@/wab/commons/components/OnClickAway";
+import { isReactElementOfType } from "@/wab/shared/react-utils";
+import * as React from "react";
 
 interface InlineEditableProps {
   className?: string;
@@ -36,13 +38,13 @@ function InlineEditable(props: InlineEditableProps) {
           placeholder={placeholder}
           textbox={{
             wrap: (x) =>
-              React.isValidElement(x) ? (
+              isReactElementOfType(Textbox, x) ? (
                 <ClickStopper style={{ width: "100%" }} preventDefault>
                   <OnClickAway onDone={onDone}>
                     {React.cloneElement(x, {
                       autoFocus: true,
                       selectAllOnFocus: true,
-                      defaultValue: value,
+                      defaultValue: value || undefined,
                       onEscape: onDone,
                       onBlur: onDone,
                       onEdit: (newVal: string) => {

diff --git a/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts b/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts
@@ -414,20 +414,19 @@ export const createCanvasComponent = computedFn(
         viewCtx,
         (_comp) => createCanvasComponent(viewCtx, _comp)
       ) as React.ComponentType<CanvasComponentProps>) ?? CanvasComponent;
-    const CanvasComponentWrapper: typeof MaybePlumeComp = sub.React.forwardRef(
-      (props, ref) =>
-        sub.React.createElement<CanvasErrorBoundaryProps>(
-          mkCanvasErrorBoundary(sub.React, viewCtx),
-          {
-            ctx: props[renderingCtxProp] ?? makeEmptyRenderingCtx(viewCtx, ""),
-            nodeOrComponent: component,
-            children: sub.React.createElement(MaybePlumeComp, {
-              ...props,
-              ref,
-            }),
-          }
-        )
-    );
+    const CanvasComponentWrapper = sub.React.forwardRef((props, ref) =>
+      sub.React.createElement<CanvasErrorBoundaryProps>(
+        mkCanvasErrorBoundary(sub.React, viewCtx),
+        {
+          ctx: props[renderingCtxProp] ?? makeEmptyRenderingCtx(viewCtx, ""),
+          nodeOrComponent: component,
+          children: sub.React.createElement(MaybePlumeComp, {
+            ...props,
+            ref,
+          }),
+        }
+      )
+    ) as typeof MaybePlumeComp;
     Object.assign(CanvasComponentWrapper, {
       displayName: getExportedComponentName(component),
       ...(component.plumeInfo

diff --git a/platform/wab/src/wab/client/components/docs/DocsPortalEditor.tsx b/platform/wab/src/wab/client/components/docs/DocsPortalEditor.tsx
@@ -220,10 +220,12 @@ ${codePreviewCtx?.getCode() ?? docsCtxCode}
         // Plasmic* components.
         // See https://github.com/microsoft/monaco-editor/issues/264#issuecomment-654578687
         monaco_.languages.typescript.typescriptDefaults.addExtraLib(
+          // @ts-expect-error: Using raw react types as a string
           REACT_TYPES,
           `file:///node_modules/@types/react/index.d.ts`
         );
         monaco_.languages.typescript.typescriptDefaults.addExtraLib(
+          // @ts-expect-error: Using raw react types as a string
           REACT_WEB_TYPES,
           `file:///node_modules/@plasmicapp/react-web/index.d.ts`
         );

diff --git a/platform/wab/src/wab/client/components/style-controls/StyleToggleButton.tsx b/platform/wab/src/wab/client/components/style-controls/StyleToggleButton.tsx
@@ -42,12 +42,11 @@ function StyleToggleButton(props: StyleToggleButtonProps) {
       }}
       isDisabled={isDisabled}
       root={{
-        // @ts-expect-error
+        as: "button",
         props: {
           "aria-disabled": isDisabled,
           "data-plasmic-prop": dataPlasmicProp,
         },
-        // @ts-expect-error
         wrap: (x) =>
           !isDisabled ? (
             <Tooltip

diff --git a/platform/wab/src/wab/client/components/style-controls/StyleToggleButtonGroup.tsx b/platform/wab/src/wab/client/components/style-controls/StyleToggleButtonGroup.tsx
@@ -4,6 +4,7 @@ import {
   DefaultStyleToggleButtonGroupProps,
   PlasmicStyleToggleButtonGroup,
 } from "@/wab/client/plasmic/plasmic_kit_style_controls/PlasmicStyleToggleButtonGroup";
+import { isReactElementOfType } from "@/wab/shared/react-utils";
 import { Tooltip } from "antd";
 import * as React from "react";
 import flattenChildren from "react-keyed-flatten-children";
@@ -28,7 +29,7 @@ function StyleToggleButtonGroup(props: StyleToggleButtonGroupProps) {
     ...rest
   } = props;
   const newChildren = flattenChildren(props.children).map((child) => {
-    if (!React.isValidElement(child) || child.type !== StyleToggleButton) {
+    if (!isReactElementOfType(StyleToggleButton, child)) {
       throw new Error(
         `Can only have instances of StyleToggleButton as children to StyleToggleButtonGroup`
       );