feat: 支持新的 JSX 转换 (Close #38)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # 变更说明
 
+## v0.14.0 - 2021.3.25
+
+- feat: 支持新的 JSX 转换 ([#38](https://github.com/sinoui/ts-lib-scripts/issues/38))
+
 ## v0.13.11 - 2021.3.24
 
 - fix(ts-lib-tools): 修复代码中引入 node_modules 中的 css 文件，导致 jest 单元测试执行失败的缺陷

e2e/eslint/react-props-type.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-const Demo: React.FunctionComponent = ({ children }) => {
-  return <div>{children}</div>;
-};
+const Demo: React.FunctionComponent = ({ children }) => <div>{children}</div>;
 
 export default Demo;

e2e/new-jsx-transform-demo/.npmignore

@@ -0,0 +1,30 @@
+# node.js
+node_modules
+
+# testing
+coverage
+
+# source code
+src
+
+# cache
+.cache
+.docz
+
+# typescript
+*.tsbuildinfo
+
+# misc
+.DS_Store
+__MACOSX
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.progress-estimator

e2e/new-jsx-transform-demo/README.md

@@ -0,0 +1,3 @@
+# ts-lib-scripts-example
+
+ts-lib-scripts 示例。

e2e/new-jsx-transform-demo/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "new-jsx-transform-demo",
+  "version": "0.13.11",
+  "private": true,
+  "dependencies": {
+    "rc-pagination": "^1.20.11",
+    "ts-lib-tools": "^0.13.11",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "scripts": {
+    "test": "ts-lib-tools test",
+    "build": "ts-lib-tools build",
+    "format": "ts-lib-tools format",
+    "lint": "ts-lib-tools lint"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3"
+  },
+  "module": "dist/new-jsx-transform-demo.esm.js",
+  "types": "types/index.d.ts"
+}

e2e/new-jsx-transform-demo/src/index.tsx

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(
+  <div>Hello, new jsx transform demo!</div>,
+  document.getElementById('root'),
+);

e2e/new-jsx-transform-demo/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "include": ["src", "src/**/*.json"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "lib": ["dom", "esnext", "WebWorker"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "allowJs": false,
+    "baseUrl": "./",
+    "rootDir": "./src",
+    "declarationDir": "./types",
+    "incremental": true,
+    "composite": true,
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+  }
+}

e2e/new-jsx-transform-demo/tsconfig.release.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": true,
+    "declarationDir": "types",
+    "declaration": true,
+    "skipLibCheck": true,
+    "tsBuildInfoFile": "release.tsbuildinfo"
+  }
+}

e2e/new-jsx-transform-demo/tsconfig.simple.release.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [
+    "node_modules",
+    "**/__tests__/**",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx"
+  ],
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "esnext",
+    "declaration": true,
+    "sourceMap": false,
+    "outDir": "./build/es6",
+    "declarationDir": "./build/types",
+    "tsBuildInfoFile": "./build/tsconfig.tsbuildinfo"
+  }
+}

examples/package.json

@@ -19,7 +19,7 @@
     "lint-staged": "^8.1.7",
     "react": "^16.8.6",
     "rimraf": "^2.6.3",
-    "typescript": "^4.0.2"
+    "typescript": "^4.2.3"
   },
   "prettier": {
     "printWidth": 80,

examples/tsconfig.json

@@ -20,7 +20,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "allowJs": false,
     "baseUrl": "./",

package.json

@@ -5,7 +5,8 @@
   "workspaces": [
     "packages/*",
     "examples",
-    "e2e/jest-css-transform-demo"
+    "e2e/jest-css-transform-demo",
+    "e2e/new-jsx-transform-demo"
   ],
   "homepage": "https://github.com/sinoui/ts-lib-scripts",
   "bugs": {
@@ -20,8 +21,8 @@
     "husky": "^4.2.5",
     "lerna": "^3.16.4",
     "lint-staged": "^8.1.7",
-    "typescript": "^4.0.2",
-    "typescript-plugin-css-modules": "^2.4.0"
+    "typescript": "^4.2.3",
+    "typescript-plugin-css-modules": "^3.2.0"
   },
   "eslintConfig": {
     "extends": "ts-lib",

packages/babel-preset-ts-lib/create.js

@@ -56,6 +56,8 @@ module.exports = function create(_api, _opts, env) {
           // Will use the native built-in instead of trying to polyfill
           // behavior for any plugins that require one.
           useBuiltIns: true,
+          // 启用新的 JSX 转换
+          runtime: 'automatic',
         },
       ],
       require('@babel/preset-typescript'),

packages/babel-preset-ts-lib/package.json

@@ -13,26 +13,26 @@
     "url": "git+https://github.com/sinoui/ts-lib-scripts.git"
   },
   "dependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-decorators": "^7.8.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-decorators": "^7.13.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/polyfill": "^7.8.7",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.9.0",
