Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
Board.svelte
Square.svelte
stores.js
<script>
import Board from './Board.svelte';
import { store, calculateWinner } from './stores.js';
let status;
let winner;
store.subscribe(store => {
winner = calculateWinner(store.history[store.history.length - 1].board);
if (winner) {
status = `Winner: ${winner}`;
} else {
status = `Next player: ${store.xIsNext ? 'X' : 'O'}`;
}
});

</script>

<style>
.game {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
ol {
padding-left: 30px;
}
</style>

<div class='game'>
<div class='game-board'>
<Board/>
</div>
<div class='game-info'>
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import Board from './Board.svelte';
import { store, calculateWinner } from './stores.js';

var root_2 = $.template(`<button></button>`);
var root_3 = $.template(`<button>Go to game start</button>`);
var root_1 = $.template(`<li><!></li>`);
var root = $.template(`<div class="game svelte-1dshf67"><div class="game-board"><!></div> <div class="game-info svelte-1dshf67"><div> </div></div> <ol class="svelte-1dshf67"></ol></div>`);

export default function App($$anchor, $$props) {
$.push($$props, false);

const [$$stores, $$cleanup] = $.setup_stores();
const $store = () => $.store_get(store, '$store', $$stores);
let status = $.mutable_state();
let winner;

store.subscribe((store) => {
winner = calculateWinner(store.history[store.history.length - 1].board);

if (winner) {
$.set(status, `Winner: ${winner}`);
} else {
$.set(status, `Next player: ${store.xIsNext ? 'X' : 'O'}`);
}
});

$.init();

var div = root();
var div_1 = $.child(div);
var node = $.child(div_1);

Board(node, {});
result = svelte.compile(source, {
generate: ,
});

.game.svelte-1dshf67 {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
display: flex;
flex-direction: row;
}
.game-info.svelte-1dshf67 {
margin-left: 20px;
}
ol.svelte-1dshf67 {
padding-left: 30px;
}

		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 368
      • end: 572
      • attributes: []
      • children: [...] (3)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 377
            • end: 382
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 377
                • end: 382
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "game"
                        • start: 377
                        • end: 382
                        }
                      ]
                    • start: 377
                    • end: 382
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 383
            • end: 494
            • children: [...] (4)
              • Declaration {...}
                • type: "Declaration"
                • start: 387
                • end: 434
                • property: "font"
                • value: "14px \"Century Gothic\", Futura, sans-serif"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 438
                • end: 450
                • property: "margin"
                • value: "20px"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 454
                • end: 467
                • property: "display"
                • value: "flex"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 471
                • end: 490
                • property: "flex-direction"
                • value: "row"
                }
              ]
            }
          • start: 377
          • end: 494
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 496
            • end: 506
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 496
                • end: 506
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "game-info"
                        • start: 496
                        • end: 506
                        }
                      ]
                    • start: 496
                    • end: 506
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 507
            • end: 532
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 511
                • end: 528
                • property: "margin-left"
                • value: "20px"
                }
              ]
            }
          • start: 496
          • end: 532
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 534
            • end: 536
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 534
                • end: 536
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "ol"
                        • start: 534
                        • end: 536
                        }
                      ]
                    • start: 534
                    • end: 536
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 537
            • end: 563
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 541
                • end: 559
                • property: "padding-left"
                • value: "30px"
                }
              ]
            }
          • start: 534
          • end: 563
          }
        ]
      • content: {...}
        • start: 375
        • end: 564
        • styles: "\n\t.game {\n\t\tfont: 14px \"Century Gothic\", Futura, sans-serif;\n\t\tmargin: 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\t.game-info {\n\t\tmargin-left: 20px;\n\t}\n\tol {\n\t\tpadding-left: 30px;\n\t}\n"
        • comment: null
        }
      }
    • js: []
    • start: 368
    • end: 929
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (3)
        • Text {...}
          • type: "Text"
          • start: 366
          • end: 368
          • raw: "\n\n"
          • data: "\n\n"
          }
        • Text {...}
          • type: "Text"
          • start: 572
          • end: 574
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 574
          • end: 929
          • name: "div"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 579
              • end: 591
              • name: "class"
              • value: [...] (1)
                • Text {...}
                  • start: 586
                  • end: 590
                  • type: "Text"
                  • raw: "game"
                  • data: "game"
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (7)
              • Text {...}
                • type: "Text"
                • start: 592
                • end: 594
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 594
                • end: 637
                • name: "div"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 599
                    • end: 617
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • start: 606
                        • end: 616
                        • type: "Text"
                        • raw: "game-board"
                        • data: "game-board"
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 618
                      • end: 621
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • Component {...}
                      • type: "Component"
                      • start: 621
                      • end: 629
                      • name: "Board"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: []
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 629
                      • end: 631
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 637
                • end: 639
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 639
                • end: 692
                • name: "div"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 644
                    • end: 661
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • start: 651
                        • end: 660
                        • type: "Text"
                        • raw: "game-info"
                        • data: "game-info"
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 662
                      • end: 665
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 665
                      • end: 684
                      • name: "div"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • ExpressionTag {...}
                            • type: "ExpressionTag"
                            • start: 670
                            • end: 678
                            • expression: Identifier {...}
                              • type: "Identifier"
                              • start: 671
                              • end: 677
                              • loc: {...}
                                • start: {...}
                                  • line: 37
                                  • column: 8
                                  }
                                • end: {...}
                                  • line: 37
                                  • column: 14
                                  }
                                }
                              • name: "status"
                              }
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 684
                      • end: 686
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 692
                • end: 694
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 694
                • end: 922
                • name: "ol"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: -1
                    • end: -1
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • type: "Text"
                        • data: ""
                        • raw: ""
                        • start: -1
                        • end: -1
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 698
                      • end: 701
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • EachBlock {...}
                      • type: "EachBlock"
                      • start: 701
                      • end: 915
                      • expression: MemberExpression {...}
                        • type: "MemberExpression"
                        • start: 708
                        • end: 722
                        • loc: {...}
                          • start: {...}
                            • line: 40
                            • column: 9
                            }
                          • end: {...}
                            • line: 40
                            • column: 23
                            }
                          }
                        • object: Identifier {...}
                          • type: "Identifier"
                          • start: 708
                          • end: 714
                          • loc: {...}
                            • start: {...}
                              • line: 40
                              • column: 9
                              }
                            • end: {...}
                              • line: 40
                              • column: 15
                              }
                            }
                          • name: "$store"
                          }
                        • property: Identifier {...}
                          • type: "Identifier"
                          • start: 715
                          • end: 722
                          • loc: {...}
                            • start: {...}
                              • line: 40
                              • column: 16
                              }
                            • end: {...}
                              • line: 40
                              • column: 23
                              }
                            }
                          • name: "history"
                          }
                        • computed: false
                        • optional: false
                        }
                      • body: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (3)
                          • Text {...}
                            • type: "Text"
                            • start: 737
                            • end: 740
                            • raw: "\n\t\t"
                            • data: "\n\t\t"
                            }
                          • RegularElement {...}
                            • type: "RegularElement"
                            • start: 740
                            • end: 905
                            • name: "li"
                            • attributes: [...] (1)
                              • OnDirective {...}
                                • start: 744
                                • end: 783
                                • type: "OnDirective"
                                • name: "click"
                                • expression: ArrowFunctionExpression {...}
                                  • type: "ArrowFunctionExpression"
                                  • start: 756
                                  • end: 780
                                  • loc: {...}
                                    • start: {...}
                                      • line: 41
                                      • column: 18
                                      }
                                    • end: {...}
                                      • line: 41
                                      • column: 42
                                      }
                                    }
                                  • id: null
                                  • expression: true
                                  • generator: false
                                  • async: false
                                  • params: []
                                  • body: CallExpression {...}
                                    • type: "CallExpression"
                                    • start: 762
                                    • end: 780
                                    • loc: {...}
                                      • start: {...}
                                        • line: 41
                                        • column: 24
                                        }
                                      • end: {...}
                                        • line: 41
                                        • column: 42
                                        }
                                      }
                                    • callee: MemberExpression {...}
                                      • type: "MemberExpression"
                                      • start: 762
                                      • end: 774
                                      • loc: {...}
                                        • start: {...}
                                          • line: 41
                                          • column: 24
                                          }
                                        • end: {...}
                                          • line: 41
                                          • column: 36
                                          }
                                        }
                                      • object: Identifier {...}
                                        • type: "Identifier"
                                        • start: 762
                                        • end: 767
                                        • loc: {...}
                                          • start: {...}
                                            • line: 41
                                            • column: 24
                                            }
                                          • end: {...}
                                            • line: 41
                                            • column: 29
                                            }
                                          }
                                        • name: "store"
                                        }
                                      • property: Identifier {...}
                                        • type: "Identifier"
                                        • start: 768
                                        • end: 774
                                        • loc: {...}
                                          • start: {...}
                                            • line: 41
                                            • column: 30
                                            }
                                          • end: {...}
                                            • line: 41
                                            • column: 36
                                            }
                                          }
                                        • name: "jumpTo"
                                        }
                                      • computed: false
                                      • optional: false
                                      }
                                    • arguments: [...] (1)
                                      • Identifier {...}
                                        • type: "Identifier"
                                        • start: 775
                                        • end: 779
                                        • loc: {...}
                                          • start: {...}
                                            • line: 41
                                            • column: 37
                                            }
                                          • end: {...}
                                            • line: 41
                                            • column: 41
                                            }
                                          }
                                        • name: "move"
                                        }
                                      ]
                                    • optional: false
                                    }
                                  }
                                • modifiers: []
                                }
                              ]
                            • fragment: Fragment {...}
                              • type: "Fragment"
                              • nodes: [...] (3)
                                • Text {...}
                                  • type: "Text"
                                  • start: 784
                                  • end: 788
                                  • raw: "\n\t\t\t"
                                  • data: "\n\t\t\t"
                                  }
                                • IfBlock {...}
                                  • type: "IfBlock"
                                  • elseif: false
                                  • start: 788
                                  • end: 897
                                  • test: Identifier {...}
                                    • type: "Identifier"
                                    • start: 793
                                    • end: 797
                                    • loc: {...}
                                      • start: {...}
                                        • line: 42
                                        • column: 8
                                        }
                                      • end: {...}
                                        • line: 42
                                        • column: 12
                                        }
                                      }
                                    • name: "move"
                                    }
                                  • consequent: Fragment {...}
                                    • type: "Fragment"
                                    • nodes: [...] (3)
                                      • Text {...}
                                        • type: "Text"
                                        • start: 798
                                        • end: 802
                                        • raw: "\n\t\t\t"
                                        • data: "\n\t\t\t"
                                        }
                                      • RegularElement {...}
                                        • type: "RegularElement"
                                        • start: 802
                                        • end: 840
                                        • name: "button"
                                        • attributes: []
                                        • fragment: Fragment {...}
                                          • type: "Fragment"
                                          • nodes: [...] (2)
                                            • Text {...}
                                              • type: "Text"
                                              • start: 810
                                              • end: 823
                                              • raw: "Go to move # "
                                              • data: "Go to move # "
                                              }
                                            • ExpressionTag {...}
                                              • type: "ExpressionTag"
                                              • start: 823
                                              • end: 831
                                              • expression: Identifier {...}
                                                • type: "Identifier"
                                                • start: 825
                                                • end: 829
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 43
                                                    • column: 26
                                                    }
                                                  • end: {...}
                                                    • line: 43
                                                    • column: 30
                                                    }
                                                  }
                                                • name: "move"
                                                }
                                              }
                                            ]
                                          }
                                        }
                                      • Text {...}
                                        • type: "Text"
                                        • start: 840
                                        • end: 844
                                        • raw: "\n\t\t\t"
                                        • data: "\n\t\t\t"
                                        }
                                      ]
                                    }
                                  • alternate: Fragment {...}
                                    • type: "Fragment"
                                    • nodes: [...] (3)
                                      • Text {...}
                                        • type: "Text"
                                        • start: 851
                                        • end: 855
                                        • raw: "\n\t\t\t"
                                        • data: "\n\t\t\t"
                                        }
                                      • RegularElement {...}
                                        • type: "RegularElement"
                                        • start: 855
                                        • end: 888
                                        • name: "button"
                                        • attributes: []
                                        • fragment: Fragment {...}
                                          • type: "Fragment"
                                          • nodes: [...] (1)
                                            • Text {...}
                                              • type: "Text"
                                              • start: 863
                                              • end: 879
                                              • raw: "Go to game start"
                                              • data: "Go to game start"
                                              }
                                            ]
                                          }
                                        }
                                      • Text {...}
                                        • type: "Text"
                                        • start: 888
                                        • end: 892
                                        • raw: "\n\t\t\t"
                                        • data: "\n\t\t\t"
                                        }
                                      ]
                                    }
                                  }
                                • Text {...}
                                  • type: "Text"
                                  • start: 897
                                  • end: 900
                                  • raw: "\n\t\t"
                                  • data: "\n\t\t"
                                  }
                                ]
                              }
                            }
                          • Text {...}
                            • type: "Text"
                            • start: 905
                            • end: 908
                            • raw: "\n\t\t"
                            • data: "\n\t\t"
                            }
                          ]
                        }
                      • context: Identifier {...}
                        • type: "Identifier"
                        • name: "step"
                        • start: 726
                        • loc: {...}
                          • start: {...}
                            • line: 40
                            • column: 27
                            • character: 726
                            }
                          • end: {...}
                            • line: 40
                            • column: 31
                            • character: 730
                            }
                          }
                        • end: 730
                        • typeAnnotation: undefined
                        }
                      • index: "move"
                      • key: undefined
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 915
                      • end: 917
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 922
                • end: 923
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 366
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 357
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 15
            • column: 0
            }
          }
        • body: [...] (5)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 45
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 36
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 17
                • end: 22
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 8
                    }
                  • end: {...}
                    • line: 2
                    • column: 13
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 17
                  • end: 22
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 8
                      }
                    • end: {...}
                      • line: 2
                      • column: 13
                      }
                    }
                  • name: "Board"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 28
              • end: 44
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 19
                  }
                • end: {...}
                  • line: 2
                  • column: 35
                  }
                }
              • value: "./Board.svelte"
              • raw: "'./Board.svelte'"
              }
            }
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 47
            • end: 100
            • loc: {...}
              • start: {...}
                • line: 3
                • column: 1
                }
              • end: {...}
                • line: 3
                • column: 54
                }
              }
            • specifiers: [...] (2)
              • ImportSpecifier {...}
                • type: "ImportSpecifier"
                • start: 56
                • end: 61
                • loc: {...}
                  • start: {...}
                    • line: 3
                    • column: 10
                    }
                  • end: {...}
                    • line: 3
                    • column: 15
                    }
                  }
                • imported: Identifier {...}
                  • type: "Identifier"
                  • start: 56
                  • end: 61
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 10
                      }
                    • end: {...}
                      • line: 3
                      • column: 15
                      }
                    }
                  • name: "store"
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 56
                  • end: 61
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 10
                      }
                    • end: {...}
                      • line: 3
                      • column: 15
                      }
                    }
                  • name: "store"
                  }
                }
              • ImportSpecifier {...}
                • type: "ImportSpecifier"
                • start: 63
                • end: 78
                • loc: {...}
                  • start: {...}
                    • line: 3
                    • column: 17
                    }
                  • end: {...}
                    • line: 3
                    • column: 32
                    }
                  }
                • imported: Identifier {...}
                  • type: "Identifier"
                  • start: 63
                  • end: 78
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 17
                      }
                    • end: {...}
                      • line: 3
                      • column: 32
                      }
                    }
                  • name: "calculateWinner"
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 63
                  • end: 78
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 17
                      }
                    • end: {...}
                      • line: 3
                      • column: 32
                      }
                    }
                  • name: "calculateWinner"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 86
              • end: 99
              • loc: {...}
                • start: {...}
                  • line: 3
                  • column: 40
                  }
                • end: {...}
                  • line: 3
                  • column: 53
                  }
                }
              • value: "./stores.js"
              • raw: "'./stores.js'"
              }
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 102
            • end: 113
            • loc: {...}
              • start: {...}
                • line: 4
                • column: 1
                }
              • end: {...}
                • line: 4
                • column: 12
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 106
                • end: 112
                • loc: {...}
                  • start: {...}
                    • line: 4
                    • column: 5
                    }
                  • end: {...}
                    • line: 4
                    • column: 11
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 106
                  • end: 112
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 5
                      }
                    • end: {...}
                      • line: 4
                      • column: 11
                      }
                    }
                  • name: "status"
                  }
                • init: null
                }
              ]
            • kind: "let"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 115
            • end: 126
            • loc: {...}
              • start: {...}
                • line: 5
                • column: 1
                }
              • end: {...}
                • line: 5
                • column: 12
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 119
                • end: 125
                • loc: {...}
                  • start: {...}
                    • line: 5
                    • column: 5
                    }
                  • end: {...}
                    • line: 5
                    • column: 11
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 119
                  • end: 125
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 5
                      }
                    • end: {...}
                      • line: 5
                      • column: 11
                      }
                    }
                  • name: "winner"
                  }
                • init: null
                }
              ]
            • kind: "let"
            }
          • ExpressionStatement {...}
            • type: "ExpressionStatement"
            • start: 128
            • end: 355
            • loc: {...}
              • start: {...}
                • line: 6
                • column: 1
                }
              • end: {...}
                • line: 13
                • column: 4
                }
              }
            • expression: CallExpression {...}
              • type: "CallExpression"
              • start: 128
              • end: 354
              • loc: {...}
                • start: {...}
                  • line: 6
                  • column: 1
                  }
                • end: {...}
                  • line: 13
                  • column: 3
                  }
                }
              • callee: MemberExpression {...}
                • type: "MemberExpression"
                • start: 128
                • end: 143
                • loc: {...}
                  • start: {...}
                    • line: 6
                    • column: 1
                    }
                  • end: {...}
                    • line: 6
                    • column: 16
                    }
                  }
                • object: Identifier {...}
                  • type: "Identifier"
                  • start: 128
                  • end: 133
                  • loc: {...}
                    • start: {...}
                      • line: 6
                      • column: 1
                      }
                    • end: {...}
                      • line: 6
                      • column: 6
                      }
                    }
                  • name: "store"
                  }
                • property: Identifier {...}
                  • type: "Identifier"
                  • start: 134
                  • end: 143
                  • loc: {...}
                    • start: {...}
                      • line: 6
                      • column: 7
                      }
                    • end: {...}
                      • line: 6
                      • column: 16
                      }
                    }
                  • name: "subscribe"
                  }
                • computed: false
                • optional: false
                }
              • arguments: [...] (1)
                • ArrowFunctionExpression {...}
                  • type: "ArrowFunctionExpression"
                  • start: 144
                  • end: 353
                  • loc: {...}
                    • start: {...}
                      • line: 6
                      • column: 17
                      }
                    • end: {...}
                      • line: 13
                      • column: 2
                      }
                    }
                  • id: null
                  • expression: false
                  • generator: false
                  • async: false
                  • params: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • start: 144
                      • end: 149
                      • loc: {...}
                        • start: {...}
                          • line: 6
                          • column: 17
                          }
                        • end: {...}
                          • line: 6
                          • column: 22
                          }
                        }
                      • name: "store"
                      }
                    ]
                  • body: BlockStatement {...}
                    • type: "BlockStatement"
                    • start: 153
                    • end: 353
                    • loc: {...}
                      • start: {...}
                        • line: 6
                        • column: 26
                        }
                      • end: {...}
                        • line: 13
                        • column: 2
                        }
                      }
                    • body: [...] (2)
                      • ExpressionStatement {...}
                        • type: "ExpressionStatement"
                        • start: 157
                        • end: 229
                        • loc: {...}
                          • start: {...}
                            • line: 7
                            • column: 2
                            }
                          • end: {...}
                            • line: 7
                            • column: 74
                            }
                          }
                        • expression: AssignmentExpression {...}
                          • type: "AssignmentExpression"
                          • start: 157
                          • end: 228
                          • loc: {...}
                            • start: {...}
                              • line: 7
                              • column: 2
                              }
                            • end: {...}
                              • line: 7
                              • column: 73
                              }
                            }
                          • operator: "="
                          • left: Identifier {...}
                            • type: "Identifier"
                            • start: 157
                            • end: 163
                            • loc: {...}
                              • start: {...}
                                • line: 7
                                • column: 2
                                }
                              • end: {...}
                                • line: 7
                                • column: 8
                                }
                              }
                            • name: "winner"
                            }
                          • right: CallExpression {...}
                            • type: "CallExpression"
                            • start: 166
                            • end: 228
                            • loc: {...}
                              • start: {...}
                                • line: 7
                                • column: 11
                                }
                              • end: {...}
                                • line: 7
                                • column: 73
                                }
                              }
                            • callee: Identifier {...}
                              • type: "Identifier"
                              • start: 166
                              • end: 181
                              • loc: {...}
                                • start: {...}
                                  • line: 7
                                  • column: 11
                                  }
                                • end: {...}
                                  • line: 7
                                  • column: 26
                                  }
                                }
                              • name: "calculateWinner"
                              }
                            • arguments: [...] (1)
                              • MemberExpression {...}
                                • type: "MemberExpression"
                                • start: 182
                                • end: 227
                                • loc: {...}
                                  • start: {...}
                                    • line: 7
                                    • column: 27
                                    }
                                  • end: {...}
                                    • line: 7
                                    • column: 72
                                    }
                                  }
                                • object: MemberExpression {...}
                                  • type: "MemberExpression"
                                  • start: 182
                                  • end: 221
                                  • loc: {...}
                                    • start: {...}
                                      • line: 7
                                      • column: 27
                                      }
                                    • end: {...}
                                      • line: 7
                                      • column: 66
                                      }
                                    }
                                  • object: MemberExpression {...}
                                    • type: "MemberExpression"
                                    • start: 182
                                    • end: 195
                                    • loc: {...}
                                      • start: {...}
                                        • line: 7
                                        • column: 27
                                        }
                                      • end: {...}
                                        • line: 7
                                        • column: 40
                                        }
                                      }
                                    • object: Identifier {...}
                                      • type: "Identifier"
                                      • start: 182
                                      • end: 187
                                      • loc: {...}
                                        • start: {...}
                                          • line: 7
                                          • column: 27
                                          }
                                        • end: {...}
                                          • line: 7
                                          • column: 32
                                          }
                                        }
                                      • name: "store"
                                      }
                                    • property: Identifier {...}
                                      • type: "Identifier"
                                      • start: 188
                                      • end: 195
                                      • loc: {...}
                                        • start: {...}
                                          • line: 7
                                          • column: 33
                                          }
                                        • end: {...}
                                          • line: 7
                                          • column: 40
                                          }
                                        }
                                      • name: "history"
                                      }
                                    • computed: false
                                    • optional: false
                                    }
                                  • property: BinaryExpression {...}
                                    • type: "BinaryExpression"
                                    • start: 196
                                    • end: 220
                                    • loc: {...}
                                      • start: {...}
                                        • line: 7
                                        • column: 41
                                        }
                                      • end: {...}
                                        • line: 7
                                        • column: 65
                                        }
                                      }
                                    • left: MemberExpression {...}
                                      • type: "MemberExpression"
                                      • start: 196
                                      • end: 216
                                      • loc: {...}
                                        • start: {...}
                                          • line: 7
                                          • column: 41
                                          }
                                        • end: {...}
                                          • line: 7
                                          • column: 61
                                          }
                                        }
                                      • object: MemberExpression {...}
                                        • type: "MemberExpression"
                                        • start: 196
                                        • end: 209
                                        • loc: {...}
                                          • start: {...}
                                            • line: 7
                                            • column: 41
                                            }
                                          • end: {...}
                                            • line: 7
                                            • column: 54
                                            }
                                          }
                                        • object: Identifier {...}
                                          • type: "Identifier"
                                          • start: 196
                                          • end: 201
                                          • loc: {...}
                                            • start: {...}
                                              • line: 7
                                              • column: 41
                                              }
                                            • end: {...}
                                              • line: 7
                                              • column: 46
                                              }
                                            }
                                          • name: "store"
                                          }
                                        • property: Identifier {...}
                                          • type: "Identifier"
                                          • start: 202
                                          • end: 209
                                          • loc: {...}
                                            • start: {...}
                                              • line: 7
                                              • column: 47
                                              }
                                            • end: {...}
                                              • line: 7
                                              • column: 54
                                              }
                                            }
                                          • name: "history"
                                          }
                                        • computed: false
                                        • optional: false
                                        }
                                      • property: Identifier {...}
                                        • type: "Identifier"
                                        • start: 210
                                        • end: 216
                                        • loc: {...}
                                          • start: {...}
                                            • line: 7
                                            • column: 55
                                            }
                                          • end: {...}
                                            • line: 7
                                            • column: 61
                                            }
                                          }
                                        • name: "length"
                                        }
                                      • computed: false
                                      • optional: false
                                      }
                                    • operator: "-"
                                    • right: Literal {...}
                                      • type: "Literal"
                                      • start: 219
                                      • end: 220
                                      • loc: {...}
                                        • start: {...}
                                          • line: 7
                                          • column: 64
                                          }
                                        • end: {...}
                                          • line: 7
                                          • column: 65
                                          }
                                        }
                                      • value: 1
                                      • raw: "1"
                                      }
                                    }
                                  • computed: true
                                  • optional: false
                                  }
                                • property: Identifier {...}
                                  • type: "Identifier"
                                  • start: 222
                                  • end: 227
                                  • loc: {...}
                                    • start: {...}
                                      • line: 7
                                      • column: 67
                                      }
                                    • end: {...}
                                      • line: 7
                                      • column: 72
                                      }
                                    }
                                  • name: "board"
                                  }
                                • computed: false
                                • optional: false
                                }
                              ]
                            • optional: false
                            }
                          }
                        }
                      • IfStatement {...}
                        • type: "IfStatement"
                        • start: 232
                        • end: 350
                        • loc: {...}
                          • start: {...}
                            • line: 8
                            • column: 2
                            }
                          • end: {...}
                            • line: 12
                            • column: 3
                            }
                          }
                        • test: Identifier {...}
                          • type: "Identifier"
                          • start: 236
                          • end: 242
                          • loc: {...}
                            • start: {...}
                              • line: 8
                              • column: 6
                              }
                            • end: {...}
                              • line: 8
                              • column: 12
                              }
                            }
                          • name: "winner"
                          }
                        • consequent: BlockStatement {...}
                          • type: "BlockStatement"
                          • start: 244
                          • end: 282
                          • loc: {...}
                            • start: {...}
                              • line: 8
                              • column: 14
                              }
                            • end: {...}
                              • line: 10
                              • column: 3
                              }
                            }
                          • body: [...] (1)
                            • ExpressionStatement {...}
                              • type: "ExpressionStatement"
                              • start: 249
                              • end: 278
                              • loc: {...}
                                • start: {...}
                                  • line: 9
                                  • column: 3
                                  }
                                • end: {...}
                                  • line: 9
                                  • column: 32
                                  }
                                }
                              • expression: AssignmentExpression {...}
                                • type: "AssignmentExpression"
                                • start: 249
                                • end: 277
                                • loc: {...}
                                  • start: {...}
                                    • line: 9
                                    • column: 3
                                    }
                                  • end: {...}
                                    • line: 9
                                    • column: 31
                                    }
                                  }
                                • operator: "="
                                • left: Identifier {...}
                                  • type: "Identifier"
                                  • start: 249
                                  • end: 255
                                  • loc: {...}
                                    • start: {...}
                                      • line: 9
                                      • column: 3
                                      }
                                    • end: {...}
                                      • line: 9
                                      • column: 9
                                      }
                                    }
                                  • name: "status"
                                  }
                                • right: TemplateLiteral {...}
                                  • type: "TemplateLiteral"
                                  • start: 258
                                  • end: 277
                                  • loc: {...}
                                    • start: {...}
                                      • line: 9
                                      • column: 12
                                      }
                                    • end: {...}
                                      • line: 9
                                      • column: 31
                                      }
                                    }
                                  • expressions: [...] (1)
                                    • Identifier {...}
                                      • type: "Identifier"
                                      • start: 269
                                      • end: 275
                                      • loc: {...}
                                        • start: {...}
                                          • line: 9
                                          • column: 23
                                          }
                                        • end: {...}
                                          • line: 9
                                          • column: 29
                                          }
                                        }
                                      • name: "winner"
                                      }
                                    ]
                                  • quasis: [...] (2)
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 259
                                      • end: 267
                                      • loc: {...}
                                        • start: {...}
                                          • line: 9
                                          • column: 13
                                          }
                                        • end: {...}
                                          • line: 9
                                          • column: 21
                                          }
                                        }
                                      • value: {...}
                                        • raw: "Winner: "
                                        • cooked: "Winner: "
                                        }
                                      • tail: false
                                      }
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 276
                                      • end: 276
                                      • loc: {...}
                                        • start: {...}
                                          • line: 9
                                          • column: 30
                                          }
                                        • end: {...}
                                          • line: 9
                                          • column: 30
                                          }
                                        }
                                      • value: {...}
                                        • raw: ""
                                        • cooked: ""
                                        }
                                      • tail: true
                                      }
                                    ]
                                  }
                                }
                              }
                            ]
                          }
                        • alternate: BlockStatement {...}
                          • type: "BlockStatement"
                          • start: 288
                          • end: 350
                          • loc: {...}
                            • start: {...}
                              • line: 10
                              • column: 9
                              }
                            • end: {...}
                              • line: 12
                              • column: 3
                              }
                            }
                          • body: [...] (1)
                            • ExpressionStatement {...}
                              • type: "ExpressionStatement"
                              • start: 293
                              • end: 346
                              • loc: {...}
                                • start: {...}
                                  • line: 11
                                  • column: 3
                                  }
                                • end: {...}
                                  • line: 11
                                  • column: 56
                                  }
                                }
                              • expression: AssignmentExpression {...}
                                • type: "AssignmentExpression"
                                • start: 293
                                • end: 345
                                • loc: {...}
                                  • start: {...}
                                    • line: 11
                                    • column: 3
                                    }
                                  • end: {...}
                                    • line: 11
                                    • column: 55
                                    }
                                  }
                                • operator: "="
                                • left: Identifier {...}
                                  • type: "Identifier"
                                  • start: 293
                                  • end: 299
                                  • loc: {...}
                                    • start: {...}
                                      • line: 11
                                      • column: 3
                                      }
                                    • end: {...}
                                      • line: 11
                                      • column: 9
                                      }
                                    }
                                  • name: "status"
                                  }
                                • right: TemplateLiteral {...}
                                  • type: "TemplateLiteral"
                                  • start: 302
                                  • end: 345
                                  • loc: {...}
                                    • start: {...}
                                      • line: 11
                                      • column: 12
                                      }
                                    • end: {...}
                                      • line: 11
                                      • column: 55
                                      }
                                    }
                                  • expressions: [...] (1)
                                    • ConditionalExpression {...}
                                      • type: "ConditionalExpression"
                                      • start: 318
                                      • end: 343
                                      • loc: {...}
                                        • start: {...}
                                          • line: 11
                                          • column: 28
                                          }
                                        • end: {...}
                                          • line: 11
                                          • column: 53
                                          }
                                        }
                                      • test: MemberExpression {...}
                                        • type: "MemberExpression"
                                        • start: 318
                                        • end: 331
                                        • loc: {...}
                                          • start: {...}
                                            • line: 11
                                            • column: 28
                                            }
                                          • end: {...}
                                            • line: 11
                                            • column: 41
                                            }
                                          }
                                        • object: Identifier {...}
                                          • type: "Identifier"
                                          • start: 318
                                          • end: 323
                                          • loc: {...}
                                            • start: {...}
                                              • line: 11
                                              • column: 28
                                              }
                                            • end: {...}
                                              • line: 11
                                              • column: 33
                                              }
                                            }
                                          • name: "store"
                                          }
                                        • property: Identifier {...}
                                          • type: "Identifier"
                                          • start: 324
                                          • end: 331
                                          • loc: {...}
                                            • start: {...}
                                              • line: 11
                                              • column: 34
                                              }
                                            • end: {...}
                                              • line: 11
                                              • column: 41
                                              }
                                            }
                                          • name: "xIsNext"
                                          }
                                        • computed: false
                                        • optional: false
                                        }
                                      • consequent: Literal {...}
                                        • type: "Literal"
                                        • start: 334
                                        • end: 337
                                        • loc: {...}
                                          • start: {...}
                                            • line: 11
                                            • column: 44
                                            }
                                          • end: {...}
                                            • line: 11
                                            • column: 47
                                            }
                                          }
                                        • value: "X"
                                        • raw: "'X'"
                                        }
                                      • alternate: Literal {...}
                                        • type: "Literal"
                                        • start: 340
                                        • end: 343
                                        • loc: {...}
                                          • start: {...}
                                            • line: 11
                                            • column: 50
                                            }
                                          • end: {...}
                                            • line: 11
                                            • column: 53
                                            }
                                          }
                                        • value: "O"
                                        • raw: "'O'"
                                        }
                                      }
                                    ]
                                  • quasis: [...] (2)
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 303
                                      • end: 316
                                      • loc: {...}
                                        • start: {...}
                                          • line: 11
                                          • column: 13
                                          }
                                        • end: {...}
                                          • line: 11
                                          • column: 26
                                          }
                                        }
                                      • value: {...}
                                        • raw: "Next player: "
                                        • cooked: "Next player: "
                                        }
                                      • tail: false
                                      }
                                    • TemplateElement {...}
                                      • type: "TemplateElement"
                                      • start: 344
                                      • end: 344
                                      • loc: {...}
                                        • start: {...}
                                          • line: 11
                                          • column: 54
                                          }
                                        • end: {...}
                                          • line: 11
                                          • column: 54
                                          }
                                        }
                                      • value: {...}
                                        • raw: ""
                                        • cooked: ""
                                        }
                                      • tail: true
                                      }
                                    ]
                                  }
                                }
                              }
                            ]
                          }
                        }
                      ]
                    }
                  }
                ]
              • optional: false
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Tic Tac Toe Time Travel • Playground • Svelte