configuring webpack. (#65)

.gitignore

@@ -1,5 +1,6 @@
 # Production-ready extension
 /out/
+/dist/
 
 # React application
 /build/

.vscode/launch.json

@@ -11,8 +11,8 @@
             "request": "launch",
             "runtimeExecutable": "${execPath}",
             "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
-            "outFiles": ["${workspaceFolder}/out/**/*.js"],
+            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
-            "preLaunchTask": "npm: watch"
+            "preLaunchTask": "npm: compile"
         }
     ]
 }

.vscodeignore

@@ -1,3 +1,8 @@
-**/*.ts
+.vscode
-src/**
+node_modules
-public/**
+out/
+src/
+tsconfig.json
+webpack.config.js
+DefinitionGenerator/
+public/

config-overrides.js

@@ -0,0 +1,22 @@
+const { override } = require("customize-cra");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const disableChunksAndHash = () => (config) => {
+    // JS Overrides
+    config.output.filename = "static/js/[name].js";
+    config.output.chunkFilename = "static/js/[name].chunk.js";
+    //change MiniCssExtractPlugin
+    config.plugins = config.plugins.filter((p) => p.constructor.name !== "MiniCssExtractPlugin" && p.constructor.name !== "SplitChunksPlugin");
+    config.plugins.push(
+        new MiniCssExtractPlugin({
+            filename: "static/css/[name].css",
+            chunkFilename: "static/css/[name].chunk.css"
+        })
+    );
+    config.optimization.splitChunks = false;
+    config.optimization.runtimeChunk = false;
+
+    return config;
+};
+
+module.exports = override(disableChunksAndHash());

package.json

@@ -18,7 +18,7 @@
         "type": "git",
         "url": "https://github.com/Azure/lva-edge-vscode-extension"
     },
-    "main": "./out/Extension/extension.js",
+    "main": "./dist/extension",
     "contributes": {
         "commands": [
             {
@@ -167,12 +167,13 @@
         ]
     },
     "scripts": {
-        "vscode:prepublish": "npm run compile",
+        "vscode:prepublish": "react-app-rewired build && webpack --mode production --config src/Extension/webpack.config.js",
+        "webpack-dev": "rimraf dist && webpack --mode development --watch --config src/Extension/webpack.config.js",
         "compile": "npm run compile-react && npm run compile-ext",
-        "compile-react": "react-scripts build",
+        "compile-react": "react-app-rewired build",
-        "eject-react": "react-scripts eject",
+        "eject-react": "react-app-rewired eject",
-        "compile-ext": "tsc -p src/Extension/tsconfig.json",
+        "compile-ext": "rimraf dist && webpack --mode development --config src/Extension/webpack.config.js",
-        "dev": "set PORT=3008 && react-scripts start",
+        "dev": "set PORT=3008 && react-app-rewired start",
         "lint": "eslint . --ext .ts,.tsx",
         "format": "prettier --write \"./**/*.{js,jsx,json,ts,tsx}\" \"!./build\"",
         "create-definitions": "tsc -p ./src/Tools/DefinitionGenerator/tsconfig.json && node ./DefinitionGenerator/Tools/DefinitionGenerator/entry.js",
@@ -185,29 +186,35 @@
         "@vienna/react-dag-editor": "2.0.0-rc.38",
         "azure-iothub": "1.12.4",
         "dagre": "^0.8.5",
-        "keytar": "^6.0.1",
         "lodash": "^4.17.20",
         "react": "^16.13.1",
         "react-accessible-accordion": "^3.3.3",
         "react-accessible-tree": "^1.0.3",
         "react-dom": "^16.13.1",
-        "typescript": "^3.9.4"
+        "uuid": "^8.3.0"
     },
     "devDependencies": {
-        "@types/keytar": "^4.4.2",
-        "@typescript-eslint/eslint-plugin": "4.0.0",
-        "@typescript-eslint/parser": "^3.0.0",
-        "react-scripts": "^4.0.0",
         "@types/dagre": "^0.7.44",
+        "@types/keytar": "^4.4.2",
         "@types/lodash": "^4.14.155",
         "@types/node": "^12.12.0",
         "@types/react": "^16.9.36",
         "@types/react-dom": "^16.9.8",
         "@types/uuid": "^8.0.0",
         "@types/vscode": "^1.38.0",
+        "@typescript-eslint/eslint-plugin": "4.0.0",
+        "@typescript-eslint/parser": "^3.0.0",
+        "customize-cra": "^1.0.0",
         "eslint": "^7.11.0",
         "eslint-plugin-react-hooks": "^4.0.8",
-        "prettier": "^2.0.5"
+        "prettier": "^2.0.5",
+        "react-app-rewired": "^2.1.6",
+        "react-scripts": "^4.0.0",
+        "ts-loader": "^8.0.11",
+        "typescript": "^3.9.4",
+        "vscode": "^1.1.37",
+        "webpack": "4.44.2",
+        "webpack-cli": "^3.3.12"
     },
     "browserslist": {
         "production": [

src/Extension/ModuleExplorerPanel/InstanceItem.ts

@@ -1,9 +1,5 @@
 import * as vscode from "vscode";
-import {
+import { MediaGraphInstance, MediaGraphInstanceState, MediaGraphTopology } from "../../Common/Types/LVASDKTypes";
-    MediaGraphInstance,
-    MediaGraphInstanceState,
-    MediaGraphTopology
-} from "../../Common/Types/LVASDKTypes";
 import { GraphInstanceData } from "../Data/GraphInstanceData";
 import { IotHubData } from "../Data/IotHubData";
 import { Constants } from "../Util/Constants";
@@ -41,9 +37,6 @@ export class InstanceItem extends vscode.TreeItem {
                     this.contextValue = "InstanceItemContextProgress";
                     this.iconPath = TreeUtils.getIconPath(`Graph-Instance-Inactive`);
             }
-        } else {
-            this.iconPath = new vscode.ThemeIcon("add");
-            this.command = { title: Localizer.localize("createGraphInstanceButton"), command: "moduleExplorer.createInstance", arguments: [this] };
         }
     }
 

