aws-amplify · zchenwei · Jan 27, 2023 · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023
@@ -2,11 +2,11 @@
   "name": "@aws-amplify/ui-react-core",
   "version": "2.1.8",
   "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/esm/index.mjs",
   "react-native": "dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
+      "import": "./dist/esm/index.mjs",
       "require": "./dist/index.js"
     },
     "./package.json": "./package.json"

@@ -25,6 +25,7 @@ const config = defineConfig([
     output: {
       dir: 'dist/esm',
       format: 'es',
+      entryFileNames: '[name].mjs',
       preserveModules: true,
       preserveModulesRoot: 'src',
       sourcemap: false,

diff --git a/packages/react-core/src/Authenticator/hooks/useAuthenticator/utils.ts b/packages/react-core/src/Authenticator/hooks/useAuthenticator/utils.ts
@@ -8,7 +8,6 @@ import {
   UnverifiedContactMethods,
   getActorContext,
 } from '@aws-amplify/ui';
-import isString from 'lodash/isString';
 
 import { areEmptyArrays, areEmptyObjects } from '../../../utils';
 import { AuthenticatorLegacyField, AuthenticatorLegacyFields } from '../types';
@@ -79,8 +78,7 @@ const convertContactMethodsToFields = (
   return (
     unverifiedContactMethods &&
     Object.entries(unverifiedContactMethods).map(([name, value]) => {
-      const valueIsString = isString(value);
-      if (!valueIsString || !name) {
+      if (typeof value !== 'string' || !name) {
         return {} as AuthenticatorLegacyField;
       }
       return { name, label: value, type: 'radio', value };

@@ -3,7 +3,7 @@ import {
   InAppMessageInteractionEvent,
   Notifications,
 } from '@aws-amplify/notifications';
-import isNil from 'lodash/isNil';
+import isNil from 'lodash/isNil.js';
 
 import { RenderNothing } from '../../../components';
 import { useInAppMessaging } from '../useInAppMessaging';

diff --git a/packages/react-core/src/InAppMessaging/utils/handleMessageAction.ts b/packages/react-core/src/InAppMessaging/utils/handleMessageAction.ts
@@ -1,5 +1,5 @@
 import { ConsoleLogger as Logger } from '@aws-amplify/core';
-import isString from 'lodash/isString';
+import isString from 'lodash/isString.js';
 
 import { MessageAction } from '../types';
 

diff --git a/packages/react-core/src/hooks/useHasValueUpdated.ts b/packages/react-core/src/hooks/useHasValueUpdated.ts
@@ -1,5 +1,5 @@
 import usePreviousValue from './usePreviousValue';
-import isUndefined from 'lodash/isUndefined';
+import isUndefined from 'lodash/isUndefined.js';
 
 export default function useHasValueUpdated<Value>(
   value: Value,

@@ -1,5 +1,5 @@
-import isEmpty from 'lodash/isEmpty';
-import isObject from 'lodash/isObject';
+import isEmpty from 'lodash/isEmpty.js';
+import isObject from 'lodash/isObject.js';
 
 function isEmptyArray<T>(value: T): boolean {
   return Array.isArray(value) && isEmpty(value);

@@ -9,7 +9,7 @@
     "baseUrl": ".",
     "declaration": true,
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "importHelpers": true,
     "moduleResolution": "node",
     "noImplicitAny": true,

@@ -2,15 +2,15 @@
   "name": "@aws-amplify/ui-react",
   "version": "4.3.3",
   "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/esm/index.mjs",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
+      "import": "./dist/esm/index.mjs",
       "require": "./dist/index.js"
     },
     "./internal": {
-      "import": "./dist/esm/internal.js",
+      "import": "./dist/esm/internal.mjs",
       "require": "./dist/internal.js"
     },
     "./styles.css": "./dist/styles.css",
@@ -40,7 +40,8 @@
     "dev:build": "tsup",
     "clean": "rimraf dist node_modules",
     "lint": "tsc --noEmit --project tsconfig.dev.json && eslint src --ext .js,.ts,.tsx",
-    "test": "yarn test:unit",
+    "test": "yarn test:unit && yarn test:esm",
+    "test:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-react\"'",
     "test:watch": "yarn test:unit:watch",
     "test:unit": "jest",
     "test:unit:watch": "jest --watch",
@@ -123,13 +124,13 @@
   "size-limit": [
     {
       "name": "Authenticator",
-      "path": "dist/esm/index.js",
+      "path": "dist/esm/index.mjs",
       "import": "{ Authenticator }",
       "limit": "120 kB"
     },
     {
       "name": "Geo",
-      "path": "dist/esm/index.js",
+      "path": "dist/esm/index.mjs",
       "import": "{ MapView, LocationSearch }",
       "limit": "330 kB"
     }

@@ -1,7 +1,7 @@
 // rollup.config.js
 import { defineConfig } from 'rollup';
 import typescript from '@rollup/plugin-typescript';
-import commonjs from '@rollup/plugin-commonjs';
+// import commonjs from '@rollup/plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
 import styles from 'rollup-plugin-styles';
 import externals from 'rollup-plugin-node-externals';
@@ -16,7 +16,6 @@ const config = defineConfig([
       sourcemap: false,
     },
     plugins: [
-      commonjs(),
       externals({ include: /^@aws-amplify/ }),
       typescript({ declarationDir: 'dist/types', sourceMap: false }),
       terser(),
@@ -28,12 +27,12 @@ const config = defineConfig([
     output: {
       dir: 'dist/esm',
       format: 'es',
+      entryFileNames: '[name].mjs',
       preserveModules: true,
       preserveModulesRoot: 'src',
       sourcemap: false,
     },
     plugins: [
-      commonjs(),
       externals({ include: /^@aws-amplify/ }),
       typescript({ outDir: 'dist/esm', declaration: false, sourceMap: false }),
       terser(),

@@ -1,5 +1,5 @@
 import React from 'react';
-import isEqual from 'lodash/isEqual';
+import isEqual from 'lodash/isEqual.js';
 
 import { Logger } from 'aws-amplify';
 import {

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import isEmpty from 'lodash/isEmpty';
+import isEmpty from 'lodash/isEmpty.js';
 import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core';
 
 import { useMessageImage } from '../useMessageImage';

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { DirectionProvider } from '@radix-ui/react-direction';
+import * as RadixDirection from '@radix-ui/react-direction';
 
 import { createTheme, Theme, WebTheme } from '@aws-amplify/ui';
 
 import { AmplifyContext } from './AmplifyContext';
 
+const { DirectionProvider } = RadixDirection;
 export type ColorMode = 'system' | 'light' | 'dark';
 export type Direction = 'ltr' | 'rtl';
 

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import debounce from 'lodash/debounce';
+import debounce from 'lodash/debounce.js';
 import * as React from 'react';
 
 import { Flex } from '../Flex';

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Root } from '@radix-ui/react-accordion';
+import * as Accordion from '@radix-ui/react-accordion';
 import classNames from 'classnames';
 
 import { useDeprecationWarning } from '../../hooks/useDeprecationWarning';
@@ -9,6 +9,7 @@ import { ExpanderProps } from '../types/expander';
 import { Primitive } from '../types/view';
 import { splitPrimitiveProps } from '../shared/styleUtils';
 
+const { Root } = Accordion;
 const ExpanderPrimitive: Primitive<ExpanderProps, typeof Root> = (
   {
     children,

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
+import * as Accordion from '@radix-ui/react-accordion';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
@@ -10,6 +10,7 @@ import { splitPrimitiveProps } from '../shared/styleUtils';
 import { useStableId } from '../utils/useStableId';
 import { View } from '../View';
 
+const { Item, Header, Trigger, Content } = Accordion;
 export const EXPANDER_ITEM_TEST_ID = 'expander-item';
 export const EXPANDER_HEADER_TEST_ID = 'expander-header';
 export const EXPANDER_ICON_TEST_ID = 'expander-icon';

@@ -1,17 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-} from '@radix-ui/react-dropdown-menu';
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
 
 import { ButtonGroup } from '../ButtonGroup';
 import { ComponentClassNames } from '../shared/constants';
 import { IconMenu } from '../Icon/internal';
 import { MenuButton } from './MenuButton';
 import { MenuProps, Primitive } from '../types';
 
+const { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } = Dropdown;
 export const MENU_TRIGGER_TEST_ID = 'amplify-menu-trigger-test-id';
 export const MENU_ITEMS_GROUP_TEST_ID = 'amplify-menu-items-group-test-id';
 

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
 
 import { ComponentClassNames } from '../shared/constants';
 import { MenuButton } from './MenuButton';
 import { MenuItemProps } from '../types';
 
+const { DropdownMenuItem } = Dropdown;
 export const MENU_ITEM_TEST_ID = 'amplify-menu-item-test-id';
 
 /**

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
+import * as RadixSlider from '@radix-ui/react-slider';
 import * as React from 'react';
 
 import { classNameModifier } from '../shared/utils';
@@ -15,6 +15,7 @@ import { splitPrimitiveProps } from '../shared/styleUtils';
 import { View } from '../View';
 import { useStableId } from '../utils/useStableId';
 
+const { Range, Root, Thumb, Track } = RadixSlider;
 export const SLIDER_LABEL_TEST_ID = 'slider-label';
 export const SLIDER_ROOT_TEST_ID = 'slider-root';
 export const SLIDER_TRACK_TEST_ID = 'slider-track';

@@ -1,17 +1,14 @@
 import classNames from 'classnames';
-import {
-  Root,
-  List,
-  Trigger as RadixTab,
-  Content as Panel,
-} from '@radix-ui/react-tabs';
+import * as RadixTabs from '@radix-ui/react-tabs';
 import * as React from 'react';
 
 import { ComponentClassNames } from '../shared/constants';
 import { Flex } from '../Flex';
 import { TabsProps, TabItemProps, Primitive } from '../types';
 import { View } from '../View';
 
+const { Root, List, Trigger: RadixTab, Content: Panel } = RadixTabs;
+
 const isTabsType = (child: any): child is React.ReactElement<TabItemProps> => {
   return (
     child !== null &&

@@ -4,7 +4,7 @@
     "baseUrl": ".",
     "declaration": true,
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "rootDir": "./src",
     "outDir": "./dist",
     "importHelpers": true,

@@ -2,11 +2,11 @@
   "name": "@aws-amplify/ui",
   "version": "5.5.0",
   "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/esm/index.mjs",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
+      "import": "./dist/esm/index.mjs",
       "require": "./dist/index.js"
     },
     "./package.json": "./package.json",
@@ -33,7 +33,7 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "yarn build:css && yarn build:js",
-    "build:css": "ts-node --transpile-only ./scripts/generateCSS.ts",
+    "build:css": "node -r esbuild-register ./scripts/generateCSS.ts",
     "build:js": "rollup --config",
     "build:dev:js": "tsup",
     "clean": "rimraf dist node_modules",
@@ -64,6 +64,7 @@
     "@types/webpack-env": "^1.16.2",
     "@typescript-eslint/parser": "^5.20.0",
     "autoprefixer": "^10.3.1",
+    "esbuild-register": "^3.4.2",
     "fs-extra": "^10.0.0",
     "glob": "^7.1.7",
     "globcat": "^1.3.4",

@@ -25,6 +25,7 @@ const config = defineConfig([
     output: {
       dir: 'dist/esm',
       format: 'es',
+      entryFileNames: '[name].mjs',
       preserveModules: true,
       preserveModulesRoot: 'src',
       sourcemap: false,

@@ -1,7 +1,7 @@
 /**
  * This file contains helpers that process authenticator state machine context
  */
-import includes from 'lodash/includes';
+import includes from 'lodash/includes.js';
 
 import {
   LoginMechanismArray,

@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep.js';
 import { translate } from '../../../i18n/translations';
 import { FormFields, FormFieldsArray } from '../../../types';
 

@@ -5,7 +5,7 @@
 
 import { Hub } from 'aws-amplify';
 import { appendToCognitoUserAgent } from '@aws-amplify/auth';
-import { waitFor } from 'xstate/lib/waitFor';
+import { waitFor } from 'xstate/lib/waitFor.js';
 
 import { AuthInterpreter, AuthMachineHubHandler } from '../../types';
 import { ALLOWED_SPECIAL_CHARACTERS } from './constants';

@@ -1,5 +1,5 @@
 import { Auth } from 'aws-amplify';
-import { assign, stop } from 'xstate/lib/actions';
+import { actions } from 'xstate';
 
 import {
   ActorContextWithForms,
@@ -8,6 +8,8 @@ import {
   SignUpContext,
 } from '../../types';
 
+const { assign, stop } = actions;
+
 export const stopActor = (machineId: string) => {
   return stop(machineId);
 };

@@ -1,6 +1,6 @@
 import { Auth } from 'aws-amplify';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get.js';
+import isEmpty from 'lodash/isEmpty.js';
 import { createMachine, sendUpdate } from 'xstate';
 import {
   AuthChallengeName,