Upgrade to the latest engine

components/inspector.tsx

@@ -4,7 +4,7 @@ import { Component } from 'react';
 import { Engine } from './engine';
 import { Glyph, GlyphStream } from './glyph-stream';
 import { Match, MatchStream } from './match-stream';
-import { StateTree } from './state-tree';
+import { StateGraph } from './state-graph';
 import { Welcome } from './welcome';
 
 const padAll = (padding) => ({
@@ -75,7 +75,7 @@ export class Inspector extends Component<InspectorProps> {
               </Box>
             )}
           </>
-          <StateTree engine={engine} style={{ position: 'absolute', inset: 0 }} />
+          <StateGraph engine={engine} style={{ position: 'absolute', inset: 0 }} />
         </Main>
       </Box>
     );

components/state-tree.tsx → components/state-graph.tsx

@@ -1,8 +1,29 @@
+import { when } from 'iter-tools-es';
 import { useRef, useEffect } from 'react';
 import * as d3 from 'd3';
-import { when } from 'iter-tools-es';
-// @ts-ignore-error
-import { debugPrint } from '@iter-tools/regex/internal/debug';
+
+function* alternatives(match) {
+  let alternative = match.head.worse;
+
+  while (alternative) {
+    yield alternative.data;
+    alternative = alternative.worse;
+  }
+}
+
+// export const StateList = ({ engine, style }) => {
+//   if (!engine) return null;
+
+//   engine.root, engine.index, engine.width;
+
+//   const nodes = [
+//     ...map((alternative) => {
+//       return <li>Hello: {debugPrint(alternative.next)}</li>;
+//     }, alternatives(engine.root)),
+//   ];
+
+//   return <ol style={style}>{nodes}</ol>;
+// };
 
 const computeViewbox = (svg) => {
   const parentBox = svg.node().parentElement.getBoundingClientRect();
@@ -87,6 +108,7 @@ function Tree(
   Gs
     .selectAll('text')
     .data(d => {
+      debugger;
       const type = Object.getPrototypeOf(d.data).constructor.name;
       const isUnmatchedSequence = d.data.next?.name === 'unmatched';
       return [
@@ -117,7 +139,7 @@ function Tree(
   return svg.node();
 }
 
-export const StateTree = ({ engine, style }) => {
+export const StateGraph = ({ engine, style }) => {
   if (!engine) return null;
 
   const ref = useRef(null);
@@ -127,7 +149,11 @@ export const StateTree = ({ engine, style }) => {
       computeViewbox(d3.select(ref.current));
     };
     window.addEventListener('resize', onResize);
-    Tree(d3.select(ref.current), engine.root);
+    Tree(d3.select(ref.current), engine.root, {
+      children(node) {
+        return node.head ? alternatives(node) : [];
+      },
+    });
     return () => {
       window.removeEventListener('resize', onResize);
     };

package.json

@@ -9,14 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@iter-tools/regex": "iter-tools/regex#9bab6c40e70141252bac88aae8ecf1debb51c37a",
+    "@iter-tools/regex": "iter-tools/regex#a35a0259bf288ccece2a1f6ffebcfdb7ac953517",
     "d3": "^7.4.2",
     "grommet": "^2.17.2",
     "grommet-icons": "^4.5.0",
     "iter-tools-es": "^7.3.1",
-    "next": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next": "13.1.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-is": "17.0.2",
     "styled-components": "^5.3.0"
   },