solid-alive 0.3.55 → 0.3.57

package/README.md

@@ -36,10 +36,10 @@
     - stopSaveScroll : 当面组件不用去管滚动条 , 默认 false
     - transitionEnterName : 当面页面的单独动画, 要 css keyframes
 
-- **onActivated** : Function 激活缓存页面时会触发的函数
-- **onDeactivated** : Function 离开缓存页面时会触发的函数
-- **useAliveContext** : Function 父子缓存路由会有 Context 时, 可能会用到的hooks
-- **useAlive** hook
+- **onActivated** :  激活缓存页面时会触发的函数
+- **onDeactivated** :  离开缓存页面时会触发的函数
+- **useAliveContext** :  父子缓存路由会有 Context 时, 可能会用到的hooks
+- **useAlive**
   - aliveScrollDelete : 删除 保存了的 dom
   - aliveSaveScrollDtv: 指令 保存 dom 滚动条数据
   <!-- - aliveFrozen: 在你重新生成 Route 时 , 要执行这个函数 1iuxs -->
@@ -160,12 +160,14 @@ export default routes
 
 ```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 }>()
+import { createContext, useContext } from "solid-js"
+import { onActivated, onDeactivated, useAlive, type Setter } from "solid-alive"
+import type { RouteSectionProps } from "@solidjs/router"
+export const DataContext = createContext<{ data: ()=> string, setData: Setter<string> }>()
 
-export default function Home(props: any) {
+export default function Home(props: RouteSectionProps) {
+   const [data, setData] = createSignal("123")
   //@ts-ignore
   const { aliveSaveScrollDtv, aliveScrollDelete } = useAlive()
   const divRef: HTMLDivElement | null = null
@@ -183,7 +185,7 @@ export default function Home(props: any) {
   }
 
   return (
-    <ThemeContext.Provider value={{ value: "123" }}>
+    <ThemeContext.Provider value={{ data, setData }}>
       <div>
         home <button> 清除路由 </button>
         {props.children}
@@ -233,7 +235,7 @@ export default function C() {
 
   return (
     <div>
-      ccccccccc <input type="text" /> {data?.value?.()}cccccc
+      ccccccccc <input type="text" /> {data?.value?.()}cccccc {data1?.value?.()}
     </div>
   )
 }
@@ -242,6 +244,7 @@ export default function C() {
 4. isolated
 
 ```tsx
+import type { RouteSectionProps } from "@solidjs/router"
 // @/layout/Container/index.tsx
 import Aside from "xxxx"
 
@@ -251,7 +254,7 @@ const Aside1 = aliveTransfer(Aside, "aside", {
 })
 
 /** 最外的容器 */
