CHANGELOG.md

XState Visualizer

0.10.0

Minor Changes

• #425 c80b891 Thanks @laurakalbag! - Add a banner and welcome screen link introducing the Stately visual editor

0.9.1

Patch Changes

• #422 10858d2 Thanks @davidkpiano! - Fixes issue where raise actions were causing visualizer to crash

0.9.0

Minor Changes

• #414 8a336e3 Thanks @kevinmaes! - Analytics

0.8.6

Patch Changes

• #408 1894954 Thanks @mellson! - Remove Sentry.

0.8.5

Patch Changes

• 60a35a2 Thanks @mellson! - Screenshots now have a better quality and are cropped to the machine.

0.8.2

Patch Changes

• #387 77b2a13 Thanks @zgotsch! - Add some additional heuristics to avoid layout failures

0.8.1

Patch Changes

• #382 a9019ed Thanks @mellson! - The editor will now prefer imports from xstate core.

0.8.0

Minor Changes

• #377 9b731ba Thanks @farskid! - Support confirm, prompt and window.* in the visualizer

0.7.1

Patch Changes

• #373 ecf0d23 Thanks @davidkpiano! - Updated API to point to projects rather than systems

0.7.0

Minor Changes

• #293 67e24ae Thanks @jacksteamdev! - You can now inspect via WebSocket. To do that you can add the WebSocket server url as a query parameter, for example https://stately.ai/viz?inspect&server=ws://localhost:3000

Patch Changes

• #343 632f950 Thanks @Andarist! - Fixed panning/dragging interations (the ones that include pressing pointer down) in FireFox.

0.6.0

Minor Changes

• #338 196e44d Thanks @riccardo-forina! - You can now visualize descriptions added directly to state nodes and transitions

Patch Changes

• #336 225757d Thanks @kmannislands! - Remove unecessary feature policy claims from generated embed iframes

0.5.1

Patch Changes

• #332 9f93d67 Thanks @Andarist! - Fixed the app crashing when processing invalid actions - like when using a guard accidentally in a place of an action.

• #334 fecdc01 Thanks @davidkpiano! - Self-transitions on the machine will no longer cause graph layout to fail:

  import { createMachine } from 'xstate';
  
  const machine = createMachine({
    on: {
      // These will now display as expected
      LOAD: {},
      UPDATE: {},
    },
    states: {
      something: {},
    },
  });

0.5.0

Minor Changes

• #269 0f8e205 Thanks @Andarist! - A possibility to start panning the canvas by pressing the middle button of a mouse has been added.

• #237 7599a26 Thanks @rthor, @Andarist! - Added more keyboard interactions to the canvas:

  • arrows (↑↓→←) can be used to move the canvas around (with Shift the step move is increased)
  • +/- can be used to zoom in/out
  • Shift + 1 can be used to fit the machine on the canvas

• #315 f98ce3f Thanks @farskid! - Tweak controls options in embed mode

  • RESET and Fit To View are now available in all embed modes with controls=1
  • Zoom in and out buttons are only available if controls and Zoom are both enabled
  • Hand tool (pan button) is only available if controls and pan are both enabled
  • Reset canvas button and Help button are no longer available in embed mode

Patch Changes

• #289 48af2ef Thanks @farskid! - Fix a bug with inconsistent embed previews

• #278 cd128a1 Thanks @farskid! - Show full url in the embed code inside embed preview

• #298 0c3bfec Thanks @christoph-fricke! - Align the visualization of custom actions with the visualization of XState-provided actions. Previously, the labels for custom actions were not rendered with a bold font.

• #312 d10238a Thanks @Andarist! - Updated XState to its latest version (4.26.0). Visualizer should be able to use the new goodies now, such as it should provide access to the invoke.meta object in the invoke creators.

• #303 2cb5ccf Thanks @mattpocock! - Fixed an issue where events were being duplicated in the right-hand events panel.

