cabbage-react 1.0.0-beta.25 → 1.0.0-beta.27

package/README.md

@@ -1,19 +1,100 @@
 # Cabbage-React
 
-This project provides hooks that allow you to synchronize [Cabbage](https://cabbageaudio.com) with [React](https://github.com/facebook/react).
+Cabbage-React provides React hooks for synchronizing [Cabbage](https://cabbageaudio.com) with [React](https://github.com/facebook/react), making it easier to build UI components that communicate with the Cabbage host.
 
-An example of implementation can be found [here](https://github.com/hdale94/cabbage-react-example).
+## Example Project
 
-## Install
+An example of implementation is available [here](https://github.com/hdale94/cabbage-react-example).
+
+## Installation
 
     yarn add cabbage-react
+    # or
+    npm install cabbage-react
 
 ## Hooks
 
 ### useCabbageState
 
-Sync a parameter with Cabbage. This hook listens for updates to a parameter value from Cabbage and sends updates to Cabbage when the parameter value changes locally (e.g., through a UI slider).
+Synchronize a parameter with Cabbage. This hook:
+
+- Listens for value updates from Cabbage.
+- Sends local changes (e.g., via sliders, knobs) back to Cabbage.
+
+### useCabbageProperties
+
+Get properties for a parameter from Cabbage.
+This hook:
+
+- Listens for property updates from Cabbage.
+- Updates local state automatically when data changes.
+
+## Usage
+
+```
+import { InputHTMLAttributes } from "react";
+import { useCabbageProperties, useCabbageState } from "cabbage-react";
+
+const HorizontalSlider = ({
+	channel,
+	paramIdx,
+	inputProps,
+}: {
+	channel: string;
+	paramIdx: number;
+	inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}) => {
+	const { properties } = useCabbageProperties(channel);
+	const { value, setValue } = useCabbageState<number>(channel, paramIdx);
+
+	return (
+		<div>
+			<input
+				type="range"
+				min={properties?.range?.min ?? 0}
+				max={properties?.range?.max ?? 1}
+				step={properties?.range?.increment ?? 0.01}
+				value={value}
+				onChange={(e) => setValue(e.target.valueAsNumber)}
+				{...inputProps}
+				style={{
+					accentColor: "rgb(147,210,0)",
+					...inputProps?.style,
+				}}
+			/>
+
+			{/* Displaying the value */}
+			<p style={{ margin: 0 }}>{value ?? 0}</p>
+		</div>
+	);
+};
+
+export default HorizontalSlider;
+```
+
+## Interact directly with Cabbage
+
+You can also import the [Cabbage class](https://github.com/hdale94/cabbage-react/blob/main/src/cabbage/cabbage.js) to send custom messages or interact directly with Cabbage.
+
+## Notify Cabbage When UI Is Ready
+
+To let Cabbage know your UI is ready to receive data, send a `cabbageIsReadyToLoad` message when your app initializes.
+
+Place this call before rendering your app — typically in your main.tsx or index.tsx file:
+
+```
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { Cabbage } from "cabbage-react";
 
-### useGetCabbageFormData
+// Notify Cabbage that the UI is ready to receive data
+Cabbage.sendCustomCommand("cabbageIsReadyToLoad");
 
-Get form data from Cabbage. This hook listens for updates to form data via Cabbage and updates the local state whenever new data is received.
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>
+);
+```

package/dist/hooks/useCabbageProperties.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCabbageProperties.d.ts","sourceRoot":"","sources":["../../src/hooks/useCabbageProperties.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,YAAa,MAAM;;CA0BnD,CAAC"}
+{"version":3,"file":"useCabbageProperties.d.ts","sourceRoot":"","sources":["../../src/hooks/useCabbageProperties.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,YAAa,MAAM;;CAgCnD,CAAC"}

package/dist/hooks/useCabbageState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCabbageState.d.ts","sourceRoot":"","sources":["../../src/hooks/useCabbageState.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,WAAW,MAAM,YAAY,MAAM;;yBAI9B,CAAC;CA2DtC,CAAC"}
+{"version":3,"file":"useCabbageState.d.ts","sourceRoot":"","sources":["../../src/hooks/useCabbageState.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,WAAW,MAAM,YAAY,MAAM;;yBAI9B,CAAC;CAgEtC,CAAC"}

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");console.log("Cabbage: loading cabbage.js");class M{static sendParameterUpdate(a,s=null){const e={command:"parameterChange",obj:JSON.stringify(a)};s!==null?s.postMessage(e):(console.log("Cabbage: sending parameter change from UI",e),window.sendMessageFromUI(e))}static sendCustomCommand(a,s=null){const e={command:a,text:JSON.stringify({})};console.log("Cabbage: sending custom command from UI",e),s!==null?s.postMessage(e):window.sendMessageFromUI(e)}static sendWidgetUpdate(a,s=null){console.log("Cabbage: sending widget update from UI",a.props);const e={command:"widgetStateUpdate",obj:JSON.stringify(a.props)};s!==null?s.postMessage(e):window.sendMessageFromUI(e)}static sendMidiMessageFromUI(a,s,e,o=null){var t={statusByte:a,dataByte1:s,dataByte2:e};const d={command:"midiMessage",obj:JSON.stringify(t)};console.log("Cabbage: sending midi message from UI",t),o!==null?o.postMessage(d):window.sendMessageFromUI(d)}static MidiMessageFromHost(a,s,e){console.log("Cabbage: Got MIDI Message"+a+":"+s+":"+e)}static triggerFileOpenDialog(a,s){var e={channel:s};const o={command:"fileOpen",obj:JSON.stringify(e)};a!==null?a.postMessage(o):window.sendMessageFromUI(o)}}const U=(i,a)=>{const[s,e]=r.useState(),[o,t]=r.useState(),d=l=>{e(l);const g={paramIdx:a,channelType:o,channel:i,value:l};M.sendParameterUpdate(g,null)};return r.useEffect(()=>{const l=g=>{var m,c,u,b,p,f,C,w;const{data:n}=g;if(console.log("Cabbage-React: receiving parameter change",g),console.log("eple",g.data),console.log("banan",(m=g.data)==null?void 0:m.data),console.log("kongle",(u=(c=g.data)==null?void 0:c.data)==null?void 0:u.paramidx),console.log("ananas",(p=(b=g.data)==null?void 0:b.data)==null?void 0:p.value),n.command==="widgetUpdate"){if(n.channel!==i)return;n.value!==void 0&&(e(n.value),typeof n.value=="number"?t("number"):typeof n.value=="string"&&t("string"))}((f=n.data)==null?void 0:f.paramIdx)===a&&n.command==="parameterChange"&&((C=n==null?void 0:n.data)==null?void 0:C.value)!==void 0&&e((w=n==null?void 0:n.data)==null?void 0:w.value)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[]),{value:s,setValue:d}},h=i=>{const[a,s]=r.useState();return r.useEffect(()=>{const e=o=>{const{data:t}=o;t.channel===i&&t.data&&t.command==="widgetUpdate"&&(console.log("Cabbage-React: receiving properties change",t),s(JSON.parse(t.data)))};return window.addEventListener("message",e),()=>{window.removeEventListener("message",e)}},[]),{properties:a}};exports.Cabbage=M;exports.useCabbageProperties=h;exports.useCabbageState=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");console.log("Cabbage: loading cabbage.js");class f{static sendParameterUpdate(s,n=null){const e={command:"parameterChange",obj:JSON.stringify(s)};n!==null?n.postMessage(e):(console.log("Cabbage: sending parameter change from UI",e),window.sendMessageFromUI(e))}static sendCustomCommand(s,n=null){const e={command:s,text:JSON.stringify({})};console.log("Cabbage: sending custom command from UI",e),n!==null?n.postMessage(e):window.sendMessageFromUI(e)}static sendWidgetUpdate(s,n=null){console.log("Cabbage: sending widget update from UI",s.props);const e={command:"widgetStateUpdate",obj:JSON.stringify(s.props)};n!==null?n.postMessage(e):window.sendMessageFromUI(e)}static sendMidiMessageFromUI(s,n,e,o=null){var t={statusByte:s,dataByte1:n,dataByte2:e};const i={command:"midiMessage",obj:JSON.stringify(t)};console.log("Cabbage: sending midi message from UI",t),o!==null?o.postMessage(i):window.sendMessageFromUI(i)}static MidiMessageFromHost(s,n,e){console.log("Cabbage: Got MIDI Message"+s+":"+n+":"+e)}static triggerFileOpenDialog(s,n){var e={channel:n};const o={command:"fileOpen",obj:JSON.stringify(e)};s!==null?s.postMessage(o):window.sendMessageFromUI(o)}}const C=(l,s)=>{const[n,e]=r.useState(),[o,t]=r.useState(),i=g=>{e(g);const d={paramIdx:s,channelType:o,channel:l,value:g};f.sendParameterUpdate(d,null)};return r.useEffect(()=>{const g=d=>{var m,c,u,b,p;const{data:a}=d;if(a.command==="widgetUpdate"){if(a.channel!==l)return;console.log(`[Cabbage-React] ${a.command}: Received initial value for channel "${a.channel}"`,a.value),a.value!==void 0&&(e(a.value),typeof a.value=="number"?t("number"):typeof a.value=="string"&&t("string"))}((m=a.data)==null?void 0:m.paramIdx)===s&&a.command==="parameterChange"&&((c=a==null?void 0:a.data)==null?void 0:c.value)!==void 0&&(console.log(`[Cabbage-React] ${a.command}: Received value change for paramIdx: ${(u=a.data)==null?void 0:u.paramIdx}`,(b=a==null?void 0:a.data)==null?void 0:b.value),e((p=a==null?void 0:a.data)==null?void 0:p.value))};return window.addEventListener("message",g),()=>{window.removeEventListener("message",g)}},[]),{value:n,setValue:i}},v=l=>{const[s,n]=r.useState();return r.useEffect(()=>{const e=o=>{const{data:t}=o;if(t.channel===l&&t.data&&t.command==="widgetUpdate"){const i=JSON.parse(t.data);console.log(`[Cabbage-React] ${t.command}: Received properties for channel: ${t.channel}`,i),n(i)}};return window.addEventListener("message",e),()=>{window.removeEventListener("message",e)}},[]),{properties:s}};exports.Cabbage=f;exports.useCabbageProperties=v;exports.useCabbageState=C;

package/dist/index.mjs

@@ -1,98 +1,110 @@
-import { useState as d, useEffect as C } from "react";
+import { useState as d, useEffect as f } from "react";
 console.log("Cabbage: loading cabbage.js");
-class U {
-  static sendParameterUpdate(a, s = null) {
+class v {
+  static sendParameterUpdate(s, n = null) {
     const e = {
       command: "parameterChange",
-      obj: JSON.stringify(a)
+      obj: JSON.stringify(s)
     };
-    s !== null ? s.postMessage(e) : (console.log("Cabbage: sending parameter change from UI", e), window.sendMessageFromUI(e));
+    n !== null ? n.postMessage(e) : (console.log("Cabbage: sending parameter change from UI", e), window.sendMessageFromUI(e));
   }
-  static sendCustomCommand(a, s = null) {
+  static sendCustomCommand(s, n = null) {
     const e = {
-      command: a,
+      command: s,
       text: JSON.stringify({})
     };
-    console.log("Cabbage: sending custom command from UI", e), s !== null ? s.postMessage(e) : window.sendMessageFromUI(e);
+    console.log("Cabbage: sending custom command from UI", e), n !== null ? n.postMessage(e) : window.sendMessageFromUI(e);
   }
-  static sendWidgetUpdate(a, s = null) {
-    console.log("Cabbage: sending widget update from UI", a.props);
+  static sendWidgetUpdate(s, n = null) {
+    console.log("Cabbage: sending widget update from UI", s.props);
     const e = {
       command: "widgetStateUpdate",
-      obj: JSON.stringify(a.props)
+      obj: JSON.stringify(s.props)
     };
-    s !== null ? s.postMessage(e) : window.sendMessageFromUI(e);
+    n !== null ? n.postMessage(e) : window.sendMessageFromUI(e);
   }
-  static sendMidiMessageFromUI(a, s, e, o = null) {
+  static sendMidiMessageFromUI(s, n, e, o = null) {
     var t = {
-      statusByte: a,
-      dataByte1: s,
+      statusByte: s,
+      dataByte1: n,
       dataByte2: e
     };
-    const r = {
+    const i = {
       command: "midiMessage",
       obj: JSON.stringify(t)
     };
-    console.log("Cabbage: sending midi message from UI", t), o !== null ? o.postMessage(r) : window.sendMessageFromUI(r);
+    console.log("Cabbage: sending midi message from UI", t), o !== null ? o.postMessage(i) : window.sendMessageFromUI(i);
   }
-  static MidiMessageFromHost(a, s, e) {
-    console.log("Cabbage: Got MIDI Message" + a + ":" + s + ":" + e);
+  static MidiMessageFromHost(s, n, e) {
+    console.log("Cabbage: Got MIDI Message" + s + ":" + n + ":" + e);
   }
-  static triggerFileOpenDialog(a, s) {
+  static triggerFileOpenDialog(s, n) {
     var e = {
-      channel: s
+      channel: n
     };
     const o = {
       command: "fileOpen",
       obj: JSON.stringify(e)
     };
-    a !== null ? a.postMessage(o) : window.sendMessageFromUI(o);
+    s !== null ? s.postMessage(o) : window.sendMessageFromUI(o);
   }
 }
-const y = (i, a) => {
-  const [s, e] = d(), [o, t] = d(), r = (l) => {
-    e(l);
-    const g = {
-      paramIdx: a,
+const C = (l, s) => {
+  const [n, e] = d(), [o, t] = d(), i = (g) => {
+    e(g);
+    const r = {
+      paramIdx: s,
       channelType: o,
-      channel: i,
-      value: l
+      channel: l,
+      value: g
     };
-    U.sendParameterUpdate(g, null);
+    v.sendParameterUpdate(r, null);
   };
-  return C(() => {
-    const l = (g) => {
-      var m, c, u, p, b, f, w, M;
-      const { data: n } = g;
-      if (console.log("Cabbage-React: receiving parameter change", g), console.log("eple", g.data), console.log("banan", (m = g.data) == null ? void 0 : m.data), console.log("kongle", (u = (c = g.data) == null ? void 0 : c.data) == null ? void 0 : u.paramidx), console.log("ananas", (b = (p = g.data) == null ? void 0 : p.data) == null ? void 0 : b.value), n.command === "widgetUpdate") {
-        if (n.channel !== i) return;
-        n.value !== void 0 && (e(n.value), typeof n.value == "number" ? t("number") : typeof n.value == "string" && t("string"));
+  return f(() => {
+    const g = (r) => {
+      var m, c, u, p, b;
+      const { data: a } = r;
+      if (a.command === "widgetUpdate") {
+        if (a.channel !== l) return;
+        console.log(
+          `[Cabbage-React] ${a.command}: Received initial value for channel "${a.channel}"`,
+          a.value
+        ), a.value !== void 0 && (e(a.value), typeof a.value == "number" ? t("number") : typeof a.value == "string" && t("string"));
       }
-      ((f = n.data) == null ? void 0 : f.paramIdx) === a && n.command === "parameterChange" && ((w = n == null ? void 0 : n.data) == null ? void 0 : w.value) !== void 0 && e((M = n == null ? void 0 : n.data) == null ? void 0 : M.value);
+      ((m = a.data) == null ? void 0 : m.paramIdx) === s && a.command === "parameterChange" && ((c = a == null ? void 0 : a.data) == null ? void 0 : c.value) !== void 0 && (console.log(
+        `[Cabbage-React] ${a.command}: Received value change for paramIdx: ${(u = a.data) == null ? void 0 : u.paramIdx}`,
+        (p = a == null ? void 0 : a.data) == null ? void 0 : p.value
+      ), e((b = a == null ? void 0 : a.data) == null ? void 0 : b.value));
     };
-    return window.addEventListener("message", l), () => {
-      window.removeEventListener("message", l);
+    return window.addEventListener("message", g), () => {
+      window.removeEventListener("message", g);
     };
   }, []), {
-    value: s,
-    setValue: r
+    value: n,
+    setValue: i
   };
-}, I = (i) => {
-  const [a, s] = d();
-  return C(() => {
+}, M = (l) => {
+  const [s, n] = d();
+  return f(() => {
     const e = (o) => {
       const { data: t } = o;
-      t.channel === i && t.data && t.command === "widgetUpdate" && (console.log("Cabbage-React: receiving properties change", t), s(JSON.parse(t.data)));
+      if (t.channel === l && t.data && t.command === "widgetUpdate") {
+        const i = JSON.parse(t.data);
+        console.log(
+          `[Cabbage-React] ${t.command}: Received properties for channel: ${t.channel}`,
+          i
+        ), n(i);
+      }
     };
     return window.addEventListener("message", e), () => {
       window.removeEventListener("message", e);
     };
   }, []), {
-    properties: a
+    properties: s
   };
 };
 export {
-  U as Cabbage,
-  I as useCabbageProperties,
-  y as useCabbageState
+  v as Cabbage,
+  M as useCabbageProperties,
+  C as useCabbageState
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cabbage-react",
-	"version": "1.0.0-beta.25",
+	"version": "1.0.0-beta.27",
 	"type": "module",
 	"keywords": [
 		"cabbage",