Isolate Component Instances in Cycle.js

[00:01] We used the class name wait in a pre-processing and in a post-processing step here when calling the labeled slider in order to keep these two instances independent to each other. Now, it would be better if we could hide these steps away, because they become a little bit too much code to write, and they're a bit repetitive.

[00:21] In fact, CycleDOM already comes with these pre and post-processing steps defined for us. They are actually under here, sources.dom. You're going to find isolateSource is a function and isolateSink.

[00:37] We can call isolateSource, and it takes the source as argument, plus a scope. The scope is just a string. Then we can also call isolateSink, passing a sink and a scope, which is the string "wait." Now, basically those two steps pre and post-processing were called here under the definition of this function, isolateSink and source.

[01:08] We can also do that for height. Here, we have isolate the source with that string, and we can do that for sink as well. Height sinks will be isolated under .height. Now, this should work like before.

[01:28] That's good, but we can also have other effects, like let's say HTTP. If each of these sliders would send out an HTTP request, you don't want the data for the response to get mixed up between these two. We would also have isolateSource and sink also under sources.http in case we would have that driver installed in our app.

[01:50] As you can see, there may be many drivers that need pre and post-processing steps, and they may be under this isolateSource and sink. Then you're going to have a lot of pre-processing steps, a lot of post-processing steps.

[02:02] There's actually a helper function in Cycle.js called isolate, which does just that for us, so we don't need to have a bunch of boilerplate. We can install the @cycle/isolate as a script here. You can find it under cycle-isolate in NPM. Then that gives us the function.

[02:21] We can find it under the global objects, @cycle/isolate, and default. That's going to give us the function, isolate. Now, isolate is pretty simple to use. We're going to call isolate, and we're going to pass it the labeled slider. We're going to give the scope. Here, it's going to be wait, for instance.

[02:44] This is going to return to us another component. We're going to call this the wait slider. Now, components, as we know, are just functions that take sources and return sinks. Instead of using the labeled slider here with all of those sources pre-processed, we're just going to call the wait slider.

[03:06] The wait slider knows how to apply these pre-processing steps. Just before returning, it knows also how to apply the post-processing steps. We actually don't need to apply those pre and post steps, because isolate does that for us. It detects if there exists isolateSource and isolateSink for each driver. It calls those.

[03:32] We can do now something similar for height. We're going to call isolate the labeled slider with the scope height. That gives us the height slider. We use the height slider. We don't need to call the pre and post steps anymore, and this is already not necessary.

[03:54] Then we can use those. We can say wait sinks DOM and height sinks DOM, and those should work like before. It's already isolated for us.

[04:09] This means that each driver knows how to perform isolation, and isolate will just create a new component for us which has those pre and post processing steps already defined for us. In the end, it helps us create boundaries where components are isolated.