feat: upgrade react 17 (#172)

* chore: release * feat: react 17 & new jsx transform (#173) * feat(scaffolds): react 17 and new jsx transform * feat: react@17&new jsx transform * chore: add tmp to gitignore * chore: eslint config * chore: migrate types to devDep
ice-lab · Jul 22, 2021 · 930fbbe · 930fbbe
1 parent c353d0b
commit 930fbbe
Show file tree

Hide file tree

Showing 52 changed files with 56 additions and 318 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,4 +17,5 @@ components/**/lib/
 components/**/es/
 screenshot.png
 .ice
-.history
+.history
+.faas_debug_tmp
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-materials",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "icejs materials",
   "author": "",
   "scripts": {

diff --git a/scaffolds/ant-design-lite/package.json b/scaffolds/ant-design-lite/package.json
@@ -1,9 +1,8 @@
 {
   "name": "@icedesign/ice-antd-scaffold",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Ant Design and icejs scaffold, use TypeScript.",
   "files": [
-    ".vscode/",
     "mock/",
     "src/",
     "build/",
@@ -25,19 +24,19 @@
   "dependencies": {
     "@ant-design/icons": "^4.0.2",
     "@ant-design/pro-layout": "^6.5.1",
-    "@types/react": "^16.9.13",
-    "@types/react-dom": "^16.9.4",
     "antd": "^4.0.0",
     "moment": "^2.24.0",
     "prop-types": "^15.5.8",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@iceworks/spec": "^1.0.1",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
     "build-plugin-antd": "^0.1.0",
     "build-plugin-moment-locales": "^0.1.0",
-    "eslint": "^6.0.1",
+    "eslint": "^7.30.0",
     "ice.js": "^1.0.0",
     "stylelint": "^13.1.0"
   },

diff --git a/scaffolds/ant-design-lite/src/Layouts/BasicLayout/index.tsx b/scaffolds/ant-design-lite/src/Layouts/BasicLayout/index.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import { createElement } from 'react';
 import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
 import { Link } from 'ice';
 import { asideMenuConfig } from './menuConfig';
 
 const loopMenuItem = (menus) =>
   menus.map(({ icon, children, ...item }) => ({
     ...item,
-    icon: React.createElement(icon),
+    icon: createElement(icon),
     children: children && loopMenuItem(children),
   }));
 

diff --git a/scaffolds/ant-design-lite/src/app.ts → scaffolds/ant-design-lite/src/app.tsx b/scaffolds/ant-design-lite/src/app.ts → scaffolds/ant-design-lite/src/app.tsx
diff --git a/scaffolds/ant-design-lite/src/components/NotFound/index.tsx b/scaffolds/ant-design-lite/src/components/NotFound/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'ice';
 
 export interface Props {

diff --git a/scaffolds/ant-design-lite/src/pages/Dashboard/index.tsx b/scaffolds/ant-design-lite/src/pages/Dashboard/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function Dashboard() {
   return (
     <div>

diff --git a/scaffolds/ant-design-lite/src/pages/Home/index.tsx b/scaffolds/ant-design-lite/src/pages/Home/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useRequest } from 'ice';
 import { Table } from 'antd';
 import styles from './index.module.less';

diff --git a/scaffolds/ant-design-lite/src/routes.ts b/scaffolds/ant-design-lite/src/routes.ts
@@ -4,7 +4,7 @@ import Dashboard from '@/pages/Dashboard';
 import Home from '@/pages/Home';
 import NotFound from '@/components/NotFound';
 
-const routerConfig: IRouterConfig = [
+const routerConfig: IRouterConfig[] = [
   {
     path: '/',
     component: Layout,

diff --git a/scaffolds/ant-design-lite/tsconfig.json b/scaffolds/ant-design-lite/tsconfig.json
@@ -6,7 +6,7 @@
     "outDir": "build",
     "module": "esnext",
     "target": "es6",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "lib": ["es6", "dom"],

diff --git a/scaffolds/fusion-design-lite/package.json b/scaffolds/fusion-design-lite/package.json
@@ -3,8 +3,8 @@
   "version": "0.2.7",
   "description": "轻量级模板，使用 TypeScript，仅包含基础的 Layout。",
   "scaffoldConfig": {
-    "name": "Fusion Design Lite - TS",
-    "title": "Fusion Design Lite - TS",
+    "name": "Fusion Design Lite",
+    "title": "Fusion Design Lite",
     "category": "Basic",
     "screenshot": "https://img.alicdn.com/tfs/TB12CtTsEY1gK0jSZFMXXaWcVXa-2480-1200.png"
   },

diff --git a/scaffolds/icestark-child/package.json b/scaffolds/icestark-child/package.json
@@ -1,10 +1,9 @@
 {
   "name": "@icedesign/stark-child-scaffold",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "微前端方案 icestark 的子应用模板，用于快速初始化微应用",
   "homepage": "https://icestark-react.surge.sh/seller",
   "files": [
-    ".vscode/",
     "src/",
     "build/",
     "public/",
@@ -27,19 +26,18 @@
     "@alifd/next": "^1.x",
     "@alifd/theme-design-pro": "^0.x",
     "@icedesign/container": "^1.0.4",
-    "@types/react": "^16.9.20",
-    "@types/react-dom": "^16.9.5",
-    "axios": "^0.17.1",
     "moment": "^2.24.0",
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@iceworks/spec": "^1.0.0",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "build-plugin-fusion": "^0.1.0",
     "build-plugin-icestark": "^2.0.0",
     "build-plugin-moment-locales": "^0.1.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.30.0",
     "ice.js": "^1.0.0",
     "stylelint": "^13.7.2"
   },

diff --git a/scaffolds/icestark-child/src/components/NotFound/index.tsx b/scaffolds/icestark-child/src/components/NotFound/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default () => {
   return (
     <div>404 not found</div>

diff --git a/scaffolds/icestark-child/src/components/PageTitle/index.tsx b/scaffolds/icestark-child/src/components/PageTitle/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './index.module.scss';
 
 export default ({ title }) => <h5 className={styles.title}>{title}</h5>;
diff --git a/scaffolds/icestark-child/src/global.scss b/scaffolds/icestark-child/src/global.scss
@@ -3,42 +3,5 @@ body {
 }
 
 .icestark-child-app {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  ul,
-  ol {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  li {
-    margin-left: 0;
-  }
-
-  hr {
-    border: 0 $line-solid $color-line1-2;
-    border-top-width: $line-1;
-  }
-
-  a {
-    text-decoration: none;
-    &:link {
-      color: $color-link-1;
-    }
-    &:visited {
-      color: $color-link-2;
-    }
-    &:hover {
-      color: $color-link-3;
-    }
-    &:active {
-      color: $color-link-3;
-      text-decoration: underline;
-    }
-  }
+  @import '@alifd/next/reset.scss';
 }
diff --git a/scaffolds/icestark-child/src/layouts/BasicLayout/index.tsx b/scaffolds/icestark-child/src/layouts/BasicLayout/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './index.module.scss';
 
 export default (props) => {

diff --git a/scaffolds/icestark-child/src/pages/Detail/index.tsx b/scaffolds/icestark-child/src/pages/Detail/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Grid, Loading } from '@alifd/next';
 import IceContainer from '@icedesign/container';
 import PageTitle from '@/components/PageTitle';

diff --git a/scaffolds/icestark-child/src/pages/Home/index.tsx b/scaffolds/icestark-child/src/pages/Home/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { appHistory } from '@ice/stark-app';
 import { Button } from '@alifd/next';

diff --git a/scaffolds/icestark-child/src/pages/List/index.tsx b/scaffolds/icestark-child/src/pages/List/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import IceContainer from '@icedesign/container';
 import { Table, Pagination, Message } from '@alifd/next';
 import { Link } from 'ice';

diff --git a/scaffolds/icestark-child/tsconfig.json b/scaffolds/icestark-child/tsconfig.json
@@ -6,7 +6,7 @@
     "outDir": "build",
     "module": "esnext",
     "target": "es6",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "lib": ["es6", "dom"],

diff --git a/scaffolds/icestark-layout/package.json b/scaffolds/icestark-layout/package.json
@@ -1,10 +1,9 @@
 {
   "name": "@icedesign/stark-layout-scaffold",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "微前端方案 icestark 的主应用模板，用于快速初始化主应用",
   "homepage": "https://icestark-react.surge.sh",
   "files": [
-    ".vscode/",
     "src/",
     "build/",
     "public/",
@@ -27,20 +26,20 @@
     "@alifd/next": "^1.x",
     "@alifd/theme-design-pro": "^0.x",
     "@icedesign/container": "^1.x",
-    "@types/react": "^16.9.20",
-    "@types/react-dom": "^16.9.5",
     "classnames": "^2.2.5",
     "moment": "^2.24.0",
     "prop-types": "^15.5.8",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@iceworks/spec": "^1.0.0",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "build-plugin-fusion": "^0.1.0",
     "build-plugin-icestark": "^2.0.0",
     "build-plugin-moment-locales": "^0.1.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.30.0",
     "ice.js": "^1.0.0",
     "stylelint": "^13.7.2"
   },

diff --git a/scaffolds/icestark-layout/src/app.tsx b/scaffolds/icestark-layout/src/app.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { runApp, IAppConfig } from 'ice';
 import { ConfigProvider } from '@alifd/next';
 import PageLoading from '@/components/PageLoading';

diff --git a/scaffolds/icestark-layout/src/components/NotFound/index.tsx b/scaffolds/icestark-layout/src/components/NotFound/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'ice';
 import IceContainer from '@icedesign/container';
 

diff --git a/scaffolds/icestark-layout/src/components/PageLoading/index.jsx b/scaffolds/icestark-layout/src/components/PageLoading/index.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Loading } from '@alifd/next';
 
 export default () => (

diff --git a/scaffolds/icestark-layout/src/layouts/BasicLayout/components/Footer/index.tsx b/scaffolds/icestark-layout/src/layouts/BasicLayout/components/Footer/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './index.module.scss';
 
 export default function Footer() {

diff --git a/scaffolds/icestark-layout/src/layouts/BasicLayout/components/PageNav/index.tsx b/scaffolds/icestark-layout/src/layouts/BasicLayout/components/PageNav/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { AppLink } from '@ice/stark';
 import { Nav } from '@alifd/next';

diff --git a/scaffolds/icestark-layout/src/layouts/BasicLayout/index.tsx b/scaffolds/icestark-layout/src/layouts/BasicLayout/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Shell } from '@alifd/next';
 import PageNav from './components/PageNav';
 import Footer from './components/Footer';

diff --git a/scaffolds/icestark-layout/src/layouts/FrameworkLayout/index.tsx b/scaffolds/icestark-layout/src/layouts/FrameworkLayout/index.tsx
@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import BasicLayout from '../BasicLayout';
 import UserLayout from '../UserLayout';
 
-const { useEffect } = React;
 export default function FrameworkLayout(props: {
   children: React.ReactNode;
   pathname: string;

diff --git a/scaffolds/icestark-layout/src/layouts/UserLayout/index.tsx b/scaffolds/icestark-layout/src/layouts/UserLayout/index.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
-
-export default function UserLayout({ children }: { children: React.ReactNode }) {
+export default function UserLayout({ children, pathname }: {
+  children: React.ReactNode;
+  pathname?: string;
+}) {
   return (
     <div className="user-layout">
       {children}

diff --git a/scaffolds/icestark-layout/src/pages/About/index.tsx b/scaffolds/icestark-layout/src/pages/About/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'ice';
 
 const About = () => {

diff --git a/scaffolds/icestark-layout/src/pages/Home/index.tsx b/scaffolds/icestark-layout/src/pages/Home/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'ice';
 
 const Home = () => {

diff --git a/scaffolds/icestark-layout/src/pages/Login/components/LoginBlock/index.tsx b/scaffolds/icestark-layout/src/pages/Login/components/LoginBlock/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Input, Message, Form, Divider, Checkbox, Icon } from '@alifd/next';
 import { appHistory } from '@ice/stark';
 
@@ -29,7 +29,6 @@ interface LoginProps {
   dataSource?: IDataSource;
 }
 
-
 const LoginBlock: React.FunctionComponent<LoginProps> = (props: LoginProps): JSX.Element => {
   const {
     dataSource = DEFAULT_DATA,

diff --git a/scaffolds/icestark-layout/src/pages/Login/index.tsx b/scaffolds/icestark-layout/src/pages/Login/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { ResponsiveGrid } from '@alifd/next';
 import LoginBlock from './components/LoginBlock';
 

diff --git a/scaffolds/icestark-layout/tsconfig.json b/scaffolds/icestark-layout/tsconfig.json
@@ -6,7 +6,7 @@
     "outDir": "build",
     "module": "esnext",
     "target": "es6",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "lib": ["es6", "dom"],