feat: iceworks project viewer style(#177)

* feat: add stop command

* feat: add stop command

* feat: auto install deps

* feat: refresh when file changed

* fix: fix terminal dispose

* fix: treeItem class name

* fix: comment

* feat: add inputboxs

* chore: inputBox text

extensions/iceworks-app/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 0.2.0
+- feat: install dependencies automatically when node_modules  does not exist
+- feat: refresh dependencies list、pages list and components list automatically
+- feat: support stopping scripts
+
 ## 0.1.34
 
 - feat: add Iceworks status bar entry

extensions/iceworks-app/package.json

@@ -3,7 +3,7 @@
   "displayName": "Iceworks Application Viewer",
   "description": "Quick view your Universal Application(React/Rax/Vue, etc).",
   "publisher": "iceworks-team",
-  "version": "0.1.34",
+  "version": "0.2.0",
   "engines": {
     "vscode": "^1.41.0"
   },
@@ -108,6 +108,14 @@
           "dark": "assets/dark/run.svg"
         }
       },
+      {
+        "command": "iceworksApp.npmScripts.stop",
+        "title": "%iceworksApp.npmScripts.stop.title%",
+        "icon": {
+          "light": "assets/light/stop.svg",
+          "dark": "assets/dark/stop.svg"
+        }
+      },
       {
         "command": "iceworksApp.pages.add",
         "title": "%iceworksApp.command.pages.add.title%",
@@ -252,7 +260,12 @@
       ],
       "view/item/context": [
         {
-          "command": "iceworksApp.npmScripts.executeCommand",
+          "command": "iceworksApp.npmScripts.run",
+          "when": "view == npmScripts && viewItem == script",
+          "group": "inline"
+        },
+        {
+          "command": "iceworksApp.npmScripts.stop",
           "when": "view == npmScripts && viewItem == script",
           "group": "inline"
         },

extensions/iceworks-app/src/commands/executeCommand.ts

@@ -0,0 +1,28 @@
+import * as vscode from 'vscode';
+import { Terminal, TerminalOptions } from 'vscode';
+import { ITerminalMap } from '../types';
+
+export default function executeCommand(terminalMapping: ITerminalMap, script: vscode.Command, id?: string) {
+  if (!script.arguments) {
+    return;
+  }
+  const args = script.arguments;
+  const [cwd, command] = args;
+  if (!command) {
+    return;
+  }
+
+  const terminalId = id || command;
+  let terminal: Terminal;
+
+  if (terminalMapping.has(terminalId)) {
+    terminal = terminalMapping.get(terminalId)!;
+  } else {
+    const terminalOptions: TerminalOptions = { cwd, name: command };
+    terminal = vscode.window.createTerminal(terminalOptions);
+    terminalMapping.set(terminalId, terminal);
+  }
+
+  terminal.show();
+  terminal.sendText(command);
+}

extensions/iceworks-app/src/commands/stopCommand.ts

@@ -0,0 +1,9 @@
+import { ITerminalMap } from '../types';
+
+export default function stopCommand(terminalMapping: ITerminalMap, scriptId: string) {
+  const currentTerminal = terminalMapping.get(scriptId);
+  if (currentTerminal) {
+    currentTerminal.dispose();
+    terminalMapping.delete(scriptId);
+  }
+}

extensions/iceworks-app/src/constants.ts

@@ -11,3 +11,5 @@ export const nodeDepTypes: NodeDepTypes[] = [
   'dependencies',
   'devDependencies'
 ];
+
+export const showExtensionsQuickPickCommandId = 'iceworksApp.showExtensionsQuickPick';

extensions/iceworks-app/src/extension.ts

@@ -9,7 +9,9 @@ import { createComponentsTreeProvider } from './views/componentsView';
 import { createPagesTreeProvider } from './views/pagesView';
 import { ITerminalMap } from './types';
 import services from './services';
-import { createStatusBarItem, openCommandPaletteCommandId, registerOpenCommandPalette } from './createStatusBarItem';
+import { showExtensionsQuickPickCommandId } from './constants';
+import showExtensionsQuickPick from './quickPicks/showExtensionsQuickPick';
+import createExtensionsStatusBar from './statusBar/createExtensionsStatusBar';
 
 // eslint-disable-next-line
 const { name, version } = require('../package.json');
@@ -27,9 +29,9 @@ export async function activate(context: vscode.ExtensionContext) {
   initExtension(context);
 
   // init statusBarItem
-  const statusBarItem = createStatusBarItem();
-  subscriptions.push(vscode.commands.registerCommand(openCommandPaletteCommandId, registerOpenCommandPalette));
-  subscriptions.push(statusBarItem);
+  const extensionsStatusBar = createExtensionsStatusBar();
+  subscriptions.push(vscode.commands.registerCommand(showExtensionsQuickPickCommandId, showExtensionsQuickPick));
+  subscriptions.push(extensionsStatusBar);
   // init webview
   function activeWebview() {
     const webviewPanel: vscode.WebviewPanel = window.createWebviewPanel('iceworks', '设置 - Iceworks', ViewColumn.One, {

extensions/iceworks-app/src/inputBoxs/showDepsInputBox.ts

@@ -0,0 +1,14 @@
+import * as vscode from 'vscode';
+import { NodeDepTypes, ITerminalMap } from '../types';
+import executeCommand from '../commands/executeCommand';
+
+export default async function showDepsInputBox(terminals: ITerminalMap, nodeDependenciesInstance: any, depType: NodeDepTypes) {
+  const result = await vscode.window.showInputBox({
+    placeHolder: '例如: lodash react@latest',
+    prompt: `请输入需要添加到 ${depType} 的依赖名称, 支持通过空格添加多个依赖`
+  });
+  if (!result) {
+    return;
+  }
+  executeCommand(terminals, nodeDependenciesInstance.getAddDependencyScript(depType, result));
+}

extensions/iceworks-app/src/openEntryFile.ts

@@ -0,0 +1,14 @@
+import * as path from 'path';
+import * as vscode from 'vscode';
+import * as fsExtra from 'fs-extra';
+import { entryFileSuffix } from './constants';
+
+export default function openEntryFile(p: string) {
+  const currentSuffix = entryFileSuffix.find((suffix) => fsExtra.pathExistsSync(path.join(p, `index${suffix}`)));
+  if (currentSuffix) {
+    const resource = vscode.Uri.file(path.join(p, `index${currentSuffix}`));
+    vscode.window.showTextDocument(resource);
+  } else {
+    vscode.window.showErrorMessage('Entry file not found.');
+  }
+}

extensions/iceworks-app/src/quickPicks/showDepsQuickPick.ts

@@ -0,0 +1,17 @@
+import * as vscode from 'vscode';
+import { nodeDepTypes } from '../constants';
+import { NodeDepTypes, ITerminalMap } from '../types';
+import showDepsInputBox from '../inputBoxs/showDepsInputBox';
+
+export default function showDepsQuickPick(terminals: ITerminalMap, nodeDependenciesInstance: any) {
+  const quickPick = vscode.window.createQuickPick();
+  quickPick.items = nodeDepTypes.map(label => ({ label, detail: `Install ${label}` }));
+  quickPick.onDidChangeSelection(selection => {
+    if (selection[0]) {
+      showDepsInputBox(terminals, nodeDependenciesInstance, selection[0].label as NodeDepTypes)
+        .catch(console.error);
+    }
+  });
+  quickPick.onDidHide(() => quickPick.dispose());
+  quickPick.show();
+};

extensions/iceworks-app/src/createStatusBarItem.ts → extensions/iceworks-app/src/quickPicks/showExtensionsQuickPick.ts

@@ -1,30 +1,21 @@
 import * as vscode from 'vscode';
 
-const { window } = vscode;
+const { window, commands } = vscode;
 
-export const openCommandPaletteCommandId = 'iceworksApp.openVSCodePanel';
-
-export function createStatusBarItem() {
-  const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
-  statusBarItem.text = 'Iceworks';
-  statusBarItem.command = openCommandPaletteCommandId;
-  statusBarItem.show();
-  return statusBarItem;
-}
 const extensionOptions = [
   { label: 'Iceworks 创建应用', detail: '快速创建多端应用（例如：React/Rax/Vue...）', command: 'iceworks-project-creator.start', },
   { label: 'Iceworks 生成页面', detail: '使用低代码的方式生成网页视图', command: 'iceworks-page-builder.create', },
   { label: 'Iceworks 生成组件', detail: '使用低代码的方式生成前端组件', command: 'iceworks-component-builder.generate' },
   { label: 'Iceworks 导入物料', detail: '使用可视化的方式添加物料到应用中', command: 'iceworks-material-import.start' },
 ]
 
-export function registerOpenCommandPalette() {
+export default function showExtensionsQuickPick() {
   const quickPick = window.createQuickPick();
   quickPick.items = extensionOptions.map((options) => ({ label: options.label, detail: options.detail }));
   quickPick.onDidChangeSelection(selection => {
     if (selection[0]) {
       const currentExtension = extensionOptions.find(option => option.label === selection[0].label)!;
-      vscode.commands.executeCommand(currentExtension.command);
+      commands.executeCommand(currentExtension.command);
       quickPick.dispose();
     }
   });

extensions/iceworks-app/src/statusBar/createExtensionsStatusBar.ts

@@ -0,0 +1,10 @@
+import * as vscode from 'vscode';
+import { showExtensionsQuickPickCommandId } from '../constants';
+
+export default function createExtensionsStatusBar() {
+  const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
+  statusBarItem.text = 'Iceworks';
+  statusBarItem.command = showExtensionsQuickPickCommandId;
+  statusBarItem.show();
+  return statusBarItem;
+}