feat: add config and page

src/page.ts

@@ -0,0 +1,68 @@
+import { getPathKey } from '@/utils/path-key.ts';
+import { match } from 'path-to-regexp';
+
+type PageOptions = {
+  path?: string;
+  key?: string;
+  basename?: string;
+};
+type PageModule = {
+  // 模块的key，如 user，定义模块的唯一标识
+  key: string;
+  // 模块的path路径，如 /user/:id，match的时候会用到
+  path: string;
+};
+export class Page {
+  pageModule = new Map<string, PageModule>();
+  path: string;
+  key: string;
+  basename: string;
+  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}`;
+  }
+  addPage(path: string, key?: string) {
+    this.pageModule.set(key, { path, key });
+  }
+  check(key: string, pathname?: string): boolean | Record<string, string> {
+    if (!key) {
+      console.error('key is required');
+      return;
+    }
+    const has = this.pageModule.has(key);
+    if (!has) {
+      console.error(`PageModule ${key} not found`);
+      return;
+    }
+    const pageModule = this.pageModule.get(key);
+    const location = window.location;
+    const _pathname = pathname || location.pathname;
+    const cur = _pathname.replace(this.basename, '');
+    const routeMatch = match(pageModule.path, { decode: decodeURIComponent });
+    const result = routeMatch(cur);
+    let params = {};
+    if (result) {
+      result.path;
+      params = result.params;
+      return params;
+    }
+    return false;
+  }
+  /**
+   *
+   * @returns 返回当前路径
+   */
+  getPath() {
+    const location = window.location;
+    const pathname = location.pathname;
+    return pathname.replace(this.basename, '');
+  }
+  decodePath(path: string) {
+    return decodeURIComponent(path);
+  }
+  encodePath(path: string) {
+    return encodeURIComponent(path);
+  }
+}

src/utils/path-key.ts

@@ -0,0 +1,7 @@
+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);
+  return { path, key, id: path + '---' + key, prefix: `/${path}/${key}` };
+};

src/web-config.ts

@@ -0,0 +1,41 @@
+import { getPathKey } from './utils/path-key.ts';
+
+type GlobalConfig = {
+  name?: string;
+  [key: string]: any;
+};
+export const useConfig = (initConfig?: GlobalConfig) => {
+  const config: GlobalConfig = (window as any).config;
+  const _config = config || initConfig;
+  !config && ((window as any)['config'] = _config);
+  return _config;
+};
+
+export const useConfigKey = <T>(key: string, init: () => T): T => {
+  const _config = useConfig({});
+  if (key && init) {
+    _config[key] = init();
+    return _config[key] as any;
+  }
+  if (key) {
+    return _config[key];
+  }
+  return _config as any;
+};
+
+export const useConfigKeySync = async <T = any>(key: string, init: () => Promise<T>): Promise<T> => {
+  const _config = useConfig({});
+  if (key && init) {
+    _config[key] = await init();
+    return _config[key] as any;
+  }
+  if (key) {
+    return _config[key];
+  }
+  return _config as any;
+};
+
+export const usePageConfig = (init?: () => {}) => {
+  const { id } = getPathKey();
+  return useConfigKey(id, init);
+};

src/web-context.ts

@@ -0,0 +1,41 @@
+import { getPathKey } from './utils/path-key.ts';
+
+type GlobalContext = {
+  name?: string;
+  [key: string]: any;
+};
+export const useContext = (initContext?: GlobalContext) => {
+  const context: GlobalContext = (window as any).context;
+  const _context = context || initContext;
+  !context && ((window as any)['context'] = _context);
+  return _context;
+};
+
+export const useContextKey = <T>(key: string, init: () => T): T => {
+  const _context = useContext({});
+  if (key && init) {
+    _context[key] = init();
+    return _context[key] as any;
+  }
+  if (key) {
+    return _context[key];
+  }
+  return _context as any;
+};
+
+export const useContextKeySync = async <T = any>(key: string, init: () => Promise<T>): Promise<T> => {
+  const _context = useContext({});
+  if (key && init) {
+    _context[key] = await init();
+    return _context[key] as any;
+  }
+  if (key) {
+    return _context[key];
+  }
+  return _context as any;
+};
+
+export const usePageContext = (init?: () => {}) => {
+  const { id } = getPathKey();
+  return useContextKey(id, init);
+};