fix(installer): fix installer log can't auto scroll than 4170 line (#831

)

Co-authored-by: Johnny Wu <johnnywu@JOHNNYMBP.local>

web/installer/.babelrc

@@ -1,39 +1,36 @@
 {
-  "presets": ["react"],
-  "plugins": ["transform-es3-member-expression-literals", "transform-es3-property-literals"],
+  "presets": [
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-member-expression-literals",
+    "@babel/plugin-transform-property-literals"
+  ],
   "env": {
     "development": {
       "presets": [
         [
-          "env",
+          "@babel/preset-env",
           {
             "loose": true,
             "modules": "commonjs",
             "exclude": [
               "babel-plugin-transform-async-to-generator",
-              "babel-plugin-transform-regenerator",
-              "babel-plugin-transform-es2015-spread"
+              "babel-plugin-transform-regenerator"
             ]
           }
         ]
       ],
       "plugins": [
         [
-          "react-transform",
-          {
-            "transforms": [
-              {
-                "transform": "react-transform-hmr",
-                "imports": ["react"],
-                "locals": ["module"]
-              }
-            ]
-          }
+          "react-hot-loader/babel"
         ]
       ]
     },
     "production": {
-      "presets": ["es2015"]
+      "presets": [
+        "@babel/preset-env"
+      ]
     }
   }
 }

web/installer/.storybook/main.js

@@ -0,0 +1,30 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['./stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    Object.assign(config.resolve.alias, {
+      '@tea/app': path.resolve(__dirname, '../node_modules/@tencent/tea-app'),
+      '@tea/app/*': path.resolve(__dirname, '../node_modules/@tencent/tea-app/lib/*'),
+      '@tea/component': path.resolve(__dirname, '../node_modules/@tencent/tea-component/lib'),
+      '@tea/component/*': path.resolve(__dirname, '../node_modules/@tencent/tea-component/lib/*'),
+      '@tencent/ff-validator': path.resolve(__dirname, '../lib/ff-validator'),
+      '@tencent/ff-validator/*': path.resolve(__dirname, '../lib/ff-validator/*'),
+      '@tencent/ff-redux': path.resolve(__dirname, '../lib/ff-redux'),
+      '@tencent/ff-redux/*': path.resolve(__dirname, '../lib/ff-redux/*'),
+      '@tencent/ff-component': path.resolve(__dirname, '../lib/ff-component'),
+      '@tencent/ff-component/*': path.resolve(__dirname, '../lib/ff-component/*')
+    });
+
+    // Return the altered config
+    return config;
+  }
+};

web/installer/.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

web/installer/.storybook/stories/CodeMirrorEditor.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import {
+  CodeMirrorEditor,
+  CodeMirrorEditorProps
+} from '../../src/modules/common/components/codemirror/CodeMirrorEditor';
+
+export default {
+  title: 'Example/CodeMirrorEditor',
+  component: CodeMirrorEditor,
+  argTypes: {
+    backgroundColor: { control: 'color' }
+  }
+} as Meta;
+
+const Template: Story<CodeMirrorEditorProps> = args => <CodeMirrorEditor {...args} />;
+
+export const Default = Template.bind({});

web/installer/README.md

@@ -0,0 +1,8 @@
+# installer部分开发说明
+## 起手
+1. `whistle`添加代理规则`/\/static\/js\/installer\.js$/	http://localhost:8088/js/app.js`
+2. `npm run common_pre`: 准备依赖
+3. `npm run dev`: dev开发模式，前端经过`whistle`代理进行开发调试
+
+## 组件开发调试
+1. `npm run storybook`：自行参考`storybook`开发文档

web/installer/index.tsx

@@ -4,6 +4,6 @@ import * as ReactDOM from './node_modules/react-dom';
 window['ReactDOM16'] = ReactDOM;
 import { Installer } from './src/modules/installer';
 import 'core-js/modules/es.object.assign'; // 解决IE浏览器不支持Object.assign 的问题
-import 'babel-polyfill'; // 解决 regenerator time 的问题
+import '@babel/polyfill'; // 解决 regenerator time 的问题
 
 ReactDOM.render(<Installer />, document.getElementById('appArea'));