From 12ff6554fd849483614cf97b894edfeaed5971dc Mon Sep 17 00:00:00 2001 From: raclim Date: Sat, 9 Nov 2024 19:23:39 -0500 Subject: [PATCH 01/10] separate console styles into another file --- client/modules/IDE/components/Console.jsx | 224 +++------------------- client/modules/IDE/utils/consoleStyles.js | 189 ++++++++++++++++++ 2 files changed, 211 insertions(+), 202 deletions(-) create mode 100644 client/modules/IDE/utils/consoleStyles.js diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx index f4f8f32396..2287800943 100644 --- a/client/modules/IDE/components/Console.jsx +++ b/client/modules/IDE/components/Console.jsx @@ -1,32 +1,11 @@ -import React, { useRef, useEffect } from 'react'; +import React, { useRef, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { bindActionCreators } from 'redux'; - import { useSelector, useDispatch } from 'react-redux'; import classNames from 'classnames'; import { Console as ConsoleFeed } from 'console-feed'; -import warnLightUrl from '../../../images/console-warn-light.svg?byUrl'; -import warnDarkUrl from '../../../images/console-warn-dark.svg?byUrl'; -import warnContrastUrl from '../../../images/console-warn-contrast.svg?byUrl'; -import errorLightUrl from '../../../images/console-error-light.svg?byUrl'; -import errorDarkUrl from '../../../images/console-error-dark.svg?byUrl'; -import errorContrastUrl from '../../../images/console-error-contrast.svg?byUrl'; -import debugLightUrl from '../../../images/console-debug-light.svg?byUrl'; -import debugDarkUrl from '../../../images/console-debug-dark.svg?byUrl'; -import debugContrastUrl from '../../../images/console-debug-contrast.svg?byUrl'; -import infoLightUrl from '../../../images/console-info-light.svg?byUrl'; -import infoDarkUrl from '../../../images/console-info-dark.svg?byUrl'; -import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl'; import ConsoleInput from './ConsoleInput'; -import commandLightUrl from '../../../images/console-command-light.svg?byUrl'; -import resultLightUrl from '../../../images/console-result-light.svg?byUrl'; -import commandDarkUrl from '../../../images/console-command-dark.svg?byUrl'; -import resultDarkUrl from '../../../images/console-result-dark.svg?byUrl'; -import commandContrastUrl from '../../../images/console-command-contrast.svg?byUrl'; -import resultContrastUrl from '../../../images/console-result-contrast.svg?byUrl'; - import UpArrowIcon from '../../../images/up-arrow.svg'; import DownArrowIcon from '../../../images/down-arrow.svg'; @@ -35,170 +14,7 @@ import * as ConsoleActions from '../../IDE/actions/console'; import { useDidUpdate } from '../hooks/custom-hooks'; import useHandleMessageEvent from '../hooks/useHandleMessageEvent'; import { listen } from '../../../utils/dispatcher'; - -const CONSOLE_FEED_LIGHT_STYLES = { - BASE_BACKGROUND_COLOR: '', - LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 97%)', - LOG_ERROR_COLOR: '#D11518', - LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)', - LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)', - LOG_WARN_COLOR: '#996B00', - LOG_WARN_BORDER: 'hsl(50, 100%, 88%)', - LOG_INFO_COLOR: '#4D4D4D', - LOG_DEBUG_COLOR: '#0071AD', - LOG_DEBUG_BACKGROUND: '#D6F1FF', - LOG_DEBUG_BORDER: '#C2EBFF', - LOG_COLOR: '#4D4D4D', - ARROW_COLOR: '#666', - OBJECT_NAME_COLOR: '#333', - OBJECT_VALUE_NULL_COLOR: '#747474', - OBJECT_VALUE_UNDEFINED_COLOR: '#747474', - OBJECT_VALUE_STRING_COLOR: '#47820A', - OBJECT_VALUE_REGEXP_COLOR: '#A06801', - OBJECT_VALUE_NUMBER_COLOR: '#333', - OBJECT_VALUE_BOOLEAN_COLOR: '#D52889', - OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9', - LOG_AMOUNT_BACKGROUND: '#5276B7', - LOG_AMOUNT_COLOR: '#FFF', - LOG_WARN_AMOUNT_BACKGROUND: '#996B00', - LOG_ERROR_AMOUNT_BACKGROUND: '#D11518', - LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD' -}; - -const CONSOLE_FEED_DARK_STYLES = { - BASE_BACKGROUND_COLOR: '', - BASE_COLOR: 'white', - OBJECT_NAME_COLOR: 'white', - OBJECT_VALUE_NULL_COLOR: '#DE4A9B', - OBJECT_VALUE_UNDEFINED_COLOR: '#DE4A9B', - OBJECT_VALUE_REGEXP_COLOR: '#EE9900', - OBJECT_VALUE_STRING_COLOR: '#58a10b', - OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)', - OBJECT_VALUE_NUMBER_COLOR: 'white', - OBJECT_VALUE_BOOLEAN_COLOR: '#DE4A9B', - OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#b58318', - LOG_ERROR_BACKGROUND: '#1F0000', - LOG_ERROR_COLOR: '#DF3A3D', - LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)', - LOG_WARN_COLOR: '#F5BC38', - LOG_INFO_COLOR: '#D9D9D9', - LOG_INFO_BORDER: '#4D4D4D', - LOG_COLOR: '#D9D9D9', - LOG_DEBUG_COLOR: '#0C99E2', - LOG_DEBUG_BACKGROUND: '#05232E', - LOG_DEBUG_BORDER: '#0C546E', - TABLE_BORDER_COLOR: 'grey', - TABLE_TH_BACKGROUND_COLOR: 'transparent', - TABLE_TH_HOVER_COLOR: 'grey', - TABLE_SORT_ICON_COLOR: 'grey', - TABLE_DATA_BACKGROUND_IMAGE: 'grey', - TABLE_DATA_BACKGROUND_SIZE: 'grey', - ARROW_COLOR: '#D9D9D9', - LOG_AMOUNT_BACKGROUND: '#5276B7', - LOG_AMOUNT_COLOR: '#333', - LOG_WARN_AMOUNT_BACKGROUND: '#996B00', - LOG_ERROR_AMOUNT_BACKGROUND: '#D11518', - LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD' -}; - -const CONSOLE_FEED_CONTRAST_STYLES = { - BASE_BACKGROUND_COLOR: '', - BASE_COLOR: 'white', - OBJECT_NAME_COLOR: 'white', - OBJECT_VALUE_NULL_COLOR: '#FFA9D9', - OBJECT_VALUE_UNDEFINED_COLOR: '#FFA9D9', - OBJECT_VALUE_REGEXP_COLOR: '#2DE9B6', - OBJECT_VALUE_STRING_COLOR: '#2DE9B6', - OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF', - OBJECT_VALUE_NUMBER_COLOR: '#FFA9D9', - OBJECT_VALUE_BOOLEAN_COLOR: '#FFA9D9', - OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#F5DC23', - LOG_ERROR_BACKGROUND: '#1F0000', - LOG_ERROR_COLOR: '#EA7B7D', - LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)', - LOG_WARN_COLOR: '#F5BC38', - LOG_INFO_COLOR: '#D9D9D9', - LOG_INFO_BORDER: '#4D4D4D', - LOG_COLOR: '#D9D9D9', - LOG_DEBUG_COLOR: '#38B6F5', - LOG_DEBUG_BACKGROUND: '#05232E', - LOG_DEBUG_BORDER: '#0C546E', - TABLE_BORDER_COLOR: 'grey', - TABLE_TH_BACKGROUND_COLOR: 'transparent', - TABLE_TH_HOVER_COLOR: 'grey', - TABLE_SORT_ICON_COLOR: 'grey', - TABLE_DATA_BACKGROUND_IMAGE: 'grey', - TABLE_DATA_BACKGROUND_SIZE: 'grey', - ARROW_COLOR: '#D9D9D9', - LOG_AMOUNT_BACKGROUND: '#5276B7', - LOG_AMOUNT_COLOR: '#333', - LOG_WARN_AMOUNT_BACKGROUND: '#966C08', - LOG_ERROR_AMOUNT_BACKGROUND: '#DD3134', - LOG_DEBUG_AMOUNT_BACKGROUND: '#097BB3' -}; - -const getConsoleFeedStyle = (theme, fontSize) => { - const style = { - BASE_FONT_FAMILY: 'Inconsolata, monospace' - }; - const CONSOLE_FEED_LIGHT_ICONS = { - LOG_WARN_ICON: `url(${warnLightUrl})`, - LOG_ERROR_ICON: `url(${errorLightUrl})`, - LOG_DEBUG_ICON: `url(${debugLightUrl})`, - LOG_INFO_ICON: `url(${infoLightUrl})`, - LOG_COMMAND_ICON: `url(${commandLightUrl})`, - LOG_RESULT_ICON: `url(${resultLightUrl})` - }; - const CONSOLE_FEED_DARK_ICONS = { - LOG_WARN_ICON: `url(${warnDarkUrl})`, - LOG_ERROR_ICON: `url(${errorDarkUrl})`, - LOG_DEBUG_ICON: `url(${debugDarkUrl})`, - LOG_INFO_ICON: `url(${infoDarkUrl})`, - LOG_COMMAND_ICON: `url(${commandDarkUrl})`, - LOG_RESULT_ICON: `url(${resultDarkUrl})` - }; - const CONSOLE_FEED_CONTRAST_ICONS = { - LOG_WARN_ICON: `url(${warnContrastUrl})`, - LOG_ERROR_ICON: `url(${errorContrastUrl})`, - LOG_DEBUG_ICON: `url(${debugContrastUrl})`, - LOG_INFO_ICON: `url(${infoContrastUrl})`, - LOG_COMMAND_ICON: `url(${commandContrastUrl})`, - LOG_RESULT_ICON: `url(${resultContrastUrl})` - }; - const CONSOLE_FEED_SIZES = { - TREENODE_LINE_HEIGHT: 1.2, - BASE_FONT_SIZE: `${fontSize}px`, - ARROW_FONT_SIZE: `${fontSize}px`, - LOG_ICON_WIDTH: `${fontSize}px`, - LOG_ICON_HEIGHT: `${1.45 * fontSize}px` - }; - - switch (theme) { - case 'light': - return Object.assign( - CONSOLE_FEED_LIGHT_STYLES || {}, - CONSOLE_FEED_LIGHT_ICONS, - CONSOLE_FEED_SIZES, - style - ); - case 'dark': - return Object.assign( - CONSOLE_FEED_DARK_STYLES || {}, - CONSOLE_FEED_DARK_ICONS, - CONSOLE_FEED_SIZES, - style - ); - case 'contrast': - return Object.assign( - CONSOLE_FEED_CONTRAST_STYLES || {}, - CONSOLE_FEED_CONTRAST_ICONS, - CONSOLE_FEED_SIZES, - style - ); - default: - return ''; - } -}; +import getConsoleFeedStyle from '../utils/consoleStyles'; const Console = () => { const { t } = useTranslation(); @@ -206,12 +22,7 @@ const Console = () => { const isExpanded = useSelector((state) => state.ide.consoleIsExpanded); const isPlaying = useSelector((state) => state.ide.isPlaying); const { theme, fontSize } = useSelector((state) => state.preferences); - const { - collapseConsole, - expandConsole, - clearConsole, - dispatchConsoleEvent - } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch()); + const dispatch = useDispatch(); const cm = useRef({}); @@ -219,13 +30,20 @@ const Console = () => { cm.current.scrollTop = cm.current.scrollHeight; }); + const consoleFeedStyle = useMemo(() => getConsoleFeedStyle(theme, fontSize), [ + theme, + fontSize + ]); + const handleMessageEvent = useHandleMessageEvent(); + useEffect(() => { - const unsubscribe = listen(handleMessageEvent); - return function cleanup() { - unsubscribe(); - }; - }); + listen(handleMessageEvent); + }, [handleMessageEvent]); + + const handleClearConsole = () => dispatch(ConsoleActions.clearConsole()); + const handleCollapseConsole = () => dispatch(IDEActions.collapseConsole()); + const handleExpandConsole = () => dispatch(IDEActions.expandConsole()); const consoleClass = classNames({ 'preview-console': true, @@ -239,21 +57,21 @@ const Console = () => {
diff --git a/client/modules/IDE/components/ConsoleInput.jsx b/client/modules/IDE/components/ConsoleInput.jsx index ca3ab02fd3..8f358c93ac 100644 --- a/client/modules/IDE/components/ConsoleInput.jsx +++ b/client/modules/IDE/components/ConsoleInput.jsx @@ -4,12 +4,13 @@ import CodeMirror from 'codemirror'; import { Encode } from 'console-feed'; import RightArrowIcon from '../../../images/right-arrow.svg'; +import { dispatchConsoleEvent } from '../../IDE/actions/console'; import { dispatchMessage, MessageTypes } from '../../../utils/dispatcher'; // heavily inspired by // https://github.com/codesandbox/codesandbox-client/blob/92a1131f4ded6f7d9c16945dc7c18aa97c8ada27/packages/app/src/app/components/Preview/DevTools/Console/Input/index.tsx -function ConsoleInput({ theme, dispatchConsoleEvent, fontSize }) { +function ConsoleInput({ theme, fontSize }) { const [commandHistory, setCommandHistory] = useState([]); const [commandCursor, setCommandCursor] = useState(-1); const codemirrorContainer = useRef(null); @@ -25,12 +26,6 @@ function ConsoleInput({ theme, dispatchConsoleEvent, fontSize }) { }); cmInstance.current.getWrapperElement().style['font-size'] = `${fontSize}px`; - - return () => { - if (cmInstance.current) { - cmInstance.current = null; - } - }; }, []); useEffect(() => { @@ -78,7 +73,7 @@ function ConsoleInput({ theme, dispatchConsoleEvent, fontSize }) { cmInstance.current.off('keydown', handleEnterKey); } }; - }, [commandHistory, dispatchConsoleEvent]); + }, [commandHistory]); useEffect(() => { const handleUpArrowKey = (cm, e) => { @@ -158,7 +153,6 @@ function ConsoleInput({ theme, dispatchConsoleEvent, fontSize }) { ConsoleInput.propTypes = { theme: PropTypes.string.isRequired, - dispatchConsoleEvent: PropTypes.func.isRequired, fontSize: PropTypes.number.isRequired }; From 1e4c4d5a642ad608b1bae8904f29fe94df8517c1 Mon Sep 17 00:00:00 2001 From: raclim Date: Thu, 14 Nov 2024 13:53:33 -0500 Subject: [PATCH 06/10] change back report variable, make value conditional --- client/utils/previewEntry.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/utils/previewEntry.js b/client/utils/previewEntry.js index 138e3960b1..6c8d433782 100644 --- a/client/utils/previewEntry.js +++ b/client/utils/previewEntry.js @@ -148,9 +148,10 @@ window.onunhandledrejection = async function onUnhandledRejection(event) { }; // Monkeypatch p5._friendlyError -const p5Call = window.p5; -if (p5Call) { +const _report = window.p5?.report; + +if (_report) { window.p5._report = function resolvedReport(message, method, color) { const urls = Object.keys(window.objectUrls); const paths = Object.keys(window.objectPaths); @@ -176,6 +177,6 @@ if (p5Call) { paths.forEach((path) => { newMessage = newMessage.replaceAll(path, window.objectPaths[path]); }); - p5Call.apply(window.p5, [newMessage, method, color]); + _report.apply(window.p5, [newMessage, method, color]); }; } From 24490ece5cb3c870b2a0bc002b5e4b3d7ae2857c Mon Sep 17 00:00:00 2001 From: raclim Date: Thu, 14 Nov 2024 13:55:31 -0500 Subject: [PATCH 07/10] remove extra space --- client/utils/previewEntry.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/utils/previewEntry.js b/client/utils/previewEntry.js index 6c8d433782..292020c5a4 100644 --- a/client/utils/previewEntry.js +++ b/client/utils/previewEntry.js @@ -148,7 +148,6 @@ window.onunhandledrejection = async function onUnhandledRejection(event) { }; // Monkeypatch p5._friendlyError - const _report = window.p5?.report; if (_report) { From 4e674cb0e42a076c2aa6cf9231530cd966f48343 Mon Sep 17 00:00:00 2001 From: raclim Date: Thu, 14 Nov 2024 14:18:15 -0500 Subject: [PATCH 08/10] fix typo --- client/utils/previewEntry.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/utils/previewEntry.js b/client/utils/previewEntry.js index 292020c5a4..a361c00476 100644 --- a/client/utils/previewEntry.js +++ b/client/utils/previewEntry.js @@ -148,7 +148,7 @@ window.onunhandledrejection = async function onUnhandledRejection(event) { }; // Monkeypatch p5._friendlyError -const _report = window.p5?.report; +const _report = window.p5?._report; if (_report) { window.p5._report = function resolvedReport(message, method, color) { From 0912253e045cd4680bf02c134ad423a4e5134093 Mon Sep 17 00:00:00 2001 From: raclim Date: Thu, 14 Nov 2024 15:45:00 -0500 Subject: [PATCH 09/10] set light as default console theme --- client/modules/IDE/utils/consoleStyles.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/modules/IDE/utils/consoleStyles.js b/client/modules/IDE/utils/consoleStyles.js index b6d95095c4..62bba0c6fb 100644 --- a/client/modules/IDE/utils/consoleStyles.js +++ b/client/modules/IDE/utils/consoleStyles.js @@ -161,6 +161,7 @@ const getConsoleFeedStyle = (theme, fontSize) => { switch (theme) { case 'light': + default: return Object.assign( CONSOLE_FEED_LIGHT_STYLES || {}, CONSOLE_FEED_LIGHT_ICONS, @@ -181,8 +182,6 @@ const getConsoleFeedStyle = (theme, fontSize) => { CONSOLE_FEED_SIZES, style ); - default: - return ''; } }; From a850d5c603a93199c90627538e1405d80a10b4b2 Mon Sep 17 00:00:00 2001 From: raclim Date: Thu, 14 Nov 2024 16:01:55 -0500 Subject: [PATCH 10/10] add style to console editor div, remove styling hook --- client/modules/IDE/components/ConsoleInput.jsx | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/client/modules/IDE/components/ConsoleInput.jsx b/client/modules/IDE/components/ConsoleInput.jsx index 8f358c93ac..c026d29d4b 100644 --- a/client/modules/IDE/components/ConsoleInput.jsx +++ b/client/modules/IDE/components/ConsoleInput.jsx @@ -24,20 +24,8 @@ function ConsoleInput({ theme, fontSize }) { mode: 'javascript', inputStyle: 'contenteditable' }); - - cmInstance.current.getWrapperElement().style['font-size'] = `${fontSize}px`; }, []); - useEffect(() => { - if (cmInstance.current) { - cmInstance.current.setOption('theme', `p5-${theme}`); - cmInstance.current.getWrapperElement().style[ - 'font-size' - ] = `${fontSize}px`; - cmInstance.current.refresh(); - } - }, [theme, fontSize]); - useEffect(() => { const handleEnterKey = (cm, e) => { if (e.key === 'Enter' && !e.shiftKey) { @@ -146,7 +134,11 @@ function ConsoleInput({ theme, fontSize }) { }} /> -
+
); }