From add15f1b1ce7ad96bf40849a39c80434070b54c0 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Fri, 27 Oct 2023 10:02:12 -0500 Subject: [PATCH 1/6] Switched from inline to raw #1599 --- jest.config.base.cjs | 4 +- packages/babel-preset/index.js | 2 +- .../src/styleguide/ThemeColors.tsx | 10 ++--- packages/components/src/declaration.d.ts | 10 +++++ .../components/src/theme/theme-dark/index.ts | 25 +++++++++--- .../components/src/theme/theme-light/index.ts | 39 ++++++++++++++++++- 6 files changed, 75 insertions(+), 15 deletions(-) diff --git a/jest.config.base.cjs b/jest.config.base.cjs index 05be728cb4..50dd525e8d 100644 --- a/jest.config.base.cjs +++ b/jest.config.base.cjs @@ -9,12 +9,12 @@ module.exports = { 'node_modules/(?!(monaco-editor|d3-interpolate|d3-color)/)', ], moduleNameMapper: { - 'theme-([^/]+?)\\.css(\\?inline)?$': path.join( + 'theme-([^/]+?)\\.css(\\?raw)?$': path.join( __dirname, './__mocks__/css/mock-theme-$1.js' ), '\\.(css|less|scss|sass)$': 'identity-obj-proxy', - '\\.(css|less|scss|sass)\\?inline$': path.join( + '\\.(css|less|scss|sass)\\?raw$': path.join( __dirname, './__mocks__/fileMock.js' ), diff --git a/packages/babel-preset/index.js b/packages/babel-preset/index.js index 479ceee645..6dee33c48e 100644 --- a/packages/babel-preset/index.js +++ b/packages/babel-preset/index.js @@ -41,7 +41,7 @@ module.exports = api => ({ 'transform-rename-import', { // The babel-plugin-add-import-extension adds the .js to .scss imports, just convert them back to .css - original: '^(.+?)\\.s?css(\\?inline)?\\.js$', + original: '^(.+?)\\.s?css(\\?raw)?\\.js$', replacement: '$1.css$2', }, ], diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx index dc7ba764cf..9a7692e7e3 100644 --- a/packages/code-studio/src/styleguide/ThemeColors.tsx +++ b/packages/code-studio/src/styleguide/ThemeColors.tsx @@ -1,11 +1,11 @@ import React, { useMemo } from 'react'; import { Tooltip } from '@deephaven/components'; import { ColorUtils } from '@deephaven/utils'; -import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?inline'; -import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?inline'; -import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?inline'; -import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?inline'; -import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?inline'; +import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?raw'; +import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?raw'; +import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?raw'; +import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?raw'; +import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?raw'; import styles from './ThemeColors.module.scss'; // Group names are extracted from var names via a regex capture group. Most of diff --git a/packages/components/src/declaration.d.ts b/packages/components/src/declaration.d.ts index f1577432ee..7e85157bc9 100644 --- a/packages/components/src/declaration.d.ts +++ b/packages/components/src/declaration.d.ts @@ -17,4 +17,14 @@ declare module '*.scss?inline' { export default content; } +declare module '*.css?raw' { + const content: string; + export default content; +} + +declare module '*.scss?raw' { + const content: string; + export default content; +} + declare module '*.scss'; diff --git a/packages/components/src/theme/theme-dark/index.ts b/packages/components/src/theme/theme-dark/index.ts index e5f40db52a..c724fa562b 100644 --- a/packages/components/src/theme/theme-dark/index.ts +++ b/packages/components/src/theme/theme-dark/index.ts @@ -1,14 +1,27 @@ -import themeDarkPalette from './theme-dark-palette.css?inline'; -import themeDarkSemantic from './theme-dark-semantic.css?inline'; -import themeDarkSemanticEditor from './theme-dark-semantic-editor.css?inline'; -import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?inline'; -import themeDarkComponents from './theme-dark-components.css?inline'; +import themeDarkPalette from './theme-dark-palette.css?raw'; +import themeDarkSemantic from './theme-dark-semantic.css?raw'; +import themeDarkSemanticEditor from './theme-dark-semantic-editor.css?raw'; +import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?raw'; +import themeDarkComponents from './theme-dark-components.css?raw'; /** - * DH theme variables are imported via Vite `?inline` query which provides the + * DH theme variables are imported via Vite `?raw` query which provides the * text content of the variable files as a string. The exported theme is just a * concatenation of the contents of all of these imports. * + * Note that ?raw / ?inline imports are natively supported by Vite, but consumers + * of @deephaven/components using Webpack will need to add a rule to their module + * config. + * e.g. + * module: { + * rules: [ + * { + * resourceQuery: /inline/, + * type: 'asset/source', + * }, + * ], + * }, + * * e.g. * * :root { diff --git a/packages/components/src/theme/theme-light/index.ts b/packages/components/src/theme/theme-light/index.ts index b6c7d42258..5788e85bd5 100644 --- a/packages/components/src/theme/theme-light/index.ts +++ b/packages/components/src/theme/theme-light/index.ts @@ -1,5 +1,42 @@ -import themeLightPalette from './theme-light-palette.css?inline'; +import themeLightPalette from './theme-light-palette.css?raw'; +/** + * DH theme variables are imported via Vite `?raw` query which provides the + * text content of the variable files as a string. The exported theme is just a + * concatenation of the contents of all of these imports. + * + * Note that ?raw / ?inline imports are natively supported by Vite, but consumers + * of @deephaven/components using Webpack will need to add a rule to their module + * config. + * e.g. + * module: { + * rules: [ + * { + * resourceQuery: /inline/, + * type: 'asset/source', + * }, + * ], + * } + * + * e.g. + * + * :root { + * --dh-color-from-light-palette: #fff; + * --dh-color-from-light-palette2: #ccc; + * } + * :root { + * --dh-color-from-light-semantic: #000; + * } + * :root { + * --dh-color-from-light-semantic-editor: #000; + * } + * :root { + * --dh-color-from-light-semantic-grid: #000; + * } + * :root { + * --dh-color-from-light-components: #000; + * } + */ export const themeLight = themeLightPalette; export default themeLight; From a2aec752711edf30993c1c49720892f30196e384 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Fri, 27 Oct 2023 13:15:18 -0500 Subject: [PATCH 2/6] Minify theming css in build #1599 --- packages/components/package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index ded494e26f..9c1f34d429 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -18,9 +18,10 @@ "node": ">=10" }, "scripts": { - "build": "cross-env NODE_ENV=production run-p build:*", + "build": "cross-env NODE_ENV=production run-s build:*", "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward", - "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist ./scss/BaseStyleSheet.scss:./css/BaseStyleSheet.css" + "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist ./scss/BaseStyleSheet.scss:./css/BaseStyleSheet.css", + "build:theme": "sass --embed-sources --style=compressed --load-path=../../node_modules ./src/theme:./dist/theme" }, "dependencies": { "@adobe/react-spectrum": "^3.29.0", From 884ed45197794b2d5c6c001b12af97d6c92cbcf5 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Fri, 27 Oct 2023 13:16:07 -0500 Subject: [PATCH 3/6] Added try / catch to MonacoUtils #1599 --- packages/console/src/monaco/MonacoUtils.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/console/src/monaco/MonacoUtils.ts b/packages/console/src/monaco/MonacoUtils.ts index 94d373a968..1dca213375 100644 --- a/packages/console/src/monaco/MonacoUtils.ts +++ b/packages/console/src/monaco/MonacoUtils.ts @@ -163,7 +163,14 @@ class MonacoUtils { colors: dhDarkColors, }); - monaco.editor.setTheme('dh-dark'); + try { + monaco.editor.setTheme('dh-dark'); + } catch { + log.error( + `Failed to set 'dh-dark' Monaco theme, falling back to vs-dark` + ); + monaco.editor.setTheme('vs-dark'); + } registerLanguages([DbLang, PyLang, GroovyLang, LogLang, ScalaLang]); From 227ffa2daddddbe41406b559ca6bf2231cdd714f Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Fri, 27 Oct 2023 14:14:30 -0500 Subject: [PATCH 4/6] Fixed styleguide #1599 --- jest.config.base.cjs | 4 ++-- packages/code-studio/src/styleguide/ThemeColors.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/jest.config.base.cjs b/jest.config.base.cjs index 50dd525e8d..69d343c882 100644 --- a/jest.config.base.cjs +++ b/jest.config.base.cjs @@ -9,12 +9,12 @@ module.exports = { 'node_modules/(?!(monaco-editor|d3-interpolate|d3-color)/)', ], moduleNameMapper: { - 'theme-([^/]+?)\\.css(\\?raw)?$': path.join( + 'theme-([^/]+?)\\.css(\\?(?:inline|raw))?$': path.join( __dirname, './__mocks__/css/mock-theme-$1.js' ), '\\.(css|less|scss|sass)$': 'identity-obj-proxy', - '\\.(css|less|scss|sass)\\?raw$': path.join( + '\\.(css|less|scss|sass)\\?(?:inline|raw)$': path.join( __dirname, './__mocks__/fileMock.js' ), diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx index 9a7692e7e3..dc7ba764cf 100644 --- a/packages/code-studio/src/styleguide/ThemeColors.tsx +++ b/packages/code-studio/src/styleguide/ThemeColors.tsx @@ -1,11 +1,11 @@ import React, { useMemo } from 'react'; import { Tooltip } from '@deephaven/components'; import { ColorUtils } from '@deephaven/utils'; -import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?raw'; -import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?raw'; -import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?raw'; -import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?raw'; -import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?raw'; +import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?inline'; +import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?inline'; +import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?inline'; +import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?inline'; +import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?inline'; import styles from './ThemeColors.module.scss'; // Group names are extracted from var names via a regex capture group. Most of From d478cac7768480345f93edd00edc639b228874af Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Fri, 27 Oct 2023 14:16:40 -0500 Subject: [PATCH 5/6] Fixed babel preset #1599 --- packages/babel-preset/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-preset/index.js b/packages/babel-preset/index.js index 6dee33c48e..a83d585bba 100644 --- a/packages/babel-preset/index.js +++ b/packages/babel-preset/index.js @@ -41,7 +41,7 @@ module.exports = api => ({ 'transform-rename-import', { // The babel-plugin-add-import-extension adds the .js to .scss imports, just convert them back to .css - original: '^(.+?)\\.s?css(\\?raw)?\\.js$', + original: '^(.+?)\\.s?css(\\?(?:inline|raw))?\\.js$', replacement: '$1.css$2', }, ], From 153cee8aebc096eb875fbd6cd265c980a85334c1 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Fri, 27 Oct 2023 15:31:41 -0500 Subject: [PATCH 6/6] Explicit build steps #1599 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index 9c1f34d429..ed8e684aa0 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -18,7 +18,7 @@ "node": ">=10" }, "scripts": { - "build": "cross-env NODE_ENV=production run-s build:*", + "build": "cross-env NODE_ENV=production run-s build:babel build:sass build:theme", "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward", "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist ./scss/BaseStyleSheet.scss:./css/BaseStyleSheet.css", "build:theme": "sass --embed-sources --style=compressed --load-path=../../node_modules ./src/theme:./dist/theme"