roblox-ts•2w ago

How to start with plugins + react?

I am using the Comet framework + react to make a dss editor, but I can't seem to figure out how to create a view. From what I could gather from various sources I put together this code which I'm just trying to get some random UI to show up, but it is giving me a very big error that I cannot deduce any issue from:

// src/systems/main-system.ts
import { Button, Dependency, GUI, OnEnd, OnInit, System, View } from "@rbxts/comet";
import React from "@rbxts/react";
import { createRoot } from "@rbxts/react-roblox";

interface UIProps {}
interface UIState {}

class MainView extends React.Component<UIProps, UIState> {
    constructor(props: UIProps) {
        super(props);
    }

    public render(): React.Element {
        return(
            <screengui>
                <!-- ... -->
            </screengui>
        )
    }
}

@System()
export class MainSystem implements OnInit, OnEnd {
    private GUI = Dependency(GUI)
    public openButton: Button;
    public widget: View;

    constructor() {
        this.openButton = this.GUI.createButton("MyButton", "", "");
        this.widget = this.GUI.createWidget("MyWidget", Vector2.zero, Vector2.zero);
    }

    onInit(): void {
        this.openButton.onPress(() => {
            this.widget.mount((root) => {
                let reactroot = createRoot(root)
                reactroot.render(React.createElement(MainView, {}));
                return () => reactroot.unmount();
            });
        })
    }

    onEnd(): void {
        print("Plugin has unloaded.");
    }
}

// src/systems/main-system.ts
import { Button, Dependency, GUI, OnEnd, OnInit, System, View } from "@rbxts/comet";
import React from "@rbxts/react";
import { createRoot } from "@rbxts/react-roblox";

interface UIProps {}
interface UIState {}

class MainView extends React.Component<UIProps, UIState> {
    constructor(props: UIProps) {
        super(props);
    }

    public render(): React.Element {
        return(
            <screengui>
                <!-- ... -->
            </screengui>
        )
    }
}

@System()
export class MainSystem implements OnInit, OnEnd {
    private GUI = Dependency(GUI)
    public openButton: Button;
    public widget: View;

    constructor() {
        this.openButton = this.GUI.createButton("MyButton", "", "");
        this.widget = this.GUI.createWidget("MyWidget", Vector2.zero, Vector2.zero);
    }

    onInit(): void {
        this.openButton.onPress(() => {
            this.widget.mount((root) => {
                let reactroot = createRoot(root)
                reactroot.render(React.createElement(MainView, {}));
                return () => reactroot.unmount();
            });
        })
    }

    onEnd(): void {
        print("Plugin has unloaded.");
    }
}

I would appreciate any help, I am pretty new to this stuff

Solution:

you prob could use flamework directly for plugins (if you're familliar with flamework) i set it up here https://github.com/Velover/FlameworkPluginTemplate...

GitHub

GitHub - Velover/FlameworkPluginTemplate

Contribute to Velover/FlameworkPluginTemplate development by creating an account on GitHub.

Jump to solution

17 Replies

kv_OP•2w ago

Yes, with screengui empty the same error occurs Thanks 🙂

kv_OP•2w ago

Here is the API reference for comet if it's any help Comet API

View | Comet v2.0

Documentation for Comet v2.0

Solution

Tester•2w ago

you prob could use flamework directly for plugins (if you're familliar with flamework) i set it up here https://github.com/Velover/FlameworkPluginTemplate

GitHub

GitHub - Velover/FlameworkPluginTemplate

Contribute to Velover/FlameworkPluginTemplate development by creating an account on GitHub.

kv_OP•2w ago

I will check it out, I am more familiar with flamework and the comet docs absolutely suck

Tester•2w ago

TwT

kv_OP•2w ago

Well I got the boilerplate from your repo working, so already better than what I had before 😆

Tester•2w ago

yippee I made it so that it sets up the plugin stuff by default, but you can easily change that but i'm the feature separation pattern which might be confusing

kv_OP•2w ago

btw I know there is a builtin way to sync colors to studio colors, is that possible using react?

Tester•2w ago

idk? sorry, i never heard of it

kv_OP•2w ago

Ah nevermind I briefly read this documentation and thought there was a builtin from roblox for it I am gonna mark this as solved, thank you very much :)

Tester•2w ago

declare global {
    interface Settings {
        Studio: {
            Theme: {
                GetColor(studio_style_guide_color: Enum.StudioStyleGuideColor): Color3;
            };
        };
    }
    const settings: () => Settings;
}
settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.MainBackground);

declare global {
    interface Settings {
        Studio: {
            Theme: {
                GetColor(studio_style_guide_color: Enum.StudioStyleGuideColor): Color3;
            };
        };
    }
    const settings: () => Settings;
}
settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.MainBackground);

declare global you prob could put in some single .d.ts file

kv_OP•2w ago

ya, I was thinking something like that

Tester•2w ago

could be cool to make it a hook :3c cause they have ThemeChanged event

kv_OP•2w ago

Something fun I discovered, .Theme does not exist from @rbxts/types :p

kv_OP•2w ago

I had to add it;

kv_OP•2w ago

should this be an issue on that repo?

Tester•2w ago

Prob type wasn't added to rbxts yet or so Just keep in mind that if you change generated file it will not save if you clone the repo somewhere

Gaming

Programming

How to start with plugins + react?

Did you find this page helpful?