From 74ef8232bbf79a1a17a10bb450b2ac6511a81c3b Mon Sep 17 00:00:00 2001 From: Isaac Hellendag <2823852+hellendag@users.noreply.github.com> Date: Mon, 9 Dec 2024 16:41:22 -0600 Subject: [PATCH] [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`. --- .../dagster-ui/packages/app-oss/tsconfig.json | 1 + .../packages/ui-components/CHANGES.md | 4 + .../packages/ui-components/package.json | 2 +- .../packages/ui-components/rollup.config.js | 106 ++++++++++-------- .../packages/ui-components/src/editor.ts | 4 + .../packages/ui-components/src/index.ts | 4 - .../packages/ui-core/jest.config.js | 1 + .../CodeLocationOverviewRoot.tsx | 2 +- .../src/configeditor/ConfigEditorUtils.tsx | 2 +- .../src/instance/InstanceConcurrency.tsx | 2 +- .../ui-core/src/instance/InstanceConfig.tsx | 2 +- .../ui-core/src/launchpad/LaunchpadRoot.tsx | 3 +- .../src/launchpad/LaunchpadSession.tsx | 12 +- .../packages/ui-core/src/plugins/sql.tsx | 3 +- .../ui-core/src/runs/RunConfigDialog.tsx | 11 +- .../src/schedules/SchedulesNextTicks.tsx | 2 +- .../src/workspace/CodeLocationMenu.tsx | 2 +- .../dagster-ui/packages/ui-core/tsconfig.json | 1 + 18 files changed, 92 insertions(+), 72 deletions(-) create mode 100644 js_modules/dagster-ui/packages/ui-components/src/editor.ts diff --git a/js_modules/dagster-ui/packages/app-oss/tsconfig.json b/js_modules/dagster-ui/packages/app-oss/tsconfig.json index fc2d305c048ae..5345f969e6b42 100644 --- a/js_modules/dagster-ui/packages/app-oss/tsconfig.json +++ b/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", diff --git a/js_modules/dagster-ui/packages/ui-components/CHANGES.md b/js_modules/dagster-ui/packages/ui-components/CHANGES.md index 17f3c1cdafd7d..52e39450f4a98 100644 --- a/js_modules/dagster-ui/packages/ui-components/CHANGES.md +++ b/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 diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json index b178ac7801105..ca29def1f1bc4 100644 --- a/js_modules/dagster-ui/packages/ui-components/package.json +++ b/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", diff --git a/js_modules/dagster-ui/packages/ui-components/rollup.config.js b/js_modules/dagster-ui/packages/ui-components/rollup.config.js index 10d98f392aca3..c20bcb32acb23 100644 --- a/js_modules/dagster-ui/packages/ui-components/rollup.config.js +++ b/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. ``. - '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. ``. + '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', - ], -}; +]; diff --git a/js_modules/dagster-ui/packages/ui-components/src/editor.ts b/js_modules/dagster-ui/packages/ui-components/src/editor.ts new file mode 100644 index 0000000000000..62a654c369f70 --- /dev/null +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-components/src/index.ts b/js_modules/dagster-ui/packages/ui-components/src/index.ts index 1224d069e9637..ba72a801271cf 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/index.ts +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/jest.config.js b/js_modules/dagster-ui/packages/ui-core/jest.config.js index 3039f576f7a91..543a7785cd2aa 100644 --- a/js_modules/dagster-ui/packages/ui-core/jest.config.js +++ b/js_modules/dagster-ui/packages/ui-core/jest.config.js @@ -78,6 +78,7 @@ module.exports = { '\\.(css|less)$': 'identity-obj-proxy', '^worker-loader(.*)/workers/(.*)$': '/jest/mocks/$2', '^@dagster-io/ui-components$': '/../ui-components/src/index', + '^@dagster-io/ui-components/editor$': '/../ui-components/src/editor', '^shared/(.*)$': '/src/$1', }, diff --git a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationOverviewRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationOverviewRoot.tsx index 1f998022e2330..8ddff35ccc7e7 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationOverviewRoot.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/configeditor/ConfigEditorUtils.tsx b/js_modules/dagster-ui/packages/ui-core/src/configeditor/ConfigEditorUtils.tsx index 8e8e256b5013c..81b2e24323da5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/configeditor/ConfigEditorUtils.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConcurrency.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConcurrency.tsx index f38e3f27114b1..3e72fa1ddc767 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConcurrency.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx index 237c3ab20ddf2..71fca00ebf2d9 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConfig.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadRoot.tsx index c5aa0ccb46657..55843af536a40 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadRoot.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx index cbb164baf6422..6a64493550537 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/plugins/sql.tsx b/js_modules/dagster-ui/packages/ui-core/src/plugins/sql.tsx index dca45836ffdd2..a1234d42ba834 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/plugins/sql.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunConfigDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunConfigDialog.tsx index a302013baefb6..7dad84a6c971d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunConfigDialog.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulesNextTicks.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulesNextTicks.tsx index 9f6c89ceb6abd..9b2a14e373016 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/schedules/SchedulesNextTicks.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationMenu.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationMenu.tsx index ac60eb02aa210..78846b9667bb8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationMenu.tsx +++ b/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'; diff --git a/js_modules/dagster-ui/packages/ui-core/tsconfig.json b/js_modules/dagster-ui/packages/ui-core/tsconfig.json index 542426ae2e138..91b6df638a3a0 100644 --- a/js_modules/dagster-ui/packages/ui-core/tsconfig.json +++ b/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",