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 CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("solid-js/web"),l=require("solid-js/store"),o=require("solid-js"),t=o.createContext({elements:{},closeSymbol:Symbol("close"),insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScroll:()=>{},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,i=0,a=null;exports.AliveProvider=function(o){var[r,n]=l.createStore();let i=Symbol("close"),a=i,s=new Map,c=new Map,v=new Map;var d=e=>{let l=e.id,o=s.get(l),t=c.get(l),r=v.get(l);s.delete(l),c.delete(l),v.delete(l),n([l],Object.assign(Object.assign({},e),{onActivated:o,onDeactivated:t,domList:r}))},u=e=>{var l;if(Reflect.has(r,e)){var o=null===(l=r[e])||void 0===l?void 0:l.children;null==o||o.forEach((l=>l!==e&&u(l))),n((l=>{var o,t,r,n;return null===(t=(o=l[e]).onDeactivated)||void 0===t||t.call(o),l[e].component=null,null===(n=(r=l[e]).dispose)||void 0===n||n.call(r),l[e].dispose=null,l[e].owner=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]=null,delete l[e],l}))}},m=e=>{if(null==e)for(const e of Object.values(r))u(e.id);else u(e)},f=e=>{a=e},p=(e,o)=>{Reflect.has(r,e)&&n(l.produce((l=>{l[e].scroll=Object.assign({},o)})))},E=e=>{a!==i&&s.set(a,e)},L=e=>{a!==i&&c.set(a,e)},S=(e,l)=>{var o,t;if(a!==i){var r=(null!==(o=v.get(a))&&void 0!==o?o:new Map([])).set(e,{top:0,left:0});v.set(a,r),null===(t=null==l?void 0:l())||void 0===t||t(e)}},h=e=>{var l;for(const o of Object.values(r))if(null===(l=o.domList)||void 0===l?void 0:l.has(e))return o.domList.delete(e),e.scrollTop=0,e.scrollLeft=0,!0;return!1},A=e=>{var l;for(const o of Object.values(r))if(null===(l=o.domList)||void 0===l?void 0:l.has(e))return o.domList.set(e,{top:0,left:0}),e.scrollTop=0,e.scrollLeft=0,!0;return!1};return e.createComponent(t.Provider,{get value(){return{scrollId:o.scrollId,behavior:o.behavior,transitionEnterName:o.transitionEnterName,elements:r,closeSymbol:i,onActivated:E,onDeactivated:L,insertElement:d,saveScroll:p,removeAliveElement:m,setCurrentComponentId:f,saveElScroll:S,resetElScroll:A,removeScrollEl:h}},get children(){return o.children}})},exports.AliveTransfer=function(l,s,c){var v,{behavior:d,elements:u,scrollId:m,closeSymbol:f,transitionEnterName:p,insertElement:E,saveScroll:L,setCurrentComponentId:S}=o.useContext(t);Reflect.has(u,s)||(S(s),o.createRoot((t=>{E({id:s,dispose:t,component:e.createComponent(l,{}),onDeactivated:null,onActivated:null,owner:o.getOwner,scroll:{top:0,left:0},children:Array.isArray(c)?c:null,domList:null})})));var h=e=>{var l;if(m&&a)if("cacheScroll"===e){var o="alwaysTop"===d?{top:0,left:0}:{top:a.scrollTop,left:a.scrollLeft};L(s,o)}else{var t=Date.now();if(t-n>200){const{top:e=0,left:o=0}=(null===(l=u[s])||void 0===l?void 0:l.scroll)||{};a.scrollTop=e,a.scrollLeft=o,n=t}}};if(p&&(null===(v=u[s])||void 0===v?void 0:v.owner)&&Date.now()-i>200){i=Date.now();let e=()=>{var e;return null===(e=u[s])||void 0===e?void 0:e.component},l=null==e?void 0:e();if("function"==typeof l&&(l=null==l?void 0:l()),l instanceof HTMLElement){var A=r[p]||p;l.classList.add(A);const e=()=>{l.classList.remove(A),l.removeEventListener("animationend",e)};l.addEventListener("animationend",e)}}return o.createEffect((()=>{var e,l,o;m&&!a&&(a=document.getElementById(m),!a&&console.error(`[solid-alive] scrollId: ${m} is null `)),null===(l=(e=u[s]).onActivated)||void 0===l||l.call(e),h("scrollTo"),null===(o=u[s].domList)||void 0===o||o.forEach(((e,l)=>{l.scrollTop=e.top,l.scrollLeft=e.left}))})),o.onCleanup((()=>{var e,l,o;S(f),null===(l=(e=u[s]).onDeactivated)||void 0===l||l.call(e),h("cacheScroll"),null===(o=u[s].domList)||void 0===o||o.forEach(((e,l,o)=>o.set(l,{top:l.scrollTop,left:l.scrollLeft})))})),o.runWithOwner(u[s].owner,(()=>u[s].component))},exports.useAlive=function(){var{onActivated:e,onDeactivated:l,removeAliveElement:r,saveElScroll:n,resetElScroll:i,removeScrollEl:a}=o.useContext(t);return{onActivated:e,onDeactivated:l,removeAliveElement:r,directiveSaveScroll:n,resetElScroll:i,removeScrollEl:a}};
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 o}from"solid-js/store";import{createContext as t,useContext as n,createRoot as r,getOwner as i,createEffect as a,onCleanup as s,runWithOwner as c}from"solid-js";var d=t({elements:{},closeSymbol:Symbol("close"),insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScroll:()=>{},setCurrentComponentId:()=>{},saveElScroll:()=>{},resetElScroll:()=>!0,removeScrollEl:()=>!0});function v(t){var[n,r]=l();let i=Symbol("close"),a=i,s=new Map,c=new Map,v=new Map;var u=e=>{let l=e.id,o=s.get(l),t=c.get(l),n=v.get(l);s.delete(l),c.delete(l),v.delete(l),r([l],Object.assign(Object.assign({},e),{onActivated:o,onDeactivated:t,domList:n}))},m=e=>{var l;if(Reflect.has(n,e)){var o=null===(l=n[e])||void 0===l?void 0:l.children;null==o||o.forEach((l=>l!==e&&m(l))),r((l=>{var o,t,n,r;return null===(t=(o=l[e]).onDeactivated)||void 0===t||t.call(o),l[e].component=null,null===(r=(n=l[e]).dispose)||void 0===r||r.call(n),l[e].dispose=null,l[e].owner=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]=null,delete l[e],l}))}},f=e=>{if(null==e)for(const e of Object.values(n))m(e.id);else m(e)},p=e=>{a=e},E=(e,l)=>{Reflect.has(n,e)&&r(o((o=>{o[e].scroll=Object.assign({},l)})))},L=e=>{a!==i&&s.set(a,e)},S=e=>{a!==i&&c.set(a,e)},h=(e,l)=>{var o,t;if(a!==i){var n=(null!==(o=v.get(a))&&void 0!==o?o:new Map([])).set(e,{top:0,left:0});v.set(a,n),null===(t=null==l?void 0:l())||void 0===t||t(e)}},_=e=>{var l;for(const o of Object.values(n))if(null===(l=o.domList)||void 0===l?void 0:l.has(e))return o.domList.delete(e),e.scrollTop=0,e.scrollLeft=0,!0;return!1},b=e=>{var l;for(const o of Object.values(n))if(null===(l=o.domList)||void 0===l?void 0:l.has(e))return o.domList.set(e,{top:0,left:0}),e.scrollTop=0,e.scrollLeft=0,!0;return!1};return e(d.Provider,{get value(){return{scrollId:t.scrollId,behavior:t.behavior,transitionEnterName:t.transitionEnterName,elements:n,closeSymbol:i,onActivated:L,onDeactivated:S,insertElement:u,saveScroll:E,removeAliveElement:f,setCurrentComponentId:p,saveElScroll:h,resetElScroll:b,removeScrollEl:_}},get children(){return t.children}})}var u={appear:"index-module_appear__MaHzX",_appear:"index-module__appear__7KeRW",toLeft:"index-module_toLeft__s1PDL",_toLeft:"index-module__toLeft__SD-Zp"};let m=0,f=0,p=null;function E(l,o,t){var v,{behavior:E,elements:L,scrollId:S,closeSymbol:h,transitionEnterName:_,insertElement:b,saveScroll:A,setCurrentComponentId:D}=n(d);Reflect.has(L,o)||(D(o),r((n=>{b({id:o,dispose:n,component:e(l,{}),onDeactivated:null,onActivated:null,owner:i,scroll:{top:0,left:0},children:Array.isArray(t)?t:null,domList:null})})));var w=e=>{var l;if(S&&p)if("cacheScroll"===e){var t="alwaysTop"===E?{top:0,left:0}:{top:p.scrollTop,left:p.scrollLeft};A(o,t)}else{var n=Date.now();if(n-m>200){const{top:e=0,left:t=0}=(null===(l=L[o])||void 0===l?void 0:l.scroll)||{};p.scrollTop=e,p.scrollLeft=t,m=n}}};if(_&&(null===(v=L[o])||void 0===v?void 0:v.owner)&&Date.now()-f>200){f=Date.now();let e=()=>{var e;return null===(e=L[o])||void 0===e?void 0:e.component},l=null==e?void 0:e();if("function"==typeof l&&(l=null==l?void 0:l()),l instanceof HTMLElement){var g=u[_]||_;l.classList.add(g);const e=()=>{l.classList.remove(g),l.removeEventListener("animationend",e)};l.addEventListener("animationend",e)}}return a((()=>{var e,l,t;S&&!p&&(p=document.getElementById(S),!p&&console.error(`[solid-alive] scrollId: ${S} is null `)),null===(l=(e=L[o]).onActivated)||void 0===l||l.call(e),w("scrollTo"),null===(t=L[o].domList)||void 0===t||t.forEach(((e,l)=>{l.scrollTop=e.top,l.scrollLeft=e.left}))})),s((()=>{var e,l,t;D(h),null===(l=(e=L[o]).onDeactivated)||void 0===l||l.call(e),w("cacheScroll"),null===(t=L[o].domList)||void 0===t||t.forEach(((e,l,o)=>o.set(l,{top:l.scrollTop,left:l.scrollLeft})))})),c(L[o].owner,(()=>L[o].component))}function L(){var{onActivated:e,onDeactivated:l,removeAliveElement:o,saveElScroll:t,resetElScroll:r,removeScrollEl:i}=n(d);return{onActivated:e,onDeactivated:l,removeAliveElement:o,directiveSaveScroll:t,resetElScroll:r,removeScrollEl:i}}export{v as AliveProvider,E as AliveTransfer,L as useAlive};
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' } [transitionEnterName] 路由切换动画, 可以自己加
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 { string } Componet,
4
+ * @param { ()=> JSX.Element } Componet,
5
5
  * @param { string } id string,自己的id 值,一定要唯一
6
6
  * @param { Array<string> } [children] [string,...], 子组件的 id值 可不传,这样默认销毁时不会去干掉子组件,
7
7
  */
@@ -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: JSX.Element
24
- owner: Owner | null
25
- scroll: {top:number,left:number} | null
26
- domList: Map<Element, {top:number,left:number }> | null
27
- children?: Array<string> | null
28
- selfDom?:Element
29
- dispose: (() => void) | null
30
- onActivated: null | (() => void)
31
- onDeactivated: null | (() => void)
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
- saveScroll: (id: string, s:{top:number,left:number}) => void
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.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.16"
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.14.0",
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.3"
50
+ "typescript": "^5.4.5"
51
51
  }
52
52
  }
package/readme.md CHANGED
@@ -1,9 +1,9 @@
1
- # solid-alive
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
- - onActivated / onDeactivated: 函数,只能传一个函数,多次调用只有最一个会调用.
15
- onActivated(()=> console.log('actived'))
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
- // not call 这个不会被调用
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
  })