Preparation before removing babel plugins - adding import extensions and displayName manually

cypress/webpack.config.cjs

@@ -78,6 +78,14 @@ module.exports = {
   mode: 'development',
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
+    // Source carries explicit `.js` extensions on relative imports (added for
+    // native-ESM library output). When bundling `.ts`/`.tsx` source directly,
+    // map a `.js` specifier back to its TypeScript source.
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js'],
+      '.jsx': ['.tsx', '.jsx'],
+      '.mjs': ['.mts', '.mjs']
+    },
     alias: getWorkspaceAliases(),
     fallback: {
       fs: false,

packages/__docs__/src/App/index.tsx

@@ -90,6 +90,7 @@ import { AppContext } from '../appContext'
 
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class App extends Component<AppProps, AppState> {
+  static displayName = 'App'
   static allowedProps = allowedProps
   static contextType = AppContext
   declare context: React.ContextType<typeof AppContext>

packages/__docs__/src/CodeSandboxButton/index.tsx

@@ -33,6 +33,7 @@ import { allowedProps } from './props'
 import type { CodeSandboxButtonProps } from './props'
 
 class CodeSandboxButton extends Component<CodeSandboxButtonProps> {
+  static displayName = 'CodeSandboxButton'
   static allowedProps = allowedProps
   static defaultProps = {
     options: {},

packages/__docs__/src/ColorBand/index.tsx

@@ -35,6 +35,7 @@ import type { ColorBandProps } from './props'
 
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class ColorBand extends Component<ColorBandProps> {
+  static displayName = 'ColorBand'
   static allowedProps = allowedProps
   componentDidMount() {
     this.props.makeStyles?.()

packages/__docs__/src/ColorCard/index.tsx

@@ -30,6 +30,7 @@ import { ColorName } from '../ColorName'
 import type { ColorCardProps } from './props'
 import { allowedProps } from './props'
 class ColorCard extends Component<ColorCardProps> {
+  static displayName = 'ColorCard'
   static allowedProps = allowedProps
   static defaultProps = {
     minimal: false

packages/__docs__/src/ColorName/index.tsx

@@ -31,6 +31,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import type { ColorNameProps, ColorNameState } from './props'
 import { allowedProps } from './props'
 class ColorName extends Component<ColorNameProps, ColorNameState> {
+  static displayName = 'ColorName'
   static allowedProps = allowedProps
   static defaultProps = {
     as: 'span'

packages/__docs__/src/ColorSwatch/index.tsx

@@ -34,6 +34,7 @@ import type { ColorSwatchProps } from './props'
 
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class ColorSwatch extends Component<ColorSwatchProps> {
+  static displayName = 'ColorSwatch'
   static allowedProps = allowedProps
   componentDidMount() {
     this.props.makeStyles?.()

packages/__docs__/src/ColorTable/index.tsx

@@ -31,6 +31,7 @@ import { ColorSwatch } from '../ColorSwatch'
 import { ColorTableProps } from './props'
 
 class ColorTable extends Component<ColorTableProps> {
+  static displayName = 'ColorTable'
   renderRows() {
     const colorMap: Record<string, string> = Object.keys(
       this.props.colorNames

packages/__docs__/src/ComponentTheme/index.tsx

@@ -38,6 +38,7 @@ type ThemeEntry = { name: string; value: string | number }
 
 @withStyleNew(generateStyle, null)
 class ComponentTheme extends Component<ComponentThemeProps> {
+  static displayName = 'ComponentTheme'
   static allowedProps = allowedProps
 
   renderValueCell(value: undefined | string | number) {

packages/__docs__/src/ContentWrap/index.tsx

@@ -29,6 +29,7 @@ import { allowedProps } from './props'
 import type { ContentWrapProps } from './props'
 
 class ContentWrap extends Component<ContentWrapProps> {
+  static displayName = 'ContentWrap'
   static allowedProps = allowedProps
   static defaultProps = {
     children: null,

packages/__docs__/src/Description/index.tsx

@@ -30,6 +30,7 @@ import { allowedProps } from './props'
 import type { DescriptionProps } from './props'
 
 class Description extends Component<DescriptionProps> {
+  static displayName = 'Description'
   static allowedProps = allowedProps
   compiledMarkdown: ReactElement | null = null
 

packages/__docs__/src/Document/index.tsx

@@ -49,6 +49,7 @@ import type { DocumentProps, DocumentState, DocDataType } from './props'
 
 @withStyleNew(generateStyle)
 class Document extends Component<DocumentProps, DocumentState> {
+  static displayName = 'Document'
   static allowedProps = allowedProps
   static contextType = AppContext
   declare context: React.ContextType<typeof AppContext>

packages/__docs__/src/Figure/index.tsx

@@ -59,6 +59,7 @@ class FigureItem extends Component<PropsWithChildren> {
 
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class Figure extends Component<FigureProps> {
+  static displayName = 'Figure'
   static allowedProps = allowedProps
 
   static defaultProps = {

packages/__docs__/src/Guidelines/index.tsx

@@ -28,6 +28,7 @@ import type { GuidelinesProps } from './props'
 import { allowedProps } from './props'
 
 class Guidelines extends Component<GuidelinesProps> {
+  static displayName = 'Guidelines'
   static allowedProps = allowedProps
   static defaultProps = {
     children: null

packages/__docs__/src/Header/index.tsx

@@ -42,6 +42,7 @@ import { allowedProps } from './props'
 import logo from '../../full_logo.svg'
 
 class Header extends Component<HeaderProps> {
+  static displayName = 'Header'
   static allowedProps = allowedProps
   static defaultProps = {
     version: undefined,

packages/__docs__/src/Hero/index.tsx

@@ -53,6 +53,7 @@ import logo from '../../logo.svg'
 
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class Hero extends Component<HeroProps> {
+  static displayName = 'Hero'
   static allowedProps = allowedProps
   static defaultProps = {
     docs: null

packages/__docs__/src/LoadingScreen/index.tsx

@@ -28,6 +28,7 @@ import { withStyleForDocs as withStyleNew } from '../withStyleForDocs'
 import type { LoadingScreenProps } from './props'
 @withStyleNew(generateStyle, null)
 class LoadingScreen extends Component<LoadingScreenProps> {
+  static displayName = 'LoadingScreen'
   componentDidMount() {
     this.props.makeStyles?.()
   }

packages/__docs__/src/Nav/index.tsx

@@ -39,6 +39,7 @@ import { Alert } from '@instructure/ui-alerts'
 import type { Section } from '../../buildScripts/DataTypes.mjs'
 
 class Nav extends Component<NavProps, NavState> {
+  static displayName = 'Nav'
   _themeId: string
   searchTimeout: ReturnType<typeof setTimeout> | null
   _textInput?: HTMLElement

packages/__docs__/src/NavToggle/index.tsx

@@ -32,6 +32,7 @@ import type { NavToggleProps } from './props'
 import { allowedProps } from './props'
 
 class NavToggle extends Component<NavToggleProps> {
+  static displayName = 'NavToggle'
   static allowedProps = allowedProps
   static defaultProps = {
     variant: 'section',

packages/__docs__/src/Params/index.tsx

@@ -29,6 +29,7 @@ import type { ParamsProps } from './props'
 import { Heading } from '@instructure/ui-heading'
 
 class Params extends Component<ParamsProps> {
+  static displayName = 'Params'
   static defaultProps = {
     layout: 'small'
   }

packages/__docs__/src/Playground/index.tsx

@@ -54,6 +54,7 @@ const fullScreenIconPath = (
 
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class Playground extends Component<PlaygroundProps, PlaygroundState> {
+  static displayName = 'Playground'
   static allowedProps = allowedProps
   static defaultProps = {
     readOnly: false,

packages/__docs__/src/Preview/index.tsx

@@ -36,6 +36,7 @@ import { camelize } from '@instructure/ui-utils'
 
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class Preview extends Component<PreviewProps, PreviewState> {
+  static displayName = 'Preview'
   static allowedProps = allowedProps
 
   static defaultProps = {

packages/__docs__/src/Properties/index.tsx

@@ -44,6 +44,7 @@ import { View } from '@instructure/ui-view'
 
 @withStyleNew(generateStyle, null)
 class Properties extends Component<PropertiesProps> {
+  static displayName = 'Properties'
   static defaultProps = {
     layout: 'small'
   }

packages/__docs__/src/Returns/index.tsx

@@ -28,6 +28,7 @@ import type { ReturnsProps } from './props'
 import Markdown from 'marked-react'
 
 class Returns extends Component<ReturnsProps> {
+  static displayName = 'Returns'
   render() {
     return (
       <Table caption="Returns" margin="0 0 large">

packages/__docs__/src/Search/index.tsx

@@ -37,6 +37,7 @@ import type { SearchProps, SearchState, OptionType } from './props'
 import { debounce } from '@instructure/debounce'
 
 class Search extends Component<SearchProps, SearchState> {
+  static displayName = 'Search'
   static defaultProps = {
     options: undefined
   }

packages/__docs__/src/SearchStatus/index.tsx

@@ -34,6 +34,7 @@ import type { SearchStatusProps } from './props'
 
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class SearchStatus extends Component<SearchStatusProps> {
+  static displayName = 'SearchStatus'
   static defaultProps = {
     size: '1.25rem',
     status: 'inactive'

packages/__docs__/src/Section/index.tsx

@@ -29,6 +29,7 @@ import { Heading } from '../Heading'
 import type { SectionProps } from './props'
 
 class Section extends Component<SectionProps> {
+  static displayName = 'Section'
   static defaultProps = {
     children: null,
     id: undefined,

packages/__docs__/src/Select/index.tsx

@@ -29,6 +29,7 @@ import { Select as UISelect } from '@instructure/ui-select'
 import type { SelectProps, SelectState } from './props'
 
 class Select extends Component<SelectProps, SelectState> {
+  static displayName = 'Select'
   static defaultProps = {
     id: undefined,
     value: undefined,

packages/__docs__/src/TableOfContents/index.tsx

@@ -45,6 +45,7 @@ class TableOfContents extends Component<
   TableOfContentsProps,
   TableOfContentsState
 > {
+  static displayName = 'TableOfContents'
   static allowedProps = allowedProps
 
   constructor(props: TableOfContentsProps) {

packages/__docs__/src/Theme/index.tsx

@@ -47,6 +47,7 @@ type valueof<X> = X[keyof X]
 
 @withStyleForDocs(generateStyle, generateComponentTheme)
 class Theme extends Component<ThemeProps> {
+  static displayName = 'Theme'
   static defaultProps = {
     description: undefined
   }

packages/__docs__/src/ThemeColors/index.tsx

@@ -34,6 +34,7 @@ import { Heading } from '../Heading'
 import type { ThemeColorsProps, ThemeColorsState } from './props'
 
 class ThemeColors extends Component<ThemeColorsProps, ThemeColorsState> {
+  static displayName = 'ThemeColors'
   constructor(props: ThemeColorsProps) {
     super(props)
     const first = props.colors[Object.keys(props.colors)[0]]

packages/__docs__/src/ToggleBlockquote/Paragraph/index.tsx

@@ -28,6 +28,7 @@ import { View } from '@instructure/ui-view'
 import type { ParagraphProps } from './props'
 
 class Paragraph extends Component<ParagraphProps> {
+  static displayName = 'Paragraph'
   static defaultProps = {
     children: null
   }

packages/__docs__/src/ToggleBlockquote/index.tsx

@@ -31,6 +31,7 @@ import { Paragraph } from './Paragraph'
 import type { ToggleBlockquoteProps } from './props'
 
 class ToggleBlockquote extends Component<ToggleBlockquoteProps> {
+  static displayName = 'ToggleBlockquote'
   static defaultProps = {
     children: null
   }

packages/console/src/index.ts

@@ -29,7 +29,7 @@ import {
   info,
   assert,
   debug
-} from './console'
+} from './console.js'
 
 export {
   error,

packages/debounce/src/index.ts

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { debounce, Debounced } from './debounce'
+import { debounce, Debounced } from './debounce.js'
 export default debounce
 export { debounce }
 export type { Debounced }

packages/emotion/src/InstUISettingsProvider/__tests__/InstUISettingsProvider.test.tsx

@@ -28,7 +28,7 @@ import type { MockInstance } from 'vitest'
 
 import '@testing-library/jest-dom'
 import { canvasHighContrast } from '@instructure/ui-themes'
-import { InstUISettingsProvider } from '../index'
+import { InstUISettingsProvider } from '../index.js'
 
 describe('<InstUISettingsProvider />', () => {
   let consoleWarningMock: ReturnType<typeof vi.spyOn>

packages/emotion/src/InstUISettingsProvider/index.tsx

@@ -28,7 +28,7 @@ import { ThemeProvider } from '@emotion/react'
 import { TextDirectionContext } from '@instructure/ui-i18n'
 import { DeterministicIdContextProvider } from '@instructure/ui-react-utils'
 
-import { getTheme } from '../getTheme'
+import { getTheme } from '../getTheme.js'
 
 import type { ThemeOrLegacyOverride } from '../EmotionTypes'
 import type { DeterministicIdProviderValue } from '@instructure/ui-react-utils'

packages/emotion/src/__tests__/getComponentThemeOverride.test.tsx

@@ -25,7 +25,7 @@
 import { vi } from 'vitest'
 import type { MockInstance } from 'vitest'
 import canvas from '@instructure/ui-themes'
-import { getComponentThemeOverride } from '../getComponentThemeOverride'
+import { getComponentThemeOverride } from '../getComponentThemeOverride.js'
 
 const componentName = 'ExampleComponent'
 const componentId = 'Example.Component'

packages/emotion/src/__tests__/useStyle.test.tsx

@@ -28,7 +28,7 @@ import type { MockInstance } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
-import { InstUISettingsProvider, WithStyleProps, useStyle } from '../index'
+import { InstUISettingsProvider, WithStyleProps, useStyle } from '../index.js'
 
 type Props = {
   inverse?: boolean

packages/emotion/src/__tests__/useTheme.test.tsx

@@ -27,8 +27,8 @@ import type { MockInstance } from 'vitest'
 import { canvas, canvasHighContrast } from '@instructure/ui-themes'
 import '@testing-library/jest-dom'
 
-import { useTheme } from '../useTheme'
-import { InstUISettingsProvider } from '../InstUISettingsProvider'
+import { useTheme } from '../useTheme.js'
+import { InstUISettingsProvider } from '../InstUISettingsProvider/index.js'
 import type { ThemeOrLegacyOverride } from '../EmotionTypes'
 
 type Props = {

packages/emotion/src/__tests__/withStyle.test.tsx

@@ -29,7 +29,7 @@ import type { MockInstance } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
-import { withStyle, InstUISettingsProvider, WithStyleProps } from '../index'
+import { withStyle, InstUISettingsProvider, WithStyleProps } from '../index.js'
 
 type Props = {
   inverse?: boolean

packages/emotion/src/getComponentThemeOverride.ts

@@ -28,7 +28,7 @@ import type {
   ComponentOverride
 } from './EmotionTypes'
 import type { ComponentTheme } from '@instructure/shared-types'
-import { ThemeOverrideProp } from './withStyleNew'
+import { ThemeOverrideProp } from './withStyleNew.js'
 import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type ComponentName = keyof ComponentOverride | undefined

packages/emotion/src/getTheme.ts

@@ -31,7 +31,7 @@ import type {
   ThemeOrLegacyOverride,
   SpecificThemeOverride
 } from './EmotionTypes'
-import { InstUIProviderProps } from './InstUISettingsProvider'
+import { InstUIProviderProps } from './InstUISettingsProvider/index.js'
 declare const process: Record<string, any> | undefined
 
 /**

packages/emotion/src/index.ts

@@ -25,11 +25,11 @@
 
 export * from '@emotion/react'
 
-export { useComputedTheme } from './useComputedTheme'
-export { InstUISettingsProvider } from './InstUISettingsProvider'
-export { withStyle } from './withStyle'
-export { getComponentThemeOverride } from './getComponentThemeOverride'
-export { withStyleNew } from './withStyleNew'
+export { useComputedTheme } from './useComputedTheme.js'
+export { InstUISettingsProvider } from './InstUISettingsProvider/index.js'
+export { withStyle } from './withStyle.js'
+export { getComponentThemeOverride } from './getComponentThemeOverride.js'
+export { withStyleNew } from './withStyleNew.js'
 export {
   ThemeablePropValues,
   makeThemeVars,
@@ -38,11 +38,11 @@ export {
   mirrorShorthandEdges,
   calcSpacingFromShorthand,
   calcFocusOutlineStyles
-} from './styleUtils'
+} from './styleUtils/index.js'
 
-export { useStyle } from './useStyle'
-export { useStyleNew } from './useStyleNew'
-export { useTheme } from './useTheme'
+export { useStyle } from './useStyle.js'
+export { useStyleNew } from './useStyleNew.js'
+export { useTheme } from './useTheme.js'
 
 export type { InstUIProviderProps } from './InstUISettingsProvider'
 export type { ComponentStyle, StyleObject, Overrides } from './EmotionTypes'