refactor: JS to TS

Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/3677476

* chore: remove unnecessary code

* refactor: react-render using TypeScript

* chore: build-script

* refactor: editor-skeleton

* refactor: designer

* refactor: material-parser

* refactor: editor-setters

* refactor: js to ts for rax-provider 

Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/3678180

* refactor: rax-provider

* feat: add build command

* chore: compilerOptions for rax-provider

* refactor: JS to TS for Rax Renderer 

Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/3678935

* refactor: rax-renderer

* Merge remote-tracking branch 'origin/refactor/js-to-ts' into refactor/js2ts-rax-renderer

* Merge remote-tracking branch 'origin/refactor/js-to-ts' into refactor/js2ts-rax-renderer

* refactor: ts-nocheck

* chore: ts compile error

* fix: ts rootDir

* fix: compile error

* chore: using same tsconfig for rax component

* refactor: ts compile rax-renderer && rax-provider

* Merge remote-tracking branch 'origin/release/1.0.0' into refactor/js-to-ts

# Conflicts:
#	packages/rax-render/src/utils/appHelper.js
#	packages/rax-render/src/utils/appHelper.ts
#	packages/utils/src/appHelper.ts

* refactor: no JS file

packages/editor-setters/src/locale/snippets.js

@@ -1,242 +0,0 @@
-export default [
-  {
-    label: 'constants',
-    kind: 'Class',
-    insertText: 'constants',
-    detail: '应用全局常量',
-    documentation: '应用范围定义的通用常量'
-  },
-  {
-    label: 'utils',
-    kind: 'Class',
-    insertText: 'utils',
-    detail: '应用全局公共函数',
-    documentation: '应用范围扩展的公共函数'
-  },
-  {
-    label: 'state',
-    kind: 'Enum',
-    insertText: 'state',
-    detail: '当前所在容器组件内部状态',
-    documentation: 'React Class内部状态state'
-  },
-  {
-    label: 'setState',
-    kind: 'Function',
-    insertText: 'setState({\n\t$0\n})',
-    insertTextRules: 'InsertAsSnippet',
-    detail: '设置当前所在容器组件的state数据',
-    documentation: '原生React方法，会自动更新组件视图'
-  },
-  {
-    label: 'reloadDataSource',
-    kind: 'Function',
-    insertText: 'reloadDataSource(${1:${2:namespace}, ${3:false}, ${4:callback}})',
-    insertTextRules: 'InsertAsSnippet',
-    detail: '刷新当前所在的容器组件',
-    documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图'
-  },
-  {
-    label: 'location',
-    kind: 'Class',
-    insertText: 'location',
-    detail: '路由解析对象'
-  },
-  {
-    label: 'location.query',
-    kind: 'Value',
-    insertText: 'location.query.${1:xxxx}',
-    insertTextRules: 'InsertAsSnippet',
-    detail: '从路由解析对象中获取参数信息'
-  },
-  {
-    label: 'history',
-    kind: 'Class',
-    insertText: 'history',
-    detail: '路由历史对象'
-  },
-  {
-    label: 'React',
-    kind: 'Keyword',
-    insertText: 'React',
-    detail: 'React对象'
-  },
-  {
-    label: 'ReactDOM',
-    kind: 'Keyword',
-    insertText: 'ReactDOM',
-    detail: 'ReactDom对象'
-  },
-  {
-    label: 'ReactDOM.findDOMNode',
-    kind: 'Function',
-    insertText: 'ReactDOM.findDOMNode(${1:this.refs.xxxx})',
-    insertTextRules: 'InsertAsSnippet',
-    detail: 'ReactDom查找真实dom node'
-  },
-  {
-    label: 'Dialog.alert',
-    kind: 'Method',
-    insertText: [
-      'Dialog.alert({',
-      "\tcontent: '${1:Alert content}',",
-      "\ttitle: '${2:Title}',",
-      '\tonOk: () => {',
-      '\t\t$3',
-      '\t}',
-      '})'
-    ].join('\n'),
-    insertTextRules: 'InsertAsSnippet',
-    detail: 'alert弹框 By Fusion'
-  },
-  {
-    label: 'Dialog.confirm',
-    kind: 'Method',
-    insertText: [
-      'Dialog.confirm({',
-      "\tcontent: '${1:Confirm content}',",
-      "\ttitle: '${2:Title}',",
-      '\tonOk: () => {',
-      '\t\t$3',
-      '\t},',
-      '\tonCancel: () => {',
-      '\t\t$4',
-      '\t}',
-      '})'
-    ].join('\n'),
-    insertTextRules: 'InsertAsSnippet',
-    detail: '确认弹出框 By Fusion'
-  },
-  {
-    label: 'Message.success',
-    kind: 'Method',
-    insertText: 'Message.success(${1:content})',
-    insertTextRules: 'InsertAsSnippet',
-    detail: '成功反馈提示 By Fusion'
-  },
-  {
-    label: 'Message.error',
-    kind: 'Method',
-    insertText: 'Message.error(${1:content})',
-    insertTextRules: 'InsertAsSnippet',
-    detail: '错误反馈提示 By Fusion'
-  },
-  {
-    label: 'Message.help',
-    kind: 'Method',
-    insertText: 'Message.help(${1:content})',
-    insertTextRules: 'InsertAsSnippet',
-    detail: '帮助反馈提示 By Fusion'
-  },
-  {
-    label: 'Message.loading',
-    kind: 'Method',
-    insertText: 'Message.loading(${1:content})',
-    insertTextRules: 'InsertAsSnippet',
-    detail: 'loading反馈提示 By Fusion'
-  },
-  {
-    label: 'Message.notice',
-    kind: 'Method',
-    insertText: 'Message.notice(${1:content})',
-    insertTextRules: 'InsertAsSnippet',
-    detail: '注意反馈提示 By Fusion'
-  },
-  {
-    label: 'Message.waining',
-    kind: 'Method',
-    insertText: 'Message.waining(${1:content})',
-    insertTextRules: 'InsertAsSnippet',
-    detail: '警告反馈提示 By Fusion'
-  },
-  {
-    label: 'Modal.confirm',
-    kind: 'Method',
-    insertText: [
-      'Modal.confirm({',
-      "\tcontent: '${1:Confirm content}',",
-      "\ttitle: '${2:Title}',",
-      '\tonOk: () => {',
-      '\t\t$3',
-      '\t},',
-      '\tonCancel: () => {',
-      '\t\t$4',
-      '\t}',
-      '})'
-    ].join('\n'),
-    insertTextRules: 'InsertAsSnippet',
-    detail: '确认弹出框 By Antd'
-  },
-  {
-    label: 'Modal.info',
-    kind: 'Method',
-    insertText: [
-      'Modal.info({',
-      "\tcontent: '${1:Info content}',",
-      "\ttitle: '${2:Title}',",
-      '\tonOk: () => {',
-      '\t\t$3',
-      '\t},',
-      '\tonCancel: () => {',
-      '\t\t$4',
-      '\t}',
-      '})'
-    ].join('\n'),
-    insertTextRules: 'InsertAsSnippet',
-    detail: '信息弹出框 By Antd'
-  },
-  {
-    label: 'Modal.success',
-    kind: 'Method',
-    insertText: [
-      'Modal.success({',
-      "\tcontent: '${1:Success content}',",
-      "\ttitle: '${2:Title}',",
-      '\tonOk: () => {',
-      '\t\t$3',
-      '\t},',
-      '\tonCancel: () => {',
-      '\t\t$4',
-      '\t}',
-      '})'
-    ].join('\n'),
-    insertTextRules: 'InsertAsSnippet',
-    detail: '成功弹出框 By Antd'
-  },
-  {
-    label: 'Modal.error',
-    kind: 'Method',
-    insertText: [
-      'Modal.error({',
-      "\tcontent: '${1:Error content}',",
-      "\ttitle: '${2:Title}',",
-      '\tonOk: () => {',
-      '\t\t$3',
-      '\t},',
-      '\tonCancel: () => {',
-      '\t\t$4',
-      '\t}',
-      '})'
-    ].join('\n'),
-    insertTextRules: 'InsertAsSnippet',
-    detail: '错误弹出框 By Antd'
-  },
-  {
-    label: 'Modal.warning',
-    kind: 'Method',
-    insertText: [
-      'Modal.warning({',
-      "\tcontent: '${1:Warning content}',",
-      "\ttitle: '${2:Title}',",
-      '\tonOk: () => {',
-      '\t\t$3',
-      '\t},',
-      '\tonCancel: () => {',
-      '\t\t$4',
-      '\t}',
-      '})'
-    ].join('\n'),
-    insertTextRules: 'InsertAsSnippet',
-    detail: '警告弹出框 By Antd'
-  }
-];

