Merge pull request #2468 from alibaba/iceworks/release-3.0.0-beta.6

[iceworks] release-3.0.0-beta.6

CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 3.0.0-beta.6
+
+- [feat] support npm client select #2469
+- [feat] support vue project #2392
+- [feat] improve progress info #2452
+- [feat] dependency check before starting a task #2421
+- [feat] output operation log in iceworks cli #2479
+- [fix] xterm fit current viewport when resize #2477
+
 ## 3.0.0-beta.5
 
 - [fix] Unspecified versions will report errors when adding dependencies

packages/iceworks-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iceworks-client",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.6",
   "description": "",
   "files": [
     "build"
@@ -24,6 +24,7 @@
     "glob": "^7.1.4",
     "history": "^4.9.0",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.uniqby": "^4.7.0",
     "loglevel": "^1.6.1",
     "loglevel-plugin-prefix": "^0.8.4",

packages/iceworks-client/src/components/XtermTerminal/index.js

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
 import Icon from '@components/Icon';
 import termManager from '@utils/termManager';
 import useTermTheme from '@hooks/useTermTheme';
@@ -19,6 +20,14 @@ const XtermTerminal = ({ id, name, options }) => {
         currentTerm.writeChunk(`${name}\x1B[0m `);
       }
     }
+
+    const handleResize = debounce(() => { currentTerm.fit(); }, 500);
+    // listen reszie
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
   }, []);
 
   const { termTheme } = useTermTheme();
@@ -35,7 +44,7 @@ const XtermTerminal = ({ id, name, options }) => {
         className={styles.clearIcon}
         onClick={() => term.clear(id)}
       />
-      <div ref={xtermRef} />
+      <div ref={xtermRef} className={styles.xtermRef} />
     </div>
   );
 };

packages/iceworks-client/src/components/XtermTerminal/index.module.scss

@@ -14,3 +14,7 @@
     cursor: pointer;
   }
 }
+
+.xtermRef {
+  height: 100%;
+}

packages/iceworks-client/src/hooks/useDependency.js

@@ -8,7 +8,7 @@ import stores from '@stores';
 
 export const STATUS_RESETING = 'reseting';
 
