kevisual/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

temp

Browse Source
This commit is contained in:
熊潇 2025-05-24 17:03:32 +08:00
commit 598e29cf5a
7 changed files with 259 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@kevisual/store",
"version": "0.0.4",
"version": "0.0.6",
"main": "dist/store.js",
"module": "dist/store.js",
"types": "dist/store.d.ts",
@ -26,6 +26,8 @@
"license": "ISC",
"description": "",
"devDependencies": {
"@kevisual/load": "workspace:*",
"@kevisual/types": "link:../types",
"@rollup/plugin-commonjs": "^28.0.3",
"@rollup/plugin-node-resolve": "^16.0.1",
"@rollup/plugin-typescript": "^12.1.2",
@ -34,14 +36,16 @@
"immer": "^10.1.1",
"lodash-es": "^4.17.21",
"nanoid": "^5.1.5",
"rollup": "^4.37.0",
"rollup": "^4.41.1",
"rollup-plugin-dts": "^6.2.1",
"ts-node": "^10.9.2",
"tslib": "^2.8.1",
"tsup": "^8.4.0",
"typescript": "^5.8.2",
"vite-plugin-dts": "^4.5.3",
"zustand": "^5.0.3"
"typescript": "^5.8.3",
"zustand": "^5.0.5",
"@kevisual/router": "^0.0.21",
"@rollup/plugin-terser": "^0.4.4",
"eventemitter3": "^5.0.1",
"path-to-regexp": "^8.2.0"
},
"publishConfig": {
"access": "public"
@ -60,8 +64,8 @@
"require": "./dist/web-config.js"
},
"./context": {
"import": "./dist/web-context.js",
"require": "./dist/web-context.js"
"import": "./dist/web-config.js",
"require": "./dist/web-config.js"
},
"./web-page.js": {
"import": "./dist/web-page.js",
@ -76,8 +80,5 @@
"types": "./dist-react/index.d.ts"
}
},
"dependencies": {
"eventemitter3": "^5.0.1",
"path-to-regexp": "^8.2.0"
}
"dependencies": {}
}

17
rollup.config.js
View File

