solid-alive 0.0.3

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("solid-js/web"),t=require("solid-js/store"),o=require("solid-js"),n=o.createContext({elements:{},insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScrollTop:()=>{},setCurrentComponentId:()=>{}});exports.AliveProvider=function(o){var[l,r]=t.createStore();let c=Symbol("close"),s=c,a=new Map,i=new Map;const d=e=>{let t=e.id,o=a.get(t),n=i.get(t);a.delete(t),i.delete(t),r([t],{...e,onActivated:o,onDeactivated:n})},v=e=>{if(e)Reflect.has(l,e)&&(e=>{var t=l[e]?.children;t?.forEach((t=>t!==e&&v(t))),r((t=>(t[e].onDeactivated?.(),t[e].component=null,t[e].dispose?.(),t[e].dispose=null,t[e].owner=null,t[e].onActivated=null,t[e].onDeactivated=null,t[e].scrollTop=0,t[e].id="",t[e].children=null,t[e]=null,delete t[e],{...t})))})(e);else for(const e of Object.values(l))v(e.id)};var u=e=>{s=e},m=(e,t)=>{Reflect.has(l,e)&&r((o=>(o[e].scrollTop=t??0,o)))},p=e=>{"string"==typeof s&&a.set(s,e)},f=e=>{"string"==typeof s&&i.set(s,e)};return e.createComponent(n.Provider,{get value(){return{saveBodyScrollTop:o.saveBodyScrollTop,elements:l,closeSymbol:c,onActivated:p,onDeactivated:f,insertElement:d,saveScrollTop:m,removeAliveElement:v,setCurrentComponentId:u}},get children(){return o.children}})},exports.AliveTransfer=function(t,l,r){var{elements:c,saveBodyScrollTop:s,closeSymbol:a,insertElement:i,saveScrollTop:d,setCurrentComponentId:v}=o.useContext(n);Reflect.has(c,l)||(v(l),o.createRoot((n=>{i({id:l,dispose:n,component:e.createComponent(t,{}),onDeactivated:null,onActivated:null,owner:o.getOwner,scrollTop:0,children:Array.isArray(r)?r:null})})));var u=e=>{if(s)if("cache"===e){var t=document.documentElement.scrollTop||document.body.scrollTop||0;c[l]?.scrollTop!==t&&d(l,t)}else"scroll"===e&&setTimeout((()=>{var e;e=c[l]?.scrollTop,document.documentElement.scrollTop=document.body.scrollTop=e||0}),100)};return o.createEffect((()=>{c[l]?.onActivated?.(),u("scroll")})),o.onCleanup((()=>{v(a??""),c[l]?.onDeactivated?.(),u("cache")})),c[l]?.owner&&o.runWithOwner(c[l].owner,(()=>c[l]?.component))},exports.useAlive=function(){var{onActivated:e,onDeactivated:t,removeAliveElement:l}=o.useContext(n);return{onActivated:e,onDeactivated:t,removeAliveElement:l}};

package/dist/index.js

