feat: remove web-env

bump
merge
2025-06-12 15:01:59 +08:00 · 2025-05-24 17:18:10 +08:00 · 2025-05-24 17:10:13 +08:00 · 2025-05-24 17:03:32 +08:00 · 2025-05-24 17:00:37 +08:00 · 2025-05-24 16:58:59 +08:00
20 changed files with 977 additions and 88 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@ build
 .cache
 .DS_Store
 *.log
+.turbo
+dist-react
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1,3 @@
+//npm.xiongxiao.me/:_authToken=${ME_NPM_TOKEN}
+@abearxiong:registry=https://npm.pkg.github.com
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
--- a/demo/index.html
+++ b/demo/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Demo Page</title>
+</head>
+
+<body>
+  <h1>Welcome to the Demo Page</h1>
+  <p>This is a basic HTML template.</p>
+  <script src="./src/index.ts" type="module"></script>
+  <form action="/submit" method="POST">
+    <label for="browser">选择浏览器：</label>
+    <input list="browsers" id="browser" name="browser" />
+    <datalist id="browsers">
+      <option value="Chrome">
+      <option value="Firefox">
+      <option value="Safari">
+      <option value="Edge">
+    </datalist>
+    <button type="submit">提交</button>
+  </form>
+
+  <style>
+    .custom-datalist-wrapper {
+      position: relative;
+      width: 200px;
+    }
+
+    .custom-datalist-input {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+
+    .custom-datalist-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: white;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      max-height: 150px;
+      overflow-y: auto;
+      display: none;
+      z-index: 1000;
+    }
+
+    .custom-datalist-dropdown.active {
+      display: block;
+    }
+
+    .custom-datalist-item {
+      padding: 8px;
+      cursor: pointer;
+    }
+
+    .custom-datalist-item:hover {
+      background-color: #f0f0f0;
+    }
+  </style>
+
+  <div class="custom-datalist-wrapper">
+    <input type="text" class="custom-datalist-input" placeholder="选择或输入..." oninput="filterDatalist(this)" />
+    <div class="custom-datalist-dropdown" id="datalist-dropdown">
+      <div class="custom-datalist-item" onclick="selectDatalistItem(this)">Apple</div>
+      <div class="custom-datalist-item" onclick="selectDatalistItem(this)">Banana</div>
+      <div class="custom-datalist-item" onclick="selectDatalistItem(this)">Cherry</div>
+      <div class="custom-datalist-item" onclick="selectDatalistItem(this)">Date</div>
+    </div>
+  </div>
+
+  <script>
+    function filterDatalist(input) {
+      const filter = input.value.toLowerCase();
+      const dropdown = document.getElementById('datalist-dropdown');
+      const items = dropdown.querySelectorAll('.custom-datalist-item');
+
+      dropdown.classList.add('active');
+      items.forEach(item => {
+        item.style.display = item.textContent.toLowerCase().includes(filter) ? 'block' : 'none';
+      });
+    }
+
+    function selectDatalistItem(item) {
+      const input = document.querySelector('.custom-datalist-input');
+      input.value = item.textContent;
+
+      const dropdown = document.getElementById('datalist-dropdown');
+      dropdown.classList.remove('active');
+    }
+  </script>
+</body>
+
+</html>
--- a/demo/package.json
+++ b/demo/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "demo",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite"
+  },
+  "keywords": [],
+  "author": "abearxiong <xiongxiao@xiongxiao.me>",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "@kevisual/store": "link:.."
+  }
+}
--- a/demo/src/index.ts
+++ b/demo/src/index.ts
@@ -0,0 +1,28 @@
+// console.log('index.js');
+// //@ts-ignore
+import { Page } from '@kevisual/store/page';
+
+const page = new Page({
+  isListen: true,
+});
+page.basename = '';
+page.addPage('/', 'home');
+page.addPage('/:id', 'user');
+page.subscribe(
+  'home',
+  (params, state) => {
+    console.log('home', params, 'state', state);
+    return;
+  },
+);
+page.subscribe('user', (params, state) => {
+  console.log('user', params, 'state', state);
+  return;
+});
+
+// page.navigate('/c', { id: 3 });
+// page.navigate('/c', { id: 2 });
+// page.refresh();
+
+// @ts-ignore
+window.page = page;
--- a/package.json
+++ b/package.json
@@ -1,18 +1,22 @@
 {
  "name": "@kevisual/store",
-  "version": "0.0.1-alpha.1",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "0.0.8",
+  "main": "dist/store.js",
+  "module": "dist/store.js",
+  "types": "dist/store.d.ts",
  "private": false,
  "type": "module",
  "scripts": {
+    "dev": "rollup -c -w",
+    "dev:lib": "rollup -c -w",
    "build": "npm run clean && rollup -c",
-    "test": "NODE_ENV=development node --experimental-vm-modules node_modules/jest/bin/jest.js --detectOpenHandles",
+    "build:app": "npm run build && rsync dist/* ../deploy/dist",
+    "build:lib": "npm run build",
    "clean": "rm -rf dist"
  },
  "files": [
-    "dist"
+    "dist",
+    "dist-react"
  ],
  "keywords": [
    "kevisual",
@@ -22,19 +26,27 @@
  "license": "ISC",
  "description": "",
  "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.1",
+    "@kevisual/context": "^0.0.3",
+    "@kevisual/load": "^0.0.6",
+    "@kevisual/router": "^0.0.21",
+    "@kevisual/types": "link:../types",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
    "@types/lodash-es": "^4.17.12",
+    "eventemitter3": "^5.0.1",
    "fast-deep-equal": "^3.1.3",
    "immer": "^10.1.1",
    "lodash-es": "^4.17.21",
-    "nanoid": "^5.0.7",
-    "rollup": "^4.24.0",
+    "nanoid": "^5.1.5",
+    "path-to-regexp": "^8.2.0",
+    "rollup": "^4.41.1",
+    "rollup-plugin-dts": "^6.2.1",
    "ts-node": "^10.9.2",
-    "tslib": "^2.8.0",
-    "typescript": "^5.6.3",
-    "zustand": "^5.0.0"
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "zustand": "^5.0.5"
  },
  "publishConfig": {
    "access": "public"
@@ -47,6 +59,22 @@
    ".": {
      "import": "./dist/store.js",
      "require": "./dist/store.js"
+    },
+    "./config": {
+      "import": "./dist/web-config.js",
+      "require": "./dist/web-config.js"
+    },
+    "./context": {
+      "import": "./dist/web-config.js",
+      "require": "./dist/web-config.js"
+    },
+    "./web-page.js": {
+      "import": "./dist/web-page.js",
+      "require": "./dist/web-page.js"
+    },
+    "./react": {
+      "import": "./dist-react/store-react.js",
+      "types": "./dist-react/index.d.ts"
    }
  }
 }
