Kiran Posts - Answer Overflow

Kiran

Explore posts from servers

•Created by Kiran on 5/6/2024 in #🔰newbie

Re-rendering with a custom render function

I'm using a custom render and getRootContainer function in order to mount a custom element directly onto a specific pre-existing div without the use of shadow root (in order to adopt the existing page styles) and to avoid using any typical Plasmo parent elements. However, unlike the default exported component which automatically re-renders when the root is removed and added back in, this custom render does not adopt the functionality. When my custom root container that I've declared is removed from the page and added back in, my custom BetterInput component does not re-render. What is the best way to solve this problem? The following is my code:

export const getRootContainer = () =>
    new Promise((resolve) => {
        const checkInterval = setInterval(() => {
            const rootContainerParent = document.querySelector("._2-F7v")
            if (rootContainerParent) {
                clearInterval(checkInterval)
                resolve(rootContainerParent)
            }
        }, 10)
    });

// Use this to optimize unmount lookups
export const getShadowHostId = () => "better-input";

// Override render to directly place custom component without parent
export const render: PlasmoRender = async ({
                                               // anchor, // the observed anchor, OR document.body.
                                               createRootContainer // This creates the default root container
                                           }) => {
    const rootContainer = await createRootContainer()

    const root = createRoot(rootContainer) // Any root
    root.render(
        <BetterInput/>
    )
}

const BetterInput = () => {
    return (
        <input
            className="better-input"
            placeholder="Type here..."
        >
        </input>
    )
};

export const getRootContainer = () =>
    new Promise((resolve) => {
        const checkInterval = setInterval(() => {
            const rootContainerParent = document.querySelector("._2-F7v")
            if (rootContainerParent) {
                clearInterval(checkInterval)
                resolve(rootContainerParent)
            }
        }, 10)
    });

// Use this to optimize unmount lookups
export const getShadowHostId = () => "better-input";

// Override render to directly place custom component without parent
export const render: PlasmoRender = async ({
                                               // anchor, // the observed anchor, OR document.body.
                                               createRootContainer // This creates the default root container
                                           }) => {
    const rootContainer = await createRootContainer()

    const root = createRoot(rootContainer) // Any root
    root.render(
        <BetterInput/>
    )
}

const BetterInput = () => {
    return (
        <input
            className="better-input"
            placeholder="Type here..."
        >
        </input>
    )
};

11 replies

MModular

•Created by Kiran on 10/17/2023 in #questions

Build options - supported platforms

Hi! I know the SDK only supports linux right now, but does that also mean that you can only build for linux, and not for Windows/macOS yet?

3 replies

Gaming

Programming