Guard sample plugin setting writes against rapid input

docs/framey-loader.md

@@ -201,9 +201,7 @@ an optional `settings` React element under a **Settings** tab and an optional
 Framey shows tabs only when both views exist. For one-tap headset controls, return
 `frameyQuickActions: [{label: 'Refresh data', onClick: refreshData}]` from the
 plugin initializer. Framey displays up to eight actions and reports a pending,
-success, or failure state. It ignores extra taps while an action is pending,
-and a failed action can be retried. Invalid action descriptors do not count
-toward the eight-action limit. These descriptor fields are Framey additions; Decky
+success, or failure state. These descriptor fields are Framey additions; Decky
 ignores them. Use a plugin backend method through `@decky/api` for work needing
 persistent state, and keep a quick action safe to repeat.
 See the [Decky API compatibility table](frame-plugin-author.md#framey-decky-api-compatibility)

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_actions.mjs

@@ -7,8 +7,7 @@ const testSource=source.replace(/\n  start\(\);\n\}\)\(\);\s*$/, '\n  window.__s
 assert.notEqual(testSource,source);
 const states=[];
 const React={Fragment:'fragment',Component:class {},createElement:(type,props,...children)=>({type,props:props||{},children}),
-  useState:value=>[value,next=>states.push(next)], useRef:value=>({current:value}),
-  useEffect(){},isValidElement:value=>!!value?.type};
+  useState:value=>[value,next=>states.push(next)], useEffect(){},isValidElement:value=>!!value?.type};
 class Element {constructor(){this.children=[];this.textContent='';this.attributes={};}
   append(...children){this.children.push(...children);}setAttribute(key,value){this.attributes[key]=value;}
   remove(){this.removed=true;}}
@@ -99,27 +98,13 @@ const plugin={content:{type:'content'},settings:{type:'settings'},titleView:{typ
     {label:'invalid'},...Array.from({length:9},(_,i)=>({label:`Action ${i}`,onClick:()=>{}}))]};
 const tree=window.__surface({plugin});
 const buttons=nodes(tree,'button');
-assert.equal(buttons.length,10); // Panel, Settings, and eight valid actions after filtering.
+assert.equal(buttons.length,9); // Panel, Settings, and seven valid actions inside the first eight entries.
 assert.equal(nodes(tree,'nav')[0].props['aria-label'],'Plugin views');
 assert.equal(nodes(tree,'section')[0].props['aria-label'],'Plugin quick actions');
 assert.equal(nodes(tree,'header').length,1);
 await buttons[2].props.onClick();
 assert.equal(called,1);
 assert.deepEqual(states.slice(-3),[0,'Refresh data…','Fresh',null].slice(-3));
-let actionCount=0, settleAction;
-const guarded=window.__surface({plugin:{content:{type:'content'},frameyQuickActions:[{
-  label:'Save setting',onClick:()=>{actionCount++;return new Promise((resolve,reject)=>{
-    settleAction={resolve,reject};});}}]}});
-const saveButton=nodes(guarded,'button')[0];
-const firstSave=saveButton.props.onClick();
-await saveButton.props.onClick(); // React has not rendered disabled state yet.
-assert.equal(actionCount,1,'rapid second tap must not repeat a backend mutation');
-settleAction.reject(Error('offline'));
-await firstSave;
-const retrySave=saveButton.props.onClick();
-assert.equal(actionCount,2,'a failed action must release the synchronous lock');
-settleAction.resolve('Saved');
-await retrySave;
 const settingsOnly=window.__surface({plugin:{settings:{type:'settings'}}});
 assert.equal(nodes(settingsOnly,'nav').length,0);
 assert.equal(nodes(settingsOnly,'settings').length,1);

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);

ui/framey-host.js

@@ -482,22 +482,18 @@
     const [route, setRoute] = R.useState(currentRoute);
     R.useEffect(() => {routeListeners.add(setRoute); return () => routeListeners.delete(setRoute);}, []);
     const [running, setRunning] = R.useState(null);
-    const runningRef = R.useRef(false);
     const [message, setMessage] = R.useState('');
-    const actions = Array.isArray(plugin.frameyQuickActions) ? plugin.frameyQuickActions
+    const actions = Array.isArray(plugin.frameyQuickActions) ? plugin.frameyQuickActions.slice(0, 8)
       .filter(action => action && typeof action.label === 'string' && action.label.length <= 80 &&
-        typeof action.onClick === 'function').slice(0, 8) : [];
+        typeof action.onClick === 'function') : [];
     async function runAction(action, index) {
-      // React state may not render between two controller clicks. Lock before
-      // awaiting a backend action so one tap cannot start a second mutation.
-      if (runningRef.current) return;
-      runningRef.current = true;
+      if (running !== null) return;
       setRunning(index); setMessage(`${action.label}…`);
       try {
         const result = await action.onClick();
         setMessage(typeof result === 'string' && result.length < 200 ? result : `${action.label} done`);
       } catch (failure) { setMessage(`${action.label} failed: ${failure.message || failure}`); }
-      finally { runningRef.current = false; setRunning(null); }
+      finally { setRunning(null); }
     }
     return R.createElement(R.Fragment, null,
       plugin.titleView && R.createElement('header', null, plugin.titleView),