solid-alive 0.3.2 → 0.3.4

package/dist/index.js

@@ -1 +1 @@
-import{createComponent as e}from"solid-js/web";import{createContext as t,useContext as n,createRoot as r,getOwner as i,onCleanup as l,runWithOwner as o,createEffect as s,untrack as d}from"solid-js";import{produce as v,createStore as a}from"solid-js/store";const u=Symbol("currentId"),c=Symbol("setActiveCb");var m=t({elements:{},setElements:()=>{},setActiveCb:()=>{},aliveIds:()=>{}});const f=t({[u]:void 0,[c]:()=>{}});var A=(t,n,r)=>e(f.Provider,{value:{[u]:r,[c]:n},get children(){return t()}});function y(e,t,s){return function(d){var a,u,c=n(m);return(null===(a=c.aliveIds())||void 0===a?void 0:a.includes(t))?(c.elements[t]?null===(u=c.elements[t].onActivated)||void 0===u||u.forEach((e=>e())):(c.setElements({[t]:{id:t,subsets:Array.isArray(s)?s:null}}),r((n=>{c.setElements(v((r=>{r[t].dispose=n,r[t].id=t,r[t].owner=i(),r[t].element=A((()=>e(d)),c.setActiveCb,t)})))}))),l((()=>{var e;null===(e=c.elements[t].onDeactivated)||void 0===e||e.forEach((e=>e()))})),c.elements[t].owner&&o(c.elements[t].owner,(()=>c.elements[t].element))):A((()=>e(d)))}}function h(t){const[n,r]=a(),i=e=>{var t,l,o;if(Array.isArray(e))for(var s of e)i(null===(t=n[s])||void 0===t?void 0:t.subsets),null===(o=null===(l=n[s])||void 0===l?void 0:l.dispose)||void 0===o||o.call(l),r({[s]:void 0})};return s((e=>{var n=Array.isArray(t.include)?t.include:[];if(e.length>n.length){var r=new Set(n);i(e.filter((e=>!r.has(e))))}return n}),Array.isArray(t.include)?t.include:[]),e(m.Provider,{value:{elements:n,setElements:r,setActiveCb:(e,t,n,i)=>{r(v((r=>{r[e][t]?r[e][t][i](n):"add"===i&&(r[e][t]=new Set([n]))})))},aliveIds:()=>t.include},get children(){return t.children}})}function p(e,t){d((()=>{var r,i=n(f),o=i[u];o&&(null===(r=i[c])||void 0===r||r.call(i,o,e,t,"add"),"onActivated"===e&&s((()=>{!function(e){"undefined"!=typeof Promise&&"function"==typeof Promise.prototype.then?Promise.resolve().then(e):setTimeout(e)}(t)})),l((()=>{var n;null===(n=i[c])||void 0===n||n.call(i,o,e,t,"delete"),t=null})))}))}function b(e){p("onActivated",e)}function w(e){p("onDeactivated",e)}export{h as AliveProvider,y as aliveTransfer,b as onActivated,w as onDeactivated};
+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};

package/dist/types/AliveProvider.d.ts

@@ -1,2 +1,8 @@
 import { ProveiderProps } 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;

package/dist/types/active.d.ts

@@ -1,2 +1,3 @@
 export declare function onActivated(cb: () => void): void;
 export declare function onDeactivated(cb: () => void): void;
+export declare function useAliveFrozen(): () => boolean;

package/dist/types/aliveTransfer.d.ts

@@ -1,2 +1,8 @@
 import { JSX } from "solid-js";
