solid-alive 0.1.1 → 0.1.3
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/types/AliveProvider.d.ts +1 -1
- package/dist/types/AliveTransfer.d.ts +1 -1
- package/dist/types/default.d.ts +17 -12
- package/package.json +5 -5
- package/readme.md +10 -7
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("solid-js/web"),l=require("solid-js/store"),
|
|
1
|
+
"use strict";var e=require("solid-js/web"),l=require("solid-js/store"),t=require("solid-js"),o=t.createContext({elements:{},scrollDom:{current:null},closeSymbol:Symbol("close"),insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},setElement:()=>{},setCurrentComponentId:()=>{},saveElScroll:()=>{},resetElScroll:()=>!0,removeScrollEl:()=>!0});var r={appear:"index-module_appear__MaHzX",_appear:"index-module__appear__7KeRW",toLeft:"index-module_toLeft__s1PDL",_toLeft:"index-module__toLeft__SD-Zp"};let n=0;exports.AliveProvider=function(r){var[n,i]=l.createStore(),a={current:null};let c=Symbol("close"),s=c,d=new Map,v=new Map,u=new Map;var m=e=>{let l=e.id,t=d.get(l),o=v.get(l),r=u.get(l);d.delete(l),v.delete(l),u.delete(l),i([l],Object.assign(Object.assign(Object.assign({},n[l]),e),{onActivated:t,onDeactivated:o,domList:r}))},f=e=>{var l;if(Reflect.has(n,e)){var t=null===(l=n[e])||void 0===l?void 0:l.children;null==t||t.forEach((l=>l!==e&&f(l))),i((l=>{var t,o;return l[e].onDeactivated=null,l[e].component=null,null===(o=(t=l[e]).dispose)||void 0===o||o.call(t),l[e].dispose=null,l[e].onActivated=null,l[e].onDeactivated=null,l[e].scroll=null,l[e].id="",l[e].children=null,l[e].domList=null,l[e].isTop=!1,l[e]=null,delete l[e],l}))}},p=e=>{if(null==e)for(const e of Object.values(n))f(e.id);else f(e)},E=e=>{s=e};const L=(e,t,o)=>{Reflect.has(n,e)&&i(l.produce((l=>{l[e][t]=o})))};var h=(e,l)=>{var t={onActivated:d,onDeactivated:v}[e];if(s!==c){var o=t.get(s)||new Set;o.size<100&&o.add(l)&&t.set(s,o)}},S=e=>{h("onActivated",e)},A=e=>{h("onDeactivated",e)},b=(e,l)=>{var t,o;if(s!==c){var r=(null!==(t=u.get(s))&&void 0!==t?t:new Map([])).set(e,{top:0,left:0});u.set(s,r),null===(o=null==l?void 0:l())||void 0===o||o(e)}},D=e=>{var l;for(const t of Object.values(n))if(null===(l=t.domList)||void 0===l?void 0:l.has(e))return t.domList.delete(e),e.scrollTop=0,e.scrollLeft=0,!0;return!1},_=e=>{var l;for(const t of Object.values(n))if(null===(l=t.domList)||void 0===l?void 0:l.has(e))return t.domList.set(e,{top:0,left:0}),e.scrollTop=0,e.scrollLeft=0,!0;return!1};return t.createEffect((()=>{r.scrollId&&(a.current=document.getElementById(r.scrollId),!a.current&&console.error(`[solid-alive] scrollId: ${r.scrollId} is null `))})),e.createComponent(o.Provider,{get value(){return{scrollDom:a,behavior:r.behavior,transitionEnterName:r.transitionEnterName,elements:n,closeSymbol:c,onActivated:S,onDeactivated:A,insertElement:m,setElement:L,removeAliveElement:p,setCurrentComponentId:E,saveElScroll:b,resetElScroll:_,removeScrollEl:D}},get children(){return r.children}})},exports.AliveTransfer=function(l,i,a){var c,{behavior:s,elements:d,scrollDom:v,closeSymbol:u,transitionEnterName:m,insertElement:f,setElement:p,setCurrentComponentId:E}=t.useContext(o);Reflect.has(d,i)||(E(i),f({id:i,children:Array.isArray(a)?new Set(a):null}),t.createRoot((t=>{var o;f({id:i,dispose:t,component:e.createComponent(l,{}),onDeactivated:null,onActivated:null,scroll:{top:0,left:0},domList:null});let r=null===(o=Object.values(d).find((e=>{var l;return null===(l=e.children)||void 0===l?void 0:l.has(i)})))||void 0===o?void 0:o.id;r&&E(r)})));var L=e=>{var l;if(v.current)if("cacheScroll"===e){var t="alwaysTop"===s?{top:0,left:0}:{top:v.current.scrollTop,left:v.current.scrollLeft};p(i,"scroll",t)}else{var o=Date.now();if(o-n>200){const{top:e=0,left:t=0}=(null===(l=d[i])||void 0===l?void 0:l.scroll)||{};v.current.scrollTop=e,v.current.scrollLeft=t,n=o}}},h=e=>{var l;if(d[e].isTop)return e;var t=null===(l=Object.values(d).find((l=>{var t;return null===(t=l.children)||void 0===t?void 0:t.has(e)})))||void 0===l?void 0:l.id;return t&&(t=h(t)),t||e};if(m){let e,l=h(i);if(l&&(e=null===(c=d[l])||void 0===c?void 0:c.component,p(l,"isTop",!0)),"function"==typeof e&&(e=null==e?void 0:e()),e instanceof HTMLElement){var S=r[m]||m;e.classList.add(S);const l=()=>{e.classList.remove(S),e.removeEventListener("animationend",l)};e.addEventListener("animationend",l)}}return t.createEffect((()=>{var e,l;null===(e=d[i].onActivated)||void 0===e||e.forEach((e=>e())),L("scrollTo"),null===(l=d[i].domList)||void 0===l||l.forEach(((e,l)=>{l.scrollTop=e.top,l.scrollLeft=e.left}))})),t.onCleanup((()=>{var e,l;E(u),null===(e=d[i].onDeactivated)||void 0===e||e.forEach((e=>e())),L("cacheScroll"),null===(l=d[i].domList)||void 0===l||l.forEach(((e,l,t)=>t.set(l,{top:l.scrollTop,left:l.scrollLeft})))})),d[i].component},exports.useAlive=function(){var{onActivated:e,onDeactivated:l,removeAliveElement:r,saveElScroll:n,resetElScroll:i,removeScrollEl:a}=t.useContext(o);return{onActivated:e,onDeactivated:l,removeAliveElement:r,directiveSaveScroll:n,resetElScroll:i,removeScrollEl:a}};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createComponent as e}from"solid-js/web";import{createStore as l,produce as
|
|
1
|
+
import{createComponent as e}from"solid-js/web";import{createStore as l,produce as t}from"solid-js/store";import{createContext as o,createEffect as r,useContext as n,createRoot as i,onCleanup as a}from"solid-js";var s=o({elements:{},scrollDom:{current:null},closeSymbol:Symbol("close"),insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},setElement:()=>{},setCurrentComponentId:()=>{},saveElScroll:()=>{},resetElScroll:()=>!0,removeScrollEl:()=>!0});function c(o){var[n,i]=l(),a={current:null};let c=Symbol("close"),d=c,v=new Map,u=new Map,m=new Map;var f=e=>{let l=e.id,t=v.get(l),o=u.get(l),r=m.get(l);v.delete(l),u.delete(l),m.delete(l),i([l],Object.assign(Object.assign(Object.assign({},n[l]),e),{onActivated:t,onDeactivated:o,domList:r}))},p=e=>{var l;if(Reflect.has(n,e)){var t=null===(l=n[e])||void 0===l?void 0:l.children;null==t||t.forEach((l=>l!==e&&p(l))),i((l=>{var t,o;return l[e].onDeactivated=null,l[e].component=null,null===(o=(t=l[e]).dispose)||void 0===o||o.call(t),l[e].dispose=null,l[e].onActivated=null,l[e].onDeactivated=null,l[e].scroll=null,l[e].id="",l[e].children=null,l[e].domList=null,l[e].isTop=!1,l[e]=null,delete l[e],l}))}},E=e=>{if(null==e)for(const e of Object.values(n))p(e.id);else p(e)},L=e=>{d=e};const h=(e,l,o)=>{Reflect.has(n,e)&&i(t((t=>{t[e][l]=o})))};var S=(e,l)=>{var t={onActivated:v,onDeactivated:u}[e];if(d!==c){var o=t.get(d)||new Set;o.size<100&&o.add(l)&&t.set(d,o)}},b=e=>{S("onActivated",e)},D=e=>{S("onDeactivated",e)},A=(e,l)=>{var t,o;if(d!==c){var r=(null!==(t=m.get(d))&&void 0!==t?t:new Map([])).set(e,{top:0,left:0});m.set(d,r),null===(o=null==l?void 0:l())||void 0===o||o(e)}},_=e=>{var l;for(const t of Object.values(n))if(null===(l=t.domList)||void 0===l?void 0:l.has(e))return t.domList.delete(e),e.scrollTop=0,e.scrollLeft=0,!0;return!1},T=e=>{var l;for(const t of Object.values(n))if(null===(l=t.domList)||void 0===l?void 0:l.has(e))return t.domList.set(e,{top:0,left:0}),e.scrollTop=0,e.scrollLeft=0,!0;return!1};return r((()=>{o.scrollId&&(a.current=document.getElementById(o.scrollId),!a.current&&console.error(`[solid-alive] scrollId: ${o.scrollId} is null `))})),e(s.Provider,{get value(){return{scrollDom:a,behavior:o.behavior,transitionEnterName:o.transitionEnterName,elements:n,closeSymbol:c,onActivated:b,onDeactivated:D,insertElement:f,setElement:h,removeAliveElement:E,setCurrentComponentId:L,saveElScroll:A,resetElScroll:T,removeScrollEl:_}},get children(){return o.children}})}var d={appear:"index-module_appear__MaHzX",_appear:"index-module__appear__7KeRW",toLeft:"index-module_toLeft__s1PDL",_toLeft:"index-module__toLeft__SD-Zp"};let v=0;function u(l,t,o){var c,{behavior:u,elements:m,scrollDom:f,closeSymbol:p,transitionEnterName:E,insertElement:L,setElement:h,setCurrentComponentId:S}=n(s);Reflect.has(m,t)||(S(t),L({id:t,children:Array.isArray(o)?new Set(o):null}),i((o=>{var r;L({id:t,dispose:o,component:e(l,{}),onDeactivated:null,onActivated:null,scroll:{top:0,left:0},domList:null});let n=null===(r=Object.values(m).find((e=>{var l;return null===(l=e.children)||void 0===l?void 0:l.has(t)})))||void 0===r?void 0:r.id;n&&S(n)})));var b=e=>{var l;if(f.current)if("cacheScroll"===e){var o="alwaysTop"===u?{top:0,left:0}:{top:f.current.scrollTop,left:f.current.scrollLeft};h(t,"scroll",o)}else{var r=Date.now();if(r-v>200){const{top:e=0,left:o=0}=(null===(l=m[t])||void 0===l?void 0:l.scroll)||{};f.current.scrollTop=e,f.current.scrollLeft=o,v=r}}},D=e=>{var l;if(m[e].isTop)return e;var t=null===(l=Object.values(m).find((l=>{var t;return null===(t=l.children)||void 0===t?void 0:t.has(e)})))||void 0===l?void 0:l.id;return t&&(t=D(t)),t||e};if(E){let e,l=D(t);if(l&&(e=null===(c=m[l])||void 0===c?void 0:c.component,h(l,"isTop",!0)),"function"==typeof e&&(e=null==e?void 0:e()),e instanceof HTMLElement){var A=d[E]||E;e.classList.add(A);const l=()=>{e.classList.remove(A),e.removeEventListener("animationend",l)};e.addEventListener("animationend",l)}}return r((()=>{var e,l;null===(e=m[t].onActivated)||void 0===e||e.forEach((e=>e())),b("scrollTo"),null===(l=m[t].domList)||void 0===l||l.forEach(((e,l)=>{l.scrollTop=e.top,l.scrollLeft=e.left}))})),a((()=>{var e,l;S(p),null===(e=m[t].onDeactivated)||void 0===e||e.forEach((e=>e())),b("cacheScroll"),null===(l=m[t].domList)||void 0===l||l.forEach(((e,l,t)=>t.set(l,{top:l.scrollTop,left:l.scrollLeft})))})),m[t].component}function m(){var{onActivated:e,onDeactivated:l,removeAliveElement:t,saveElScroll:o,resetElScroll:r,removeScrollEl:i}=n(s);return{onActivated:e,onDeactivated:l,removeAliveElement:t,directiveSaveScroll:o,resetElScroll:r,removeScrollEl:i}}export{c as AliveProvider,u as AliveTransfer,m as useAlive};
|
|
@@ -4,6 +4,6 @@ import { ProveiderProps } from './default';
|
|
|
4
4
|
* @param children jsx.element
|
|
5
5
|
* @param { string } [scrollId] id,如 'root' 会在切换组件时的动作,默认saveScrollTop
|
|
6
6
|
* @param { 'alwaysTop'|'saveScroll' } [behavior] dom元素滚动条会如何保持
|
|
7
|
-
* @param { 'appear'|'toLeft'
|
|
7
|
+
* @param { 'appear'|'toLeft' } [transitionEnterName] 路由切换动画, 可以自己加
|
|
8
8
|
*/
|
|
9
9
|
export default function AliveProvider(props: ProveiderProps): import("solid-js").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { JSX } from 'solid-js';
|
|
2
2
|
/**
|
|
3
3
|
* @description Alive 组件用的 转换函数
|
|
4
|
-
* @param {
|
|
4
|
+
* @param { ()=> JSX.Element } Componet,
|
|
5
5
|
* @param { string } id string,自己的id 值,一定要唯一
|
|
6
6
|
* @param { Array<string> } [children] [string,...], 子组件的 id值 可不传,这样默认销毁时不会去干掉子组件,
|
|
7
7
|
*/
|
package/dist/types/default.d.ts
CHANGED
|
@@ -9,9 +9,9 @@ declare module 'solid-js' {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export interface pub {
|
|
12
|
-
scrollId?: string
|
|
12
|
+
scrollId?: string // 保存
|
|
13
13
|
behavior?: 'alwaysTop' | 'saveScroll'
|
|
14
|
-
transitionEnterName?: 'appear' |'toLeft'
|
|
14
|
+
transitionEnterName?: 'appear' | 'toLeft'
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
export interface ProveiderProps extends pub {
|
|
@@ -20,15 +20,19 @@ export interface ProveiderProps extends pub {
|
|
|
20
20
|
|
|
21
21
|
export interface NodeInfo {
|
|
22
22
|
id: string
|
|
23
|
-
component
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
23
|
+
component?: JSX.Element
|
|
24
|
+
scroll?: { top: number; left: number } | null
|
|
25
|
+
domList?: Map<Element, { top: number; left: number }> | null
|
|
26
|
+
children?: Set<string> | null
|
|
27
|
+
dispose?: (() => void) | null
|
|
28
|
+
onActivated?: null | Set<() => void>
|
|
29
|
+
onDeactivated?: null | Set<() => void>
|
|
30
|
+
isTop?: boolean
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
export interface SetElement {
|
|
35
|
+
<T extends keyof NodeInfo>(id: string, prop: T, v: NodeInfo[T]): void
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
export interface StoreProps {
|
|
@@ -36,13 +40,14 @@ export interface StoreProps {
|
|
|
36
40
|
}
|
|
37
41
|
|
|
38
42
|
export interface ContextProps extends pub {
|
|
43
|
+
scrollDom: { current: Element | null }
|
|
39
44
|
elements: StoreProps
|
|
40
45
|
closeSymbol: symbol
|
|
41
46
|
insertElement: (d: NodeInfo) => void
|
|
42
47
|
onActivated: (cb: () => void) => void
|
|
43
48
|
onDeactivated: (cb: () => void) => void
|
|
44
49
|
removeAliveElement: (id?: string) => void
|
|
45
|
-
|
|
50
|
+
setElement: SetElement
|
|
46
51
|
setCurrentComponentId: (id: string | symbol) => void
|
|
47
52
|
saveElScroll: (dom: Element) => void // 用来 保存 某一个dom, 暂时用来保存scroll
|
|
48
53
|
resetElScroll: (dom: Element) => boolean // 重置高度, 变成0
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "solid-alive",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"author": "1iuxs",
|
|
4
5
|
"description": "solid-alive",
|
|
5
6
|
"type": "module",
|
|
6
7
|
"main": "dist/index.cjs",
|
|
@@ -29,10 +30,9 @@
|
|
|
29
30
|
"type": "git",
|
|
30
31
|
"url": "https://github.com/iuxs/solid-alive"
|
|
31
32
|
},
|
|
32
|
-
"author": "iuxs",
|
|
33
33
|
"license": "ISC",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"solid-js": "^1.8.
|
|
35
|
+
"solid-js": "^1.8.17"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@rollup/plugin-json": "^6.1.0",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
"@rollup/plugin-typescript": "^11.1.6",
|
|
41
41
|
"@types/css-modules": "^1.0.5",
|
|
42
42
|
"autoprefixer": "^10.4.19",
|
|
43
|
-
"rollup": "^4.
|
|
43
|
+
"rollup": "^4.18.0",
|
|
44
44
|
"rollup-plugin-cleanup": "^3.2.1",
|
|
45
45
|
"rollup-plugin-postcss": "^4.0.2",
|
|
46
46
|
"rollup-plugin-serve": "^1.1.1",
|
|
47
47
|
"rollup-plugin-terser": "^7.0.2",
|
|
48
48
|
"rollup-plugin-typescript2": "^0.36.0",
|
|
49
49
|
"rollup-preset-solid": "^2.0.1",
|
|
50
|
-
"typescript": "^5.4.
|
|
50
|
+
"typescript": "^5.4.5"
|
|
51
51
|
}
|
|
52
52
|
}
|
package/readme.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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
|
-
- 用于 solid 组件缓存,只测试过2
|
|
6
|
+
- 用于 solid 组件缓存,只测试过2级路由缓存, 有过渡动画, 可缓存组件内的滚动条
|
|
7
7
|
- AliveProvider
|
|
8
8
|
- scrollId : 想滚动的元素id, 我用的getElementById
|
|
9
9
|
- behavior : 想 scrollId 的滚动条是 alwaysTop / savaScroll
|
|
@@ -11,8 +11,9 @@
|
|
|
11
11
|
- 在 useAlive
|
|
12
12
|
- removeAliveElement: 函数, 可传一个参数, 不传就删除所有缓存 :
|
|
13
13
|
removeAliveElement('/home')
|
|
14
|
-
-
|
|
15
|
-
|
|
14
|
+
- onActivated / onDeactivated: 函数,只能传一个函数
|
|
15
|
+
- onActivated(()=> console.log('actived'))
|
|
16
|
+
- <table><tr><td bgcolor=#ff0>现在多个onActivated/onDeactivated 会被保存,在一个组件 内不要有多个onActivated/onDeactivated函数</td></tr></table>
|
|
16
17
|
- directiveSaveScroll: 保存滚动条指令, 不过能不用就不用, 但组件不能使用,只能标签!!!ref会拿不到dom
|
|
17
18
|
- resetElScroll : 重置元素的滚动条
|
|
18
19
|
- removeScrollEl : 删除元素在alive中保存的dom
|
|
@@ -29,9 +30,10 @@
|
|
|
29
30
|
import { render } from 'solid-js/web'
|
|
30
31
|
import App from './App'
|
|
31
32
|
import { AliveProvider } from 'solid-alive'
|
|
32
|
-
const root = document.getElementById('root')
|
|
33
33
|
import 'solid-alive/dist/styles/style.css' // transition css,
|
|
34
34
|
|
|
35
|
+
const root = document.getElementById('root')
|
|
36
|
+
|
|
35
37
|
render(() =>
|
|
36
38
|
{/* save id is client scroll, */}
|
|
37
39
|
<AliveProvider behavior="alwaysTop" scrollId='client' transitionEnterName='appear'>
|
|
@@ -104,17 +106,18 @@ export default function Single() {
|
|
|
104
106
|
resetElScroll,
|
|
105
107
|
} = useAlive()
|
|
106
108
|
|
|
109
|
+
let divRef: Element | undefined = undefined
|
|
107
110
|
const click = () => {
|
|
108
111
|
removeAliveElement('/about') // delete '/about'; 删除 /about
|
|
109
112
|
// removeAliveElement() // delete all alive element; 会删除所有缓存的组件
|
|
110
113
|
}
|
|
111
114
|
|
|
112
|
-
//
|
|
115
|
+
//todo call 这个会被调用
|
|
113
116
|
onActivated(()=>{
|
|
114
117
|
console.log('Single-activeated-1')
|
|
115
118
|
})
|
|
116
119
|
|
|
117
|
-
// call
|
|
120
|
+
//todo call 这个依然会被调用
|
|
118
121
|
onActivated(()=>{
|
|
119
122
|
console.log('Single-activeated-2')
|
|
120
123
|
})
|