solid-alive 0.3.3 → 0.3.51

package/README.md

@@ -0,0 +1,267 @@
+# solid-alive
+
+#### 安装(install)
+
+- pnpm add solid-alive ／ npm i solid-alive / yarn add solid-alive
+
+#### 参数(describe)
+
+- **AliveProvider**
+  - children :JSXElement 必须
+  - include : [] 缓存的id 数组, 默认都不缓存, 如 ["home",'abc'], 当你 删除一个缓存时, 父id与子id要一起删除
+  - scrollContainerName : string 保存的滚动条的 left 与 top位置, 如: html, body, .abxasdfe, #asdf
+  - transitionEnterName : string 进入页面的动画名称, 要 css keyframes
+
+    ```css
+    <!-- @/assets/css/index.css -- > 
+    .appear {
+      animation: showkeyframes 0.45s ease;
+    }
+    @keyframes showkeyframes {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    ```
+
+- **aliveTransfer**
+  - component : JSXElement, 必须
+  - id : string 保存的唯一值, 如 home, 在AliveProvider 的 include 要包括这些id 才会缓存, 必须
+  - params : Object
+    - isolated : 单独组件, 当不是Route组件 时使用, 默认false, !!!不要在已缓存的组件中使用,不要在已缓存的组件中使用,不要在已缓存的组件中使用
+    - disableAnimation : 当前页面不用动画, 默认 false
+    - stopSaveScroll : 当面组件不用去管滚动条 , 默认 false
+    - transitionEnterName : 当面页面的单独动画, 要 css keyframes
+
+- **onActivated** : Function 激活缓存页面时会触发的函数
+- **onDeactivated** : Function 离开缓存页面时会触发的函数
+- **useAliveContext** : Function 父子缓存路由会有 Context 时, 可能会用到的hooks
+- **useAlive** hook
+  - aliveScrollDelete : 删除 保存了的 dom
+  - aliveSaveScrollDtv: 指令 保存 dom 滚动条数据
+  <!-- - aliveFrozen: 在你重新生成 Route 时 , 要执行这个函数 1iuxs -->
+
+#### 使用(use)
+
+1. AliveProvider
+
+```tsx
+// src/index.tsx
+import { render } from "solid-js/web"
+
+import { AliveProvider, aliveTransfer } from "solid-alive"
+// import { userInfo } from "./store/userInfo.ts"
+
+import "@/assets/css/index.css"
+// import Container from "./layout/Container/index.tsx"
+
+import { lazy, type Component, For } from "solid-js"
+import { Route, Router } from "@solidjs/router"
+
+// 使用 import.meta.glob 动态导入所有组件
+// const modules = import.meta.glob<{ default: Component<any> }>([
+//   "./view/**/**.tsx",
+//   "./view/**.tsx",
+// ])
+// const transferRouter = (data: MenuData[]) => (
+//   <For each={data}>
+//     {(item) => {
+//       let module = modules[`./view${item.realPath}`]
+//       if (!module) return null
+//       return (
+//         <Route
+//           component={aliveTransfer(lazy(module), item.id)}
+//           path={item.path}
+//         >
+//           {item.children ? transferRouter(item.children) : null}
+//         </Route>
+//       )
+//     }}
+//   </For>
+// )
+
+// 导入 Home 组件
+// import Home from "@/view/Home/index.tsx"
+// const Home1 = aliveTransfer(Home, "home")
+
+render(
+  () => (
+    <AliveProvider
+      include={["home", "about"]}
+      transitionEnterName="appear"
+      scrollContainerName=".container"
+    >
+      {/* 1 */}
+      {/* <App /> */}
+      {/* 2 */}
+      {/* <Router root={Container} children={routes} /> */}
+      {/* 3 */}
+      <Router children={routes} />
+      {/* 4 */}
+      {/* <Router root={Container}>
+        {transferRouter([])}
+      </Router> */}
+      {/* 5 */}
+      {/* <Router root={Container}>
+        <Route path={"/cart"} component={Hom1}>
+          <Route path={""} component={G1}></Route>
+          <Route path={"h"} component={H1}></Route>
+        </Route>
+      </Router> */}
+    </AliveProvider>
+  ),
+  document.getElementById("root")!,
+)
+```
+
+```tsx
+// src/router/index.ts
+import { lazy } from "solid-js"
+import { aliveTransfer } from "solid-alive"
+const routes = [
+  {
+    path: "/",
+    component: aliveTransfer(
+      lazy(() => import("@/view/Home/index")),
+      "home",
+    ),
+    children: [
+      {
+        path: "",
+        component: aliveTransfer(
+          lazy(() => import("@/view/Home/C")),
+          "c",
+          // {
+          //   "disableAnimation":true,
+          //   "isolated":true,
+          //   "stopSaveScroll":true,
+          //   "transitionEnterName":'appear'
+          // }
+        ),
+      },
+    ],
+  },
+  {
+    path: "/about",
+    component: aliveTransfer(
+      lazy(() => import("@/view/About/index")),
+      "about",
+    ),
+  },
+]
+
+export default routes
+```
+
+2. Home 组件
+
+```tsx
+// src/view/Home/index.tsx
+import { createContext, useContext } from "solid-js"
+import { onActivated, onDeactivated, useAlive } from "solid-alive"
+
+export const DataContext = createContext<{ value: string }>()
+
+export default function Home(props: any) {
+  //@ts-ignore
+  const { aliveSaveScrollDtv, aliveScrollDelete } = useAlive()
+  const divRef: HTMLDivElement | null = null
+  onActivated(() => {
+    console.log("home - onActivated")
+  })
+
+  onDeactivated(() => {
+    console.log("home - onDeactivated")
+  })
+
+  const delDom = () => {
+    // 删除 aliveSaveScrollDtv 保存的 dom元素
+    divRef && aliveScrollDelete(divRef)
+  }
+
+  return (
+    <ThemeContext.Provider value={{ value: "123" }}>
+      <div>
+        home <button> 清除路由 </button>
+        {props.children}
+        <div
+          ref={(cn) => (divRef = cn)}
+          use:aliveSaveScrollDtv
+          // use:aliveSaveScrollDtv={(v) => (divRef = v)}
+
+          style="height:300px;overflow:scroll"
+        >
+          <div style="height:500px">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
+            praesentium debitis dolorum sed dolorem doloremque aliquam beatae,
+            architecto corrupti in qui, harum expedita voluptatum fugit
+            necessitatibus suscipit! Animi, nemo quas! Lorem ipsum dolor sit
+            amet consectetur adipisicing elit. Reiciendis, quaerat asperiores
+            libero, quasi vitae hic officiis repellendus sint tempore totam
+            saepe dolores dolorem magni ab suscipit magnam distinctio
+            exercitationem omnis.
+          </div>
+        </div>
+      </div>
+    </ThemeContext.Provider>
+  )
+}
+```
+
+3. Home 下的 子路由 c.tsx
+
+```tsx
+import { getOwner, useContext } from "solid-js"
+import { onActivated, useAliveContext } from "solid-alive"
+import { DataContext } from "."
+
+export default function C() {
+  // no value
+  const data = useContext(DataContext)
+  // have value
+  const data1 = useAliveContext(DataContext)
+  console.log(data, "data")
+  console.log(data1, "data1")
+  onActivated(() => {
+    console.log(getOwner())
+    console.log("C - onActivated")
+    // console.log(getOwner())
+  })
+
+  return (
+    <div>
+      ccccccccc <input type="text" /> {data?.value?.()}cccccc
+    </div>
+  )
+}
+```
+
+4. isolated
+
+```tsx
+import Aside from "xxxx"
+
+const Aside1 = aliveTransfer(Aside, "aside", {
+  isolated: true,
+  disableAnimation: true,
+})
+
+/** 最外的容器 */
+export function Container(props: any) {
+  return (
+    <div class="container">
+      {props.children}
+      <Aside1 />
+    </div>
+  )
+}
+```
+
+#### 已知问题(issue)
+
+- 父子路由的 context 问题
+- 多个已缓存的路由有子路由时, 未缓存的子路由 会共享子组件
+- 如果父路由缓存, 子路由不缓存时会有 路由组件共享问题