@@ -0,0 +1 @@
+import{createComponent as e}from"solid-js/web";import{createStore as o}from"solid-js/store";import{createContext as t,useContext as l,createRoot as n,getOwner as r,createEffect as c,onCleanup as s,runWithOwner as a}from"solid-js";var i=t({elements:{},insertElement:()=>{},onDeactivated:()=>{},onActivated:()=>{},removeAliveElement:()=>{},saveScrollTop:()=>{},setCurrentComponentId:()=>{}});function d(t){var[l,n]=o();let r=Symbol("close"),c=r,s=new Map,a=new Map;const d=e=>{let o=e.id,t=s.get(o),l=a.get(o);s.delete(o),a.delete(o),n([o],{...e,onActivated:t,onDeactivated:l})},v=e=>{if(e)Reflect.has(l,e)&&(e=>{var o=l[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})))})(e);else for(const e of Object.values(l))v(e.id)};var m=e=>{c=e},p=(e,o)=>{Reflect.has(l,e)&&n((t=>(t[e].scrollTop=o??0,t)))},u=e=>{"string"==typeof c&&s.set(c,e)},f=e=>{"string"==typeof c&&a.set(c,e)};return e(i.Provider,{get value(){return{saveBodyScrollTop:t.saveBodyScrollTop,elements:l,closeSymbol:r,onActivated:u,onDeactivated:f,insertElement:d,saveScrollTop:p,removeAliveElement:v,setCurrentComponentId:m}},get children(){return t.children}})}function v(o,t,d){var{elements:v,saveBodyScrollTop:m,closeSymbol:p,insertElement:u,saveScrollTop:f,setCurrentComponentId:T}=l(i);Reflect.has(v,t)||(T(t),n((l=>{u({id:t,dispose:l,component:e(o,{}),onDeactivated:null,onActivated:null,owner:r,scrollTop:0,children:Array.isArray(d)?d:null})})));var A=e=>{if(m)if("cache"===e){var o=document.documentElement.scrollTop||document.body.scrollTop||0;v[t]?.scrollTop!==o&&f(t,o)}else"scroll"===e&&setTimeout((()=>{var e;e=v[t]?.scrollTop,document.documentElement.scrollTop=document.body.scrollTop=e||0}),100)};return c((()=>{v[t]?.onActivated?.(),A("scroll")})),s((()=>{T(p??""),v[t]?.onDeactivated?.(),A("cache")})),v[t]?.owner&&a(v[t].owner,(()=>v[t]?.component))}function m(){var{onActivated:e,onDeactivated:o,removeAliveElement:t}=l(i);return{onActivated:e,onDeactivated:o,removeAliveElement:t}}export{d as AliveProvider,v as AliveTransfer,m as useAlive};

package/dist/types/AliveProvider.d.ts

@@ -0,0 +1,8 @@
+import { ProveiderProps } from './default';
+/**
+ * @description Alive
+ * @param children jsx.element
+ * @param { boolean } rememberScrollTop true/false, 默认false, 不会记住body的scrollTop高度
+ * @returns jsx.element
+ */
+export default function AliveProvider(props: ProveiderProps): import("solid-js").JSX.Element;

package/dist/types/AliveTransfer.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'solid-js';
+/**
+ * @description ALive 组件用的 转换函数
+ * @param { JSX.Element } Componet（）＝＞　JSX.Element,
+ * @param { string } id   string,自己的id 值,一定要唯一
+ * @param { Array<string> } [children]  [string,...], 子组件的 id值 可不传，这样默认销毁时不会去干掉子组件，
+ * @returns { JSX.Element }
+ */
+export default function AliveTransfer(Component: () => JSX.Element, id: string, children?: Array<string>): JSX.Element;

package/dist/types/context.d.ts

@@ -0,0 +1,3 @@
+import { ContextProps } from './default';
+declare var Context: import("solid-js").Context<ContextProps>;
+export default Context;

package/dist/types/default.d.ts

@@ -0,0 +1,34 @@
+import { getOwner } from 'solid-js/web'
+import { JSX } from 'solid-js'
+
+export interface ProveiderProps {
+  children: JSX.Element
+  saveBodyScrollTop?: boolean
+}
+
+export interface NodeInfo {
+  id: string
+  component: JSX.Element
+  dispose: (() => void) | null
+  owner: getOwner | null
+  onActivated: null | (() => void)
+  onDeactivated: null | (() => void)
+  scrollTop: number
+  children?: Array<string> | null
+}
+
+export interface StoreProps {
+  [propsName: string]: NodeInfo
+}
+
+export interface ContextProps {
+  elements: StoreProps
+  insertElement: (d: NodeInfo) => void
+  onActivated: (cb: () => void) => void
+  onDeactivated: (cb: () => void) => void
+  removeAliveElement: (id?: string) => void
+  saveScrollTop: (id: string, height: number) => void
+  setCurrentComponentId: (id: string | symbol) => void
+  saveBodyScrollTop?: boolean
+  closeSymbol?: symbol
+}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+import AliveProvider from './AliveProvider';
+import AliveTransfer from './AliveTransfer';
+import useAlive from './useAlive';
+export { AliveProvider, AliveTransfer, useAlive };

