solid-alive 0.1.8 → 0.1.9

package/{readme.md → README.md}

@@ -4,12 +4,11 @@
  - pnpm add solid-alive ／ npm i solid-alive / yarn add solid-alive
 ### 描述(describe)
 - 用于 solid 组件缓存,只测试过2级路由缓存
+- AliveProvider 
 - 在 useAlive 
   - removeAliveElement: 函数, 可传一个参数, 不传就删除所有缓存 :
     removeAliveElement('/home')
-  -  onActivated / onDeactivated: 函数,只能传一个函数  
-  -  onActivated(()=> console.log('actived'))
-  - <table><tr><td bgcolor=#ff0>现在多个onActivated/onDeactivated 会被保存,在一个组件 内不要有多个onActivated/onDeactivated函数</td></tr></table>
+  - aliveForzen: 暂时不响应 路由数据变化, aliveForzen()
 - 子父 缓存/删除 问题
   -  如果某组件下有子组件,在父的 AliveTransfer中, 
     第三个参数,为对象 写上子组件的唯一id: {children:['/childrenId','asf',...]}
@@ -18,6 +17,7 @@
 
 
 ###  使用(use)
+ 1 /index.tsx,AliveProvider将app 包裹
  ```jsx
 import { render } from 'solid-js/web'
 import App from './App'
@@ -85,10 +85,10 @@ export default function Blog(props: any) {
 
 -  子  /views/Blog/Single/index.tsx 中
 ```tsx