package/dist/index.js

@@ -1 +1 @@
-import{createComponent as e}from"solid-js/web";import{createContext as n,useContext as t,createRoot as r,createEffect as i,onCleanup as o,untrack as l}from"solid-js";import{produce as s,createStore as a}from"solid-js/store";const d=Symbol("currentId"),v=Symbol("setActiveCb"),u=Symbol("parentId");var c=n({elements:{},setElements:()=>{},setActiveCb:()=>{},aliveIds:()=>{},info:{frozen:!1},transitionEnterName:()=>{}});const f=n({[d]:void 0,[v]:()=>{}});var m=(n,t,r,i)=>e(f.Provider,{value:{[d]:i,[v]:r,[u]:t},get children(){return n()}}),p=e=>{for(;"function"==typeof e;)e=e();return e},h=!1;function y(e,n,l){return function(a){var v,u,y,A,b=t(c),E=t(f)[d],I=b.transitionEnterName();if(!(null===(v=b.aliveIds())||void 0===v?void 0:v.includes(n)))return m((()=>e(a)));if(E&&(null===(u=b.elements[n])||void 0===u?void 0:u.parentId)&&b.elements[n].parentId!==E)return null;b.elements[n]?b.info.frozen?(null===(y=b.elements[n].subsets)||void 0===y?void 0:y.some((e=>b.elements[e])))||(b.info.frozen=!1):null===(A=b.elements[n].onActivated)||void 0===A||A.forEach((e=>e())):(b.setElements({[n]:{id:n,subsets:Array.isArray(l)?l:null}}),r((t=>{b.setElements(s((r=>{var i;r[n].dispose=t,r[n].parentId=null===(i=Object.values(b.elements).find((e=>{var t;return null===(t=e.subsets)||void 0===t?void 0:t.includes(n)})))||void 0===i?void 0:i.id,r[n].element=m((()=>e(a)),r[n].parentId,b.setActiveCb,n)})))})));var g=e=>{if(e instanceof HTMLElement&&!h){h=!0,e.classList.add(I);var n=()=>{e.removeEventListener("animationend",n),e.classList.remove(I),h=!1};e.addEventListener("animationend",n)}};return I&&!b.info.frozen&&i((()=>{if(!h){var e=n;do{b.elements[e].parentId||g(p(b.elements[e].element)),e=b.elements[e].parentId}while(e)}})),o((()=>{var e,t;b.info.frozen||null===(t=null===(e=b.elements[n])||void 0===e?void 0:e.onDeactivated)||void 0===t||t.forEach((e=>e()))})),b.elements[n].element}}function A(n){const[t,r]=a();return i((e=>{var i=Array.isArray(n.include)?n.include:[];if(e.length>i.length){var o=new Set(i);(e=>{var n,i;if(Array.isArray(e))for(var o of e)null===(i=null===(n=t[o])||void 0===n?void 0:n.dispose)||void 0===i||i.call(n),r({[o]:void 0})})(e.filter((e=>!o.has(e))))}return i}),Array.isArray(n.include)?n.include:[]),e(c.Provider,{value:{info:{frozen:!1},elements:t,setElements:r,setActiveCb:(e,n,t,i)=>{r(s((r=>{r[e][n]?r[e][n][i](t):"add"===i&&(r[e][n]=new Set([t]))})))},aliveIds:()=>n.include,transitionEnterName:()=>n.transitionEnterName},get children(){return n.children}})}const b=(()=>{let e=[],n=!1,t=()=>{},r=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream,i=()=>{n=!1;var t=e.slice(0);e.length=0;for(let e=0;e<t.length;e++)t[e]()};if("undefined"!=typeof Promise&&"function"==typeof Promise.prototype.then){const e=Promise.resolve();t=()=>{e.then(i),r&&setTimeout((()=>{}))}}else if("undefined"!=typeof MutationObserver){let e=1;const n=new MutationObserver(i),r=document.createTextNode(String(e));n.observe(r,{characterData:!0}),t=()=>{e=(e+1)%2,r.data=String(e)}}else t=()=>{setTimeout(i,0)};return r=>{e.push(r),n||(n=!0,t())}})();function E(e,n){l((()=>{var r,i=t(f),l=i[d];l&&(null===(r=i[v])||void 0===r||r.call(i,l,e,n,"add"),"onActivated"===e&&b(n),o((()=>{var t;null===(t=i[v])||void 0===t||t.call(i,l,e,n,"delete"),n=null})))}))}function I(e){E("onActivated",e)}function g(e){E("onDeactivated",e)}function S(){var e=t(c).info;return()=>e.frozen=!0}export{A as AliveProvider,y as aliveTransfer,b as nextTick,I as onActivated,g as onDeactivated,S as useAliveFrozen};
+import{createComponent as e}from"solid-js/web";import{createStore as l,produce as t}from"solid-js/store";import{createContext as n,createMemo as o,useContext as s,createRoot as i,getOwner as c,createComponent as r,createEffect as d,untrack as a,onCleanup as v,runWithOwner as u}from"solid-js";const f=n(),h=n();function m(n){const[s,i]=l({}),c=(e,l,n,o)=>i(t(t=>t[e][l]?t[e][l][o](n):"add"===o&&(t[e][l]=new Set([n])))),r=(e,l,n)=>i(t(t=>{const o=t[e].scrollDtvs;"set"===n?(!o&&(t[e].scrollDtvs=new Map),t[e].scrollDtvs.set(l,{left:0,top:0})):(null==o?void 0:o.has(l))&&(o.delete(l),!o.size&&delete t[e].scrollDtvs)})),d=o(e=>{if(!Array.isArray(n.include))return new Set([]);if(null==e?void 0:e.size){for(const l of n.include)e.delete(l);e.size&&(l=e,i(t(e=>{(l=>{var t,n;for(const o of l)e[o]&&(e[o].dispose(),e[o].parentId&&(null===(n=null===(t=e[e[o].parentId])||void 0===t?void 0:t.childIds)||void 0===n||n.delete(o)),e[o].component=null,e[o].owner=null,delete e[o])})(l)})))}var l;const o=new Set(n.include);return o.size&&o.size!==n.include.length&&console.warn("[solid-alive]:include中有值重复"),o});return e(f.Provider,{get value(){return{caches:s,include:d,currentIds:new Set,setCaches:i,setActive:c,aniName:()=>n.transitionEnterName,scrollName:n.scrollContainerName,setDirective:r}},get children(){return n.children}})}let p=!1;const I=(l,n,o)=>((null==o?void 0:o.isolated)||(p=!0),function(m){if(!n)return console.error(`[solid-alive]: id:'${n}' 不正确`),null;const I=s(f);if(!I||!I.include().has(n))return l(m);const S=(null==o?void 0:o.transitionEnterName)||I.aniName(),w=s(h),C=()=>{var e;return!(null==w?void 0:w.id)||(null===(e=I.caches[n])||void 0===e?void 0:e.parentId)===w.id},D=e=>(null==o?void 0:o.isolated)||I.currentIds.add(e);if(I.caches[n])D(n);else{const s=(null==o?void 0:o.isolated)?null:[...I.currentIds].at(-1);s&&I.caches[s]&&I.setCaches(t(e=>{const l=e[s];l.childIds?l.childIds.add(n):l.childIds=new Set([n])})),D(n),I.setCaches({[n]:{id:n,parentId:s,init:null}}),i(o=>I.setCaches(t(t=>{t[n].dispose=o,t[n].owner=c(),t[n].component=e(h.Provider,{value:{id:n},get children(){return r(l,m)}})})))}const z=e=>{var l;const s=I.scrollName;if(!s||(null===(l=I.caches[n].childIds)||void 0===l?void 0:l.size)||(null==o?void 0:o.stopSaveScroll))return;const i=document.querySelector(s);if(!i)return console.warn(`[solid-alive]:未找到为scrollContainerName=${s} 的HTML元素`);"set"===e?requestAnimationFrame(()=>i.scrollTo(I.caches[n].scrollContainer||{left:0,top:0})):I.setCaches(t(e=>{const{scrollLeft:l,scrollTop:t}=i;e[n].scrollContainer={left:l,top:t}}))};let A=null;return d(()=>{var e;const l=I.caches[n];l?C()&&(p&&!(null==o?void 0:o.isolated)&&(null===(e=l.childIds)||void 0===e?void 0:e.size)&&(p=!1),l.init||!l.hasEl&&!(()=>{var e,l;if(null===(l=null===(e=I.caches[n])||void 0===e?void 0:e.component)||void 0===l?void 0:l.call(e))return I.setCaches(t(e=>{e[n].init=!0,e[n].hasEl=!0;for(const l of e[n].aOnceSet||[])l();delete e[n].aOnceSet})),!0})()||a(()=>{(()=>{var e,l,t,s;if(S&&!(null==o?void 0:o.disableAnimation)){let o=n;for(;o;){const l=null===(e=I.caches[o])||void 0===e?void 0:e.parentId;if(!l)break;o=l}(s=null===(t=null===(l=I.caches[o])||void 0===l?void 0:l.component)||void 0===t?void 0:t.call(l))instanceof HTMLElement&&(s.classList.add(S),A=()=>{A&&(s.removeEventListener("animationend",A),s.classList.remove(S))},s.addEventListener("animationend",A))}})(),z("set");const{scrollDtvs:e,aSet:t}=l;for(const l of e||[])l[0].scrollTo(l[1]);for(const e of t||[])e()})):console.warn(`[solid-alive]: include中 id = ${n} 的值不存在`)}),v(()=>{var e;if(!(null==o?void 0:o.isolated)&&(p||!I.caches[n]))return;null==A||A(),A=null;const l=I.caches[n];if(I.currentIds.has(n))if(l.parentId){I.currentIds.delete(n);const t=e=>{var l;for(const n of e){I.currentIds.delete(n);const e=null===(l=I.caches[n])||void 0===l?void 0:l.childIds;(null==e?void 0:e.size)&&t(e)}};(null===(e=l.childIds)||void 0===e?void 0:e.size)&&t(l.childIds)}else I.currentIds.clear();if(C()){z("save"),I.setCaches(t(e=>{for(const l of e[n].scrollDtvs||[]){const{scrollLeft:e,scrollTop:t}=l[0];l[1].left=e,l[1].top=t}e[n].init=!1}));for(const e of l.dSet||[])e()}}),C()&&u(I.caches[n].owner,()=>I.caches[n].component)}),S=(e,l)=>{if("function"!=typeof l)return;const{id:t}=s(h)||{},n=s(f);t&&n&&(n.setActive(t,e,l,"add"),v(()=>{n.setActive(t,e,l,"delete")}))},w=e=>{S("aSet",e)},C=e=>{S("dSet",e)},D=()=>{const{id:e}=s(h)||{},l=s(f);return{aliveId:e,aliveScrollDelete:t=>e&&(null==l?void 0:l.setDirective(e,t,"delete")),aliveSaveScrollDtv:(t,n)=>{e&&!1!==(null==n?void 0:n()(t))&&(null==l||l.setDirective(e,t,"set"))}}},z=e=>{const t=s(f),{id:n}=s(h)||{},[o,i]=l();return n&&(null==t||t.setActive(n,"aOnceSet",()=>{u(c(),()=>{i(s(e))})},"add")),o};export{m as AliveProvider,I as aliveTransfer,w as onActivated,C as onDeactivated,D as useAlive,z as useAliveContext};