--- a/react/package.json
+++ b/react/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@kevisual/store-react",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev:lib": "vite build --watch",
+    "build:lib": "vite build",
+    "build": "vite build"
+  },
+  "keywords": [],
+  "author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
+  "license": "MIT",
+  "packageManager": "pnpm@10.6.5",
+  "type": "module",
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.2.3",
+    "vite-plugin-dts": "^4.5.3"
+  }
+}
--- a/react/src/Store.tsx
+++ b/react/src/Store.tsx
@@ -0,0 +1,91 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { StateCreator } from '../../src/store';
+import { shallow, useShallow } from 'zustand/shallow';
+import { useContextKey } from '../../src/web-context';
+import { UseBoundStore, StoreApi } from 'zustand';
+export const StoreContext = createContext<any>(null);
+
+export const initStoreFn: StateCreator<any, [], [], any> = (set, get, store) => {
+  return {
+    mark: '123',
+    setMark: (mark: string) => set({ mark }),
+    info: 'info',
+    setInfo: (info) => set({ info }),
+  };
+};
+
+export const StoreContextProvider = ({
+  children,
+  id,
+  stateCreator,
+}: {
+  children: React.ReactNode;
+  id: string;
+  stateCreator?: StateCreator<any, [], [], any>;
+}) => {
+  const store = useContextKey<any>('store');
+  if (!store) {
+    console.error('store not found');
+    return null;
+  }
+  const smStore = useMemo(() => {
+    return store.createIfNotExists(stateCreator || initStoreFn, id);
+  }, [id]);
+  const [state, setState] = useState(smStore);
+  useEffect(() => {
+    setState(smStore);
+  }, [smStore]);
+  return <StoreContext.Provider value={state}>{children}</StoreContext.Provider>;
+};
+
+type SimpleObject = Record<string, any>;
+
+export const useStore = function (selector: any): any {
+  const store = useContext(StoreContext);
+  const allState = store.getState();
+  const selectedState = selector ? selector(allState) : allState;
+  const [state, setState] = useState(selectedState);
+
+  useEffect(() => {
+    const unsubscribe = store.subscribe((newState: any) => {
+      const newSelectedState = selector ? selector(newState) : newState;
+      if (!shallow(state, newSelectedState)) {
+        setState(newSelectedState);
+      }
+    });
+    return () => unsubscribe();
+  }, [store, useShallow, state]);
+
+  return state;
+};
+useStore.getState = function (id: string) {
+  const store = useContextKey<any>('store');
+  if (!store) {
+    console.error('store not found');
+    return null;
+  }
+  return store.getStore(id).getState();
+};
+useStore.setState = function (id: string, state: any) {
+  const store = useContextKey<any>('store');
+  if (!store) {
+    console.error('store not found');
+    return null;
+  }
+  store.getStore(id).setState(state);
+};
+useStore.subscribe = function (fn: any) {
+  const store = useContextKey<any>('store');
+  if (!store) {
+    console.error('store not found');
+    return null;
+  }
+  return store.subscribe(fn);
+};
+export type BoundStore<T> = UseBoundStore<StoreApi<T>> & {
+  getState: (id: string) => T;
+  setState: (id: string, state: T) => void;
+  subscribe: (fn: (state: T) => void) => () => void;
+  createStore: (stateCreator: StateCreator<any, [], [], any>) => void;
+  createIfNotExists: (stateCreator: StateCreator<any, [], [], any>) => void;
+};
--- a/react/src/UseStoreContext.tsx
+++ b/react/src/UseStoreContext.tsx
@@ -0,0 +1,83 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { StateCreator } from '../../src/store';
+import { shallow, useShallow } from 'zustand/shallow';
+import { useContextKey } from '../../src/web-context';
+
+export const initStoreFn: StateCreator<any, [], [], any> = (set, get, store) => {
+  return {
+    description: 'this is a blank store',
+  };
+};
+export const useStoreContext = (id: string, stateCreator?: StateCreator<any, [], [], any>) => {
+  const StoreContext = createContext<any>(null);
+  const store = useContextKey<any>('store');
+  if (!store) {
+    console.error('store not found');
+    return null;
+  }
+  if (!stateCreator) {
+    console.error('stateCreator not found');
+    return null;
+  }
+
+  const StoreContextProvider = ({ children, id, stateCreator }: { children: React.ReactNode; id: string; stateCreator?: StateCreator<any, [], [], any> }) => {
+    const smStore = useMemo(() => {
+      console.log('stateCreator', stateCreator);
+      return store.createIfNotExists(stateCreator || initStoreFn, id);
+    }, [id]);
+    const [state, setState] = useState(smStore);
+    useEffect(() => {
+      setState(smStore);
+    }, [smStore]);
+    console.log('value', smStore.getState());
+    // console.log('value', state);
+    return <StoreContext.Provider value={state}>{children}</StoreContext.Provider>;
+  };
+  const useStore = (selector?: any) => {
+    const store = useContext(StoreContext);
+    const allState = store.getState();
+    const selectedState = selector ? selector(allState) : allState;
+    const [state, setState] = useState(selectedState);
+
+    useEffect(() => {
+      const unsubscribe = store.subscribe((newState: any) => {
+        const newSelectedState = selector ? selector(newState) : newState;
+        setState(newSelectedState);
+      });
+      return () => unsubscribe();
+    }, [store, useShallow, state]);
+  };
+  useEffect(() => {
+    // console.log('store', store);
+    // @ts-ignore
+    window.storeContext = {
+      // @ts-ignore
+      ...window.storeContext,
+      [id]: {
+        StoreContext,
+        Provider: ({ children }: { children: React.ReactNode }) => {
+          return (
+            <StoreContextProvider id={id} stateCreator={stateCreator}>
+              {children}
+            </StoreContextProvider>
+          );
+        },
+      },
+    };
+    return () => {
+      // @ts-ignore
+      delete window.storeContext[id];
+    };
+  }, [id]);
+  return {
+    StoreContext,
+    Provider: ({ children }: { children: React.ReactNode }) => {
+      return (
+        <StoreContextProvider id={id} stateCreator={stateCreator}>
+          {children}
+        </StoreContextProvider>
+      );
+    },
+    useStore,
+  };
+};
--- a/react/src/index.ts
+++ b/react/src/index.ts
@@ -0,0 +1 @@
+export * from './Store';
--- a/react/tsconfig.json
+++ b/react/tsconfig.json
@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    // "jsx": "react",
+    // "jsxFragmentFactory": "Fragment",
+    // "jsxFactory": "h",
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@kevisual/types",
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src",
+    "typings.d.ts"
+  ]
+}
--- a/react/vite.config.mjs
+++ b/react/vite.config.mjs
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: './src/index.ts',
+      formats: ['es'],
+    },
+    outDir: '../dist-react',
+    emptyOutDir: true,
+    sourcemap: true,
+    rollupOptions: {
+      external: ['react', 'react-jsx-runtime', 'zustand'],
+    },
+  },
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      outputDir: '../dist-react/types',
+    }),
+  ],
+});
--- a/readme.md
+++ b/readme.md
@@ -0,0 +1 @@
+# cdn 版 store services
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,25 +3,63 @@
 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}
 */
 export default [
  {
-    input: 'src/index.ts', // TypeScript 入口文件
+    input: 'src/store.ts', // TypeScript 入口文件
    output: {
      file: 'dist/store.js', // 输出文件
      format: 'es', // 输出格式设置为 ES 模块
    },
    plugins: [
-      resolve(), // 使用 @rollup/plugin-node-resolve 解析 node_modules 中的模块
+      resolve({ browser: true }), // 使用 @rollup/plugin-node-resolve 解析 node_modules 中的模块
      commonjs(), // 使用 @rollup/plugin-commonjs 解析 CommonJS 模块
-      typescript({
-        allowImportingTsExtensions: true,
-        noEmit: true,
-        exclude: [],
-      }), // 使用 @rollup/plugin-typescript 处理 TypeScript 文件
+      typescript(), // 使用 @rollup/plugin-typescript 处理 TypeScript 文件
    ],
  },
+  {
+    input: 'src/store.ts',
+    output: {
+      file: 'dist/store.d.ts',
+      format: 'es',
+    },
+    plugins: [dts()],
+  },
+  // {
+  //   input: 'src/web-env.ts',
+  //   output: {
+  //     file: 'dist/web-config.js',
+  //     format: 'es',
+  //   },
+  //   plugins: [resolve({ browser: true }), commonjs(), typescript()],
+  // },
+  // {
+  //   input: 'src/web-env.ts',
+  //   output: {
+  //     file: 'dist/web-config.d.ts',
+  //     format: 'es',
+  //   },
+  //   plugins: [dts()],
+  // },
+  {
+    input: 'src/page.ts',
+    output: {
+      file: 'dist/web-page.js',
+      format: 'es',
+    },
+    plugins: [resolve({ browser: true }), commonjs(), typescript()],
+  },
+  {
+    input: 'src/page.ts',
+    output: {
+      file: 'dist/web-page.d.ts',
+      format: 'es',
+    },
+    plugins: [dts()],
+  },
 ];
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,65 +0,0 @@
-import { createStore as createZutandStore, StateCreator, StoreApi } from 'zustand/vanilla';
-import { shallow } from 'zustand/shallow';
-import { get } from 'lodash-es';
-import deepEqual from 'fast-deep-equal';
-
-type Listener = (state: any, prevState: any) => void;
-export class StoreManager {
-  stores: Record<string, any>;
-  constructor() {
-    this.stores = {};
-  }
-  createStore<T = any, U extends T = any>(initialStore: StateCreator<T, [], [], U>, key: string) {
-    if (this.stores[key]) {
-      return this.stores[key];
-    }
-    this.stores[key] = createZutandStore(initialStore);
-    return this.stores[key];
-  }
-  create<T = any, U extends T = any>(initialStore: StateCreator<T, [], [], U>, key: string) {
-    return this.createStore(initialStore, key);
-  }
-  getStore(key: string) {
-    return this.stores[key];
-  }
-  removeStore(key: string) {
-    delete this.stores[key];
-  }
-  clearStores() {
-    this.stores = {};
-  }
-  shallow(objA: any, objB: any) {
-    return shallow(objA, objB);
-  }
-  subscribe(fn: Listener, { key, path, deep }: { key: string; path: string; deep?: boolean }) {
-    const _store = this.stores[key] as StoreApi<any>;
-    if (!_store) {
-      console.error('no store', key);
-      return;
-    }
-    return _store.subscribe((newState, oldState) => {
-      try {
-        const newPath = get(newState, path);
-        const oldPath = get(oldState, path);
-        if (!newPath && !oldPath) {
-          return;
-        }
-        if (deep) {
-          if (!deepEqual(newPath, oldPath)) {
-            fn?.(newState, oldState);
-          }
-          return;
-        }
-        if (!shallow(newPath, oldPath)) {
-          fn?.(newState, oldState);
-        }
-      } catch (e) {
-        console.error('subscribe error', e);
-      }
-    });
-  }
-}
-
-export const store = new StoreManager();
-
-export { shallow, deepEqual };
--- a/src/page.ts
+++ b/src/page.ts
@@ -0,0 +1,338 @@
+import { getPathKey } from '@/utils/path-key.ts';
+import * as pathToRegexp from 'path-to-regexp';
+import deepEqual from 'fast-deep-equal';
+
+const generateRandom = () => {
+  // return Math.random().toString(36).substring(8);
+  return crypto.randomUUID();
+};
+type PageOptions = {
+  /**
+   * 路径
+   */
+  path?: string;
+  /**
+   * key
+   */
+  key?: string;
+  /**
+   * basename
+   */
+  basename?: string;
+  isListen?: boolean;
+};
+type PageModule = {
+  // 模块的key，如 user，定义模块的唯一标识
+  key: string;
+  // 模块的path路径，如 /user/:id，match的时候会用到
+  path: string;
+};
+type CallFn = (params: Record<string, any>, state?: any, e?: any) => any;
+type CallbackInfo = {
+  fn: CallFn;
+  id: string;
+} & PageModule;
+/**
+ * 根据basename,其中的path和key，来判断一个应用的模块。
+ */
+export class Page {
+  pageModule = new Map<string, PageModule>();
+  // pathname的第一个路径
+  path: string;
+  // pathname的第二个路径
+  key: string;
+  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;
+    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;
+  }
+  /**
+   * 清除路径的结尾斜杠，所有的最后的斜杠都删除
+   */
+  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);
+        if (item) {
+          const result = this.check(item.key, pathname);
+          result && item.fn?.(result.params, event.state, { event });
+        }
+        return;
+      }
+    }
+    // manual 为true时，表示手动调用，不需要检查是否相等
+    this.callbacks.forEach((item) => {
+      const result = this.check(item.key, pathname);
+      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);
+  }
+  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 });
+  }
+  addObjectPages(pages: Record<string, string>) {
+    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);
+    });
+  }
+  /**
+   * 检查当前路径是否匹配, 如何提交pathname，则检查pathname
+   * @param key
+   * @param pathname
+   * @returns
+   */
+  check(key: string, pathname?: string): false | { pathname: string; params: Record<string, any> } {
+    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;
+    if (!_pathname.includes(this.basename)) {
+      // console.error(`PageModule ${key} not found`);
+      return false;
+    }
+    const cur = _pathname.replace(this.basename, '');
+    const routeMatch = pathToRegexp.match(pageModule.path, { decode: decodeURIComponent });
+    const result = routeMatch(cur);
+    let params = {};
+    if (result) {
+      result.path;
+      params = result.params;
+      return { pathname: _pathname, params };
+    }
+    return false;
+  }
+  /**
+   * 订阅path监听事件
+   * @param key
+   * @param fn
+   * @param opts
+   * @returns
+   */
+  async subscribe(key: string, fn?: CallFn, opts?: { pathname?: string; runImmediately?: boolean; id?: string }) {
+    const runImmediately = opts?.runImmediately ?? true; // 默认立即执行
+    const id = opts?.id ?? generateRandom();
+    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' });
+      }
+    }
+    return () => {
+      this.callbacks = this.callbacks.filter((item) => item.id !== id);
+    };
+  }
+  getPathKey() {
+    return getPathKey();
+  }
+  /**
+   * 返回当前路径，不包含basename
+   * @returns
+   */
+  getPath() {
+    const location = window.location;
+    const pathname = location.pathname;
+    return pathname.replace(this.basename, '');
+  }
+  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);
+  }
+  /**
+   * 如果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, { type: 'all' });
+    }
+  }
+  /**
+   * 替换当前路径
+   * @param path
+   * @param state
+   * @param check
+   */
+  replace(path: string, state?: any, check?: boolean) {
+    let _check = check ?? true;
+    let newPath = this.basename + path;
+    if (path.startsWith('http')) {
+      const url = new URL(path);
+      const origin = url.origin;
+      newPath = url.toString().replace(origin, '');
+    }
+    window.history.replaceState(state, '', newPath);
+    if (_check) {
+      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
+ * @returns
+ */
+export const getHistoryState = <T = Record<string, any>>() => {
+  const history = window.history;
+  const state = history.state || {};
+  return state as T;
+};
+
+/**
+ * 设置history state
+ * @param state
+ */
+export const setHistoryState = (state: any, url?: string) => {
+  const history = window.history;
+  const oldState = getHistoryState();
+  history.replaceState({ ...oldState, ...state }, '', url || window.location.href);
+};
+
+/**
+ * 清除history state
+ */
+export const clearHistoryState = (url?: string) => {
+  const history = window.history;
+  history.replaceState({}, '', url || window.location.href);
+};
--- a/src/store.ts
+++ b/src/store.ts
@@ -0,0 +1,123 @@
+import { createStore as createZutandStore, StateCreator, StoreApi } from 'zustand/vanilla';
+import { shallow } from 'zustand/shallow';
+import { get } from 'lodash-es';
+import deepEqual from 'fast-deep-equal';
+
+export const create = createZutandStore;
+export type { StateCreator, StoreApi };
+
+type Listener = (state: any, prevState: any) => void;
+
+export class StoreManager {
+  stores: Record<string, any>;
+  constructor() {
+    this.stores = {};
+  }
+  createStore<T = any, U extends T = any>(initialStore: StateCreator<T, [], [], U>, key: string) {
+    if (this.stores[key]) {
+      return this.stores[key];
+    }
+    this.stores[key] = createZutandStore(initialStore);
+    return this.stores[key] as StoreApi<T>;
+  }
+  create<T extends Record<string, any>, U extends T = T>(initialStore: StateCreator<T, [], [], U>, key: string) {
+    return this.createStore(initialStore, key) as StoreApi<T>;
+  }
+  createIfNotExists<T extends Record<string, any>, U extends T = T>(
+    initialStore: StateCreator<T, [], [], U>,
+    key: string,
+    opts?: {
+      force?: boolean;
+    },
+  ): StoreApi<T> {
+    if (this.stores[key] && !opts?.force) {
+      return this.stores[key];
+    }
+    if (this.stores[key] && opts?.force) {
+      this.removeStore(key);
+    }
+    return this.createStore(initialStore, key);
+  }
+  getStore(key: string) {
+    return this.stores[key];
+  }
+  removeStore(key: string) {
+    delete this.stores[key];
+  }
+  clearStores() {
+    this.stores = {};
+  }
+  shallow(objA: any, objB: any) {
+    return shallow(objA, objB);
+  }
+  /**
+   * path 为可以是 '.a.b.c'的形式
+   * @param fn
+   * @param param1
+   * @returns
+   */
+  subscribe(fn: Listener, { key, path, deep, store }: { key: string; path: string; deep?: boolean; store?: StoreApi<any> }) {
+    const _store = store || (this.stores[key] as StoreApi<any>);
+    if (!_store) {
+      console.error('no store', key);
+      return;
+    }
+    return _store.subscribe((newState, oldState) => {
+      try {
+        const newPath = get(newState, path);
+        const oldPath = get(oldState, path);
+        if (!newPath && !oldPath) {
+          return;
+        }
+        if (deep) {
+          if (!deepEqual(newPath, oldPath)) {
+            fn?.(newState, oldState);
+          }
+          return;
+        }
+        if (!shallow(newPath, oldPath)) {
+          fn?.(newState, oldState);
+        }
+      } catch (e) {
+        console.error('subscribe error', e);
+      }
+    });
+  }
+}
+// export const store = new StoreManager();
+
+type FnListener<T = any> = (state: T, prevState: T) => void;
+type SubOptions = {
+  path?: string;
+  deep?: boolean;
+  store?: StoreApi<any>;
+};
+export const sub = <T = any>(fn: FnListener<T>, { path, deep, store }: SubOptions) => {
+  if (!store) {
+    console.error('no store');
+    return;
+  }
+  return store.subscribe((newState: T, oldState: T) => {
+    try {
+      const newPath = get(newState, path as string);
+      const oldPath = get(oldState, path as string);
+      if (!newPath && !oldPath) {
+        // 都不存在
+        return;
+      }
+      if (deep) {
+        if (!deepEqual(newPath, oldPath)) {
+          fn?.(newState, oldState);
+        }
+        return;
+      }
+      if (!shallow(newPath, oldPath)) {
+        fn?.(newState, oldState);
+      }
+    } catch (e) {
+      console.error('subscribe error', e);
+    }
+  });
+};
+
+export { shallow, deepEqual };
--- a/src/utils/path-key.ts
+++ b/src/utils/path-key.ts
@@ -0,0 +1,9 @@
+export const getPathKey = () => {
+  // 从localtion.href的路径中，/a/b 中 a为path，b为key
+  const pathname = location.pathname;
+  const paths = pathname.split('/');
+  let [path, key] = paths.slice(1);
+  path = path || '';
+  key = key || '';
+  return { path, key, id: path + '---' + key, prefix: `/${path}/${key}` };
+};
--- a/src/web-env.ts
+++ b/src/web-env.ts
@@ -0,0 +1 @@
+export * from '@kevisual/context';
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,8 +10,9 @@
    "baseUrl": "./",
    "typeRoots": [
      "node_modules/@types",
+      "node_modules/@kevisual/types",
    ],
-    "declaration": true,
+    "declaration": false,
    "noEmit": true,
    "allowImportingTsExtensions": true,
    "moduleResolution": "NodeNext",
Author	SHA1	Message	Date
xion	bbf826b765	feat: remove web-env	2025-06-12 15:01:59 +08:00
xion	9d22faa8ba	bump	2025-05-24 17:18:10 +08:00
xion	e4768b6360	merge	2025-05-24 17:10:13 +08:00
xion	598e29cf5a	temp	2025-05-24 17:03:32 +08:00
xion	4152133951	temp	2025-05-24 17:00:37 +08:00
xion	02446fd60f	temp	2025-05-24 16:58:59 +08:00
xion	351b2e3366	temp	2025-04-03 19:33:16 +08:00
xion	d70118ad3d	temp	2025-04-03 15:34:57 +08:00
abearxiong	69784e8ed4	add history	2025-03-29 17:48:38 +08:00
xion	415f008209	update	2025-03-28 09:39:27 +08:00
abearxiong	8d4505eb24	fix: change to version 3	2025-03-27 19:58:01 +08:00
abearxiong	3d7879c79d	.gitignore change no turbo	2025-03-27 19:53:52 +08:00
abearxiong	4d7af80d15	fix: types	2025-03-26 14:06:10 +08:00
abearxiong	152fda350e	store init	2025-03-26 11:52:56 +08:00
xion	3d50b64543	fix	2025-03-06 22:45:17 +08:00
xion	077e99cbc8	perf: app and page 修改	2025-03-03 23:31:05 +08:00
xion	abdc5c7923	bump	2025-03-01 23:14:44 +08:00
xion	3ee69a4f81	perf: for useConfigKey	2025-03-01 17:35:43 +08:00
xion	86ae2c7f70	fix: basename 修改，后缀为/的去掉/	2025-02-27 18:26:56 +08:00
xion	3a027efb79	feat: add Load	2025-02-27 00:57:05 +08:00
xion	d8d5073542	store 添加Load模块	2025-02-19 06:52:18 +08:00
xion	b39c950ef7	temp	2025-01-07 03:01:09 +08:00
xion	01db9c9ea2	doc	2025-01-07 02:58:02 +08:00
xion	c855c7d3d5	feat: add page	2025-01-02 23:04:01 +08:00
xion	7cb42edc5f	fix: add iifi for Page	2024-12-22 21:41:23 +08:00
xion	9b3de5eba3	feat: add app fof iife	2024-12-22 14:49:48 +08:00
xion	3b19cd8581	temp	2024-12-18 11:10:48 +08:00
xion	78d581c98c	fix: add env	2024-12-09 12:48:13 +08:00
xion	b5dde4e823	fix: page	2024-12-08 12:54:57 +08:00
xion	a4f03c76eb	fix: update	2024-12-01 23:58:08 +08:00
xion	4148d162e4	fix: add page perfect	2024-11-30 02:21:33 +08:00
xion	ebf0b230b1	feat: add config and page	2024-11-30 00:10:51 +08:00
xion	f62254af26	fix: change build dts	2024-11-02 22:27:03 +08:00