@ -4,6 +4,7 @@ import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { dts } from 'rollup-plugin-dts';
import terser from '@rollup/plugin-terser';
/**
* @type {import('rollup').RollupOptions}
@ -77,4 +78,20 @@ export default [
},
plugins: [dts()],
},
{
input: 'src/app.ts',
output: {
file: 'dist/app.js',
format: 'iife',
},
plugins: [resolve({ browser: true }), commonjs(), typescript(), terser()],
},
{
input: 'src/app.ts',
output: {
file: 'dist/app.d.ts',
format: 'es',
},
plugins: [dts()],
},
];

28
src/app.ts Normal file
View File

@ -0,0 +1,28 @@
// 当前的功能，把所有的模块注入到windows对象当中
import * as WebEnv from './web-env.ts';
import * as Load from '@kevisual/load/browser';
import { Page } from './page.ts';
export class PageInit {
static isInit = false;
static init(opts?: { load?: boolean; page?: boolean }) {
if (PageInit.isInit) {
return;
}
const { load = true, page = false } = opts || {};
PageInit.isInit = true;
// bind to window, 必须要的获取全局的环境变量
const { useConfigKey, useContextKey } = WebEnv;
window.useConfigKey = useConfigKey;
window.useContextKey = useContextKey;
// @ts-ignore
window.webEnv = WebEnv;
// @ts-ignore
load && (window.Load = Load);
page &&
useContextKey('page', () => {
return new Page();
});
}
}
PageInit.init();

122
src/page.ts
View File

@ -1,5 +1,5 @@
import { getPathKey } from '@/utils/path-key.ts';
import { match } from 'path-to-regexp';
import * as pathToRegexp from 'path-to-regexp';
import deepEqual from 'fast-deep-equal';
const generateRandom = () => {
@ -7,8 +7,17 @@ const generateRandom = () => {
return crypto.randomUUID();
};
type PageOptions = {
/**
* 路径
*/
path?: string;
/**
* key
*/
key?: string;
/**
* basename
*/
basename?: string;
isListen?: boolean;
};
@ -23,7 +32,9 @@ type CallbackInfo = {
fn: CallFn;
id: string;
} & PageModule;
let currentUrl = location.href;
/**
* 根据basename,其中的path和key，来判断一个应用的模块。
*/
export class Page {
pageModule = new Map<string, PageModule>();
// pathname的第一个路径
@ -33,19 +44,51 @@ export class Page {
basename: string;
isListen: boolean;
callbacks = [] as CallbackInfo[];
ok = false;
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}`;
if (opts?.basename) {
this.basename = opts?.basename;
} else {
if (this.key) {
this.basename = `/${this.path}/${this.key}`;
} else {
const location = window.location;
this.basename = location.pathname;
}
}
this.clearEndSlash();
const isListen = opts?.isListen ?? true;
if (isListen) {
this.listen();
}
this.ok = !!this.key;
}
popstate(event?: PopStateEvent, manualOpts?: { id?: string; type: 'singal' | 'all' }) {
const pathname = window.location.pathname;
console.log('popstate', event);
/**
* 清除路径的结尾斜杠，所有的最后的斜杠都删除
*/
clearEndSlash() {
this.basename = this.basename.replace(/\/+$/, '');
return this;
}
/**
* 检查路径
*/
checkPath() {
const pathKey = getPathKey();
const { path, key } = pathKey;
this.path = path || '';
this.key = key || '';
this.ok = !!this.key;
this.basename = `/${this.path}/${this.key}`;
this.clearEndSlash();
return this;
}
popstate(event?: PopStateEvent, manualOpts?: { id?: string; type: 'singal' | 'all'; pathname?: string }) {
const pathname = manualOpts?.pathname ?? window.location.pathname;
if (manualOpts) {
if (manualOpts.type === 'singal') {
const item = this.callbacks.find((item) => item.id === manualOpts.id);
@ -62,7 +105,17 @@ export class Page {
result && item.fn?.(result.params, event.state, { event, manualOpts });
});
}
/**
* 调用callback中id或者pathname的函数, 其中id优先级高于pathname，若都没有，则从location.pathname中获取
* @param opts
*/
call(opts?: { id?: string; pathname?: string }) {
this.popstate({ state: window.history.state } as any, { ...opts, type: 'all' });
}
listen() {
if (this.isListen) {
return;
}
this.isListen = true;
window.addEventListener('popstate', this.popstate.bind(this), false);
}
@ -89,7 +142,7 @@ export class Page {
});
}
/**
* 检查当前路径是否匹配
* 检查当前路径是否匹配, 如何提交pathname，则检查pathname
* @param key
* @param pathname
* @returns
@ -106,8 +159,12 @@ export class Page {
}
const location = window.location;
const _pathname = pathname || location.pathname;
if (!_pathname.includes(this.basename)) {
// console.error(`PageModule ${key} not found`);
return false;
}
const cur = _pathname.replace(this.basename, '');
const routeMatch = match(pageModule.path, { decode: decodeURIComponent });
const routeMatch = pathToRegexp.match(pageModule.path, { decode: decodeURIComponent });
const result = routeMatch(cur);
let params = {};
if (result) {
@ -124,20 +181,22 @@ export class Page {
* @param opts
* @returns
*/
subscribe(key: string, fn?: CallFn, opts?: { pathname?: string; runImmediately?: boolean; id?: string }) {
async subscribe(key: string, fn?: CallFn, opts?: { pathname?: string; runImmediately?: boolean; id?: string }) {
const runImmediately = opts?.runImmediately ?? true; // 默认立即执行
const id = opts?.id ?? generateRandom();
const path = this.pageModule.get(key)?.path;
if (!path) {
const pageModule = this.pageModule.get(key);
if (!pageModule) {
console.error(`PageModule ${key} not found`);
return () => {};
}
const path = pageModule?.path || '';
this.callbacks.push({ key, fn, id: id, path });
if (runImmediately) {
const location = window.location;
const pathname = opts?.pathname ?? location.pathname;
const result = this.check(key, pathname);
if (result) {
// 如果是手动调用，则不需要检查是否相等，直接执行，而且是执行当前的subscribe的函数
this.popstate({ state: window.history.state } as any, { id, type: 'singal' });
}
}
@ -145,6 +204,9 @@ export class Page {
this.callbacks = this.callbacks.filter((item) => item.id !== id);
};
}
getPathKey() {
return getPathKey();
}
/**
* 返回当前路径，不包含basename
* @returns
@ -157,12 +219,26 @@ export class Page {
getAppPath() {
return this.path;
}
/**
* 返回当前key
* @returns
*/
getAppKey() {
return this.key;
}
/**
* 解码路径
* @param path
* @returns
*/
decodePath(path: string) {
return decodeURIComponent(path);
}
/**
* 编码路径
* @param path
* @returns
*/
encodePath(path: string) {
return encodeURIComponent(path);
}
@ -170,7 +246,7 @@ export class Page {
* 如果state 和 pathname都相等，则不执行popstate
* @param path
* @param state
* @param check
* @param check 是否检查, 默认检查
* @returns
*/
navigate(path: string | number, state?: any, check?: boolean) {
@ -193,6 +269,12 @@ export class Page {
this.popstate({ state } as any, { type: 'all' });
}
}
/**
* 替换当前路径
* @param path
* @param state
* @param check
*/
replace(path: string, state?: any, check?: boolean) {
let _check = check ?? true;
window.history.replaceState(state, '', this.basename + path);
@ -200,10 +282,26 @@ export class Page {
this.popstate({ state } as any, { type: 'all' });
}
}
/**
* 刷新当前页面
*/
refresh() {
const state = window.history.state;
this.popstate({ state } as any, { type: 'all' });
}
/**
* 检查路径是否匹配
* @param path
* @param checkPath
* @returns
*/
pathMatch(regexpPath: string, checkPath: string) {
return pathToRegexp.match(regexpPath, { decode: decodeURIComponent })(checkPath);
}
pathToRegexp = pathToRegexp;
static match(regexpPath: string, checkPath: string) {
return pathToRegexp.match(regexpPath, { decode: decodeURIComponent })(checkPath);
}
}
/**
* 获取history state

4
src/utils/path-key.ts
View File

@ -2,6 +2,8 @@ export const getPathKey = () => {
// 从localtion.href的路径中，/a/b 中 a为path，b为key
const pathname = location.pathname;
const paths = pathname.split('/');
const [path, key] = paths.slice(1);
let [path, key] = paths.slice(1);
path = path || '';
key = key || '';
return { path, key, id: path + '---' + key, prefix: `/${path}/${key}` };
};

104
src/web-env.ts
View File

@ -1,52 +1,80 @@
import { getPathKey } from './utils/path-key.ts';
import { BaseLoad } from '@kevisual/load';
const gt = (globalThis as any) || window || self;
type GlobalEnv = {
name?: string;
[key: string]: any;
};
// 从window对象中获取全局的环境变量，如果没有则初始化一个
export const useEnv = (initEnv?: GlobalEnv, initKey = 'config') => {
const env: GlobalEnv = (window as any)[initKey];
const env: GlobalEnv = gt[initKey];
const _env = env || initEnv;
if (!env) {
if (_env) {
(window as any)[initKey] = _env;
gt[initKey] = _env;
} else {
(window as any)[initKey] = {};
gt[initKey] = {};
}
}
return window[initKey] as GlobalEnv;
return gt[initKey] as GlobalEnv;
};
// 从全局环境变量中获取指定的key值，如果没有则初始化一个, key不存在，返回Env对象
export const useEnvKey = <T = any>(key: string, init?: () => T | null, initKey = 'config'): T => {
const _env = useEnv({}, initKey);
if (key && _env[key]) {
// 已经存在，直接返回
if (key && typeof _env[key] !== 'undefined') {
return _env[key];
}
// 不存在，但是有初始化函数，初始化的返回，同步函数，删除了重新加载？
if (key && init) {
_env[key] = init();
return _env[key];
}
return _env as any;
};
export const useEnvKeySync = async <T = any>(key: string, init?: () => Promise<T> | null, initKey = 'conifg'): Promise<T> => {
const _env = useEnv({}, initKey);
if (key && init) {
_env[key] = await init();
return _env[key];
}
if (key) {
return _env[key];
// 加载
const baseLoad = new BaseLoad();
const voidFn = async () => {
return _env[key];
};
const checkFn = async () => {
const loadRes = await baseLoad.load(voidFn, {
key,
isReRun: true,
checkSuccess: () => _env[key],
timeout: 5 * 60 * 1000,
interval: 1000,
//
});
if (loadRes.code !== 200) {
console.error('load key error');
return null;
}
return _env[key];
};
return checkFn() as T;
}
return _env as any;
// 不存在，没有初始化函数
console.error('key is empty ');
return null;
};
export const usePageEnv = (init?: () => {}, initKey = 'conifg') => {
const { id } = getPathKey();
return useEnvKey(id, init, initKey);
};
export const useEnvKeyNew = (key: string, initKey = 'conifg', opts?: { getNew?: boolean; init?: () => {} }) => {
const _env = useEnv({}, initKey);
if (key) {
delete _env[key];
}
if (opts?.getNew && opts.init) {
return useEnvKey(key, opts.init, initKey);
} else if (opts?.getNew) {
return useEnvKey(key, null, initKey);
}
};
type GlobalContext = {
name?: string;
[key: string]: any;
@ -55,14 +83,13 @@ export const useContext = (initContext?: GlobalContext) => {
return useEnv(initContext, 'context');
};
export const useContextKey = <T = any>(key: string, init?: () => T): T => {
export const useContextKey = <T = any>(key: string, init?: () => T, isNew?: boolean): T => {
if (isNew) {
return useEnvKeyNew(key, 'context', { getNew: true, init });
}
return useEnvKey(key, init, 'context');
};
export const useContextKeySync = async <T = any>(key: string, init?: () => Promise<T>): Promise<T> => {
return useEnvKeySync(key, init, 'context');
};
export const usePageContext = (init?: () => {}) => {
const { id } = getPathKey();
return useContextKey(id, init);
@ -76,15 +103,36 @@ export const useConfig = (initConfig?: GlobalConfig) => {
return useEnv(initConfig, 'config');
};
export const useConfigKey = <T = any>(key: string, init?: () => T): T => {
export const useConfigKey = <T = any>(key: string, init?: () => T, isNew?: boolean): T => {
if (isNew) {
return useEnvKeyNew(key, 'config', { getNew: true, init });
}
return useEnvKey(key, init, 'config');
};
export const useConfigKeySync = async <T = any>(key: string, init?: () => Promise<T>): Promise<T> => {
return useEnvKeySync(key, init, 'config');
};
export const usePageConfig = (init?: () => {}) => {
const { id } = getPathKey();
return useConfigKey(id, init);
};
class InitEnv {
static isInit = false;
static init(opts?: { load?: boolean; page?: boolean }) {
if (InitEnv.isInit) {
return;
}
const { load = true, page = false } = opts || {};
InitEnv.isInit = true;
// bind to window, 必须要的获取全局的环境变量
// @ts-ignore
gt.useConfigKey = useConfigKey;
// @ts-ignore
gt.useContextKey = useContextKey;
// @ts-ignore
gt.webEnv = { useConfigKey, useContextKey };
// @ts-ignore
load && (gt.Load = BaseLoad);
}
}
InitEnv.init();

17
src/web.ts
View File

@ -1,7 +1,14 @@
export * from './page.ts';
export * from './web-env.ts';
import { Page } from './page.ts';
import * as WebEnv from './web-env.ts';
export * from 'nanoid';
export * from 'path-to-regexp';
import { nanoid } from 'nanoid';
import * as PathToREgexp from 'path-to-regexp';
import * as Load from '@kevisual/load/browser';
export * from 'eventemitter3';
export const WebModule = {
Page,
WebEnv,
nanoid,
PathToREgexp,
Load,
};