packages/editor-setters/src/mixed-setter/locale/utils.js

@@ -1,21 +0,0 @@
-import IntlMessageFormat from 'intl-messageformat';
-
-export const isJSExpression = (obj = '') => {
-  if(obj && typeof obj === 'object' && obj.type === 'JSExpression') {
-    return true;
-  }
-  return false;
-}
-
-/**
- * 用于构造国际化字符串处理函数
- * @param {*} locale 国际化标识，例如 zh-CN、en-US
- * @param {*} messages 国际化语言包
- */
-export const generateI18n = (locale = 'zh-CN', messages = {}) => {
-  return function (key, values = {}) {
-    if (!messages || !messages[key]) return '';
-    const formater = new IntlMessageFormat(messages[key], locale);
-    return formater.format(values);
-  };
-}

packages/editor-setters/src/mixed-setter/locale/zh-CN.js

@@ -1,36 +0,0 @@
-export default {
-  // function
-  setting: '点击设置',
-  edit: '编辑',
-  submitConfirm: '确认提交 cmd+s',
-  close: '关闭 esc',
-  fullScreen: '全屏',
-  cancelFullScreen: '取消全屏',
-  jsonIllegal: '非json格式',
-  functionIllegal: '非function格式',
-  objectIllegal: '非object格式',
-  circularRef: '对象中出现循环引用的对象',
-  formatError: '格式错误',
-  saved: '已保存',
-  // expression
-  valueIllegal: '值类型为对象类型，与当前组件属性设置的控件类型不匹配，请在属性“代码编辑模式”下进行编辑',
-  jsExpression: '请输入JS表达式',
-  // Mixin
-  input: '字符串Input',
-  textarea: '多行字符串Textarea',
-  expression: '变量控件Expression',
-  monacoEditor: '编辑器MonacoEditor',
-  numberPicker: '数字NumberPicker',
-  bool: '布尔Switch',
-  datePicker: '日期选择DatePicker',
-  select: '下拉选择Select',
-  radio: '单项选择RadioGroup',
-  date: '日期选择DatePicker',
-  dateYear: '年选择DatePicker',
-  dateMonth: '月选择DatePicker',
-  dateRange: '日期区间选择DatePicker',
-  list: '数组List',
-  object: '对象ObjectButton',
-  reactNode: '节点类型ReactNode',
-  typeError: 'Minix组件属性Types配置错误，存在不支持类型[{type}]，请检查组件属性配置',
-};

