[ui] Move CodeMirror-based components out of main ui-components export (

#26304)

## Summary & Motivation

The CodeMirror-based components in `ui-components` are adding quite a bit of CSS bloat via automatic imports, and the implicit use of `navigator` breaks static rendering in Next.js apps.

Split them out into an `editor` export, which can be used via `@dagster-io/ui-components/lib/editor`.

It would probably be good to split the library up further, but this is at least a step in the right direction.

## How I Tested These Changes

TS, lint, jest. `yarn build` for the component library, verify that it builds correctly and that CM-based components are split out of `index`.

js_modules/dagster-ui/packages/app-oss/tsconfig.json

@@ -3,6 +3,7 @@
     "paths": {
       "@dagster-io/ui-core/*": ["../ui-core/src/*"],
       "@dagster-io/ui-components": ["../ui-components/src"],
+      "@dagster-io/ui-components/editor": ["../ui-components/src/editor"],
       "shared/*": ["../ui-core/src/*"]
     },
     "module": "esnext",

js_modules/dagster-ui/packages/ui-components/CHANGES.md

@@ -1,3 +1,7 @@
+# 1.2.1 (December 5, 2024)
+
+- Split CodeMirror-based components out of main index export
+
 # 1.2.0 (December 5, 2024)
 
 - Migrate styled-components to v6

js_modules/dagster-ui/packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dagster-io/ui-components",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Dagster UI Component Library",
   "license": "Apache-2.0",
   "main": "lib/index.js",

js_modules/dagster-ui/packages/ui-components/rollup.config.js

@@ -11,52 +11,68 @@ import styles from 'rollup-plugin-styles';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx', '.css', '.svg'];
 
-export default {
-  input: {
-    index: './src/index.ts',
+const sharedPlugins = [
+  styles({
+    extract: true,
+  }),
+  json(),
+  url(),
+  image(),
+  babel({
+    babelHelpers: 'bundled',
+    exclude: 'node_modules/**',
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  }),
+  commonjs(),
+  polyfills(),
+  resolve({extensions, preferBuiltins: false}),
+];
 
-    // Our core fonts, usable as global style components, e.g. `<GlobalGeist />`.
-    'fonts/GlobalGeistMono': './src/fonts/GlobalGeistMono.tsx',
-    'fonts/GlobalGeist': './src/fonts/GlobalGeist.tsx',
+const sharedExternals = [
+  '@blueprintjs/core',
+  '@blueprintjs/popover2',
+  '@blueprintjs/select',
+  'react',
+  'react-dom',
+  'react-is',
+  'styled-components',
+  'stylis',
+];
 
-    // Components are listed here individually so that they may be imported
-    // without pulling in the entire library.
-    'components/Box': './src/components/Box.tsx',
-    'components/Button': './src/components/Button.tsx',
-    'components/Color': './src/components/Color.tsx',
-    'components/Icon': './src/components/Icon.tsx',
+export default [
+  {
+    input: {
+      index: './src/index.ts',
+
+      // Our core fonts, usable as global style components, e.g. `<GlobalGeist />`.
+      'fonts/GlobalGeistMono': './src/fonts/GlobalGeistMono.tsx',
+      'fonts/GlobalGeist': './src/fonts/GlobalGeist.tsx',
+
+      // Components are listed here individually so that they may be imported
+      // without pulling in the entire library.
+      'components/Box': './src/components/Box.tsx',
+      'components/Button': './src/components/Button.tsx',
+      'components/Color': './src/components/Color.tsx',
+      'components/Icon': './src/components/Icon.tsx',
+    },
+    output: {
+      dir: 'lib',
+      exports: 'named',
+      format: 'cjs',
+      sourcemap: true,
+    },
+    plugins: sharedPlugins,
+    external: [...sharedExternals, '@tanstack/react-virtual'],
   },
-  output: {
-    dir: 'lib',
-    exports: 'named',
-    format: 'cjs',
-    sourcemap: true,
+  {
+    input: './src/editor.ts',
+    output: {
+      dir: 'lib',
+      exports: 'named',
+      format: 'cjs',
+      sourcemap: true,
+    },
+    plugins: sharedPlugins,
+    external: sharedExternals,
   },
-  plugins: [
-    styles({
-      extract: true,
-    }),
-    json(),
-    url(),
-    image(),
-    babel({
-      babelHelpers: 'bundled',
-      exclude: 'node_modules/**',
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    }),
-    commonjs(),
-    polyfills(),
-    resolve({extensions, preferBuiltins: false}),
-  ],
-  external: [
-    '@blueprintjs/core',
-    '@blueprintjs/popover2',
-    '@blueprintjs/select',
-    '@tanstack/react-virtual',
-    'react',
-    'react-dom',
-    'react-is',
-    'styled-components',
-    'stylis',
-  ],
-};
+];

js_modules/dagster-ui/packages/ui-components/src/editor.ts

@@ -0,0 +1,4 @@
+export * from './components/ConfigEditorDialog';
+export * from './components/ConfigEditorWithSchema';
+export * from './components/NewConfigEditor';
+export * from './components/StyledRawCodeMirror';

js_modules/dagster-ui/packages/ui-components/src/index.ts

@@ -7,8 +7,6 @@ export * from './components/ButtonGroup';
 export * from './components/ButtonLink';
 export * from './components/Checkbox';
 export * from './components/CollapsibleSection';
-export * from './components/ConfigEditorDialog';
-export * from './components/ConfigEditorWithSchema';
 export * from './components/ConfigTypeSchema';
 export * from './components/Countdown';
 export * from './components/CursorControls';
@@ -25,7 +23,6 @@ export * from './components/MainContent';
 export * from './components/Menu';
 export * from './components/MetadataTable';
 export * from './components/MiddleTruncate';
-export * from './components/NewConfigEditor';
 export * from './components/NonIdealState';
 export * from './components/Page';
 export * from './components/PageHeader';
@@ -41,7 +38,6 @@ export * from './components/Spinner';
 export * from './components/SpinnerWithText';
 export * from './components/SplitPanelContainer';
 export * from './components/StyledButton';
-export * from './components/StyledRawCodeMirror';
 export * from './components/SubwayDot';
 export * from './components/Suggest';
 export * from './components/Table';

js_modules/dagster-ui/packages/ui-core/jest.config.js

@@ -78,6 +78,7 @@ module.exports = {
     '\\.(css|less)$': 'identity-obj-proxy',
     '^worker-loader(.*)/workers/(.*)$': '<rootDir>/jest/mocks/$2',
     '^@dagster-io/ui-components$': '<rootDir>/../ui-components/src/index',
+    '^@dagster-io/ui-components/editor$': '<rootDir>/../ui-components/src/editor',
     '^shared/(.*)$': '<rootDir>/src/$1',
   },
 

js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationOverviewRoot.tsx

@@ -5,9 +5,9 @@ import {
   MiddleTruncate,
   Mono,
   SpinnerWithText,
-  StyledRawCodeMirror,
   Table,
 } from '@dagster-io/ui-components';
+import {StyledRawCodeMirror} from '@dagster-io/ui-components/editor';
 import {useContext, useMemo} from 'react';
 import {CodeLocationPageHeader} from 'shared/code-location/CodeLocationPageHeader.oss';
 import {CodeLocationServerSection} from 'shared/code-location/CodeLocationServerSection.oss';

js_modules/dagster-ui/packages/ui-core/src/configeditor/ConfigEditorUtils.tsx

@@ -1,4 +1,4 @@
-import {YamlModeValidationResult} from '@dagster-io/ui-components';
+import {YamlModeValidationResult} from '@dagster-io/ui-components/editor';
 import yaml from 'yaml';
 
 import {gql} from '../apollo-client';

js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConcurrency.tsx

@@ -17,13 +17,13 @@ import {
   PageHeader,
   Popover,
   Spinner,
-  StyledRawCodeMirror,
   Subheading,
   Table,
   Tag,
   TextInput,
   Tooltip,
 } from '@dagster-io/ui-components';
+import {StyledRawCodeMirror} from '@dagster-io/ui-components/editor';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 

js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx

@@ -7,9 +7,9 @@ import {
   Heading,
   PageHeader,
   Spinner,
-  StyledRawCodeMirror,
   Subheading,
 } from '@dagster-io/ui-components';
+import {StyledRawCodeMirror} from '@dagster-io/ui-components/editor';
 import CodeMirror from 'codemirror';
 import {memo, useContext, useMemo} from 'react';
 import {createGlobalStyle} from 'styled-components';

js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadRoot.tsx

@@ -1,4 +1,5 @@
-import {CodeMirrorInDialogStyle, Dialog, DialogHeader} from '@dagster-io/ui-components';
+import {Dialog, DialogHeader} from '@dagster-io/ui-components';
+import {CodeMirrorInDialogStyle} from '@dagster-io/ui-components/editor';
 import {Redirect, useParams} from 'react-router-dom';
 
 import {LaunchpadAllowedRoot} from './LaunchpadAllowedRoot';

js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx

@@ -5,19 +5,21 @@ import {
   ButtonLink,
   Checkbox,
   Colors,
-  ConfigEditorHandle,
-  ConfigEditorHelp,
-  ConfigEditorHelpContext,
   Dialog,
   DialogFooter,
   Group,
   Icon,
-  NewConfigEditor,
   SplitPanelContainer,
   SplitPanelContainerHandle,
   TextInput,
-  isHelpContextEqual,
 } from '@dagster-io/ui-components';
+import {
+  ConfigEditorHandle,
+  ConfigEditorHelp,
+  ConfigEditorHelpContext,
+  NewConfigEditor,
+  isHelpContextEqual,
+} from '@dagster-io/ui-components/editor';
 import uniqBy from 'lodash/uniqBy';
 import * as React from 'react';
 import {LaunchRootExecutionButton} from 'shared/launchpad/LaunchRootExecutionButton.oss';

js_modules/dagster-ui/packages/ui-core/src/plugins/sql.tsx

@@ -1,4 +1,5 @@
-import {Button, Dialog, DialogFooter, Icon, StyledRawCodeMirror} from '@dagster-io/ui-components';
+import {Button, Dialog, DialogFooter, Icon} from '@dagster-io/ui-components';
+import {StyledRawCodeMirror} from '@dagster-io/ui-components/editor';
 import {useEffect, useState} from 'react';
 
 import {IPluginSidebarProps} from '../plugins';

js_modules/dagster-ui/packages/ui-core/src/runs/RunConfigDialog.tsx

@@ -1,12 +1,5 @@
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogFooter,
-  Icon,
-  StyledRawCodeMirror,
-  Subheading,
-} from '@dagster-io/ui-components';
+import {Box, Button, Dialog, DialogFooter, Icon, Subheading} from '@dagster-io/ui-components';
+import {StyledRawCodeMirror} from '@dagster-io/ui-components/editor';
 import styled from 'styled-components';
 
 import {RunTags} from './RunTags';

js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulesNextTicks.tsx

@@ -14,10 +14,10 @@ import {
   NonIdealState,
   Popover,
   Spinner,
-  StyledRawCodeMirror,
   Subheading,
   Table,
 } from '@dagster-io/ui-components';
+import {StyledRawCodeMirror} from '@dagster-io/ui-components/editor';
 import qs from 'qs';
 import {memo, useEffect, useState} from 'react';
 import {Link} from 'react-router-dom';

js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationMenu.tsx

@@ -6,9 +6,9 @@ import {
   Menu,
   MenuItem,
   Popover,
-  StyledRawCodeMirror,
   Table,
 } from '@dagster-io/ui-components';
+import {StyledRawCodeMirror} from '@dagster-io/ui-components/editor';
 import {useMemo, useState} from 'react';
 import * as yaml from 'yaml';
 

js_modules/dagster-ui/packages/ui-core/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "paths": {
       "@dagster-io/ui-components": ["../ui-components/src"],
+      "@dagster-io/ui-components/editor": ["../ui-components/src/editor"],
       "shared/*": ["./src/*"]
     },
     "module": "es2022",