-export function Container(props: any) {
+export function Container(props: RouteSectionProps) {
   return (
     <div class="container">
       {props.children}

package/dist/index.js

@@ -1 +1 @@
-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 r,createComponent as c,createEffect as d,untrack as a,onCleanup as u,runWithOwner as v}from"solid-js";const f=n(),h=n();function m(n){const[s,i]=l({}),r=(e,l,n,o)=>i(t(t=>t[e][l]?t[e][l][o](n):"add"===o&&(t[e][l]=new Set([n])))),c=(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:r,aniName:()=>n.transitionEnterName,scrollName:n.scrollContainerName,setDirective:c}},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=r(),t[n].component=e(h.Provider,{value:{id:n},get children(){return c(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];if(!l)return console.warn(`[solid-alive]: include中 id = ${n} 的值不存在`);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,e[n].owner=r();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),A=null)},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()}))}),u(()=>{var e;if(!(null==o?void 0:o.isolated)&&(p||!I.caches[n]))return;null==A||A();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()&&v(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"),u(()=>{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)=>{if(!e)return;let o=n&&n();o&&!1===o(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",()=>{v(r(),()=>{i(s(e))})},"add")),o};export{m as AliveProvider,I as aliveTransfer,w as onActivated,C as onDeactivated,D as useAlive,z as useAliveContext};
+import{createComponent as e}from"solid-js/web";import{createStore as t,produce as o}from"solid-js/store";import{createContext as n,createMemo as l,useContext as s,createComponent as i,createRoot as c,getOwner as r,createEffect as d,untrack as a,onCleanup as v,runWithOwner as u}from"solid-js";const h=n(),f=n();function m(n){const[s,i]=t({}),c=(e,t,n,l)=>i(o(o=>o[e][t]?o[e][t][l](n):"add"===l&&(o[e][t]=new Set([n])))),r=(e,t,n)=>i(o(o=>{const l=o[e].scrollDtvs;"set"===n?(!l&&(o[e].scrollDtvs=new Map),o[e].scrollDtvs.set(t,{left:0,top:0})):(null==l?void 0:l.has(t))&&(l.delete(t),!l.size&&delete o[e].scrollDtvs)})),d=e=>i(o(t=>{(e=>{var o,n,l,s;for(const i of e)t[i]&&(t[i].parentId&&(null===(n=null===(o=t[t[i].parentId])||void 0===o?void 0:o.childIds)||void 0===n||n.delete(i)),t[i].component=void 0,t[i].scrollDtvs=void 0,t[i].owner=null,t[i].hasEl=!1,t[i].init||(null===(s=(l=t[i]).dispose)||void 0===s||s.call(l),delete t[i]))})(e)})),a=l(e=>{if(!Array.isArray(n.include))return new Set([]);if(null==e?void 0:e.size){for(const t of n.include)e.delete(t);e.size&&d(e)}const t=new Set(n.include);return t.size&&t.size!==n.include.length&&console.warn("[solid-alive]:include中有值重复"),t});return e(h.Provider,{get value(){return{caches:s,include:a,currentIds:new Set,setCaches:i,setActive:c,aniName:()=>n.transitionEnterName,scrollName:n.scrollContainerName,setDirective:r,removeCaches:d}},get children(){return n.children}})}let p=!1;const C=(t,n,l)=>((null==l?void 0:l.isolated)||(p=!0),function(m){const C=s(h);if(!C||!n&&console.error(`[solid-alive]:id='${n}' 不正确`))return i(t,m);const I=(null==l?void 0:l.transitionEnterName)||C.aniName(),S=s(f),w=()=>{var e;return!(null==S?void 0:S.id)||(null===(e=C.caches[n])||void 0===e?void 0:e.parentId)===S.id},D=e=>(null==l?void 0:l.isolated)||C.currentIds.add(e);if(C.caches[n])D(n);else{const s=(null==l?void 0:l.isolated)?null:[...C.currentIds].at(-1);s&&C.caches[s]&&C.setCaches(o(e=>{const t=e[s];t.childIds?t.childIds.add(n):t.childIds=new Set([n])})),D(n);const d=!C.include().has(n);C.setCaches({[n]:Object.assign({id:n,parentId:s,init:null},d&&{noCache:d})}),c(l=>C.setCaches(o(o=>{o[n].dispose=l,o[n].owner=r(),o[n].component=e(f.Provider,{get value(){return Object.assign({id:n},d&&{noCache:d})},get children(){return i(t,m)}})})))}const E=e=>{var t;const s=C.scrollName;if(!s||(null==l?void 0:l.stopSaveScroll)||(null==l?void 0:l.isolated)||(null===(t=C.caches[n].childIds)||void 0===t?void 0:t.size))return;const i=document.querySelector(s);if(!i)return console.warn(`[solid-alive]:未找到为scrollContainerName='${s}' 的HTML元素`);"set"===e?i.scrollTo(C.caches[n].scrollContainer||{left:0,top:0}):C.setCaches(o(e=>{const{scrollLeft:t,scrollTop:o}=i;e[n].scrollContainer={left:t,top:o}}))};let z=null;return d(()=>{var e;const t=C.caches[n];t&&w()&&(!p||(null==l?void 0:l.isolated)||(null===(e=t.childIds)||void 0===e?void 0:e.size)||(p=!1),t.init||!t.hasEl&&!(()=>{var e,t;if(null===(t=null===(e=C.caches[n])||void 0===e?void 0:e.component)||void 0===t?void 0:t.call(e))return C.setCaches(o(e=>{e[n].hasEl=!0,e[n].owner=r();for(const t of e[n].aOnceSet||[])t();delete e[n].aOnceSet})),!0})()||a(()=>{C.setCaches(n,"init",!0),(()=>{var e,t,o,s;if(I&&!(null==l?void 0:l.disableAnimation)){let l=n;for(;l;){const t=null===(e=C.caches[l])||void 0===e?void 0:e.parentId;if(!t)break;l=t}(s=null===(o=null===(t=C.caches[l])||void 0===t?void 0:t.component)||void 0===o?void 0:o.call(t))instanceof HTMLElement&&(s.classList.add(I),z=()=>{z&&(s.removeEventListener("animationend",z),s.classList.remove(I),z=null)},s.addEventListener("animationend",z))}})(),E("set");const{scrollDtvs:e=[],aSet:o=[]}=t;for(const t of e)t[0].scrollTo(t[1]);for(const e of o)e()}))}),v(()=>{var e;const t=C.caches[n];if(((null==l?void 0:l.isolated)||!p&&t)&&w()){if(null==z||z(),C.currentIds.has(n))if(t.parentId){const e=t=>{var o;for(const n of t){C.currentIds.delete(n);const t=null===(o=C.caches[n])||void 0===o?void 0:o.childIds;(null==t?void 0:t.size)&&e(t)}};e([n])}else C.currentIds.clear();if(t.noCache)return C.setCaches(n,"init",!1),void C.removeCaches([n]);E("save"),C.setCaches(o(e=>{for(const t of e[n].scrollDtvs||[]){const{scrollLeft:e,scrollTop:o}=t[0];t[1].left=e,t[1].top=o}e[n].init=!1}));for(const e of t.dSet||[])e();t.hasEl||(null===(e=t.dispose)||void 0===e||e.call(t),C.setCaches(o(e=>delete e[n])))}}),w()&&u(C.caches[n].owner,()=>C.caches[n].component)}),I=(e,t)=>{if("function"!=typeof t)return;const{id:o,noCache:n}=s(f)||{},l=s(h);!n&&o&&l&&(l.setActive(o,e,t,"add"),v(()=>{l.setActive(o,e,t,"delete")}))},S=e=>{I("aSet",e)},w=e=>{I("dSet",e)},D=()=>{const{id:e,noCache:t}=s(f)||{},o=s(h);return{aliveId:e,aliveScrollDelete:n=>t||e&&o&&n&&o.setDirective(e,n,"delete"),aliveSaveScrollDtv:(n,l)=>{if(!e||t)return;const s=l&&l();"function"==typeof s&&!1===s(n)||o&&o.setDirective(e,n,"set")}}},E=e=>{const o=s(h),{id:n}=s(f)||{},[l,i]=t();return n&&(null==o||o.setActive(n,"aOnceSet",()=>{u(r(),()=>{i(s(e))})},"add")),l};export{m as AliveProvider,C as aliveTransfer,S as onActivated,w as onDeactivated,D as useAlive,E as useAliveContext};

