cabbage-react 1.0.31 → 1.0.33

package/README.md

@@ -20,24 +20,37 @@ npm install cabbage-react
 
 Synchronize a channel with the backend. This hook:
 
-- Identifies and sets the default value defined in .csd to a state.
-- Handles initialization when opening an existing session, or reopening the plugin window.
-- Listens for value updates from the host (DAW), or from Csound.
-- Sends changes to the backend using the provided value-setter.
+- Automatically updates local state when value is received or changed
+- Sends changes to the backend using the provided value-setter
 
 ### useCabbageProperties
 
 Get properties for a widget from the backend. This hook:
 
-- Listens for property updates from the backend.
-- Updates local state automatically when data changes.
+- Automatically updates local state when properties are received or changed
 
 ### useCabbageMessage
 
-Get message for a channel from the backend. This hook:
+Get messages from the backend. This hook:
 
-- Listens for messages from the backend.
-- Updates local state automatically when receiving a message.
+- Automatically updates local state when a message is received
+- Expects a serialized JSON object (sent as a string) with an `id` property
+
+#### Example: sending a message from Csound
+
+```csd
+jsonData:S = sprintf({{
+{
+	"id":"NoteData",
+	"noteCount":%f,
+	"note":%f,
+	"noteLength":%f,
+	"noteVelocity":%f
+}
+}}, iNoteCount, iNote, iLength, iVelocity)
+
+cabbageSendMessage(jsonData)
+```
 
 ## Usage
 

package/dist/hooks/useCabbageMessage.d.ts

@@ -2,9 +2,9 @@
  * Custom hook to get a message from Cabbage backend.
  * This hook listens to messages sent from the backend and updates the local state
  * whenever new data is received.
- * @param channelId
+ * @param messageId
  */
