vincentvegan
vincentvegan
PostsComments
PD🧩 Plasmo Developers
Created by vincentvegan on 9/17/2023 in #🔰newbie
How to Observe and Render a list of root containers
What Im missing here?
3 replies
PD🧩 Plasmo Developers
Created by vincentvegan on 9/17/2023 in #🔰newbie
How to Observe and Render a list of root containers
I came up with this code, that works fine 
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
    document.querySelectorAll(`.comments-comment-texteditor .comments-comment-box__button-group`)

export const render: PlasmoRender = async (
    {
      anchor,
      createRootContainer
    },
  ) => {
    const rootContainer = await createRootContainer(anchor)
    const root = createRoot(rootContainer)
    root.render(
        <Anchor/>
    )
  }
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
    document.querySelectorAll(`.comments-comment-texteditor .comments-comment-box__button-group`)

export const render: PlasmoRender = async (
    {
      anchor,
      createRootContainer
    },
  ) => {
    const rootContainer = await createRootContainer(anchor)
    const root = createRoot(rootContainer)
    root.render(
        <Anchor/>
    )
  }
But I dont want to use shadow DOM, so I tried to implement getRootContainer(), but no matter what I do, render() function is being called in a loop.
Also Im gettins this console warning [Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. 
export const render: PlasmoRender = async (
    {
      anchor,
      createRootContainer // This creates the default root container
    }: (PlasmoCSUIProps & { createRootContainer?: (p?: PlasmoCSUIAnchor) => Async<Element> })) => {

    debugger;
    let rootContainer = anchor.element.parentElement.querySelector(`[rendered]`);
    if (!rootContainer) {
        rootContainer = document.createElement("div");
        rootContainer.setAttribute('rendered', 'true');
        anchor.element.parentElement.prepend(rootContainer);
        const root = createRoot(rootContainer) // Any root
        root.render(
            <AnchorOverlay anchor={anchor} />
        )
    }
  }
export const render: PlasmoRender = async (
    {
      anchor,
      createRootContainer // This creates the default root container
    }: (PlasmoCSUIProps & { createRootContainer?: (p?: PlasmoCSUIAnchor) => Async<Element> })) => {

    debugger;
    let rootContainer = anchor.element.parentElement.querySelector(`[rendered]`);
    if (!rootContainer) {
        rootContainer = document.createElement("div");
        rootContainer.setAttribute('rendered', 'true');
        anchor.element.parentElement.prepend(rootContainer);
        const root = createRoot(rootContainer) // Any root
        root.render(
            <AnchorOverlay anchor={anchor} />
        )
    }
  }
3 replies