package/dist/types/AliveProvider.d.ts

@@ -1,8 +1,19 @@
-import { ProveiderProps } from "./types";
+import type { AliveProviderProps } from "./types";
 /**
- * @description Alive
- * @param children jsx.element
- * @param {Arrya<string> | null} [include]  哪些路由要缓存, 默认不缓存, ['/','/about',...]
- * @param {string} [transitionEnterName] 动画名称 transitionEnterName="appear"
- */
-export default function AliveProvider(props: ProveiderProps): import("solid-js").JSX.Element;
+ * @description 容器
+ * @param {JSXElement} children
+ * @param {Array<string>} [include] ['home','about']
+ * @param {string} [transitionEnterName] 动画名称, 要 css keyframes 动画
+ * @param {string} [scrollContainerName] 滚动容器, 如 html, body, .contain, #xxy, ...
+ * @example
+ * ```jsx
+ *  <AliveProvider
+      include={['home','about']}
+      transitionEnterName="ease-show"
+      scrollContainerName=".contain"
+    >
+      <Router root={Contain} children={routes} />
+    </AliveProvider>
+ * ```
+ * */
+export default function (props: AliveProviderProps): import("solid-js").JSX.Element;

package/dist/types/active.d.ts

@@ -1,3 +1,17 @@
-export declare function onActivated(cb: () => void): void;
-export declare function onDeactivated(cb: () => void): void;
-export declare function useAliveFrozen(): () => boolean;
+/**
+ *  @description 进入缓存
+ * ```tsx
+ * import { onActivated } from 'solid-alive'
+ * //use
+ * onActivated(()=> console.log(234))
+ * ```
+ */
+export declare const onActivated: (cb: () => void) => void;
+/**
+ * @description  离开缓存
+ * ```tsx
+ * import { onDeactivated } from 'solid-alive'
+ * onDeactivated(()=> console.log(234))
+ * ```
+ */
+export declare const onDeactivated: (cb: () => void) => void;

