china-diff 1.0.1

package/src/location.ts

@@ -0,0 +1,133 @@
+import { isBrowser } from './dom';
+import { reactive } from './reactive';
+
+export interface Location {
+  /**
+   * 完整 URL
+   */
+  url: string;
+
+  /**
+   * 路径
+   */
+  path: string;
+
+  /**
+   * 查询参数
+   */
+  search: string;
+
+  /**
+   * hash
+   */
+  hash: string;
+
+  /**
+   * 参数
+   */
+  query: { readonly [key: string]: any };
+
+  /**
+   * 路径集合
+   */
+  paths: string[];
+
+  /**
+   * 路由到指定地址
+   *
+   * @param url 指定地址
+   * @param scrollTo 要滚动到的位置
+   */
+  routeTo(url: string, scrollTo?: [number, number]): void;
+}
+
+/**
+ * 当前地址
+ */
+export const location: Location = reactive({
+  url: '',
+  path: '',
+  search: '',
+  hash: '',
+  query: {},
+  paths: [],
+  routeTo(url: string, scrollTo?: [number, number]) {
+    history.pushState(null, '', url || '');
+    routeTo();
+
+    if (isBrowser && scrollTo) {
+      window.scrollTo(scrollTo[0] | 0, scrollTo[1] | 0);
+    }
+  },
+});
+
+export const parseQuery = (search: string) => {
+  let query = {};
+  let items = search.slice(1).split('&');
+  let item;
+
+  for (let i = 0, l = items.length; i < l; i++) {
+    if ((item = items[i])) {
+      let index = item.indexOf('=');
+      let key = index > 0 ? item.slice(0, index) : item;
+      let value = index > 0 ? decodeURIComponent(item.slice(index + 1) || '') : '';
+      let oldValue = query[key];
+
+      if (oldValue === void 0) {
+        query[key] = value;
+      } else if (typeof oldValue !== 'string') {
+        oldValue.push(value);
+      } else {
+        query[key] = [oldValue, value];
+      }
+    }
+  }
+
+  return query;
+};
+
+/**
+ * 更新地址
+ *
+ * @param path 路径
+ * @param search 查询条件
+ * @param hash hash
+ */
+export const updateURL = (path: string, search?: string, hash?: string) => {
+  location.url = path + (search || '') + (hash || '');
+  location.hash = hash;
+
+  if (location.path !== path || location.search !== search) {
+    location.path = path;
+    location.paths = path.match(/\/[^/]*/g) || [];
+    location.search = search;
+    location.query = search ? parseQuery(search) : {};
+  }
+};
+
+// 浏览器环境
+const routeTo = isBrowser
+  ? (() => {
+      // 更新地址方法
+      const routeTo = () => {
+        let system = window.location;
+
+        updateURL(system.pathname, system.search, system.hash);
+      };
+
+      // 立即更新
+      routeTo();
+
+      // 侦听地址变化
+      window.addEventListener('popstate', () => routeTo(), true);
+      // window.addEventListener(
+      //   'hashchange',
+      //   () => {
+      //     location.hash = '';
+      //   },
+      //   true,
+      // );
+
+      return routeTo;
+    })()
+  : () => {};

package/src/message.ts

