How to send selection nodes name to app.tsx

[PepperKUN]

Hello, I am now in a situation of how to return the node name string selected by figma to the App.tsx page. So far, it seems that I can only handle this string information in the class under messages. What if I want to return these strings to App.tsx and use setState to refresh the display of the page. How should it be done according to the current structure?

[PepperKUN]

import * as Networker from "monorepo-networker";
import { NetworkSide } from "../sides";
import { keyframe } from "../../../type/types";

interface Payload {
  keyframes: {
    [key:string]: keyframe[]
  };
  allowPlay: boolean;
}

export class SelectionMessage extends Networker.MessageType<Payload> {

  receivingSide(): Networker.Side {
    return NetworkSide.UI;
  }

  handle(payload: Payload) {
    //can only resolve the message here ↓↓↓
    console.group('selection')
    console.log(payload.allowPlay)
    console.table(payload.keyframes);
    console.groupEnd()
  }
}

[iGoodie]

Hey there! 😄

In theory, you can use a global store library (like Redux or Zustand) to store your data globally and initiate state updates outside a React component. Theoretically it'd look like so:

• plugin/plugin.ts

  figma.on("selectionchange", () => {
    const { selection } = figma.currentPage;
  
    NetworkMessages.SELECTION_CHANGED.send({
      selection: selection.map((selection) => ({
        id: selection.id,
        boundingBox: selection.absoluteBoundingBox,
      })),
    });
  });

• common/network/messages/SelectionMessage.ts

  
  import { store } from "/path/to/createdStore";

interface Payload { selection: { id: string; boundingBox: Rect | null; }[]; }

export class SelectionMessage extends Networker.MessageType { receivingSide(): Networker.Side { return NetworkSide.UI; }

handle(payload: Payload): void { store.dispatch({ type: "SELECT", payload, }); } }

[iGoodie]

I might also want to support arbitrary subscriptions to the messages too. I'll include this under https://github.com/CoconutGoodie/monorepo-networker as a feature request 😄

[PepperKUN]

Thank you, using a global store library is better than my current method. I'll try this way to assign data from figma to plugin page. I also looking forward to the new feature, it seems to make the code concise and elegant. 😍