packages/material-parser/src/parse/js/resolver/resolveTranspiledClass.ts

@@ -11,6 +11,7 @@ export default function resolveTranspiledClass(path: any) {
     visitFunctionDeclaration(arg) {
       classPath = new NodePath(
         builders.functionDeclaration(
+          // @ts-ignore
           arg.node.id || 'Default',
           [],
           builders.blockStatement([

packages/material-parser/src/parse/js/utils/getTSType.ts

@@ -115,6 +115,7 @@ function handleTSTypeLiteral(path, typeParams) {
         value: getTSTypeWithRequirements(param.get('typeAnnotation'), typeParams),
       });
     } else if (t.TSCallSignatureDeclaration.check(param.node)) {
+      // @ts-ignore
       type.signature.constructor = handleTSFunctionType(param, typeParams);
     } else if (t.TSIndexSignature.check(param.node)) {
       type.signature.properties.push({
@@ -195,12 +196,14 @@ function handleTSFunctionType(path, typeParams) {
     };
 
     if (param.node.name === 'this') {
+      // @ts-ignore
       type.signature.this = arg.type;
       return;
     }
 
     if (param.node.type === 'RestElement') {
       arg.name = param.node.argument.name;
+      // @ts-ignore
       arg.rest = true;
     }
 
@@ -288,7 +291,7 @@ function handleTSIndexedAccessType(path, typeParams) {
 
 let visitedTypes = {};
 
-function getTSTypeWithResolvedTypes(path, typeParams) {
+function getTSTypeWithResolvedTypes(path, typeParams?) {
   if (t.TSTypeAnnotation.check(path.node)) {
     path = path.get('typeAnnotation');
   }
@@ -343,7 +346,7 @@ function getTSTypeWithResolvedTypes(path, typeParams) {
  *
  * If there is no match, "unknown" is returned.
  */
-export default function getTSType(path, typeParamMap) {
+export default function getTSType(path, typeParamMap?) {
   // Empty visited types before an after run
   // Before: in case the detection threw and we rerun again
   // After: cleanup memory after we are done here

packages/material-parser/src/parse/ts/index.ts

@@ -72,6 +72,7 @@ function getDocgenTypeHelper(
     }[] = symbolArr.map((prop) => {
       const propType = checker.getTypeOfSymbolAtLocation(
         prop,
+        // @ts-ignore
         prop.valueDeclaration || (prop.declarations && prop.declarations[0]) || {},
       );
       return {

packages/material-parser/tsconfig.json

@@ -4,7 +4,8 @@
     "target": "es6",
     "module": "commonjs",
     "rootDir": "src",
-    "outDir": "lib"
+    "outDir": "lib",
+    "strict": false
   },
   "include": ["src/**/*"],
   "exclude": ["schemas"]

packages/rax-provider/package.json

@@ -9,7 +9,8 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "scripts": {
-    "start": "build-scripts start"
+    "start": "build-scripts start",
+    "build": "build-scripts build"
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",

packages/rax-provider/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015", "dom"],
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": false,
+    "strictPropertyInitialization": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "sourceMap": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "outDir": "lib"
+  },
+  "exclude": ["test", "lib", "es", "node_modules"],
+  "include": [
+    "src"
+  ]
+}

packages/rax-render/package.json

@@ -41,6 +41,7 @@
     "debug": "^4.1.1",
     "events": "^3.0.0",
     "fetch-jsonp": "^1.1.3",
+    "fs-extra": "^9.0.1",
     "intl-messageformat": "^9.3.1",
     "jsonuri": "^2.1.2",
     "keymaster": "^1.6.2",

packages/rax-render/src/comp/visualDom/index.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Component } from 'rax';
 import './index.css';
 

packages/rax-render/src/engine/base.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Component, createElement } from 'rax';
 import PropTypes from 'prop-types';
 import Debug from 'debug';

packages/rax-render/src/engine/blockEngine.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { createElement } from 'rax';
 import PropTypes from 'prop-types';
 import Debug from 'debug';

packages/rax-render/src/engine/compEngine.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import { createElement } from 'rax';
 import PropTypes from 'prop-types';
 import Debug from 'debug';

packages/rax-render/src/engine/index.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-disable */
 import { Component, createElement } from 'rax';
 import PropTypes from 'prop-types';

packages/rax-render/src/engine/pageEngine.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import { createElement } from 'rax';
 import PropTypes from 'prop-types';
 import Debug from 'debug';

packages/rax-render/src/engine/tempEngine.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import { createElement } from 'rax';
 import PropTypes from 'prop-types';
 import Debug from 'debug';

packages/rax-render/src/hoc/compFactory.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import { Component, createElement, forwardRef } from 'rax';
 import PropTypes from 'prop-types';
 import { AppHelper } from '@ali/lowcode-utils';

packages/rax-render/src/hoc/compWrapper.tsx

@@ -1,7 +1,9 @@
+// @ts-nocheck
+
 import { createElement, Component } from 'rax';
 
 export default function (Comp) {
-  class compWrapper extends Component {
+  return class CompWrapper extends Component {
     constructor(props, context) {
       super(props, context);
     }
@@ -12,6 +14,4 @@ export default function (Comp) {
       });
     }
   }
-
-  return compWrapper;
 }

packages/rax-render/src/utils/dataHelper.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import { transformArrayToMap, isJSFunction, transformStringToFunction, clone } from './index';
 import { jsonp, mtop, request, get, post, bzb } from './request';
 

packages/rax-render/src/utils/index.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import Debug from 'debug';
 import _keymaster from 'keymaster';
 import { forEach as _forEach, shallowEqual as _shallowEqual } from '@ali/b3-one/lib/obj';
@@ -13,9 +15,10 @@ import _debounce from 'lodash/debounce';
 import _serialize from 'serialize-javascript';
 import * as _jsonuri from 'jsonuri';
 import IntlMessageFormat from 'intl-messageformat';
-import pkg from '../../package.json';
+import * as fs from 'fs-extra';
 
-window.sdkVersion = pkg.version;
+const sdkVersion = fs.readJSONSync(path.join(__dirname, '..', '..', 'package.json'));
+window.sdkVersion = sdkVersion;
 
 export const moment = _moment;
 moment.locale('zh-cn');
@@ -281,7 +284,7 @@ export function goldlog(gmKey, params = {}, logKey = 'other') {
   // vscode 黄金令箭API
   const sendIDEMessage = window.sendIDEMessage || getParentWinValue('sendIDEMessage');
   const goKey = serializeParams({
-    sdkVersion: pkg.version,
+    sdkVersion,
     env: getEnv(),
     ...params,
   });

packages/rax-render/src/utils/request.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import 'whatwg-fetch';
 import fetchMtop from '@ali/lib-mtop';
 import fetchJsonp from 'fetch-jsonp';

packages/rax-render/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015", "dom"],
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": false,
+    "strictPropertyInitialization": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "sourceMap": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "outDir": "lib"
+  },
+  "exclude": ["test", "lib", "es", "node_modules"],
+  "include": [
+    "src"
+  ]
+}

packages/react-renderer/package.json

@@ -10,8 +10,8 @@
   ],
   "scripts": {
     "test": "echo \"Error: run tests from root\" && exit 1",
-    "start": "../../node_modules/.bin/build-scripts start",
+    "start": "build-scripts start",
-    "build": "../../node_modules/.bin/build-scripts build",
+    "build": "build-scripts build",
     "prepublishOnly": "npm run build"
   },
   "repository": {

packages/react-renderer/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib"
+  },
+  "include": [
+    "./src/"
+  ]
+}

packages/utils/src/appHelper.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import EventEmitter from 'events';
 
 let instance = null;

tsconfig.json

@@ -8,12 +8,6 @@
     "module": "esnext",
     // Search under node_modules for non-relative imports.
     "moduleResolution": "node",
-    // Process & infer types from .js files.
-    "allowJs": true,
-    // Report errors in .js files.
-    "checkJs": false,
-    // Don't emit; allow Babel to transform files.
-    // "noEmit": true,
     // Enable strictest settings like strictNullChecks & noImplicitAny.
     "strict": true,
     "strictPropertyInitialization": false,