Release 1.2.0 (#882)

* feat: init (#878)

* feat: init (#876)

* feat: init (#871)

* feat: update (#883)

* Feat add codemod check to doctor package (#870)

* feat: update

* feat: update usage

* feat: update interface

* feat: update interface

* feat: update interface

* fix: component link (#884)

* fix: component link

* fix: import namespace

* fix: types

* chore: changelog

* Feat doctor extension add codemod (#873)

* feat: doctor

* fix: build error (#885)

* Fix: rax component docs not display (#887)

* fix: rax component docs not display

* fix: import name

Co-authored-by: Hengchang Lu <[email protected]>

extensions/appworks/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 1.2.0
+
+- fix: auto-complete-tag confused typescript coding [#877](https://github.com/appworks-lab/pack/issues/877)
+
 ## 1.1.0
 
 - feat: hint user install types/rax [#854](https://github.com/appworks-lab/pack/pull/854)

extensions/appworks/README.md

@@ -74,7 +74,7 @@ AppWorks Pack extension installs these recommend extensions:
 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Integrates [ESLint](https://eslint.org/) JavaScript into VS Code.
 - [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint): Lint CSS/SCSS/Less with [stylelint](https://stylelint.io/).
 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): An opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
-- [Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag): Combine the functions of Auto Close Tag and Auto Rename Tag.
+- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag): Auto rename paired HTML/XML tag.
 - [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets): Code snippets for JavaScript in ES6 syntax.
 - [Simple React Snippets](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets): The essential collection of React Snippets and commands.
 - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome): Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

extensions/appworks/package.json

@@ -3,7 +3,7 @@
   "displayName": "AppWorks",
   "description": "Application Development Pack, provide visualization and intelligent technology to build Universal Application faster and better, support Web / H5 / MiniProgram(小程序) Application.",
   "publisher": "iceworks-team",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "engines": {
     "vscode": "^1.41.0"
   },
@@ -46,7 +46,7 @@
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "esbenp.prettier-vscode",
-    "formulahendry.auto-complete-tag",
+    "formulahendry.auto-rename-tag",
     "xabikos.JavaScriptSnippets",
     "burkeholland.simple-react-snippets",
     "msjsdiag.debugger-for-chrome",

extensions/doctor/.vscodeignore

@@ -7,5 +7,6 @@ web/**
 **/*.map
 **/*.ts
 
+node_modules/@types/**
 node_modules/terser
 node_modules/ts-loader

extensions/doctor/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 1.1.0
+
+- feat: Add codemod check
+- feat: Add deprecate package tips
+
 ## 1.0.1
 
 - chore: update webview icon

extensions/doctor/README.md

@@ -10,7 +10,7 @@ English | [简体中文](https://github.com/appworks-lab/pack/blob/master/extens
 Doctor is a free security and quality audit tool for modern DevOps teams. With an integrated multi-scanner based design, Doctor can detect various kinds of security flaws in your application and infrastructure code in a single fast [@appworks/doctor](https://www.npmjs.com/package/@appworks/doctor) scanner without the need for any remote server!
 Navigate to the source code and remediate the results by interacting with the scan results.
 
-![demo](https://img.alicdn.com/imgextra/i3/O1CN01RQ3EyU1f5tVx2KIS5_!!6000000003956-1-tps-900-577.gif)
+![demo](https://img.alicdn.com/imgextra/i1/O1CN01WnHYn11qxRbaZYfDB_!!6000000005562-1-tps-1080-647.gif)
 
 1. Open vscode command palette  through `Ctrl+Shift+P` or `⇧⌘P`.
 2. Enter `AppWorks: Doctor` or `AppWorks: Scan Your Project` to activate the extension.

extensions/doctor/package.json

@@ -3,7 +3,7 @@
   "displayName": "Doctor",
   "description": "A free security and quality audit tool for modern DevOps teams",
   "publisher": "iceworks-team",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "engines": {
     "vscode": "^1.41.0"
   },
@@ -25,17 +25,7 @@
   ],
   "icon": "assets/logo.png",
   "activationEvents": [
-    "onCommand:doctor.fix",
-    "onCommand:doctor.scan",
-    "onCommand:doctor.dashboard",
-    "onLanguage:json",
-    "onLanguage:typescript",
-    "onLanguage:javascript",
-    "onLanguage:javascriptreact",
-    "onLanguage:typescriptreact",
-    "onLanguage:css",
-    "onLanguage:less",
-    "onLanguage:scss"
+    "onStartupFinished"
   ],
   "main": "./build/extension.js",
   "repository": {
@@ -68,6 +58,10 @@
       {
         "command": "doctor.fix",
         "title": "%iceworksDoctor.commands.fix.title%"
+      },
+      {
+        "command": "doctor.codemod",
+        "title": "%iceworksDoctor.commands.codemod.title%"
       }
     ],
     "configuration": {
@@ -84,16 +78,19 @@
     }
   },
   "dependencies": {
+    "@babel/preset-env": "^7.1.6",
     "@appworks/common-service": "^0.1.0",
+    "@appworks/connector": "^0.1.0",
     "@appworks/constant": "^0.1.0",
-    "@appworks/doctor": "^0.1.0",
+    "@appworks/doctor": "^0.2.0",
     "@appworks/project-service": "^0.1.0",
     "@appworks/recorder": "^0.1.0",
     "@appworks/storage": "^0.1.0",
-    "@appworks/connector": "^0.1.0",
     "fs-extra": "^9.0.1",
     "git-repo-info": "^2.1.1",
-    "mkdirp": "^1.0.4"
+    "mkdirp": "^1.0.4",
+    "parse-package-name": "^0.1.0",
+    "semver": "^7.3.5"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.158",

extensions/doctor/package.nls.json

@@ -1,5 +1,6 @@
 {
   "iceworksDoctor.commands.doctor.title": "AppWorks: Doctor.",
   "iceworksDoctor.commands.scan.title": "AppWorks: Scan Your Project.",
-  "iceworksDoctor.commands.fix.title": "AppWorks: Scan and Fix Your Project."
+  "iceworksDoctor.commands.fix.title": "AppWorks: Scan and Fix Your Project.",
+  "iceworksDoctor.commands.codemod.title": "AppWorks: Run a Codemod."
 }

extensions/doctor/package.nls.zh-cn.json

@@ -1,5 +1,6 @@
 {
   "iceworksDoctor.commands.doctor.title": "AppWorks: 打开质量检测仪",
   "iceworksDoctor.commands.scan.title": "AppWorks: 扫描代码",
-  "iceworksDoctor.commands.fix.title": "AppWorks: 扫描并修复代码"
+  "iceworksDoctor.commands.fix.title": "AppWorks: 扫描并修复代码",
+  "iceworksDoctor.commands.codemod.title": "AppWorks: 运行 Codemod"
 }

extensions/doctor/scripts/minifyNodeModules.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const path = require('path');
 const glob = require('glob');
 const { minify } = require('terser');
+const { execSync } = require('child_process');
 
 function unlinkSync(file) {
   try {
@@ -12,6 +13,13 @@ function unlinkSync(file) {
   }
 }
 
+// Remove devDependencies
+try {
+  execSync('npm prune --production', { stdio: 'inherit' });
+} catch (e) {
+  // ignore error
+}
+
 // ESLint has its own loader specification and cannot use webpack to build the entire package.
 // Keep the npm package in node_modules so that ESLint can find the corresponding configs and plugins.
 //

extensions/doctor/src/codemod.ts

@@ -0,0 +1,81 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as vscode from 'vscode';
+import * as semver from 'semver';
+import { Doctor } from '@appworks/doctor';
+import { projectPath } from '@appworks/project-service';
+import parse from 'parse-package-name';
+import setOutput from './setOutput';
+import setDeprecatedPackage from './setDeprecatedPackage';
+
+const doctor = new Doctor({ ignore: ['.vscode', '.ice', 'mocks', '.eslintrc.js', 'webpack.config.js'] });
+
+const SCAN_OPTIONS = {
+  disableESLint: true,
+  disableMaintainability: true,
+  disableRepeatability: true,
+};
+
+export async function runCodemod(transform: string) {
+  const result = await doctor.scan(
+    projectPath,
+    Object.assign({ transforms: [transform] }, SCAN_OPTIONS),
+  );
+  setOutput(result.codemod?.reports[0].output || '');
+  return result;
+}
+
+export async function activateCodemod(context: vscode.ExtensionContext) {
+  const { env, window } = vscode;
+  const isEn = env.language === 'en';
+
+  const deprecatedPackageConfig = {};
+
+  const reports = await doctor.scan(projectPath, SCAN_OPTIONS);
+  const packageFile = path.join(projectPath, 'package.json');
+  const packageJSON = fs.existsSync(packageFile) ? JSON.parse(fs.readFileSync(packageFile, 'utf-8')) : {};
+
+  // Show notifaction
+  (reports.codemod?.reports || []).forEach((codemod) => {
+    const action = 'Run a Codemod';
+
+    if (codemod.npm_deprecate) {
+      const { name, version } = parse(codemod.npm_deprecate);
+      const dependence = (packageJSON.dependencies || {})[name] || (packageJSON.devDependencies || {})[name];
+
+      if (dependence && semver.satisfies(semver.coerce(dependence), version || '*')) {
+        deprecatedPackageConfig[name] = {
+          ...codemod,
+          name,
+          version,
+        };
+      }
+    }
+    const message =
+      `${isEn ? codemod.title_en : codemod.title}: ` +
+      `${isEn ? codemod.message_en : codemod.message} ` +
+      `( [${isEn ? 'docs' : '文档'}](${codemod.docs}) )`;
+    const showMessage = codemod.severity === 2 ? window.showErrorMessage : window.showWarningMessage;
+
+    showMessage(message, action).then(async (item) => {
+      // Run codemod
+      if (item === action) {
+        const result = await runCodemod(codemod.transform);
+
+        // Remove fixed deprecated package
+        if (result.codemod?.reports[0].npm_deprecate) {
+          delete deprecatedPackageConfig[result.codemod?.reports[0].npm_deprecate];
+        }
+      }
+    });
+  });
+
+  // Show deprecate package
+  setDeprecatedPackage(deprecatedPackageConfig);
+  vscode.window.onDidChangeActiveTextEditor(() => {
+    setDeprecatedPackage(deprecatedPackageConfig);
+  }, null, context.subscriptions);
+  vscode.workspace.onDidChangeTextDocument(() => {
+    setDeprecatedPackage(deprecatedPackageConfig);
+  }, null, context.subscriptions);
+}

extensions/doctor/src/extension.ts

@@ -4,6 +4,7 @@ import * as path from 'path';
 import { connectService, getHtmlForWebview } from '@appworks/connector/lib/vscode';
 import { ICEWORKS_ICON_PATH } from '@appworks/constant';
 import { registerCommand, initExtension, getDataFromSettingJson } from '@appworks/common-service';
+import { activateCodemod, runCodemod } from './codemod';
 import recorder from './recorder';
 import getScanReport from './getScanReport';
 import setDiagnostics from './setDiagnostics';
@@ -131,6 +132,14 @@ export function activate(context: vscode.ExtensionContext) {
   registerCommand('doctor.fix', () => {
     openWebview({ autoFix: true });
   });
+
+  // Codemod
+  activateCodemod(context);
+  registerCommand('doctor.codemod', (options) => {
+    if (options?.transform) {
+      runCodemod(options.transform);
+    }
+  });
 }
 
 export function deactivate() { }

extensions/doctor/src/setDeprecatedPackage.ts

@@ -0,0 +1,65 @@
+import * as vscode from 'vscode';
+
+interface IConfig {
+  [key: string]: {
+    docs: string;
+    title: string;
+    title_en: string;
+    message: string;
+    message_en: string;
+    name: string;
+    version: string;
+    transform: string;
+  };
+}
+
+let decorationType;
+function getDecorationType(): vscode.TextEditorDecorationType {
+  // Remove last decoration first
+  decorationType && decorationType.dispose();
+  decorationType = vscode.window.createTextEditorDecorationType({
+    textDecoration: 'line-through',
+  });
+  return decorationType;
+}
+
+export default function (deprecatedPackageConfig: IConfig) {
+  const isEn = vscode.env.language === 'en';
+  const editor = vscode.window.activeTextEditor;
+
+  if (!editor || Object.keys(deprecatedPackageConfig).length === 0) return;
+
+  const text = editor.document.getText();
+  const decorationsArray: vscode.DecorationOptions[] = [];
+
+  let matched;
+  const reg = new RegExp(Object.keys(deprecatedPackageConfig).map((key) => `(["|'|\`]${key}["|'|\`])`).join('|'), 'g');
+
+  // eslint-disable-next-line
+  while (matched = reg.exec(text || '')) {
+
+    const config = deprecatedPackageConfig[matched[0].slice(1, -1)];
+    if (config) {
+      const start = editor.document.positionAt(matched.index);
+      const end = editor.document.positionAt(matched.index + matched[0].length);
+
+      const range = new vscode.Range(start, end);
+      const hoverMessage = new vscode.MarkdownString(
+        `# ${isEn ? 'Codemod Suggestion' : 'Codemod 建议'}  \n  ` +
+        `${isEn ? config.title_en : config.title}: ${isEn ? config.message_en : config.message} ` +
+        `( [${isEn ? 'docs' : '文档'}](${config.docs}) )  \n\n  ` +
+        `[Run a Codemod](${vscode.Uri.parse(
+          `command:doctor.codemod?${encodeURIComponent(JSON.stringify([{ transform: config.transform }]))}`,
+        )})`,
+      );
+      hoverMessage.isTrusted = true;
+
+      decorationsArray.push({
+        range,
+        hoverMessage,
+      });
+    }
+  }
+
+  editor.setDecorations(getDecorationType(), decorationsArray);
+}

extensions/doctor/src/setOutput.ts

@@ -0,0 +1,8 @@
+import * as vscode from 'vscode';
+
+const channel = vscode.window.createOutputChannel('Doctor');
+
+export default function (message: string) {
+  channel.appendLine(message);
+  channel.show();
+}

extensions/doctor/web/mocks/data/getScanReport.ts → extensions/doctor/web/mocks/action/getScanReport.ts

@@ -448,5 +448,28 @@ export default {
       },
     ],
   },
+  codemod: {
+    score: 98,
+    reports: [
+      {
+        title: 'Rax 组件工程升级',
+        title_en: 'Rax component project upgrade',
+        message: '从 plugin-rax-component 升级到 plugin-component',
+        message_en: 'upgrade from plugin-rax-component to plugin-component',
+        severity: 1,
+        npm_deprecate: 'build-plugin-rax-component',
+        transform: 'plugin-rax-component-to-component',
+        docs: 'https://github.com/appworks-lab/codemod/tree/master/transforms/docs/plugin-rax-component-to-component.md',
+        mode: 'check',
+        output: 'Processing 20 files... \nSpawning 7 workers...\nRunning in dry mode, no ' +
+          'files will be written! \nSending 3 files to free worker...\nSending 3 ' +
+          'files to free worker...\nSending 3 files to free worker...\nSending 3 ' +
+          'files to free worker...\nSending 3 files to free worker...\nSending 3 ' +
+          'files to free worker...\nSending 2 files to free worker...\nAll done. \n' +
+          'Results: \n0 errors\n18 unmodified\n1 skipped\n1 ok\nTime elapsed: ' +
+          '1.014seconds '
+      }
+    ]
+  },
   score: 88.95,
 };

extensions/doctor/web/mocks/common/executeCommand.json

@@ -0,0 +1,12 @@
+{
+  "title": "Rax 组件工程升级",
+  "title_en": "Rax component project upgrade",
+  "message": "从 plugin-rax-component 升级到 plugin-component",
+  "message_en": "upgrade from plugin-rax-component to plugin-component",
+  "severity": 1,
+  "npm_deprecate": "build-plugin-rax-component",
+  "transform": "plugin-rax-component-to-component",
+  "docs": "https://github.com/appworks-lab/codemod/tree/master/transforms/docs/plugin-rax-component-to-component.md",
+  "mode": "run",
+  "output": "Processing 20 files... \nSpawning 7 workers...\nRunning in dry mode, no files will be written! \nSending 3 files to free worker...\nSending 3 files to free worker...\nSending 3 files to free worker...\nSending 3 files to free worker...\nSending 3 files to free worker...\nSending 3 files to free worker...\nSending 2 files to free worker...\nAll done. \nResults: \n0 errors\n18 unmodified\n1 skipped\n1 ok\nTime elapsed: 1.014seconds "
+}

extensions/doctor/web/src/config.ts

@@ -5,6 +5,11 @@ export interface IReportKeys {
 }
 
 export const reportKeys: IReportKeys[] = [
+  {
+    name: 'Codemod',
+    nameEn: 'Codemod',
+    key: 'codemod',
+  },
   {
     name: 'Ali ESLint',
     nameEn: 'Ali ESLint',