package/dist/types/aliveTransfer.d.ts

@@ -1,8 +1,23 @@
-import { JSX } from "solid-js";
+import { type JSXElement } from "solid-js";
 /**
- * @description Alive 组件用的 转换函数; aliveTransfer(Comp, ‘/home’)
- * @param { ()=> JSX.Element } Component () => JSX.Element
- * @param { string } id  string,自己的id 值,一定要唯一
- * @param { Array<string> } [subsets]  [string,...], 子组件的 id值 可不传
- */
-export default function aliveTransfer(Component: <T>(props: T) => JSX.Element, id: string, subsets?: Array<string> | null): <T>(props: T) => JSX.Element;
+ * @description 转换
+ * @param {()=> JSXElement} Component 组件
+ * @param {string} id 唯一id
+ * @param {{isolated?:boolean, disableAnimation?:boolean, transitionEnterName?:string}} [params] 其它参数
+ * @example
+ * ```tsx
+ *  import Home from 'xxx'
+ *  const Home1 = aliveTransfer(Home, 'home')
+ * ```
+ * */
+declare const aliveTransfer: (Component: <T>(props: T) => JSXElement, id: string, params?: {
+    /** 成一个独立缓存组件 */
+    isolated?: boolean;
+    /** 禁用动画 */
+    disableAnimation?: boolean;
+    /** 动画名称, 要 css keyframes */
+    transitionEnterName?: string;
+    /** 当前组件不去管制 滚动条 */
+    stopSaveScroll?: boolean;
+}) => <T extends Record<string, any>>(props: T) => import("solid-js").JSX.Element;
+export default aliveTransfer;

