@cycle/proxy idea for circular dependecy

After discussion with @TylorS what about such api for proxying curcular deps?

import proxy from '@cycle/proxy'
//...
function MyComponent () {
  const {imitate, stream} = proxy()
  const componentFoo = ComponentFoo({stream, DOM})
  const componentBar = ComponentBar({HTTP, componentFoo.props$})
  imitate(componentBar.value$)

as alternative to https://github.com/cyclejs/core/issues/170

[axefrog]

Honestly, I’m not a fan of the idea because it’s turning Babel into a DSL generator rather than a tool for getting early access to general language features. By using a plugin, you make Babel into a hard dependency for a Cycle app.

[axefrog]

The plugin would be entirely optional, opt-in.

Of course, and people can do what they like with their own apps, but my point is with respect to core functionality being only available via a Babel plugin. People may want to solve the problem without being cornered into the land of Babel plugins. If there’s a generic, non-plugin solution though, then there’s no issue.

Here’s an (as-yet-untested) implementation of the hypothetical helper in my example above. Note that makeStreamProxy would need an RxJS implementation. Mine is based on the Most.js version by @TylorS.

// # component-helpers.js

import {makeStreamProxy} from 'somewhere';

function makeComponentProxy(fn, sinkKeys) {
  const [sinks, hooks] =
    sinkKeys.reduce((acc, key) =>
      ([acc[0][key], acc[1][key]] = makeStreamProxy(), acc),
      [{}, {}]);
  const connect = sources => {
    const innerSinks = fn(sources);
    for(let key of sinkKeys) {
      const [sink, hook] = [innerSinks[key], hooks[key]];
      if(sink && hook) hook(sink);
    }
  };
  return [connect, sinks];
}

export function makeSinks(makeSources, signatures) {
  const proxies = Object.keys(signatures)
    .map(key => [key, ...makeComponentProxy(signatures[key])]);
  const allSinks = proxies
    .reduce((acc, [key, _, sinks]) => (acc[key] = sinks, acc), {});
  const sources = makeSources(allSinks);
  proxies.forEach(([key, connect]) => connect(sources[key]));
  return allSinks;
}