added vscode extensions

This commit is contained in:
tomit4 2021-11-05 11:26:45 -07:00
parent 7cde0829be
commit 26e2a50441
316 changed files with 37301 additions and 0 deletions

View file

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="utf-8"?>
<PackageManifest Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vsx-schema/2011" xmlns:d="http://schemas.microsoft.com/developer/vsx-schema-design/2011">
<Metadata>
<Identity Language="en-US" Id="vscode-import-cost" Version="2.15.0" Publisher="wix"/>
<DisplayName>Import Cost</DisplayName>
<Description xml:space="preserve">Display import/require package size in the editor</Description>
<Tags>import,require,size,weight,webpack,javascript,javascriptreact,typescript,typescriptreact,vue,svelte</Tags>
<Categories>Other</Categories>
<GalleryFlags>Public</GalleryFlags>
<Badges></Badges>
<Properties>
<Property Id="Microsoft.VisualStudio.Code.Engine" Value="^1.52.0" />
<Property Id="Microsoft.VisualStudio.Code.ExtensionDependencies" Value="" />
<Property Id="Microsoft.VisualStudio.Code.ExtensionPack" Value="" />
<Property Id="Microsoft.VisualStudio.Code.ExtensionKind" Value="workspace" />
<Property Id="Microsoft.VisualStudio.Code.LocalizedLanguages" Value="" />
<Property Id="Microsoft.VisualStudio.Services.Links.Source" Value="https://github.com/wix/import-cost.git" />
<Property Id="Microsoft.VisualStudio.Services.Links.Getstarted" Value="https://github.com/wix/import-cost.git" />
<Property Id="Microsoft.VisualStudio.Services.Links.GitHub" Value="https://github.com/wix/import-cost.git" />
<Property Id="Microsoft.VisualStudio.Services.Links.Learn" Value="https://github.com/wix/import-cost/blob/master/packages/vscode-import-cost/README.md" />
<Property Id="Microsoft.VisualStudio.Services.Branding.Color" Value="#1C78C0" />
<Property Id="Microsoft.VisualStudio.Services.Branding.Theme" Value="dark" />
<Property Id="Microsoft.VisualStudio.Services.GitHubFlavoredMarkdown" Value="true" />
</Properties>
<Icon>extension/images/import-cost-logo.png</Icon>
</Metadata>
<Installation>
<InstallationTarget Id="Microsoft.VisualStudio.Code"/>
</Installation>
<Dependencies/>
<Assets>
<Asset Type="Microsoft.VisualStudio.Code.Manifest" Path="extension/package.json" Addressable="true" />
<Asset Type="Microsoft.VisualStudio.Services.Content.Details" Path="extension/README.md" Addressable="true" /><Asset Type="Microsoft.VisualStudio.Services.Content.Changelog" Path="extension/CHANGELOG.md" Addressable="true" /><Asset Type="Microsoft.VisualStudio.Services.Icons.Default" Path="extension/images/import-cost-logo.png" Addressable="true" />
</Assets>
</PackageManifest>

View file

