react-homie-devices

[nstadigs]

Custom React renderer to "render" homie devices on your network.

Some might say "BUT WHY 😭". Others (like me) might think that this is a good idea.
Anyway, I've built a custom react renderer and here's the POC: https://github.com/nstadigs/homie-js/blob/main/packages/react-homie-devices/README.md

This is a POC. Many essential things, like setting and receiving values, aren't working yet. But you can render and update your components and the renderer will send messages in the correct order (I think) to add, update and remove homie devices via an MqttAdapter.

Here's an example:

A Device to control LG Tvs on your network could be implemented something like
this (very simplified):

import * as React from "react";
import {
  Device,
  Enum,
  Integer,
  Node,
  start,
} from "@nstadigs/react-homie-devices";

// This doesn't exist yet...
import { MqttAdapter } from "@nstadigs/homie-mqttjs-adapter";

function Controller() {
  const [tvs, setTvs] = useState([]);

  const searchForLgtvDevices = async () => {
    const devices = await useSomeApiToGetDevicesOnTheNetwork();
    setTvs(devices);
  };

  return (
    <Device id="lgtv-controller">
      <Node id="actions">
        <Enum
          id="actions"
          settable
          options={["search"]}
          onSet={(action) => {
            if (action === "search") {
              searchForLgtvDevices();
            }
          }}
        />
      </Node>
      {tvs.map(({ id, name }) => <TV id={id} name={name} />)}
    </Device>
  );
}

function TV({ id, name, isPaired, setPaired }) {
  const handlePairCommand = async () => {
    await callSomeApiToPairTheTv();
    setPaired();
  };

  return (
    <Device id={id} name={name}>
      <Node id="pairing">
        <Enum
          id="commands"
          settable
          options={["pair"]}
          onSet={(value) => {
            if (value === "pair") {
              handlePairCommand();
            }
          }}
        />
        <Enum
          id="status"
          retained
          options={["not-paired", "pairing", "paired"]}
          value="not-paired"
        />
      </Node>
      {isPaired && (
        <>
          <Node id="audio" name="Audio controls">
            <Integer
              id="volume"
              retained
              settable
              value={0}
              min={0}
              max={100}
              step={1}
              onSet={(newVolume) => {
                // Call lgtv api to set volume
              }}
            />
          </Node>
        </>
      )}
    </Device>
  );
}

start(<Controller />, new MqttAdapter({ url: "mqtt://localhost:1883" }));

[Tieske]

I don't understand what this is supposed to do? Will it render a UI for Homie devices in a react component?

[Tieske]

so then. it provides a REST based API to access Homie devices?

[nstadigs]

No, but I understand why this is confusing 😅 . I'll come up with a better example

[schaze]

So it is a lib to implement homie devices but with a declarative approach? What makes it "reactive"?

[nstadigs]

So it is a lib to implement homie devices but with a declarative approach? ...

Exactly!

... What makes it "reactive"?

It depends on what you are referring to. I'll assume zero knowledge of React below. Just ignore the parts you already know.

A. The word/name React

If you are referring to my use of the word/name "React", then it's the name of the library that I use to achieve this. React is primarily used to render user interfaces by constructing "trees" of elements. The renderer will take these trees and apply them to a host environment. For example, the renderer "react-dom" renders them to a DOM (web) if you like. Another renderer, "react-native" takes the trees and render them a native UI elements on Android, iOS or Windows. Whenever you change the tree, the renderer will do what has to be done for the state in the host environment to match the tree.

But you can create your own renderer to apply it to any environment. Here I take the trees of Devices, Nodes and Properties and "render" them as homie messages that will be sent to an MQTT broker. With every change in the tree I can calculate what messages that have to be sent for the homie devices in the broker to match the rendered tree of elements. You can construct homie devices in the same way that you construct web uis with react. Here a non-exhaustive list of other react renderers in the wild: https://github.com/chentsulin/awesome-react-renderer.

React has been criticized for the name "react" by developers who don't think that it's "reactive" in the way that they think of the meaning of the word "reactive".

B. Reacting to changes

Changing the state of any component in the tree will trigger what React calls a "rerender". For example, if the value of a property changes from one state to the next, then the renderer will pick that up and send the appropriate message to the broker. You could also add event handlers (onSet in the example in the OP) to properties to handle the homie set commands for that property. That command could trigger a state change in React which in turn could change the tree somehow.

Did any of this answer your question?

[schaze]

Thanks for the detailed explanation. My question was mainly to get a comparison to my node-homie lib, as this mostly also uses rxjs observable chains to update and provide event streams.