cabbage-react 1.0.0-beta.8 → 1.0.0

package/README.md

@@ -1,19 +1,108 @@
-# Cabbage React
-
-This project provides hooks that allow you to synchronize [Cabbage](https://cabbageaudio.com) with [React](https://github.com/facebook/react).
-
-An example of implementation can be found [here](https://github.com/hdale94/cabbage-react-example).
-
-## Install
-
-    yarn add 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).
-
-### useGetCabbageFormData
-
-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.
+# Cabbage React
+
+Cabbage React provides React hooks for synchronizing [Cabbage](https://cabbageaudio.com) with [React](https://github.com/facebook/react), making it easier to build a custom UI that communicates with the Cabbage host.
+
+## Example Project
+
+An example of implementation is available [here](https://github.com/hdale94/cabbage-react-example).
+
+## Installation
+
+```jsx
+yarn add cabbage-react
+# or
+npm install cabbage-react
+```
+
+## Hooks
+
+### useCabbageState
+
+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
+
+```jsx
+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>
+			{/* Label */}
+			<p style={{ marginBottom: "4px" }}>{properties?.text ?? "Label"}</p>
+
+			<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(148, 242, 254)",
+					marginTop: "20px",
+					...inputProps?.style,
+				}}
+			/>
+
+			{/* Displaying the value */}
+			<p style={{ marginTop: "4px" }}>{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:
+
+```jsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { Cabbage } from "cabbage-react";
+
+if (import.meta.env.PROD) {
+	// Notify Cabbage that the UI is ready to receive data
+	Cabbage.sendCustomCommand("cabbageIsReadyToLoad");
+}
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>
+);
+```

package/dist/hooks/useCabbageProperties.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Custom hook to get a parameter's properties from Cabbage.
+ * This hook listens for updates to parameter properties via Cabbage and updates the local state
+ * whenever new data is received.
+ */
+export declare const useCabbageProperties: (channel: string) => {
+    properties: Record<string, any> | undefined;
+};
+//# sourceMappingURL=useCabbageProperties.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -6,6 +6,5 @@
 export declare const useCabbageState: <T>(channel: string, paramIdx: number) => {
     value: T | undefined;
     setValue: (newValue: T) => void;
-    data: any;
 };
 //# sourceMappingURL=useCabbageState.d.ts.map

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;;CAqCtC,CAAC"}
+{"version":3,"file":"useCabbageState.d.ts","sourceRoot":"","sources":["../../src/hooks/useCabbageState.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,WAAW,MAAM,YAAY,MAAM;;yBAM9B,CAAC;CAwFtC,CAAC"}

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { useCabbageState } from './hooks/useCabbageState';
-export { useGetCabbageFormData } from './hooks/useGetCabbageFormData';
+export { useCabbageProperties } from './hooks/useCabbageProperties';
+export { Cabbage } from './cabbage/cabbage';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.mjs

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

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "cabbage-react",
-	"version": "1.0.0-beta.8",
+	"version": "1.0.0",
 	"type": "module",
 	"keywords": [
-		"vscabbage",
+		"cabbage",
 		"react"
 	],
 	"author": "Håkon Dale",

package/dist/hooks/useGetCabbageFormData.d.ts

@@ -1,9 +0,0 @@
-/**
- * Custom hook to 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.
- */
-export declare const useGetCabbageFormData: () => {
-    data: any;
-};
-//# sourceMappingURL=useGetCabbageFormData.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useGetCabbageFormData.d.ts","sourceRoot":"","sources":["../../src/hooks/useGetCabbageFormData.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;;CA4BjC,CAAC"}