cabbage-react 1.0.0-beta.2 → 1.0.0-beta.22

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/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;CAsDtC,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 d={statusByte:s,dataByte1:a,dataByte2:e};const l={command:"midiMessage",obj:JSON.stringify(d)};console.log("Cabbage: sending midi message from UI",d),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,d]=i.useState(),l=g=>{e(g);const r={paramIdx:s,channel:o,value:g};m.sendParameterUpdate(r,null)};return i.useEffect(()=>{const g=r=>{const{data:n}=r;n.channel===o&&n.command==="widgetUpdate"&&(n.value&&e(n.value),n.data&&d(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;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 i=require("react");console.log("Cabbage: loading cabbage.js");class C{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,n=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),n!==null?n.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 n={command:"fileOpen",obj:JSON.stringify(e)};a!==null?a.postMessage(n):window.sendMessageFromUI(n)}}const w=(r,a)=>{const[s,e]=i.useState(),[n,t]=i.useState(),d=l=>{e(l);const o={paramIdx:a,channelType:n,channel:r,value:l};C.sendParameterUpdate(o,null)};return i.useEffect(()=>{const l=o=>{var m,c,u,b,p,f;const{data:g}=o;console.log("Cabbage-React: receiving message",o),console.log("eple",o.data),console.log("banan",(m=o.data)==null?void 0:m.data),console.log("kongle",(u=(c=o.data)==null?void 0:c.data)==null?void 0:u.paramidx),console.log("ananas",(p=(b=o.data)==null?void 0:b.data)==null?void 0:p.value),g.command==="widgetUpdate"&&g.value!==void 0&&(e(g.value),typeof g.value=="number"?t("number"):typeof g.value=="string"&&t("string")),((f=g.data)==null?void 0:f.paramIdx)===a&&g.command==="parameterChange"&&e(g.value)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[]),{value:s,setValue:d}},M=r=>{const[a,s]=i.useState();return i.useEffect(()=>{const e=n=>{const{data:t}=n;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=C;exports.useCabbageProperties=M;exports.useCabbageState=w;

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,94 @@
-import { useState as m, useEffect as r } from "react";
+import { useState as r, useEffect as w } from "react";
 console.log("Cabbage: loading cabbage.js");
-class c {
-  static sendParameterUpdate(s, a = null) {
+class M {
+  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), window.sendMessageFromUI(e));
+    s !== null ? s.postMessage(e) : (console.log("Cabbage: sending parameter change from UI", e), window.sendMessageFromUI(e));
   }
-  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) : window.sendMessageFromUI(e);
+    console.log("Cabbage: sending custom command from UI", e), s !== null ? s.postMessage(e) : window.sendMessageFromUI(e);
   }
-  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) : window.sendMessageFromUI(e);
+    s !== null ? s.postMessage(e) : window.sendMessageFromUI(e);
   }
-  static sendMidiMessageFromUI(s, a, e, n = null) {
-    var i = {
-      statusByte: s,
-      dataByte1: a,
+  static sendMidiMessageFromUI(a, s, e, t = null) {
+    var n = {
+      statusByte: a,
+      dataByte1: s,
       dataByte2: e
     };
     const d = {
       command: "midiMessage",
-      obj: JSON.stringify(i)
+      obj: JSON.stringify(n)
     };
-    console.log("Cabbage: sending midi message from UI", i), n !== null ? n.postMessage(d) : window.sendMessageFromUI(d);
+    console.log("Cabbage: sending midi message from UI", n), t !== null ? t.postMessage(d) : window.sendMessageFromUI(d);
   }
-  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);
   }
-  static triggerFileOpenDialog(s, a) {
+  static triggerFileOpenDialog(a, s) {
     var e = {
-      channel: a
+      channel: s
     };
-    const n = {
+    const t = {
       command: "fileOpen",
       obj: JSON.stringify(e)
     };
-    s !== null ? s.postMessage(n) : window.sendMessageFromUI(n);
+    a !== null ? a.postMessage(t) : window.sendMessageFromUI(t);
   }
 }
-const b = (o, s) => {
-  const [a, e] = m(), [n, i] = m(), d = (g) => {
-    e(g);
-    const l = {
-      paramIdx: s,
-      channel: o,
-      value: g
+const U = (i, a) => {
+  const [s, e] = r(), [t, n] = r(), d = (l) => {
+    e(l);
+    const o = {
+      paramIdx: a,
+      channelType: t,
+      channel: i,
+      value: l
     };
-    c.sendParameterUpdate(l, null);
+    M.sendParameterUpdate(o, null);
   };
-  return r(() => {
-    const g = (l) => {
-      const { data: t } = l;
-      t.channel === o && t.command === "widgetUpdate" && (t.value && e(t.value), t.data && i(JSON.parse(t.data)));
+  return w(() => {
+    const l = (o) => {
+      var m, c, u, p, b, f;
+      const { data: g } = o;
+      console.log("Cabbage-React: receiving message", o), console.log("eple", o.data), console.log("banan", (m = o.data) == null ? void 0 : m.data), console.log("kongle", (u = (c = o.data) == null ? void 0 : c.data) == null ? void 0 : u.paramidx), console.log("ananas", (b = (p = o.data) == null ? void 0 : p.data) == null ? void 0 : b.value), g.command === "widgetUpdate" && g.value !== void 0 && (e(g.value), typeof g.value == "number" ? n("number") : typeof g.value == "string" && n("string")), ((f = g.data) == null ? void 0 : f.paramIdx) === a && g.command === "parameterChange" && e(g.value);
     };
-    return window.addEventListener("message", g), () => {
-      window.removeEventListener("message", g);
+    return window.addEventListener("message", l), () => {
+      window.removeEventListener("message", l);
     };
   }, []), {
-    value: a,
-    setValue: d,
-    data: n
+    value: s,
+    setValue: d
   };
-}, f = () => {
-  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));
+}, h = (i) => {
+  const [a, s] = r();
+  return w(() => {
+    const e = (t) => {
+      const { data: n } = t;
+      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 {
-  b as useCabbageState,
-  f as useGetCabbageFormData
+  M as Cabbage,
+  h as useCabbageProperties,
+  U as useCabbageState
 };

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "cabbage-react",
-	"version": "1.0.0-beta.2",
+	"version": "1.0.0-beta.22",
 	"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"}