-export default function aliveTransfer(Component: <T>(props: T) => JSX.Element, id: string, subsets?: Array<string>): <T>(props: T) => JSX.Element;
+/**
+ * @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;

package/dist/types/context.d.ts

@@ -1,9 +1,11 @@
 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;
 }>;

package/dist/types/index.d.ts

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

package/dist/types/nextTick.d.ts

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

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { Owner, JSX } from "solid-js"
+import { Owner, JSX, Accessor } from "solid-js"
 import { SetStoreFunction } from "solid-js/store"
 
 export type EmitType = keyof Emit
@@ -14,21 +14,34 @@ export interface Emit {
 
 export interface ProveiderProps {
   children: JSX.Element
-  include?:  Array<string>
+  include?: Array<string>
+  transitionEnterName?: string
+}
+
+export interface Info {
+  frozen: boolean
 }
 
 export interface Element {
   id: string
   element: JSX.Element
+  subsets?:Array<string> | null
   dispose?: () => void
   onActivated?: Set<() => void>
   onDeactivated?: Set<() => void>
-  subsets?: Array<string>
+  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
+  aliveIds: () => Array<string> | undefined
+  setActiveCb: (
+    id: string,
+    t: Activate,
+    cb: () => void,
+    t1: "add" | "delete"
+  ) => void
+  info: { frozen: boolean }
+  transitionEnterName: () => string | void
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-alive",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "author": "1iuxs",
   "description": "solid-alive",
   "type": "module",
@@ -12,9 +12,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
-    "keep-alive",
     "solid-js",
-    "keepalive",
     "cache",
     "solid-alive",
     "solid-keep-alive",
@@ -32,7 +30,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "solid-js": "^1.9.3"
+    "solid-js": "^1.9.4"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.1.0",
@@ -40,13 +38,13 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/css-modules": "^1.0.5",
     "autoprefixer": "^10.4.20",
-    "rollup": "^4.29.2",
+    "rollup": "^4.30.1",
     "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.2"
+    "typescript": "^5.7.3"
   }
 }

package/readme.md

@@ -1,155 +1,176 @@
 ## solid-alive
 
 ### 安装(install)
- - pnpm add solid-alive ／ npm i solid-alive / yarn add solid-alive
+
+- 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',...]}
+- 用于 solid 组件缓存,只测试过 2 级路由缓存
+- AliveProvider
+  - include : 数组, 默认不缓存, ['/','/about'], 当数据变少时, 会自动去删除少的数据缓存
+  - transitionEnterName 动画, class 名称, 案例下面
+- onActivated
+- onDeactivated
+- useAliveFrozen: hooks 在新增路由时 ,暂时不响应 路由数据变化
+  使用: var aliveFrozen = useAliveFrozen()
+- nextTick
 
+### 使用(use)
 
+1 /index.tsx,AliveProvider 将 app 包裹
 
-###  使用(use)
- 1 /index.tsx,AliveProvider将app 包裹
- ```jsx
+```jsx
 import { render } from 'solid-js/web'
 import App from './App'
 import { AliveProvider } from  'solid-alive'
+// import styles from  "css.path"
 
 const root = document.getElementById('root')
 
-render(() => 
-  <AliveProvider include={[]}>
-    <App />
-  </AliveProvider>
+render(() =>
+  // cache  id = '/'   ;
+  // transitionEnterName={styles.appear}
+ <AliveProvider include={['/']} transitionEnterName="xxx">
+   <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';
+transitionEnterName 动画 css
 
-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';
+```css
+.appear {
+  animation: _appear 0.3s ease-in;
+  -webkit-animation: _appear 0.3s ease-in;
+}
+
+@keyframes _appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+```
 
+2 /App.tsx ,在 solid-alive 中 有 aliveTransfer, 参数: JSX , id:string, children?:[string..]
 
-const HomeTransfer = aliveTransfer(Home, '/'),
- AboutTsf = aliveTransfer(About, '/about'),
- BlogTsf = aliveTransfer(Blog, '/blog', ['/contact', 'single']),
- SingleTsf = aliveTransfer(Single,'single')
+```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"
+import Contact from "./views/Contact"
+
+const HomeTransfer = aliveTransfer(Home, "/"),
+  AboutTsf = aliveTransfer(About, "/about"),
+  BlogTsf = aliveTransfer(Blog, "/blog", ["single", "/contact"]),
+  SingleTsf = aliveTransfer(Single, "single"),
+  ContactTsf = aliveFransfer(Contact, "/contact")
 
 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 component={Home} path={"/"} />
+      {/* 单个缓存 single */}
+      <Route component={AboutTsf} path={"/about"} />
+      {/* 父子 缓存 Parent Child Nesting */}
+      <Route component={BlogTsf} path={"/blog"}>
+        <Route component={SingleTsf} path={"single"} />
+        <Route component={ContactTsf} path={"contact"} />
       </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()
-
+3 父 /views/Blog/index.tsx
 
+```jsx
+import { onActivated, onDeactivated, useAliveFrozen } from "@/alives"
+export default function Blog(props: any) {
+  // 新增路由时用
+  const aliveFrozen = useAliveFrozen()
+  const addRouter = () => {
+    aliveFrozen()
+    // add route....
+  }
   //todo call 这个会被调用
-  onActivated(()=>{
-    console.log('Single-activeated-1') 
+  onActivated(() => {
+    console.log("Blog-activeated-1")
   })
- 
+
   //todo call 也会被调用
-  onActivated(()=>{
-    console.log('Single-activeated-2')
+  onActivated(() => {
+    console.log("Blog-activeated-2")
   })
   // 缓存离开,
-  onDeactivated(()=>{
-    console.log('Single-deactivated')
+  onDeactivated(() => {
+    console.log("Blog-deactivated")
   })
+
+  // createEffect(()=>{
+  //   console.log('blog-createEffect')
+  // })
+
   return (
     <div>
-      <h2>Single</h2>
-      <input type="text" style={{ border: '2px solid red' }} />
+      <h2>Blog</h2>
+      {props.children}
     </div>
   )
 }
 ```
 
-3 动态生成 路由
+2 动态生成 路由
+
 ```tsx
 /**  App.tsx */
-import { createEffect, lazy, type Component } from 'solid-js'
-import { Route, Router } from '@solidjs/router'
-import { useAlive, aliveTransfer } from "solid-alive"
+import { createEffect, lazy, type Component } from "solid-js"
+import { Route, Router } from "@solidjs/router"
+import { aliveTransfer } from "solid-alive"
 
 const modules = import.meta.glob<{ default: Component<any> }>([
-  './views/**/**.tsx',
-  './views/**.tsx'
+  "./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 transferRouter = (data: IMenuData[]) => (
+  <For each={data}>
+    {(item) => {
+      var module = modules[`./views${item.realPath.replace(/\.\./g, "")}`]
+      if (!module) return []
+      return (
+        <Route
+          component={aliveTransfer(
+            lazy(module),
+            item.path,
+            item.children?.map((item) => item.path)
+          )}
+          path={item.path.split("/").at(-1)}
+        >
+          {item.children ? transferRouter(item.children) : null}
+        </Route>
+      )
+    }}
+  </For>
+)
 
 const App: Component = () => {
-  const { aliveFrozen } = useAlive()
-
-  const [data, setData] = createStore<MenuData[]>([])
   return (
     <Router>
-      <Route component={Client}>
-        {/* treeData 将 data变成 树结构数据 */}
-        {transferRouter(treeData(data))}
-      </Route>
+      {/* treeData 将 data变成 树结构数据 */}
+      {transferRouter(treeData(data))}
     </Router>
   )
 }
 
 export default App
-```
+```