-export declare const useCabbageMessage: <T>(channelId: string) => {
+export declare const useCabbageMessage: <T>(messageId: string) => {
     message: T | undefined;
 };
 //# sourceMappingURL=useCabbageMessage.d.ts.map

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react");console.log("Cabbage: loading cabbage.js");class p{static sendControlData({channel:o,value:e,gesture:s="complete"},n=null){const a={command:"controlData",channel:o,value:e,gesture:s};n!==null?n.postMessage(a):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(a):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",a)}static isReadyToLoad(o=null,e={}){this.sendCustomCommand("isReadyToLoad",o)}static sendMidiMessageFromUI(o,e,s,n=null){var a={statusByte:o,dataByte1:e,dataByte2:s};const i={command:"midiMessage",obj:JSON.stringify(a)};n!==null?n.postMessage(i):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(i):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",i)}static MidiMessageFromHost(o,e,s){console.log("Cabbage: Got MIDI Message"+o+":"+e+":"+s)}static triggerFileOpenDialog(o,e,s={}){var n={channel:e,directory:s.directory||"",filters:s.filters||"*",openAtLastKnownLocation:s.openAtLastKnownLocation!==void 0?s.openAtLastKnownLocation:!0};const a={command:"fileOpen",obj:JSON.stringify(n)};o!==null?o.postMessage(a):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(a):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",a)}static openUrl(o,e,s){var n={url:e,file:s};const a={command:"openUrl",obj:JSON.stringify(n)};o!==null?o.postMessage(a):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(a):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",a)}static requestResize(o,e,s=null){const n={command:"requestResize",width:o,height:e};if(s!==null){console.warn("Cabbage: requestResize is not supported in VS Code extension mode");return}else typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(n):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",n)}static sendChannelData(o,e,s=null){var n={channel:o};if(typeof e=="string")n.stringData=e;else if(typeof e=="number")n.floatData=e;else{console.warn("Cabbage: sendChannelData received unsupported data type:",typeof e);return}const a={command:"channelData",obj:JSON.stringify(n)};console.log("Cabbage: sending channel data from UI",n),s!==null?s.postMessage(a):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(a):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",a)}static sendWidgetUpdate(o,e=null){const s={command:"widgetStateUpdate",obj:JSON.stringify(CabbageUtils.sanitizeForEditor(o))};e!==null?e.postMessage(s):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(s):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",s)}static sendCustomCommand(o,e=null,s={}){const n={command:o,text:JSON.stringify(s)};if(e!==null)e.postMessage(n);else if(typeof window.sendMessageFromUI=="function"){console.log("Cabbage: Calling window.sendMessageFromUI with:",n);try{const a=window.sendMessageFromUI(n);console.log("Cabbage: sendMessageFromUI returned:",a)}catch(a){console.error("Cabbage: sendMessageFromUI threw error:",a),console.error("Cabbage: Error stack:",a.stack)}}else console.error("Cabbage: window.sendMessageFromUI is not available yet. Message:",n),console.error("Cabbage: typeof window.sendMessageFromUI:",typeof window.sendMessageFromUI),console.error("Cabbage: window.sendMessageFromUI value:",window.sendMessageFromUI)}}const C=r=>{const[o,e]=g.useState();return g.useEffect(()=>{const s=n=>{const{id:a,widgetJson:i,command:b}=n.data;if(a===r&&i&&b==="widgetUpdate"){const t=JSON.parse(i);console.log(`[Cabbage-React] Received properties for channelId ${a}`,t),e(t)}};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[]),{properties:o}},I=(r,o="complete")=>{const{properties:e}=C(r),[s,n]=g.useState(),[a,i]=g.useState(),b=t=>{n(t),p.sendControlData({channel:r,value:t,gesture:o})};return g.useEffect(()=>{var u;const t=e==null?void 0:e.channels.find(d=>d.id===r);if(!t)return;const l=t==null?void 0:t.parameterIndex;a===void 0&&l!==void 0&&(console.log(`[Cabbage-React] Received parameterIndex for channelId "${t.id}"`,l),i(l));const c=(u=t.range)==null?void 0:u.defaultValue;s===void 0&&c!==void 0&&(console.log(`[Cabbage-React] Received default value for channelId "${t.id}"`,c),n(c))},[e]),g.useEffect(()=>{const t=l=>{var u;const{command:c}=l.data;if(c==="parameterChange"){const{value:d,paramIdx:m}=l.data.data;if(m!==a||d===null)return;console.log(`[Cabbage-React] Received parameterChange for parameterIndex ${m}`,d),n(d)}else if(c==="batchWidgetUpdate"){const d=l.data.widgets,m=d==null?void 0:d.find(f=>f.id===r);if(!m)return;const w=JSON.parse(m.widgetJson).channels.find(f=>f.id===r),M=(u=w==null?void 0:w.range)==null?void 0:u.value;console.log(`[Cabbage-React] Received batch widget update for channelId ${m.id}`,M),n(M)}};return window.addEventListener("message",t),()=>{window.removeEventListener("message",t)}},[a]),{value:s,setValue:b}},U=r=>{const[o,e]=g.useState();return g.useEffect(()=>{const s=n=>{const{id:a,widgetJson:i,command:b}=n.data;if(a===r&&i&&b==="widgetUpdate"){const t=JSON.parse(i);console.log(`[Cabbage-React] Received message for channelId ${a}`,t),e(t)}};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[]),{message:o}};exports.Cabbage=p;exports.useCabbageMessage=U;exports.useCabbageProperties=C;exports.useCabbageState=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");console.log("Cabbage: loading cabbage.js");class p{static sendControlData({channel:o,value:e,gesture:s="complete"},n=null){const a={command:"controlData",channel:o,value:e,gesture:s};n!==null?n.postMessage(a):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(a):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",a)}static isReadyToLoad(o=null,e={}){this.sendCustomCommand("isReadyToLoad",o)}static sendMidiMessageFromUI(o,e,s,n=null){var a={statusByte:o,dataByte1:e,dataByte2:s};const r={command:"midiMessage",obj:JSON.stringify(a)};n!==null?n.postMessage(r):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(r):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",r)}static MidiMessageFromHost(o,e,s){console.log("Cabbage: Got MIDI Message"+o+":"+e+":"+s)}static triggerFileOpenDialog(o,e,s={}){var n={channel:e,directory:s.directory||"",filters:s.filters||"*",openAtLastKnownLocation:s.openAtLastKnownLocation!==void 0?s.openAtLastKnownLocation:!0};const a={command:"fileOpen",obj:JSON.stringify(n)};o!==null?o.postMessage(a):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(a):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",a)}static openUrl(o,e,s){var n={url:e,file:s};const a={command:"openUrl",obj:JSON.stringify(n)};o!==null?o.postMessage(a):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(a):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",a)}static requestResize(o,e,s=null){const n={command:"requestResize",width:o,height:e};if(s!==null){console.warn("Cabbage: requestResize is not supported in VS Code extension mode");return}else typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(n):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",n)}static sendChannelData(o,e,s=null){var n={channel:o};if(typeof e=="string")n.stringData=e;else if(typeof e=="number")n.floatData=e;else{console.warn("Cabbage: sendChannelData received unsupported data type:",typeof e);return}const a={command:"channelData",obj:JSON.stringify(n)};console.log("Cabbage: sending channel data from UI",n),s!==null?s.postMessage(a):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(a):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",a)}static sendWidgetUpdate(o,e=null){const s={command:"widgetStateUpdate",obj:JSON.stringify(CabbageUtils.sanitizeForEditor(o))};e!==null?e.postMessage(s):typeof window.sendMessageFromUI=="function"?window.sendMessageFromUI(s):console.error("Cabbage: window.sendMessageFromUI is not available. Message:",s)}static sendCustomCommand(o,e=null,s={}){const n={command:o,text:JSON.stringify(s)};if(e!==null)e.postMessage(n);else if(typeof window.sendMessageFromUI=="function"){console.log("Cabbage: Calling window.sendMessageFromUI with:",n);try{const a=window.sendMessageFromUI(n);console.log("Cabbage: sendMessageFromUI returned:",a)}catch(a){console.error("Cabbage: sendMessageFromUI threw error:",a),console.error("Cabbage: Error stack:",a.stack)}}else console.error("Cabbage: window.sendMessageFromUI is not available yet. Message:",n),console.error("Cabbage: typeof window.sendMessageFromUI:",typeof window.sendMessageFromUI),console.error("Cabbage: window.sendMessageFromUI value:",window.sendMessageFromUI)}}const C=i=>{const[o,e]=l.useState();return l.useEffect(()=>{const s=n=>{const{id:a,widgetJson:r,command:g}=n.data;if(a===i&&r&&g==="widgetUpdate"){const t=JSON.parse(r);console.log(`[Cabbage-React] Received properties for channelId ${a}`,t),e(t)}};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[]),{properties:o}},I=(i,o="complete")=>{const{properties:e}=C(i),[s,n]=l.useState(),[a,r]=l.useState(),g=t=>{n(t),p.sendControlData({channel:i,value:t,gesture:o})};return l.useEffect(()=>{var u;const t=e==null?void 0:e.channels.find(d=>d.id===i);if(!t)return;const c=t==null?void 0:t.parameterIndex;a===void 0&&c!==void 0&&(console.log(`[Cabbage-React] Received parameterIndex for channelId "${t.id}"`,c),r(c));const m=(u=t.range)==null?void 0:u.defaultValue;s===void 0&&m!==void 0&&(console.log(`[Cabbage-React] Received default value for channelId "${t.id}"`,m),n(m))},[e]),l.useEffect(()=>{const t=c=>{var u;const{command:m}=c.data;if(m==="parameterChange"){const{value:d,paramIdx:b}=c.data.data;if(b!==a||d===null)return;console.log(`[Cabbage-React] Received parameterChange for parameterIndex ${b}`,d),n(d)}else if(m==="batchWidgetUpdate"){const d=c.data.widgets,b=d==null?void 0:d.find(f=>f.id===i);if(!b)return;const w=JSON.parse(b.widgetJson).channels.find(f=>f.id===i),M=(u=w==null?void 0:w.range)==null?void 0:u.value;console.log(`[Cabbage-React] Received batch widget update for channelId ${b.id}`,M),n(M)}};return window.addEventListener("message",t),()=>{window.removeEventListener("message",t)}},[a]),{value:s,setValue:g}},U=i=>{const[o,e]=l.useState();return l.useEffect(()=>{const s=n=>{const{widgetJson:a,command:r}=n.data;if(a&&r==="widgetUpdate"){const g=JSON.parse(a);if(g.id!==i)return;console.log(`[Cabbage-React] Received message for channelId ${g.id}`,g),e(g)}};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[]),{message:o}};exports.Cabbage=p;exports.useCabbageMessage=U;exports.useCabbageProperties=C;exports.useCabbageState=I;

package/dist/index.mjs

@@ -56,13 +56,13 @@ class C {
       dataByte1: e,
       dataByte2: s
     };
-    const i = {
+    const r = {
       command: "midiMessage",
       obj: JSON.stringify(a)
     };
-    n !== null ? n.postMessage(i) : typeof window.sendMessageFromUI == "function" ? window.sendMessageFromUI(i) : console.error(
+    n !== null ? n.postMessage(r) : typeof window.sendMessageFromUI == "function" ? window.sendMessageFromUI(r) : console.error(
       "Cabbage: window.sendMessageFromUI is not available. Message:",
-      i
+      r
     );
   }
   /**
@@ -236,13 +236,13 @@ class C {
       );
   }
 }
-const I = (r) => {
+const I = (i) => {
   const [o, e] = f();
   return b(() => {
     const s = (n) => {
-      const { id: a, widgetJson: i, command: m } = n.data;
-      if (a === r && i && m === "widgetUpdate") {
-        const t = JSON.parse(i);
+      const { id: a, widgetJson: r, command: l } = n.data;
+      if (a === i && r && l === "widgetUpdate") {
+        const t = JSON.parse(r);
         console.log(
           `[Cabbage-React] Received properties for channelId ${a}`,
           t
@@ -255,10 +255,10 @@ const I = (r) => {
   }, []), {
     properties: o
   };
-}, h = (r, o = "complete") => {
-  const { properties: e } = I(r), [s, n] = f(), [a, i] = f(), m = (t) => {
+}, v = (i, o = "complete") => {
+  const { properties: e } = I(i), [s, n] = f(), [a, r] = f(), l = (t) => {
     n(t), C.sendControlData({
-      channel: r,
+      channel: i,
       value: t,
       gesture: o
     });
@@ -266,38 +266,38 @@ const I = (r) => {
   return b(() => {
     var w;
     const t = e == null ? void 0 : e.channels.find(
-      (d) => d.id === r
+      (d) => d.id === i
     );
     if (!t) return;
-    const l = t == null ? void 0 : t.parameterIndex;
-    a === void 0 && l !== void 0 && (console.log(
+    const g = t == null ? void 0 : t.parameterIndex;
+    a === void 0 && g !== void 0 && (console.log(
       `[Cabbage-React] Received parameterIndex for channelId "${t.id}"`,
-      l
-    ), i(l));
-    const g = (w = t.range) == null ? void 0 : w.defaultValue;
-    s === void 0 && g !== void 0 && (console.log(
-      `[Cabbage-React] Received default value for channelId "${t.id}"`,
       g
-    ), n(g));
+    ), r(g));
+    const c = (w = t.range) == null ? void 0 : w.defaultValue;
+    s === void 0 && c !== void 0 && (console.log(
+      `[Cabbage-React] Received default value for channelId "${t.id}"`,
+      c
+    ), n(c));
   }, [e]), b(() => {
-    const t = (l) => {
+    const t = (g) => {
       var w;
-      const { command: g } = l.data;
-      if (g === "parameterChange") {
-        const { value: d, paramIdx: c } = l.data.data;
-        if (c !== a || d === null) return;
+      const { command: c } = g.data;
+      if (c === "parameterChange") {
+        const { value: d, paramIdx: m } = g.data.data;
+        if (m !== a || d === null) return;
         console.log(
-          `[Cabbage-React] Received parameterChange for parameterIndex ${c}`,
+          `[Cabbage-React] Received parameterChange for parameterIndex ${m}`,
           d
         ), n(d);
-      } else if (g === "batchWidgetUpdate") {
-        const d = l.data.widgets, c = d == null ? void 0 : d.find((M) => M.id === r);
-        if (!c) return;
-        const u = JSON.parse(c.widgetJson).channels.find(
-          (M) => M.id === r
+      } else if (c === "batchWidgetUpdate") {
+        const d = g.data.widgets, m = d == null ? void 0 : d.find((M) => M.id === i);
+        if (!m) return;
+        const u = JSON.parse(m.widgetJson).channels.find(
+          (M) => M.id === i
         ), p = (w = u == null ? void 0 : u.range) == null ? void 0 : w.value;
         console.log(
-          `[Cabbage-React] Received batch widget update for channelId ${c.id}`,
+          `[Cabbage-React] Received batch widget update for channelId ${m.id}`,
           p
         ), n(p);
       }
@@ -307,19 +307,20 @@ const I = (r) => {
     };
   }, [a]), {
     value: s,
-    setValue: m
+    setValue: l
   };
-}, v = (r) => {
+}, y = (i) => {
   const [o, e] = f();
   return b(() => {
     const s = (n) => {
-      const { id: a, widgetJson: i, command: m } = n.data;
-      if (a === r && i && m === "widgetUpdate") {
-        const t = JSON.parse(i);
+      const { widgetJson: a, command: r } = n.data;
+      if (a && r === "widgetUpdate") {
+        const l = JSON.parse(a);
+        if (l.id !== i) return;
         console.log(
-          `[Cabbage-React] Received message for channelId ${a}`,
-          t
-        ), e(t);
+          `[Cabbage-React] Received message for channelId ${l.id}`,
+          l
+        ), e(l);
       }
     };
     return window.addEventListener("message", s), () => {
@@ -331,7 +332,7 @@ const I = (r) => {
 };
 export {
   C as Cabbage,
-  v as useCabbageMessage,
+  y as useCabbageMessage,
   I as useCabbageProperties,
-  h as useCabbageState
+  v as useCabbageState
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cabbage-react",
-	"version": "1.0.31",
+	"version": "1.0.33",
 	"type": "module",
 	"keywords": [
 		"cabbage",