45_merged_block_branch_ref.viz.md

Fixture 45: merged_block_branch_ref

Source

function App({ x, loading }) {
  const style = { width: x };
  const jsx = <div style={style} />;
  if (loading) {
    return <span style={style}>Loading</span>;
  }
  return jsx;
}

SWC — App (5 slots)

graph TD
    n0["x, loading"]
    n1{"x changed?<br/>$[0], $[1], $[2]"}
    n2["style = &#123; width: x &#125;<br/>jsx = &lt;div style=&#123;style&#125;/&gt;"]
    n0 --> n1
    n1 -->|miss| n2
    n3{"loading"}
    n1 -->|hit| n3
    n2 --> n3
    n4{"style changed?<br/>$[3], $[4]"}
    n5["t1 = &lt;span style=&#123;style&#125;&gt;Loading&lt;/span&gt;"]
    n3 -->|true| n4
    n4 -->|miss| n5
    n6(["return t1"])
    n4 -->|hit| n6
    n5 --> n6
    n7(["return jsx"])
    n3 -->|false| n7

Loading

Babel — App (6 slots)

graph TD
    n0["x, loading"]
    n1{"x changed?<br/>$[0], $[1]"}
    n2["t1 = &#123; width: x &#125;"]
    n0 --> n1
    n1 -->|miss| n2
    n3["const style = t1"]
    n1 -->|hit| n3
    n2 --> n3
    n4{"style changed?<br/>$[2], $[3]"}
    n5["t2 = &lt;div style=&#123;style&#125; /&gt;"]
    n3 --> n4
    n4 -->|miss| n5
    n6["const jsx = t2"]
    n4 -->|hit| n6
    n5 --> n6
    n7{"loading"}
    n6 --> n7
    n8{"style changed?<br/>$[4], $[5]"}
    n9["t3 = &lt;span style=&#123;style&#125;&gt;Loading&lt;/span&gt;"]
    n7 -->|true| n8
    n8 -->|miss| n9
    n10(["return t3"])
    n8 -->|hit| n10
    n9 --> n10
    n11(["return jsx"])
    n7 -->|false| n11

Loading