From ee7ab7cd5346e196cfe3ca4f8e7596126617b198 Mon Sep 17 00:00:00 2001
From: Harry Chen <czy88840616@gmail.com>
Date: Fri, 22 Feb 2019 21:02:00 +0800
Subject: [PATCH] refactor: support load tsx files

---
 packages/midway-core/src/container.ts         |  2 +-
 packages/midway-web/package.json              |  6 +++-
 packages/midway-web/src/loader/webLoader.ts   |  2 +-
 packages/midway-web/test/enhance.test.ts      | 20 +++++++++++++
 .../base-app-controller-tsx/package.json      |  3 ++
 .../src/app/controller/my.tsx                 | 29 +++++++++++++++++++
 .../src/config/config.default.ts              | 12 ++++++++
 .../src/config/config.unittest.ts             |  5 ++++
 .../src/shared/App.css                        |  9 ++++++
 .../src/shared/App.tsx                        | 12 ++++++++
 .../src/shared/components/Header.tsx          | 12 ++++++++
 packages/midway-web/tsconfig.json             |  3 +-
 12 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/package.json
 create mode 100644 packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/app/controller/my.tsx
 create mode 100644 packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/config/config.default.ts
 create mode 100644 packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/config/config.unittest.ts
 create mode 100644 packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/App.css
 create mode 100644 packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/App.tsx
 create mode 100644 packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/components/Header.tsx

diff --git a/packages/midway-core/src/container.ts b/packages/midway-core/src/container.ts
index 60e087c00881..debed0c2da70 100644
--- a/packages/midway-core/src/container.ts
+++ b/packages/midway-core/src/container.ts
@@ -207,7 +207,7 @@ export class MidwayContainer extends Container implements IContainer {
     const loadDirs = [].concat(opts.loadDir || []);
 
     for (const dir of loadDirs) {
-      const fileResults = globby.sync(['**/**.ts', '**/**.js', '!**/**.d.ts'].concat(opts.pattern || []), {
+      const fileResults = globby.sync(['**/**.ts', '**/**.tsx', '**/**.js', '!**/**.d.ts'].concat(opts.pattern || []), {
         cwd: dir,
         ignore: [
           '**/node_modules/**',
diff --git a/packages/midway-web/package.json b/packages/midway-web/package.json
index f3f7a8e67704..7f0bc94650d9 100644
--- a/packages/midway-web/package.json
+++ b/packages/midway-web/package.json
@@ -27,9 +27,13 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "@types/react": "^16.0.38",
+    "@types/react-dom": "^16.0.4",
     "midway-bin": "^1.3.0",
     "midway-mock": "^1.3.0",
-    "pedding": "^1.1.0"
+    "pedding": "^1.1.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
   },
   "dependencies": {
     "@eggjs/router": "^1.1.0",
diff --git a/packages/midway-web/src/loader/webLoader.ts b/packages/midway-web/src/loader/webLoader.ts
index 089c058d7e9d..a54139a01cf6 100644
--- a/packages/midway-web/src/loader/webLoader.ts
+++ b/packages/midway-web/src/loader/webLoader.ts
@@ -159,7 +159,7 @@ export class MidwayWebLoader extends MidwayLoader {
 
     let arr = [];
     names.forEach((name) => {
-      arr = arr.concat([name + '.ts', name + '.js']);
+      arr = arr.concat([name + '.ts', name + '.tsx', name + '.js']);
     });
     return arr.concat(['!**/**.d.ts']);
   }
diff --git a/packages/midway-web/test/enhance.test.ts b/packages/midway-web/test/enhance.test.ts
index aaa18eab40db..372359dbe4ce 100644
--- a/packages/midway-web/test/enhance.test.ts
+++ b/packages/midway-web/test/enhance.test.ts
@@ -392,4 +392,24 @@ describe('/test/enhance.test.ts', () => {
         .expect('root_test', done);
     });
   });
+
+  describe('load tsx file', () => {
+    let app;
+    before(() => {
+      app = utils.app('enhance/base-app-controller-tsx', {
+        typescript: true
+      });
+      return app.ready();
+    });
+
+    after(() => app.close());
+
+    it('should load tsx controller', (done) => {
+      request(app.callback())
+        .get('/')
+        .expect(200)
+        .expect(/react/, done);
+    });
+
+  });
 });
diff --git a/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/package.json b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/package.json
new file mode 100644
index 000000000000..621cdc6a4174
--- /dev/null
+++ b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "ali-demo"
+}
diff --git a/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/app/controller/my.tsx b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/app/controller/my.tsx
new file mode 100644
index 000000000000..cd530d420cdb
--- /dev/null
+++ b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/app/controller/my.tsx
@@ -0,0 +1,29 @@
+import { provide } from 'injection';
+import { controller, get } from '../../../../../../../src/';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+import App from '../../shared/App';
+
+@provide()
+@controller('/')
+export class My {
+  @get('/')
+  async index(ctx) {
+    ctx.body = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>SSR Test</title>
+</head>
+<body>
+    <div id="app">${ReactDOM.renderToString(<App />)}</div>
+</body>
+</html>
+`;
+  }
+}
diff --git a/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/config/config.default.ts b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/config/config.default.ts
new file mode 100644
index 000000000000..091d985c517d
--- /dev/null
+++ b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/config/config.default.ts
@@ -0,0 +1,12 @@
+
+export const keys = 'key';
+
+export const hello = {
+  a: 1,
+  b: 2,
+  d: [1, 2, 3],
+};
+
+export const plugins = {
+  bucLogin: false,
+};
diff --git a/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/config/config.unittest.ts b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/config/config.unittest.ts
new file mode 100644
index 000000000000..764021a2a8b6
--- /dev/null
+++ b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/config/config.unittest.ts
@@ -0,0 +1,5 @@
+
+exports.hello = {
+  b: 4,
+  c: 3,
+};
diff --git a/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/App.css b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/App.css
new file mode 100644
index 000000000000..b7b2cc32192e
--- /dev/null
+++ b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/App.css
@@ -0,0 +1,9 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+h1 {
+  font-size: 2rem;
+}
diff --git a/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/App.tsx b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/App.tsx
new file mode 100644
index 000000000000..09b0051bf2a4
--- /dev/null
+++ b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/App.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Header from './components/Header';
+// import './App.css';
+
+export default () => {
+  return (
+    <div>
+      <Header />
+      <h1>App</h1>
+    </div>
+  );
+};
diff --git a/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/components/Header.tsx b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/components/Header.tsx
new file mode 100644
index 000000000000..f633a7030bff
--- /dev/null
+++ b/packages/midway-web/test/fixtures/enhance/base-app-controller-tsx/src/shared/components/Header.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export default () => {
+  return (
+    <ul style={{display: 'flex'}}>
+      <li>Home</li>
+      <li style={{marginLeft: 'auto'}}>Menu1</li>
+      <li>Menu2</li>
+      <li>Menu3</li>
+    </ul>
+  );
+};
diff --git a/packages/midway-web/tsconfig.json b/packages/midway-web/tsconfig.json
index da0f31205234..2e43d1f89327 100644
--- a/packages/midway-web/tsconfig.json
+++ b/packages/midway-web/tsconfig.json
@@ -11,7 +11,8 @@
     "declaration": true,
     "outDir": "dist",
     "lib": ["es2017", "dom"],
-    "sourceMap": true
+    "sourceMap": true,
+    "jsx": "react"
   },
   "exclude": [
     "dist",