solid-alive 0.1.9 → 0.2.1

package/README.md

@@ -5,14 +5,15 @@
 ### 描述(describe)
 - 用于 solid 组件缓存,只测试过2级路由缓存
 - AliveProvider 
+- AliveComponent 不要在 有缓存 的组件中使用
 - 在 useAlive 
-  - removeAliveElement: 函数, 可传一个参数, 不传就删除所有缓存 :
-    removeAliveElement('/home')
+  - removeAliveElements: 函数, 可传一个参数, 不传就删除所有缓存 :
+    removeAliveElements(['/home'])
   - aliveForzen: 暂时不响应 路由数据变化, aliveForzen()
 - 子父 缓存/删除 问题
   -  如果某组件下有子组件,在父的 AliveTransfer中, 
     第三个参数,为对象 写上子组件的唯一id: {children:['/childrenId','asf',...]}
-  -  使用见下图, 也可用     -removeAliveElement 删除
+  -  使用见下图, 也可用     -removeAliveElements 删除
 
 
 
@@ -21,7 +22,7 @@
  ```jsx
 import { render } from 'solid-js/web'
 import App from './App'
-import { AliveProvider } from  'solid-alive'
+import { aliveProvider } from  'solid-alive'
 
 const root = document.getElementById('root')
 
@@ -35,7 +36,7 @@ render(() =>
 2 /App.tsx ,在 solid-alive 中 有 AliveTransfer, 参数: JSX , id:string, children?:[string..]
  ```jsx
  import { Route, Router } from '@solidjs/router';
-import { AliveTransfer } from 'solid-alive';
+import { aliveTransfer } from 'solid-alive';
 
 import Home from './views/Home';
 import Client from './views/Client';
@@ -44,14 +45,13 @@ import Team from './views/Blog/Team';
 import Blog from './views/Blog';
 import Single from './views/Blog/Single';
 
-const AboutTsf = () => AliveTransfer(About, '/about');
 