-    "@babel/runtime": "^7.9.2",
-    "@types/babel__core": "^7.1.7",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@babel/runtime": "^7.13.10",
+    "@types/babel__core": "^7.1.14",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
     "babel-plugin-dev-expression": "^0.2.2",
-    "babel-plugin-dynamic-import-node": "^2.3.0",
-    "babel-plugin-macros": "^2.8.0",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-plugin-styled-components": "^1.10.7",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-macros": "^3.0.1",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-styled-components": "^1.12.0",
     "babel-plugin-transform-rename-import": "^2.3.0"
   },
   "gitHead": "a0ec9d27b2f24cb228993286530f89957d055b9b"

packages/eslint-config-ts-lib/index.js

@@ -21,9 +21,6 @@ const eslintConfig = {
     'airbnb-typescript',
     'plugin:react-hooks/recommended',
     'prettier',
-    'prettier/@typescript-eslint',
-    'prettier/react',
-    'prettier/standard',
     'plugin:cypress/recommended',
   ],
   globals: {
@@ -36,6 +33,7 @@ const eslintConfig = {
     },
     ecmaVersion: 2019,
     sourceType: 'module',
+    project: './tsconfig.json',
   },
   plugins: ['@typescript-eslint', 'prettier', 'cypress', 'react-hooks'],
   settings: {

packages/eslint-config-ts-lib/package.json

@@ -16,8 +16,8 @@
     "@typescript-eslint/eslint-plugin": "4.x",
     "@typescript-eslint/parser": "4.x",
     "eslint": "7.x",
-    "eslint-config-airbnb-typescript": "11.x",
-    "eslint-config-prettier": "6.x",
+    "eslint-config-airbnb-typescript": "12.x",
+    "eslint-config-prettier": "8.x",
     "eslint-import-resolver-typescript": "2.x",
     "eslint-plugin-cypress": "2.x",
     "eslint-plugin-import": "2.x",

packages/eslint-config-ts-lib/rules/react-rules.js

@@ -11,6 +11,8 @@ const reactRules = {
   'react/require-default-props': 'off',
   // 此规则不满足 React.createElement('div', props) 场景，故禁用此规则
   'react/no-unused-prop-types': 0,
+  // 采用新的 jsx 转换后，不再需要此规则
+  'react/react-in-jsx-scope': 'off',
 };
 
 module.exports = reactRules;

packages/ts-lib-scripts/assets/common-template/tsconfig.json

@@ -20,7 +20,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "allowJs": false,
     "baseUrl": ".",

packages/ts-lib-scripts/assets/monorepo-template/tsconfig.json

@@ -20,7 +20,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "allowJs": false,
     "resolveJsonModule": true,

packages/ts-lib-scripts/src/create/fns/appendContentToFile.ts

@@ -15,36 +15,32 @@ async function appendContentToFile(
     flags: 'a',
   });
 
-  const append = (content: string | ReadStream, end = false) => {
-    return new Promise((resolve, reject) => {
+  const append = (content: string | ReadStream, end = false) =>
+    new Promise<boolean>((resolve, reject) => {
       if (typeof content === 'string') {
         const cb = (error?: Error | null) => {
           if (error) {
             reject(error);
           } else {
-            resolve();
+            resolve(true);
           }
         };
         if (end) {
           writer.end(content, cb);
         }
         writer.write(content, cb);
       } else {
-        const stream = content.pipe(
-          writer,
-          {
-            end,
-          },
-        );
+        const stream = content.pipe(writer, {
+          end,
+        });
         content.on('end', () => {
-          resolve();
+          resolve(true);
         });
         stream.on('error', (error) => {
           reject(error);
         });
       }
     });
-  };
 
   for (let i = 0; i < contents.length; i++) {
     // eslint-disable-next-line no-await-in-loop