fix doc examples following changes

Author: rmorshea

Diff for: docs/main.py

@@ -28,8 +28,8 @@ async def forward_to_index(request):
 examples_dir = here / "source" / "examples"
 sys.path.insert(0, str(examples_dir))
 
-original_run = idom.run
 
+original_run = idom.run
 try:
     for file in examples_dir.iterdir():
         if not file.is_file() or not file.suffix == ".py" or file.stem.startswith("_"):
@@ -50,14 +50,11 @@ async def forward_to_index(request):
                 )
             except Exception as error:
                 raise RuntimeError(f"Failed to execute {file}") from error
-except Exception:
+finally:
     idom.run = original_run
 
-server = (
-    PerClientStateServer(element)
-    .configure({"redirect_root_to_index": False})
-    .register(app)
-)
+
+server = PerClientStateServer(element, {"redirect_root_to_index": False}).register(app)
 
 
 def prod():
@@ -73,6 +70,7 @@ def local(path=""):
     import webbrowser
 
     thread = server.daemon("127.0.0.1", 5000)
+    path = f"docs/{path}" if path else ""
     webbrowser.open(f"http://127.0.0.1:5000/{path}")
     thread.join()
 

Diff for: docs/source/examples.rst

@@ -8,58 +8,6 @@ You can also try these examples out on binder |launch-binder|:
   :depth: 1
 
 
-Displaying These Examples
--------------------------
-
-Depending on how you plan to use these examples you'll need different
-boilerplate code.
-
-In all cases we define a ``display(element)`` function which will display the
-view. In a Jupyter Notebook it will appear in an output cell. If you're running
-``idom`` as a webserver it will appear at http://localhost:8765/client/index.html.
-
-
-**Local Python File**
-
-.. code-block::
-
-    import idom
-    from idom.server.sanic import PerClientStateServer
-
-    def display(element, *args, **kwargs):
-        PerClientStateServer(element, *args, **kwargs).run("127.0.0.1", 8765)
-
-    @idom.element
-    def Main(self):
-        # define your element here
-        ...
-
-    if __name__ == "__main__":
-        display(Main)
-
-
-**Jupyter Notebook**
-
-.. code-block::
-
-    from idom.widgets.jupyter import init_display
-    display = init_display("127.0.0.1")
-
-    @idom.element
-    def MyElement():
-        # define your element here
-        ...
-
-    jupyter_widget = display(MyElement)
-
-.. note::
-
-    The ``init_display`` function checks environment variables to try and infer whether
-    it's in a Jupyterhub instance (e.g. mybinder.org) and if so, assumes the presence of a
-    `jupyter_server_proxy <https://github.com/jupyterhub/jupyter-server-proxy>`_. If this
-    doesn't work please `post an issue <https://github.com/rmorshea/idom/issues>`_.
-
-
 Slideshow
 ---------
 

Diff for: docs/source/examples/material_ui_button_no_action.py

@@ -3,10 +3,10 @@
 material_ui = idom.Module("@material-ui/core")
 MaterialButton = material_ui.Import("Button", fallback="loading...")
 
-
-@idom.element
-def ViewMaterialButton():
-    return MaterialButton({"color": "primary", "variant": "contained"}, "Hello World!")
-
-
-idom.run(ViewMaterialButton)
+idom.run(
+    idom.element(
+        lambda: MaterialButton(
+            {"color": "primary", "variant": "contained"}, "Hello World!"
+        )
+    )
+)

Diff for: docs/source/examples/snake_game.py

@@ -14,11 +14,11 @@ class GameState(enum.Enum):
 
 
 @idom.element
-def GameView(grid_size, block_scale):
+def GameView():
     game_state, set_game_state = idom.hooks.use_state(GameState.init)
 
     if game_state == GameState.play:
-        return GameLoop(grid_size, block_scale, set_game_state)
+        return GameLoop(grid_size=6, block_scale=50, set_game_state=set_game_state)
 
     start_button = idom.html.button(
         {"onClick": lambda event: set_game_state(GameState.play)},
@@ -167,4 +167,4 @@ def assign_grid_block_color(grid, point, color):
     block["attributes"]["style"]["backgroundColor"] = color
 
 
-idom.run(GameView, 6, 50)
+idom.run(GameView)

Diff for: docs/source/examples/use_state_counter.py

@@ -10,7 +10,8 @@ def decrement(last_count):
 
 
 @idom.element
-def Counter(initial_count):
+def Counter():
+    initial_count = 0
     count, set_count = idom.hooks.use_state(initial_count)
     return idom.html.div(
         f"Count: {count}",
@@ -20,4 +21,4 @@ def Counter(initial_count):
     )
 
 
-idom.run(Counter, 0)
+idom.run(Counter)

Diff for: docs/source/examples/victory_chart.py

@@ -4,4 +4,8 @@
 
 VictoryBar = victory.Import("VictoryBar", fallback="loading...")
 
-idom.run(VictoryBar, {"style": {"parent": {"width": "500px"}}})
+idom.run(
+    idom.element(
+        lambda: VictoryBar({"style": {"parent": {"width": "500px"}}}),
+    )
+)

Diff for: docs/source/index.rst

@@ -21,19 +21,11 @@ Libraries for defining and controlling interactive webpages with Python
     api
 
 
-Try it Now!
------------
-
-- Using working :ref:`Examples`
-
-- In a Jupyter Notebook - |launch-binder|
-
-
 Early Days
 ----------
 
-IDOM is still young. If you have ideas or find a bug, be sure to post an
-`issue`_ or create a `pull request`_. Thanks in advance!
+IDOM is still young. Be sure to post any `issues`_ you have or contribute by creating a
+`pull request`_.
 
 
 At a Glance
@@ -44,25 +36,32 @@ user clicks an image:
 
 .. example:: slideshow
 
-You can try out a **Live Example** by selecting the tab and enabling the widget.
+Try selecting the "Live Example" tab in the view above and enabling the widget.
 
 Once activated try clicking the displayed image to make it change 🖱️
 
 .. note::
 
-    You can display the same thing in a Jupyter Notebook using widgets!
+    You can display the same thing in a Jupyter Notebook by installing ``idom-jupyter``:
+
+    .. code-block:: bash
+
+        pip install idom-jupyter
+
+    Then simply
 
     .. code-block::
 
-        idom.JupyterDisplay(f"https://{host}:{port}")
+        import idom_jupyter
+        idom_jupyter.display(Slideshow)
 
-    For info on working with IDOM in Jupyter see some :ref:`examples <Display Function>`.
+    Try it out on Binder now: |launch-binder|
 
 
 .. Links
 .. =====
 
-.. _issue: https://github.com/rmorshea/idom/issues
+.. _issues: https://github.com/rmorshea/idom/issues
 .. _pull request: https://github.com/rmorshea/idom/pulls
 .. _IDOM Sandbox: https://idom-sandbox.herokuapp.com
 .. |launch-binder| image:: https://mybinder.org/badge_logo.svg

Diff for: docs/source/javascript-modules.rst

@@ -31,15 +31,12 @@ packages.
 Installing React Components
 ---------------------------
 
-Before you start:
-
-- Be sure that you've installed `npm <https://www.npmjs.com/get-npm>`__.
+.. note::
 
-- We're assuming the presence of a :ref:`Display Function` for our examples.
+    Be sure that you've installed `npm <https://www.npmjs.com/get-npm>`__.
 
-Once you've done this you can get started right away. In this example we'll be using the
-ubiquitous React-based UI framework `Material UI`_ which can be installed using the
-``idom`` CLI:
+In this example we'll be using the ubiquitous React-based UI framework `Material UI`_
+which can be easily installed using the ``idom`` CLI:
 
 .. code-block:: bash
 
@@ -58,21 +55,6 @@ Once the package has been succesfully installed, you can import and display the
 .. example:: material_ui_button_no_action
 
 
-.. note::
-
-    Styling for Material UI is already built into this page so in the following examples
-    we've omitted a link to the style sheet which would otherwise be created with:
-
-    .. code-block::
-
-        material_ui_style = idom.html.link(
-            {
-                "rel": "stylesheet",
-                "href": "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap",
-            }
-        )
-
-
 Passing Props To Components
 ---------------------------
 

Diff for: idom/core/element.py

@@ -79,6 +79,6 @@ def __repr__(self) -> str:
         args = sig.bind(*self._args, **self._kwargs).arguments
         items = ", ".join(f"{k}={v!r}" for k, v in args.items())
         if items:
-            return f"{self._function.__name__}({id(self)}, {items})"
+            return f"{self._function.__name__}({hex(id(self))}, {items})"
         else:
-            return f"{self._function.__name__}({id(self)})"
+            return f"{self._function.__name__}({hex(id(self))})"

Diff for: idom/widgets/utils.py

@@ -160,3 +160,6 @@ def __call__(self, constructor: ElementConstructor) -> str:
         view_id = str(self._next_auto_id)
         self._views[view_id] = constructor
         return view_id
+
+    def __repr__(self):
+        return f"{type(self).__name__}({self._views})"

Diff for: scripts/all_examples.py

@@ -26,12 +26,10 @@ def main():
         if not example_file.stem.startswith("_"):
             with example_file.open() as f_obj:
                 try:
+                    idom.run = lambda func: views.append((example_file.stem, func))
                     exec(
                         f_obj.read(),
                         {
-                            "display": lambda f, *a, **kw: views.append(
-                                (example_file.stem, f, a, kw)
-                            ),
                             "__file__": str(file),
                             "__name__": f"widgets.{file.stem}",
                         },
@@ -44,9 +42,9 @@ def main():
     @idom.element
     def AllExamples():
         examples = []
-        for title, f, a, kw in views:
+        for title, func in views:
             examples.append(idom.html.h1(title))
-            examples.append(f(*a, **kw))
+            examples.append(func())
             examples.append(idom.html.hr({"style": {"margin-top": "20px"}}))
         return idom.html.div({"style": {"margin": "20px"}}, examples)
 

Diff for: scripts/local-docs.sh

@@ -2,5 +2,5 @@ set -e
 python scripts/install_doc_js_modules.py
 sphinx-build -E -b html docs/source docs/build
 cd docs
-python -c "import main; main.local('docs/$1')"
+python -c "import main; main.local('$1')"
 cd ../

Diff for: scripts/one_example.py

@@ -1,8 +1,7 @@
 import sys
 from pathlib import Path
 
-from idom.widgets.utils import hotswap
-from idom.server.sanic import PerClientStateServer
+import idom
 
 from scripts.install_doc_js_modules import install_doc_js_modules
 
@@ -33,21 +32,18 @@ def main():
         _print_available_options()
         return
 
-    mount, element = hotswap()
-    server = PerClientStateServer(element)
+    idom_run = idom.run
+    idom.run = lambda element: idom_run(element, port=5000)
 
     with example_file.open() as f:
         exec(
             f.read(),
             {
-                "display": mount,
                 "__file__": str(file),
                 "__name__": f"widgets.{file.stem}",
             },
         )
 
-    server.run("127.0.0.1", 5000)
-
 
 def _print_available_options():
     for found_example_file in examples_dir.glob("*.py"):

Diff for: sys

@@ -8,7 +8,7 @@ def MyElement(a, *b, **c):
 
     m_e = MyElement(1, 2, 3, x=4, y=5)
 
-    expected = f"MyElement({id(m_e)}, a=1, b=(2, 3), c={{'x': 4, 'y': 5}})"
+    expected = f"MyElement({hex(id(m_e))}, a=1, b=(2, 3), c={{'x': 4, 'y': 5}})"
     assert repr(m_e) == expected
 
 

Diff for: tests/test_core/test_element.py

@@ -23,7 +23,7 @@ def MyElement():
 
     my_element = MyElement()
     layout = idom.Layout(my_element)
-    assert str(layout) == f"Layout(MyElement({id(my_element)}))"
+    assert str(layout) == f"Layout(MyElement({hex(id(my_element))}))"
 
 
 def test_layout_expects_abstract_element():