Is there an unmount API and lifecycle method?

[zidell]

Hi, this is a very cool project!

I was wondering if there is a unmount API that corresponds to van.add(...).
Also, are there any lifecycle methods like created, mounted, willunmount, and so on?

Any answers would be appreciated.

[Tao-VanJS]

Hi @zidell,

Thanks for reaching out!

In VanJS, lifecycle event hooks can be easily implemented with the help of a lifecycle state and van.derive. For example:

const stage = van.state("init")

van.add(document.body, () => {
  if (stage.val === "init") return div()
  if (stage.val === "mounted") return div(
    <component content>
  )
  if (stage.val === "unmounted") return null
})

van.derive(() => {
  if (stage.val === "mounted") {
    <willmount hook>
  } else if (stage.val === "unmounted") {
    <willunmount hook>
  }
})

The code can be slightly adjusted if you want hooks in more lifecycle stages.

As a minimalist framework, VanJS won't include features that can be easily achieved with the combination of other features.

Hope it helps :-)

[Tao-VanJS]

Hi @zidell,

Thanks for explaining your use case!

In function-based binding of VanJS, if the function returns null or undefined, it means the bound DOM node will be removed permanently. You can refer to https://vanjs.org/tutorial#removing-a-dom-node for the details. Again, you can use van.derive to register event handlers.

Let me know if it helps:-)

[zidell]

I applied the code you gave me and did the following.

// I arbitrarily extended the function for mounting.
van._mount = function (target, component) {
	if (!!target) {
		van._mount.__ = van.state(true);
		van.add(target, () => {
			if (!van._mount.__.val) {
				return null;
			}
			return component();
		});
	} else {
		van._mount.__.val = false;
	}
};

// Make a component with a function that depends on the lifecycle state as follows.
var ExampleComponent = () => {
	van.derive(() => {
		if (van._mount.__.val) {
			console.log('mounted');
		} else {
			console.log('will unmount');
		}
	});
	return van.tags.div('this is an UserComponent');
};

// Mount via extended function
van._mount(document.querySelector('#app'), ExampleComponent);

// When we need to control this component externally, we call it like this
// van._mount(null);

This works fine for my intentions.
https://codepen.io/zidell/pen/YzRmZZy

Thank you very much.

[Tao-VanJS]

You're welcome 😀

I'm glad that the code can work for you.

UPDATE: with VanJS 1.1.0, we don't have the restriction described below any more.

There is one more thing: it would be better to move the van.derive call out of ExampleComponent. Essentially, ExampleComponent is a binding function for DOM nodes. And if inside the binding function, the derivation function specified in van.derive refers to a state defined outside the binding function, this might lead to memory leaks if the binding function ExampleComponent is called many times.

You can refer to this section: https://vanjs.org/advanced#derived-states-and-side-effects-are-not-subject-to-gc as a detailed explanation.

[Tao-VanJS]

I'm considering to remove this restriction in an upcoming release.

[Tao-VanJS]

With VanJS 1.1.0 release, we don't have this restriction anymore.