chore(connect-react): externalize @emotion/react (1.0.0-preview.2)

tjk · tjk · commit 54ba969d337d · 2024-11-27T10:13:06.000-08:00
diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md
@@ -0,0 +1,11 @@
+<!-- markdownlint-disable MD024 -->
+# Changelog
+
+# [1.0.0-preview.2] - 2024-11-27
+
+- Externalize @emotion/react
+- Minor type improvements
+
+# [1.0.0-preview.1] - 2024-11-22
+
+Initial release
diff --git a/packages/connect-react/examples/nextjs/package-lock.json b/packages/connect-react/examples/nextjs/package-lock.json
diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json
@@ -1,8 +1,10 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.1",
+  "version": "1.0.0-preview.2",
   "description": "Pipedream Connect library for React",
-  "files": [ "dist" ],
+  "files": [
+    "dist"
+  ],
   "type": "module",
   "browser": "./dist/connect-react.umd.js",
   "module": "./dist/connect-react.es.js",
@@ -31,6 +33,7 @@
     "react-select": "^5.8.2"
   },
   "devDependencies": {
+    "@emotion/react": "^11.13.5",
     "@types/lodash.isequal": "^4.5.8",
     "@types/react": "^18.3.12",
     "vite": "^5.4.11",
diff --git a/packages/connect-react/src/components/ComponentForm.tsx b/packages/connect-react/src/components/ComponentForm.tsx
@@ -8,14 +8,14 @@ import type {
 } from "@pipedream/sdk";
 import { InternalComponentForm } from "./InternalComponentForm";
 
-export type ComponentFormProps<T extends ConfigurableProps> = {
+export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<T>> = {
   userId: string;
   component: V1Component<T>;
-  configuredProps?: ConfiguredProps<T>; // XXX value?
+  configuredProps?: U; // XXX value?
   disableQueryDisabling?: boolean;
   propNames?: string[]; // TODO PropNames<T>
   onSubmit?: (ctx: FormContext<T>) => void | Promise<void>; // if passed, we include button
-  onUpdateConfiguredProps?: (v: ConfiguredProps<T>) => void; // XXX onChange?
+  onUpdateConfiguredProps?: (v: U) => void; // XXX onChange?
   hideOptionalProps?: boolean;
 };
 
diff --git a/packages/connect-react/src/components/ComponentFormContainer.tsx b/packages/connect-react/src/components/ComponentFormContainer.tsx
@@ -1,3 +1,4 @@
+import { ConfigurableProps } from "@pipedream/sdk";
 import { useComponent } from "../hooks/use-component";
 import {
   ComponentForm, type ComponentFormProps,
@@ -6,11 +7,11 @@ import {
 // given
 // key: string // in future, can be [@<owner>/]<key>[@<version>] -- for now just key
 // load a component and pass it down
-type ComponentFormContainerProps = Omit<ComponentFormProps, "component"> & {
+type ComponentFormContainerProps<T extends ConfigurableProps> = Omit<ComponentFormProps<T>, "component"> & {
   componentKey: string;
 };
 
-export function ComponentFormContainer(props: ComponentFormContainerProps) {
+export function ComponentFormContainer<T extends ConfigurableProps>(props: ComponentFormContainerProps<T>) {
   const {
     isLoading,
     error,
diff --git a/packages/connect-react/src/components/Control.tsx b/packages/connect-react/src/components/Control.tsx
@@ -1,21 +1,21 @@
 import { FormContext } from "../hooks/form-context";
 import { FormFieldContext } from "../hooks/form-field-context";
-import { ConfigurableProp } from "@pipedream/sdk";
+import { ConfigurableProp, ConfigurableProps } from "@pipedream/sdk";
 // import { ControlAny } from "./ControlAny"
 import { ControlApp } from "./ControlApp";
 import { ControlBoolean } from "./ControlBoolean";
 import { ControlInput } from "./ControlInput";
 import { ControlSelect } from "./ControlSelect";
 import { RemoteOptionsContainer } from "./RemoteOptionsContainer";
 
-export type ControlProps<T extends ConfigurableProp> = {
-  field: FormFieldContext<T>;
-  form: FormContext;
+export type ControlProps<T extends ConfigurableProps, U extends ConfigurableProp> = {
+  field: FormFieldContext<U>;
+  form: FormContext<T>;
 };
 
 // TODO for easier Control* overriding, should probably pass more stuff in so they don't need to reach into context?
 // ... or do we want the API to incentivize just reaching into context?
-export function Control<T extends ConfigurableProp>(props: ControlProps<T>) {
+export function Control<T extends ConfigurableProps, U extends ConfigurableProp>(props: ControlProps<T, U>) {
   const {
     field, form,
   } = props;
@@ -63,7 +63,7 @@ export function Control<T extends ConfigurableProp>(props: ControlProps<T>) {
   // case "any":
   //   return <ControlAny />
   case "app":
-    return <ControlApp app={app} />;
+    return <ControlApp app={app!} />;
   case "boolean":
     return <ControlBoolean />;
   case "string":
diff --git a/packages/connect-react/src/components/ControlSelect.tsx b/packages/connect-react/src/components/ControlSelect.tsx
@@ -24,7 +24,7 @@ export function ControlSelect<T>({
     select, theme,
   } = useCustomize();
 
-  const baseSelectProps: BaseReactSelectProps = {
+  const baseSelectProps: BaseReactSelectProps<any, any, any> = {
     styles: {
       container: (base): CSSObjectWithLabel => ({
         ...base,
diff --git a/packages/connect-react/src/components/Description.tsx b/packages/connect-react/src/components/Description.tsx
@@ -1,19 +1,19 @@
 import type { CSSProperties } from "react";
 import Markdown from "react-markdown";
-import { ConfigurableProp } from "@pipedream/sdk";
+import { ConfigurableProp, ConfigurableProps } from "@pipedream/sdk";
 import { useCustomize } from "../hooks/customization-context";
 import { FormFieldContext } from "../hooks/form-field-context";
 import { FormContext } from "../hooks/form-context";
 
-export type DescriptionProps<T extends ConfigurableProp> = {
+export type DescriptionProps<T extends ConfigurableProps, U extends ConfigurableProp> = {
   markdown?: string;
-  field: FormFieldContext<T>;
-  form: FormContext;
+  field: FormFieldContext<U>;
+  form: FormContext<T>;
 };
 
 // XXX should we rename to FieldDescription (so shared prefix + clear we need field context
 // eg. cannot be used in OptionalFieldButton, or they need to be set up better)
-export function Description<T extends ConfigurableProp>(props: DescriptionProps<T>) {
+export function Description<T extends ConfigurableProps, U extends ConfigurableProp>(props: DescriptionProps<T, U>) {
   if (!props.field) {
     console.log("props", props);
   }
diff --git a/packages/connect-react/src/components/InternalField.tsx b/packages/connect-react/src/components/InternalField.tsx
@@ -43,7 +43,7 @@ export function InternalField<T extends ConfigurableProp>({
       setConfiguredProp(idx, value);
     },
     extra: {
-      app: app as AppInfo | undefined, // XXX fix ts
+      app, // XXX fix ts
     },
   };
 
diff --git a/packages/connect-react/src/components/Label.tsx b/packages/connect-react/src/components/Label.tsx
@@ -1,16 +1,16 @@
 import type { CSSProperties } from "react";
-import type { ConfigurableProp } from "@pipedream/sdk";
+import type { ConfigurableProp, ConfigurableProps } from "@pipedream/sdk";
 import { useCustomize } from "../hooks/customization-context";
 import type { FormFieldContext } from "../hooks/form-field-context";
 import { FormContext } from "../hooks/form-context";
 
-export type LabelProps<T extends ConfigurableProp> = {
+export type LabelProps<T extends ConfigurableProps, U extends ConfigurableProp> = {
   text: string;
-  field: FormFieldContext<T>;
-  form: FormContext;
+  field: FormFieldContext<U>;
+  form: FormContext<T>;
 };
 
-export function Label<T extends ConfigurableProp>(props: LabelProps<T>) {
+export function Label<T extends ConfigurableProps, U extends ConfigurableProp>(props: LabelProps<T, U>) {
   const {
     text, field,
   } = props;
@@ -27,7 +27,8 @@ export function Label<T extends ConfigurableProp>(props: LabelProps<T>) {
     lineHeight: "1.5",
   };
 
+  // XXX have to fix typing in customization (and elsewere really)
   return (
-    <label htmlFor={id} {...getProps("label", baseStyles, props)}>{text}</label>
+    <label htmlFor={id} {...getProps("label", baseStyles, props as any)}>{text}</label>
   );
 }
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
 import Select from "react-select";
 import { useComponents } from "../hooks/use-components";
 import {
@@ -17,6 +18,7 @@ export function SelectComponent({
   value,
   onChange,
 }: SelectComponentProps) {
+  const instanceId = useId();
   const {
     isLoading,
     // TODO error
@@ -27,7 +29,7 @@ export function SelectComponent({
   });
   return (
     <Select
-      instanceId={app?.name_slug}
+      instanceId={instanceId}
       className="react-select-container text-sm"
       classNamePrefix="react-select"
       options={components}
diff --git a/packages/connect-react/src/hooks/form-field-context.tsx b/packages/connect-react/src/hooks/form-field-context.tsx
@@ -2,11 +2,11 @@ import {
   createContext, useContext,
 } from "react";
 import type {
-  AppInfo, ConfigurableProp, ConfigurablePropApp, PropValue,
+  AppResponse, ConfigurableProp, ConfigurablePropApp, PropValue,
 } from "@pipedream/sdk";
 
 export type FormFieldContextExtra<T extends ConfigurableProp> = T extends ConfigurablePropApp ? {
-  app?: AppInfo;
+  app?: AppResponse;
 } : Record<string, never>;
 
 export type FormFieldContext<T extends ConfigurableProp> = {
diff --git a/packages/connect-react/src/hooks/use-app.tsx b/packages/connect-react/src/hooks/use-app.tsx
@@ -1,15 +1,15 @@
 import {
-  useQuery, type UseQueryOptions,
+  useSuspenseQuery, type UseSuspenseQueryOptions,
 } from "@tanstack/react-query";
 import { useFrontendClient } from "./frontend-client-context";
 import type { AppRequestResponse } from "@pipedream/sdk";
 
 /**
  * Get details about an app
  */
-export const useApp = (slug: string, opts?:{ useQueryOpts?: Omit<UseQueryOptions<AppRequestResponse>, "queryKey" | "queryFn">;}) => {
+export const useApp = (slug: string, opts?:{ useQueryOpts?: Omit<UseSuspenseQueryOptions<AppRequestResponse>, "queryKey" | "queryFn">;}) => {
   const client = useFrontendClient();
-  const query = useQuery({
+  const query = useSuspenseQuery({
     queryKey: [
       "app",
       slug,
diff --git a/packages/connect-react/src/theme.ts b/packages/connect-react/src/theme.ts
@@ -1,8 +1,10 @@
 import {
-  defaultTheme as reactSelectDefaultTheme,
+  defaultTheme as _reactSelectDefaultTheme,
   type Theme as ReactSelectTheme,
 } from "react-select";
 
+const reactSelectDefaultTheme = _reactSelectDefaultTheme as Theme;
+
 export type Colors = {
   // select.control:boxShadow
   // select.control:focused:borderColor
@@ -146,7 +148,7 @@ export const unstyledTheme: Theme = {
 export function getReactSelectTheme(
   theme: CustomThemeConfig | undefined,
 ): ReactSelectTheme {
-  if (!theme) return reactSelectDefaultTheme;
+  if (!theme) return _reactSelectDefaultTheme;
   const _theme = typeof theme == "function"
     ? theme(defaultTheme)
     : theme;
@@ -157,13 +159,10 @@ export function getReactSelectTheme(
     _theme,
   );
   return {
-    borderRadius:
-      typeof borderRadius !== "number"
-        ? reactSelectDefaultTheme.borderRadius
-        : borderRadius,
-    colors: colors as ReactSelectTheme["colors"],
+    borderRadius,
+    colors,
     spacing,
-  };
+  } as ReactSelectTheme;
 }
 
 export function mergeTheme(
diff --git a/packages/connect-react/vite.config.mts b/packages/connect-react/vite.config.mts
@@ -12,12 +12,24 @@ export default defineConfig({
     },
     rollupOptions: {
       external: [
+        "@emotion/react",
         "react",
         "react-dom",
         "react/jsx-runtime",
       ],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "react/jsx-runtime": "react/jsx-runtime",
+          "@emotion/react": "@emotion/react",
+        },
+      },
     },
   },
+  resolve: {
+    dedupe: ["@emotion/react"],
+  },
   plugins: [
     dts({
       insertTypesEntry: true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
