solid-alive 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/readme.md +118 -0
- package/dist/types/AliveTransfer.d.ts +0 -7
- package/dist/types/default.d.ts +2 -2
- package/package.json +5 -1
- package/readme.md +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("solid-js/web"),
|
|
1
|
+
"use strict";var e=require("solid-js/web"),o=require("solid-js/store"),t=require("solid-js"),l=t.createContext({elements:{},insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScrollTop:()=>{},setCurrentComponentId:()=>{}});let n,r=100;exports.AliveProvider=function(t){var[n,r]=o.createStore();let c=Symbol("close"),a=c,s=new Map,i=new Map;var d=e=>{let o=e.id,t=s.get(o),l=i.get(o);s.delete(o),i.delete(o),r([o],{...e,onActivated:t,onDeactivated:l})},v=e=>{if(Reflect.has(n,e)){var o=n[e]?.children;o?.forEach((o=>o!==e&&v(o))),r((o=>(o[e].onDeactivated?.(),o[e].component=null,o[e].dispose?.(),o[e].dispose=null,o[e].owner=null,o[e].onActivated=null,o[e].onDeactivated=null,o[e].scrollTop=0,o[e].id="",o[e].children=null,o[e]=null,delete o[e],{...o})))}},u=e=>{if(null==e)for(const e of Object.values(n))v(e.id);else v(e)},m=e=>{a=e},p=(e,o)=>{Reflect.has(n,e)&&r((t=>(t[e].scrollTop=o??0,t)))},T=e=>{a!==c&&s.set(a,e)},A=e=>{a!==c&&i.set(a,e)};return e.createComponent(l.Provider,{get value(){return{saveBodyScrollTop:t.saveBodyScrollTop,elements:n,closeSymbol:c,onActivated:T,onDeactivated:A,insertElement:d,saveScrollTop:p,removeAliveElement:u,setCurrentComponentId:m}},get children(){return t.children}})},exports.AliveTransfer=function(o,c,a){var{elements:s,saveBodyScrollTop:i,closeSymbol:d,insertElement:v,saveScrollTop:u,setCurrentComponentId:m}=t.useContext(l);Reflect.has(s,c)||(m(c),t.createRoot((l=>{v({id:c,dispose:l,component:e.createComponent(o,{}),onDeactivated:null,onActivated:null,owner:t.getOwner,scrollTop:0,children:Array.isArray(a)?a:null})})));var p=e=>{if(i)if("cacheScroll"===e){var o=document.documentElement.scrollTop||document.body.scrollTop||0;s[c]?.scrollTop!==o&&u(c,o)}else"scrollTo"===e&&(clearTimeout(n),n=setTimeout((()=>{var e;e=s[c]?.scrollTop,document.documentElement.scrollTop=document.body.scrollTop=e||0,r=0}),r))};return t.createEffect((()=>{s[c]?.onActivated?.(),p("scrollTo")})),t.onCleanup((()=>{m(d??""),s[c]?.onDeactivated?.(),p("cacheScroll")})),s[c]?.owner&&t.runWithOwner(s[c].owner,(()=>s[c]?.component))},exports.useAlive=function(){var{onActivated:e,onDeactivated:o,removeAliveElement:n}=t.useContext(l);return{onActivated:e,onDeactivated:o,removeAliveElement:n}};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createComponent as e}from"solid-js/web";import{createStore as o}from"solid-js/store";import{createContext as
|
|
1
|
+
import{createComponent as e}from"solid-js/web";import{createStore as o}from"solid-js/store";import{createContext as l,useContext as t,createRoot as n,getOwner as r,createEffect as c,onCleanup as a,runWithOwner as i}from"solid-js";var s=l({elements:{},insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScrollTop:()=>{},setCurrentComponentId:()=>{}});function d(l){var[t,n]=o();let r=Symbol("close"),c=r,a=new Map,i=new Map;var d=e=>{let o=e.id,l=a.get(o),t=i.get(o);a.delete(o),i.delete(o),n([o],{...e,onActivated:l,onDeactivated:t})},v=e=>{if(Reflect.has(t,e)){var o=t[e]?.children;o?.forEach((o=>o!==e&&v(o))),n((o=>(o[e].onDeactivated?.(),o[e].component=null,o[e].dispose?.(),o[e].dispose=null,o[e].owner=null,o[e].onActivated=null,o[e].onDeactivated=null,o[e].scrollTop=0,o[e].id="",o[e].children=null,o[e]=null,delete o[e],{...o})))}},m=e=>{if(null==e)for(const e of Object.values(t))v(e.id);else v(e)},u=e=>{c=e},p=(e,o)=>{Reflect.has(t,e)&&n((l=>(l[e].scrollTop=o??0,l)))},T=e=>{c!==r&&a.set(c,e)},f=e=>{c!==r&&i.set(c,e)};return e(s.Provider,{get value(){return{saveBodyScrollTop:l.saveBodyScrollTop,elements:t,closeSymbol:r,onActivated:T,onDeactivated:f,insertElement:d,saveScrollTop:p,removeAliveElement:m,setCurrentComponentId:u}},get children(){return l.children}})}let v,m=100;function u(o,l,d){var{elements:u,saveBodyScrollTop:p,closeSymbol:T,insertElement:f,saveScrollTop:A,setCurrentComponentId:h}=t(s);Reflect.has(u,l)||(h(l),n((t=>{f({id:l,dispose:t,component:e(o,{}),onDeactivated:null,onActivated:null,owner:r,scrollTop:0,children:Array.isArray(d)?d:null})})));var S=e=>{if(p)if("cacheScroll"===e){var o=document.documentElement.scrollTop||document.body.scrollTop||0;u[l]?.scrollTop!==o&&A(l,o)}else"scrollTo"===e&&(clearTimeout(v),v=setTimeout((()=>{var e;e=u[l]?.scrollTop,document.documentElement.scrollTop=document.body.scrollTop=e||0,m=0}),m))};return c((()=>{u[l]?.onActivated?.(),S("scrollTo")})),a((()=>{h(T??""),u[l]?.onDeactivated?.(),S("cacheScroll")})),u[l]?.owner&&i(u[l].owner,(()=>u[l]?.component))}function p(){var{onActivated:e,onDeactivated:o,removeAliveElement:l}=t(s);return{onActivated:e,onDeactivated:o,removeAliveElement:l}}export{d as AliveProvider,u as AliveTransfer,p as useAlive};
|
package/dist/readme.md
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# solid-alive
|
|
2
|
+
|
|
3
|
+
### 安装(install)
|
|
4
|
+
- pnpm add solid-alive ／ npm i solid-alive / yarn add solid-alive
|
|
5
|
+
### 描述(describe)
|
|
6
|
+
- 用于 solid 组件缓存,只测试过2级路由缓存
|
|
7
|
+
- 在 useAlive 中有 onActivated, onDeactivated,removeAliveElement 三个函数使用
|
|
8
|
+
- removeAliveElement: 函数, 可传一个参数, 不传就删除所有缓存 :
|
|
9
|
+
removeAliveElement('/home')
|
|
10
|
+
- onActivated / onDeactivated: 函数,只能传一个函数,多次调用只有最一个会调用.
|
|
11
|
+
onActivated(()=> console.log('actived') )
|
|
12
|
+
- 可记住body的高度,但要在 AliveProvider 中加 saveBodyScrollTop参数,但组件内部的滚动条问题自己解决
|
|
13
|
+
- 子父 缓存/删除 问题
|
|
14
|
+
- 如果某组件下有子组件,在父的 AliveTransfer中,
|
|
15
|
+
第三个参数,为数组 写上子组件的唯一id: ['/childrenId','asf',...]
|
|
16
|
+
- 使用见下图, 也可用 removeAliveElement 删除
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### 使用(use)
|
|
20
|
+
1 /index.tsx,AliveProvider将app 包裹, saveBodyScrollTop : 记住body滚动高度
|
|
21
|
+
```jsx
|
|
22
|
+
import { render } from 'solid-js/web'
|
|
23
|
+
import App from './App'
|
|
24
|
+
import { AliveProvider } from 'solid-alive'
|
|
25
|
+
const root = document.getElementById('root')
|
|
26
|
+
|
|
27
|
+
render(() =>
|
|
28
|
+
<AliveProvider saveBodyScrollTop>
|
|
29
|
+
<App />
|
|
30
|
+
</AliveProvider>
|
|
31
|
+
, root!)
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
2 /App.tsx ,在 solid-alive 中 有 AliveTransfer, 参数: JSX , id:string, children?:[string..]
|
|
35
|
+
```jsx
|
|
36
|
+
import { Route, Router } from '@solidjs/router';
|
|
37
|
+
import { AliveTransfer } from 'solid-alive';
|
|
38
|
+
|
|
39
|
+
import Home from './views/Home';
|
|
40
|
+
import Client from './views/Client';
|
|
41
|
+
import About from './views/About';
|
|
42
|
+
import Team from './views/Blog/Team';
|
|
43
|
+
import Blog from './views/Blog';
|
|
44
|
+
import Single from './views/Blog/Single';
|
|
45
|
+
|
|
46
|
+
// 单个
|
|
47
|
+
const AboutTsf = () => AliveTransfer(About, '/about');
|
|
48
|
+
|
|
49
|
+
// 当Blog 下有子组件时, 第三个参数一定要, 与子组件的
|
|
50
|
+
const BlogTsf = (props: any) =>
|
|
51
|
+
AliveTransfer(Blog.bind(null, props), '/blog', ['single', '/team']);
|
|
52
|
+
// blog 下的子组件
|
|
53
|
+
const SingleTsf = () => AliveTransfer(Single, 'single');
|
|
54
|
+
const TeamTsf = () => AliveTransfer(Team, '/team');
|
|
55
|
+
|
|
56
|
+
export default function App() {
|
|
57
|
+
return (
|
|
58
|
+
<Router>
|
|
59
|
+
{/* 这个Client 只是用于标签加跳转的,使用时可不用 */}
|
|
60
|
+
<Route component={Client}>
|
|
61
|
+
<Route component={Home} path={'/'} />
|
|
62
|
+
{/* 单个缓存 single */}
|
|
63
|
+
<Route component={AboutTsf} path={'/about'} />
|
|
64
|
+
{/* 父子 缓存 Parent Child Nesting */}
|
|
65
|
+
<Route component={BlogTsf} path={'/blog'}>
|
|
66
|
+
<Route component={TeamTsf} path={'team'} />
|
|
67
|
+
<Route component={SingleTsf} path={'single'} />
|
|
68
|
+
</Route>
|
|
69
|
+
</Route>
|
|
70
|
+
</Router>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
3 父 /views/Blog/index.tsx
|
|
75
|
+
```jsx
|
|
76
|
+
export default function Blog(props: any) {
|
|
77
|
+
return (
|
|
78
|
+
<div>
|
|
79
|
+
<h2>Blog</h2>
|
|
80
|
+
<div>{props.children}</div>
|
|
81
|
+
</div>
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
- 子 /views/Blog/Single/index.tsx 中
|
|
87
|
+
```jsx
|
|
88
|
+
import { useAlive } from "solid-alive"
|
|
89
|
+
|
|
90
|
+
export default function Single() {
|
|
91
|
+
const { onActivated,onDeactivated,removeAliveElement } = useAlive()
|
|
92
|
+
|
|
93
|
+
const click = () => {
|
|
94
|
+
removeAliveElement('/about') // delete '/about'; 删除 /about
|
|
95
|
+
// removeAliveElement() // delete all alive element; 会删除所有缓存的组件
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// not call 这个不会被调用
|
|
99
|
+
onActivated(()=>{
|
|
100
|
+
console.log('Single-activeated-1')
|
|
101
|
+
})
|
|
102
|
+
|
|
103
|
+
// call 这个会被调用, 这个是最后一个才会被调用,缓存进入
|
|
104
|
+
onActivated(()=>{
|
|
105
|
+
console.log('Single-activeated-2')
|
|
106
|
+
})
|
|
107
|
+
// 缓存离开,
|
|
108
|
+
onDeactivated(()=>{
|
|
109
|
+
console.log('Single-deactivated')
|
|
110
|
+
})
|
|
111
|
+
return (
|
|
112
|
+
<div>
|
|
113
|
+
<h2>Single</h2>
|
|
114
|
+
<input type="text" style={{border:'2px solid red'}} />
|
|
115
|
+
</div>
|
|
116
|
+
)
|
|
117
|
+
}
|
|
118
|
+
```
|
|
@@ -1,9 +1,2 @@
|
|
|
1
1
|
import { JSX } from 'solid-js';
|
|
2
|
-
/**
|
|
3
|
-
* @description ALive 组件用的 转换函数
|
|
4
|
-
* @param { JSX.Element } Componet（）＝＞ JSX.Element,
|
|
5
|
-
* @param { string } id string,自己的id 值,一定要唯一
|
|
6
|
-
* @param { Array<string> } [children] [string,...], 子组件的 id值 可不传，这样默认销毁时不会去干掉子组件，
|
|
7
|
-
* @returns { JSX.Element }
|
|
8
|
-
*/
|
|
9
2
|
export default function AliveTransfer(Component: () => JSX.Element, id: string, children?: Array<string>): JSX.Element;
|
package/dist/types/default.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export interface ProveiderProps {
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
export interface NodeInfo {
|
|
10
|
-
id: string
|
|
10
|
+
id: string | symbol
|
|
11
11
|
component: JSX.Element
|
|
12
12
|
dispose: (() => void) | null
|
|
13
13
|
owner: getOwner | null
|
|
@@ -18,7 +18,7 @@ export interface NodeInfo {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
export interface StoreProps {
|
|
21
|
-
[propsName: string]: NodeInfo
|
|
21
|
+
[propsName: string | symbol]: NodeInfo
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
export interface ContextProps {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "solid-alive",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "solid-alive",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -25,6 +25,10 @@
|
|
|
25
25
|
"LICENSE",
|
|
26
26
|
"dist"
|
|
27
27
|
],
|
|
28
|
+
"repository": {
|
|
29
|
+
"type": "git",
|
|
30
|
+
"url": "https://gitee.com/iuxs/solid-alive"
|
|
31
|
+
},
|
|
28
32
|
"author": "iuxs",
|
|
29
33
|
"license": "ISC",
|
|
30
34
|
"dependencies": {
|
package/readme.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# solid-alive
|
|
2
2
|
|
|
3
|
-
### 安装
|
|
3
|
+
### 安装(install)
|
|
4
4
|
- pnpm add solid-alive ／ npm i solid-alive / yarn add solid-alive
|
|
5
|
-
### 描述
|
|
5
|
+
### 描述(describe)
|
|
6
6
|
- 用于 solid 组件缓存,只测试过2级路由缓存
|
|
7
7
|
- 在 useAlive 中有 onActivated, onDeactivated,removeAliveElement 三个函数使用
|
|
8
8
|
- removeAliveElement: 函数, 可传一个参数, 不传就删除所有缓存 :
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
- 使用见下图, 也可用 removeAliveElement 删除
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
### 使用
|
|
19
|
+
### 使用(use)
|
|
20
20
|
1 /index.tsx,AliveProvider将app 包裹, saveBodyScrollTop : 记住body滚动高度
|
|
21
21
|
```jsx
|
|
22
22
|
import { render } from 'solid-js/web'
|