Selective isolation for pass-through components

Imagine three components, A, B and C. Component A is the root-level “app” component. B is a delegator of sorts; it exists as a child component doing work involving http requests and some other things that require isolation, but does not generate a vtree; it just passes through a vtree from its own child, component C. Because of the way isolation works, event selectors inside C stop working because they’re expecting namespaced elements to exist due to isolation in B. But seeing as B never generated a vtree, and so the scope for B does not exist in the final vtree, the DOM selector fails to match on any specified events because it’s including the namespace from B in the selector.

I need a way to selectively isolate a component; i.e. in my case I want it to perform isolation on everything except the DOM source/sink. For the moment I’m considering just copying the isolate source code into my project and modifying it, but this is an edge case that may crop up with isolation for other users as well. I would be happy to submit a pull request if we agreed on what an options argument might look like.

I’d propose an overload of sorts. Currently you have this:

const component = isolate(MyComponent, scope);

… where scope is an optional string. If passing the scope argument as a string could be considered shorthand for { scope }, then it would allow for additional options. We could then have this:

const component = isolate(MyComponent, {
    include: ['http']
});

or:

const component = isolate(MyComponent, {
    exclude: ['DOM', 'router']
});

The ideal approach would be automatically avoiding scoping the selector if we’re only passing a child vtree through to the parent, but because selection has to be done in advance before it’s clear that a vtree is in fact not being generated by component B, I’m not seeing a way that could be done automatically, hence specifying a source/sink whitelist or blacklist as an argument when calling the isolate function.

[wclr]

I’m not sure if this API really needed, if the need is cased only by this problem https://github.com/cyclejs/core/issues/290

And you can do it not without some boilderplate but if this need is rare it is not so much code:

Say you want to exlude DOM and have sources input:

const isolatedChild = 
  isolate(scoped => Child({...scoped, DOM: sources.DOM}))
      ({...sources, DOM: {}})

or if you use destructed sources it looks more simple:

const isolatedChild = 
  isolate(scoped => Child({...scoped, DOM}))({HTTP, storage})

If you want to just include one HTTP in isolation:

const isolatedChild = 
  isolate(({HTTP}) => Child({...sources, HTTP}))({HTTP: sources.HTTP})

Or with destructed:

const isolatedChild = 
  isolate(({HTTP}) => Child({DOM, storage, HTTP}))({HTTP})

And intutivly I feel that “partly isolated” component may be a bad pattern in general.

[TylorS]

If using objects directly can work then 👍

Regardless of whatever way it ends up being implemented I think its a good addition.