src/Extension/ModuleExplorerPanel/ModuleExplorer.ts

@@ -10,8 +10,8 @@ import { IoTHubLabelNode } from "./IoTHubLabelNode";
 import { INode } from "./Node";
 
 export default class ModuleExplorer implements vscode.TreeDataProvider<INode> {
-    private _onDidChangeTreeData: vscode.EventEmitter<INode | undefined | void> = new vscode.EventEmitter<INode | undefined | void>();
+    private _onDidChangeTreeData: vscode.EventEmitter<INode | undefined> = new vscode.EventEmitter<INode | undefined>();
-    readonly onDidChangeTreeData: vscode.Event<INode | undefined | void> = this._onDidChangeTreeData.event;
+    readonly onDidChangeTreeData: vscode.Event<INode | undefined> = this._onDidChangeTreeData.event;
 
     private _connectionConfig?: LvaHubConfig;
     private _iotHubData?: IotHubData;

src/Extension/Util/CredentialStore.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 "use strict";
-import * as keytar from "keytar";
+import * as keytarType from "keytar";
 import { v4 as uuid } from "uuid";
 import * as vscode from "vscode";
 import { Constants } from "./Constants";
@@ -14,6 +14,8 @@ interface CredentialLvaHubConfig {
 }
 
 export class CredentialStore {
+    private static keytar: typeof keytarType = CredentialStore.getCoreNodeModule("keytar");
+
     public static async getConnectionInfo(context: vscode.ExtensionContext): Promise<LvaHubConfig> {
         const connectionInfo: CredentialLvaHubConfig | undefined = context.globalState.get(Constants.LvaGlobalStateKey);
         if (!connectionInfo) {
@@ -21,7 +23,7 @@ export class CredentialStore {
         }
         let connectionString: string | undefined | null = "";
         try {
-            connectionString = await keytar.getPassword(Constants.ExtensionId, connectionInfo.connectionStringKey);
+            connectionString = await this.keytar.getPassword(Constants.ExtensionId, connectionInfo.connectionStringKey);
         } catch (error) {
             connectionString = context.globalState.get(connectionInfo.connectionStringKey);
         }
@@ -41,7 +43,7 @@ export class CredentialStore {
         });
 
         try {
-            await keytar.setPassword(Constants.ExtensionId, connectionKey, connectionInfo.connectionString);
+            await this.keytar.setPassword(Constants.ExtensionId, connectionKey, connectionInfo.connectionString);
         } catch (error) {
             context.globalState.update(connectionKey, connectionInfo.connectionString);
         }
@@ -51,8 +53,23 @@ export class CredentialStore {
         const connectionInfo: CredentialLvaHubConfig | undefined = context.globalState.get(Constants.LvaGlobalStateKey);
         context.globalState.update(Constants.LvaGlobalStateKey, null);
         if (connectionInfo) {
-            await keytar.deletePassword(Constants.ExtensionId, connectionInfo.connectionStringKey);
+            await this.keytar.deletePassword(Constants.ExtensionId, connectionInfo.connectionStringKey);
             context.globalState.update(connectionInfo.connectionStringKey, null);
         }
     }
+
+    /**
+     * Helper function that returns a node module installed with VSCode, or null if it fails.
+     */
+    private static getCoreNodeModule(moduleName: string) {
+        try {
+            return require(`${vscode.env.appRoot}/node_modules.asar/${moduleName}`);
+        } catch (err) {}
+
+        try {
+            return require(`${vscode.env.appRoot}/node_modules/${moduleName}`);
+        } catch (err) {}
+
+        return null;
+    }
 }

src/Extension/Util/Localizer.ts

@@ -1,5 +1,7 @@
 import * as path from "path";
 
+const locStrings = require("../../../package.nls.json");
+
 export default class Localizer {
     private static locStrings: Record<string, string>;
 
@@ -10,12 +12,15 @@ export default class Localizer {
             localizationFile = `package.nls.${locale}.json`;
         }
 
-        try {
+        Localizer.locStrings = locStrings;
-            Localizer.locStrings = require(path.join(extensionPath, localizationFile));
+        // Disabling localization as this was not setup using nls. will work on localization post preview release.
-        } catch {
+        // try {
-            // locale is not available, default to English
+        //     Localizer.locStrings = require(path.join(extensionPath, localizationFile));
-            Localizer.loadLocalization("en", extensionPath);
+        // } catch (ex) {
-        }
+        //     console.log(ex);
+        //     // locale is not available, default to English
+        //     Localizer.loadLocalization("en", extensionPath);
+        // }
     }
 
     public static localize(key: string) {

src/Extension/Webview/GraphPanel.ts

@@ -174,11 +174,8 @@ export class GraphEditorPanel {
 
     private _getResourceInjection(nonce: string, ending: string, template: (uri: vscode.Uri) => string) {
         const webview = this._panel.webview;
-        // from the VS Code example, seems to have to be this way instead import
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        const manifest = require(path.join(this._extensionPath, "build", "asset-manifest.json"));
-        const fileNames = manifest.entrypoints.filter((fileName: string) => fileName.endsWith("." + ending));
 
+        const fileNames = ["static/js/main.js", "static/css/main.css"];
         return fileNames
             .map((fileName: string) => {
                 // Local path to main script run in the webview

src/Extension/tsconfig.json

@@ -6,6 +6,14 @@
         "outDir": "../../out",
         "sourceMap": true,
         "forceConsistentCasingInFileNames": true,
-        "strict": true
+        "strict": true,
+        "esModuleInterop": true,
+        "allowJs": true,
+        "skipLibCheck": true,
+        "allowSyntheticDefaultImports": true,
+        "noFallthroughCasesInSwitch": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": false
     }
 }

src/Extension/webpack.config.js

@@ -0,0 +1,41 @@
+//@ts-check
+
+"use strict";
+
+const path = require("path");
+
+/**@type {import('webpack').Configuration}*/
+const config = {
+    target: "node",
+    node: {
+        __dirname: false
+    },
+    entry: path.resolve(__dirname, "extension.ts"),
+    output: {
+        path: path.resolve(__dirname, "../../", "dist"),
+        filename: "extension.js",
+        libraryTarget: "commonjs2",
+        devtoolModuleFilenameTemplate: "../../[resource-path]"
+    },
+    devtool: "source-map",
+    externals: {
+        vscode: "commonjs vscode"
+    },
+    resolve: {
+        extensions: [".ts", ".js"]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: "ts-loader"
+                    }
+                ]
+            }
+        ]
+    }
+};
+module.exports = config;

src/Webview/Components/ParameterSelector/EditableParameter.tsx

@@ -26,7 +26,7 @@ export const EditableParameter: React.FunctionComponent<EditableParameterProps>
 
     const attributes: React.CSSProperties = {
         flex: 1,
-        border: "var(--vscode-parameters-border)",
+        border: "1px solid",
         borderRadius: "5px",
         flexDirection: "row",
         padding: "8px"

src/Webview/Models/MediaGraphValidator.ts

@@ -204,7 +204,7 @@ export default class GraphValidator {
                     type: ValidationErrorType.MissingField,
                     property: thisPropertyPath
                 });
-            } else if (property?.type === "string" && nestedProperties != null && nestedProperties !== "") {
+            } else if (property?.type === "string" && nestedProperties != null && nestedProperties !== "" && !nestedProperties.includes("${")) {
                 const key = `${definition.localizationKey}.${name}`;
                 const format = (customPropertyTypes as any)[key] ?? null;
                 let value = nestedProperties;

tsconfig.json

@@ -1,23 +1,33 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
-        "module": "esnext",
+    "module": "esnext",
-        "target": "es2019",
+    "target": "es6",
-        "lib": ["ES2019", "DOM"],
+    "outDir": "out",
-        "outDir": "out",
+    "lib": [
-        "sourceMap": true,
+      "es2017",
-        "strict": true,
+      "dom"
-        "allowJs": true,
+    ],
-        "skipLibCheck": true,
+    "sourceMap": true,
-        "esModuleInterop": true,
+    "rootDir": ".",
-        "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
-        "forceConsistentCasingInFileNames": true,
+    "allowJs": true,
-        "moduleResolution": "node",
+    "skipLibCheck": true,
-        "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
-        "isolatedModules": true,
+    "strict": true,
-        "jsx": "react",
+    "forceConsistentCasingInFileNames": true,
-        "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
-        "noFallthroughCasesInSwitch": true
+    "moduleResolution": "node",
-    },
+    "resolveJsonModule": true,
-    "include": ["src/Webview"],
+    "isolatedModules": true,
-    "exclude": ["Common/Tools", "Extension"]
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src/Webview"
+  ],
+  "exclude": [
+    "node_modules",
+    "Common/Tools",
+    "Extension"
+  ]
 }