forgo.unmount() not called after removing element

The unmount() function does not call when unmounting a component. Sandbox

import * as forgo from "forgo";

const App = () => {
  const component = new forgo.Component({
    render() {
      return <p>Tooltip</p>;
    }
  });

  component.unmount(() => alert("unmounted!"));

  return component;
};

forgo.mount(<App />, document.getElementById("root"));

// forgo.mount(null, document.getElementById("root"));
document.body.removeChild(document.getElementById("root"));

I’m not entirely sure if either method correctly unmount a Forgo component.

[chronoDave]

Thank you for the quick response, I managed to adapt your example into a small helper. It works great 😄

export default (anchor: HTMLElement, element: forgo.ForgoComponent<any>) => {
  let unmounted = false;
  let unmount: () => void;

  const portal = () => {
    const component = new forgo.Component({
      render() {
        if (unmounted) return null;
        return element;
      }
    });

    unmount = () => {
      unmounted = true;
      component.update();
    };

    return component;
  };

  anchor.appendChild(forgo.render(forgo.createElement(portal, {})).node);
  return () => unmount();
};

[spiffytech]

Right now it’s presumed that unmounts happen when a Forgo render detects that a previously-displayed component stops being displayed. That works fine inside the Forgo app, but isn’t helpful if something outside Forgo needs to trigger an unmount of the whole app.

Forgo doesn’t have a solution in place for that yet because you’re the first person we’ve heard from who has integrated Forgo with other apps (vs greenfield work done entirely in Forgo).

For the moment, a hacky workaround would look like this:

import { rerenderElement } from "forgo-powertoys";

const App = () => {
  const component = new forgo.Component({
    render() {
      return <p>Tooltip</p>;
    }
  });

  component.unmount(() => alert("unmounted!"));

  return component;
};

const AppWrapper<{showTheApp: boolean}> = () => {
  return new forgo.Component<{showTheApp: boolean}>({
    render({showTheApp}) {
      if (!showTheApp) return null;
      return <App />;
    }
  });
};

forgo.mount(<AppWrapper showTheApp={true} />, document.getElementById("root"));

rerenderElement(document.getElementById("root"), {showTheApp: false);
document.body.removeChild(document.getElementById("root"));

Basically you put all the app logic that needs to care about the unmount lifecycle inside a component that you can rerender to unmount all of its decendants.

That’s really ugly, but it’ll at least get you moving today.

---

I’m looking into how practical it would be to expose a forgo.unmount(el) function for external logic to call, that would do all the teardown and remove the descendants of el. If that’s straightforward, I can get that implemented and published promptly.

Longer term, we’ll need to integrate with MutationObserver to allow arbitrary DOM operations on anything Forgo renders. But that’ll be a lot more complicated to implement safely, so I don’t expect to push that out soon.