package/dist/types/useAlive.d.ts

@@ -0,0 +1,6 @@
+declare function useAlive(): {
+    onActivated: (cb: () => void) => void;
+    onDeactivated: (cb: () => void) => void;
+    removeAliveElement: (id?: string | undefined) => void;
+};
+export default useAlive;

package/dist/types/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function getScrollTop(): number;
+export declare function setScrollTop(h: number): void;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "solid-alive",
+  "version": "0.0.3",
+  "description": "solid-alive",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "build": "tsc && rollup -c",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "keep-alive",
+    "solid-js",
+    "keepalive",
+    "cache",
+    "solid-alive",
+    "solid-keep-alive",
+    "alive"
+  ],
+  "files": [
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "dist"
+  ],
+  "author": "iuxs",
+  "license": "ISC",
+  "dependencies": {
+    "solid-js": "^1.8.16"
+  },
+  "devDependencies": {
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "rollup": "^4.14.0",
+    "rollup-plugin-cleanup": "^3.2.1",
+    "rollup-plugin-css-only": "^4.5.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.4.3"
+  }
+}

package/readme.md

@@ -0,0 +1,118 @@
+# solid-alive
+
+### 安装
+ - pnpm add solid-alive ／ npm i solid-alive / yarn add solid-alive
+### 描述
+- 用于 solid 组件缓存,只测试过2级路由缓存
+- 在 useAlive 中有 onActivated, onDeactivated,removeAliveElement 三个函数使用
+  - removeAliveElement: 函数, 可传一个参数, 不传就删除所有缓存 :
+    removeAliveElement('/home')
+  - onActivated / onDeactivated: 函数,只能传一个函数,多次调用只有最一个会调用.
+    onActivated(()=> console.log('actived') )
+- 可记住body的高度,但要在 AliveProvider 中加 saveBodyScrollTop参数,但组件内部的滚动条问题自己解决
+- 子父 缓存/删除 问题
+  -  如果某组件下有子组件,在父的 AliveTransfer中, 
+    第三个参数,为数组 写上子组件的唯一id: ['/childrenId','asf',...]
+  -  使用见下图, 也可用 removeAliveElement 删除
+
+
+###  使用
+ 1 /index.tsx,AliveProvider将app 包裹, saveBodyScrollTop : 记住body滚动高度
+ ```jsx
+import { render } from 'solid-js/web'
+import App from './App'
+import { AliveProvider } from  'solid-alive'
+const root = document.getElementById('root')
+
+render(() => 
+  <AliveProvider saveBodyScrollTop>
+    <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';
+
+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';
+
+// 单个
+const AboutTsf = () => AliveTransfer(About, '/about');
+
+// 当Blog 下有子组件时, 第三个参数一定要, 与子组件的
+const BlogTsf = (props: any) =>
+  AliveTransfer(Blog.bind(null, props), '/blog', ['single', '/team']);
+// blog 下的子组件
+const SingleTsf = () => AliveTransfer(Single, 'single');
+const TeamTsf = () => AliveTransfer(Team, '/team');
+
+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={TeamTsf} path={'team'} />
+          <Route component={SingleTsf} path={'single'} />
+        </Route>
+      </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 中
+```jsx
+import { useAlive } from "solid-alive"
+
+export default function Single() {
+  const { onActivated,onDeactivated,removeAliveElement } = useAlive()
+
+  const click = () => {
+    removeAliveElement('/about') // delete '/about'; 删除 /about
+    // removeAliveElement() // delete all alive element; 会删除所有缓存的组件
+  }
+
+  // not call 这个不会被调用
+  onActivated(()=>{
+    console.log('Single-activeated-1')
+  })
+ 
+  // call 这个会被调用, 这个是最后一个才会被调用,缓存进入
+  onActivated(()=>{
+    console.log('Single-activeated-2')
+  })
+  // 缓存离开,
+  onDeactivated(()=>{
+    console.log('Single-deactivated')
+  })
+  return (
+    <div>
+      <h2>Single</h2>
+      <input type="text" style={{border:'2px solid red'}} />
+    </div>
+  )
+}
+```