use Typescript ESM module resolution strategy

.changeset/angry-owls-buy.md

@@ -0,0 +1,36 @@
+---
+'@finos/eslint-plugin-legend-studio': major
+'@finos/legend-application': major
+'@finos/legend-art': major
+'@finos/legend-dev-utils': major
+'@finos/legend-extension-dsl-data-space': major
+'@finos/legend-extension-dsl-diagram': major
+'@finos/legend-extension-dsl-persistence': major
+'@finos/legend-extension-dsl-text': major
+'@finos/legend-extension-external-format-json-schema': major
+'@finos/legend-extension-external-language-morphir': major
+'@finos/legend-extension-external-store-service': major
+'@finos/legend-extension-mapping-generation': major
+'@finos/legend-graph': major
+'@finos/legend-graph-extension-collection': major
+'@finos/legend-manual-tests': major
+'@finos/legend-model-storage': major
+'@finos/legend-query': major
+'@finos/legend-server-depot': major
+'@finos/legend-server-sdlc': major
+'@finos/legend-shared': major
+'@finos/legend-studio': major
+'@finos/legend-studio-extension-management-toolkit': major
+'@finos/legend-studio-extension-query-builder': major
+'@finos/legend-taxonomy': major
+'@finos/legend-tracer-extension-zipkin': major
+---
+
+**BREAKING CHANGE:** Use `NodeNext` (`ESM` module resolution strategy for `Typescript`). Read more about this [here](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#esm-nodejs). This transition would be relatively smooth, except that we must use `ESM`-styled import (with extensions) for relative path. For example:
+
+```ts
+// before
+import { someFunction } from './Utils';
+// after
+import { someFunction } from './Utils.js';
+```

.changeset/four-knives-play.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-dev-utils': major
+---
+
+**BREAKING CHANGE:** Cleanup `Webpack` configuration utility: removed field `extraBabelLoaderIncludePatterns`.

.changeset/hip-carpets-enjoy.md

@@ -0,0 +1,33 @@
+---
+'@finos/eslint-plugin-legend-studio': patch
+'@finos/legend-application': patch
+'@finos/legend-art': patch
+'@finos/legend-dev-utils': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-persistence': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-extension-external-format-json-schema': patch
+'@finos/legend-extension-external-language-morphir': patch
+'@finos/legend-extension-external-store-service': patch
+'@finos/legend-extension-mapping-generation': patch
+'@finos/legend-graph': patch
+'@finos/legend-graph-extension-collection': patch
+'@finos/legend-manual-tests': patch
+'@finos/legend-model-storage': patch
+'@finos/legend-query': patch
+'@finos/legend-query-app': patch
+'@finos/legend-query-deployment': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-shared': patch
+'@finos/legend-studio': patch
+'@finos/legend-studio-app': patch
+'@finos/legend-studio-deployment': patch
+'@finos/legend-studio-extension-management-toolkit': patch
+'@finos/legend-studio-extension-query-builder': patch
+'@finos/legend-taxonomy': patch
+'@finos/legend-taxonomy-app': patch
+'@finos/legend-taxonomy-deployment': patch
+'@finos/legend-tracer-extension-zipkin': patch
+---

fixtures/legend-mock-server/src/index.ts

@@ -14,8 +14,18 @@
  * limitations under the License.
  */
 
-import Fastify from 'fastify';
-import FastifyCORS from '@fastify/cors';
+/**
+ * Previously, these exports rely on ES module interop to expose `default` export
+ * properly. But since we use `ESM` for Typescript resolution now, we lose this
+ *
+ * TODO: remove these when the package properly work with Typescript's nodenext
+ * module resolution
+ *
+ * @workaround ESM
+ * See https://github.com/microsoft/TypeScript/issues/49298
+ */
+import { default as Fastify } from 'fastify';
+import { default as FastifyCORS } from '@fastify/cors';
 import TAXONOMY_TREE_DATA from './TEST_DATA__TaxonomyTreeData.json' assert { type: 'json' };
 
 const PORT = 60001;

packages/legend-application/src/stores/CJS__Fuse.cts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Previously, these exports rely on ES module interop to expose `default` export
+ * properly. But since we use `ESM` for Typescript resolution now, we lose this
+ * so we have to workaround by importing these and re-export them from CJS
+ *
+ * TODO: remove these when the package properly work with Typescript's nodenext
+ * module resolution
+ *
+ * @workaround ESM
+ * See https://github.com/microsoft/TypeScript/issues/49298
+ */
+export { default as Fuse } from 'fuse.js';

packages/legend-application/src/stores/LegendApplicationAssistantService.ts

@@ -21,7 +21,7 @@ import type {
 } from './LegendApplicationDocumentationService.js';
 import type { LegendApplicationConfig } from './LegendApplicationConfig.js';
 import type { ApplicationStore } from './ApplicationStore.js';
-import Fuse from 'fuse.js';
+import { Fuse } from './CJS__Fuse.cjs';
 import {
   type MarkdownText,
   guaranteeNonEmptyString,

packages/legend-application/tsconfig.json

@@ -6,7 +6,7 @@
     "rootDir": "src",
     "jsx": "react-jsxdev"
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json", "src/**/*.cts"],
   "references": [
     { "path": "../legend-shared" },
     { "path": "../legend-art" },

packages/legend-art/jest/mockESM.jsx → packages/legend-art/jest/ReactMarkdownMocker.jsx

@@ -14,13 +14,22 @@
  * limitations under the License.
  */
 
+import { jest } from '@jest/globals';
+
 /**
  * Since these modules are in ESM, Jest does not yet play well with them so we can mock them out during
  * testing without much harm.
  *
  * See https://github.com/remarkjs/remark/discussions/814
  * See https://github.com/remarkjs/react-markdown/issues/635
  *
+ * NOTE: we could do what we do with `react-dnd` which is to include `react-markdown` and `remark-gfm`
+ * and some of their dependencies to the list of packages to be transformed by `babel-jest`, but mocking
+ * them like this might just be faster. However, usage of `jest.mock` might not be fully supported by
+ * Jest ESM
+ * See https://github.com/facebook/jest/issues/9430
+ * See https://github.com/facebook/jest/pull/10976
+ *
  * We're waiting for
  * See https://github.com/finos/legend-studio/issues/502
  */

packages/legend-art/package.json

@@ -24,7 +24,7 @@
   "type": "module",
   "exports": {
     ".": "./lib/index.js",
-    "./jest/mockESM.jsx": "./jest/mockESM.jsx",
+    "./lib/testMocks/ReactMarkdownMocker.js": "./jest/ReactMarkdownMocker.jsx",
     "./lib/testMocks/MockedMonacoEditor.js": "./lib/testMocks/MockedMonacoEditor.js",
     "./lib/index.css": "./lib/index.css"
   },
@@ -47,8 +47,6 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@emotion/css": "11.9.0",
-    "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
     "@finos/legend-shared": "workspace:*",
     "@fontsource/raleway": "4.5.8",

packages/legend-art/src/components/Icon.tsx → packages/legend-art/src/components/CJS__Icon.cts

@@ -14,7 +14,19 @@
  * limitations under the License.
  */
 
+/**
+ * Previously, these exports rely on ES module interop to expose `default` export
+ * properly. But since we use `ESM` for Typescript resolution now, we lose this
+ * so we have to workaround by importing these and re-export them from CJS
+ *
+ * TODO: remove these when the package properly work with Typescript's nodenext
+ * module resolution
+ *
+ * @workaround ESM
+ * See https://github.com/microsoft/TypeScript/issues/49298
+ */
 export {
+  FaLayerGroup as LayerGroupIcon,
   FaGhost as GhostIcon,
   FaLock as LockIcon,
   FaMask as MaskIcon,
@@ -36,6 +48,7 @@ export {
   FaClock as ClockIcon,
   FaRegClock as EmptyClockIcon,
   FaToggleOn as ToggleIcon,
+  FaQuestion as QuestionIcon,
   FaQuestionCircle as QuestionCircleIcon,
   FaInfoCircle as InfoCircleIcon,
   FaCompress as CompressIcon,
@@ -107,18 +120,22 @@ export {
   FaPauseCircle as PauseCircleIcon,
   FaShare as ShareIcon,
   FaRegCopy as CopyIcon,
-  FaEdit as PencilEditIcon, // to be reviewed/merged
-  FaArrowsAltH as ArrowsAltHIcon, // to be reviewed/merged
-  FaRegWindowMaximize as WindowMaximizeIcon, // to be reviewed/merged
-  FaWindowMaximize as FilledWindowMaximizeIcon, // to be reviewed/merged
-  FaLongArrowAltDown as LongArrowAltDownIcon, // to be reviewed/merged
-  FaLongArrowAltUp as LongArrowAltUpIcon, // to be reviewed/merged
-  FaMeteor as MeteorIcon, // to be reviewed/merged
+  FaEdit as PencilEditIcon, // to be reviewed/combined
+  FaArrowsAltH as ArrowsAltHIcon, // to be reviewed/combined
+  FaRegWindowMaximize as WindowMaximizeIcon, // to be reviewed/combined
+  FaWindowMaximize as FilledWindowMaximizeIcon, // to be reviewed/combined
+  FaLongArrowAltDown as LongArrowAltDownIcon, // to be reviewed/combined
+  FaLongArrowAltUp as LongArrowAltUpIcon, // to be reviewed/combined
+  FaMeteor as MeteorIcon, // to be reviewed/combined
   FaToggleOn as ToggleOnIcon,
   FaToggleOff as ToggleOffIcon,
   FaMapMarkerAlt as MapMarkerIcon,
   FaHatWizard as WizardHatIcon,
   FaRegLaughWink as FaceLaughWinkIcon,
+  FaBusinessTime as BusinessTimeIcon, // to be reviewed/combined
+  FaDatabase as DatabaseIcon,
+  FaServer as ServerIcon,
+  FaTable as TableIcon,
 } from 'react-icons/fa';
 export {
   GiWaterDrop as WaterDropIcon,
@@ -142,6 +159,8 @@ export {
   MdViewHeadline as ViewHeadlineIcon,
   MdWarning as WarningIcon,
   MdAssistant as AssistantIcon,
+  MdSettingsEthernet as SettingsEthernetIcon,
+  MdLink as LinkIcon,
 } from 'react-icons/md';
 export {
   VscError as ErrorIcon,
@@ -179,6 +198,7 @@ export {
 export { BiShapeTriangle as ShapeTriangleIcon } from 'react-icons/bi';
 export { CgOptions as OptionsIcon } from 'react-icons/cg';
 export {
+  FiPackage as PackageIcon,
   FiMinus as MinusIcon,
   FiMousePointer as MousePointerIcon,
   FiMove as MoveIcon,
@@ -187,5 +207,6 @@ export {
   FiTriangle as TriangleIcon,
   FiZoomIn as ZoomInIcon,
   FiZoomOut as ZoomOutIcon,
-  FiGitMerge as TruncatedGitMergeIcon, // to be reviewed/merged
+  FiGitMerge as TruncatedGitMergeIcon, // to be reviewed/combined
 } from 'react-icons/fi';
+export { RiShapeLine as ShapeLineIcon } from 'react-icons/ri';

packages/legend-art/src/components/CJS__ReactSelect.cts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Previously, these exports rely on ES module interop to expose `default` export
+ * properly. But since we use `ESM` for Typescript resolution now, we lose this
+ * so we have to workaround by importing these and re-export them from CJS
+ *
+ * TODO: remove these when the package properly work with Typescript's nodenext
+ * module resolution
+ *
+ * @workaround ESM
+ * See https://github.com/microsoft/TypeScript/issues/49298
+ */
+export { default as CreatableSelect, type Props } from 'react-select/creatable';
+export { default as Select, createFilter } from 'react-select';

packages/legend-art/src/components/CustomSelectorInput.tsx

@@ -21,12 +21,16 @@ import React, {
   forwardRef,
   type LegacyRef,
 } from 'react';
-import { CaretDownIcon, TimesIcon, CircleNotchIcon } from './Icon.js';
-import CreatableSelect, { type Props } from 'react-select/creatable';
-import Select, { createFilter } from 'react-select';
+import { CaretDownIcon, TimesIcon, CircleNotchIcon } from './CJS__Icon.cjs';
 import { FixedSizeList } from 'react-window';
+import {
+  type Props,
+  CreatableSelect,
+  Select,
+  createFilter as _createFilter,
+} from './CJS__ReactSelect.cjs';
 
-export { createFilter };
+export const createFilter = _createFilter;
 
 interface ListChildComponentProps {
   index: number;

packages/legend-art/src/components/Input.tsx

@@ -13,37 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import styled from '@emotion/styled';
-import { css, cx } from '@emotion/css';
-import { TimesCircleIcon } from './Icon.js';
 
-// TODO: migrate to `TailWindCSS`
-// See https://github.com/finos/legend-studio/issues/760
-const InputGroup = styled.div`
-  position: relative;
-  width: 100%;
-`;
-
-const class__InputValidationErrorStyle = css`
-  border: 0.1rem solid var(--color-red-300);
-  background: var(--color-red-500);
-  padding-right: 2.3rem;
-  color: var(--color-light-grey-100);
-
-  :focus {
-    border: 0.1rem solid var(--color-red-300);
-  }
-`;
-
-const InputValidationErrorIndicator = styled.div`
-  position: absolute;
-  right: 0.5rem;
-  top: calc(50% - 0.7rem);
-`;
-
-const class__InputValidationErrorIndicatorIcon = css`
-  color: var(--color-red-180);
-`;
+import { clsx } from '../utils/CJS__clsx.cjs';
+import { TimesCircleIcon } from './CJS__Icon.cjs';
 
 export const InputWithInlineValidation: React.FC<
   React.InputHTMLAttributes<HTMLInputElement> & {
@@ -52,20 +24,21 @@ export const InputWithInlineValidation: React.FC<
 > = (props) => {
   const { validationErrorMessage, className, ...inputProps } = props;
   return (
-    <InputGroup>
+    <div className="input--with-validation">
       <input
-        className={cx(className, {
-          [class__InputValidationErrorStyle]: Boolean(validationErrorMessage),
+        className={clsx(className, {
+          'input--with-validation--error': Boolean(validationErrorMessage),
         })}
         {...inputProps}
       />
       {validationErrorMessage && (
-        <InputValidationErrorIndicator title={validationErrorMessage}>
-          <TimesCircleIcon
-            className={class__InputValidationErrorIndicatorIcon}
-          />
-        </InputValidationErrorIndicator>
+        <div
+          className="input--with-validation__error"
+          title={validationErrorMessage}
+        >
+          <TimesCircleIcon className="input--with-validation__error__indicator" />
+        </div>
       )}
-    </InputGroup>
+    </div>
   );
 };

packages/legend-art/src/components/LegendLogo.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import clsx from 'clsx';
+import { clsx } from '../utils/CJS__clsx.cjs';
 
 export const LegendLogo: React.FC<{
   className?: string;