@ -0,0 +1,155 @@
# Changes
## 2.12.0
- Add support for dynamic imports
## 2.11.1
- Fix configuration description
## 2.11.0
- Ability to toggle the extension
- Support monorepo structure
## 2.10.0
- Use Babel to parse Typescript. Drop TS Parser
- Handle bundle size calculation timeout gracefully
## 2.9.0
- Handle decorators
## 2.8.0
- Update to Babel 7
- Upgrade to Yoshi 3 toolkit
- Add support for `import module = require("module")`
## 2.7.0
- Upgrade to Webpack 4 for better runtime performance
- More specific activation events for better load performance
- Limit number of workers to not use up all the system's resources
- Limit workers retry amount to fail and stop running in faulty situations
- Handle legacy Typescript imports
## 2.5.1
Fix issue with imports that don't have semicolons in typescript
## 2.5.0
Add a configuration to control the presentation of the "calculating" decoration
## 2.4.0
Add lodash to externals list
## 2.3.0
Support languageId detection + react components now consider react & react-dom as externals
## 2.2.1
Allow config changes without restarting vscode
## 2.2.0
Added configuration param to control which bundle size (minfied/gzipped/both) to display in the decoration
## 2.1.0
Added gzip size to decorations
## 2.0.0
- Split the project into two packages:
- `vscode-import-cost`: VSCode specific extension
- `import-cost`: The logic of the extension
The split was done in order to ease the consumption of the logic from IDEs other than VSCode.
- Various bug fixes
## 1.3.1
Fix breakage on backticks
## 1.3.0
Add a way to configure the file extensions that will be parsed
## 1.2.1
Bug fix for a small webpack issue with node
## 1.2.0
Add the ability to configure different colored decocrations for different sized packages.
## 1.1.7
Bug fix for scoped packages (i.e. @angular/router)
## 1.1.6
reworked import reconstruction a bit in order to support `import React, {Component} from 'react';`
## 1.1.5
Bug fix for Typescript on Windows
## 1.1.4
Bug fix for disappearing decorators on incorrect syntax
## 1.1.3
Bug fixes and prettifying output
## 1.1.2
Fix typo
## 1.1.1
Fix cache location
## 1.1.0
Add back cross-session cache with support for library version
## 1.0.15
Update readme
## 1.0.13
- Calculate cost as-you-type
- Support multiple windows
- Remove the .importcost folder
- Add support for monorepo
- Calculations are done in parallel
- Temporarily remove cross-session cache
- Bug fixes
## 1.0.12
Fix cache bug
## 1.0.11
Switch from uglifyjs-webpack-plugin to babili-webpack-plugin
## 1.0.10
Display calculation results as they arrive
## 1.0.9
Update font theme
## 1.0.8
Add cross session cache
## 1.0.6
Initial release

View file

