fix: isAppConfigDifferent uses isEqual with Json.stringfy for compari…

…son of objects

packages/examples/package.json

@@ -1,21 +1,21 @@
 {
   "name": "monaco-editor-wrapper-examples",
   "private": true,
-  "version": "3.4.0-next.3",
+  "version": "3.4.0-next.4",
   "type": "module",
   "dependencies": {
     "@codingame/monaco-vscode-configuration-service-override": "~1.83.5",
     "@codingame/monaco-vscode-editor-service-override": "~1.83.5",
     "@codingame/monaco-vscode-json-default-extension": "~1.83.5",
     "@codingame/monaco-vscode-keybindings-service-override": "~1.83.5",
     "@codingame/monaco-vscode-python-default-extension": "~1.83.5",
-    "@typefox/monaco-editor-react": "~2.4.0-next.3",
+    "@typefox/monaco-editor-react": "~2.4.0-next.4",
     "http-server": "~14.1.1",
     "langium": "~2.1.1",
     "langium-statemachine-dsl": "~2.1.0",
     "monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.83.5 <1.84.0",
     "monaco-editor-workers": "~0.44.0",
-    "monaco-editor-wrapper": "~3.4.0-next.3",
+    "monaco-editor-wrapper": "~3.4.0-next.4",
     "monaco-languageclient": "~7.0.0",
     "monaco-languageclient-examples": "~7.0.0",
     "react": "~18.2.0",

packages/monaco-editor-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typefox/monaco-editor-react",
-  "version": "2.4.0-next.3",
+  "version": "2.4.0-next.4",
   "license": "MIT",
   "description": "React component for Monaco-Editor and Monaco Languageclient",
   "keywords": [
@@ -51,12 +51,12 @@
   },
   "dependencies": {
     "monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.83.5 <1.84.0",
-    "monaco-editor-wrapper": "~3.4.0-next.3",
+    "monaco-editor-wrapper": "~3.4.0-next.4",
     "react": "~18.2.0",
     "vscode": "npm:@codingame/monaco-vscode-api@>=1.83.5 <1.84.0"
   },
   "peerDependencies": {
-    "monaco-editor-wrapper": "~3.4.0-next.3"
+    "monaco-editor-wrapper": "~3.4.0-next.4"
   },
   "devDependencies": {
     "@types/react": "~18.2.37"

packages/monaco-editor-wrapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monaco-editor-wrapper",
-  "version": "3.4.0-next.3",
+  "version": "3.4.0-next.4",
   "license": "MIT",
   "description": "Monaco-Editor and Monaco Languageclient Wrapper",
   "keywords": [

packages/monaco-editor-wrapper/src/editorAppBase.ts

@@ -266,3 +266,11 @@ export const isModelUpdateRequired = (config: EditorAppConfigBase, modelUpdate:
     const updateRequired = propsModelUpdate.some(propCompare);
     return updateRequired ? ModelUpdateType.MODEL : codeUpdate;
 };
+
+export const isEqual = (obj1: unknown, obj2: unknown) => {
+    if (obj1 instanceof Object && obj2 instanceof Object) {
+        return JSON.stringify(obj1) === JSON.stringify(obj2);
+    } else {
+        return obj1 === obj2;
+    }
+};

packages/monaco-editor-wrapper/src/editorAppClassic.ts

@@ -1,5 +1,5 @@
 import { editor, languages } from 'monaco-editor';
-import { EditorAppBase, EditorAppConfigBase, ModelUpdateType, isModelUpdateRequired } from './editorAppBase.js';
+import { EditorAppBase, EditorAppConfigBase, ModelUpdateType, isEqual, isModelUpdateRequired } from './editorAppBase.js';
 import { UserConfig } from './wrapper.js';
 import { Logger } from './logger.js';
 
@@ -91,7 +91,7 @@ export class EditorAppClassic extends EditorAppBase {
         type ClassicKeys = keyof typeof orgConfig;
         const propsClassic = ['useDiffEditor', 'domReadOnly', 'readOnly', 'awaitExtensionReadiness', 'overrideAutomaticLayout', 'editorOptions', 'diffEditorOptions', 'languageDef', 'languageExtensionConfig', 'theme', 'themeData'];
         const propCompareClassic = (name: string) => {
-            return orgConfig[name as ClassicKeys] !== config[name as ClassicKeys];
+            return !isEqual(orgConfig[name as ClassicKeys], config[name as ClassicKeys]);
         };
         different = different || propsClassic.some(propCompareClassic);
         return different;

packages/monaco-editor-wrapper/src/editorAppExtended.ts

@@ -3,7 +3,7 @@ import { IDisposable, editor } from 'monaco-editor';
 import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
 import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
 import { whenReady as whenReadyTheme } from '@codingame/monaco-vscode-theme-defaults-default-extension';
-import { EditorAppBase, EditorAppConfigBase, ModelUpdateType, isModelUpdateRequired } from './editorAppBase.js';
+import { EditorAppBase, EditorAppConfigBase, ModelUpdateType, isEqual, isModelUpdateRequired } from './editorAppBase.js';
 import { registerExtension, IExtensionManifest, ExtensionHostKind } from 'vscode/extensions';
 import { UserConfig } from './wrapper.js';
 import { verifyUrlorCreateDataUrl } from './utils.js';
@@ -113,7 +113,7 @@ export class EditorAppExtended extends EditorAppBase {
         const propsExtended = ['useDiffEditor', 'domReadOnly', 'readOnly', 'awaitExtensionReadiness', 'overrideAutomaticLayout', 'editorOptions', 'diffEditorOptions', 'userConfiguration', 'extensions'];
         type ExtendedKeys = keyof typeof orgConfig;
         const propCompareExtended = (name: string) => {
-            return orgConfig[name as ExtendedKeys] !== config[name as ExtendedKeys];
+            return !isEqual(orgConfig[name as ExtendedKeys], config[name as ExtendedKeys]);
         };
         different = different || propsExtended.some(propCompareExtended);
         return different;

packages/monaco-editor-wrapper/src/index.ts

@@ -2,6 +2,7 @@ import {
     EditorAppBase,
     isCodeUpdateRequired,
     isModelUpdateRequired,
+    isEqual,
     ModelUpdateType
 } from './editorAppBase.js';
 
@@ -92,6 +93,7 @@ export {
     EditorAppBase,
     isCodeUpdateRequired,
     isModelUpdateRequired,
+    isEqual,
     ModelUpdateType,
     EditorAppClassic,
     EditorAppExtended,

packages/monaco-editor-wrapper/test/editorAppBase.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { isModelUpdateRequired, EditorAppClassic, ModelUpdateType, EditorAppConfigExtended, EditorAppExtended, EditorAppConfigClassic } from 'monaco-editor-wrapper';
+import { isModelUpdateRequired, EditorAppClassic, ModelUpdateType } from 'monaco-editor-wrapper';
 import { createBaseConfig, createEditorAppConfig, createWrapperConfig } from './helper.js';
 
 describe('Test EditorAppBase', () => {
@@ -27,16 +27,6 @@ describe('Test EditorAppBase', () => {
         expect(app.getConfig().domReadOnly).toBeFalsy();
     });
 
-    test('config userConfiguration', () => {
-        const config = createBaseConfig('extended');
-        const appConfig = config.wrapperConfig.editorAppConfig as EditorAppConfigExtended;
-        appConfig.userConfiguration = {
-            json: '{ "editor.semanticHighlighting.enabled": true }'
-        };
-        const app = new EditorAppExtended('config defaults', config);
-        expect(app.getConfig().userConfiguration?.json).toEqual('{ "editor.semanticHighlighting.enabled": true }');
-    });
-
     test('isModelUpdateRequired', () => {
         const config = createEditorAppConfig('classic');
         let modelUpdateType = isModelUpdateRequired(config, { languageId: 'typescript', code: '' });
@@ -52,42 +42,4 @@ describe('Test EditorAppBase', () => {
         expect(modelUpdateType).toBe(ModelUpdateType.MODEL);
     });
 
-    test('isAppConfigDifferent: classic', () => {
-        const orgConfig = createEditorAppConfig('classic') as EditorAppConfigClassic;
-        const config = createEditorAppConfig('classic') as EditorAppConfigClassic;
-        const app = new EditorAppClassic('test', createBaseConfig('classic'));
-        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeFalsy();
-
-        config.code = 'test';
-        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeFalsy();
-        expect(app.isAppConfigDifferent(orgConfig, config, true)).toBeTruthy();
-
-        config.code = '';
-        config.useDiffEditor = true;
-        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeTruthy();
-    });
-
-    test('isAppConfigDifferent: vscode', () => {
-        const orgConfig = createEditorAppConfig('extended') as EditorAppConfigExtended;
-        const config = createEditorAppConfig('extended') as EditorAppConfigExtended;
-        const app = new EditorAppExtended('test', createBaseConfig('extended'));
-        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeFalsy();
-
-        config.code = 'test';
-        expect(app.isAppConfigDifferent(orgConfig, config, true)).toBeTruthy();
-
-        config.code = '';
-        config.extensions = [{
-            config: {
-                name: 'Tester',
-                publisher: 'Tester',
-                version: '1.0.0',
-                engines: {
-                    vscode: '*'
-                }
-            }
-        }];
-        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeTruthy();
-    });
-
 });

packages/monaco-editor-wrapper/test/editorAppClassic.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest';
 import { EditorAppClassic, EditorAppConfigClassic } from 'monaco-editor-wrapper';
-import { createBaseConfig } from './helper.js';
+import { createBaseConfig, createEditorAppConfig } from './helper.js';
 
 const buildConfig = () => {
     const config = createBaseConfig('classic');
@@ -17,7 +17,7 @@ describe('Test EditorAppClassic', () => {
 
         const app = new EditorAppClassic('config defaults', config);
         expect(configclassic.$type).toEqual('classic');
-        expect(app.getConfig().editorOptions?.['semanticHighlighting.enabled']).toEqual(true);
+        expect(app.getConfig().editorOptions?.['semanticHighlighting.enabled']).toBeTruthy();
     });
 
     test('editorOptions: semanticHighlighting=false', () => {
@@ -26,7 +26,7 @@ describe('Test EditorAppClassic', () => {
         configclassic.editorOptions!['semanticHighlighting.enabled'] = false;
 
         const app = new EditorAppClassic('config defaults', config);
-        expect(app.getConfig().editorOptions?.['semanticHighlighting.enabled']).toEqual(false);
+        expect(app.getConfig().editorOptions?.['semanticHighlighting.enabled']).toBeFalsy();
     });
 
     test('editorOptions: semanticHighlighting="configuredByTheme"', () => {
@@ -37,4 +37,31 @@ describe('Test EditorAppClassic', () => {
         const app = new EditorAppClassic('config defaults', config);
         expect(app.getConfig().editorOptions?.['semanticHighlighting.enabled']).toEqual('configuredByTheme');
     });
+
+    test('isAppConfigDifferent: basic', () => {
+        const orgConfig = createEditorAppConfig('classic') as EditorAppConfigClassic;
+        const config = createEditorAppConfig('classic') as EditorAppConfigClassic;
+        const app = new EditorAppClassic('test', createBaseConfig('classic'));
+        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeFalsy();
+
+        config.code = 'test';
+        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeFalsy();
+        expect(app.isAppConfigDifferent(orgConfig, config, true)).toBeTruthy();
+
+        config.code = '';
+        config.useDiffEditor = true;
+        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeTruthy();
+    });
+
+    test('isAppConfigDifferent: non-simple properties"', () => {
+        const config1 = buildConfig();
+        const config2 = buildConfig();
+        const configclassic1 = config1.wrapperConfig.editorAppConfig as EditorAppConfigClassic;
+        configclassic1.editorOptions!['semanticHighlighting.enabled'] = true;
+        const configclassic2 = config2.wrapperConfig.editorAppConfig as EditorAppConfigClassic;
+        configclassic2.editorOptions!['semanticHighlighting.enabled'] = true;
+
+        const app = new EditorAppClassic('config defaults', config1);
+        expect(app.isAppConfigDifferent(configclassic1, configclassic2, false)).toBeFalsy();
+    });
 });

packages/monaco-editor-wrapper/test/editorAppExtended.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from 'vitest';
-import { verifyUrlorCreateDataUrl } from 'monaco-editor-wrapper';
+import { EditorAppConfigExtended, EditorAppExtended, verifyUrlorCreateDataUrl } from 'monaco-editor-wrapper';
+import { createBaseConfig, createEditorAppConfig } from './helper.js';
 
 describe('Test EditorAppExtended', () => {
 
@@ -14,4 +15,36 @@ describe('Test EditorAppExtended', () => {
         expect(verifyUrlorCreateDataUrl(text)).toBe(`data:text/plain;base64,${btoa(text)}`);
     });
 
+    test('config userConfiguration', () => {
+        const config = createBaseConfig('extended');
+        const appConfig = config.wrapperConfig.editorAppConfig as EditorAppConfigExtended;
+        appConfig.userConfiguration = {
+            json: '{ "editor.semanticHighlighting.enabled": true }'
+        };
+        const app = new EditorAppExtended('config defaults', config);
+        expect(app.getConfig().userConfiguration?.json).toEqual('{ "editor.semanticHighlighting.enabled": true }');
+    });
+
+    test('isAppConfigDifferent: basic', () => {
+        const orgConfig = createEditorAppConfig('extended') as EditorAppConfigExtended;
+        const config = createEditorAppConfig('extended') as EditorAppConfigExtended;
+        const app = new EditorAppExtended('test', createBaseConfig('extended'));
+        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeFalsy();
+
+        config.code = 'test';
+        expect(app.isAppConfigDifferent(orgConfig, config, true)).toBeTruthy();
+
+        config.code = '';
+        config.extensions = [{
+            config: {
+                name: 'Tester',
+                publisher: 'Tester',
+                version: '1.0.0',
+                engines: {
+                    vscode: '*'
+                }
+            }
+        }];
+        expect(app.isAppConfigDifferent(orgConfig, config, false)).toBeTruthy();
+    });
 });