configuring webpack. (#65)

2020-12-02 11:16:57 -08:00 · 2020-12-02 11:16:57 -08:00 · 86de2d11a3
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,6 @@
 # Production-ready extension
 /out/
+/dist/

 # React application
 /build/
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -11,8 +11,8 @@
            "request": "launch",
            "runtimeExecutable": "${execPath}",
            "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
-            "outFiles": ["${workspaceFolder}/out/**/*.js"],
-            "preLaunchTask": "npm: watch"
+            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+            "preLaunchTask": "npm: compile"
        }
    ]
 }
--- a/.vscodeignore
+++ b/.vscodeignore
@ -1,3 +1,8 @@
-**/*.ts
-src/**
-public/**
+.vscode
+node_modules
+out/
+src/
+tsconfig.json
+webpack.config.js
+DefinitionGenerator/
+public/
--- a/config-overrides.js
+++ b/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());
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
-        "eject-react": "react-scripts eject",
-        "compile-ext": "tsc -p src/Extension/tsconfig.json",
-        "dev": "set PORT=3008 && react-scripts start",
+        "compile-react": "react-app-rewired build",
+        "eject-react": "react-app-rewired eject",
+        "compile-ext": "rimraf dist && webpack --mode development --config src/Extension/webpack.config.js",
+        "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": [
--- a/src/Extension/ModuleExplorerPanel/InstanceItem.ts
+++ b/src/Extension/ModuleExplorerPanel/InstanceItem.ts
@ -1,9 +1,5 @@
 import * as vscode from "vscode";
-import {
-    MediaGraphInstance,
-    MediaGraphInstanceState,
-    MediaGraphTopology
-} from "../../Common/Types/LVASDKTypes";
+import { 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] };
        }
    }

--- a/src/Extension/ModuleExplorerPanel/ModuleExplorer.ts
+++ b/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>();
-    readonly onDidChangeTreeData: vscode.Event<INode | undefined | void> = this._onDidChangeTreeData.event;
+    private _onDidChangeTreeData: vscode.EventEmitter<INode | undefined> = new vscode.EventEmitter<INode | undefined>();
+    readonly onDidChangeTreeData: vscode.Event<INode | undefined> = this._onDidChangeTreeData.event;

    private _connectionConfig?: LvaHubConfig;
    private _iotHubData?: IotHubData;
--- a/src/Extension/Util/CredentialStore.ts
+++ b/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;
+    }
 }
--- a/src/Extension/Util/Localizer.ts
+++ b/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 = require(path.join(extensionPath, localizationFile));
-        } catch {
-            // locale is not available, default to English
-            Localizer.loadLocalization("en", extensionPath);
-        }
+        Localizer.locStrings = locStrings;
+        // Disabling localization as this was not setup using nls. will work on localization post preview release.
+        // try {
+        //     Localizer.locStrings = require(path.join(extensionPath, localizationFile));
+        // } catch (ex) {
+        //     console.log(ex);
+        //     // locale is not available, default to English
+        //     Localizer.loadLocalization("en", extensionPath);
+        // }
    }

    public static localize(key: string) {
--- a/src/Extension/Webview/GraphPanel.ts
+++ b/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
--- a/src/Extension/tsconfig.json
+++ b/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
    }
 }
--- a/src/Extension/webpack.config.js
+++ b/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;
--- a/src/Webview/Components/ParameterSelector/EditableParameter.tsx
+++ b/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"
--- a/src/Webview/Models/MediaGraphValidator.ts
+++ b/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;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,23 +1,33 @@
 {
-    "compilerOptions": {
-        "module": "esnext",
-        "target": "es2019",
-        "lib": ["ES2019", "DOM"],
-        "outDir": "out",
-        "sourceMap": true,
-        "strict": true,
-        "allowJs": true,
-        "skipLibCheck": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "forceConsistentCasingInFileNames": true,
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "jsx": "react",
-        "noEmit": true,
-        "noFallthroughCasesInSwitch": true
-    },
-    "include": ["src/Webview"],
-    "exclude": ["Common/Tools", "Extension"]
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "es6",
+    "outDir": "out",
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "sourceMap": true,
+    "rootDir": ".",
+    "esModuleInterop": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src/Webview"
+  ],
+  "exclude": [
+    "node_modules",
+    "Common/Tools",
+    "Extension"
+  ]
 }