fix: load declarations with onRender

src/components/CodeEditor/index.tsx

@@ -18,29 +18,52 @@ export const CodeEditor: FC<Props> = ({ 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<Props> = ({ 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 (
     <div>

src/module.ts

@@ -9,6 +9,16 @@ import { CalcsMutationOption } from 'components/PanelOptions/CalcsMutationOption
 import { calcsMutations } from 'utils/calcsMutations';
 
 export const plugin = new PanelPlugin<OptionsInterface>(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<OptionsInterface>(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<OptionsInterface>(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,
         },
       });
   }

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 {