feat(example): 新增 taro example

.gitignore

@@ -15,4 +15,6 @@ lib/
 *-lock.json
 *.lock
 
-coverage/
+coverage/
+
+.temp

examples/taro-sample/.editorconfig

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

examples/taro-sample/.eslintrc

@@ -0,0 +1,15 @@
+{
+  "extends": ["taro"],
+  "rules": {
+    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }]
+  },
+    "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "useJSXTextNode": true,
+    "project": "./tsconfig.json"
+  }
+  }

examples/taro-sample/.npmignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+dist/
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# temp
+.temp/
+.rn_temp/
+deploy_versions/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/taro-sample/README.md

@@ -0,0 +1,33 @@
+
+# 在 Taro 中使用 Dxjs
+
+由于 Taro 环境与普通的 React 构建环境有些许差异，所以需要做一些简单的适配工作
+
+1. config 中设置 alias
+```javascript
+  // config/index.js
+  alias: {
+    "react": require.resolve("@tarojs/taro"),
+    "react-dom": require.resolve("@tarojs/taro"),
+  }
+```
+
+2. 由于 taro 默认的 babel 环境不兼容装饰器与生成函数同时使用，所以在 taro 环境中，model 中所有的生成器函数都被认为是 effect，坏处就是无法使用像 Label 等装饰器，如果有兼容方案，望告知
+```javascript
+  // config/index.js
+  class Model extends DxModel {
+
+    // 不支持
+    @Effect()
+    *asyncUpdate() {
+
+    }
+
+    // 支持
+    *asyncUpdate() {
+
+    }
+  }
+```
+
+

examples/taro-sample/config/dev.js

@@ -0,0 +1,8 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {},
+  mini: {},
+  h5: {}
+}

examples/taro-sample/config/index.js

@@ -0,0 +1,91 @@
+const config = {
+  projectName: 'taro-sample',
+  date: '2020-4-20',
+  designWidth: 750,
+  deviceRatio: {
+    '640': 2.34 / 2,
+    '750': 1,
+    '828': 1.81 / 2
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  babel: {
+    sourceMap: true,
+    presets: [
+      ['env', {
+        modules: false
+      }]
+    ],
+    plugins: [
+      'transform-decorators-legacy',
+      'transform-object-rest-spread',
+      ['transform-class-properties', {
+        spec: true
+      }],
+      ['transform-runtime', {
+        'helpers': false,
+        'polyfill': false,
+        'regenerator': true,
+        'moduleName': 'babel-runtime'
+      }]
+    ]
+  },
+  plugins: [],
+  defineConstants: {
+  },
+  mini: {
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {}
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 10240 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+          browsers: [
+            'last 3 versions',
+            'Android >= 4.1',
+            'ios >= 8'
+          ]
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  alias: {
+    "react": require.resolve("@tarojs/taro"),
+    "react-dom": require.resolve("@tarojs/taro"),
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}

examples/taro-sample/config/prod.js

@@ -0,0 +1,17 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {},
+  mini: {},
+  h5: {
+    /**
+     * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
+     * 参考代码如下：
+     * webpackChain (chain) {
+     *   chain.plugin('analyzer')
+     *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+     * }
+     */
+  }
+}

examples/taro-sample/global.d.ts

@@ -0,0 +1,18 @@
+declare module "*.png";
+declare module "*.gif";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.svg";
+declare module "*.css";
+declare module "*.less";
+declare module "*.scss";
+declare module "*.sass";
+declare module "*.styl";
+
+// @ts-ignore
+declare const process: {
+  env: {
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq';
+    [key: string]: any;
+  }
+}

examples/taro-sample/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "taro-sample1",
+  "version": "1.0.0",
+  "private": true,
+  "description": "dxjs example for taro",
+  "templateInfo": {
+    "name": "default",
+    "typescript": true,
+    "css": "sass"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:quickapp": "taro build --type quickapp",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@dxjs/common": "^1.0.2",
+    "@dxjs/core": "^1.0.2",
+    "@tarojs/components": "2.1.5",
+    "@tarojs/components-qa": "2.1.5",
+    "@tarojs/redux": "^2.1.5",
+    "@tarojs/redux-h5": "^2.1.5",
+    "@tarojs/router": "2.1.5",
+    "@tarojs/taro": "2.1.5",
+    "@tarojs/taro-alipay": "2.1.5",
+    "@tarojs/taro-h5": "2.1.5",
+    "@tarojs/taro-qq": "2.1.5",
+    "@tarojs/taro-quickapp": "2.1.5",
+    "@tarojs/taro-rn": "2.1.5",
+    "@tarojs/taro-swan": "2.1.5",
+    "@tarojs/taro-tt": "2.1.5",
+    "@tarojs/taro-weapp": "2.1.5",
+    "babel-runtime": "^6.26.0",
+    "nerv-devtools": "^1.5.5",
+    "nervjs": "^1.5.5",
+    "regenerator-runtime": "0.11.1"
+  },
+  "devDependencies": {
+    "@tarojs/mini-runner": "2.1.5",
+    "@tarojs/webpack-runner": "2.1.5",
+    "@types/react": "^16.4.6",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^2.13.0",
+    "@typescript-eslint/parser": "^2.13.0",
+    "babel-eslint": "^8.2.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.1",
+    "babylon": "7.0.0-beta.30",
+    "eslint": "^5.16.0",
+    "eslint-config-taro": "2.1.5",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "eslint-plugin-taro": "2.1.5",
+    "stylelint": "9.3.0",
+    "stylelint-config-taro-rn": "2.1.5",
+    "stylelint-taro-rn": "2.1.5",
+    "typescript": "^3.0.1"
+  }
+}

examples/taro-sample/project.config.json

@@ -0,0 +1,13 @@
+{
+  "miniprogramRoot": "./dist",
+  "projectname": "taro-sample1",
+  "description": "dxjs example for taro",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

examples/taro-sample/src/app.tsx

@@ -0,0 +1,52 @@
+import Taro, { Component, Config } from '@tarojs/taro'
+import Index from './pages/index'
+import { Provider } from '@tarojs/redux'
+import { Dx } from '@dxjs/core'
+import './app.scss'
+
+// 引入所有的 models
+import "./models/todolist.model";
+
+const store = Dx.createStore()
+
+class App extends Component {
+
+  componentDidMount () {}
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  componentDidCatchError () {}
+
+  /**
+   * 指定config的类型声明为: Taro.Config
+   *
+   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
+   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
+   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
+   */
+  config: Config = {
+    pages: [
+      'pages/index/index'
+    ],
+    window: {
+      backgroundTextStyle: 'light',
+      navigationBarBackgroundColor: '#fff',
+      navigationBarTitleText: 'WeChat',
+      navigationBarTextStyle: 'black'
+    }
+  }
+
+  // 在 App 类中的 render() 函数没有实际作用
+  // 请勿修改此函数
+  render () {
+    return (
+      <Provider store={store}>
+        <Index />
+      </Provider>
+    )
+  }
+}
+
+Taro.render(<App />, document.getElementById('app'))