refactor(render/dot): replaces module global with a parameter

docs/index.html

@@ -35,7 +35,7 @@
   <meta property="og:image:type" content="image/png" />
   <link rel="canonical" href="https://state-machine-cat.js.org">
   <script nonce="known-inline-script">let LOG = false;</script>
-  <script src="smcat-online-interpreter.min.js" type="module" defer integrity="sha512-JFcPEOL9zVRvLlspORt02ETHoKUWv8R2XhdmBO7VI0c6my3zL0u0xgeZUcaYPQWDMLvoj1SFuFJ+vU+4GupJQA=="></script>
+  <script src="smcat-online-interpreter.min.js" type="module" defer integrity="sha512-etmvkaSIz9SFW5+1Bzzn6ieLBYn8JmftNXi2SQJYmJHAr7/jyzkzeZgLI/7MJnqaZoHuO4mYnNrhLrnjn05RhA=="></script>
   <script defer src="https://code.getmdl.io/1.3.0/material.min.js" async></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="purple">

docs/inpage.html

@@ -23,7 +23,7 @@
       src="state-machine-cat-inpage.min.js"
       type="module"
       defer
-      integrity="sha512-52vZVh/elfXk881aqqod5J6ZLaHea1tt7k0RFATXooP+1NCeIRS0NN0GE8rfDIrMAQWUH0FVxCUKwqaSfGVb2Q=="
+      integrity="sha512-Q3WVgrYhrnoimmIvsjeTizYqt56f7VRe2kDpZWErZMa3u3KK7n7nmIEEOlwSH9zEOgRU5spqT8M8+IRFXeuyIg=="
     ></script>
     <style>
       body { font-family: sans-serif; margin: 0 auto; max-width: 799px;

src/render/dot/index.mts

@@ -1,3 +1,4 @@
+/* eslint-disable max-params */
 /* eslint-disable max-lines */
 /* eslint-disable no-use-before-define */
 /* eslint-disable complexity */
@@ -29,8 +30,6 @@ import {
   stateNote,
 } from "./utl.mjs";
 
-let gRenderedTransitions: Set<number> = new Set();
-
 function initial(pState: IStateNormalized, pIndent: string): string {
   const lActiveAttribute = pState.active ? " penwidth=3.0" : "";
 
@@ -94,6 +93,7 @@ function compositeRegular(
   pIndent: string,
   pOptions: IRenderOptions,
   pModel: StateMachineModel,
+  pRenderedTransitions: Set<number>,
 ): string {
   // eslint-disable-next-line no-nested-ternary
   const lPenWidth = pState.isParallelArea
@@ -121,7 +121,7 @@ ${pIndent}    class="${pState.class}" label= <
 ${lLabelTag}
 ${pIndent}    > style=${lStyle} penwidth=${lPenWidth}${pState.colorAttribute}${pState.fontColorAttribute}
 ${pIndent}    "${pState.name}" [shape=point style=invis margin=0 width=0 height=0 fixedsize=true]
-${states(pState?.statemachine?.states ?? [], `${pIndent}    `, pOptions, pModel)}
+${states(pState?.statemachine?.states ?? [], `${pIndent}    `, pOptions, pModel, pRenderedTransitions)}
 ${pIndent}  }${pState.noteText}`;
 }
 
@@ -130,9 +130,16 @@ function regular(
   pIndent: string,
   pOptions: IRenderOptions,
   pModel: StateMachineModel,
+  pRenderedTransitions: Set<number>,
 ): string {
   if (pState.statemachine) {
-    return compositeRegular(pState, pIndent, pOptions, pModel);
+    return compositeRegular(
+      pState,
+      pIndent,
+      pOptions,
+      pModel,
+      pRenderedTransitions,
+    );
   }
   return atomicRegular(pState, pIndent);
 }
@@ -240,14 +247,15 @@ function state(
   pIndent: string,
   pOptions: IRenderOptions,
   pModel: StateMachineModel,
+  pRenderedTransitions: Set<number>,
 ): string {
   const lState = normalizeState(pState, pOptions, pIndent);
   const lCandidateTransitions = pModel.findTransitionsToSiblings(
     pState.name,
-    gRenderedTransitions,
+    pRenderedTransitions,
   );
   lCandidateTransitions.forEach((pTransition) => {
-    gRenderedTransitions.add(pTransition.id);
+    pRenderedTransitions.add(pTransition.id);
   });
   const lTransitions = transitions(
     lCandidateTransitions,
@@ -263,6 +271,7 @@ function state(
       pIndent,
       pOptions,
       pModel,
+      pRenderedTransitions,
     ) +
     lTransitions +
     "\n"
@@ -274,9 +283,12 @@ function states(
   pIndent: string,
   pOptions: IRenderOptions,
   pModel: StateMachineModel,
+  pRenderedTransitions: Set<number>,
 ): string {
   return pStates
-    .map((pState) => state(pState, pIndent, pOptions, pModel))
+    .map((pState) =>
+      state(pState, pIndent, pOptions, pModel, pRenderedTransitions),
+    )
     .join("");
 }
 
@@ -381,8 +393,14 @@ export default function renderDot(
   const lNodeAttributes = buildNodeAttributes(pOptions.dotNodeAttrs || []);
   const lEdgeAttributes = buildEdgeAttributes(pOptions.dotEdgeAttrs || []);
   const lModel = new StateMachineModel(pStateMachine);
-  gRenderedTransitions = new Set();
-  const lStates = states(pStateMachine.states, pIndent, pOptions, lModel);
+  const lRenderedTransitions: Set<number> = new Set();
+  const lStates = states(
+    pStateMachine.states,
+    pIndent,
+    pOptions,
+    lModel,
+    lRenderedTransitions,
+  );
   // ideally, we render transitions together with the states. However, in graphviz
   // that only renders as we want to if we if the transition is _within_ the state.
   // In this guy 'a' is rendered within cluster_b, though
@@ -412,14 +430,13 @@ export default function renderDot(
   // 2. Render all other transitions separately (below)
   const lRemainingTransitions = transitions(
     lModel.flattenedTransitions.filter(
-      (pTransition) => !gRenderedTransitions.has(pTransition.id),
+      (pTransition) => !lRenderedTransitions.has(pTransition.id),
     ),
     pIndent,
     pOptions,
     lModel,
   );
 
-  gRenderedTransitions = new Set();
   return `digraph "state transitions" {
   ${lGraphAttributes}
   node [${lNodeAttributes}]