Sharing Imported State

We test by simple example the degree that bound state is available in multiple modules.

Elsewhere I am getting an error message from a helper in the main module that says count is not defined. This experiment shows that my expectation of shared state is well founded but does not then explain my error.

# Test

Here we invoke the main.html script. tab HEIGHT 0


# Outline


count('one') count('two') simple() count('three') complex(helper)

function helper() { count('helper') }


export function simple() { count('sub simple') }

export function complex(delegate) { count('sub complex') delegate() }


let counter = {count: 0, last: 'nowhere'}

export function count(where) { counter.count += 1 counter.last = where console.log(counter) }

# Output

{count: 1, last: 'one'} {count: 2, last: 'two'} {count: 3, last: 'simple'} {count: 4, last: 'three'} {count: 5, last: 'complex'} {count: 6, last: 'helper'}

# Diagram

We show files imported (solid) and functions called (dotted). Note that the state that count increments is allocated only once.

digraph { compound=true; rankdir=LR node [style=filled fillcolor=white] subgraph cluster_m { style=filled fillcolor=lightblue label="main.html" main helper } subgraph cluster_s { style=filled fillcolor=lightblue label="print.js" simple complex } subgraph cluster_c { style=filled fillcolor=lightblue label="stats.js" count } edge [penwidth=2] main -> count [ltail=cluster_m lhead=cluster_c] main -> simple [ltail=cluster_m lhead=cluster_s] simple -> count [ltail=cluster_s lhead=cluster_c] edge [penwidth=1 style=dashed] main -> count main -> simple -> count main -> complex -> count complex -> helper -> count }