diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..ceb31fe
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Demo Page
+
+
+
+ Welcome to the Demo Page
+ This is a basic HTML template.
+
+
+
+
\ No newline at end of file
diff --git a/demo/package.json b/demo/package.json
new file mode 100644
index 0000000..195ee1e
--- /dev/null
+++ b/demo/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "demo",
+ "version": "0.0.1",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "dev": "vite"
+ },
+ "keywords": [],
+ "author": "abearxiong ",
+ "license": "MIT",
+ "type": "module",
+ "dependencies": {
+ "@kevisual/store": "link:.."
+ }
+}
\ No newline at end of file
diff --git a/demo/src/index.ts b/demo/src/index.ts
new file mode 100644
index 0000000..4f38a5e
--- /dev/null
+++ b/demo/src/index.ts
@@ -0,0 +1,17 @@
+console.log('index.js');
+import { Page } from '@kevisual/store/page';
+
+const page = new Page({
+ isListen: true,
+});
+
+page.addPage('/:id', 'user');
+
+page.subscribe('user', (params, state) => {
+ console.log('user', params, 'state', state);
+ return;
+});
+
+// page.navigate('/c', { id: 3 });
+// page.navigate('/c', { id: 2 });
+// page.refresh();
diff --git a/package.json b/package.json
index 0b4e61b..3d818d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@kevisual/store",
- "version": "0.0.1-alpha.3",
+ "version": "0.0.1-alpha.4",
"main": "dist/store.js",
"module": "dist/store.js",
"types": "dist/store.d.ts",
diff --git a/src/page.ts b/src/page.ts
index bcb299f..55c5879 100644
--- a/src/page.ts
+++ b/src/page.ts
@@ -1,10 +1,12 @@
import { getPathKey } from '@/utils/path-key.ts';
import { match } from 'path-to-regexp';
+import deepEqual from 'fast-deep-equal';
type PageOptions = {
path?: string;
key?: string;
basename?: string;
+ isListen?: boolean;
};
type PageModule = {
// 模块的key，如 user，定义模块的唯一标识
@@ -12,31 +14,80 @@ type PageModule = {
// 模块的path路径，如 /user/:id，match的时候会用到
path: string;
};
+type CallFn = (params: Record, state?: any, e?: any) => any;
+type CallbackInfo = {
+ fn: CallFn;
+ id: string;
+} & PageModule;
export class Page {
pageModule = new Map();
+ // pathname的第一个路径
path: string;
+ // pathname的第二个路径
key: string;
basename: string;
+ isListen: boolean;
+ callbacks = [] as CallbackInfo[];
constructor(opts?: PageOptions) {
const pathKey = getPathKey();
this.path = opts?.path ?? pathKey.path;
this.key = opts?.key ?? pathKey.key;
this.basename = opts?.basename ?? `/${this.path}/${this.key}`;
+ const isListen = opts?.isListen ?? true;
+ if (isListen) {
+ this.listen();
+ }
}
+ popstate(event?: PopStateEvent, manual?: boolean) {
+ const pathname = window.location.pathname;
+ // manual 为true时，表示手动调用，不需要检查是否相等
+ this.callbacks.forEach((item) => {
+ const result = this.check(item.key, pathname);
+ result && item.fn?.(result.params, event.state, { event, manual });
+ });
+ }
+ listen() {
+ this.isListen = true;
+ window.addEventListener('popstate', this.popstate.bind(this), false);
+ }
+ unlisten() {
+ this.isListen = false;
+ window.removeEventListener('popstate', this.popstate.bind(this), false);
+ }
+ /**
+ *
+ * @param path 路径
+ * @param key
+ */
addPage(path: string, key?: string) {
this.pageModule.set(key, { path, key });
}
- check(key: string, pathname?: string): boolean | Record {
- if (!key) {
- console.error('key is required');
- return;
- }
+ addObjectPages(pages: Record) {
+ Object.keys(pages).forEach((key) => {
+ this.addPage(pages[key], key);
+ });
+ }
+ addPages(pages: { path: string; key?: string }[]) {
+ pages.forEach((item) => {
+ this.addPage(item.path, item.key);
+ });
+ }
+ /**
+ * 检查当前路径是否匹配
+ * @param key
+ * @param pathname
+ * @returns
+ */
+ check(key: string, pathname?: string): false | { pathname: string; params: Record } {
const has = this.pageModule.has(key);
if (!has) {
console.error(`PageModule ${key} not found`);
return;
}
const pageModule = this.pageModule.get(key);
+ if (!pageModule) {
+ return false;
+ }
const location = window.location;
const _pathname = pathname || location.pathname;
const cur = _pathname.replace(this.basename, '');
@@ -46,23 +97,90 @@ export class Page {
if (result) {
result.path;
params = result.params;
- return params;
+ return { pathname: _pathname, params };
}
return false;
}
/**
- *
- * @returns 返回当前路径
+ * 订阅path监听事件
+ * @param key
+ * @param fn
+ * @param opts
+ * @returns
+ */
+ subscribe(key: string, fn?: CallFn, opts?: { pathname?: string; runImmediately?: boolean; id?: string }) {
+ const runImmediately = opts?.runImmediately ?? true; // 默认立即执行
+ const id = opts?.id ?? Math.random().toString(36).slice(2);
+ const path = this.pageModule.get(key)?.path;
+ if (!path) {
+ console.error(`PageModule ${key} not found`);
+ return () => {};
+ }
+ this.callbacks.push({ key, fn, id: id, path });
+ if (runImmediately) {
+ this.popstate({ state: window.history.state } as any, true);
+ }
+ return () => {
+ this.callbacks = this.callbacks.filter((item) => item.id !== id);
+ };
+ }
+ /**
+ * 返回当前路径，不包含basename
+ * @returns
*/
getPath() {
const location = window.location;
const pathname = location.pathname;
return pathname.replace(this.basename, '');
}
+ getAppPath() {
+ return this.path;
+ }
+ getAppKey() {
+ return this.key;
+ }
decodePath(path: string) {
return decodeURIComponent(path);
}
encodePath(path: string) {
return encodeURIComponent(path);
}
+ /**
+ * 如果state 和 pathname都相等，则不执行popstate
+ * @param path
+ * @param state
+ * @param check
+ * @returns
+ */
+ navigate(path: string | number, state?: any, check?: boolean) {
+ if (typeof path === 'number') {
+ window.history.go(path);
+ return;
+ }
+ const location = window.location;
+ const pathname = location.pathname;
+
+ const newPathname = new URL(this.basename + path, location.href).pathname;
+ if (pathname === newPathname) {
+ if (deepEqual(state, window.history.state)) {
+ return;
+ }
+ }
+ window.history.pushState(state, '', this.basename + path);
+ let _check = check ?? true;
+ if (_check) {
+ this.popstate({ state } as any, true);
+ }
+ }
+ replace(path: string, state?: any, check?: boolean) {
+ let _check = check ?? true;
+ window.history.replaceState(state, '', this.basename + path);
+ if (_check) {
+ this.popstate({ state } as any, true);
+ }
+ }
+ refresh() {
+ const state = window.history.state;
+ this.popstate({ state } as any, true);
+ }
}
diff --git a/src/store.ts b/src/store.ts
index c6f52b5..45261f8 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -62,4 +62,5 @@ export class StoreManager {
export const store = new StoreManager();
+
export { shallow, deepEqual };