-function useDependency(diableUseSocket) {
+function useDependency(diableUseSocket, writeChunk, showGlobalTerminal = true) {
   const {
     on: onCreateModal,
     setModal: setCreateModal,
@@ -68,11 +68,17 @@ function useDependency(diableUseSocket) {
     await dependenciesStore.reset();
 
     setResetModal(false);
-    globalTerminalStore.show();
+
+    if (showGlobalTerminal) {
+      globalTerminalStore.show();
+    }
   }
 
   if (!diableUseSocket) {
     useSocket('adapter.dependency.reset.data', writeGlobalLog);
+    if (writeChunk) {
+      useSocket('adapter.dependency.reset.data', data => writeChunk(data));
+    }
 
     useSocket('adapter.dependency.reset.exit', (code) => {
       if (code === 0) {

packages/iceworks-client/src/hooks/useTask.js

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import useSocket from '@hooks/useSocket';
+import useDependency from '@hooks/useDependency';
 import showMessage from '@utils/showMessage';
 import stores from '@stores';
 
@@ -9,12 +10,20 @@ const useTask = ({ type, writeLog, writeChunk }) => {
   const status = (dataSource[type] && dataSource[type].status) || 'stop';
   const startEventName = `adapter.task.start.data.${type}`;
   const stopEventName = `adapter.task.stop.data.${type}`;
+  const {
+    reset: installDependency,
+    onResetModal: installDependencyVisible,
+    setResetModal: setInstallDependencyVisible,
+  } = useDependency(false, writeChunk, false);
   const taskErrorEventName = `adapter.task.error`;
 
   async function onStart() {
     try {
       writeLog(type);
       await taskStore.start(type);
+      if (!taskStore.dataSource.installed) {
+        setInstallDependencyVisible(true);
+      }
     } catch (error) {
       showMessage(error.message);
     }
@@ -37,10 +46,19 @@ const useTask = ({ type, writeLog, writeChunk }) => {
     }
   }
 
+  async function onInstallDependencyOk() {
+    await installDependency();
+    setInstallDependencyVisible(false);
+  }
+
+  function onInstallDependencyCancel() {
+    setInstallDependencyVisible(false);
+  }
+
   function taskEventListener(data) {
     setStatus(type, data.status);
     if (writeChunk) {
-      writeChunk(data.chunk);
+      writeChunk(data.chunk, data.isStdout);
     }
   }
 
@@ -61,6 +79,9 @@ const useTask = ({ type, writeLog, writeChunk }) => {
     isWorking: status === 'working',
     onStart,
     onStop,
+    installDependencyVisible,
+    onInstallDependencyCancel,
+    onInstallDependencyOk,
   };
 };
 

packages/iceworks-client/src/locales/en-US/index.js

@@ -43,12 +43,13 @@ export default {
   'iceworks.setting.general.theme.dark': 'Dark',
   'iceworks.setting.general.theme.light': 'Light',
   'iceworks.setting.general.editor.title': 'Editor',
+  'iceworks.setting.general.npm.client.title': 'NPM Client',
   'iceworks.setting.title': 'Setting',
 
   // project
   'iceworks.project.title': 'Project',
-  'iceworks.project.create.init.title': 'Initialization Project',
-  'iceworks.project.create.init.content': 'The dependencies of the current project have not been installed yet. The installation process may take several minutes. Do you want to install it immediately?',
+  'iceworks.project.install.dependencies.title': 'Installing dependencies',
+  'iceworks.project.install.dependencies.content': 'The dependencies of the current project have not been installed yet. The installation process may take several minutes. Do you want to install it immediately?',
   'iceworks.project.submenu.opts.openProject': 'Open',
   'iceworks.project.submenu.opts.createProject': 'Create',
 
@@ -260,7 +261,7 @@ export default {
   'iceworks.material.sourceUrl': 'Source URL',
   'iceworks.material.noData': 'No Data',
   'iceworks.material.customMaterial': 'Custom Material',
-  'iceworks.material.officialMaterial': 'Official Material',
+  'iceworks.material.officialMaterial': 'Official recommended material',
   'iceworks.material.name': 'Material name',
   'iceworks.material.delete': 'Delete material',
   'iceworks.material.deleteConfirm': 'Are you sure delete material?',

packages/iceworks-client/src/locales/zh-CN/index.js

@@ -44,11 +44,12 @@ export default {
   'iceworks.setting.general.theme.dark': '深色',
   'iceworks.setting.general.theme.light': '浅色',
   'iceworks.setting.general.editor.title': '编辑器',
+  'iceworks.setting.general.npm.client.title': '包管理工具',
 
   // project
   'iceworks.project.title': '项目管理',
-  'iceworks.project.create.init.title': '初始化项目',
-  'iceworks.project.create.init.content': '当前项目依赖尚未安装，安装过程可能需要几分钟，是否立即安装？',
+  'iceworks.project.install.dependencies.title': '安装依赖',
+  'iceworks.project.install.dependencies.content': '当前项目依赖尚未安装，安装过程可能需要几分钟，是否立即安装？',
   'iceworks.project.submenu.opts.openProject': '打开项目',
   'iceworks.project.submenu.opts.createProject': '创建项目',
 
@@ -260,7 +261,7 @@ export default {
   'iceworks.material.sourceUrl': '物料源地址',
   'iceworks.material.noData': '暂无数据',
   'iceworks.material.customMaterial': '自定义物料',
-  'iceworks.material.officialMaterial': '官方物料',
+  'iceworks.material.officialMaterial': '官方推荐物料',
   'iceworks.material.name': '物料名称',
   'iceworks.material.delete': '删除物料',
   'iceworks.material.deleteConfirm': '删除后不可恢复，确定删除物料？',

packages/iceworks-client/src/pages/Engineering/components/Task/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import showMessage from '@utils/showMessage';
 import useModal from '@hooks/useModal';
 import useTask from '@hooks/useTask';
@@ -9,6 +9,7 @@ import Card from '@components/Card';
 import TaskBar from '@components/TaskBar';
 import XtermTerminal from '@components/XtermTerminal';
 import { withErrorBoundary } from '@components/ErrorBoundary';
+import Modal from '@components/Modal';
 import termManager from '@utils/termManager';
 import logger from '@utils/logger';
 import stores from '@stores';
@@ -33,14 +34,16 @@ const Task = ({ history, intl }) => {
   const { termTheme } = useTermTheme();
 
   function writeLog(taskType) {
-    const msg = intl.formatMessage({ id: `iceworks.task.${taskType}.start.msg` });
+    const msg = intl.formatMessage({
+      id: `iceworks.task.${taskType}.start.msg`,
+    });
     const term = termManager.find('globalTerminal');
     term.writeLog(msg);
   }
 
-  function writeChunk(data) {
+  function writeChunk(data, isStdout) {
     const term = termManager.find(id);
-    term.writeChunk(data);
+    term.writeChunk(data, isStdout);
   }
 
   async function onGetConf() {
@@ -87,7 +90,14 @@ const Task = ({ history, intl }) => {
     onGetConf();
   }, []);
 
-  const { isWorking, onStart, onStop } = useTask({ type, writeLog, writeChunk });
+  const {
+    isWorking,
+    onStart,
+    onStop,
+    installDependencyVisible,
+    onInstallDependencyCancel,
+    onInstallDependencyOk,
+  } = useTask({ type, writeLog, writeChunk });
 
   return (
     <Card
@@ -108,7 +118,13 @@ const Task = ({ history, intl }) => {
         <XtermTerminal
           id={id}
           name={projectStore.dataSource.name}
-          options={{ theme: termTheme }}
+          options={{
+            theme: termTheme,
+            scrollback: 5000,
+            disableStdin: true,
+            useFlowControl: true,
+          }}
+          autoSize
         />
       </div>
 
@@ -118,6 +134,15 @@ const Task = ({ history, intl }) => {
         toggleModal={toggleModal}
         onConfirm={onConfirm}
       />
+
+      <Modal
+        title={<FormattedMessage id="iceworks.project.install.dependencies.title" />}
+        visible={installDependencyVisible}
+        onCancel={onInstallDependencyCancel}
+        onOk={onInstallDependencyOk}
+      >
+        <FormattedMessage id="iceworks.project.install.dependencies.content" />
+      </Modal>
     </Card>
   );
 };

packages/iceworks-client/src/pages/Engineering/components/Task/index.module.scss

@@ -4,14 +4,16 @@
 
   .content {
     margin: 20px 0;
-    flex: auto 1 1;
+    flex: 1 1 auto;
+    min-height: 0;
   }
 }
 
 // TODO: should use :local，but ice-scripts not support
 :global {
   .next-card-body {
-    flex: 1;
+    flex: 1 1 auto;
+    min-height: 0;
   }
   .next-card-content {
     display: flex;

packages/iceworks-client/src/pages/Engineering/index.module.scss

@@ -5,6 +5,7 @@
   .main {
     flex: 1;
     margin: 20px;
+    min-width: 0;
   }
 }
 

packages/iceworks-client/src/pages/Project/components/PagePanel/BuildPageModal.js

@@ -205,10 +205,19 @@ const BuildPageModal = ({
   } = useModal();
   const [selectedBlocks, setSelectedBlocks] = useState([]);
   const [isSorting, setIsSorting] = useState(false);
+  const [materialSources, setMaterialSources] = useState([]);
   const [progress, material, project] = stores.useStores(['progress', 'material', 'project']);
+  useEffect(() => {
+    material.getResources({ type: project.dataSource.type });
+  }, []);
   const { dataSource } = material;
   const { resource } = dataSource;
-  const materialSources = resource.official.concat(resource.custom);
+  const newMaterialSources = resource.official
+    .concat(resource.custom)
+    .filter(item => item.type === project.dataSource.type);
+  if (newMaterialSources.length !== materialSources.length) {
+    setMaterialSources(newMaterialSources);
+  }
 
   function onCloseSaveModal() {
     setSaveModal(false);

packages/iceworks-client/src/pages/Project/components/QuickBuildPanel/index.js

@@ -11,17 +11,15 @@ const QuickDevPanel = ({ intl, title, description }) => {
     writeGlobalLog(msg);
   }
 
-  const { isWorking, onStart, onStop } = useTask({ type: 'build', writeLog });
+  const task = useTask({ type: 'build', writeLog });
 
   return (
     <TaskItem
       title={title}
       desc={description}
       icon="builder"
       path="/task/build"
-      isWorking={isWorking}
-      onStart={onStart}
-      onStop={onStop}
+      {...task}
     />
   );
 };

packages/iceworks-client/src/pages/Project/components/QuickDevPanel/index.js

@@ -11,17 +11,15 @@ const QuickDevPanel = ({ intl, title, description }) => {
     writeGlobalLog(msg);
   }
 
-  const { isWorking, onStart, onStop } = useTask({ type: 'dev', writeLog });
+  const task = useTask({ type: 'dev', writeLog });
 
   return (
     <TaskItem
       title={title}
       desc={description}
       icon="dev"
       path="/task/dev"
-      isWorking={isWorking}
-      onStart={onStart}
-      onStop={onStop}
+      {...task}
     />
   );
 };