Converting MSG to ESM only

This patch is a preparation for cases where we have to import code directly into webviews and it is generally a good idea to fully advance to ESM. VS Code (Node.js) still uses CommonJS, but that's handled by our building system (based on esbuild). ESM support in Node.js is already working and just a matter of time to become the main module type everywhere.

But because browsers cannot automatically resolve imports these have to be explicit, which means: the exact path plus the script extension (usually .js). With TypeScript a new moduleResolution option was introduced recently (`Node16`) which enforces this restriction. Hence most of the changes in this patch are adding the required extension for this module resolution type.

I also moved a preact helper method out from the TS helpers to avoid importing Monaco and TS when using the preact stuff.

Change-Id: I4331f6df8cc8a052133850b5de9bbfcb0c5d1262

Author: mike-lischke

gui/extension/cspell.json

@@ -6,6 +6,7 @@
         "backends",
         "browserslist",
         "charsets",
+        "chromedriver",
         "codicon",
         "DBHOSTNAME",
         "DBPASSWORD",
@@ -19,12 +20,14 @@
         "informations",
         "innodb",
         "ISAM",
+        "Kubuntu",
         "lightbulb",
         "Logfile",
         "MIDDLEINT",
         "mixins",
         "mutator",
         "mutators",
+        "mysqlrouter",
         "nchar",
         "nohide",
         "nohover",
@@ -36,6 +39,8 @@
         "Preformat",
         "pytest",
         "rdbms",
+        "redistributable",
+        "regedit",
         "resizer",
         "Sakila",
         "savepoint",
@@ -66,14 +71,10 @@
         "varbinary",
         "varchar",
         "VARCHARACTER",
-        "whitespaces",
-        "ZEROFILL",
-        "chromedriver",
         "vsix",
