umi example with strongly typed dva[WIP]

with-dva-ts/.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

with-dva-ts/.env

@@ -0,0 +1,2 @@
+BROWSER=none
+ESLINT=1

with-dva-ts/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "eslint-config-umi"
+}

with-dva-ts/.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+.umi
+.umi-production

with-dva-ts/.prettierignore

@@ -0,0 +1,7 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production

with-dva-ts/.prettierrc

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

with-dva-ts/.umirc.ts

@@ -0,0 +1,28 @@
+import { IConfig } from 'umi-types';
+
+// ref: https://umijs.org/config/
+const config: IConfig =  {
+  treeShaking: true,
+  plugins: [
+    // ref: https://umijs.org/plugin/umi-plugin-react.html
+    ['umi-plugin-react', {
+      antd: true,
+      dva: true,
+      dynamicImport: false,
+      title: 'with-dva-ts',
+      dll: false,
+
+      routes: {
+        exclude: [
+          /models\//,
+          /services\//,
+          /model\.(t|j)sx?$/,
+          /service\.(t|j)sx?$/,
+          /components\//,
+        ],
+      },
+    }],
+  ],
+}
+
+export default config;

with-dva-ts/README.md

@@ -0,0 +1,11 @@
+# umi example with strongly typed dva
+
+## Getting Started
+
+Install dependencies,
+
+```shell
+yarn
+```
+
+

with-dva-ts/package.json

@@ -0,0 +1,53 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build",
+    "test": "umi test",
+    "lint:es": "eslint --ext .js src mock tests",
+    "lint:ts": "tslint \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "precommit": "lint-staged"
+  },
+  "dependencies": {
+    "antd": "^3.19.5",
+    "dva": "^2.6.0-beta.6",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "typescript-fsa": "^3.0.0-beta-2"
+  },
+  "devDependencies": {
+    "@types/jest": "^23.3.12",
+    "@types/react": "^16.7.18",
+    "@types/react-dom": "^16.0.11",
+    "@types/react-test-renderer": "^16.0.3",
+    "babel-eslint": "^9.0.0",
+    "eslint": "^5.4.0",
+    "eslint-config-umi": "^1.4.0",
+    "eslint-plugin-flowtype": "^2.50.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.11.1",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.2.2",
+    "react-test-renderer": "^16.7.0",
+    "tslint": "^5.12.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-react": "^3.6.0",
+    "umi": "^2.7.0",
+    "umi-plugin-react": "^1.8.0",
+    "umi-types": "^0.2.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "tslint --fix",
+      "git add"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}

with-dva-ts/src/app.ts

@@ -0,0 +1,10 @@
+
+export const dva = {
+  config: {
+    onError(err: ErrorEvent) {
+      err.preventDefault();
+      console.error(err.message); // tslint:disable-line no-console
+    },
+    namespacePrefixWarning: false,
+  },
+};

with-dva-ts/src/global.css

@@ -0,0 +1,8 @@
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}

with-dva-ts/src/layouts/__tests__/index.test.tsx

@@ -0,0 +1,16 @@
+import 'jest';
+import BasicLayout from '..';
+import React from 'react';
+import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
+
+describe('Layout: BasicLayout', () => {
+  it('Render correctly', () => {
+    const wrapper: ReactTestRenderer = renderer.create(<BasicLayout />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0] as ReactTestInstance;
+    expect(outerLayer.type).toBe('div');
+    const title = outerLayer.children[0] as ReactTestInstance;
+    expect(title.type).toBe('h1');
+    expect(title.children[0]).toBe('Yay! Welcome to umi!');
+  });
+});

with-dva-ts/src/layouts/index.css

@@ -0,0 +1,15 @@
+
+.normal {
+  font-family: Georgia, sans-serif;
+  text-align: center;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: normal;
+  letter-spacing: -1px;
+  background: darkslateblue;
+  padding: .6em 0;
+  color: white;
+  margin: 0;
+}