@@ -0,0 +1,290 @@
+import { isBrowser } from './dom';
+
+/**
+ * 订阅者集合
+ */
+type SubscriberList = Array<[onmessage: (message: SubscribeMessage) => void, once?: boolean]>;
+
+/**
+ * 返回结果方法名
+ */
+const ONRETURN = Symbol('onreturn');
+
+/**
+ * 复制对象
+ */
+const assign = Object.assign;
+
+/**
+ * 订阅集合
+ */
+const subscribes: { [key: string]: SubscriberList } = Object.create(null);
+
+/**
+ * 返回结果处理函数集合
+ */
+const onreturnFns: Map<number, (result: unknown, error?: unknown) => void> = new Map();
+
+/**
+ * 递增的回调 id
+ */
+let returnIdInc = 1;
+
+/**
+ * 分发消息
+ *
+ * @param event 消息事件
+ */
+const dispatchMessage = (message: SubscribeMessage) => {
+  let list = subscribes[message.type];
+
+  // 发送消息
+  if (list) {
+    let length = list.length;
+    let index = -1;
+
+    for (let i = 0; i < length; i++) {
+      let item = list[i];
+
+      // 没有标记删除
+      if (item[0]) {
+        // 通知订阅者
+        item[0](message);
+
+        // 可多次执行
+        if (!item[1]) {
+          // 有删除
+          if (index >= 0) {
+            list[index++] = item;
+          }
+
+          continue;
+        }
+      }
+
+      // 记录第一个删除项
+      if (index < 0) {
+        index = i;
+      }
+    }
+
+    // 有删除的订阅
+    if (index >= 0 && index < length) {
+      list.splice(index);
+    }
+  }
+};
+
+/**
+ * 订阅消息
+ */
+export interface SubscribeMessage<T = unknown, R = unknown> {
+  /**
+   * 消息类型
+   */
+  type: string;
+
+  /**
+   * 消息数据
+   */
+  data: T;
+
+  /**
+   * 发送消息窗口
+   */
+  source: Window;
+
+  /**
+   * 源地址（仅 sendMessageTo 有效）
+   */
+  origin: string;
+
+  /**
+   * 回调函数id（仅 sendMessageTo 有效）
+   */
+  returnId?: number;
+
+  /**
+   * 返回（仅 sendMessage 有效）
+   *
+   * @param result 返回结果
+   * @param error 错误信息
+   */
+  [ONRETURN]?: (result: R, error: string) => void;
+}
+
+/**
+ * 订阅消息
+ *
+ * @param type 消息类型
+ * @param onmessage 消息处理函数
+ * @param once 是否执行一次后自动注销
+ */
+export const subscribe = <T = unknown, R = unknown>(
+  type: string,
+  onmessage: (message: SubscribeMessage<T, R>) => void,
+  once?: boolean
+) => {
+  let items = subscribes[type];
+
+  if (items) {
+    items.push([onmessage, once]);
+  } else {
+    subscribes[type] = [[onmessage, once]];
+  }
+};
+
+/**
+ * 取消订阅
+ *
+ * @param type 消息类型
+ * @param onmessage 消息处理函数
+ */
+export const unsubscribe = <T = unknown, R = unknown>(
+  type: string,
+  onmessage: (message: SubscribeMessage<T, R>) => void
+) => {
+  let items = subscribes[type];
+
+  if (items) {
+    for (let i = items.length; i--; ) {
+      if (items[i][0] === onmessage) {
+        // 标记已删除
+        items[i][0] = null;
+        break;
+      }
+    }
+  }
+};
+
+/**
+ * 向当前窗口发送消息（同步执行）
+ *
+ * @param type 消息类型
+ * @param data 消息数据
+ * @param onreturn 返回结果处理函数（返回 true 时继续等待下一个返回结果，否则不再等待）
+ */
+export const sendMessage = <T = unknown, R = unknown>(
+  type: string,
+  data: T,
+  onreturn?: (result: R, error?: string) => void | true
+) => {
+  let message = {
+    type,
+    data,
+    source: window,
+    origin: location.href,
+  } as SubscribeMessage;
+
+  if (onreturn) {
+    message[ONRETURN] = onreturn;
+  }
+
+  dispatchMessage(message);
+};
+
+/**
+ * 向指定窗口发送消息（使用 window.postMessage 发送，异步执行）
+ *
+ * @param window 目标窗口
+ * @param type 消息类型
+ * @param data 消息数据（要可序列化）
+ * @param onreturn 返回结果处理函数（返回 true 时继续等待下一个返回结果，否则不再等待）
+ */
+export const sendMessageTo = <T = unknown, R = unknown>(
+  window: Window,
+  type: string,
+  data?: T,
+  onreturn?: (result: R, error?: string) => void | true
+) => {
+  let returnId;
+
+  if (typeof onreturn === 'function') {
+    // 添加到返回函数集合，Id 添加随机值防止猜测
+    onreturnFns.set((returnId = returnIdInc++ + Math.random()), onreturn);
+  }
+
+  window.postMessage(
+    {
+      type,
+      data,
+      returnId,
+    },
+    '*'
+  );
+};
+
+/**
+ * 返回消息结果
+ *
+ * @param message 订阅消息
+ * @param result 返回结果
+ * @param error 错误信息
+ */
+export const returnMessageResult = <T = unknown, R = unknown>(
+  message: SubscribeMessage<T>,
+  result: R,
+  error?: string
+) => {
+  let returnId, onreturn;
+
+  if ((onreturn = message[ONRETURN])) {
+    try {
+      // 执行回调（返回 true 表示需要继续等待返回结果）
+      if (!onreturn(result, error)) {
+        message[ONRETURN] = void 0;
+      }
+    } catch {
+      // 出错时不再接收返回结果
+      message[ONRETURN] = void 0;
+    }
+  } else if ((returnId = message.returnId)) {
+    message.source.postMessage(
+      {
+        returnId,
+        result,
+        error,
+      },
+      '*'
+    );
+  }
+};
+
+/**
+ * 浏览器环境接收窗口消息
+ */
+isBrowser &&
+  window.addEventListener(
+    'message',
+    (event) => {
+      let message = event.data;
+      let returnId, onreturn;
+
+      // 有 type 字段才处理
+      if (message) {
+        if (message.type) {
+          // 需创建新的消息以免影响第三方消息处理
+          message = assign({}, message);
+          message.source = event.source;
+          message.origin = event.origin;
+
+          // 分发消息
+          dispatchMessage(message);
+        } else if ((returnId = message.returnId) && (onreturn = onreturnFns.get(returnId))) {
+          // 返回消息
+
+          try {
+            // 执行返回结果处理函数（返回 true 表示需要继续等待返回结果）
+            if (!onreturn(message.result, message.error)) {
+              // 删除返回结果处理函数
+              onreturnFns.delete(returnId);
+            }
+          } catch {
+            // 出错时不再接收返回结果
+            onreturnFns.delete(returnId);
+          }
+        }
+      }
+    },
+    true
+  );

