@yanglaofish/dsh-proxy-pro 1.1.0 → 2.0.1

package/lib/client.js

@@ -35,6 +35,7 @@ window.__ModuleLoader__.load({
     var react = require("react");
     var useState = react.useState;
     var useEffect = react.useEffect;
+    var useCallback = react.useCallback;
     var useRef = react.useRef;
     var useSyncExternalStore = react.useSyncExternalStore;
 
@@ -115,22 +116,51 @@ window.__ModuleLoader__.load({
     // scope (`{ status, value, writable }`), so the render code below is
     // unchanged; an older host simply has no /config route and the panel
     // reports itself unavailable instead of crashing.
+    //
+    // ONE store for the whole client half: the header capsule and the settings
+    // page live in different React trees (the settings shell renders its own
+    // root), and per-apply stores left them showing different snapshots —
+    // "header ON but panel OFF" (LESSONS §39). A module-level singleton makes
+    // every contributor observe exactly one state.
+    var sharedProxyStore = null
+
+    function proxyStore() {
+      if (sharedProxyStore === null) sharedProxyStore = createProxyStore()
+      return sharedProxyStore
+    }
+
     function createProxyStore() {
       var listeners = [];
-      var snapshot = { status: "loading", value: undefined, writable: false };
+      var snapshot = { status: "loading", value: undefined, writable: false, error: "" };
       var inflight = null;
+      /** Cheap equality so an unchanged payload does not notify: every emit
+       *  re-renders its subscribers, and a needless emit inside a render path
+       *  is how a store turns into a request storm (review fix, LESSONS §40). */
+      function unchanged(a, b) {
+        return a.status === b.status
+          && a.writable === b.writable
+          && a.error === b.error
+          && JSON.stringify(a.value) === JSON.stringify(b.value);
+      }
       function emit(next) {
+        if (unchanged(snapshot, next)) return;
         snapshot = next;
         listeners.slice().forEach(function (fn) {
           try { fn(); } catch (error) { console.error("[dsh-proxy-pro] listener failed:", error); }
         });
       }
+      /** Keep the last known state but surface why a write was refused: a
+       *  silent rollback is how a rejected settings write looks like a UI bug
+       *  (LESSONS §36 — "点一下马上弹回"). */
+      function fail(message) {
+        emit({ status: snapshot.status, value: snapshot.value, writable: snapshot.writable, error: message });
+      }
       function accept(data) {
         if (data === null || data.ok !== true || data.config === undefined || data.config === null) {
-          emit({ status: "unavailable", value: undefined, writable: false });
+          emit({ status: "unavailable", value: undefined, writable: false, error: (data && data.error) || "" });
           return false;
         }
-        emit({ status: "ready", value: data.config, writable: data.writable !== false });
+        emit({ status: "ready", value: data.config, writable: data.writable !== false, error: "" });
         return true;
       }
       function refresh() {
@@ -151,9 +181,14 @@ window.__ModuleLoader__.load({
           body: JSON.stringify(body),
         }).then(function (data) {
           if (data === null || data.ok !== true) {
-            throw new Error((data && data.error) || "config write failed");
+            var message = (data && data.error) || "配置写入失败（宿主未返回原因）";
+            fail(message);
+            throw new Error(message);
           }
           accept(data);
+        }, function (error) {
+          fail("无法连接宿主配置接口：" + String(error && error.message ? error.message : error));
+          throw error;
         });
       }
       return {
@@ -171,22 +206,23 @@ window.__ModuleLoader__.load({
       };
     }
 
-    /** Subscribe to the host-backed config store → `{ value, writable, ready }`. */
+    /** Subscribe to the host-backed config store → `{ value, writable, ready }`.
+     *  The subscribe/getSnapshot callbacks are identity-stable (`useCallback`)
+     *  and the first load lives in an effect: calling `refresh()` from inside
+     *  subscribe re-subscribed on every render and looped GET /config forever
+     *  (review fix, LESSONS §40). */
     function useProxySettings(store) {
-      var snapshot = useSyncExternalStore(
-        function (onChange) {
-          var unsubscribe = store.subscribe(onChange);
-          store.refresh();
-          return unsubscribe;
-        },
-        function () { return store.getSnapshot(); }
-      );
+      var subscribe = useCallback(function (onChange) { return store.subscribe(onChange); }, [store]);
+      var getSnapshot = useCallback(function () { return store.getSnapshot(); }, [store]);
+      var snapshot = useSyncExternalStore(subscribe, getSnapshot);
+      useEffect(function () { store.refresh(); }, [store]);
       var ready = snapshot.status === "ready" && snapshot.value !== undefined;
       return {
         value: ready ? snapshot.value : undefined,
         writable: snapshot.writable === true && ready,
         ready: snapshot.status === "unavailable" ? false : snapshot.status === "ready",
         unavailable: snapshot.status === "unavailable",
+        error: snapshot.error || "",
       };
     }
 
@@ -269,9 +305,14 @@ window.__ModuleLoader__.load({
         if (!settings.writable) return;
         var next = !shownEnabled;
         setOptimistic(next);
-        store.setEnabled(next).catch(function (error) {
+        // The shared store receives the host's answer for this write, so the
+        // optimistic echo ends as soon as the round trip settles — success or
+        // failure. Waiting for "value === optimistic" left the capsule stuck ON
+        // whenever the host refused the write (LESSONS §39).
+        store.setEnabled(next).then(function () {
+          setOptimistic(null);
+        }, function (error) {
           console.error("[dsh-proxy-pro] toggle failed:", error);
-          // Roll back to the committed value on failure.
           setOptimistic(null);
         });
         // Toggle doubles as a manual "recheck now" even when the settings
@@ -285,6 +326,7 @@ window.__ModuleLoader__.load({
       var title = active
         ? "代理已开启（界面开关）· 点击关闭"
         : "代理已关闭 · 点击开启";
+      if (settings.error) title = title + "\n最近一次写入失败：" + settings.error;
       return react.createElement(
         "button",
         {
@@ -429,6 +471,15 @@ window.__ModuleLoader__.load({
             }))
         ),
 
+        // --- last write failure (never fail silently: LESSONS §36) ---
+        settings.error
+          ? react.createElement("div", { className: "dsxprx-status", "data-active": "false", "data-proxy-error": true },
+              react.createElement("span", { className: "dsxprx-dot" }),
+              react.createElement("div", { className: "dsxprx-statusbody" },
+                react.createElement("span", { className: "dsxprx-statusline" }, "配置写入失败"),
+                react.createElement("span", { className: "dsxprx-subline" }, settings.error)))
+          : null,
+
         // --- mode ---
         react.createElement("div", { className: "dsxprx-field" },
           react.createElement("label", { htmlFor: "dsxprx-mode" }, "代理地址来源"),
@@ -533,7 +584,7 @@ window.__ModuleLoader__.load({
      * @param ctx - client cordis context.
      */
     function apply(ctx) {
-      var store = createProxyStore();
+      var store = proxyStore();
       ctx.effect(function () { return function () { /* no timers to clear */ }; }, "dsh-proxy-pro: config store");
       ctx.slots.inject("settings.section", function () {
         return ctx.slots.register({