-// 当Blog 下有子组件时, 第三个参数一定要, 与子组件的
-const BlogTsf = (props: any) =>
-  AliveTransfer(Blog.bind(null, props), '/blog', ['single', '/team']);
-// blog 下的子组件
-const SingleTsf = () => AliveTransfer(Single, 'single');
-const TeamTsf = () => AliveTransfer(Team, '/team');
+const HomeTransfer = aliveTransfer(Home, '/')
+const AboutTransfer = aliveTransfer(About, '/about')
+const ShopTransfer = aliveTransfer(Shop, '/shop',['/shopPage'])
+const ShopPageTransfer = aliveTransfer(ShopPage, '/shopPage')
+const BlogTransfer = aliveTransfer(Blog, '/blog', ['contact', 'single'])
+const SingleTsf = aliveTransfer(Single,'single')
 
 export default function App() {
   return (
@@ -63,7 +63,6 @@ export default function App() {
         <Route component={AboutTsf} path={'/about'} />
         {/* 父子 缓存 Parent Child Nesting */}
         <Route component={BlogTsf} path={'/blog'}>
-          <Route component={TeamTsf} path={'team'} />
           <Route component={SingleTsf} path={'single'} />
         </Route>
       </Route>
@@ -85,15 +84,15 @@ export default function Blog(props: any) {
 
 -  子  /views/Blog/Single/index.tsx 中
 ```tsx
-import {  onActivated,onDeactivated,useAlive } from "solid-alive"
+import {  onActivated,onDeactivated,useAlive, AliveComponent } from "solid-alive"
 
 export default function Single() {
-  const { removeAliveElement,aliveFrozen } = useAlive()
+  const { removeAliveElements,aliveFrozen } = useAlive()
 
   let divRef: Element | undefined = undefined
   const click = () => {
-    removeAliveElement('/about') // delete '/about'; 删除 /about
-    // removeAliveElement() // delete all alive element; 会删除所有缓存的组件
+    removeAliveElements(['/about']) // delete '/about'; 删除 /about
+    // removeAliveElements() // delete all alive element; 会删除所有缓存的组件
   }
 
   //todo call 这个会被调用
@@ -112,15 +111,19 @@ export default function Single() {
   return (
     <div>
       <h2>Single</h2>
+      { /** 这个 AliveComponent 最好是在 未缓存的组件 中使用, 不然生命周期不同步  */ }
+      <AliveComponent id={'home1'}>
+        <Home />
+      </AliveComponent>
       <input type="text" style={{ border: '2px solid red' }} />
     </div>
   )
 }
 ```
 
-
+3 动态生成 路由
 ```tsx
-/** 动态路由 App.tsx */
+/**  App.tsx */
 import { createEffect, lazy, type Component } from 'solid-js'
 import { Route, Router } from '@solidjs/router'
 import { useAlive,AliveTransfer } from "solid-alive"
@@ -132,14 +135,13 @@ const modules = import.meta.glob<{ default: Component<any> }>([
 
 const transferRouter = (data: MenuData[]) =>
   data.flatMap(item => {
-    let m = modules[`./views${item.realPath}`]
-    if (!m) return []
-    const Transfer = (props: any) =>
-      AliveTransfer(
-        lazy(m).bind(null, props),
-        item.path,
-        item.children?.map(item => item.path)
-      )
+    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}
@@ -157,9 +159,6 @@ const App: Component = () => {
     path: '/about',
     realPath: '/About/index.tsx',
     parentId: null,
-    hidden: 0,
-    sort: 2,
-    cache: 1
   }
  const addRoute =()=>{
     aliveFrozen() // 暂时不响应下面数据变化
@@ -179,6 +178,4 @@ const App: Component = () => {
 }
 
 export default App
-
-
 ```

package/dist/index.js

@@ -1 +1 @@
-import{createComponent as e}from"solid-js/web";import{createStore as n,produce as t}from"solid-js/store";import{createContext as o,on as r,useContext as l,createRoot as i,createEffect as a,onCleanup as c}from"solid-js";var v=o({elements:{},info:{frozen:!1},setInfo:()=>{},insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},setCurrentComponentId:()=>{},insertCacheCb:()=>{}});function d(o){let[l,i]=n(),[a,c]=n({frozen:!0}),d="",s=new Map,f=new Map,u={cbType:"",caller:"",path:""};var m=e=>{var n;if(Reflect.has(l,e)){var t=null===(n=l[e])||void 0===n?void 0:n.children;null==t||t.forEach((n=>n!==e&&m(n))),i((n=>{var t,o;return n[e].onDeactivated=null,n[e].component=null,null===(o=(t=n[e]).dispose)||void 0===o||o.call(t),n[e].dispose=null,n[e].onActivated=null,n[e].onDeactivated=null,n[e].children=null,n[e]=null,delete n[e],n}))}},p=e=>{var{caller:n,path:t}=function(){var e=null,n=null;try{throw new Error}catch(i){var t=i.stack.split("\n"),o=t[0].includes("@")?5:6,r=t[o].trim(),l=r.includes("@")?r.split("@"):r.split(" ").slice(1);e=l[0],n=l[1]}return{caller:e,path:n}}();return u.caller&&u.cbType===e&&u.caller===n&&u.path!==t?(console.warn(`[solid-alive]:检测到多个${e}函数 ${t}`),!1):(u={caller:n,path:t,cbType:e},!0)},h=(e,n)=>{if(!a.frozen&&n&&p(e)){var t={onActivated:s,onDeactivated:f}[e],o=t.get(d)||new Set;o.add(r([],n))&&t.set(d,o)}};return e(v.Provider,{value:{info:a,elements:l,setInfo:(e,n)=>{c(e,n)},onActivated:e=>{h("onActivated",e)},onDeactivated:e=>{h("onDeactivated",e)},insertElement:e=>{let n=e.id;i([n],Object.assign(Object.assign({},l[n]),e))},removeAliveElement:e=>{if(null==e)for(const e of Object.values(l))m(e.id);else m(e)},setCurrentComponentId:e=>{d=e},insertCacheCb:e=>{let n=s.get(e),o=f.get(e);s.delete(e),f.delete(e),Reflect.has(l,e)&&i(t((t=>{t[e].onActivated=n,t[e].onDeactivated=o,t[e].loaded=!0})))}},get children(){return o.children}})}let s=new Set([]);function f(n,t,o){var{info:r,elements:d,setInfo:f,insertElement:u,setCurrentComponentId:m,insertCacheCb:p}=l(v);Reflect.has(d,t)||(f("frozen",!1),m(t),i((r=>{u({id:t,dispose:r,component:e(n,{}),children:Array.isArray(o)?new Set(o):null})})));var h=e=>{var n;if(d[e].isTop)return e;var t=null===(n=Object.values(d).find((n=>{var t;return null===(t=n.children)||void 0===t?void 0:t.has(e)})))||void 0===n?void 0:n.id;return t&&(t=h(t)),t||e};return s.has(h(t))||s.clear(),a((()=>{var e,n;if(f("frozen",!1),!s.has(t))if(d[t].loaded)s.add(t),f("frozen",!0),null===(e=d[t].onActivated)||void 0===e||e.forEach((e=>e())),f("frozen",!1);else{let e=null===(n=d[t])||void 0===n?void 0:n.component;for(;"function"==typeof e;)e=e();e instanceof HTMLElement&&p(t)}})),c((()=>{var e;r.frozen||(f("frozen",!0),null===(e=d[t].onDeactivated)||void 0===e||e.forEach((e=>e())),f("frozen",!1))})),d[t].component}function u(){var{onActivated:e,onDeactivated:n,removeAliveElement:t,setInfo:o}=l(v);return{onActivated:e,onDeactivated:n,removeAliveElement:t,setInfo:o}}function m(e){var{onActivated:n}=u();n(e)}function p(e){var{onDeactivated:n}=u();n(e)}function h(){var{removeAliveElement:e,setInfo:n}=u();return{removeAliveElement:e,aliveFrozen:()=>n("frozen",!0)}}export{d as AliveProvider,f as AliveTransfer,m as onActivated,p as onDeactivated,h as useAlive};
+import{createComponent as e}from"solid-js/web";import{createStore as t,produce as n}from"solid-js/store";import{createContext as r,on as o,useContext as i,createRoot as a,createComputed as l,createEffect as v,onCleanup as d}from"solid-js";var s=r({elements:{},info:{frozen:!1},setInfo:()=>{},insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElements:()=>{},setCurrentComponentId:()=>{},insertCacheCb:()=>{}});function c(r){let[i,a]=t(),[l,v]=t({frozen:!0}),d="",c=new Map,f=new Map,u={onActivated:{},onDeactivated:{}};var m=e=>{var t;if(Reflect.has(i,e)){var n=null===(t=i[e])||void 0===t?void 0:t.subIds;null==n||n.forEach((t=>t!==e&&m(t))),a((t=>{var n,r;return null===(r=(n=t[e]).dispose)||void 0===r||r.call(n),t[e]=null,delete t[e],t}))}},A=e=>{var{caller:t,path:n}=function(){var e=null,t=null;try{throw new Error}catch(a){var n=a.stack.split("\n"),r=n[0].includes("@")?5:6,o=n[r].trim(),i=o.includes("@")?o.split("@"):o.split(" ").slice(1);e=i[0],t=i[1]}return{caller:e,path:t}}(),r=u[e];return(!r[t]||r[t]===n)&&(u[e][t]=n,!0)},h=(e,t)=>{if(!l.frozen&&t&&A(e)){var n={onActivated:c,onDeactivated:f}[e],r=n.get(d)||new Set;r.add(o([],t))&&n.set(d,r)}};return e(s.Provider,{value:{info:l,elements:i,setInfo:v,onActivated:e=>{h("onActivated",e)},onDeactivated:e=>{h("onDeactivated",e)},insertElement:e=>{let t=e.id;a([t],Object.assign(Object.assign({},i[t]),e))},removeAliveElements:e=>{if(e&&Array.isArray(e))for(const t of e)m(t);else for(const e of Object.values(i))m(e.id)},setCurrentComponentId:e=>{d=e},insertCacheCb:e=>{let t=c.get(e),r=f.get(e);c.delete(e),f.delete(e),u.onActivated={},u.onDeactivated={},Reflect.has(i,e)&&a(n((n=>{n[e].onActivated=t,n[e].onDeactivated=r,n[e].loaded=!0})))}},get children(){return r.children}})}let f=new Set([]);function u(e,t,n,r){return function(o){var{info:c,elements:u,setInfo:m,insertElement:A,setCurrentComponentId:h,insertCacheCb:p}=i(s);Reflect.has(u,t)||(m("frozen",!1),h(t),a((i=>{A({id:t,dispose:i,owner:null,component:r?e:null,element:e(o),subIds:Array.isArray(n)?new Set(n):null})})));var E=e=>{var t;if(u[e].isTop)return e;var n=null===(t=Object.values(u).find((t=>{var n;return null===(n=t.subIds)||void 0===n?void 0:n.has(e)})))||void 0===t?void 0:t.id;return n&&(n=E(n)),n||e};return f.has(E(t))||f.clear(),l((()=>{var e;if(!u[t].loaded){let n=null===(e=u[t])||void 0===e?void 0:e.element;for(;"function"==typeof n;)n=n();n instanceof HTMLElement&&p(t)}})),v((()=>{var e;m("frozen",!1),f.has(t)||u[t].loaded&&(f.add(t),m("frozen",!0),null===(e=u[t].onActivated)||void 0===e||e.forEach((e=>e())),m("frozen",!1))})),d((()=>{var e;c.frozen||(m("frozen",!0),null===(e=u[t].onDeactivated)||void 0===e||e.forEach((e=>e())))})),u[t].element}}function m(t){var n=u((()=>t.children),t.id,t.subIds);return e(n,{})}function A(){var{onActivated:e,onDeactivated:t,removeAliveElements:n,setInfo:r}=i(s);return{onActivated:e,onDeactivated:t,removeAliveElements:n,setInfo:r}}function h(e){var{onActivated:t}=A();t(e)}function p(e){var{onDeactivated:t}=A();t(e)}function E(){var{removeAliveElements:e,setInfo:t}=A();return{removeAliveElements:e,aliveFrozen:()=>t("frozen",!0)}}export{m as AliveComponent,c as AliveProvider,u as aliveTransfer,h as onActivated,p as onDeactivated,E as useAlive};

package/dist/types/AliveComponent.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+export declare function AliveComponent(props: {
+    children: JSX.Element;
+    id: string;
+    subIds?: Array<string>;
+}): JSX.Element;

package/dist/types/AliveProvider.d.ts

@@ -1,4 +1,4 @@
-import { ProveiderProps } from "./default";
+import { ProveiderProps } from './default';
 /**
  * @description Alive
  * @param children jsx.element

package/dist/types/aliveTransfer.d.ts

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

package/dist/types/default.d.ts

@@ -7,8 +7,10 @@ export interface ProveiderProps {
 export interface NodeInfo {
   id: string
   loaded?: boolean
-  component?: JSX.Element | null
-  children?: Set<string> | null
+  owner: any,
+  component?: ((props:any) => JSX.Element) | null
+  element?: JSX.Element | null
+  subIds?: Set<string> | null
   dispose?: (() => void) | null
   onActivated?: null | Set<() => void>
   onDeactivated?: null | Set<() => void>
@@ -36,7 +38,17 @@ export interface ContextProps {
   insertElement: (d: NodeInfo) => void
   onActivated: (cb: () => void) => void
   onDeactivated: (cb: () => void) => void
-  removeAliveElement: (id?: string) => void
+  removeAliveElements: (ids?: Array<IAliveElementIds>) => void
   setCurrentComponentId: (id: string | symbol) => void
-  insertCacheCb: (id: string) => void
+  insertCacheCb: (id: string ) => void
 }
+
+interface IActive {
+  [key: string]: string
+}
+export interface IPrevCall {
+  onActivated: IActive
+  onDeactivated: IActive
+}
+
+export type IAliveElementIds =  string

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import AliveProvider from './AliveProvider';
-import AliveTransfer from './AliveTransfer';
+import aliveTransfer from './aliveTransfer';
+import { AliveComponent } from './AliveComponent';
 import { onActivated, onDeactivated, useAlive } from './useAlive';
-export { AliveProvider, AliveTransfer, onActivated, onDeactivated, useAlive };
+export { AliveComponent, AliveProvider, aliveTransfer, onActivated, onDeactivated, useAlive, };

package/dist/types/useAlive.d.ts

@@ -5,6 +5,6 @@ export declare function onDeactivated(fn: () => void): void;
  * @returns aliveFrozen 让 alive 暂时失去响应, 一般在加新增路由数据时使用
  */
 export declare function useAlive(): {
-    removeAliveElement: (id?: string) => void;
+    removeAliveElements: (ids?: Array<import("./default").IAliveElementIds>) => void;
     aliveFrozen: () => void;
 };

package/package.json

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

package/dist/types/AliveTransfer.d.ts

@@ -1,8 +0,0 @@
-import { JSX } from 'solid-js';
-/**
- * @description Alive 组件用的 转换函数
- * @param { ()=> JSX.Element } 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;