Merge pull request #5 from Bert0324/feat-embedded-transition

Feat embedded transition
Bert0324 · Jan 22, 2021 · 3f465bc · 3f465bc
2 parents ced9b80 + d69d44a
commit 3f465bc
Show file tree

Hide file tree

Showing 13 changed files with 353 additions and 190 deletions.
diff --git a/README.md b/README.md
@@ -1,33 +1,48 @@
-# react-routers
+# React Routers
+
+<p align="center"><img src="./assets/icon.jpeg" alt="fre logo" width="130"></p>
+<h1 align="center">React Routers</h1>
+<p align="center">🌠A React Component for quick configuring route</p>
+<p align="center">
+<a href="https://github.com/Bert0324/react-routers/blob/main/LICENCE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Build Status"></a>
+<a href="https://www.npmjs.com/package/react-routers"><img src="https://badge.fury.io/js/react-routers.svg" alt="Code Coverage"></a>
+<a href="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"><img src="https://github.com/Bert0324/react-routers/pulls" alt="npm-v"></a>
+<a href="https://github.com/bert0324/react-routers"><img src="https://githubbadges.com/star.svg?user=bert0324&repo=react-routers&style=default" alt="npm-d"></a>
+<a href="https://github.com/bert0324/react-routers/fork"><img src="https://githubbadges.com/fork.svg?user=bert0324&repo=react-routers&style=default" alt="brotli"></a>
+</p>
+
+## ⭐ Features
+
+- Static Routes like [`react-router-config`](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config)
+- Route Guard and `keep-alive` like `Vue`
+- Auto Lazy Load
+- Simple Transition Animation
+- Change `document.title` with Configuration
+- Tiny Size, unpacked 13KB
+- Full Typescript Support
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Bert0324/react-routers/blob/main/LICENCE)
-[![npm version](https://badge.fury.io/js/react-routers.svg)](https://www.npmjs.com/package/react-routers)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Bert0324/react-routers/pulls)
-[![star this repo](https://githubbadges.com/star.svg?user=bert0324&repo=react-routers&style=default)](https://github.com/bert0324/react-routers)
-[![fork this repo](https://githubbadges.com/fork.svg?user=bert0324&repo=react-routers&style=default)](https://github.com/bert0324/react-routers/fork)
+## 🏠 Installation
 
-A React Component for quick configuring route.
+- `yarn add react-routers`
 
-## Features
+## 🎠 Example & Playground
 
-- Route Configuration like `react-router-config`
-- Route Guard and Keep Alive like `Vue`
-- Simple Lazy Load
-- Change `document.title` with Configuration
-- Tiny, zlib packed Only 1KB
-- Full Typescript Support
+An example and playground of `react-routers` in [HERE](https://stackblitz.com/edit/react-routers-demo).
 
-## Documents
+## 📑 API
+
+### Props of `Routers`
 
 ```ts
-export type IBeforeRoute = (from: string, to: string) => boolean | undefined | void | Promise<boolean | undefined | void>;
-export type IAfterRoute = (from: string, to: string) => void;
-
-/**
- * Router Configuration
- * the path in children will be jointed with the path in parent
- */
-export interface IPageRouter {
+import { Routers } from 'react-routers';
+```
+
+#### `routers`
+
+The Router configuration, the path in children will be jointed with the path in parent. Its type is as below:
+
+```ts
+interface IPageRouter {
     /**
      * route path
      */
@@ -62,111 +77,113 @@ export interface IPageRouter {
      * - its priority is higher than `keepAlive` in props
      */
     keepAlive?: boolean;
-}
-
-/**
- * `react-routers` props
- */
-export interface IRouterProps {
-    /**
-     * routers config
-     */
-    routers: IPageRouter[]; 
     /**
-     * A fallback react tree to show when a Suspense child (like React.lazy) suspends, and before entering the route
+     * transition animation
      */
-    fallback?: ComponentType<{ from: string; to: string }>;
-    /**
-     * redirect path
-     */
-    redirect?: string;
-    /**
-     * css style
-     */
-    style?: CSSProperties;
+    transition?: ITransition;
+}
+```
+
+#### `fallback`
+
+A fallback react tree to show when a Suspense child (like React.lazy) suspends, and before entering the route. It must be a React Component.
+
+#### `redirect`
+
+redirect path.
+
+#### `beforeEach`
+
+triggered before entering route
+
+- if return false, deny to enter route
+- ahead of any `beforeRoute`
+
+#### `afterEach`
+
+triggered after entering route
+
+- if return false, deny to enter route
+- after any `afterRoute`
+
+#### `keepAlive`
+
+do maintains component state and avoids repeated re-rendering for each route
+
+- default is `false`
+
+#### `switchRoute`
+
+Do select only one route like `<Switch>`
+
+- default is `true`
+
+#### `transition`
+
+transition animation. Its type is as below:
+
+```ts
+type ITransition = {
     /**
-     * triggered before entering route
-     * - if return false, deny to enter route
-     * - ahead of any `beforeRoute`
+     * the css style after matched
      */
-    beforeEach?: IBeforeRoute;
+    match: CSSProperties;
     /**
-     * triggered after entering route
-     * - if return false, deny to enter route
-     * - after any `afterRoute`
+     * the css style after unmatched
      */
-    afterEach?: IAfterRoute;
+    notMatch: CSSProperties;
     /**
-     * do maintains component state and avoids repeated re-rendering for each route
-     * - default is `false`
+     * the css style of transition
      */
-    keepAlive?: boolean;
+    trans: CSSProperties;
     /**
-     * switch
-     *  - default is `true`
+     * keep component after unmatched
+     * - default is `500`ms
      */
-    switchRoute?: boolean;
-}
+    delay?: number;
+};
 ```
 
-## Demo
+or directly use embedded animation objects.
 
-Install `react-routers`:
+### Hooks
 
-- `yarn add react-routers`
+#### `useActive`
 
-```tsx
-import { FC } from 'react';
-import { Link, BrowserRouter } from 'react-router-dom';
-import { Routers } from 'react-routers';
-import { Skeleton } from 'antd';
-
-const asyncTask = () => new Promise<void>(resolve => setTimeout(() => resolve(), 1000));
-
-export const IRouters: FC = () => { 
-    return (
-        <BrowserRouter basename='/test'>
-            <Routers 
-                routers={[
-                    {
-                        path: '/page1',  // test/page1
-                        name: 'page1',
-                        Component: async () => (await import('./PageComponent')).PageComponent,
-                        afterRoute: (from, to) => {
-                            console.log(from ,to);
-                        }
-                    },
-                    {
-                        path: '/page2',  // test/page2
-                        name: 'page2',
-                        Component: () => () => <Link to='/page2/page3'>page2</Link>,
-                        beforeRoute: (from, to) => {
-                            console.log(from ,to);
-                            return false;
-                        },
-                        children: [
-                            {
-                                path: '/:page',     // test/page2/:page
-                                name: 'page3',
-                                Component: async () => () => <>page3</>,
-                            }
-                        ]
-                    }
-                ]}
-                beforeEach={async (from, to) => {
-                    await asyncTask();
-                    console.log('beforeEach', from, to);
-                }}
-                redirect='/page1'
-                fallback={() => <Skeleton active />}
-            />
-        </BrowserRouter>
-    );
-};
+The hook triggered when the route match the component's route in configuration.
+
+```ts
+import { useActive } from 'react-routers';
+
+useActive(() => {
+    /* Called when the component is activated. */
+    return () => {
+         /* Called when the component is deactivated. */
+    }
+});
+```
+
+#### `useParams`
+
+A wrapped function of [`useParams`](https://reactrouter.com/web/api/Hooks/useroutematch). Notice, if you use `useParams` of `react-router` in a `react-routers` controlled component, you can't get correct match, as `react-router` don't the configuration configured in `react-routers`.
+
+```ts
+import { useParams } from 'react-routers';
+
+// /blog/:slug
+const { slug } = useParams<{ slug?:string }>(); 
 ```
 
-## Development
+### Embedded Animation
+
+The objects which can be put in `transition`, includes `LeftFade`, `RightFade`, `TopFade`, `BottomFade`, `LeftSlide`, `RightSlide`, `TopSlide`, `BottomSlide`.
+
+## 💻 Development
 
 - `yarn`
 - `preview=true yarn dev`
 - `yarn build`
+
+## 🍧 License
+
+React Routers is [MIT licensed](https://github.com/Bert0324/react-routers/blob/main/LICENCE).
diff --git a/assets/icon.jpeg b/assets/icon.jpeg
diff --git a/index.d.ts b/index.d.ts
@@ -9,6 +9,9 @@ interface IConfig {
     path: string;
     switchRoute: boolean;
     transition?: ITransition;
+    delay: number;
+    haveBeforeEach: boolean;
+    ready: boolean;
 }
 
 export interface IRefObj {
@@ -20,10 +23,14 @@ export interface IRefObj {
         [path: string]: IConfig;
     };
     actives: {
-        [path: string]: (() => void)[];
+        [path: string]: {
+            [id: string]: ActiveHook
+        };
     };
     deactives: {
-        [path: string]: (() => void)[];
+        [path: string]: {
+            [id: string]: ActiveHook;
+        }
     };
     matched: boolean[];
 }
@@ -34,7 +41,14 @@ export type ITransition = {
     match: CSSProperties;
     notMatch: CSSProperties;
     trans: CSSProperties;
+    /**
+     * 
+     * - default is `500`ms
+     */
+    delay?: number;
 };
+export type EffectHook = () => void;
+export type ActiveHook = () => EffectHook | void | undefined;
 
 /**
  * Router Configuration
@@ -129,7 +143,7 @@ export interface IRouterProps {
     transition?: ITransition;
     /**
      * loading delay
-     * - default is `500`ms
+     * - default is `100`ms
      */
     delay?: number;
 }
@@ -143,11 +157,7 @@ declare module 'react-routers' {
     /**
      * triggered when first entering route and every time active it
      */
-    const useActive: (effect: () => void) => void;
-    /**
-     * triggered every time unmount route
-     */
-    const useDeActive: (effect: () => void) => void;
+    const useActive: (effect: ActiveHook) => void;
     /**
      * `useParams` like <https://reactrouter.com/core/api/Hooks/useparams>
      */
@@ -156,10 +166,26 @@ declare module 'react-routers' {
      * get current configuration
      */
     const useRefContext: () => IRefObj | null;
-    export { Routers, useActive, useDeActive, useParams, useRefContext };
+    const LeftFade: ITransition;
+    const RightFade: ITransition;
+    const TopFade: ITransition;
+    const BottomFade: ITransition;
+    const LeftSlide: ITransition;
+    const RightSlide: ITransition;
+    const TopSlide: ITransition;
+    const BottomSlide: ITransition;
+    export { 
+        Routers, 
+        useActive, 
+        useParams, 
+        useRefContext,
+        LeftFade,
+        RightFade,
+        TopFade,
+        BottomFade,
+        LeftSlide,
+        RightSlide,
+        TopSlide,
+        BottomSlide
+    };
 }
-
-declare module '*.module.less' {
-    const styles: { readonly [key: string]: string };
-    export default styles;
-}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-routers",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "router component",
   "author": "yuchen.huang <'yuchenhuang0324@gmail.com'>",
   "main": "dist/main.min.js",
@@ -75,6 +75,7 @@
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-routers": "^2.0.2",
     "style-loader": "^2.0.0",
     "thread-loader": "^3.0.1",
     "ts-loader": "^8.0.12",