with-dva-ts/src/layouts/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './index.css';
+
+const BasicLayout: React.FC = props => {
+  return (
+    <div className={styles.normal}>
+      <h1 className={styles.title}>Yay! Welcome to umi!</h1>
+      {props.children}
+    </div>
+  );
+};
+
+export default BasicLayout;

with-dva-ts/src/models/test.model.ts

@@ -0,0 +1,77 @@
+import { createActionCreatorFactory, Model, Saga, EffectsCommandMap, /* DefaultSaga */ } from 'dva';
+/* tslint:disable no-console */
+// import factory from 'typescript-fsa';
+
+const _ = createActionCreatorFactory('testMe');
+
+// NOTE: you have to guarantee object key is the same with actionType
+export const effectAction = {
+   fetch: _<{ id: string }>('fetch'),
+   query: _('query'),
+   queryDebounced: _('queryDebounced'),
+   pollSth: _.poll<{ key: string | number }>('pollSth'),
+};
+
+// NOTE: you have to guarantee object key is the same with actionType
+export const reducerAction = {
+  append: _<{ countNew: number, id: string }>('append'),
+};
+
+// NOTE: you have to guarantee object key is the same with actionType
+export const notBoundAction = {
+  sayHi: _<{ hiFrom: string }>('sayHi'),
+};
+
+type ModelState = {
+  seq: Array<{ id: string, count: number }>;
+};
+
+const model:Model<ModelState, typeof effectAction, typeof reducerAction> = {
+  state: {
+    seq: [],
+  },
+  namespace: _.namespace,
+  reducers: {
+    append(state, { id, countNew }) {
+      return {
+        ...state,
+        seq: state.seq.concat({ id, count: countNew }),
+      };
+    },
+  },
+
+  effects: {
+    *fetch({ id }, { delay }) {
+      console.log(`fetch effect action id: ${id}`);
+      yield delay(1000);
+      console.log('fetch effect executed');
+    },
+
+    query: [function* ({  }, { delay }) {
+      yield delay(2000);
+      console.log('query effect executed');
+    }, { type: 'takeLatest' }],
+
+    queryDebounced: [function* ({  }, { delay }) {
+      yield delay(2000);
+      console.log('queryDebounced executed');
+    }, { type: 'debounce', ms: 300 }],
+
+    pollSth: [function * ({ key }, { put }) {
+      console.log(`pollSth key: ${key}`);
+      yield put(reducerAction.append({ id: 'haha', countNew: 1 }));
+    }, { type: 'poll', delay: 5000 }],
+  },
+  watchers: {
+    *sayHiWatcher({ delay, take }) {
+      while (true) {
+        const action:ReturnType<typeof notBoundAction.sayHi> = yield take(notBoundAction.sayHi);
+        const { hiFrom } = action;
+        yield delay(1000);
+        console.log(`someWatcher executed, hiFrom: ${hiFrom}`);
+      }
+    },
+  },
+};
+
+export default model;

with-dva-ts/src/pages/__tests__/index.test.tsx

@@ -0,0 +1,16 @@
+import 'jest';
+import Index from '..';
+import React from 'react';
+import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
+
+
+describe('Page: index', () => {
+  it('Render correctly', () => {
+    const wrapper: ReactTestRenderer = renderer.create(<Index />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0] as ReactTestInstance;
+    expect(outerLayer.type).toBe('div');
+    expect(outerLayer.children.length).toBe(2);
+
+  });
+});

with-dva-ts/src/pages/index.css

@@ -0,0 +1,23 @@
+
+.normal {
+  font-family: Georgia, sans-serif;
+  margin-top: 4em;
+  text-align: center;
+}
+
+.welcome {
+  height: 328px;
+  background: url(../assets/yay.jpg) no-repeat center 0;
+  background-size: 388px 328px;
+}
+
+.list {
+  font-size: 1.2em;
+  margin-top: 1.8em;
+  list-style: none;
+  line-height: 1.5em;
+}
+
+.list code {
+  background: #f7f7f7;
+}