Comments (6)
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.
from forgo.
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();
};
from forgo.
Ah, you're bypassing Forgo's teardown logic by nuking the element with the DOM APIs. Forgo doesn't handle that right now. Supporting it has been on our long-term roadmap.
Let me think on what it would take to implement that.
from forgo.
What would be the correct way to unmount a component?
from forgo.
I've got a PR up that adds a forgo.unmount()
function.
I'll want to update the docs separately - I need to figure out what the right way to unmount on page exit is, and at a quick glance all I see are browser events labeled "deprecated" and "don't do this". I'll have to check what other frameworks do / recommend.
from forgo.
This has been merged and will be released in v3.2.1.
from forgo.
Related Issues (20)
- Migrate tests to componentRunner HOT 4
- Determine strategy for making Forgo extensible without expanding framework core HOT 7
- Require a pull request before merging? HOT 2
- Attribute Transformers
- Contexts
- Runtime-modifiable lifecycle events HOT 61
- Checklist for The Big Update
- Ref value is not accurate in nested mount HOT 5
- Prop types are not inferred if component is returned indirectly. HOT 2
- Infinite recursion when calling component.update() within component.mount() HOT 2
- forgo.mount() typing not matching with behaviour HOT 3
- ./dist/index.js does not exist HOT 2
- Forgo & TypeScript 4.8 compatibility HOT 1
- Delete unused branches and auto-delete for merged branches HOT 1
- Fragment usage HOT 3
- Missing events in DOMAttributes HOT 1
- handlerDisabledOnNodeDelete does not evaluate if forgo.deleted is undefined HOT 1
- HTMLAttributes specificity HOT 1
- Rendering Web Components HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from forgo.