adds bundling to plugin (#224)

* adds bundling to plugin

* launch.json path

* launch.json fields

.gitignore

@@ -42,3 +42,6 @@ package-lock.json
 sample.html
 
 .vscode-test
+
+# bundled assets
+dist

.vscode/launch.json

@@ -7,19 +7,27 @@
             "type": "extensionHost",
             "request": "launch",
             "runtimeExecutable": "${execPath}",
-            "args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
+            "args": ["--extensionDevelopmentPath=${workspaceFolder}" ],
             "stopOnEntry": false,
             "env": {
                 "NODE_ENV": "development"
-            }
+            },
+            "outFiles": [
+                "${workspaceFolder}/dist/**/*.js"
+            ],
+            "preLaunchTask": "npm: compile"
         },
         {
             "name": "Launch Tests",
             "type": "extensionHost",
             "request": "launch",
             "runtimeExecutable": "${execPath}",
-            "args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/test", "--disable-extensions" ],
-            "stopOnEntry": false
+            "args": ["--extensionDevelopmentPath=${workspaceFolder}", "--extensionTestsPath=${workspaceFolder}/test", "--disable-extensions" ],
+            "stopOnEntry": false,
+            "outFiles": [
+                "${workspaceFolder}/out/test/**/*.js"
+            ],
+            "preLaunchTask": "npm: compile"
         }
     ]
 }

.vscodeignore

@@ -5,3 +5,8 @@ test/**
 jsconfig.json
 vsc-extension-quickstart.md
 .eslintrc.json
+config/
+src/
+node_modules
+assets/
+docs/

config/webpack.config.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
+const CopyPlugin = require('copy-webpack-plugin');
+
+const ASSETS_PATH = path.resolve(__dirname, '..', 'assets');
+
+const getAssetsOfType = type => fs.readdirSync(path.resolve(ASSETS_PATH, type))
+  .map(p => path.resolve(ASSETS_PATH, type, p));
+
+const assetsPathOfType = type => `assets/${type}`;
+
+/**@type {import('webpack').Configuration}*/
+const config = {
+  target: 'node',
+
+  entry: {
+    extension: path.resolve(__dirname, '..', 'src', 'kite.js'), 
+  },
+  output: {
+    // the bundle is stored in the 'dist' folder (check package.json)
+    path: path.resolve(__dirname, '..', 'dist'),
+    filename: 'kite-extension.js',
+    libraryTarget: 'commonjs2',
+    devtoolModuleFilenameTemplate: '../[resource-path]'
+  },
+  devtool: 'source-map',
+  externals: {
+    vscode: 'commonjs vscode', // the vscode-module is created on-the-fly and must be excluded.
+    atom: 'atom' // because kite-installer imports it (has null checks around its usage, though)
+  },
+  resolve: {
+    extensions: ['.js']
+  },
+  plugins: [
+    // static asset merging and copying
+    new MergeIntoSingleFilePlugin({
+      files: {
+        [`${assetsPathOfType('js')}/assets.js`]: getAssetsOfType('js'),
+        [`${assetsPathOfType('css')}/assets.css`]: getAssetsOfType('css')
+      },
+      transform: {
+        [`${assetsPathOfType('js')}/assets.js`]: code => require('terser').minify(code).code
+      }
+    }),
+    new CopyPlugin([
+      {
+        from: 'images/',
+        to: path.resolve(__dirname, '..', 'dist', assetsPathOfType('images/'))
+      },
+      {
+        from: 'fonts/',
+        to: path.resolve(__dirname, '..', 'dist', assetsPathOfType('fonts/'))
+      }
+    ], {
+      context: ASSETS_PATH
+    })
+  ]
+};
+module.exports = config;

package.json

@@ -25,7 +25,7 @@
     "activationEvents": [
         "*"
     ],
