solid-alive 0.0.7 → 0.0.9

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=require("solid-js/web"),o=require("solid-js/store"),t=require("solid-js"),l=t.createContext({elements:{},insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScrollTop:()=>{},setCurrentComponentId:()=>{}});let n,r=100;exports.AliveProvider=function(t){var[n,r]=o.createStore();let c=Symbol("close"),a=c,s=new Map,i=new Map;var d=e=>{let o=e.id,t=s.get(o),l=i.get(o);s.delete(o),i.delete(o),r([o],{...e,onActivated:t,onDeactivated:l})},v=e=>{if(Reflect.has(n,e)){var o=n[e]?.children;o?.forEach((o=>o!==e&&v(o))),r((o=>(o[e].onDeactivated?.(),o[e].component=null,o[e].dispose?.(),o[e].dispose=null,o[e].owner=null,o[e].onActivated=null,o[e].onDeactivated=null,o[e].scrollTop=0,o[e].id="",o[e].children=null,o[e]=null,delete o[e],{...o})))}},u=e=>{if(null==e)for(const e of Object.values(n))v(e.id);else v(e)},m=e=>{a=e},p=(e,o)=>{Reflect.has(n,e)&&r((t=>(t[e].scrollTop=o??0,t)))},T=e=>{a!==c&&s.set(a,e)},A=e=>{a!==c&&i.set(a,e)};return e.createComponent(l.Provider,{get value(){return{saveBodyScrollTop:t.saveBodyScrollTop,elements:n,closeSymbol:c,onActivated:T,onDeactivated:A,insertElement:d,saveScrollTop:p,removeAliveElement:u,setCurrentComponentId:m}},get children(){return t.children}})},exports.AliveTransfer=function(o,c,a){var{elements:s,saveBodyScrollTop:i,closeSymbol:d,insertElement:v,saveScrollTop:u,setCurrentComponentId:m}=t.useContext(l);Reflect.has(s,c)||(m(c),t.createRoot((l=>{v({id:c,dispose:l,component:e.createComponent(o,{}),onDeactivated:null,onActivated:null,owner:t.getOwner,scrollTop:0,children:Array.isArray(a)?a:null})})));var p=e=>{if(i)if("cacheScroll"===e){var o=document.documentElement.scrollTop||document.body.scrollTop||0;s[c]?.scrollTop!==o&&u(c,o)}else"scrollTo"===e&&(clearTimeout(n),n=setTimeout((()=>{var e;e=s[c]?.scrollTop,document.documentElement.scrollTop=document.body.scrollTop=e||0,r=0}),r))};return t.createEffect((()=>{s[c]?.onActivated?.(),p("scrollTo")})),t.onCleanup((()=>{m(d??""),s[c]?.onDeactivated?.(),p("cacheScroll")})),s[c]?.owner&&t.runWithOwner(s[c].owner,(()=>s[c]?.component))},exports.useAlive=function(){var{onActivated:e,onDeactivated:o,removeAliveElement:n}=t.useContext(l);return{onActivated:e,onDeactivated:o,removeAliveElement:n}};
+"use strict";var e=require("solid-js/web"),l=require("solid-js/store"),o=require("solid-js"),t=o.createContext({elements:{},closeSymbol:Symbol("close"),insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScroll:()=>{},setCurrentComponentId:()=>{},saveElScroll:()=>{},resetElScroll:()=>!0,removeScrollEl:()=>!0});var r={appear:"index-module_appear__MaHzX",_appear:"index-module__appear__7KeRW",toLeft:"index-module_toLeft__s1PDL",_toLeft:"index-module__toLeft__SD-Zp"};let n=0,i=0,a=null;exports.AliveProvider=function(o){var[r,n]=l.createStore();let i=Symbol("close"),a=i,s=new Map,c=new Map,v=new Map;var d=e=>{let l=e.id,o=s.get(l),t=c.get(l),r=v.get(l);s.delete(l),c.delete(l),v.delete(l),n([l],Object.assign(Object.assign({},e),{onActivated:o,onDeactivated:t,domList:r}))},u=e=>{var l;if(Reflect.has(r,e)){var o=null===(l=r[e])||void 0===l?void 0:l.children;null==o||o.forEach((l=>l!==e&&u(l))),n((l=>{var o,t,r,n;return null===(t=(o=l[e]).onDeactivated)||void 0===t||t.call(o),l[e].component=null,null===(n=(r=l[e]).dispose)||void 0===n||n.call(r),l[e].dispose=null,l[e].owner=null,l[e].onActivated=null,l[e].onDeactivated=null,l[e].scroll=null,l[e].id="",l[e].children=null,l[e].domList=null,l[e]=null,delete l[e],l}))}},m=e=>{if(null==e)for(const e of Object.values(r))u(e.id);else u(e)},f=e=>{a=e},p=(e,o)=>{Reflect.has(r,e)&&n(l.produce((l=>{l[e].scroll=Object.assign({},o)})))},E=e=>{a!==i&&s.set(a,e)},L=e=>{a!==i&&c.set(a,e)},S=(e,l)=>{var o,t;if(a!==i){var r=(null!==(o=v.get(a))&&void 0!==o?o:new Map([])).set(e,{top:0,left:0});v.set(a,r),null===(t=null==l?void 0:l())||void 0===t||t(e)}},h=e=>{var l;for(const o of Object.values(r))if(null===(l=o.domList)||void 0===l?void 0:l.has(e))return o.domList.delete(e),e.scrollTop=0,e.scrollLeft=0,!0;return!1},A=e=>{var l;for(const o of Object.values(r))if(null===(l=o.domList)||void 0===l?void 0:l.has(e))return o.domList.set(e,{top:0,left:0}),e.scrollTop=0,e.scrollLeft=0,!0;return!1};return e.createComponent(t.Provider,{get value(){return{scrollId:o.scrollId,behavior:o.behavior,transitionEnterName:o.transitionEnterName,elements:r,closeSymbol:i,onActivated:E,onDeactivated:L,insertElement:d,saveScroll:p,removeAliveElement:m,setCurrentComponentId:f,saveElScroll:S,resetElScroll:A,removeScrollEl:h}},get children(){return o.children}})},exports.AliveTransfer=function(l,s,c){var v,{behavior:d,elements:u,scrollId:m,closeSymbol:f,transitionEnterName:p,insertElement:E,saveScroll:L,setCurrentComponentId:S}=o.useContext(t);Reflect.has(u,s)||(S(s),o.createRoot((t=>{E({id:s,dispose:t,component:e.createComponent(l,{}),onDeactivated:null,onActivated:null,owner:o.getOwner,scroll:{top:0,left:0},children:Array.isArray(c)?c:null,domList:null})})));var h=e=>{var l;if(m&&a)if("cacheScroll"===e){var o="alwaysTop"===d?{top:0,left:0}:{top:a.scrollTop,left:a.scrollLeft};L(s,o)}else{var t=Date.now();if(t-n>200){const{top:e=0,left:o=0}=(null===(l=u[s])||void 0===l?void 0:l.scroll)||{};a.scrollTop=e,a.scrollLeft=o,n=t}}};if(p&&(null===(v=u[s])||void 0===v?void 0:v.owner)&&Date.now()-i>200){i=Date.now();let e=()=>{var e;return null===(e=u[s])||void 0===e?void 0:e.component},l=null==e?void 0:e();if("function"==typeof l&&(l=null==l?void 0:l()),l instanceof HTMLElement){var A=r[p]||p;l.classList.add(A);const e=()=>{l.classList.remove(A),l.removeEventListener("animationend",e)};l.addEventListener("animationend",e)}}return o.createEffect((()=>{var e,l,o;m&&!a&&(a=document.getElementById(m),!a&&console.error(`[solid-alive] scrollId: ${m} is null `)),null===(l=(e=u[s]).onActivated)||void 0===l||l.call(e),h("scrollTo"),null===(o=u[s].domList)||void 0===o||o.forEach(((e,l)=>{l.scrollTop=e.top,l.scrollLeft=e.left}))})),o.onCleanup((()=>{var e,l,o;S(f),null===(l=(e=u[s]).onDeactivated)||void 0===l||l.call(e),h("cacheScroll"),null===(o=u[s].domList)||void 0===o||o.forEach(((e,l,o)=>o.set(l,{top:l.scrollTop,left:l.scrollLeft})))})),o.runWithOwner(u[s].owner,(()=>u[s].component))},exports.useAlive=function(){var{onActivated:e,onDeactivated:l,removeAliveElement:r,saveElScroll:n,resetElScroll:i,removeScrollEl:a}=o.useContext(t);return{onActivated:e,onDeactivated:l,removeAliveElement:r,directiveSaveScroll:n,resetElScroll:i,removeScrollEl:a}};