package/dist/types/context.d.ts

@@ -1,11 +1,14 @@
-import { Context } from "./types";
-export declare const CURRENTID: unique symbol;
-export declare const SETACTIVECB: unique symbol;
-export declare const PARENTID: unique symbol;
-declare const _default: import("solid-js").Context<Context>;
-export default _default;
-export declare const ChildContext: import("solid-js").Context<{
-    [CURRENTID]: string | undefined;
-    [SETACTIVECB]?: Context["setActiveCb"];
-    [PARENTID]?: string;
-}>;
+declare const Context: import("solid-js").Context<{
+    currentIds: Set<string>;
+    include: import("solid-js").Accessor<Set<string>>;
+    caches: Record<string, import("./types").Cache>;
+    setCaches: import("solid-js/store").SetStoreFunction<import("./types").Caches>;
+    setActive: (id: string, t: import("./types").Activate, cb: () => void, t1: import("./types").SetType) => void;
+    aniName: () => string | void;
+    scrollName: import("./types").AliveProviderProps["scrollContainerName"];
+    setDirective: (id: string, dom: HTMLElement, t: import("./types").MapType) => void;
+} | undefined>;
+declare const ChildContext: import("solid-js").Context<{
+    id: string;
+} | undefined>;
+export { ChildContext, Context };