0.4.0

Minor Changes

• #209 45cdb47 Thanks @farskid! - Embedded Mode!

  The visualizer/inspector can now be used in embedded mode. In this mode, some parts of the application can be configured such as control buttons, panning, zooming, etc.

  The embed preview frame lets users configure how they want the embedded visualizer to look:

  

• #198 784ded9 Thanks @mattpocock! - Added generated OG images to visualized machine links. You can copy these links yourself to embed an up-to-date image of your visualized machine - for instance in docs. Here's where the share button is in the viz:

  

• #246 22f1724 Thanks @Andarist! - Added a hand icon to the canvas' toolbar:

  

  This allows you to enable the "pan mode" to drag the canvas around without holding the spacebar button down at the same time.

Patch Changes

• #263 4a0f041 Thanks @Andarist! - Fixed an issue with right-side panels getting cut off after stretching them and shrinking back with the resize handle.

• #240 fbb2f00 Thanks @mattpocock! - Added support for using setInterval, setTimeout, clearInterval and clearTimeout in the viz.

• #217 92a2bba Thanks @mattpocock! - Added a button to allow users to report any issues they find, using a GitHub issue template.

  

• #238 e074059 Thanks @mattpocock! - When you press visualize, machines will now automatically 'fit to view'. This prevents various bugs around state machines appearing not to be visible, when they're actually just off screen.

• #214 b9020a6 Thanks @davidkpiano! - Multiple actors are now correctly visualized in the actors panel. This includes actors that are:

  • Created with createMachine(...) (automatically interpreted by default)
  • Invoked with invoke: { ... }
  • Spawned with spawn(...)
  

• #247 bdbc892 Thanks @Andarist! - Fixed an issue with the code editor becoming visually broken after saving a machine.

0.3.0

Minor Changes

• #215 f030057 Thanks @mattpocock! - Added a welcome area for new users to help new folks understand what the viz can do.

  

• #210 a8dbee6 Thanks @davidkpiano! - You can now click the Fit to view button to fit your entire diagram into view:

  CleanShot.2021-08-26.at.10.35.41.mp4

Patch Changes

• #203 fd35c53 Thanks @Andarist! - Fixed an issue with action buttons for the editor being often left out of the screen after viewport resizes.

• #208 a1b7379 Thanks @Andarist! - Fixed an issue with global keybindings being also triggered when providing input to input-like elements.

• #228 7ca7e9a Thanks @davidkpiano! - The layout algorithm was parenting some of the edges incorrectly. This has been fixed.

  

0.2.0

Minor Changes

• #190 fd64139 Thanks @davidkpiano! - In the visualized machine, the entire event is now clickable.

• #189 77e808b Thanks @davidkpiano! - Styles for invoked actors are now consistent with other action styles.

• #182 80f6966 Thanks @Andarist! - All keyboard shortcuts and keyboard-based interactions should now only allow platform-specific meta keys to be used. That means that on Mac they work with CMD and on other platforms they work with Ctrl.

• #192 87ffc50 Thanks @davidkpiano! - Sometimes, initial states will end up in an unexpected place, such as all the way to the right of the graph. This was due to the graph layout algorithm trying to prioritize all transitions to point to the right, even transitions cycling back to the initial state. Now, transitions coming from the initial state are prioritized over all others, to ensure that the initial state ends up in an expected top-left placement.

Patch Changes

• #186 Thanks @santicros! - Fixed an issue which caused browsers to zoom together with the visualization canvas when zooming using wheel.

• #187 1d69848 Thanks @Andarist! - Fixed an issue with inspector crashing on some inline action objects used in the config.

• #195 3ed3c0d Thanks @davidkpiano! - The graph layout algorithm (using ELK) is now more resilient to layout failures caused by some layout options (such as compaction), so heuristics have been applied that make it more resilient to potential layout failures.

0.1.0

Initial release of the new Visualizer.