package/dist/index.js

@@ -1 +1 @@
-import{createComponent as e}from"solid-js/web";import{createStore as o}from"solid-js/store";import{createContext as l,useContext as t,createRoot as n,getOwner as r,createEffect as c,onCleanup as a,runWithOwner as i}from"solid-js";var s=l({elements:{},insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScrollTop:()=>{},setCurrentComponentId:()=>{}});function d(l){var[t,n]=o();let r=Symbol("close"),c=r,a=new Map,i=new Map;var d=e=>{let o=e.id,l=a.get(o),t=i.get(o);a.delete(o),i.delete(o),n([o],{...e,onActivated:l,onDeactivated:t})},v=e=>{if(Reflect.has(t,e)){var o=t[e]?.children;o?.forEach((o=>o!==e&&v(o))),n((o=>(o[e].onDeactivated?.(),o[e].component=null,o[e].dispose?.(),o[e].dispose=null,o[e].owner=null,o[e].onActivated=null,o[e].onDeactivated=null,o[e].scrollTop=0,o[e].id="",o[e].children=null,o[e]=null,delete o[e],{...o})))}},m=e=>{if(null==e)for(const e of Object.values(t))v(e.id);else v(e)},u=e=>{c=e},p=(e,o)=>{Reflect.has(t,e)&&n((l=>(l[e].scrollTop=o??0,l)))},T=e=>{c!==r&&a.set(c,e)},f=e=>{c!==r&&i.set(c,e)};return e(s.Provider,{get value(){return{saveBodyScrollTop:l.saveBodyScrollTop,elements:t,closeSymbol:r,onActivated:T,onDeactivated:f,insertElement:d,saveScrollTop:p,removeAliveElement:m,setCurrentComponentId:u}},get children(){return l.children}})}let v,m=100;function u(o,l,d){var{elements:u,saveBodyScrollTop:p,closeSymbol:T,insertElement:f,saveScrollTop:A,setCurrentComponentId:h}=t(s);Reflect.has(u,l)||(h(l),n((t=>{f({id:l,dispose:t,component:e(o,{}),onDeactivated:null,onActivated:null,owner:r,scrollTop:0,children:Array.isArray(d)?d:null})})));var S=e=>{if(p)if("cacheScroll"===e){var o=document.documentElement.scrollTop||document.body.scrollTop||0;u[l]?.scrollTop!==o&&A(l,o)}else"scrollTo"===e&&(clearTimeout(v),v=setTimeout((()=>{var e;e=u[l]?.scrollTop,document.documentElement.scrollTop=document.body.scrollTop=e||0,m=0}),m))};return c((()=>{u[l]?.onActivated?.(),S("scrollTo")})),a((()=>{h(T??""),u[l]?.onDeactivated?.(),S("cacheScroll")})),u[l]?.owner&&i(u[l].owner,(()=>u[l]?.component))}function p(){var{onActivated:e,onDeactivated:o,removeAliveElement:l}=t(s);return{onActivated:e,onDeactivated:o,removeAliveElement:l}}export{d as AliveProvider,u as AliveTransfer,p as useAlive};
+import{createComponent as e}from"solid-js/web";import{createStore as l,produce as o}from"solid-js/store";import{createContext as t,useContext as n,createRoot as r,getOwner as i,createEffect as a,onCleanup as s,runWithOwner as c}from"solid-js";var d=t({elements:{},closeSymbol:Symbol("close"),insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScroll:()=>{},setCurrentComponentId:()=>{},saveElScroll:()=>{},resetElScroll:()=>!0,removeScrollEl:()=>!0});function v(t){var[n,r]=l();let i=Symbol("close"),a=i,s=new Map,c=new Map,v=new Map;var u=e=>{let l=e.id,o=s.get(l),t=c.get(l),n=v.get(l);s.delete(l),c.delete(l),v.delete(l),r([l],Object.assign(Object.assign({},e),{onActivated:o,onDeactivated:t,domList:n}))},m=e=>{var l;if(Reflect.has(n,e)){var o=null===(l=n[e])||void 0===l?void 0:l.children;null==o||o.forEach((l=>l!==e&&m(l))),r((l=>{var o,t,n,r;return null===(t=(o=l[e]).onDeactivated)||void 0===t||t.call(o),l[e].component=null,null===(r=(n=l[e]).dispose)||void 0===r||r.call(n),l[e].dispose=null,l[e].owner=null,l[e].onActivated=null,l[e].onDeactivated=null,l[e].scroll=null,l[e].id="",l[e].children=null,l[e].domList=null,l[e]=null,delete l[e],l}))}},f=e=>{if(null==e)for(const e of Object.values(n))m(e.id);else m(e)},p=e=>{a=e},E=(e,l)=>{Reflect.has(n,e)&&r(o((o=>{o[e].scroll=Object.assign({},l)})))},L=e=>{a!==i&&s.set(a,e)},S=e=>{a!==i&&c.set(a,e)},h=(e,l)=>{var o,t;if(a!==i){var n=(null!==(o=v.get(a))&&void 0!==o?o:new Map([])).set(e,{top:0,left:0});v.set(a,n),null===(t=null==l?void 0:l())||void 0===t||t(e)}},_=e=>{var l;for(const o of Object.values(n))if(null===(l=o.domList)||void 0===l?void 0:l.has(e))return o.domList.delete(e),e.scrollTop=0,e.scrollLeft=0,!0;return!1},b=e=>{var l;for(const o of Object.values(n))if(null===(l=o.domList)||void 0===l?void 0:l.has(e))return o.domList.set(e,{top:0,left:0}),e.scrollTop=0,e.scrollLeft=0,!0;return!1};return e(d.Provider,{get value(){return{scrollId:t.scrollId,behavior:t.behavior,transitionEnterName:t.transitionEnterName,elements:n,closeSymbol:i,onActivated:L,onDeactivated:S,insertElement:u,saveScroll:E,removeAliveElement:f,setCurrentComponentId:p,saveElScroll:h,resetElScroll:b,removeScrollEl:_}},get children(){return t.children}})}var u={appear:"index-module_appear__MaHzX",_appear:"index-module__appear__7KeRW",toLeft:"index-module_toLeft__s1PDL",_toLeft:"index-module__toLeft__SD-Zp"};let m=0,f=0,p=null;function E(l,o,t){var v,{behavior:E,elements:L,scrollId:S,closeSymbol:h,transitionEnterName:_,insertElement:b,saveScroll:A,setCurrentComponentId:D}=n(d);Reflect.has(L,o)||(D(o),r((n=>{b({id:o,dispose:n,component:e(l,{}),onDeactivated:null,onActivated:null,owner:i,scroll:{top:0,left:0},children:Array.isArray(t)?t:null,domList:null})})));var w=e=>{var l;if(S&&p)if("cacheScroll"===e){var t="alwaysTop"===E?{top:0,left:0}:{top:p.scrollTop,left:p.scrollLeft};A(o,t)}else{var n=Date.now();if(n-m>200){const{top:e=0,left:t=0}=(null===(l=L[o])||void 0===l?void 0:l.scroll)||{};p.scrollTop=e,p.scrollLeft=t,m=n}}};if(_&&(null===(v=L[o])||void 0===v?void 0:v.owner)&&Date.now()-f>200){f=Date.now();let e=()=>{var e;return null===(e=L[o])||void 0===e?void 0:e.component},l=null==e?void 0:e();if("function"==typeof l&&(l=null==l?void 0:l()),l instanceof HTMLElement){var g=u[_]||_;l.classList.add(g);const e=()=>{l.classList.remove(g),l.removeEventListener("animationend",e)};l.addEventListener("animationend",e)}}return a((()=>{var e,l,t;S&&!p&&(p=document.getElementById(S),!p&&console.error(`[solid-alive] scrollId: ${S} is null `)),null===(l=(e=L[o]).onActivated)||void 0===l||l.call(e),w("scrollTo"),null===(t=L[o].domList)||void 0===t||t.forEach(((e,l)=>{l.scrollTop=e.top,l.scrollLeft=e.left}))})),s((()=>{var e,l,t;D(h),null===(l=(e=L[o]).onDeactivated)||void 0===l||l.call(e),w("cacheScroll"),null===(t=L[o].domList)||void 0===t||t.forEach(((e,l,o)=>o.set(l,{top:l.scrollTop,left:l.scrollLeft})))})),c(L[o].owner,(()=>L[o].component))}function L(){var{onActivated:e,onDeactivated:l,removeAliveElement:o,saveElScroll:t,resetElScroll:r,removeScrollEl:i}=n(d);return{onActivated:e,onDeactivated:l,removeAliveElement:o,directiveSaveScroll:t,resetElScroll:r,removeScrollEl:i}}export{v as AliveProvider,E as AliveTransfer,L as useAlive};

