From cbb51db85104b9b6001c9998e0b2afbd59eb7cc8 Mon Sep 17 00:00:00 2001 From: Dane Bratz Date: Fri, 10 May 2019 10:30:13 -0700 Subject: [PATCH] adds bundling to plugin (#224) * adds bundling to plugin * launch.json path * launch.json fields --- .gitignore | 3 ++ .vscode/launch.json | 16 ++++++++--- .vscodeignore | 5 ++++ config/webpack.config.js | 62 ++++++++++++++++++++++++++++++++++++++++ package.json | 17 +++++++++-- src/html-utils.js | 15 +++++----- 6 files changed, 104 insertions(+), 14 deletions(-) create mode 100644 config/webpack.config.js diff --git a/.gitignore b/.gitignore index 9082cde..9d67624 100644 --- a/.gitignore +++ b/.gitignore @@ -42,3 +42,6 @@ package-lock.json sample.html .vscode-test + +# bundled assets +dist diff --git a/.vscode/launch.json b/.vscode/launch.json index 2d7907e..c7c066c 100644 --- a/.vscode/launch.json +++ b/.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" } ] } \ No newline at end of file diff --git a/.vscodeignore b/.vscodeignore index 499648c..a26943f 100644 --- a/.vscodeignore +++ b/.vscodeignore @@ -5,3 +5,8 @@ test/** jsconfig.json vsc-extension-quickstart.md .eslintrc.json +config/ +src/ +node_modules +assets/ +docs/ \ No newline at end of file diff --git a/config/webpack.config.js b/config/webpack.config.js new file mode 100644 index 0000000..77bef5c --- /dev/null +++ b/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; \ No newline at end of file diff --git a/package.json b/package.json index 37b6349..e23f406 100644 --- a/package.json +++ b/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" } } diff --git a/src/html-utils.js b/src/html-utils.js index 89a58d0..7b32715 100644 --- a/src/html-utils.js +++ b/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 => ``)