cabbage-react 1.0.0-beta.1 → 1.0.0-beta.1.1

package/README.md

@@ -1,8 +1,8 @@
-# Cabbage React
+# 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/vscabbage-react-example).
+An example of implementation can be found [here](https://github.com/hdale94/cabbage-react-example).
 
 ## Install
 

package/dist/cabbage/cabbage.d.ts

@@ -1,42 +1,9 @@
 export class Cabbage {
-    /**
-     * Sends a parameter update message.
-     * @param {Object} message - The parameter update data.
-     * @param {Object|null} [vscode=null] - Optional VSCode API object for messaging.
-     */
-    static sendParameterUpdate(message: Object, vscode?: Object | null): void;
-    /**
-     * Sends a custom command message.
-     * @param {string} command - The custom command.
-     * @param {Object|null} [vscode=null] - Optional VSCode API object for messaging.
-     */
-    static sendCustomCommand(command: string, vscode?: Object | null): void;
-    /**
-     * Sends a widget update message.
-     * @param {Object} widget - The widget object containing properties.
-     * @param {Object|null} [vscode=null] - Optional VSCode API object for messaging.
-     */
-    static sendWidgetUpdate(widget: Object, vscode?: Object | null): void;
-    /**
-     * Sends a MIDI message from the UI.
-     * @param {number} statusByte - MIDI status byte.
-     * @param {number} dataByte1 - First data byte.
-     * @param {number} dataByte2 - Second data byte.
-     * @param {Object|null} [vscode=null] - Optional VSCode API object for messaging.
-     */
-    static sendMidiMessageFromUI(statusByte: number, dataByte1: number, dataByte2: number, vscode?: Object | null): void;
-    /**
-     * Handles incoming MIDI messages from the host.
-     * @param {number} statusByte - MIDI status byte.
-     * @param {number} dataByte1 - First data byte.
-     * @param {number} dataByte2 - Second data byte.
-     */
-    static MidiMessageFromHost(statusByte: number, dataByte1: number, dataByte2: number): void;
-    /**
-     * Triggers a file open dialog.
-     * @param {Object} vscode - VSCode API object for messaging.
-     * @param {string} channel - The channel identifier.
-     */
-    static triggerFileOpenDialog(vscode: Object, channel: string): void;
+    static sendParameterUpdate(message: any, vscode?: null): void;
+    static sendCustomCommand(command: any, vscode?: null): void;
+    static sendWidgetUpdate(widget: any, vscode?: null): void;
+    static sendMidiMessageFromUI(statusByte: any, dataByte1: any, dataByte2: any, vscode?: null): void;
+    static MidiMessageFromHost(statusByte: any, dataByte1: any, dataByte2: any): void;
+    static triggerFileOpenDialog(vscode: any, channel: any): void;
 }
 //# sourceMappingURL=cabbage.d.ts.map

package/dist/cabbage/cabbage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cabbage.d.ts","sourceRoot":"","sources":["../../src/cabbage/cabbage.js"],"names":[],"mappings":"AAMA;IACC;;;;OAIG;IACH,oCAHW,MAAM,WACN,MAAM,GAAC,IAAI,QAerB;IAED;;;;OAIG;IACH,kCAHW,MAAM,WACN,MAAM,GAAC,IAAI,QAerB;IAED;;;;OAIG;IACH,gCAHW,MAAM,WACN,MAAM,GAAC,IAAI,QAerB;IAED;;;;;;OAMG;IACH,yCALW,MAAM,aACN,MAAM,aACN,MAAM,WACN,MAAM,GAAC,IAAI,QAyBrB;IAED;;;;;OAKG;IACH,uCAJW,MAAM,aACN,MAAM,aACN,MAAM,QAWhB;IAED;;;;OAIG;IACH,qCAHW,MAAM,WACN,MAAM,QAiBhB;CACD"}
+{"version":3,"file":"cabbage.d.ts","sourceRoot":"","sources":["../../src/cabbage/cabbage.js"],"names":[],"mappings":"AAMA;IAEE,8DAYC;IAED,4DAYC;IAED,0DAYC;IAED,mGAmBC;IAED,kFAEC;IAED,8DAeC;CAGF"}

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;;CA0BnD,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;;CAoCtC,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;CAkDtC,CAAC"}

package/dist/index.cjs

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

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,127 +1,93 @@
-import { useState as m, useEffect as r } from "react";
+import { useState as d, useEffect as m } from "react";
 console.log("Cabbage: loading cabbage.js");
 class c {
-  /**
-   * Sends a parameter update message.
-   * @param {Object} message - The parameter update data.
-   * @param {Object|null} [vscode=null] - Optional VSCode API object for messaging.
-   */
-  static sendParameterUpdate(s, a = null) {
+  static sendParameterUpdate(a, s = null) {
     const e = {
       command: "parameterChange",
-      obj: JSON.stringify(s)
+      obj: JSON.stringify(a)
     };
-    a !== null ? a.postMessage(e) : (console.log("Cabbage: sending parameter change from UI", e), typeof IPlugSendMsg == "function" && IPlugSendMsg(e));
+    s !== null ? s.postMessage(e) : (console.log("Cabbage: sending parameter change from UI", e), window.sendMessageFromUI(e));
   }
-  /**
-   * Sends a custom command message.
-   * @param {string} command - The custom command.
-   * @param {Object|null} [vscode=null] - Optional VSCode API object for messaging.
-   */
-  static sendCustomCommand(s, a = null) {
+  static sendCustomCommand(a, s = null) {
     const e = {
-      command: s,
+      command: a,
       text: JSON.stringify({})
     };
-    console.log("Cabbage: sending custom command from UI", e), a !== null ? a.postMessage(e) : typeof IPlugSendMsg == "function" && IPlugSendMsg(e);
+    console.log("Cabbage: sending custom command from UI", e), s !== null ? s.postMessage(e) : window.sendMessageFromUI(e);
   }
-  /**
-   * Sends a widget update message.
-   * @param {Object} widget - The widget object containing properties.
-   * @param {Object|null} [vscode=null] - Optional VSCode API object for messaging.
-   */
-  static sendWidgetUpdate(s, a = null) {
-    console.log("Cabbage: sending widget update from UI", s.props);
+  static sendWidgetUpdate(a, s = null) {
+    console.log("Cabbage: sending widget update from UI", a.props);
     const e = {
       command: "widgetStateUpdate",
-      obj: JSON.stringify(s.props)
+      obj: JSON.stringify(a.props)
     };
-    a !== null ? a.postMessage(e) : typeof IPlugSendMsg == "function" && IPlugSendMsg(e);
+    s !== null ? s.postMessage(e) : window.sendMessageFromUI(e);
   }
-  /**
-   * Sends a MIDI message from the UI.
-   * @param {number} statusByte - MIDI status byte.
-   * @param {number} dataByte1 - First data byte.
-   * @param {number} dataByte2 - Second data byte.
-   * @param {Object|null} [vscode=null] - Optional VSCode API object for messaging.
-   */
-  static sendMidiMessageFromUI(s, a, e, n = null) {
-    var l = {
-      statusByte: s,
-      dataByte1: a,
+  static sendMidiMessageFromUI(a, s, e, o = null) {
+    var n = {
+      statusByte: a,
+      dataByte1: s,
       dataByte2: e
     };
-    const i = {
+    const l = {
       command: "midiMessage",
-      obj: JSON.stringify(l)
+      obj: JSON.stringify(n)
     };
-    console.log("Cabbage: sending midi message from UI", l), n !== null ? n.postMessage(i) : typeof IPlugSendMsg == "function" && IPlugSendMsg(i);
+    console.log("Cabbage: sending midi message from UI", n), o !== null ? o.postMessage(l) : window.sendMessageFromUI(l);
   }
-  /**
-   * Handles incoming MIDI messages from the host.
-   * @param {number} statusByte - MIDI status byte.
-   * @param {number} dataByte1 - First data byte.
-   * @param {number} dataByte2 - Second data byte.
-   */
-  static MidiMessageFromHost(s, a, e) {
-    console.log(
-      "Cabbage: Got MIDI Message" + s + ":" + a + ":" + e
-    );
+  static MidiMessageFromHost(a, s, e) {
+    console.log("Cabbage: Got MIDI Message" + a + ":" + s + ":" + e);
   }
-  /**
-   * Triggers a file open dialog.
-   * @param {Object} vscode - VSCode API object for messaging.
-   * @param {string} channel - The channel identifier.
-   */
-  static triggerFileOpenDialog(s, a) {
+  static triggerFileOpenDialog(a, s) {
     var e = {
-      channel: a
+      channel: s
     };
-    const n = {
+    const o = {
       command: "fileOpen",
       obj: JSON.stringify(e)
     };
-    s !== null ? s.postMessage(n) : typeof IPlugSendMsg == "function" && IPlugSendMsg(n);
+    a !== null ? a.postMessage(o) : window.sendMessageFromUI(o);
   }
 }
-const f = (o, s) => {
-  const [a, e] = m(), [n, l] = m(), i = (g) => {
+const p = (i, a) => {
+  const [s, e] = d(), [o, n] = d(), l = (g) => {
     e(g);
-    const d = {
-      paramIdx: s,
-      channel: o,
+    const r = {
+      paramIdx: a,
+      channelType: o,
+      channel: i,
       value: g
     };
-    c.sendParameterUpdate(d, null);
+    c.sendParameterUpdate(r, null);
   };
-  return r(() => {
-    const g = (d) => {
-      const { data: t } = d;
-      t.channel === o && t.command === "widgetUpdate" && (t.value && e(t.value), t.data && l(JSON.parse(t.data)));
+  return m(() => {
+    const g = (r) => {
+      const { data: t } = r;
+      console.log("Cabbage-React: receiving parameter change", t), console.log("data.data", t.data), t.data.paramIdx === a && (t.command === "widgetUpdate" ? t.value !== void 0 && (e(t.value), typeof t.value == "number" ? n("number") : typeof t.value == "string" && n("string")) : t.command === "parameterChange" && e(t.value));
     };
     return window.addEventListener("message", g), () => {
       window.removeEventListener("message", g);
     };
   }, []), {
-    value: a,
-    setValue: i,
-    data: n
+    value: s,
+    setValue: l
   };
-}, p = () => {
-  const [o, s] = m();
-  return r(() => {
-    const a = (e) => {
-      const { data: n } = e;
-      n.data && n.channel === "MainForm" && n.command === "widgetUpdate" && s(JSON.parse(n.data));
+}, b = (i) => {
+  const [a, s] = d();
+  return m(() => {
+    const e = (o) => {
+      const { data: n } = o;
+      n.channel === i && n.data && n.command === "widgetUpdate" && (console.log("Cabbage-React: receiving data change", n), s(JSON.parse(n.data)));
     };
-    return window.addEventListener("message", a), () => {
-      window.removeEventListener("message", a);
+    return window.addEventListener("message", e), () => {
+      window.removeEventListener("message", e);
     };
   }, []), {
-    data: o
+    properties: a
   };
 };
 export {
-  f as useCabbageState,
-  p as useGetCabbageFormData
+  c as Cabbage,
+  b as useCabbageProperties,
+  p as useCabbageState
 };

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "cabbage-react",
-	"version": "1.0.0-beta.1",
+	"version": "1.0.0-beta.1.1",
 	"type": "module",
 	"keywords": [
-		"vscabbage",
+		"cabbage",
 		"react"
 	],
 	"author": "Håkon Dale",
@@ -13,13 +13,14 @@
 		"url": "git+https://github.com/hdale94/cabbage-react.git"
 	},
 	"main": "./dist/index.cjs",
+	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
+			"types": "./dist/index.d.ts",
 			"import": "./dist/index.mjs",
 			"require": "./dist/index.cjs"
 		}
 	},
-	"types": "./dist/index.d.ts",
 	"scripts": {
 		"prepublish": "rm -rf ./dist && npm run build",
 		"build": "vite build"

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;;CA2BjC,CAAC"}