forwardRef operator or it's analog proposal

Because of architecture of an Effector where all units and operations are written in top level of ES modules, and they start initialization in a moment when ES modules are imported you may often fall into trouble with circular dependencies and therefore broken build with “ReferenceError: Cannot access “$myStore” before initializaion” or even worst cases which sometimes very hard to debug and fix.

Proposal

The proposal is introducing a forwardRef concept:

sample({
 source: forwardRef(() => $myStore), // or simply define fn instead of references to other stores
 target: '...'
})

The forward ref fn is called somewhere on later phase when all ES modules tree is already initialized (batch and flush on next micro task, or synchronously execute when very first event is dispatched).

I saw many suggestions and solutions how to structure the code to avoid this kind of error, many of them far from ideal and require an additional boilerplate. Sometimes even when everything structured in a right way you still have circular deps problem because of complicated structure of components and stores, wich really hard to follow and find where exactly problem come.

[zerobias]

Okay, then now we need to do a smoke test: is it enough to move to defer only links with target?

Let’s assume naive defer implementation (it will not be async in prod btw):

export function defer(fn) {
  return Promise.resolve().then(fn)
}

Please try to use it in your projects. Is it useful, did you avoided circular loops? Have you been able to use it in all the places where you would like to? Note that methods that create new units will have to be rewritten to an explicit unit creation and method with target

[zerobias]

What about is.store which should return immediately?

If you want to create new unit you will not be able to use neither promises nor domain.defer anyway

So your code will looks like that

import {delay} from 'patronum'
import {domain} from './root'
import {triggerA, triggerB, requestFx} from './plain'
import {$fxDelay, delayedTriggerB} from './cyclic'

// this unit have everything to be created at the root
export const delayedTriggerA = delay({
  source: triggerA,
  timeout: 50
})

// this unit need cyclic $fxDelay
export const delayedRequest = createEvent()

domain.defer(() => {

  // link for unit in that module
  delay({
    source: delayedRequest,
    timeout: $fxDelay,
    target: requestFx,
  })

  // link for unit in other module
  delay({
    source: delayedTriggerB,
    timeout: 50,
    target: triggerB,
  })

})