xxf_react 0.1.0

package/README.md

@@ -0,0 +1,15 @@
+# @xxf/react
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run src/index.ts
+```
+
+This project was created using `bun init` in bun v1.3.2. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './sse';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './sse';
+export * from './utils';
+console.log('hello world');

package/dist/sse/SSEManager.d.ts

@@ -0,0 +1,21 @@
+import { EventSourceMessage } from '@microsoft/fetch-event-source';
+import { SSEStatus } from "./SSEStatus";
+type Listener = (event: EventSourceMessage) => void;
+type StatusListener = (status: SSEStatus) => void;
+export declare class SSEManager {
+    private url;
+    private headers;
+    private controller;
+    private listeners;
+    private statusListeners;
+    private connecting;
+    private status;
+    constructor(url: string, headers?: Record<string, string>);
+    private setStatus;
+    connect(): void;
+    disconnect(): void;
+    subscribe(listener: Listener): () => boolean;
+    subscribeStatus(listener: StatusListener): () => boolean;
+}
+export {};
+//# sourceMappingURL=SSEManager.d.ts.map

package/dist/sse/SSEManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSEManager.d.ts","sourceRoot":"","sources":["../../src/sse/SSEManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAmB,MAAM,+BAA+B,CAAC;AACnF,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;AACpD,KAAK,cAAc,GAAG,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;AAElD,qBAAa,UAAU;IAQf,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,OAAO;IARnB,OAAO,CAAC,UAAU,CAAgC;IAClD,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,MAAM,CAA6B;gBAG/B,GAAG,EAAE,MAAM,EACX,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM;IAIhD,OAAO,CAAC,SAAS;IAYjB,OAAO;IAsCP,UAAU;IAMV,SAAS,CAAC,QAAQ,EAAE,QAAQ;IAO5B,eAAe,CAAC,QAAQ,EAAE,cAAc;CAK3C"}

package/dist/sse/SSEManager.js

@@ -0,0 +1,73 @@
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+import { SSEStatus } from "./SSEStatus";
+export class SSEManager {
+    constructor(url, headers = {}) {
+        this.url = url;
+        this.headers = headers;
+        this.controller = null;
+        this.listeners = new Set();
+        this.statusListeners = new Set();
+        this.connecting = false;
+        this.status = SSEStatus.idle;
+    }
+    setStatus(next, distinct) {
+        if (distinct) {
+            if (this.status != next) {
+                this.status = next;
+                this.statusListeners.forEach(fn => fn(next));
+            }
+        }
+        else {
+            this.status = next;
+            this.statusListeners.forEach(fn => fn(next));
+        }
+    }
+    connect() {
+        if (this.connecting)
+            return;
+        this.connecting = true;
+        this.setStatus(SSEStatus.connecting, true);
+        this.controller = new AbortController();
+        fetchEventSource(this.url, {
+            signal: this.controller.signal,
+            headers: {
+                Accept: 'text/event-stream',
+                ...this.headers,
+            },
+            onopen: (response) => {
+                this.connecting = false;
+                console.log('[SSE] connected:', this.url);
+                this.setStatus(SSEStatus.connected, true);
+                return Promise.resolve();
+            },
+            onmessage: (event) => {
+                this.listeners.forEach(fn => fn(event));
+            },
+            onerror: (err) => {
+                console.error('[SSE] error:', err);
+                this.setStatus(SSEStatus.error, true);
+                return 3000; // 3 秒后重连
+            },
+            onclose: () => {
+                console.log('[SSE] closed:', this.url);
+                this.connecting = false;
+            },
+        }).catch(console.error);
+    }
+    disconnect() {
+        var _a;
+        (_a = this.controller) === null || _a === void 0 ? void 0 : _a.abort();
+        this.controller = null;
+        this.connecting = false;
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        this.connect();
+        return () => this.listeners.delete(listener);
+    }
+    subscribeStatus(listener) {
+        this.statusListeners.add(listener);
+        this.setStatus(this.status, false); // 立即同步一次
+        return () => this.statusListeners.delete(listener);
+    }
+}

package/dist/sse/SSERegistry.d.ts

@@ -0,0 +1,20 @@
+import { SSEManager } from './SSEManager';
+type ManagerKey = string;
+declare class SSERegistry {
+    private managers;
+    /**
+     * 获取或创建 SSEManager
+     */
+    getOrCreate(key: ManagerKey, factory: () => SSEManager): SSEManager;
+    /**
+     * 移除并断开某一个 manager
+     */
+    remove(key: ManagerKey): void;
+    /**
+     * ⭐ 账号切换 / 登出时调用
+     */
+    clear(): void;
+}
+export declare const sseRegistry: SSERegistry;
+export {};
+//# sourceMappingURL=SSERegistry.d.ts.map

package/dist/sse/SSERegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSERegistry.d.ts","sourceRoot":"","sources":["../../src/sse/SSERegistry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAExC,KAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,cAAM,WAAW;IACb,OAAO,CAAC,QAAQ,CAAqC;IAErD;;OAEG;IACH,WAAW,CACP,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,MAAM,UAAU,GAC1B,UAAU;IAWb;;OAEG;IACH,MAAM,CAAC,GAAG,EAAE,UAAU;IAQtB;;OAEG;IACH,KAAK;CAMR;AAED,eAAO,MAAM,WAAW,aAAoB,CAAC"}

package/dist/sse/SSERegistry.js

@@ -0,0 +1,36 @@
+class SSERegistry {
+    constructor() {
+        this.managers = new Map();
+    }
+    /**
+     * 获取或创建 SSEManager
+     */
+    getOrCreate(key, factory) {
+        let manager = this.managers.get(key);
+        if (!manager) {
+            manager = factory();
+            this.managers.set(key, manager);
+        }
+        return manager;
+    }
+    /**
+     * 移除并断开某一个 manager
+     */
+    remove(key) {
+        const manager = this.managers.get(key);
+        if (!manager)
+            return;
+        manager.disconnect();
+        this.managers.delete(key);
+    }
+    /**
+     * ⭐ 账号切换 / 登出时调用
+     */
+    clear() {
+        for (const manager of this.managers.values()) {
+            manager.disconnect();
+        }
+        this.managers.clear();
+    }
+}
+export const sseRegistry = new SSERegistry();

package/dist/sse/SSEStatus.d.ts

@@ -0,0 +1,7 @@
+export declare enum SSEStatus {
+    idle = "idle",
+    connecting = "connecting",// 建立中
+    connected = "connected",// 已连接
+    error = "error"
+}
+//# sourceMappingURL=SSEStatus.d.ts.map

package/dist/sse/SSEStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSEStatus.d.ts","sourceRoot":"","sources":["../../src/sse/SSEStatus.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACjB,IAAI,SAAS;IACb,UAAU,eAAe,CAAG,MAAM;IAClC,SAAS,cAAc,CAAS,MAAM;IACtC,KAAK,UAAU;CAClB"}

package/dist/sse/SSEStatus.js

@@ -0,0 +1,7 @@
+export var SSEStatus;
+(function (SSEStatus) {
+    SSEStatus["idle"] = "idle";
+    SSEStatus["connecting"] = "connecting";
+    SSEStatus["connected"] = "connected";
+    SSEStatus["error"] = "error"; // 错误中（会重连）
+})(SSEStatus || (SSEStatus = {}));

package/dist/sse/UseSSE.d.ts

@@ -0,0 +1,19 @@
+import { EventSourceMessage } from '@microsoft/fetch-event-source';
+import { SSEStatus } from "./SSEStatus";
+type UseSSEParams = {
+    url: string | null;
+    onMessage: (event: EventSourceMessage) => void;
+    enabled?: boolean;
+};
+/**
+ * 内部会复用链接,无需关心实现,即使多次调用也没有关系
+ * @param url
+ * @param onMessage
+ * @param enabled /// 可以控制,比如未登录的情况下不要订阅
+ * @return {status} 状态
+ */
+export declare function useSSE({ url, onMessage, enabled, }: UseSSEParams): {
+    status: SSEStatus;
+};
+export {};
+//# sourceMappingURL=UseSSE.d.ts.map

package/dist/sse/UseSSE.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseSSE.d.ts","sourceRoot":"","sources":["../../src/sse/UseSSE.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAItC,KAAK,YAAY,GAAG;IAChB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,EACI,GAAG,EACH,SAAS,EACT,OAAc,GACjB,EAAE,YAAY;;EA0BrC"}

package/dist/sse/UseSSE.js

@@ -0,0 +1,35 @@
+import { useEffect, useRef, useState } from 'react';
+import { SSEStatus } from "./SSEStatus";
+import { sseRegistry } from "./SSERegistry";
+import { SSEManager } from "./SSEManager";
+/**
+ * 内部会复用链接,无需关心实现,即使多次调用也没有关系
+ * @param url
+ * @param onMessage
+ * @param enabled /// 可以控制,比如未登录的情况下不要订阅
+ * @return {status} 状态
+ */
+export function useSSE({ url, onMessage, enabled = true, }) {
+    // 保证回调不因 render 变化导致重复订阅
+    const callbackRef = useRef(onMessage);
+    callbackRef.current = onMessage;
+    const [status, setStatus] = useState(SSEStatus.idle);
+    useEffect(() => {
+        if (!url || !enabled)
+            return;
+        const manager = sseRegistry.getOrCreate(url, () => {
+            return new SSEManager(url);
+        });
+        const unsubscribe = manager.subscribe((event) => {
+            callbackRef.current(event);
+        });
+        const stateUnsubscribe = manager.subscribeStatus((status) => {
+            setStatus(status);
+        });
+        return () => {
+            stateUnsubscribe();
+            unsubscribe();
+        };
+    }, [url, enabled]);
+    return { status };
+}

package/dist/sse/index.d.ts

@@ -0,0 +1,5 @@
+export * from './SSEStatus';
+export * from './SSEManager';
+export * from './SSERegistry';
+export * from './UseSSE';
+//# sourceMappingURL=index.d.ts.map

package/dist/sse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sse/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}

package/dist/sse/index.js

@@ -0,0 +1,4 @@
+export * from './SSEStatus';
+export * from './SSEManager';
+export * from './SSERegistry';
+export * from './UseSSE';

package/dist/utils/TestUtils.d.ts

@@ -0,0 +1,2 @@
+export declare function test(): void;
+//# sourceMappingURL=TestUtils.d.ts.map

package/dist/utils/TestUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestUtils.d.ts","sourceRoot":"","sources":["../../src/utils/TestUtils.ts"],"names":[],"mappings":"AAAA,wBAAgB,IAAI,SAEnB"}

package/dist/utils/TestUtils.js

@@ -0,0 +1,3 @@
+export function test() {
+    console.log("==============>test success");
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TestUtils';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/utils/index.js

@@ -0,0 +1 @@
+export * from './TestUtils';

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "xxf_react",
+  "version": "0.1.0",
+  "private": false,
+
+  "type": "module",
+
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+
+  "files": ["dist"],
+
+  "scripts": {
+    "build": "tsc"
+  },
+
+  "peerDependencies": {
+    "react": ">=18"
+  },
+
+  "dependencies": {
+    "@microsoft/fetch-event-source": "^2.0.1"
+  }
+}