package/src/reactive.ts

@@ -0,0 +1,211 @@
+import { Component, createEffect, createSignal, createUniqueId, lazy, untrack } from 'solid-js';
+
+export const defineProperty = Object.defineProperty;
+export const defineProperties = Object.defineProperties;
+export const isArray = Array.isArray;
+
+export interface ServerContext {
+  /**
+   * 异步等待集合
+   */
+  promises: Promise<any>[];
+  /**
+   * 已经获取的异步缓存
+   */
+  cache: Map<string, any>;
+  /**
+   * 需要 SSR 缓存的 key 集合
+   */
+  ssr: { [key: string]: any };
+}
+
+/**
+ * 当前服务端渲染上下文
+ */
+let serverContext: ServerContext;
+
+/**
+ * 设置当前服务端渲染上下文
+ *
+ * @param context 渲染上下文
+ */
+export const setServerContext = (context: ServerContext) => {
+  serverContext = context;
+};
+
+class ReactiveArray {}
+
+/**
+ * 创建响应式对象
+ *
+ * @param props 属性集
+ */
+export const reactive = <T extends { [key: string]: any }>(props: T): T => {
+  let descriptors = Object.getOwnPropertyDescriptors(props);
+  let result = {};
+  let properties = {};
+
+  for (let name in descriptors) {
+    let descriptor = descriptors[name];
+    let get = descriptor.get;
+    let set = descriptor.set;
+
+    if (get) {
+      get = get.bind(result);
+
+      if (set) {
+        set = set.bind(result);
+      }
+    } else if (set) {
+      set = set.bind(result);
+    } else {
+      let value = props[name];
+
+      if (typeof value === 'object') {
+        if (isArray(value)) {
+          for (let i = value.length; i--; ) {
+            if (typeof value[i] === 'object') {
+              value[i] = reactive(value[i]);
+            }
+          }
+        } else {
+          value = reactive(value);
+        }
+      }
+
+      let signal = createSignal(value);
+
+      get = signal[0];
+      set = signal[1];
+    }
+
+    properties[name] = { get, set };
+  }
+
+  return defineProperties(result, properties) as T;
+};
+
+/**
+ * 观测响应式属性变化
+ *
+ * @param deps 依赖属性集
+ * @param callbackFn 变化时的回调函数
+ */
+export const watch = <T extends unknown>(deps: () => T, callbackFn: (values: T) => void): void => {
+  let initialized;
+
+  createEffect(() => {
+    // 已经初始化
+    if (initialized) {
+      // 不收集依赖的情况下执行回调
+      untrack(() => callbackFn(deps()));
+    } else {
+      // 回集依赖
+      deps();
+      // 标记已经初始化
+      initialized = true;
+    }
+  });
+};
+
+/**
+ * 异步管理器结果
+ */
+export interface FetcherResult<T> {
+  /**
+   * 异步状态
+   */
+  status: 'loading' | 'done' | 'fail';
+
+  /**
+   * 成功返回的结果数据
+   */
+  result?: T;
+
+  /**
+   * 错误信息
+   */
+  error?: any;
+}
+
+/**
+ * 创建异步获取器
+ *
+ * @param promise 异步对象
+ * @param ssr_cache 在服务端渲染的模式下是否缓存请求结果到 HTML 中
+ */
+export const createFetcher = <T>(promise?: () => Promise<T>, ssr_cache?: string) => {
+  let [status, setStatus] = createSignal('loading');
+  let [result, setResult] = createSignal();
+  let [error, setError] = createSignal();
+  let data;
+
+  if (promise) {
+    if (import.meta.env.SSR) {
+      let id = createUniqueId();
+
+      if ((data = serverContext.cache.get(id))) {
+        setStatus('done');
+        setResult(data);
+      } else {
+        serverContext.promises.push(
+          promise().then((result) => {
+            serverContext.cache.set(id, result);
+
+            // 需要缓存到 HTML 中
+            if (ssr_cache) {
+              serverContext.ssr[ssr_cache] = result;
+            }
+          }),
+        );
+      }
+    } else {
+      if (ssr_cache && (data = (window as any).SSR) && (data = data[ssr_cache])) {
+        setStatus('done');
+        setResult(data);
+      } else {
+        promise().then(
+          (result) => {
+            setStatus('done');
+            setResult(result as any);
+          },
+          (error) => {
+            setStatus('fail');
+            setError(error);
+          },
+        );
+      }
+    }
+  }
+
+  return defineProperties(
+    {},
+    {
+      status: {
+        get: status,
+        set: setStatus,
+      },
+      result: {
+        get: result,
+        set: setResult,
+      },
+      error: {
+        get: error,
+        set: setError,
+      },
+    },
+  ) as FetcherResult<T>;
+};
+
+/**
+ * 延迟加载组件
+ *
+ * @param importFn 按需导入的组件 import('...')
+ */
+export const LazyComponent = (
+  importFn: () => Promise<{
+    default: Component<any>;
+  }>,
+) => {
+  return lazy(importFn);
+};