package/dist/styles/[name].css

@@ -0,0 +1,30 @@
+.index-module_appear__MaHzX {
+  animation: index-module__appear__7KeRW .5s ease;
+}
+
+@keyframes index-module__appear__7KeRW {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+
+.index-module_toLeft__s1PDL {
+  animation: index-module__toLeft__SD-Zp .5s ease;
+}
+
+@keyframes index-module__toLeft__SD-Zp {
+  0% {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/dist/types/AliveProvider.d.ts

@@ -2,7 +2,8 @@ import { ProveiderProps } from './default';
 /**
  * @description Alive
  * @param children jsx.element
- * @param { boolean } saveBodyScrollTop true/false, 默认false, 不会记住body的scrollTop高度
- * @returns jsx.element
+ * @param { string } [scrollId] id,如 'root' 会在切换组件时的动作,默认saveScrollTop
+ * @param { 'alwaysTop'|'saveScroll' } [behavior] dom元素滚动条会如何保持
+ * @param { 'appear'|'toLeft'  } [transitionEnterName] 路由切换动画, 可以自己加
  */
 export default function AliveProvider(props: ProveiderProps): import("solid-js").JSX.Element;

package/dist/types/AliveTransfer.d.ts

@@ -1,2 +1,8 @@
 import { JSX } from 'solid-js';
-export default function AliveTransfer(Component: () => JSX.Element, id: string, children?: Array<string>): JSX.Element;
+/**
+ * @description Alive 组件用的 转换函数
+ * @param { string } Componet,
+ * @param { string } id  string,自己的id 值,一定要唯一
+ * @param { Array<string> } [children]  [string,...], 子组件的 id值 可不传，这样默认销毁时不会去干掉子组件，
+ */
+export default function AliveTransfer(Component: () => JSX.Element, id: string, children?: Array<string> | null): JSX.Element;

package/dist/types/default.d.ts

@@ -1,34 +1,50 @@
-import { getOwner } from 'solid-js/web'
 import { JSX } from 'solid-js'
 
-export interface ProveiderProps {
+declare module 'solid-js' {
+  namespace JSX {
+    interface Directives {
+      directiveSaveScroll: ((dom: Element) => void) | boolean
+    }
+  }
+}
+
+export interface pub {
+  scrollId?: string  // 保存
+  behavior?: 'alwaysTop' | 'saveScroll'
+  transitionEnterName?: 'appear' |'toLeft'
+}
+
+export interface ProveiderProps extends pub {
   children: JSX.Element
-  saveBodyScrollTop?: boolean
 }
 
 export interface NodeInfo {
   id: string
   component: JSX.Element
+  owner: Owner | null
+  scroll: {top:number,left:number} | null
+  domList: Map<Element, {top:number,left:number  }> | null
+  children?: Array<string> | null
+  selfDom?:Element
   dispose: (() => void) | null
-  owner: getOwner | null
   onActivated: null | (() => void)
   onDeactivated: null | (() => void)
-  scrollTop: number
-  children?: Array<string> | null
 }
 
 export interface StoreProps {
   [propsName: string]: NodeInfo
 }
 
-export interface ContextProps {
+export interface ContextProps extends pub {
   elements: StoreProps
+  closeSymbol: symbol
   insertElement: (d: NodeInfo) => void
   onActivated: (cb: () => void) => void
   onDeactivated: (cb: () => void) => void
   removeAliveElement: (id?: string) => void
-  saveScrollTop: (id: string, height: number) => void
+  saveScroll: (id: string, s:{top:number,left:number}) => void
   setCurrentComponentId: (id: string | symbol) => void
-  saveBodyScrollTop?: boolean
-  closeSymbol?: symbol
+  saveElScroll: (dom: Element) => void // 用来 保存 某一个dom, 暂时用来保存scroll
+  resetElScroll: (dom: Element) => boolean // 重置高度, 变成0
+  removeScrollEl: (dom: Element) => boolean // 删除 保存的 滚动条 元素
 }

package/dist/types/useAlive.d.ts

@@ -1,6 +1,17 @@
+/**
+ * @returns onActivated  激活缓存组件时触发,
+ * @returns onDeactivated  退出缓存组件时触发,
+ * @returns removeAliveElement  删除缓存组件,
+ * @returns directiveSaveScroll 这个是指令, 缓存组件中需要存的 滚动条, use:directiveSaveScroll, ts 中加 //@ts-ignore
+ * @returns resetElScroll  将缓存组件中 某个滚动条的scrollTop scrollLeft 变成 0
+ * @returns removeScrollEl  将缓存组件中 某个滚动条dom元素删除了
+ */
 declare function useAlive(): {
     onActivated: (cb: () => void) => void;
     onDeactivated: (cb: () => void) => void;
     removeAliveElement: (id?: string | undefined) => void;
+    directiveSaveScroll: (dom: Element) => void;
+    resetElScroll: (dom: Element) => boolean;
+    removeScrollEl: (dom: Element) => boolean;
 };
 export default useAlive;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-alive",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "solid-alive",
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,9 +38,11 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@types/css-modules": "^1.0.5",
+    "autoprefixer": "^10.4.19",
     "rollup": "^4.14.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-serve": "^1.1.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",

package/readme.md

@@ -8,16 +8,18 @@
   - removeAliveElement: 函数, 可传一个参数, 不传就删除所有缓存 :
     removeAliveElement('/home')
   - onActivated / onDeactivated: 函数,只能传一个函数,多次调用只有最一个会调用.
-    onActivated(()=> console.log('actived') )
-- 可记住body的高度,但要在 AliveProvider 中加 saveBodyScrollTop参数,但组件内部的滚动条问题自己解决
+    onActivated(()=> console.log('actived'))
+  - directiveSaveScroll  保存滚动条指令, 不过能不用就不用, 但组件不能使用,只能标签
+- 可记住指定元素, 但要在 AliveProvider 中加 saveScrollElement 参数, 最好唯一. 但组件内部的滚动条问题 有个指令函数,
 - 子父 缓存/删除 问题
   -  如果某组件下有子组件,在父的 AliveTransfer中, 
-    第三个参数,为数组 写上子组件的唯一id: ['/childrenId','asf',...]
-  -  使用见下图, 也可用 removeAliveElement 删除
+    第三个参数,为对象 写上子组件的唯一id: {children:['/childrenId','asf',...]}
+  -  使用见下图, 也可用     -removeAliveElement 删除
+
 
 
 ###  使用(use)
- 1 /index.tsx,AliveProvider将app 包裹, saveBodyScrollTop : 记住body滚动高度
+ 1 /index.tsx,AliveProvider将app 包裹, scrollId : 记住 你传的元素name  的滚动高度,我用 的 getElementById, behavior : alwaysTop 保持置顶, saveScroll ,保持离开的位置
  ```jsx
 import { render } from 'solid-js/web'
 import App from './App'
@@ -25,7 +27,8 @@ import { AliveProvider } from  'solid-alive'
 const root = document.getElementById('root')
 
 render(() => 
-  <AliveProvider saveBodyScrollTop>
+  {/* save id is client scroll,  */}
+  <AliveProvider behavior="alwaysTop" scrollId='client' transitionEnterName='appear'>
     <App />
   </AliveProvider>
 , root!)
@@ -43,7 +46,6 @@ import Team from './views/Blog/Team';
 import Blog from './views/Blog';
 import Single from './views/Blog/Single';
 
-// 单个
 const AboutTsf = () => AliveTransfer(About, '/about');
 
 // 当Blog 下有子组件时, 第三个参数一定要, 与子组件的
@@ -84,11 +86,17 @@ export default function Blog(props: any) {
 ```
 
 -  子  /views/Blog/Single/index.tsx 中
-```jsx
+```tsx
 import { useAlive } from "solid-alive"
 
 export default function Single() {
-  const { onActivated,onDeactivated,removeAliveElement } = useAlive()
+  const { 
+    onActivated,onDeactivated,
+    removeAliveElement, 
+    //@ts-ignore
+    directiveSaveScroll,
+    resetElScroll, 
+  } = useAlive()
 
   const click = () => {
     removeAliveElement('/about') // delete '/about'; 删除 /about
@@ -111,7 +119,31 @@ export default function Single() {
   return (
     <div>
       <h2>Single</h2>
-      <input type="text" style={{border:'2px solid red'}} />
+      <input type="text" style={{ border: '2px solid red' }} />
+      <button
+        onClick={() => {
+          // divRef && resetElScroll(divRef)
+          divRef && removeScrollEl(divRef)
+        }}
+      >
+        reset directiveSaveScroll
+      </button>
+      <div
+        style={{ height: '500px', width: '200px',border:'1px solid green',overflow:'auto'}}
+        {/* 可以不用参数 ,*/}
+        {/* use:directiveSaveScroll={dom => ((divRef as Element) = dom)} */}
+        use:directiveSaveScroll
+      >
+        <div style="height:900px;border:1px solid red">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum
+          aspernatur omnis, fugiat doloremque repellat facilis fugit nisi magni
+          provident hic aliquid nostrum reiciendis, dolores rem, quasi dolor
+          officia? Quidem? Sit alias tempore ab provident ea aliquid nostrum
+          quaerat? Natus aut dignissimos, illo nisi officiis adipisci ipsam
+          totam quasi ratione laboriosam eius recusandae asperiores nobis quis
+          assumenda odio consectetur animi. Debitis architecto mollitia sapiente
+        </div>
+      </div>
     </div>
   )
 }

package/dist/types/utils.d.ts

@@ -1,2 +0,0 @@
-export declare function getScrollTop(): number;
-export declare function setScrollTop(h: number): void;