feat: create plugin Upgrade to Umi 3 (#107)

create plugin Upgrade to Umi 3 (#107)

lib/generators/plugin/index.js

@@ -26,9 +26,19 @@ class Generator extends BasicGenerator {
       },
       {
         name: 'isTypeScript',
-        type: 'confirm',
-        message: 'Do you want to use typescript?',
-        default: false,
+        type: 'list',
+        message: 'Select the development language',
+        choices: [
+          {
+            name: 'TypeScript',
+            value: true,
+          },
+          {
+            name: 'JavaScript',
+            value: false,
+          },
+        ],
+        default: true,
       },
       {
         name: 'withUmiUI',
@@ -44,19 +54,17 @@ class Generator extends BasicGenerator {
 
   // lang: ts || js
   isUIFiles(file, lang) {
-    const uiFile = lang === 'ts'
-      ? 'ui/index.tsx'
-      : 'ui/index.js';
+    const uiFile = lang === 'ts' ? 'ui/index.tsx' : 'ui/index.jsx';
     return file === uiFile;
   }
 
   writing() {
     this.writeFiles({
       context: this.prompts,
       filterFiles: f => {
-        const { isTypeScript, withUmiUI } = this.prompts;
+        const { isTypeScript = true, withUmiUI } = this.prompts;
         if (isTypeScript) {
-          if (f.endsWith('.js')) return false;
+          if (f.endsWith('.js') || f.endsWith('.jsx')) return false;
           // filter ui files
           if (!withUmiUI && this.isUIFiles(f, 'ts')) return false;
         } else {

lib/generators/plugin/templates/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

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

@@ -1,15 +1,35 @@
+<% if (withUmiUI) { -%>
+const isProd = process.env.NODE_ENV === 'prod';
 
-export default [
-  {
-    cjs: 'babel',
-  },
+<% } -%>
+export default [{
+  target: 'node',
+  cjs: { type: 'babel', lazy: true },
+  disableTypeCheck: true,
+  extraBabelPlugins: [
+    [
+      'babel-plugin-import',
+      { libraryName: 'antd', libraryDirectory: 'es', style: true },
+      'antd',
+    ],
+  ],
 <% if (withUmiUI) { -%>
-  {
-    entry: 'ui/index.js',
-    umd: {
-      name: '<%= name %>',
-      minFile: false,
+},
+{
+  entry: 'ui/index.tsx',
+  umd: {
+    name: 'tasks',
+    minFile: isProd,
+    sourcemap: !isProd,
+  },
+  extraExternals: ['antd', 'react', 'react-dom', 'xterm'],
+  typescriptOpts: {
+    check: false,
+    globals: {
+      antd: 'window.antd',
+      react: 'window.React',
+      'react-dom': 'window.ReactDOM',
     },
   },
 <% } -%>
-];
+}];

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

@@ -1,18 +1,35 @@
+<% if (withUmiUI) { -%>
+const isProd = process.env.NODE_ENV === 'prod';
 
-export default [
-  {
-    cjs: 'babel',
-  },
+<% } -%>
+export default [{
+  target: 'node',
+  cjs: { type: 'babel', lazy: true },
+  disableTypeCheck: true,
+  extraBabelPlugins: [
+    [
+      'babel-plugin-import',
+      { libraryName: 'antd', libraryDirectory: 'es', style: true },
+      'antd',
+    ],
+  ],
 <% if (withUmiUI) { -%>
-  {
-    entry: 'ui/index.tsx',
-    typescriptOpts: {
-      check: false,
-    },
-    umd: {
-      name: '<%= name %>',
-      minFile: false,
+},
+{
+  entry: 'ui/index.tsx',
+  umd: {
+    name: 'tasks',
+    minFile: isProd,
+    sourcemap: !isProd,
+  },
+  extraExternals: ['antd', 'react', 'react-dom', 'xterm'],
+  typescriptOpts: {
+    check: false,
+    globals: {
+      antd: 'window.antd',
+      react: 'window.React',
+      'react-dom': 'window.ReactDOM',
     },
   },
 <% } -%>
-];
+}];

lib/generators/plugin/templates/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+.changelog
+.umi
+.umi-test
+.umi-production
+.DS_Store
+/lib
+dist

lib/generators/plugin/templates/.prettierignore

@@ -0,0 +1,8 @@
+**/node_modules/**
+package.json
+
+# fixtures
+**/fixtures/**
+
+# templates
+**/templates/**

lib/generators/plugin/templates/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

lib/generators/plugin/templates/CONTRIBUTING.md

@@ -0,0 +1,40 @@
+# Contributing to plugin
+
+## Set up
+
+Install dev deps after git clone the repo.
+
+```bash
+# npm is not allowed.
+$ yarn
+```
+
+## Build
+
+Transform with babel and rollup.
+
+```bash
+$ yarn build
+
+# Build and monitor file changes
+$ yarn build --watch
+
+```
+
+## Dev Plugin
+
+```bash
+# This Step must only be executed in Build
+$ yarn dev
+```
+
+## Debug
+
+TODO
+
+## Test
+
+```bash
+$ yarn test
+```
+

lib/generators/plugin/templates/README.md

@@ -14,20 +14,11 @@ $ npm install
 <% if (withUmiUI) { -%>
 ## Development UI
 
-UI start:
-
-```bash
-$ npm run build --watch
-$ npm run start
-```
-
-<img src="https://user-images.githubusercontent.com/13595509/67025108-10925980-f138-11e9-8f46-899eef3e098b.png" width="768" />
-
 UI mini start:
 
 ```bash
 $ npm run build --watch
-$ npm run start:mini
+$ npm run start
 ```
 
 <img src="https://user-images.githubusercontent.com/13595509/67024897-bbeede80-f137-11e9-9f19-6a3f0ea3f6cd.png" width="768" />
@@ -46,7 +37,7 @@ Configure in `.umirc.js`,
 ```js
 export default {
   plugins: [
-    ['umi-plugin-<%= name %>', options],
+    ['<%= name %>'],
   ],
 }
 ```

lib/generators/plugin/templates/example/.gitignore

@@ -0,0 +1,5 @@
+/.umi
+/.umi-production
+/dist
+/node_modules
+/yarn.lock

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

@@ -1,10 +1,8 @@
-import { join } from 'path';
+import { defineConfig } from 'umi';
 
-export default {
-  routes: [
-    { path: '/', component: './index' },
-  ],
-  plugins: [
-    join(__dirname, '..', require('../package').main || 'index.js'),
-  ],
-}
+export default defineConfig({
+<% if (withUmiUI) { -%>
+  presets: [require.resolve('@umijs/preset-ui')],
+<% } -%>
+  plugins: [require.resolve('../lib')],
+});

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

@@ -1,11 +1,8 @@
-import { join } from 'path';
-import { IConfig } from 'umi-types';
+import { defineConfig } from 'umi';
 
-export default {
-  routes: [
-    { path: '/', component: './index' },
-  ],
-  plugins: [
-    join(__dirname, '..', require('../package').main || 'index.js'),
-  ],
-} as IConfig;
+export default defineConfig({
+<% if (withUmiUI) { -%>
+  presets: [require.resolve('@umijs/preset-ui')],
+<% } -%>
+  plugins: [require.resolve('../lib')],
+});

lib/generators/plugin/templates/example/app.jsx

@@ -0,0 +1,3 @@
+export function render(oldRender) {
+  oldRender();
+}

lib/generators/plugin/templates/example/app.tsx

@@ -0,0 +1,3 @@
+export function render(oldRender: Function) {
+  oldRender();
+}

lib/generators/plugin/templates/example/package.json

@@ -1 +1,3 @@
-{}
+{
+  "dependencies": {}
+}

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

@@ -1,4 +1,17 @@
+body,
+html,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+a {
+  color: #1890ff;
+  cursor: pointer;
+}
 
 .normal {
-  background: #79F2AA;
+  background: #ddd;
+  height: 100vh;
+  padding: 48px;
 }

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './index.css';
+
+export default () => (
+  <div className={styles.normal}>
+    Hello Umi!
+  </div>
+);

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

@@ -1,10 +1,8 @@
 import React from 'react';
 import styles from './index.css';
 
-export default function() {
-  return (
-    <div className={styles.normal}>
-      <h1>Page index</h1>
-    </div>
-  );
-}
+export default () => (
+  <div className={styles.normal}>
+    Hello Umi!
+  </div>
+);