-        "redistributable",
-        "regedit",
-        "Kubuntu",
-        "mysqlrouter"
+        "webviews",
+        "whitespaces",
+        "ZEROFILL"
     ],
     "ignoreWords": [
         "Divs",
@@ -90,6 +91,7 @@
         "autogenerated",
         "camelcase",
         "certfile",
+        "clipboardy",
         "dbconnections",
         "esbuild",
         "eucjpms",
@@ -99,6 +101,7 @@
         "keybcs",
         "keyfile",
         "killall",
+        "libcurl",
         "macce",
         "mochawesome",
         "multiselect",
@@ -111,6 +114,7 @@
         "oraclecloud",
         "outdir",
         "outfile",
+        "preact",
         "relcom",
         "saturationl",
         "scol",
@@ -123,9 +127,7 @@
         "uuidv",
         "webrootpath",
         "winx",
-        "zstd",
-        "libcurl",
-        "clipboardy"
+        "zstd"
     ],
     "ignorePaths": [
         "./.eslintrc.json"

gui/extension/package.json

@@ -25,7 +25,8 @@
     "activationEvents": [
         "onStartupFinished"
     ],
-    "main": "./out/main.js",
+    "main": "./out/main.cjs",
+    "type": "module",
     "contributes": {
         "languages": [
             {
@@ -1641,7 +1642,7 @@
         "build-packages-win": "scripts/package_extension.ps1",
         "publish-packages": "scripts/publish_packages.sh",
         "vscode:prepublish": "npm run esbuild -- --minify",
-        "esbuild": "esbuild ./src/extension.ts --main-fields=module,main --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node",
+        "esbuild": "esbuild ./src/extension.ts --main-fields=module,main --bundle --outfile=out/main.cjs --external:vscode --format=cjs --platform=node",
         "esbuild-watch": "npm run esbuild -- --sourcemap --watch",
         "unit-tests": "mkdir -p .vscode-test/vscode-dummy/ && touch .vscode-test/vscode-dummy/dummy.txt"
     }

gui/extension/src/CodeBlocks.ts

@@ -30,13 +30,13 @@ import {
 
 import { CharStreams, CommonTokenStream } from "antlr4ng";
 
-import { PythonLexer } from "../../frontend/src/parsing/python/generated/PythonLexer";
+import { PythonLexer } from "../../frontend/src/parsing/python/generated/PythonLexer.js";
 
 import {
     IRequestListEntry, IRequestTypeMap, IWebviewProvider, requisitions,
-} from "../../frontend/src/supplement/Requisitions";
-import { printChannelOutput } from "./extension";
-import { IDictionary } from "../../frontend/src/app-logic/Types";
+} from "../../frontend/src/supplement/Requisitions.js";
+import { printChannelOutput } from "./extension.js";
+import { IDictionary } from "../../frontend/src/app-logic/Types.js";
 
 /** A record of white spaces in a code block, which must be re-applied when replacing the original block. */
 interface IWhiteSpaces {

gui/extension/src/DBEditorCommandHandler.ts

@@ -28,38 +28,40 @@ import { commands, ConfigurationTarget, TextEditor, Uri, window, workspace } fro
 
 import {
     IRequestListEntry, IRequestTypeMap, IWebviewProvider, requisitions,
-} from "../../frontend/src/supplement/Requisitions";
-
-import { OciDbSystemTreeItem } from "./tree-providers/OCITreeProvider";
-import { ScriptTreeItem } from "./tree-providers/ScriptTreeItem";
-
-import { EntityType, IDBEditorScriptState } from "../../frontend/src/modules/db-editor";
-import { EditorLanguage, INewEditorRequest, IRunQueryRequest, IScriptRequest } from "../../frontend/src/supplement";
-import { DBConnectionViewProvider } from "./web-views/DBConnectionViewProvider";
-
-import { IMrsDbObjectData } from "../../frontend/src/communication/ProtocolMrs";
-import { DBType } from "../../frontend/src/supplement/ShellInterface";
-import { ShellInterfaceSqlEditor } from "../../frontend/src/supplement/ShellInterface/ShellInterfaceSqlEditor";
-import { uuid } from "../../frontend/src/utilities/helpers";
-import { CodeBlocks } from "./CodeBlocks";
-import { WebviewProvider } from "./web-views/WebviewProvider";
-import { ExtensionHost } from "./ExtensionHost";
-import { ConnectionsTreeBaseItem } from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeBaseItem";
+} from "../../frontend/src/supplement/Requisitions.js";
+
+import { ScriptTreeItem } from "./tree-providers/ScriptTreeItem.js";
+
+import { EntityType, IDBEditorScriptState } from "../../frontend/src/modules/db-editor/index.js";
+import {
+    EditorLanguage, INewEditorRequest, IRunQueryRequest, IScriptRequest,
+} from "../../frontend/src/supplement/index.js";
+import { DBConnectionViewProvider } from "./WebviewProviders/DBConnectionViewProvider.js";
+
+import { IMrsDbObjectData } from "../../frontend/src/communication/ProtocolMrs.js";
+import { DBType } from "../../frontend/src/supplement/ShellInterface/index.js";
+import { ShellInterfaceSqlEditor } from "../../frontend/src/supplement/ShellInterface/ShellInterfaceSqlEditor.js";
+import { uuid } from "../../frontend/src/utilities/helpers.js";
+import { CodeBlocks } from "./CodeBlocks.js";
+import { WebviewProvider } from "./WebviewProviders/WebviewProvider.js";
+import { ExtensionHost } from "./ExtensionHost.js";
+import { ConnectionsTreeBaseItem } from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeBaseItem.js";
 import {
     CdmSchemaGroupMember,
     ConnectionsTreeDataModelEntry, ICdmConnectionEntry, ICdmRestDbObjectEntry, ICdmRoutineEntry, ICdmSchemaEntry,
     ICdmTableEntry, ICdmTriggerEntry,
-} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeDataModel";
+} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeDataModel.js";
 import {
     ConnectionsTreeDataProvider,
-} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeProvider";
-import { ConnectionTreeItem } from "./tree-providers/ConnectionsTreeProvider/ConnectionTreeItem";
-import { SchemaEventTreeItem } from "./tree-providers/ConnectionsTreeProvider/SchemaEventTreeItem";
+} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeProvider.js";
+import { ConnectionTreeItem } from "./tree-providers/ConnectionsTreeProvider/ConnectionTreeItem.js";
+import { SchemaEventTreeItem } from "./tree-providers/ConnectionsTreeProvider/SchemaEventTreeItem.js";
 import {
     IEditorConnectionEntry, IOpenEditorBaseEntry, IOpenEditorEntry, OpenEditorsTreeDataProvider,
-} from "./tree-providers/OpenEditorsTreeProvider/OpenEditorsTreeProvider";
-import { showMessageWithTimeout } from "./utilities";
-import { snakeToCamelCase } from "../../frontend/src/utilities/string-helpers";
+} from "./tree-providers/OpenEditorsTreeProvider/OpenEditorsTreeProvider.js";
+import { showMessageWithTimeout } from "./utilities.js";
+import { snakeToCamelCase } from "../../frontend/src/utilities/string-helpers.js";
+import { OciDbSystemTreeItem } from "./tree-providers/OCITreeProvider/OciDbSystemTreeItem.js";
 
 /** A class to handle all DB editor related commands and jobs. */
 export class DBEditorCommandHandler {
@@ -387,18 +389,18 @@ export class DBEditorCommandHandler {
             }));
 
         context.subscriptions.push(commands.registerCommand("msg.copyCreateScriptWithDelimitersToClipboard",
-        (entry?: ConnectionsTreeDataModelEntry) => {
-            if (entry && entry.treeItem instanceof ConnectionsTreeBaseItem) {
-                entry.treeItem.copyCreateScriptToClipboard(true);
-            }
-        }));
+            (entry?: ConnectionsTreeDataModelEntry) => {
+                if (entry && entry.treeItem instanceof ConnectionsTreeBaseItem) {
+                    entry.treeItem.copyCreateScriptToClipboard(true);
+                }
+            }));
 
         context.subscriptions.push(commands.registerCommand("msg.copyDropCreateScriptWithDelimitersToClipboard",
-        (entry?: ConnectionsTreeDataModelEntry) => {
-            if (entry && entry.treeItem instanceof ConnectionsTreeBaseItem) {
-                entry.treeItem.copyCreateScriptToClipboard(true, true);
-            }
-        }));
+            (entry?: ConnectionsTreeDataModelEntry) => {
+                if (entry && entry.treeItem instanceof ConnectionsTreeBaseItem) {
+                    entry.treeItem.copyCreateScriptToClipboard(true, true);
+                }
+            }));
 
         context.subscriptions.push(commands.registerCommand("msg.editInScriptEditor", async (uri?: Uri) => {
             if (uri?.scheme === "file") {

gui/extension/src/ExtensionHost.ts

@@ -26,36 +26,36 @@ import {
     WorkspaceConfiguration,
 } from "vscode";
 
-import { ShellTask } from "../../frontend/src/shell-tasks/ShellTask";
-import { Settings } from "../../frontend/src/supplement/Settings/Settings";
-import { ISettingCategory, settingCategories } from "../../frontend/src/supplement/Settings/SettingsRegistry";
-import { DBType } from "../../frontend/src/supplement/ShellInterface";
-import { webSession } from "../../frontend/src/supplement/WebSession";
-
-import { printChannelOutput, taskOutputChannel } from "./extension";
-import { ScriptsTreeDataProvider } from "./tree-providers/ScriptsTreeProvider";
-import { ShellTasksTreeDataProvider } from "./tree-providers/ShellTreeProvider/ShellTasksTreeProvider";
-
-import { IStatusbarInfo } from "../../frontend/src/app-logic/Types";
-import { IShellModuleDataCategoriesEntry, IShellProfile } from "../../frontend/src/communication/ProtocolGui";
+import { ShellTask } from "../../frontend/src/shell-tasks/ShellTask.js";
+import { Settings } from "../../frontend/src/supplement/Settings/Settings.js";
+import { ISettingCategory, settingCategories } from "../../frontend/src/supplement/Settings/SettingsRegistry.js";
+import { DBType } from "../../frontend/src/supplement/ShellInterface/index.js";
+import { webSession } from "../../frontend/src/supplement/WebSession.js";
+
+import { printChannelOutput, taskOutputChannel } from "./extension.js";
+import { ScriptsTreeDataProvider } from "./tree-providers/ScriptsTreeProvider.js";
+import { ShellTasksTreeDataProvider } from "./tree-providers/ShellTreeProvider/ShellTasksTreeProvider.js";
+
+import { IStatusbarInfo } from "../../frontend/src/app-logic/Types.js";
+import { IShellModuleDataCategoriesEntry, IShellProfile } from "../../frontend/src/communication/ProtocolGui.js";
 import {
     IRequestListEntry, IRequestTypeMap, IRequisitionCallbackValues, IWebviewProvider, requisitions,
-} from "../../frontend/src/supplement/Requisitions";
-import { ShellInterface } from "../../frontend/src/supplement/ShellInterface/ShellInterface";
-import { NodeMessageScheduler } from "./communication/NodeMessageScheduler";
-import { DBEditorCommandHandler } from "./DBEditorCommandHandler";
-import { NotebookEditorProvider } from "./editor-providers/NotebookEditorProvider";
-import { MDSCommandHandler } from "./MDSCommandHandler";
-import { MRSCommandHandler } from "./MRSCommandHandler";
-import { ShellConsoleCommandHandler } from "./ShellConsoleCommandHandler";
+} from "../../frontend/src/supplement/Requisitions.js";
+import { ShellInterface } from "../../frontend/src/supplement/ShellInterface/ShellInterface.js";
+import { NodeMessageScheduler } from "./communication/NodeMessageScheduler.js";
+import { DBEditorCommandHandler } from "./DBEditorCommandHandler.js";
+import { NotebookEditorProvider } from "./editor-providers/NotebookEditorProvider.js";
+import { MDSCommandHandler } from "./MDSCommandHandler.js";
+import { MRSCommandHandler } from "./MRSCommandHandler.js";
+import { ShellConsoleCommandHandler } from "./ShellConsoleCommandHandler.js";
 import {
     ICdmConnectionEntry, ICdmSchemaEntry,
-} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeDataModel";
+} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeDataModel.js";
 import {
     ConnectionsTreeDataProvider,
-} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeProvider";
-import { DBConnectionViewProvider } from "./web-views/DBConnectionViewProvider";
-import { WebviewProvider } from "./web-views/WebviewProvider";
+} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeProvider.js";
+import { DBConnectionViewProvider } from "./WebviewProviders/DBConnectionViewProvider.js";
+import { WebviewProvider } from "./WebviewProviders/WebviewProvider.js";
 
 /** This class manages some extension wide things like authentication handling etc. */
 export class ExtensionHost {

gui/extension/src/MDSCommandHandler.ts

@@ -28,30 +28,30 @@ import {
 import { homedir } from "os";
 import { existsSync } from "fs";
 
-import { ICompartment, IPortForwardingSessionTargetResourceDetails } from "../../frontend/src/communication";
-import { taskOutputChannel } from "./extension";
-
-import { ExtensionHost } from "./ExtensionHost";
-import { OciTreeDataProvider } from "./tree-providers/OCITreeProvider";
-import { OciBastionTreeItem } from "./tree-providers/OCITreeProvider/OciBastionTreeItem";
-import { OciCompartmentTreeItem } from "./tree-providers/OCITreeProvider/OciCompartmentTreeItem";
-import { OciComputeInstanceTreeItem } from "./tree-providers/OCITreeProvider/OciComputeInstanceTreeItem";
-import { OciDbSystemTreeItem } from "./tree-providers/OCITreeProvider/OciDbSystemTreeItem";
-import { OciLoadBalancerTreeItem } from "./tree-providers/OCITreeProvider/OciLoadBalancerTreeItem";
-import { OciConfigProfileTreeItem } from "./tree-providers/OCITreeProvider/OciProfileTreeItem";
-import { DbSystem } from "../../frontend/src/oci-typings/oci-mysql/lib/model";
-
-import { DialogResponseClosure, IDictionary, MdsDialogType } from "../../frontend/src/app-logic/Types";
-import { DialogWebviewManager } from "./web-views/DialogWebviewProvider";
-import { SchemaMySQLTreeItem } from "./tree-providers/ConnectionsTreeProvider/SchemaMySQLTreeItem";
-import { IMdsProfileData } from "../../frontend/src/communication/ProtocolMds";
-import { ShellInterfaceShellSession } from "../../frontend/src/supplement/ShellInterface/ShellInterfaceShellSession";
-import { ICdmSchemaEntry } from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeDataModel";
-import { ShellInterface } from "../../frontend/src/supplement/ShellInterface/ShellInterface";
-import { webSession } from "../../frontend/src/supplement/WebSession";
-import { requisitions } from "../../frontend/src/supplement/Requisitions";
-import { DBType } from "../../frontend/src/supplement/ShellInterface";
-import { MySQLConnCompression, MySQLConnectionScheme } from "../../frontend/src/communication/MySQL";
+import { ICompartment, IPortForwardingSessionTargetResourceDetails } from "../../frontend/src/communication/index.js";
+import { taskOutputChannel } from "./extension.js";
+
+import { ExtensionHost } from "./ExtensionHost.js";
+import { OciTreeDataProvider } from "./tree-providers/OCITreeProvider/index.js";
+import { OciBastionTreeItem } from "./tree-providers/OCITreeProvider/OciBastionTreeItem.js";
+import { OciCompartmentTreeItem } from "./tree-providers/OCITreeProvider/OciCompartmentTreeItem.js";
+import { OciComputeInstanceTreeItem } from "./tree-providers/OCITreeProvider/OciComputeInstanceTreeItem.js";
+import { OciDbSystemTreeItem } from "./tree-providers/OCITreeProvider/OciDbSystemTreeItem.js";
+import { OciLoadBalancerTreeItem } from "./tree-providers/OCITreeProvider/OciLoadBalancerTreeItem.js";
+import { OciConfigProfileTreeItem } from "./tree-providers/OCITreeProvider/OciProfileTreeItem.js";
+import { DbSystem } from "../../frontend/src/oci-typings/oci-mysql/lib/model/index.js";
+
+import { DialogResponseClosure, IDictionary, MdsDialogType } from "../../frontend/src/app-logic/Types.js";
+import { DialogWebviewManager } from "./WebviewProviders/DialogWebviewProvider.js";
+import { SchemaMySQLTreeItem } from "./tree-providers/ConnectionsTreeProvider/SchemaMySQLTreeItem.js";
+import { IMdsProfileData } from "../../frontend/src/communication/ProtocolMds.js";
+import { ShellInterfaceShellSession } from "../../frontend/src/supplement/ShellInterface/ShellInterfaceShellSession.js";
+import { ICdmSchemaEntry } from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeDataModel.js";
+import { ShellInterface } from "../../frontend/src/supplement/ShellInterface/ShellInterface.js";
+import { webSession } from "../../frontend/src/supplement/WebSession.js";
+import { requisitions } from "../../frontend/src/supplement/Requisitions.js";
+import { DBType } from "../../frontend/src/supplement/ShellInterface/index.js";
+import { MySQLConnCompression, MySQLConnectionScheme } from "../../frontend/src/communication/MySQL.js";
 
 export class MDSCommandHandler {
     private dialogManager = new DialogWebviewManager();

gui/extension/src/MRSCommandHandler.ts

@@ -29,23 +29,23 @@ import {
     commands, env, ExtensionContext, ExtensionMode, TerminalExitStatus, Uri, ViewColumn, WebviewPanel, window,
 } from "vscode";
 
-import { DBType } from "../../frontend/src/supplement/ShellInterface";
-
-import { IMySQLConnectionOptions, MySQLConnectionScheme } from "../../frontend/src/communication/MySQL";
-import { IMrsServiceData } from "../../frontend/src/communication/ProtocolMrs";
-import { DBEditorModuleId } from "../../frontend/src/modules/ModuleInfo";
-import { ShellInterfaceSqlEditor } from "../../frontend/src/supplement/ShellInterface/ShellInterfaceSqlEditor";
-import { findExecutable } from "../../frontend/src/utilities/file-utilities";
-import { MySQLShellLauncher } from "../../frontend/src/utilities/MySQLShellLauncher";
-import { pathToCamelCase } from "../../frontend/src/utilities/string-helpers";
-import { ExtensionHost } from "./ExtensionHost";
+import { DBType } from "../../frontend/src/supplement/ShellInterface/index.js";
+
+import { IMySQLConnectionOptions, MySQLConnectionScheme } from "../../frontend/src/communication/MySQL.js";
+import { IMrsServiceData } from "../../frontend/src/communication/ProtocolMrs.js";
+import { DBEditorModuleId } from "../../frontend/src/modules/ModuleInfo.js";
+import { ShellInterfaceSqlEditor } from "../../frontend/src/supplement/ShellInterface/ShellInterfaceSqlEditor.js";
+import { findExecutable } from "../../frontend/src/utilities/file-utilities.js";
+import { MySQLShellLauncher } from "../../frontend/src/utilities/MySQLShellLauncher.js";
+import { pathToCamelCase } from "../../frontend/src/utilities/string-helpers.js";
+import { ExtensionHost } from "./ExtensionHost.js";
 import {
     ICdmConnectionEntry,
     ICdmRestAuthAppEntry, ICdmRestContentFileEntry, ICdmRestContentSetEntry, ICdmRestDbObjectEntry, ICdmRestRootEntry,
     ICdmRestRouterEntry, ICdmRestSchemaEntry, ICdmRestServiceEntry, ICdmRestUserEntry, ICdmSchemaEntry,
-} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeDataModel";
-import { showMessageWithTimeout, showModalDialog } from "./utilities";
-import { openSqlEditorConnection, openSqlEditorSessionAndConnection } from "./utilitiesShellGui";
+} from "./tree-providers/ConnectionsTreeProvider/ConnectionsTreeDataModel.js";
+import { showMessageWithTimeout, showModalDialog } from "./utilities.js";
+import { openSqlEditorConnection, openSqlEditorSessionAndConnection } from "./utilitiesShellGui.js";
 
 export class MRSCommandHandler {
     #docsWebviewPanel?: WebviewPanel;