fix(MqqtVariableMessenger): accepts both json and plain strings

Author: xiduzo

apps/figma-plugin/src/common/types/Message.ts

@@ -14,6 +14,7 @@ export enum MESSAGE_TYPE {
 
 export enum LOCAL_STORAGE_KEYS {
 	MQTT_CONNECTION = 'MQTT_CONNECTION',
+	DARK_MODE = 'DARK_MODE',
 }
 
 type SetUiOptionsMessage = {

apps/figma-plugin/src/ui/components/MqttVariableMessenger.ts

@@ -10,7 +10,6 @@ export function MqttVariableMessenger() {
 	const { status, publish, subscribe, uniqueId } = useMqtt();
 	const publishedVariableValues = useRef<Map<string, any | undefined>>(new Map());
 	const knownVariables = useRef<Record<string, KnownVariable>>({}); // <id, name>
-	const lastReceveivedVariables = useRef<Map<string, number>>(new Map());
 
 	async function publishVariables(variables?: Variable[]) {
 		const newVariables =
@@ -52,7 +51,7 @@ export function MqttVariableMessenger() {
 	useEffect(() => {
 		if (status !== 'connected') return;
 
-		subscribe(`microflow/v1/${uniqueId}/+/variables/request`, topic => {
+		const req = subscribe(`microflow/v1/${uniqueId}/+/variables/request`, topic => {
 			const app = topic.split('/')[3];
 			publish(
 				`microflow/v1/${uniqueId}/${app}/variables/response`,
@@ -61,18 +60,29 @@ export function MqttVariableMessenger() {
 			publishedVariableValues.current.forEach((value, id) => {
 				publish(`microflow/v1/${uniqueId}/${app}/variable/${id}`, value);
 			});
-		});
+		}).catch(console.error);
 
-		subscribe(`microflow/v1/${uniqueId}/+/variable/+/set`, async (topic, message) => {
+		const set = subscribe(`microflow/v1/${uniqueId}/+/variable/+/set`, async (topic, message) => {
 			const [, , , app, , variableId] = topic.split('/');
-			const value = JSON.parse(message.toString());
+
+			let value = null;
+			try {
+				value = JSON.parse(message.toString());
+			} catch (e) {
+				value = message.toString();
+			}
 
 			console.debug('[SET] <<<', value);
 
 			// Make sure we don't send the same value back to the app
 			publishedVariableValues.current.set(variableId, JSON.stringify(value));
 			sendMessageToFigma(SetLocalValiable(variableId, value as VariableValue));
-		});
+		}).catch(console.error);
+
+		return () => {
+			req.then(unsub => unsub?.()).catch(console.error);
+			set.then(unsub => unsub?.()).catch(console.error);
+		};
 	}, [status, subscribe, publish, uniqueId]);
 
 	useMessageListener<Variable[] | undefined>(MESSAGE_TYPE.GET_LOCAL_VARIABLES, publishVariables, {

packages/mqtt-provider/src/hooks/useMqttClient.ts

@@ -35,21 +35,22 @@ export function useMqttClient() {
 			callback: mqtt.OnMessageCallback,
 			options?: mqtt.IClientSubscribeOptions | mqtt.IClientSubscribeProperties,
 		) => {
-			console.debug('[SUBSCRIBE]', topic, options);
+			console.info('[SUBSCRIBE]', topic, options);
 			subscriptions.current.set(topic, { callback, options });
 			await client.current
-				?.subscribeAsync(topic, options) // tODO: these options should be passed by subscriber
+				?.subscribeAsync(topic, options) // TODO: these options should be passed by subscriber
 				.catch(console.error);
 
 			return () => {
+				console.info('[UNSUBSCRIBE]', topic, options);
 				unsubscribe?.(topic)?.catch(console.error);
 			};
 		},
 		[unsubscribe],
 	);
 
 	const publish = useCallback((topic: string, payload: string, options?: IClientPublishOptions) => {
-		console.debug('[PUBLISH]', topic, payload, options);
+		console.info('[PUBLISH]', topic, payload, options);
 		return client.current?.publishAsync(topic, payload, options);
 	}, []);