solid-alive 0.3.3 → 0.3.4

package/package.json

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

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
-```
+```