package/src/template.ts

@@ -0,0 +1,23 @@
+/**
+ * 替换模板字符串
+ *
+ * @param template 模板
+ * @param args 参数集合
+ *
+ * @example
+ * // 按索引替换
+ * replaceTemplate('...${0} ${1}...', 1, 2);  // '...1 2...'
+ * // 按名称替换
+ * replaceTemplate('...${name} ${value}...', { name: 1, value: 2 });  // '...1 2...'
+ */
+export const replaceTemplate = (template: string, ...args: unknown[]) => {
+  return template.replace(/\$\{([^}]+)\}/g, (_, token: string) => {
+    token = token.trim();
+
+    if (token[0] >= '0' && token[0] <= '9') {
+      return args[token];
+    }
+
+    return args[0] && args[0][token];
+  });
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+/**
+ * @link https://www.typescriptlang.org/tsconfig
+ * @link https://cn.vuejs.org/guide/typescript/overview#configuring-tsconfig-json
+ * @link https://cn.vite.dev/guide/features#typescript-compiler-options
+ */
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "paths": {
+    }
+  }
+}

package/vite-plugin.js

@@ -0,0 +1,4 @@
+import VitePlugin from 'vite-plugin-solid';
+
+export * from 'vite-plugin-solid';
+export default VitePlugin;