feat: plugin can use typescripts (#82)

* feat: plugin can use typescripts

* fix: format

lib/generators/plugin/index.js

@@ -24,6 +24,12 @@ class Generator extends BasicGenerator {
         name: 'org',
         message: `Which organization is your plugin stored under github?`,
       },
+      {
+        name: 'isTypeScript',
+        type: 'confirm',
+        message: 'Do you want to use typescript?',
+        default: false,
+      },
       {
         name: 'withUmiUI',
         type: 'confirm',
@@ -36,11 +42,28 @@ class Generator extends BasicGenerator {
     });
   }
 
+  // lang: ts || js
+  isUIFiles(file, lang) {
+    const uiFile = lang === 'ts'
+      ? 'ui/index.tsx'
+      : 'ui/index.js';
+    return file === uiFile;
+  }
+
   writing() {
     this.writeFiles({
       context: this.prompts,
       filterFiles: f => {
-        if (!this.prompts.withUmiUI && f === 'ui/index.js') return false;
+        const { isTypeScript, withUmiUI } = this.prompts;
+        if (isTypeScript) {
+          if (f.endsWith('.js')) return false;
+          // filter ui files
+          if (!withUmiUI && this.isUIFiles(f, 'ts')) return false;
+        } else {
+          if (this.isTsFile(f)) return false;
+          // filter ui files
+          if (!withUmiUI && this.isUIFiles(f)) return false;
+        }
         return true;
       },
     });

lib/generators/plugin/templates/.fatherrc.js

@@ -11,5 +11,5 @@ export default [
       minFile: false,
     },
   },
-<% } %>
+<% } -%>
 ];

lib/generators/plugin/templates/.fatherrc.ts

@@ -0,0 +1,18 @@
+
+export default [
+  {
+    cjs: 'babel',
+  },
+<% if (withUmiUI) { -%>
+  {
+    entry: 'ui/index.tsx',
+    typescriptOpts: {
+      check: false,
+    },
+    umd: {
+      name: '<%= name %>',
+      minFile: false,
+    },
+  },
+<% } -%>
+];

lib/generators/plugin/templates/example/.umirc.ts

@@ -0,0 +1,8 @@
+import { join } from 'path';
+import { IConfig } from 'umi-types';
+
+export default {
+  plugins: [
+    join(__dirname, '..', require('../package').main || 'index.js'),
+  ],
+} as IConfig;

lib/generators/plugin/templates/example/global.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.less';

lib/generators/plugin/templates/example/pages/index.tsx

@@ -0,0 +1,9 @@
+import styles from './index.css';
+
+export default function() {
+  return (
+    <div className={styles.normal}>
+      <h1>Page index</h1>
+    </div>
+  );
+}

lib/generators/plugin/templates/package.json

@@ -8,8 +8,10 @@
   },
   "repository": "<%= org %>/<%= name %>",
   "peerDependencies": {
-    "antd": "4.x",
-    "umi": "2.x || ^2.9.0-0"
+  <% if (withUmiUI) { -%>
+  "antd": "4.x",
+  <% } -%>
+  "umi": "2.x || ^2.9.0-0"
   },
   "main":  "lib/index.js",
   "scripts": {
@@ -19,17 +21,18 @@
   },
   "devDependencies": {
     "father-build":  "^1.8.0",
-    "np": "^5.0.3",
+  <% if (withUmiUI) { -%>
+  "antd": "^4.0.0-alpha.0",
+  <% } -%>
+  "np": "^5.0.3",
     "umi": "^2.9.0",
-    "umi-types": "^0.3.17"
+    "umi-types": "^0.4.0-beta.4"
   },
-<% if (true) { %>
   "files": [
     "dist",
     "lib",
     "src",
     "ui"
   ],
-<% } %>
   "license": "MIT"
 }

lib/generators/plugin/templates/src/index.ts

@@ -0,0 +1,23 @@
+// ref:
+// - https://umijs.org/plugin/develop.html
+import { IApi } from 'umi-types';
+
+export default function (api: IApi, options) {
+
+  // Example: output the webpack config
+  api.chainWebpackConfig(config => {
+    console.log(config.toString());
+  });
+
+<% if (withUmiUI) { -%>
+  api.addUIPlugin(require.resolve('../dist/index.umd'));
+
+  api.onUISocket(({ action, failure, success }) => {
+    if (action.type === 'org.<%= author %>.<%= name %>.test') {
+      success({
+        data: '<%= name %>.test',
+      });
+    }
+  });
+<% } %>
+}

lib/generators/plugin/templates/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "sourceMap": true,
+    "baseUrl": ".",
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "experimentalDecorators": true,
+    "declaration": false
+  }
+}

lib/generators/plugin/templates/ui/index.tsx

@@ -0,0 +1,29 @@
+import { Button } from 'antd';
+import { IUiApi } from 'umi-types'
+
+export default (api: IUiApi) => {
+  const { callRemote } = api;
+
+  function PluginPanel() {
+    return (
+      <div style={{ padding: 20 }}>
+        <Button
+          type="primary"
+          onClick={async () => {
+            const { data } = await callRemote({
+              type: 'org.<%= author %>.<%= name %>.test',
+            });
+            alert(data);
+          }}
+        >Test</Button>
+      </div>
+    );
+  }
+
+  api.addPanel({
+    title: '<%= name %>',
+    path: '/<%= name %>',
+    icon: 'home',
+    component: PluginPanel,
+  });
+}