feat(useenv): 增加useEnv, 初始化首页demo样式

.dumi/theme/builtins/index.less

@@ -1,3 +1,7 @@
 .__dumi_taro-hook-hidden {
   display: none;
 }
+
+.__dumi-default-mobile-demo-layout {
+  font-size: 0.36rem;
+}

.fatherrc.ts

@@ -1,4 +1,14 @@
 export default {
-  esm: 'rollup',
-  cjs: 'rollup',
+  esm: {
+    type: 'babel',
+  },
+  cjs: {
+    type: 'babel',
+    lazy: true,
+  },
+  umd: {
+    globals: 'taro-hooks',
+    name: 'taro-hooks',
+    miniFile: true,
+  },
 };

.umirc.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'dumi';
 
+const specialItem = ['list-item', 'countdown-item'];
 export default defineConfig({
   title: 'Taro-hooks',
   favicon: '/image/hook.png',
@@ -11,6 +12,7 @@ export default defineConfig({
   },
   alias: {
     '@tarojs/components$': '@tarojs/components/dist-h5/react',
+    '@pages': __dirname + '/app/src/pages',
   },
   extraPostCSSPlugins: [
     require('postcss-pxtorem')({
@@ -24,6 +26,38 @@ export default defineConfig({
       minPixelValue: 0,
     }),
   ],
+  extraBabelPlugins: [
+    [
+      'import',
+      {
+        libraryName: 'taro-hooks',
+        camel2DashComponentName: false,
+        libraryDirectory: 'src',
+      },
+      'taro-hooks',
+    ],
+    [
+      'import',
+      {
+        libraryName: 'taro-ui',
+        customName: (name) => {
+          name = name.replace('at-', '');
+          if (specialItem.includes(name)) {
+            name = name.replace('-', '/');
+          }
+          return 'taro-ui/lib/components/' + name;
+        },
+        customStyleName: (name) => {
+          name = name.replace('at-', '');
+          if (specialItem.includes(name)) {
+            name = name.split('-')[0];
+          }
+          return 'taro-ui/dist/style/components/' + name + '.scss';
+        },
+      },
+      'taro-ui',
+    ],
+  ],
   dynamicImport: {},
   exportStatic: {},
   navs: [

app/src/app.config.ts

@@ -1,9 +1,9 @@
 export default {
-  pages: ['pages/index/index'],
+  pages: ['pages/index/index', 'pages/useEnv/index'],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
+    navigationBarTitleText: 'taro-hooks',
     navigationBarTextStyle: 'black',
   },
 };

app/src/pages/index/index.tsx

@@ -1,35 +1,48 @@
-import React, { Component } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, Text } from '@tarojs/components';
-import Taro from '@tarojs/taro';
-import { AtButton } from 'taro-ui';
-import 'taro-ui/dist/style/components/button.scss'; // 按需引入
-import './index.less';
+import { AtList, AtListItem } from 'taro-ui';
+
+import Taro, { ENV_TYPE } from '@tarojs/taro';
+import { useEnv } from 'taro-hooks';
 
-export default class Index extends Component {
-  componentWillMount() {}
+import 'taro-ui/dist/style/components/icon.scss';
+import './index.less';
 
-  componentDidMount() {}
+import { webPages, weappPages } from '../../route';
 
-  componentWillUnmount() {}
+const Index = () => {
+  const env = useEnv();
 
-  componentDidShow() {}
+  const pages = useMemo(() => {
+    return env === ENV_TYPE.WEB ? webPages : weappPages;
+  }, [env]);
 
-  componentDidHide() {}
+  const handleLocation = useCallback(
+    (route) => {
+      if (env === ENV_TYPE.WEAPP) {
+        Taro.navigateTo({
+          url: route,
+        });
+      } else {
+        window.parent.location = route;
+      }
+    },
+    [env],
+  );
+  return (
+    <AtList>
+      {pages.map((config) => {
+        const [name, route] = Object.entries(config)[0];
+        return (
+          <AtListItem
+            key={name}
+            title={name}
+            onClick={() => handleLocation(route)}
+          />
+        );
+      })}
+    </AtList>
+  );
+};
 
-  render() {
-    return (
-      <View className="index">
-        <Text>Hello world!</Text>
-        <AtButton type="primary">I need Taro UI</AtButton>
-        <Text>Taro UI 支持 Vue 了吗？</Text>
-        <AtButton type="primary" circle>
-          支持
-        </AtButton>
-        <Text>共建？</Text>
-        <AtButton type="secondary" circle>
-          来
-        </AtButton>
-      </View>
-    );
-  }
-}
+export default Index;

app/src/pages/useEnv/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useEnv',
+};

app/src/pages/useEnv/index.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback } from 'react';
+import { AtRadio, AtMessage } from 'taro-ui';
+
+import { useEnv } from 'taro-hooks';
+import Taro, { ENV_TYPE } from '@tarojs/taro';
+
+import 'taro-ui/dist/style/components/icon.scss';
+
+const radioOptions = (env: ENV_TYPE) =>
+  Object.entries(ENV_TYPE).map(([label, value]) => ({
+    label,
+    value,
+    desc: `环境: ${label}`,
+    disabled: value !== env,
+  }));
+
+export default () => {
+  const env = useEnv();
+
+  const handleRadioClick = useCallback(() => {
+    Taro.atMessage({
+      message: '当前环境类型: ' + env,
+      type: 'info',
+    });
+  }, [env]);
+
+  return (
+    <>
+      <AtMessage />
+      <AtRadio
+        options={radioOptions(env)}
+        value={env}
+        onClick={() => handleRadioClick()}
+      />
+    </>
+  );
+};

app/src/route/index.ts

@@ -0,0 +1,14 @@
+// 自动生成demos导航
+import appConfig from '../app.config';
+
+const BASEURL = '/~demos/pages-';
+const weappRoute = appConfig.pages.filter((v) => !v.includes('index/index'));
+const roureName = weappRoute.map((v) => v.split('/')[1].toLocaleLowerCase());
+const webPages = weappRoute.map((v, i) => ({
+  [roureName[i]]: BASEURL + v,
+}));
+const weappPages = weappRoute.map((v, i) => ({
+  [roureName[i]]: v,
+}));
+
+export { webPages, weappPages };

docs/quick/index.md

@@ -44,4 +44,4 @@ $ npm run dev:weapp --watch
 
 参考[taro build](https://taro-docs.jd.com/taro/docs/config)
 
-<code hidden="1" src="../../app/src/pages/index/index.tsx"/>
+<code hidden="1" src="@pages/index"/>

package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@umijs/plugin-sass": "^1.1.1",
     "@umijs/test": "^3.4.14",
+    "babel-plugin-import": "^1.13.3",
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.1.1",
     "cz-conventional-changelog": "^3.3.0",

packages/hooks/src/index.ts

@@ -0,0 +1,3 @@
+import useEnv from './useEnv';
+
+export { useEnv };

packages/hooks/src/useEnv/index.md

@@ -10,3 +10,13 @@ group:
 ---
 
 # useEnv
+
+获取当前环境值
+
+## 何时使用
+
+当需要获取当前环境值做一些判断时
+
+## 代码演示
+
+<code src="@pages/useEnv" />

packages/hooks/src/useEnv/index.ts

@@ -0,0 +1,7 @@
+import Taro from '@tarojs/taro';
+
+const useEnv = (): Taro.ENV_TYPE => {
+  return Taro.getEnv();
+};
+
+export default useEnv;

typings.d.ts

@@ -1,2 +1,4 @@
 declare module '*.css';
 declare module '*.less';
+
+declare module 'taro-hooks';