package/dist/types/aliveTransfer.d.ts

@@ -1,4 +1,5 @@
 import { type JSXElement } from "solid-js";
+import type { RouteProps2 } from "./types";
 /**
  * @description 转换
  * @param {()=> JSXElement} Component 组件
@@ -10,7 +11,7 @@ import { type JSXElement } from "solid-js";
  *  const Home1 = aliveTransfer(Home, 'home')
  * ```
  * */
-declare const aliveTransfer: (Component: <T>(props: T) => JSXElement, id: string, params?: {
+declare const aliveTransfer: (Component: <T extends RouteProps2<any>>(props: T) => JSXElement, id: string, params?: {
     /** 成一个独立缓存组件 */
     isolated?: boolean;
     /** 禁用动画 */
@@ -19,5 +20,5 @@ declare const aliveTransfer: (Component: <T>(props: T) => JSXElement, id: string
     transitionEnterName?: string;
     /** 当前组件不去管制 滚动条 */
     stopSaveScroll?: boolean;
-}) => <T extends Record<string, any>>(props: T) => import("solid-js").JSX.Element;
+}) => <T extends RouteProps2<any>>(props: T) => import("solid-js").JSX.Element;
 export default aliveTransfer;

package/dist/types/context.d.ts

@@ -5,10 +5,12 @@ declare const Context: import("solid-js").Context<{
     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"];
+    scrollName?: string | undefined;
     setDirective: (id: string, dom: HTMLElement, t: import("./types").MapType) => void;
+    removeCaches: (ids: Set<string> | Array<string>, deep?: boolean) => void;
 } | undefined>;
 declare const ChildContext: import("solid-js").Context<{
     id: string;
+    noCache?: boolean;
 } | undefined>;
 export { ChildContext, Context };

package/dist/types/hooks.d.ts

@@ -3,14 +3,13 @@ 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) }
+ *    const divRef
+ *    //@ts-ignore
+ *    const { aliveScrollDelete, aliveSaveScrollDtv } = useAlive()
+ *    const del = () => { divRef && aliveScrollDelete(divRef) }
  *