-    "main": "./src/kite",
+    "main": "./dist/kite-extension",
     "contributes": {
         "commands": [
             {
@@ -88,7 +88,12 @@
     "scripts": {
         "postinstall": "node ./node_modules/vscode/bin/install",
         "test": "node ./node_modules/vscode/bin/test",
-        "cleanup": "rm -f package-lock.json && rm -rf node_modules"
+        "cleanup": "rm -f package-lock.json && rm -rf node_modules",
+        "vscode:prepublish": "webpack --config config/webpack.config.js --mode production",
+        "compile-prod": "webpack --config config/webpack.config.js --mode production",
+        "compile": "webpack --config config/webpack.config.js --mode none",
+        "watch": "webpack --config config/webpack.config.js --mode none --watch",
+        "install-local": "vsce package && code --install-extension kite-*.vsix && rm kite-*.vsix"
     },
     "dependencies": {
         "analytics-node": "^3.1.1",
@@ -105,18 +110,24 @@
     },
     "devDependencies": {
         "@atom/temp": "^0.8.4",
-        "fs-plus": "^3.0.2",
         "@types/mocha": "^2.2.32",
         "@types/node": "^6.0.40",
+        "copy-webpack-plugin": "^5.0.2",
         "editors-json-tests": "git://github.com/kiteco/editors-json-tests.git#master",
         "eslint": "^3.6.0",
         "expect.js": "^0.3.1",
+        "fs-plus": "^3.0.2",
         "jsdom": "^10",
         "jsdom-global": "^3",
         "mocha": "^5.2.0",
         "sinon": "^2.3.5",
+        "terser": "^3.17.0",
         "typescript": "^2.0.3",
+        "vsce": "^1.59.0",
         "vscode": "^1.1.22",
+        "webpack": "^4.30.0",
+        "webpack-cli": "^3.3.0",
+        "webpack-merge-and-include-globally": "^2.1.16",
         "widjet-test-utils": "^1.8.0"
     }
 }

src/html-utils.js

@@ -12,15 +12,16 @@ const {
   memberLabel, parameterName, parameterDefault, parameterTypeLink,
   symbolReturnType,
 } = require('./data-utils');
-const logo = fs.readFileSync(path.resolve(__dirname, '..', 'assets', 'images', 'logo-small.svg')).toString();
-const spinner = fs.readFileSync(path.resolve(__dirname, '..', 'assets', 'images', 'spinner.svg')).toString();
-const logoLarge = fs.readFileSync(path.resolve(__dirname, '..', 'assets', 'images', 'logo-no-text.svg')).toString();
-const proLogoSvg = fs.readFileSync(path.resolve(__dirname, '..', 'assets', 'images', 'kitepro.svg')).toString();
-const enterpriseLogoSvg = fs.readFileSync(path.resolve(__dirname, '..', 'assets', 'images', 'kiteenterprise.svg')).toString();
-const giftLogoPath = path.resolve(__dirname, '..', 'assets', 'images', 'icon-gift.png');
+const ASSETS_PATH = path.resolve(__dirname, '..', 'assets');
+
+const logo = fs.readFileSync(path.resolve(ASSETS_PATH, 'images', 'logo-small.svg')).toString();
+const spinner = fs.readFileSync(path.resolve(ASSETS_PATH, 'images', 'spinner.svg')).toString();
+const logoLarge = fs.readFileSync(path.resolve(ASSETS_PATH, 'images', 'logo-no-text.svg')).toString();
+const proLogoSvg = fs.readFileSync(path.resolve(ASSETS_PATH, 'images', 'kitepro.svg')).toString();
+const enterpriseLogoSvg = fs.readFileSync(path.resolve(ASSETS_PATH, 'images', 'kiteenterprise.svg')).toString();
+const giftLogoPath = path.resolve(ASSETS_PATH, 'images', 'icon-gift.png');
 const server = require('./server');
 
-const ASSETS_PATH = path.resolve(__dirname, '..', 'assets');
 const STYLESHEETS = fs.readdirSync(path.resolve(ASSETS_PATH, 'css'))
 .map(p => path.resolve(ASSETS_PATH, 'css', p))
 .map(p => `<link href="file://${p}" rel="stylesheet"/>`)