package/dist/types/hooks.d.ts

@@ -0,0 +1,46 @@
+import { type Context } from "solid-js";
+/**
+ * @description alive hook
+ * @example
+ * ```jsx
+ *  //@ts-ignore
+ *  const { aliveScrollDelete, aliveSaveScrollDtv } = useAlive()
+ *
+ *  export function Fn(){
+  *   const divRef
+  *   const del = () => { divRef && aliveScrollDelete(divRef) }
+  *
+  *   return <div use:aliveSaveScrollDtv >123</div>
+ *  }
+ *
+ * ```
+ */
+export declare const useAlive: () => {
+    /** 当前id */
+    aliveId: string | undefined;
+    /**
+     * @description 删除 dom的滚动条
+     * @example
+     * ```jsx
+     * aliveScrollDelete(divRef)
+     * ```
+     * */
+    aliveScrollDelete: (dom: HTMLElement) => void | "" | undefined;
+    /**
+     * @description directive 指令: 保存 dom的滚动条
+     * @example
+     * ```jsx
+     *  <div use:aliveSaveScrollDtv >123</div>
+     * ```
+     * */
+    aliveSaveScrollDtv: (el: HTMLElement, v?: () => (v: HTMLElement) => Boolean | void | any) => void;
+};
+/**
+ * @description alive context
+ * @example
+ * ```
+ * import UserContext from 'xxx'
+ * const data = useAliveContext(UserContext)
+ * ```
+ */
+export declare const useAliveContext: <T>(context: Context<T>) => T;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
-import aliveTransfer from "./aliveTransfer";
 import AliveProvider from "./AliveProvider";
-import { onActivated, onDeactivated, useAliveFrozen } from "./active";
-import nextTick from "./nextTick";
-export { aliveTransfer, AliveProvider, onActivated, onDeactivated, useAliveFrozen, nextTick };
+import aliveTransfer from "./aliveTransfer";
+import { onActivated, onDeactivated } from "./active";
+import { useAlive, useAliveContext } from "./hooks";
+export { AliveProvider, onActivated, onDeactivated, useAliveContext, aliveTransfer, useAlive };

package/dist/types/types.d.ts

@@ -1,47 +1,81 @@
-import { Owner, JSX, Accessor } from "solid-js"
-import { SetStoreFunction } from "solid-js/store"
+import type { JSXElement, Accessor, Owner } from "solid-js"
+import type { SetStoreFunction } from "solid-js/store"
+// 提示扩展
+export type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never
 