- *   return <div use:aliveSaveScrollDtv >123</div>
+ *    return <div use:aliveSaveScrollDtv={(cn)=>(divRef = cn)} >123</div>
  *  }
  *
  * ```
@@ -25,7 +24,7 @@ export declare const useAlive: () => {
      * aliveScrollDelete(divRef)
      * ```
      * */
-    aliveScrollDelete: (dom: HTMLElement) => void | "" | undefined;
+    aliveScrollDelete: (dom: HTMLElement) => true | void | "";
     /**
      * @description directive 指令: 保存 dom的滚动条
      * @example
@@ -33,7 +32,7 @@ export declare const useAlive: () => {
      *  <div use:aliveSaveScrollDtv >123</div>
      * ```
      * */
-    aliveSaveScrollDtv: (el: HTMLElement, v?: () => (v: HTMLElement) => Boolean | void | any) => void;
+    aliveSaveScrollDtv: (el: HTMLElement, v?: () => ((v: HTMLElement) => Boolean | void | any) | boolean) => void;
 };
 /**
  * @description alive context

package/dist/types/types.d.ts

@@ -1,8 +1,11 @@
 import type { JSXElement, Accessor, Owner } from "solid-js"
 import type { SetStoreFunction } from "solid-js/store"
-// 提示扩展
+import type { RouteSectionProps } from "@solidjs/router"
+
 export type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never
 
+export type RouteProps2<T> = RouteSectionProps<T>
+
 export type AliveProviderProps = {
   /** 子组件 */
   children: JSXElement
@@ -19,7 +22,7 @@ export type Cache = Expand<{
   /** 唯一值 */
   id: string
   /** 没有在 include 中的路由 */
-  noCache?:boolean
+  noCache?: boolean
   /** 表明dom加载过了 */
   hasEl?: boolean
   /** 是否有加载过,  */
@@ -29,13 +32,13 @@ export type Cache = Expand<{
   /** 父级 */
   parentId?: string | null
   /** JSX */
-  component?: JSXElement | null
+  component?: JSXElement
   /** 上下文 */
   owner: Owner | null
   /** 销毁函数 */
-  dispose: () => void
+  dispose?: () => void
   /** 只执行一次的 active */
-  aOnceSet?: Set<() => void> | null
+  aOnceSet?: Set<() => void>
   /** 激活 */
   aSet?: Set<() => void>
   /** 离开 */
@@ -47,7 +50,7 @@ export type Cache = Expand<{
 }>
 
 /** 所有缓存数据 */
-export type Caches = Expand<Record<string, Cache>>
+export type Caches = Record<string, Cache>
 
 /** 共享数据 */
 export type ContextProps = Expand<{
@@ -64,9 +67,11 @@ export type ContextProps = Expand<{
   /** 动画类名, 要 css keyframes 动画*/
   aniName: () => string | void
   /** 滚动容器 名称 */
-  scrollName: AliveProviderProps["scrollContainerName"]
+  scrollName?: string
   /** 指令函数 */
   setDirective: (id: string, dom: HTMLElement, t: MapType) => void
+  /** 删除 cache,  deep:深度删除 */
+  removeCaches: (ids: Set<string> | Array<string>, deep?: boolean) => void
 }>
 
 export type Activate = "aSet" | "dSet" | "aOnceSet"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-alive",
-  "version": "0.3.55",
+  "version": "0.3.57",
   "author": "1iuxs",
   "description": "solid-alive",
   "type": "module",