From aecbb2499dc7cf014c4a8e9d09f94fa1b3259c24 Mon Sep 17 00:00:00 2001 From: ZuperZee Date: Tue, 10 Jun 2025 13:02:50 +0200 Subject: [PATCH] fix: load declarations with onRender Load declarations from both onRender and onInit editors. Only use one as the loader to minimize the number of requests. This commit also reduces the number of times declarations are loaded. Before each time the editor was rendered it would load declarations. Now it only loads them if they are not already loaded. Closes #201 --- src/components/CodeEditor/index.tsx | 67 +++++++++++++++++++++-------- src/module.ts | 13 +++++- src/types.ts | 6 ++- 3 files changed, 65 insertions(+), 21 deletions(-) diff --git a/src/components/CodeEditor/index.tsx b/src/components/CodeEditor/index.tsx index ee16e80..5b7b9b6 100644 --- a/src/components/CodeEditor/index.tsx +++ b/src/components/CodeEditor/index.tsx @@ -18,29 +18,52 @@ export const CodeEditor: FC = ({ settings, value, context, onChange }) => }; useEffect(() => { - if (monaco && settings?.useHtmlGraphicsDeclarations) { - const reqDecl = require.context('./declarations', true, /\..*\.d\.ts$/); + if (!monaco || !settings?.htmlGraphicsDeclarationState?.enabled) { + return; + } - Promise.all(reqDecl.keys().map((key) => fetch(reqDecl(key)))) - .then((r) => Promise.all(r.map((a) => a.text()))) - .then((d) => { - const extraLibs = monaco.languages.typescript.javascriptDefaults.getExtraLibs(); - reqDecl.keys().forEach((filePath, i) => { - const truncatedPath = filePath.substring(2); // Remove ./ - if (truncatedPath in extraLibs) { - // Don't add a declaration if it already exists - // Makes it so customProperties isn't overwritten :D - return; - } - monaco.languages.typescript.javascriptDefaults.addExtraLib(d[i], truncatedPath); - }); - }); + if (settings.htmlGraphicsDeclarationState.declarationsLoaded) { + // onInit and onRender would normally both load the declarations, + // but this makes only one of them load the declarations + return; + } else { + settings.htmlGraphicsDeclarationState.declarationsLoaded = true; } - }, [monaco, settings?.useHtmlGraphicsDeclarations]); + + const reqDecl = require.context('./declarations', true, /\..*\.d\.ts$/); + + // Only load declarations that are not already loaded + const loadedDeclarations = Object.keys(monaco.languages.typescript.javascriptDefaults.getExtraLibs()); + const unloadedDeclarations = reqDecl.keys().filter((filePath) => { + const truncatedPath = filePath.substring(2); // Remove ./ + return !loadedDeclarations.includes(truncatedPath); + }); + + Promise.all(unloadedDeclarations.map((key) => fetch(reqDecl(key)))) + .then((r) => Promise.all(r.map((a) => a.text()))) + .then((d) => { + const extraLibs = monaco.languages.typescript.javascriptDefaults.getExtraLibs(); + unloadedDeclarations.forEach((filePath, i) => { + const truncatedPath = filePath.substring(2); // Remove ./ + if (truncatedPath in extraLibs) { + // Don't add a declaration if it already exists + // Makes it so customProperties isn't overwritten :D + return; + } + monaco.languages.typescript.javascriptDefaults.addExtraLib(d[i], truncatedPath); + }); + }); + }, [monaco, settings?.htmlGraphicsDeclarationState]); useEffect(() => { - if (!monaco || context.options?.codeData === undefined || !settings?.useHtmlGraphicsDeclarations) { + if (!monaco || context.options?.codeData === undefined || !settings?.htmlGraphicsDeclarationState?.enabled) { + return; + } + + if (settings.htmlGraphicsDeclarationState.handlingCustomPropertiesUpdate) { return; + } else { + settings.htmlGraphicsDeclarationState.handlingCustomPropertiesUpdate = true; } const createCustomPropertiesType = (json: string) => { @@ -57,7 +80,13 @@ export const CodeEditor: FC = ({ settings, value, context, onChange }) => const content = createCustomPropertiesType(context.options.codeData); monaco.languages.typescript.javascriptDefaults.addExtraLib(content, 'customProperties.d.ts'); - }, [monaco, settings?.useHtmlGraphicsDeclarations, context.options?.codeData]); + return () => { + if (!settings.htmlGraphicsDeclarationState) { + return; + } + settings.htmlGraphicsDeclarationState.handlingCustomPropertiesUpdate = false; + }; + }, [monaco, settings?.htmlGraphicsDeclarationState, context.options?.codeData]); return (
diff --git a/src/module.ts b/src/module.ts index 61eb1b2..dfbc476 100755 --- a/src/module.ts +++ b/src/module.ts @@ -9,6 +9,16 @@ import { CalcsMutationOption } from 'components/PanelOptions/CalcsMutationOption import { calcsMutations } from 'utils/calcsMutations'; export const plugin = new PanelPlugin(HTMLPanel).useFieldConfig().setPanelOptions((builder) => { + const htmlGraphicsDeclarationState: { + enabled: true; + declarationsLoaded: boolean; + handlingCustomPropertiesUpdate: boolean; + } = { + enabled: true, + declarationsLoaded: false, + handlingCustomPropertiesUpdate: false, + }; + { const category = ['Value options']; builder @@ -167,6 +177,7 @@ export const plugin = new PanelPlugin(HTMLPanel).useFieldConfi '// Sets the value from the first series on every refresh\nconst htmlgraphicsValue = htmlNode.getElementById(\'htmlgraphics-value\');\n\nif (htmlgraphicsValue) {\n const valueField = data.series[0]?.fields[1];\n if (valueField) {\n const length = valueField.values.length;\n htmlgraphicsValue.textContent = valueField.values.get(length - 1);\n } else {\n htmlgraphicsValue.textContent = "No data"\n }\n}\n', settings: { language: EditorLanguage.Javascript, + htmlGraphicsDeclarationState, }, }); } @@ -230,7 +241,7 @@ export const plugin = new PanelPlugin(HTMLPanel).useFieldConfi "// Sets the text from customProperties\nconst htmlgraphicsText = htmlNode.getElementById('htmlgraphics-text');\n\nif (htmlgraphicsText) {\n htmlgraphicsText.textContent = customProperties.text;\n\n // Change the text color based on the theme\n if (theme.isDark) {\n htmlgraphicsText.style.color = 'green';\n } else {\n htmlgraphicsText.style.color = 'red';\n }\n}\n", settings: { language: EditorLanguage.Javascript, - useHtmlGraphicsDeclarations: true, + htmlGraphicsDeclarationState, }, }); } diff --git a/src/types.ts b/src/types.ts index 5a3fa2b..2cc9a82 100755 --- a/src/types.ts +++ b/src/types.ts @@ -22,7 +22,11 @@ export const enum EditorLanguage { export interface CodeEditorOptionSettings { language: EditorLanguage; - useHtmlGraphicsDeclarations?: boolean; + htmlGraphicsDeclarationState?: { + enabled: true; + declarationsLoaded: boolean; + handlingCustomPropertiesUpdate: boolean; + }; } export interface OptionsInterface {