增加 .d.ts 类型说明以支持 ts；优化 Y 坐标取值唯一性，列表元素为：_ka + key，非列表元素为 有 key 用 _ka，无…

… key 用 key；babel 插件 development 模式下选用 _ka 属性确定唯一值，production 模式下尽量选用 key 作为为一值；KeepAlive 可传递 id 属性以区分同父节点下的多份缓存；KeepAlive 可由非 default 部分导出；优化部分代码；更新 README

.npmignore

@@ -1,3 +1,4 @@
+docs
 node_modules
 src
 .babelrc

README.md

@@ -159,6 +159,32 @@ function App() {
 
 - - -
 
+## Multiple Cache
+
+Under the same parent node, `<KeepAlive>` in the same location will use the same cache by default.
+
+For example, with the following parameter routing scenario, the `/item` route will be rendered differently by `id`, but only the same cache can be kept.
+
+```javascript
+<Route path="/item/:id" render={props => (
+  <KeepAlive>
+    <Item {...props} />
+  </KeepAlive>
+)} />
+```
+
+Similar scenarios, you can use the `id` attribute of `<KeepAlive>` to implement multiple caches according to specific conditions.
+
+```javascript
+<Route path="/item/:id" render={props => (
+  <KeepAlive id={props.match.params.id}>
+    <Item {...props} />
+  </KeepAlive>
+)} />
+```
+
+- - -
+
 ## Cache Control
 
 ### Automatic control cache
@@ -410,3 +436,4 @@ Since `<Keeper />` will not be uninstalled, caching can be implemented.
 ## More complicated example
 
 - [Closable tabs with `react-router`](https://codesandbox.io/s/keguanbideyifangwenluyou-tab-shilikeanluyoucanshufenduofenhuancun-ewycx)
+- [Using Animation with `react-router`](https://codesandbox.io/s/using-animation-y35hh)

README_CN.md

@@ -159,6 +159,32 @@ function App() {
 
 - - -
 
+## 多份缓存
+
+同一个父节点下，相同位置的 `<KeepAlive>` 默认会使用同一份缓存
+
+例如下述的带参数路由场景，`/item` 路由会按 `id` 来做不同呈现，但只能保留同一份缓存
+
+```javascript
+<Route path="/item/:id" render={props => (
+  <KeepAlive>
+    <Item {...props} />
+  </KeepAlive>
+)} />
+```
+
+类似场景，可以使用 `<KeepAlive>` 的 `id` 属性，来实现按特定条件分成多份缓存
+
+```javascript
+<Route path="/item/:id" render={props => (
+  <KeepAlive id={props.match.params.id}>
+    <Item {...props} />
+  </KeepAlive>
+)} />
+```
+
+- - -
+
 ## 缓存控制
 
 ### 自动控制缓存
@@ -408,4 +434,5 @@ class App extends Component {
 
 ## 更多复杂示例
 
-- [可关闭的路由 tabs 示例](https://codesandbox.io/s/keguanbideyifangwenluyou-tab-shilikeanluyoucanshufenduofenhuancun-ewycx)
+- [可关闭的路由 tabs 示例](https://codesandbox.io/s/keguanbideyifangwenluyou-tab-shilikeanluyoucanshufenduofenhuancun-ewycx)
+- [使用路由转场动画](https://codesandbox.io/s/using-animation-y35hh)

babel.config.js

@@ -10,6 +10,6 @@ module.exports = {
   ],
   plugins: [
     '@babel/plugin-proposal-class-properties',
-    './src/babel/helpers'
+    './src/babel'
   ]
 }

babel.js

@@ -1,3 +1,3 @@
 'use strict'
 
-module.exports = require('./lib/babel/helpers.js');
+module.exports = require('./lib/babel/index.js');

index.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import * as React from 'react'
+
+export declare class KeepAlive extends React.Component<{
+  children: ReactNode | ReactNodeArray,
+  name?: string,
+  id?: string,  
+  when?: boolean | Array<boolean> | (() => boolean | Array<boolean>)
+}> {}
+export default KeepAlive
+
+export declare class AliveScope extends React.Component<{
+  children: ReactNode | ReactNodeArray,
+}> {}
+
+export function withActivation(Component: React.ComponentClass): React.ComponentClass
+export function withAliveScope(Component: React.ComponentClass): React.ComponentClass
+
+export function fixContext(Context: React.Context): void
+export function createContext<T>(
+  defaultValue: T,
+  calculateChangedBits?: (prev: T, next: T) => number
+): Context<T>
+
+
+type HookLifecycleEffectCallback = () => void
+export function useActivate(effect: HookLifecycleEffectCallback): void
+export function useUnactivate(effect: HookLifecycleEffectCallback): void
+
+interface CachingNode {
+  createTime: number,
+  updateTime: number,
+  name?: string,
+  id: string
+}
+interface AliveController {
+  drop: (name: string | RegExp) => Promise<boolean>, 
+  dropScope: (name: string | RegExp) => Promise<boolean>, 
+  clear: () => Promise<boolean>, 
+  getCachingNodes: () => Array<CachingNode>
+}
+export function useAliveController(): AliveController

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-activation",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "<KeepAlive /> for React like <keep-alive /> in vue",
   "main": "index.js",
   "scripts": {
@@ -26,7 +26,8 @@
   },
   "dependencies": {
     "create-react-context": "^0.3.0",
-    "hoist-non-react-statics": "^3.3.0"
+    "hoist-non-react-statics": "^3.3.0",
+    "jsx-ast-utils": "^2.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
@@ -35,6 +36,7 @@
     "@babel/preset-react": "^7.0.0",
     "rollup": "^1.11.3",
     "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^4.2.3",
     "rollup-plugin-uglify": "^6.0.2"
   }

rollup.config.js

@@ -1,4 +1,5 @@
 import resolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs'
 import babel from 'rollup-plugin-babel'
 import { uglify } from 'rollup-plugin-uglify'
 
@@ -36,14 +37,27 @@ export default [
     ]
   },
   {
-    input: 'src/babel/helpers.js',
+    input: 'src/babel/index.js',
     output: {
-      file: 'lib/babel/helpers.js',
+      file: 'lib/babel/index.js',
       format: 'cjs'
     },
+    external: ['jsx-ast-utils'],
     plugins: [
       resolve(),
+      commonjs(),
       babel({
+        babelrc: false,
+        presets: [
+          [
+            '@babel/env',
+            {
+              targets: {
+                node: true
+              }
+            }
+          ]
+        ],
         exclude: 'node_modules/**'
       })
     ]