Does anyone have a working example for managing multiple plugins in a react/typescript setup?
I tried to include the relevant parts from the ui-react-starter project (PanelController etc), but I keep getting the following error upon plugin load:
Also, I couldn’t build/watch the ui-react-starter itself, since it gave me dozens of errors that I couldn’t resolve.
Edit: Here’s the rough setup:
const { entrypoints } = require('uxp');
const rotatorController = new PanelController(() => <Rotator />, { id: "rotator", menuItems: [] });
const shuffleController = new PanelController(() => <Shuffle />, { id: "shuffle", menuItems: [] });
entrypoints.setup({
plugin: {
create() {},
destroy() {}
},
panels: {
rotator: rotatorController,
shuffle: shuffleController,
}
});
and the PanelController:
import ReactDOM from "react-dom";
export default class PanelController {
private id: string;
private root: HTMLElement;
private attachment: any;
private Component: any;
private menuItems = [];
constructor(Component, { id, menuItems }: { id: string, menuItems?: any[] }) {
this.Component = Component;
this.id = id;
this.menuItems = (menuItems || []).map(menuItem => ({
id: menuItem.id,
label: menuItem.label,
enabled: menuItem.enabled || true,
checked: menuItem.checked || false
}));
["create", "show", "hide", "destroy", "invokeMenu"].forEach(fn => this[fn] = this[fn].bind(this));
}
public create() {
this.root = document.createElement("div");
this.root.style.height = "100vh";
this.root.style.overflow = "auto";
this.root.style.padding = "8px";
ReactDOM.render(this.Component({ panel: this }), this.root);
return this.root;
}
public show(event) {
if (!this.root) { this.create() };
this.attachment = event.node;
this.attachment.appendChild(this.root);
}
public hide() {
if (this.attachment && this.root) {
this.attachment.removeChild(this.root);
this.attachment = null;
}
}
public destroy() {
console.log('destroy')
}
public invokeMenu(id) {
const menuItem = this.menuItems.find(c => c.id === id);
if (menuItem) {
const handler = menuItem.oninvoke;
if (handler) {
handler();
}
}
}
}
@kerrishotts Maybe you have an idea? I’m not sure how you managed to set the panel values to an instance of the PanelController Class. If I replace the code with something like
entrypoints.setup({
plugin: {
create() {},
destroy() {}
},
panels: {
shuffle: {
create() { },
show() { },
hide() { },
destroy() { },
invokeMenu() { },
menuItems: []
},
}
});
… the error goes away, so the panelController instances must be the problem