-export type EmitType = keyof Emit
-
-export type EmitValue<T extends EmitType> = Emit[T]
-
-export type Activate = "onActivated" | "onDeactivated"
-
-export interface Emit {
-  onActivated: () => void
-  onDeactivated: () => void
-}
-
-export interface ProveiderProps {
-  children: JSX.Element
+export type AliveProviderProps = {
+  /** 子组件 */
+  children: JSXElement
+  /** 缓存的路由, 如 include:['home','about'] */
   include?: Array<string>
+  /** 动画类名,要 css keyframes 动画 */
   transitionEnterName?: string
+  /** 保存滚动条, 使用 document.querySelector(scrollContainerName) 获取dom */
+  scrollContainerName?: string
 }
 
-export interface Info {
-  frozen: boolean
-}
-
-export interface Element {
+/** 缓存的数据 */
+export type Cache = Expand<{
+  /** 唯一值 */
   id: string
-  element: JSX.Element
-  subsets?:Array<string> | null
-  dispose?: () => void
-  onActivated?: Set<() => void>
-  onDeactivated?: Set<() => void>
-  parentId?: string
-  owner?: Owner | null
-}
-export interface Context {
-  elements: Record<string, Element>
-  setElements: SetStoreFunction<{}>
-  aliveIds: () => Array<string> | undefined
-  setActiveCb: (
-    id: string,
-    t: Activate,
-    cb: () => void,
-    t1: "add" | "delete"
-  ) => void
-  info: { frozen: boolean }
-  transitionEnterName: () => string | void
+  /** 表明dom加载过了 */
+  hasEl?: boolean
+  /** 是否有加载过,  */
+  init?: boolean
+  /** 其子数据 */
+  childIds?: Set<string>
+  /** 父级 */
+  parentId?: string | null
+  /** JSX */
+  component?: JSXElement | null
+  /** 上下文 */
+  owner: Owner | null
+  /** 销毁函数 */
+  dispose: () => void
+  /** 只执行一次的 active */
+  aOnceSet?: Set<() => void> | null
+  /** 激活 */
+  aSet?: Set<() => void>
+  /** 离开 */
+  dSet?: Set<() => void>
+  /** 当 saveScroll 有值时 */
+  scrollContainer?: { left: number; top: number }
+  /** 指令的 滚动条数据 */
+  scrollDtvs?: Map<HTMLElement, { left: number; top: number }>
+}>
+
+/** 所有缓存数据 */
+export type Caches = Expand<Record<string, Cache>>
+
+/** 共享数据 */
+export type ContextProps = Expand<{
+  /** 当前正在展示的 所有id */
+  currentIds: Set<string>
+  /** 需要缓存的组件 id */
+  include: Accessor<Set<string>>
+  /** 数据 */
+  caches: Record<string, Cache>
+  /** 加 缓存 */
+  setCaches: SetStoreFunction<Caches>
+  /** 缓存回调函数 */
+  setActive: (id: string, t: Activate, cb: () => void, t1: SetType) => void
+  /** 动画类名, 要 css keyframes 动画*/
+  aniName: () => string | void
+  /** 滚动容器 名称 */
+  scrollName: AliveProviderProps["scrollContainerName"]
+  /** 指令函数 */
+  setDirective: (id: string, dom: HTMLElement, t: MapType) => void
+}>
+
+export type Activate = "aSet" | "dSet" | "aOnceSet"
+export type MapType = "set" | "delete"
+export type SetType = "add" | "delete"
+
+declare module "solid-js" {
+  namespace JSX {
+    interface Directives {
+      /** 保存当前元素的滚动条数据 */
+      aliveSaveScrollDtv?: boolean | ((el: HTMLElement) => boolean | void | any)
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-alive",
-  "version": "0.3.3",
+  "version": "0.3.51",
   "author": "1iuxs",
   "description": "solid-alive",
   "type": "module",
@@ -30,21 +30,21 @@
   },
   "license": "ISC",
   "dependencies": {
-    "solid-js": "^1.9.4"
+    "solid-js": "^1.9.11"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/css-modules": "^1.0.5",
-    "autoprefixer": "^10.4.20",
-    "rollup": "^4.30.1",
+    "autoprefixer": "^10.4.27",
+    "rollup": "^4.59.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-serve": "^1.1.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-preset-solid": "^2.0.1",
-    "typescript": "^5.7.3"
+    "typescript": "^5.9.3"
   }
 }

package/dist/types/nextTick.d.ts

@@ -1,2 +0,0 @@
-declare const nextTick: (cb: () => void) => void;
-export default nextTick;

package/readme.md

@@ -1,155 +0,0 @@
-## solid-alive
-
-### 安装(install)
- - pnpm add solid-alive ／ npm i solid-alive / yarn add solid-alive
-### 描述(describe)
-- 用于 solid 组件缓存,只测试过2级路由缓存
-- AliveProvider 
-  - include : 数组,  ['/','/about'], 当数据变少时, 会自动去删除少的数据缓存
-- 在 useAlive 
-  - onActivated
-  - onDeactivated
-
-- 子父 缓存/删除 问题
-  -  如果某组件下有子组件,在父的 aliveTransfer中, 
-    第三个参数,为对象 写上子组件的唯一id: {children:['/childrenId','asf',...]}
-
-
-
-###  使用(use)
- 1 /index.tsx,AliveProvider将app 包裹
- ```jsx
-import { render } from 'solid-js/web'
-import App from './App'
-import { AliveProvider } from  'solid-alive'
-
-const root = document.getElementById('root')
-
-render(() => 
-  <AliveProvider include={[]}>
-    <App />
-  </AliveProvider>
-, root!)
- ```
-
-2 /App.tsx ,在 solid-alive 中 有 aliveTransfer, 参数: JSX , id:string, children?:[string..]
- ```jsx
- import { Route, Router } from '@solidjs/router';
-import { aliveTransfer } from 'solid-alive';
-
-import Home from './views/Home';
-import Client from './views/Client';
-import About from './views/About';
-import Team from './views/Blog/Team';
-import Blog from './views/Blog';
-import Single from './views/Blog/Single';
-
-
-const HomeTransfer = aliveTransfer(Home, '/'),
- AboutTsf = aliveTransfer(About, '/about'),
- BlogTsf = aliveTransfer(Blog, '/blog', ['/contact', 'single']),
- SingleTsf = aliveTransfer(Single,'single')
-
-export default function App() {
-  return (
-    <Router>
-      {/* 这个Client 只是用于标签加跳转的,使用时可不用 */}
-      <Route component={Client}>
-        <Route component={Home} path={'/'} />
-        {/* 单个缓存 single */}
-        <Route component={AboutTsf} path={'/about'} />
-        {/* 父子 缓存 Parent Child Nesting */}
-        <Route component={BlogTsf} path={'/blog'}>
-          <Route component={SingleTsf} path={'single'} />
-        </Route>
-      </Route>
-    </Router>
-  );
-}
- ```
-3 父 /views/Blog/index.tsx 
-```jsx
-export default function Blog(props: any) {
-  return (
-    <div>
-      <h2>Blog</h2>
-      <div>{props.children}</div>
-    </div>
-  );
-}
-```
-
--  子  /views/Blog/Single/index.tsx 中
-```tsx
-import {  onActivated,onDeactivated,useAlive, AliveComponent } from "solid-alive"
-
-export default function Single() {
-  const { removeAliveElements,aliveFrozen } = useAlive()
-
-
-  //todo call 这个会被调用
-  onActivated(()=>{
-    console.log('Single-activeated-1') 
-  })
- 
-  //todo call 也会被调用
-  onActivated(()=>{
-    console.log('Single-activeated-2')
-  })
-  // 缓存离开,
-  onDeactivated(()=>{
-    console.log('Single-deactivated')
-  })
-  return (
-    <div>
-      <h2>Single</h2>
-      <input type="text" style={{ border: '2px solid red' }} />
-    </div>
-  )
-}
-```
-
-3 动态生成 路由
-```tsx
-/**  App.tsx */
-import { createEffect, lazy, type Component } from 'solid-js'
-import { Route, Router } from '@solidjs/router'
-import { useAlive, aliveTransfer } from "solid-alive"
-
-const modules = import.meta.glob<{ default: Component<any> }>([
-  './views/**/**.tsx',
-  './views/**.tsx'
-])
-
-const transferRouter = (data: MenuData[]) =>
-  data.flatMap(item => {
-    let module = modules[`./views${item.realPath}`]
-    if (!module) return []
-    const Transfer = aliveTransfer(
-      lazy(module),
-      item.path,
-      item.children?.map(item => item.path)
-    )
-    return (
-      <Route component={Transfer} path={item.path.split('/').at(-1)}>
-        {item.children ? transferRouter(item.children) : null}
-      </Route>
-    )
-  })
-
-const App: Component = () => {
-  const { aliveFrozen } = useAlive()
-
-  const [data, setData] = createStore<MenuData[]>([])
-  return (
-    <Router>
-      <Route component={Client}>
-        {/* treeData 将 data变成 树结构数据 */}
-        {transferRouter(treeData(data))}
-      </Route>
-    </Router>
-  )
-}
-
-export default App
-```