diff --git a/.vscode/settings.json b/.vscode/settings.json index 00ad71f..df01bf0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,11 @@ { - "typescript.tsdk": "node_modules\\typescript\\lib" + "typescript.tsdk": "node_modules\\typescript\\lib", + "files.exclude": { + "*.vsix": true, + "**/*.lock": true, + "**/node_modules/": true, + "dist/": true, + "util/": true, + "webview/build/": true + } } \ No newline at end of file diff --git a/webview/package.json b/webview/package.json index 49175ef..06734e1 100644 --- a/webview/package.json +++ b/webview/package.json @@ -9,7 +9,7 @@ "redux": "^4.0.5" }, "scripts": { - "start": "react-scripts-ts start", + "start": "cross-env BROWSER=none react-scripts-ts start", "build": "react-scripts-ts build", "test": "react-scripts-ts test --env=jsdom", "eject": "react-scripts-ts eject" @@ -19,11 +19,8 @@ "@types/react": "^16.9.23", "@types/react-dom": "^16.9.5", "@types/react-redux": "^7.1.7", - "react-dev-utils": "file:./react-dev-utils", + "cross-env": "^7.0.3", "react-scripts-ts": "^3.1.0", "typescript": "^4.0.2" - }, - "resolutions": { - "react-dev-utils": "file:./react-dev-utils" } } diff --git a/webview/react-dev-utils/FileSizeReporter.js b/webview/react-dev-utils/FileSizeReporter.js deleted file mode 100644 index 68aae41..0000000 --- a/webview/react-dev-utils/FileSizeReporter.js +++ /dev/null @@ -1,149 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -'use strict'; - -var fs = require('fs'); -var path = require('path'); -var chalk = require('chalk'); -var filesize = require('filesize'); -var recursive = require('recursive-readdir'); -var stripAnsi = require('strip-ansi'); -var gzipSize = require('gzip-size').sync; - -// Prints a detailed summary of build files. -function printFileSizesAfterBuild( - webpackStats, - previousSizeMap, - buildFolder, - maxBundleGzipSize, - maxChunkGzipSize -) { - var root = previousSizeMap.root; - var sizes = previousSizeMap.sizes; - var assets = (webpackStats.stats || [webpackStats]) - .map(stats => - stats - .toJson() - .assets.filter(asset => /\.(js|css)$/.test(asset.name)) - .map(asset => { - var fileContents = fs.readFileSync(path.join(root, asset.name)); - var size = gzipSize(fileContents); - var previousSize = sizes[removeFileNameHash(root, asset.name)]; - var difference = getDifferenceLabel(size, previousSize); - return { - folder: path.join( - path.basename(buildFolder), - path.dirname(asset.name) - ), - name: path.basename(asset.name), - size: size, - sizeLabel: - filesize(size) + (difference ? ' (' + difference + ')' : '') - }; - }) - ) - .reduce((single, all) => all.concat(single), []); - assets.sort((a, b) => b.size - a.size); - var longestSizeLabelLength = Math.max.apply( - null, - assets.map(a => stripAnsi(a.sizeLabel).length) - ); - var suggestBundleSplitting = false; - assets.forEach(asset => { - var sizeLabel = asset.sizeLabel; - var sizeLength = stripAnsi(sizeLabel).length; - if (sizeLength < longestSizeLabelLength) { - var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength); - sizeLabel += rightPadding; - } - var isMainBundle = asset.name.indexOf('main.') === 0; - var maxRecommendedSize = isMainBundle - ? maxBundleGzipSize - : maxChunkGzipSize; - var isLarge = maxRecommendedSize && asset.size > maxRecommendedSize; - if (isLarge && path.extname(asset.name) === '.js') { - suggestBundleSplitting = true; - } - console.log( - ' ' + - (isLarge ? chalk.yellow(sizeLabel) : sizeLabel) + - ' ' + - chalk.dim(asset.folder + path.sep) + - chalk.cyan(asset.name) - ); - }); - if (suggestBundleSplitting) { - console.log(); - console.log( - chalk.yellow('The bundle size is significantly larger than recommended.') - ); - console.log( - chalk.yellow( - 'Consider reducing it with code splitting: https://goo.gl/9VhYWB' - ) - ); - console.log( - chalk.yellow( - 'You can also analyze the project dependencies: https://goo.gl/LeUzfb' - ) - ); - } -} - -function removeFileNameHash(buildFolder, fileName) { - return fileName - .replace(buildFolder, '') - .replace( - /\/?(.*)(\.[0-9a-f]+)(\.chunk)?(\.js|\.css)/, - (match, p1, p2, p3, p4) => p1 + p4 - ); -} - -// Input: 1024, 2048 -// Output: "(+1 KB)" -function getDifferenceLabel(currentSize, previousSize) { - var FIFTY_KILOBYTES = 1024 * 50; - var difference = currentSize - previousSize; - var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0; - if (difference >= FIFTY_KILOBYTES) { - return chalk.red('+' + fileSize); - } else if (difference < FIFTY_KILOBYTES && difference > 0) { - return chalk.yellow('+' + fileSize); - } else if (difference < 0) { - return chalk.green(fileSize); - } else { - return ''; - } -} - -function measureFileSizesBeforeBuild(buildFolder) { - return new Promise(resolve => { - recursive(buildFolder, (err, fileNames) => { - var sizes; - if (!err && fileNames) { - sizes = fileNames - .filter(fileName => /\.(js|css)$/.test(fileName)) - .reduce((memo, fileName) => { - var contents = fs.readFileSync(fileName); - var key = removeFileNameHash(buildFolder, fileName); - memo[key] = gzipSize(contents); - return memo; - }, {}); - } - resolve({ - root: buildFolder, - sizes: sizes || {}, - }); - }); - }); -} - -module.exports = { - measureFileSizesBeforeBuild: measureFileSizesBeforeBuild, - printFileSizesAfterBuild: printFileSizesAfterBuild, -}; diff --git a/webview/react-dev-utils/InterpolateHtmlPlugin.js b/webview/react-dev-utils/InterpolateHtmlPlugin.js deleted file mode 100644 index 9233bde..0000000 --- a/webview/react-dev-utils/InterpolateHtmlPlugin.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -// This Webpack plugin lets us interpolate custom variables into `index.html`. -// Usage: `new InterpolateHtmlPlugin({ 'MY_VARIABLE': 42 })` -// Then, you can use %MY_VARIABLE% in your `index.html`. - -// It works in tandem with HtmlWebpackPlugin. -// Learn more about creating plugins like this: -// https://github.com/ampedandwired/html-webpack-plugin#events - -'use strict'; -const escapeStringRegexp = require('escape-string-regexp'); - -class InterpolateHtmlPlugin { - constructor(replacements) { - this.replacements = replacements; - } - - apply(compiler) { - compiler.plugin('compilation', compilation => { - compilation.plugin( - 'html-webpack-plugin-before-html-processing', - (data, callback) => { - // Run HTML through a series of user-specified string replacements. - Object.keys(this.replacements).forEach(key => { - const value = this.replacements[key]; - data.html = data.html.replace( - new RegExp('%' + escapeStringRegexp(key) + '%', 'g'), - value - ); - }); - callback(null, data); - } - ); - }); - } -} - -module.exports = InterpolateHtmlPlugin; diff --git a/webview/react-dev-utils/ModuleScopePlugin.js b/webview/react-dev-utils/ModuleScopePlugin.js deleted file mode 100644 index 101a30a..0000000 --- a/webview/react-dev-utils/ModuleScopePlugin.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -'use strict'; - -const chalk = require('chalk'); -const path = require('path'); - -class ModuleScopePlugin { - constructor(appSrc, allowedFiles = []) { - this.appSrc = appSrc; - this.allowedFiles = new Set(allowedFiles); - } - - apply(resolver) { - const { appSrc } = this; - resolver.plugin('file', (request, callback) => { - // Unknown issuer, probably webpack internals - if (!request.context.issuer) { - return callback(); - } - if ( - // If this resolves to a node_module, we don't care what happens next - request.descriptionFileRoot.indexOf('/node_modules/') !== -1 || - request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 || - // Make sure this request was manual - !request.__innerRequest_request - ) { - return callback(); - } - // Resolve the issuer from our appSrc and make sure it's one of our files - // Maybe an indexOf === 0 would be better? - const relative = path.relative(appSrc, request.context.issuer); - // If it's not in src/ or a subdirectory, not our request! - if (relative.startsWith('../') || relative.startsWith('..\\')) { - return callback(); - } - const requestFullPath = path.resolve( - path.dirname(request.context.issuer), - request.__innerRequest_request - ); - if (this.allowedFiles.has(requestFullPath)) { - return callback(); - } - // Find path from src to the requested file - // Error if in a parent directory of src/ - const requestRelative = path.relative(appSrc, requestFullPath); - if ( - requestRelative.startsWith('../') || - requestRelative.startsWith('..\\') - ) { - callback( - new Error( - `You attempted to import ${chalk.cyan( - request.__innerRequest_request - )} which falls outside of the project ${chalk.cyan( - 'src/' - )} directory. ` + - `Relative imports outside of ${chalk.cyan( - 'src/' - )} are not supported. ` + - `You can either move it inside ${chalk.cyan( - 'src/' - )}, or add a symlink to it from project's ${chalk.cyan( - 'node_modules/' - )}.` - ), - request - ); - } else { - callback(); - } - }); - } -} - -module.exports = ModuleScopePlugin; diff --git a/webview/react-dev-utils/README.md b/webview/react-dev-utils/README.md deleted file mode 100644 index 034790c..0000000 --- a/webview/react-dev-utils/README.md +++ /dev/null @@ -1,328 +0,0 @@ -# react-dev-utils - -This package includes some utilities used by [Create React App](https://github.com/facebookincubator/create-react-app).
-Please refer to its documentation: - -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. - -## Usage in Create React App Projects - -These utilities come by default with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** - -## Usage Outside of Create React App - -If you don’t use Create React App, or if you [ejected](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future. - -### Entry Points - -There is no single entry point. You can only import individual top-level modules. - -#### `new InterpolateHtmlPlugin(replacements: {[key:string]: string})` - -This Webpack plugin lets us interpolate custom variables into `index.html`.
-It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-webpack-plugin) 2.x via its [events](https://github.com/ampedandwired/html-webpack-plugin#events). - -```js -var path = require('path'); -var HtmlWebpackPlugin = require('html-dev-plugin'); -var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); - -// Webpack config -var publicUrl = '/my-custom-url'; - -module.exports = { - output: { - // ... - publicPath: publicUrl + '/' - }, - // ... - plugins: [ - // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: - // - new InterpolateHtmlPlugin({ - PUBLIC_URL: publicUrl - // You can pass any key-value pairs, this was just an example. - // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html. - }), - // Generates an `index.html` file with the