be a directory under /data/tips (e.g. /data/tips/[demo-name])
have an index.md for the content (e.g. /data/tips/[demo-name]/index.md)
have a statechart.js file containing the final model of the example tip
embed Xstate visualizer
come with demo files to showcase a running example alongside debug values
Demos
Each demo will have to have at least a demo.html and demo.js. The JS file can be a single bundle of demo's framework of choice if needs be. This JS file will also contain some boilerplate code for tip page and demo frame communication.
Demo files should live under /static/[demo-name]/ directory.
Demo and Tip communication bridge
The bridge is a global variable defined on the tip page window. This variable will contain the frame's interpreter info so that we could extract current state and context to be shown as debug values on the tip page.
Tip compilation process
Render the markdown content
Create a Github gist with statechart.js that can be pulled into the visualizer later
Plans for the tip page:
Each tip should:
/data/tips
(e.g./data/tips/[demo-name]
)index.md
for the content (e.g./data/tips/[demo-name]/index.md
)statechart.js
file containing the final model of the example tipDemos
Each demo will have to have at least a
demo.html
anddemo.js
. The JS file can be a single bundle of demo's framework of choice if needs be. This JS file will also contain some boilerplate code for tip page and demo frame communication.Demo files should live under
/static/[demo-name]/
directory.Demo and Tip communication bridge
The bridge is a global variable defined on the tip page window. This variable will contain the frame's interpreter info so that we could extract current state and context to be shown as debug values on the tip page.
Tip compilation process
statechart.js
that can be pulled into the visualizer laterTip page layout