nicolo-ribaudo/test-esm-cycles

Suppose that you have the modules in before/. Since a.js re-exports from b.js and d.js, you decide to refactor c.js applying the following diff:

4,5c4
< import { b } from "./b.js";
< import { d } from "./d.js";
---
> import { b, d } from "./a.js";

This looks safe, however it changes the dependencies graph shape by introducing a new cycle: the execution order of your modules changes, causing a new TDZ error.

Before		After
Dependency graph	Execution order	Dependency graph	Execution order
graph TD entrypoint-->a a-->b a-->c a-->d c-->b c-->d Loading	b, d, c, a	graph TD entrypoint-->a a-->b a-->c a-->d c-->a Loading	b, c, d, a

This is because when executing the graph ECMAScript ignores any edge that would cause a cycle, and thus it executes After as if it had this graph:

graph TD
    entrypoint-->a
    a-->b
    a-->c
    a-->d

Loading

ECMAScript can solve this problem by considering strongly connected components (SCCs), and executing all the dependencies of the modules in the SCC that are not themself in the SCC first. The new execution graph would look like this:

flowchart TD
  subgraph AC [ ]
      direction LR
      a-->c
  end
  entrypoint-->AC
  AC-->b
  AC-->d

Loading

And the execution order would be b, d, c, a again.

This changes ensures that all the transitive dependencies of every module are executed before it, unless such dependencies cyclically depend on that module.

---

Dependency graph	Transitive closure
graph TD entrypoint-->a a-->b a-->c a-->d c-->a Loading	graph TD entrypoint-->a a-->b a-->c c-->a c-.->b c-.->d a-->d Loading
Links currently broken during execution	Links broken during execution with this proposal
graph TD entrypoint-->a a-->b a-->c c-- x -->a c-.->b c-. x .->d a-->d Loading	graph TD entrypoint-->a a-->b a-->c c-- x -->a c-.->b c-.->d a-->d Loading