@ -0,0 +1,67 @@
# Import Cost VSCode Extension [![Build Status](https://travis-ci.org/wix/import-cost.svg?branch=master)](https://travis-ci.org/wix/import-cost) [![Build status](https://ci.appveyor.com/api/projects/status/ko48qav9qqb8fv8u?svg=true)](https://ci.appveyor.com/project/shahata/import-cost)
[![](https://vsmarketplacebadge.apphb.com/version/wix.vscode-import-cost.svg)](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) [![](https://vsmarketplacebadge.apphb.com/installs/wix.vscode-import-cost.svg)](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
This extension will display inline in the editor the size of the imported package.
The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
![Example Image](https://file-wkbcnlcvbn.now.sh/import-cost.gif)
## Features
Calculates the size of imports and requires.
Currently supports:
- Default importing: `import Func from 'utils';`
- Entire content importing: `import * as Utils from 'utils';`
- Selective importing: `import {Func} from 'utils';`
- Selective importing with alias: `import {orig as alias} from 'utils';`
- Submodule importing: `import Func from 'utils/Func';`
- Require: `const Func = require('utils').Func;`
- Supports both `Javascript` and `Typescript`
## Why & How
I detail the Why and How in this blog post:
https://medium.com/@yairhaimo/keep-your-bundle-size-under-control-with-import-cost-vscode-extension-5d476b3c5a76
## Configuration
The following properties are configurable:
```javascript
// Upper size limit, in KB, that will count a package as a small package
"importCost.smallPackageSize": 50,
// Upper size limit, in KB, that will count a package as a medium package
"importCost.mediumPackageSize": 100,
// Decoration color for small packages
"importCost.smallPackageColor": "#7cc36e",
// Decoration color for medium packages
"importCost.mediumPackageColor": "#7cc36e",
// Decoration color for large packages
"importCost.largePackageColor": "#d44e40",
// File extensions to be parsed by the Typescript parser
"importCost.typescriptExtensions": [
"\\.tsx?$"
],
// File extensions to be parsed by the Javascript parser
"importCost.javascriptExtensions": [
"\\.jsx?$"
],
// Which bundle size to display
"importCost.bundleSizeDecoration": "both",
// Display the 'calculating' decoration
"importCost.showCalculatingDecoration": true,
// Print debug messages in output channel
"importCost.debug": false
```
Any package size above the mediumPackageSize limit will be considered large.
## Known Issues
- Importing two libraries with a common dependency will show the size of both libraries isolated from each other, even if the common library needs to be imported only once.

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

View file

@ -0,0 +1,88 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.clearDecorations = exports.calculated = exports.flushDecorations = void 0;
const vscode_1 = require("vscode");
const fileSize = require("filesize");
const logger_1 = require("./logger");
const decorations = {};
function flushDecorations(fileName, packages) {
logger_1.default.log(`Flushing decorations ${JSON.stringify(packages, null, 2)}`);
decorations[fileName] = {};
packages.forEach(packageInfo => {
if (packageInfo.size === undefined) {
const configuration = vscode_1.workspace.getConfiguration('importCost');
if (configuration.showCalculatingDecoration) {
decorate('Calculating...', packageInfo);
}
}
else {
calculated(packageInfo);
}
});
refreshDecorations(fileName);
}
exports.flushDecorations = flushDecorations;
function calculated(packageInfo) {
const decorationMessage = getDecorationMessage(packageInfo);
decorate(decorationMessage, packageInfo, getDecorationColor(packageInfo.size));
}
exports.calculated = calculated;
function getDecorationMessage(packageInfo) {
if (packageInfo.size <= 0) {
return '';
}
let decorationMessage;
const configuration = vscode_1.workspace.getConfiguration('importCost');
const size = fileSize(packageInfo.size, { unix: true });
const gzip = fileSize(packageInfo.gzip, { unix: true });
if (configuration.bundleSizeDecoration === 'both') {
decorationMessage = `${size} (gzipped: ${gzip})`;
}
else if (configuration.bundleSizeDecoration === 'minified') {
decorationMessage = size;
}
else if (configuration.bundleSizeDecoration === 'gzipped') {
decorationMessage = gzip;
}
return decorationMessage;
}
function getDecorationColor(size) {
const configuration = vscode_1.workspace.getConfiguration('importCost');
const sizeInKB = size / 1024;
if (sizeInKB < configuration.smallPackageSize) {
return configuration.smallPackageColor;
}
else if (sizeInKB < configuration.mediumPackageSize) {
return configuration.mediumPackageColor;
}
else {
return configuration.largePackageColor;
}
}
function decorate(text, packageInfo, color = getDecorationColor(0)) {
const { fileName, line } = packageInfo;
logger_1.default.log(`Setting Decoration: ${text}, ${JSON.stringify(packageInfo, null, 2)}`);
decorations[fileName][line] = {
renderOptions: { after: { contentText: text, color } },
range: new vscode_1.Range(new vscode_1.Position(line - 1, 1024), new vscode_1.Position(line - 1, 1024))
};
refreshDecorations(fileName);
}
const decorationType = vscode_1.window.createTextEditorDecorationType({ after: { margin: '0 0 0 1rem' } });
let decorationsDebounce;
function refreshDecorations(fileName, delay = 10) {
clearTimeout(decorationsDebounce);
decorationsDebounce = setTimeout(() => getEditors(fileName).forEach(editor => {
editor.setDecorations(decorationType, Object.keys(decorations[fileName]).map(x => decorations[fileName][x]));
}), delay);
}
function getEditors(fileName) {
return vscode_1.window.visibleTextEditors.filter(editor => editor.document.fileName === fileName);
}
function clearDecorations() {
vscode_1.window.visibleTextEditors.forEach(textEditor => {
return textEditor.setDecorations(decorationType, []);
});
}
exports.clearDecorations = clearDecorations;
//# sourceMappingURL=decorator.js.map

View file

@ -0,0 +1,89 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.deactivate = exports.activate = void 0;
const import_cost_1 = require("import-cost");
const vscode_1 = require("vscode");
const decorator_1 = require("./decorator");
const logger_1 = require("./logger");
let isActive = true;
function activate(context) {
try {
logger_1.default.init(context);
logger_1.default.log('starting...');
vscode_1.workspace.onDidChangeTextDocument(ev => isActive && processActiveFile(ev.document));
vscode_1.window.onDidChangeActiveTextEditor(ev => ev && isActive && processActiveFile(ev.document));
if (vscode_1.window.activeTextEditor && isActive) {
processActiveFile(vscode_1.window.activeTextEditor.document);
}
context.subscriptions.push(vscode_1.commands.registerCommand('importCost.toggle', () => {
isActive = !isActive;
if (isActive && vscode_1.window.activeTextEditor) {
processActiveFile(vscode_1.window.activeTextEditor.document);
}
else {
deactivate();
decorator_1.clearDecorations();
}
}));
}
catch (e) {
logger_1.default.log('wrapping error: ' + e);
}
}
exports.activate = activate;
function deactivate() {
import_cost_1.cleanup();
}
exports.deactivate = deactivate;
let emitters = {};
function processActiveFile(document) {
return __awaiter(this, void 0, void 0, function* () {
if (document && language(document)) {
const { fileName } = document;
if (emitters[fileName]) {
emitters[fileName].removeAllListeners();
}
const { timeout } = vscode_1.workspace.getConfiguration('importCost');
emitters[fileName] = import_cost_1.importCost(fileName, document.getText(), language(document), { concurrent: true, maxCallTime: timeout });
emitters[fileName].on('error', e => logger_1.default.log(`importCost error: ${e}`));
emitters[fileName].on('start', packages => decorator_1.flushDecorations(fileName, packages));
emitters[fileName].on('calculated', packageInfo => decorator_1.calculated(packageInfo));
emitters[fileName].on('done', packages => decorator_1.flushDecorations(fileName, packages));
}
});
}
function language({ fileName, languageId }) {
if (languageId === 'Log') {
return;
}
const configuration = vscode_1.workspace.getConfiguration('importCost');
const typescriptRegex = new RegExp(configuration.typescriptExtensions.join('|'));
const javascriptRegex = new RegExp(configuration.javascriptExtensions.join('|'));
const vueRegex = new RegExp(configuration.vueExtensions.join('|'));
const svelteRegex = new RegExp(configuration.svelteExtensions.join('|'));
if (languageId === 'svelte' || svelteRegex.test(fileName)) {
return import_cost_1.SVELTE;
}
else if (languageId === 'vue' || vueRegex.test(fileName)) {
return import_cost_1.VUE;
}
else if (languageId === 'typescript' || languageId === 'typescriptreact' || typescriptRegex.test(fileName)) {
return import_cost_1.TYPESCRIPT;
}
else if (languageId === 'javascript' || languageId === 'javascriptreact' || javascriptRegex.test(fileName)) {
return import_cost_1.JAVASCRIPT;
}
else {
return undefined;
}
}
//# sourceMappingURL=extension.js.map

View file

@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vscode_1 = require("vscode");
class Logger {
constructor() {
this.debug = !!vscode_1.workspace.getConfiguration('importCost').debug;
}
init(context) {
this.context = context;
if (this.debug) {
this.channel = vscode_1.window.createOutputChannel('ImportCost');
context.subscriptions.push(this.channel);
}
}
log(text) {
if (this.debug) {
this.channel.appendLine(text);
}
}
}
exports.default = new Logger();
//# sourceMappingURL=logger.js.map

View file

@ -0,0 +1,164 @@
{
"name": "vscode-import-cost",
"displayName": "Import Cost",
"description": "Display import/require package size in the editor",
"license": "MIT",
"version": "2.15.0",
"publisher": "wix",
"engines": {
"vscode": "^1.52.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onLanguage:javascript",
"onLanguage:javascriptreact",
"onLanguage:typescript",
"onLanguage:typescriptreact",
"onLanguage:vue",
"onLanguage:svelte"
],
"keywords": [
"import",
"require",
"size",
"weight",
"webpack"
],
"main": "./out/extension.js",
"contributes": {
"configuration": {
"type": "object",
"title": "Import Cost configuration",
"properties": {
"importCost.smallPackageSize": {
"type": "number",
"default": 50,
"description": "Upper size limit, in KB, that will count a package as a small package"
},
"importCost.mediumPackageSize": {
"type": "number",
"default": 100,
"description": "Upper size limit, in KB, that will count a package as a medium package"
},
"importCost.smallPackageColor": {
"type": "string",
"default": "#7cc36e",
"description": "Decoration color for small packages"
},
"importCost.mediumPackageColor": {
"type": "string",
"default": "#7cc36e",
"description": "Decoration color for medium packages"
},
"importCost.largePackageColor": {
"type": "string",
"default": "#d44e40",
"description": "Decoration color for large packages"
},
"importCost.typescriptExtensions": {
"type": "array",
"default": [
"\\.tsx?$"
],
"description": "File extensions to be parsed by the Typescript parser"
},
"importCost.javascriptExtensions": {
"type": "array",
"default": [
"\\.jsx?$"
],
"description": "File extensions to be parsed by the Javascript parser"
},
"importCost.vueExtensions": {
"type": "array",
"default": [
"\\.vue$"
],
"description": "File extensions to be parsed by the Vue parser"
},
"importCost.svelteExtensions": {
"type": "array",
"default": [
"\\.svelte$"
],
"description": "File extensions to be parsed by the Svelte parser"
},
"importCost.bundleSizeDecoration": {
"type": "string",
"default": "both",
"enum": [
"both",
"minified",
"gzipped"
],
"description": "Which bundle size to display"
},
"importCost.showCalculatingDecoration": {
"type": "boolean",
"default": true,
"description": "Display the 'calculating' decoration when starting to calculate the size"
},
"importCost.debug": {
"type": "boolean",
"default": false,
"description": "Enable debug logging"
},
"importCost.timeout": {
"type": "number",
"default": 10000,
"description": "Size calculation timeout in milliseconds (requires restart)"
}
}
},
"commands": [
{
"command": "importCost.toggle",
"title": "Toggle import cost"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"lint": "eslint src --ext ts",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"test": ":"
},
"devDependencies": {
"@types/vscode": "^1.52.0",
"@types/glob": "^7.1.3",
"@types/mocha": "^8.0.0",
"@types/node": "^14.0.27",
"eslint": "^7.6.0",
"@typescript-eslint/eslint-plugin": "^3.8.0",
"@typescript-eslint/parser": "^3.8.0",
"glob": "^7.1.6",
"mocha": "^8.1.3",
"vscode-test": "^1.4.0",
"husky": "^0.14.3",
"typescript": "^4.1.3"
},
"dependencies": {
"filesize": "^3.5.10",
"import-cost": "^2.2.0"
},
"icon": "images/import-cost-logo.png",
"galleryBanner": {
"color": "#1C78C0",
"theme": "dark"
},
"homepage": "https://github.com/wix/import-cost/blob/master/packages/vscode-import-cost/README.md",
"repository": {
"type": "git",
"url": "https://github.com/wix/import-cost.git"
},
"__metadata": {
"id": "c46b0018-f317-4b6c-a785-d2039b27338f",
"publisherId": "7a344d8a-64ec-42a7-9255-9eacf94e746a",
"publisherDisplayName": "Wix",
"installedTimestamp": 1627357567439
}
}

View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.wixpress.infra</groupId>
<artifactId>vscode-import-cost</artifactId>
<packaging>pom</packaging>
<name>vscode-import-cost</name>
<description>vscode-import-cost</description>
<version>1.0.0-SNAPSHOT</version>
<organization>
<name></name>
</organization>
<parent>
<groupId>com.wixpress.common</groupId>
<artifactId>wix-master-parent</artifactId>
<version>100.0.0-SNAPSHOT</version>
</parent>
<developers>
<developer>
<name>Shahar Talmi</name>
<email>shahart@wix.com</email>
<roles>
<role>owner</role>
</roles>
</developer>
</developers>
</project>