-import { useAlive , onActivated, onDeactivated} from "solid-alive"
+import {  onActivated,onDeactivated,useAlive } from "solid-alive"
 
 export default function Single() {
-  const { removeAliveElement } = useAlive()
+  const { removeAliveElement,aliveFrozen } = useAlive()
 
   let divRef: Element | undefined = undefined
   const click = () => {
@@ -98,10 +98,10 @@ export default function Single() {
 
   //todo call 这个会被调用
   onActivated(()=>{
-    console.log('Single-activeated-1')
+    console.log('Single-activeated-1') 
   })
  
-  //todo call 这个依然会被调用
+  //todo no call 这个不会被调用
   onActivated(()=>{
     console.log('Single-activeated-2')
   })
@@ -113,20 +113,72 @@ export default function Single() {
     <div>
       <h2>Single</h2>
       <input type="text" style={{ border: '2px solid red' }} />
-      <div
-        style={{ height: '500px', width: '200px',border:'1px solid green',overflow:'auto'}}
-      >
-        <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>
   )
 }
+```
+
+
+```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 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)
+      )
+    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[]>([])
+  const a: MenuData = {
+    id: 2,
+    text: 'ABOUT',
+    path: '/about',
+    realPath: '/About/index.tsx',
+    parentId: null,
+    hidden: 0,
+    sort: 2,
+    cache: 1
+  }
+ const addRoute =()=>{
+    aliveFrozen() // 暂时不响应下面数据变化
+    setData(d => {
+      return [...d, a]
+    })
+  }
+
+  return (
+    <Router>
+      <Route component={Client}>
+        {/* treeData 将 data变成 树结构数据 */}
+        {transferRouter(treeData(data, 'id', 'parentId'))}
+      </Route>
+    </Router>
+  )
+}
+
+export default App
+
+
 ```

package/dist/index.js

@@ -1 +1 @@
-import{createComponent as e}from"solid-js/web";import{createStore as t,produce as n}from"solid-js/store";import{createContext as l,on as o,useContext as i,createRoot as a,createEffect as r,onCleanup as d}from"solid-js";var v=l({elements:{},closeSymbol:Symbol("close"),insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},setElement:()=>{},setCurrentComponentId:()=>{}});function c(l){var[i,a]=t();let r=Symbol("close"),d=r,c=new Map,s=new Map;var u=e=>{var t;if(Reflect.has(i,e)){var n=null===(t=i[e])||void 0===t?void 0:t.children;null==n||n.forEach((t=>t!==e&&u(t))),a((t=>{var n,l;return t[e].onDeactivated=null,t[e].component=null,null===(l=(n=t[e]).dispose)||void 0===l||l.call(n),t[e].dispose=null,t[e].onActivated=null,t[e].onDeactivated=null,t[e].id="",t[e].children=null,t[e]=null,delete t[e],t}))}},m=(e,t)=>{if(d!==r&&t){var n={onActivated:c,onDeactivated:s}[e],l=n.get(d)||new Set;l.size<100&&l.add(o([],t))&&n.set(d,l)}};return e(v.Provider,{value:{elements:i,closeSymbol:r,onActivated:e=>{m("onActivated",e)},onDeactivated:e=>{m("onDeactivated",e)},insertElement:e=>{let t=e.id,n=c.get(t),l=s.get(t);c.delete(t),s.delete(t),a([t],Object.assign(Object.assign(Object.assign({},i[t]),e),{onActivated:n,onDeactivated:l}))},setElement:(e,t,l)=>{Reflect.has(i,e)&&a(n((n=>{n[e][t]=l})))},removeAliveElement:e=>{if(null==e)for(const e of Object.values(i))u(e.id);else u(e)},setCurrentComponentId:e=>{d=e}},get children(){return l.children}})}function s(t,n,l){var{elements:o,closeSymbol:c,insertElement:s,setCurrentComponentId:u}=i(v);return Reflect.has(o,n)||(u(n),s({id:n,children:Array.isArray(l)?new Set(l):null}),a((l=>{var i;s({id:n,dispose:l,component:e(t,{}),onDeactivated:null,onActivated:null});var a=null===(i=Object.values(o).find((e=>{var t;return null===(t=e.children)||void 0===t?void 0:t.has(n)})))||void 0===i?void 0:i.id;a&&u(a)}))),r((()=>{var e;null===(e=o[n].onActivated)||void 0===e||e.forEach((e=>e()))})),d((()=>{var e;u(c),null===(e=o[n].onDeactivated)||void 0===e||e.forEach((e=>e()))})),o[n].component}function u(){var{onActivated:e,onDeactivated:t,removeAliveElement:n}=i(v);return{onActivated:e,onDeactivated:t,removeAliveElement:n}}function m(e){var{onActivated:t}=u();t(e)}function f(e){var{onDeactivated:t}=u();t(e)}export{c as AliveProvider,s as AliveTransfer,m as onActivated,f as onDeactivated,u as useAlive};
+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};

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/context.d.ts

@@ -1,3 +1,3 @@
-import { ContextProps } from './default';
+import { ContextProps } from "./default";
 declare var Context: import("solid-js").Context<ContextProps>;
 export default Context;

package/dist/types/default.d.ts

@@ -1,34 +1,42 @@
 import { JSX } from 'solid-js'
 
-export interface ProveiderProps{
+export interface ProveiderProps {
   children: JSX.Element
 }
 
 export interface NodeInfo {
   id: string
-  component?: JSX.Element
+  loaded?: boolean
+  component?: JSX.Element | null
   children?: Set<string> | null
   dispose?: (() => void) | null
   onActivated?: null | Set<() => void>
   onDeactivated?: null | Set<() => void>
+  isTop?: boolean | null
 }
 
-
 export interface SetElement {
-  <T extends keyof NodeInfo>(id: string, prop: T, v: NodeInfo[T]): void
+  (id: string, values: NodeInfo): void
 }
 
 export interface StoreProps {
-  [propsName: string]: NodeInfo
+  [key: string]: NodeInfo
+}
+
+export interface IInfo {
+  frozen: boolean
 }
 
+export type TSetInfo = <T extends keyof IInfo>(key: T, value: IInfo[T]) => void
+
 export interface ContextProps {
   elements: StoreProps
-  closeSymbol: symbol
+  info: IInfo
+  setInfo: TSetInfo
   insertElement: (d: NodeInfo) => void
   onActivated: (cb: () => void) => void
   onDeactivated: (cb: () => void) => void
   removeAliveElement: (id?: string) => void
-  setElement: SetElement
   setCurrentComponentId: (id: string | symbol) => void
+  insertCacheCb: (id: string) => void
 }

package/dist/types/index.d.ts

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

package/dist/types/{alive.d.ts → useAlive.d.ts}

@@ -1,12 +1,10 @@
+export declare function onActivated(fn: () => void): void;
+export declare function onDeactivated(fn: () => void): void;
 /**
- * @returns onActivated  激活缓存组件时触发,
- * @returns onDeactivated  退出缓存组件时触发,
  * @returns removeAliveElement  删除缓存组件,
+ * @returns aliveFrozen 让 alive 暂时失去响应, 一般在加新增路由数据时使用
  */
 export declare function useAlive(): {
-    onActivated: (cb: () => void) => void;
-    onDeactivated: (cb: () => void) => void;
     removeAliveElement: (id?: string) => void;
+    aliveFrozen: () => void;
 };
-export declare function onActivated(fn: () => void): void;
-export declare function onDeactivated(fn: () => void): void;

package/dist/types/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function getCallerFunctionName(): {
+    caller: any;
+    path: any;
+};

package/package.json

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