fix docs with jupyterlab

Author: fgmacedo

README.rst

@@ -55,6 +55,7 @@ A few reasons why you may consider using it:
 Getting started
 ===============
 
+
 To install Python State Machine, run this command in your terminal:
 
 .. code-block:: console

docs/auto_examples/guess_the_number_machine.rst

@@ -6,6 +6,13 @@ Examples
 Below is a gallery of StateMachine examples.
 
 
+.. tip:: Try Python State Machine directly from your browser!
+
+    Run our examples and try hacks right now on this `JupyterLab <../lite/lab/index.html>`_
+
+    Powered by the amazing https://pyodide.org/.
+
+
 
 .. raw:: html
 

docs/auto_examples/index.rst

@@ -359,5 +359,6 @@
     "first_notebook_cell": (
         "# import piplite\n"
         "# await piplite.install('python-statemachine[diagrams]')\n"
+        "# import patch_repr_svg\n"
     ),
 }

docs/auto_examples/order_control_rich_model_machine.rst

@@ -0,0 +1,38 @@
+import sys
+
+
+def patch__repr_svg_():  # pragma: no cover
+    """
+    You're running this example directly from your browser! By using the amazing
+    https://pyodide.org/.
+
+    Since we're in a browser, the default dependency of GraphViz installed locally don't work. So
+    this cell is an option to see our examples and try the library on the fly without the need to
+    install anything.
+
+    We've to patch `StateMachine._repr_svg_` to retrieve the svg diagram online as the graphviz is
+    not available.
+
+    This method will serialize and request the graph to an external service: https://quickchart.io.
+    By using de diagrams support you trust quickchart.io. Please read
+    https://quickchart.io/documentation/faq/.
+
+    See also https://python-statemachine.readthedocs.io/en/latest/diagram.html
+    """
+    from urllib.parse import quote
+    from statemachine import StateMachine
+
+    def show_sm(sm):
+        url = "https://quickchart.io/graphviz?graph={}".format(
+            quote(sm._graph().to_string())
+        )
+        return '<svg width="auto" height="auto"><image xlink:href="{}"/>'.format(url)
+
+    StateMachine._repr_svg_ = show_sm
+
+
+if sys.platform == "emscripten":  # pragma: no cover
+    # https://pyodide.org/ is the runtime!
+    patch__repr_svg_()
+    print(patch__repr_svg_.__doc__)
+    print("'StateMachine._repr_svg_' patched!")

docs/conf.py

@@ -1,6 +1,6 @@
 # StateMachine 1.0.0
 
-*January 11, 2022*
+*January 11, 2023*
 
 This release tag was replaced by [](1.0.1.md) due to an error on the metadata when uploading to
 pypi.

docs/examples/patch_repr_svg.py

@@ -1,6 +1,6 @@
 # StateMachine 1.0.1
 
-*January 11, 2022*
+*January 11, 2023*
 
 Welcome to StateMachine 1.0.1!
 

docs/releases/1.0.0.md

@@ -105,9 +105,6 @@ def add_observer(self, *observers):
         self._visit_states_and_transitions(lambda x: x._add_observer(*resolvers))
         return self
 
-    def _repr_html_(self):
-        return '<div class="statemachine">{}</div>'.format(self._repr_svg_())
-
     def _repr_svg_(self):
         return self._graph().create_svg().decode()
 

docs/releases/1.0.1.md

@@ -2,3 +2,10 @@ Examples
 --------
 
 Below is a gallery of StateMachine examples.
+
+
+.. tip:: Try Python State Machine directly from your browser!
+
+    Run our examples and try hacks right now on this `JupyterLab <../lite/lab/index.html>`_
+
+    Powered by the amazing https://pyodide.org/.