Guard sample plugin setting writes against rapid input

examples/framey-settings/README.md

@@ -14,6 +14,9 @@ action calls the backend, so it reads the persisted setting rather than a
 browser cache. A missing, damaged, or old non-boolean value reads as the
 caller's default;
 the next save atomically replaces the sample's settings file.
+The panel also guards its own read and write calls synchronously. If two
+controller events arrive before React redraws a disabled control, the second
+event is ignored; after the request settles, a new change can be saved.
 
 The **About this setting** button opens a local detail page at
 `/framey-sample/details/saved-setting`. It demonstrates `routerHook.addRoute`,

examples/framey-settings/dist/index.js

@@ -30,7 +30,11 @@ function Content() {
     const [enabled, setEnabled] = SP_REACT.useState(false);
     const [busy, setBusy] = SP_REACT.useState(true);
     const [message, setMessage] = SP_REACT.useState('Loading setting…');
+    const pending = SP_REACT.useRef(false);
     async function refresh() {
+        if (pending.current)
+            return;
+        pending.current = true;
         setBusy(true);
         try {
             const value = await getSetting('enabled', false);
@@ -41,11 +45,17 @@ function Content() {
             setMessage(`Could not read setting: ${String(error)}`);
         }
         finally {
+            pending.current = false;
             setBusy(false);
         }
     }
     SP_REACT.useEffect(() => { void refresh(); }, []);
     async function change(value) {
+        // Two controller events can arrive before React redraws the disabled toggle.
+        // Keep writes ordered so a late first reply cannot replace the final choice.
+        if (pending.current)
+            return;
+        pending.current = true;
         setBusy(true);
         try {
             await setSetting('enabled', value);
@@ -58,6 +68,7 @@ function Content() {
             setMessage(`Could not save setting: ${String(error)}`);
         }
         finally {
+            pending.current = false;
             setBusy(false);
         }
     }

examples/framey-settings/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["decky://decky/plugin/Framey%20Settings%20Sample/node_modules/.pnpm/@decky+api@1.1.3/node_modules/@decky/api/dist/index.js","decky://decky/plugin/Framey%20Settings%20Sample/src/index.tsx"],"sourcesContent":["import _manifest from '@decky/manifest';\nexport * from \"./types\";\nconst manifest = _manifest;\nconst API_VERSION = 2;\nif (!manifest?.name) {\n    throw new Error('[@decky/api]: Failed to find plugin manifest.');\n}\nconst internalAPIConnection = window.__DECKY_SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_deckyLoaderAPIInit;\nif (!internalAPIConnection) {\n    throw new Error('[@decky/api]: Failed to connect to the loader as as the loader API was not initialized. This is likely a bug in Decky Loader.');\n}\nlet api;\ntry {\n    api = internalAPIConnection.connect(API_VERSION, manifest.name);\n}\ncatch {\n    api = internalAPIConnection.connect(1, manifest.name);\n    console.warn(`[@decky/api] Requested API version ${API_VERSION} but the running loader only supports version 1. Some features may not work.`);\n}\nif (api._version != API_VERSION) {\n    console.warn(`[@decky/api] Requested API version ${API_VERSION} but the running loader only supports version ${api._version}. Some features may not work.`);\n}\nexport const call = api.call;\nexport const callable = api.callable;\nexport const addEventListener = api.addEventListener;\nexport const removeEventListener = api.removeEventListener;\nexport const routerHook = api.routerHook;\nexport const toaster = api.toaster;\nexport const openFilePicker = api.openFilePicker;\nexport const executeInTab = api.executeInTab;\nexport const injectCssIntoTab = api.injectCssIntoTab;\nexport const removeCssFromTab = api.removeCssFromTab;\nexport const fetchNoCors = api.fetchNoCors;\nexport const getExternalResourceURL = api.getExternalResourceURL;\nexport const useQuickAccessVisible = api.useQuickAccessVisible;\nexport const definePlugin = (fn) => {\n    return (...args) => {\n        return fn(...args);\n    };\n};\n","import {callable, definePlugin, routerHook, toaster} from '@decky/api';\nimport {ButtonItem, Navigation, PanelSection, PanelSectionRow, ToggleField, useParams} from '@decky/ui';\nimport {useEffect, useState} from 'react';\n\nconst getSetting = callable<[key: string, fallback: boolean], boolean>('get_setting');\nconst setSetting = callable<[key: string, value: boolean], boolean>('set_setting');\n\nfunction Content() {\n  const [enabled, setEnabled] = useState(false);\n  const [busy, setBusy] = useState(true);\n  const [message, setMessage] = useState('Loading setting…');\n\n  async function refresh() {\n    setBusy(true);\n    try {\n      const value = await getSetting('enabled', false);\n      setEnabled(value);\n      setMessage(`Saved setting: ${value ? 'on' : 'off'}`);\n    } catch (error) {\n      setMessage(`Could not read setting: ${String(error)}`);\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  useEffect(() => {void refresh();}, []);\n\n  async function change(value: boolean) {\n    setBusy(true);\n    try {\n      await setSetting('enabled', value);\n      setEnabled(value);\n      setMessage(`Saved setting: ${value ? 'on' : 'off'}`);\n      toaster.toast({title: 'Framey sample',\n        body: <span>Setting saved: <strong>{value ? 'on' : 'off'}</strong></span>});\n    } catch (error) {\n      setMessage(`Could not save setting: ${String(error)}`);\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  return <PanelSection title=\"Framey settings sample\">\n    <PanelSectionRow>\n      <ToggleField label=\"Example setting\" description=\"Stored by the Decky Python backend\"\n        checked={enabled} disabled={busy} onChange={(value: boolean) => {void change(value);}} />\n    </PanelSectionRow>\n    <PanelSectionRow><ButtonItem disabled={busy} onClick={() => {void refresh();}}>Reload saved setting</ButtonItem></PanelSectionRow>\n    <PanelSectionRow><ButtonItem onClick={() => Navigation.Navigate('/framey-sample/details/saved-setting')}>About this setting</ButtonItem></PanelSectionRow>\n    <PanelSectionRow><p role=\"status\">{message}</p></PanelSectionRow>\n  </PanelSection>;\n}\n\nfunction Details() {\n  const {topic} = useParams<{topic?: string}>();\n  return <PanelSection title=\"Sample detail page\">\n    <PanelSectionRow><p>Topic: {topic || 'overview'}</p></PanelSectionRow>\n    <PanelSectionRow><p>The toggle is stored by this plugin's Decky backend in the user's settings directory.</p></PanelSectionRow>\n    <PanelSectionRow><ButtonItem onClick={() => Navigation.NavigateBack()}>Back to setting</ButtonItem></PanelSectionRow>\n  </PanelSection>;\n}\n\nexport default definePlugin(() => {\n  routerHook.addRoute('/framey-sample/details/:topic?', Details);\n  return Object.assign({\n  name: 'Framey Settings Sample',\n  icon: <span aria-hidden=\"true\">⚙</span>,\n  content: <Content />,\n  onDismount: () => routerHook.removeRoute('/framey-sample/details/:topic?'),\n}, {\n  // FrLine truncated
+{"version":3,"file":"index.js","sources":["decky://decky/plugin/Framey%20Settings%20Sample/node_modules/.pnpm/@decky+api@1.1.3/node_modules/@decky/api/dist/index.js","decky://decky/plugin/Framey%20Settings%20Sample/src/index.tsx"],"sourcesContent":["import _manifest from '@decky/manifest';\nexport * from \"./types\";\nconst manifest = _manifest;\nconst API_VERSION = 2;\nif (!manifest?.name) {\n    throw new Error('[@decky/api]: Failed to find plugin manifest.');\n}\nconst internalAPIConnection = window.__DECKY_SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_deckyLoaderAPIInit;\nif (!internalAPIConnection) {\n    throw new Error('[@decky/api]: Failed to connect to the loader as as the loader API was not initialized. This is likely a bug in Decky Loader.');\n}\nlet api;\ntry {\n    api = internalAPIConnection.connect(API_VERSION, manifest.name);\n}\ncatch {\n    api = internalAPIConnection.connect(1, manifest.name);\n    console.warn(`[@decky/api] Requested API version ${API_VERSION} but the running loader only supports version 1. Some features may not work.`);\n}\nif (api._version != API_VERSION) {\n    console.warn(`[@decky/api] Requested API version ${API_VERSION} but the running loader only supports version ${api._version}. Some features may not work.`);\n}\nexport const call = api.call;\nexport const callable = api.callable;\nexport const addEventListener = api.addEventListener;\nexport const removeEventListener = api.removeEventListener;\nexport const routerHook = api.routerHook;\nexport const toaster = api.toaster;\nexport const openFilePicker = api.openFilePicker;\nexport const executeInTab = api.executeInTab;\nexport const injectCssIntoTab = api.injectCssIntoTab;\nexport const removeCssFromTab = api.removeCssFromTab;\nexport const fetchNoCors = api.fetchNoCors;\nexport const getExternalResourceURL = api.getExternalResourceURL;\nexport const useQuickAccessVisible = api.useQuickAccessVisible;\nexport const definePlugin = (fn) => {\n    return (...args) => {\n        return fn(...args);\n    };\n};\n","import {callable, definePlugin, routerHook, toaster} from '@decky/api';\nimport {ButtonItem, Navigation, PanelSection, PanelSectionRow, ToggleField, useParams} from '@decky/ui';\nimport {useEffect, useRef, useState} from 'react';\n\nconst getSetting = callable<[key: string, fallback: boolean], boolean>('get_setting');\nconst setSetting = callable<[key: string, value: boolean], boolean>('set_setting');\n\nfunction Content() {\n  const [enabled, setEnabled] = useState(false);\n  const [busy, setBusy] = useState(true);\n  const [message, setMessage] = useState('Loading setting…');\n  const pending = useRef(false);\n\n  async function refresh() {\n    if (pending.current) return;\n    pending.current = true;\n    setBusy(true);\n    try {\n      const value = await getSetting('enabled', false);\n      setEnabled(value);\n      setMessage(`Saved setting: ${value ? 'on' : 'off'}`);\n    } catch (error) {\n      setMessage(`Could not read setting: ${String(error)}`);\n    } finally {\n      pending.current = false;\n      setBusy(false);\n    }\n  }\n\n  useEffect(() => {void refresh();}, []);\n\n  async function change(value: boolean) {\n    // Two controller events can arrive before React redraws the disabled toggle.\n    // Keep writes ordered so a late first reply cannot replace the final choice.\n    if (pending.current) return;\n    pending.current = true;\n    setBusy(true);\n    try {\n      await setSetting('enabled', value);\n      setEnabled(value);\n      setMessage(`Saved setting: ${value ? 'on' : 'off'}`);\n      toaster.toast({title: 'Framey sample',\n        body: <span>Setting saved: <strong>{value ? 'on' : 'off'}</strong></span>});\n    } catch (error) {\n      setMessage(`Could not save setting: ${String(error)}`);\n    } finally {\n      pending.current = false;\n      setBusy(false);\n    }\n  }\n\n  return <PanelSection title=\"Framey settings sample\">\n    <PanelSectionRow>\n      <ToggleField label=\"Example setting\" description=\"Stored by the Decky Python backend\"\n        checked={enabled} disabled={busy} onChange={(value: boolean) => {void change(value);}} />\n    </PanelSectionRow>\n    <PanelSectionRow><ButtonItem disabled={busy} onClick={() => {void refresh();}}>Reload saved setting</ButtonItem></PanelSectionRow>\n    <PanelSectionRow><ButtonItem onClick={() => Navigation.Navigate('/framey-sample/details/saved-setting')}>About this setting</ButtonItem></PanelSectionRow>\n    <PanelSectionRow><p role=\"status\">{message}</p></PanelSectionRow>\n  </PanelSection>;\n}\n\nfunction Details() {\n  const {topic} = useParams<{topic?: string}>();\n  return <PanelSection title=\"Sample detail page\">\n    <PanelSectionRow><p>Topic: {topic || 'overview'}</p></PanelSectionRow>\n    <PanelSectionRow><p>The toggle is stored by this plugin's Decky backend in the user's settings directory.</p></PanelSectionRow>\n    <PanelSectionRow><ButtonItem onClick={() => Navigation.NavigateBack()}>Back Line truncated

examples/framey-settings/src/index.tsx

@@ -1,6 +1,6 @@
 import {callable, definePlugin, routerHook, toaster} from '@decky/api';
 import {ButtonItem, Navigation, PanelSection, PanelSectionRow, ToggleField, useParams} from '@decky/ui';
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 
 const getSetting = callable<[key: string, fallback: boolean], boolean>('get_setting');
 const setSetting = callable<[key: string, value: boolean], boolean>('set_setting');
@@ -9,8 +9,11 @@ function Content() {
   const [enabled, setEnabled] = useState(false);
   const [busy, setBusy] = useState(true);
   const [message, setMessage] = useState('Loading setting…');
+  const pending = useRef(false);
 
   async function refresh() {
+    if (pending.current) return;
+    pending.current = true;
     setBusy(true);
     try {
       const value = await getSetting('enabled', false);
@@ -19,6 +22,7 @@ function Content() {
     } catch (error) {
       setMessage(`Could not read setting: ${String(error)}`);
     } finally {
+      pending.current = false;
       setBusy(false);
     }
   }
@@ -26,6 +30,10 @@ function Content() {
   useEffect(() => {void refresh();}, []);
 
   async function change(value: boolean) {
+    // Two controller events can arrive before React redraws the disabled toggle.
+    // Keep writes ordered so a late first reply cannot replace the final choice.
+    if (pending.current) return;
+    pending.current = true;
     setBusy(true);
     try {
       await setSetting('enabled', value);
@@ -36,6 +44,7 @@ function Content() {
     } catch (error) {
       setMessage(`Could not save setting: ${String(error)}`);
     } finally {
+      pending.current = false;
       setBusy(false);
     }
   }

tests/page/framey_sample.mjs

@@ -8,7 +8,8 @@ const bundle=readFileSync(new URL('../../examples/framey-settings/dist/index.js'
 assert.match(bundle,/SP_JSX\.jsx/);
 const React={Fragment:Symbol('fragment'),Component:class {},
   createElement:(type,props,...children)=>({type,props:props||{},children}),
-  useState:value=>[value,()=>{}],useEffect(){},isValidElement:value=>!!value?.type};
+  useState:value=>[value,()=>{}],useRef:value=>({current:value}),
+  useEffect(){},isValidElement:value=>!!value?.type};
 class Element {
   constructor(){this.children=[];this.textContent='';this.attributes={};}
   append(...nodes){this.children.push(...nodes);}
@@ -51,8 +52,12 @@ assert.equal(calls[0].method,'get_setting');
 assert.deepEqual(Array.from(calls[0].args),['enabled',false]);
 // Exercise the built sample's save path through the real Framey toast host.
 // Its JSX body must reach a React root, rather than stringify to an object.
-content.children[0][0].children[0].props.onChange(true);
+const toggle=content.children[0][0].children[0];
+toggle.props.onChange(true);
+toggle.props.onChange(false); // Before React redraws disabled, do not race the first write.
 await new Promise(resolve=>setImmediate(resolve));
+assert.equal(calls.filter(call=>call.method==='set_setting').length,1);
+assert.deepEqual(Array.from(calls.find(call=>call.method==='set_setting').args),['enabled',true]);
 const toast=elements.get('framey-toasts').children[0];
 assert.equal(toast.attributes.role,'status');
 assert.equal(toast.children[0].textContent,'Framey sample');
@@ -62,6 +67,10 @@ assert.match(JSON.stringify(toastBody),/Setting saved/);
 assert.match(JSON.stringify(toastBody),/on/);
 toast.children[2].onclick();
 assert.equal(roots.get(toast.children[1]).unmounted,true);
+toggle.props.onChange(false);
+await new Promise(resolve=>setImmediate(resolve));
+assert.equal(calls.filter(call=>call.method==='set_setting').length,2,
+  'a completed save must release the sample setting lock');
 assert.equal(window.DFL.Navigation.Navigate('/framey-sample/details/saved-setting'),true);
 assert.equal(window.DFL.useParams().topic,'saved-setting');
 assert.equal(window.DFL.Navigation.Navigate('/library/home'),false);