create an idom.run util

Author: rmorshea

Diff for: docs/main.py

@@ -6,6 +6,7 @@
 from sanic import Sanic
 from sanic import response
 
+import idom
 from idom.widgets.utils import multiview
 from idom.client.manage import APP_DIR
 from idom.server.sanic import PerClientStateServer
@@ -27,22 +28,30 @@ async def forward_to_index(request):
 examples_dir = here / "source" / "examples"
 sys.path.insert(0, str(examples_dir))
 
-for file in examples_dir.iterdir():
-    if not file.is_file() or not file.suffix == ".py" or file.stem.startswith("_"):
-        continue
-
-    with file.open() as f:
-        try:
-            exec(
-                f.read(),
-                {
-                    "display": mount[file.stem],
-                    "__file__": str(file),
-                    "__name__": f"widgets.{file.stem}",
-                },
-            )
-        except Exception as error:
-            raise RuntimeError(f"Failed to execute {file}") from error
+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("_"):
+            continue
+
+        # Modify the run function so when we exec the file
+        # instead of running a server we mount the view.
+        idom.run = mount[file.stem]
+
+        with file.open() as f:
+            try:
+                exec(
+                    f.read(),
+                    {
+                        "__file__": str(file),
+                        "__name__": f"widgets.{file.stem}",
+                    },
+                )
+            except Exception as error:
+                raise RuntimeError(f"Failed to execute {file}") from error
+except Exception:
+    idom.run = original_run
 
 server = (
     PerClientStateServer(element)

Diff for: docs/source/examples.rst

@@ -1,15 +1,15 @@
 Examples
 ========
 
-You can find the following examples and more on binder |launch-binder|:
+You can also try these examples out on binder |launch-binder|:
 
 .. contents::
   :local:
   :depth: 1
 
 
-Display Function
-----------------
+Displaying These Examples
+-------------------------
 
 Depending on how you plan to use these examples you'll need different
 boilerplate code.
@@ -18,12 +18,6 @@ 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.
 
-.. note::
-
-  The :ref:`Shared Client Views` example requires ``SharedClientStateServer`` server instead
-  of the ``PerClientStateServer`` server shown in the boilerplate below. Be sure to wwap it
-  out when you get there.
-
 
 **Local Python File**
 
@@ -138,36 +132,6 @@ Click the bars to trigger an event 👇
 .. example:: custom_chart
 
 
-Shared Client Views
--------------------
-
-This example requires the :class:`~idom.server.sanic.SharedClientStateServer`. Be sure
-to replace it in your boilerplate code before going further! Once you've done this we
-can just re-display our :ref:`Slideshow` example using the new server. Now all we need
-to do is connect to the server with a couple clients to see that their views are synced.
-This can be done by navigating to the server URL in seperate browser tabs. Likewise if
-you're using a Jupyter Notebook you would display it in multiple cells like this:
-
-**Jupyter Notebook**
-
-.. code-block::
-
-    # Cell 1
-    ...  # boiler plate with SharedClientState server
-
-    # Cell 2
-    ...  # code from the Slideshow example
-
-    # Cell 3
-    widget = display(Slideshow)
-
-    # Cell 4
-    widget  # this is our first view
-
-    # Cell 5
-    widget  # this is out second view
-
-
 Material UI Slider
 ------------------
 
@@ -178,16 +142,6 @@ Move the slider and see the event information update 👇
 .. example:: material_ui_slider
 
 
-Semantic UI Buttons
--------------------
-
-Assuming you already installed ``semantic-ui-react`` as in the :ref:`Install Javascript Modules` section:
-
-Click the buttons and see the event information update 👇
-
-.. example:: primary_secondary_buttons
-
-
 .. Links
 .. =====
 

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

@@ -11,4 +11,4 @@ def ClickCount():
     )
 
 
-display(ClickCount)
+idom.run(ClickCount)

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

@@ -37,4 +37,4 @@ def ShowChartClicks():
     )
 
 
-display(ShowChartClicks)
+idom.run(ShowChartClicks)

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

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

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

@@ -24,4 +24,4 @@ def ViewSliderEvents():
     )
 
 
-display(ViewSliderEvents)
+idom.run(ViewSliderEvents)

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

@@ -27,4 +27,4 @@ def ViewSliderEvents():
     )
 
 
-display(ViewSliderEvents)
+idom.run(ViewSliderEvents)

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

@@ -87,4 +87,4 @@ def linspace(start, stop, n):
         yield start + h * i
 
 
-display(PolynomialPlot)
+idom.run(PolynomialPlot)

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

@@ -85,4 +85,4 @@ async def interval() -> None:
     return asyncio.ensure_future(interval())
 
 
-display(RandomWalk)
+idom.run(RandomWalk)

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

@@ -17,4 +17,4 @@ def next_image(event):
     )
 
 
-display(Slideshow)
+idom.run(Slideshow)

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

@@ -167,4 +167,4 @@ def assign_grid_block_color(grid, point, color):
     block["attributes"]["style"]["backgroundColor"] = color
 
 
-display(GameView, 6, 50)
+idom.run(GameView, 6, 50)

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

@@ -26,4 +26,4 @@ async def remove_task(event, index=index):
     return idom.html.div(task_input, task_table)
 
 
-display(Todo)
+idom.run(Todo)

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

@@ -13,8 +13,8 @@ def reducer(count, action):
 
 
 @idom.element
-def Counter(initial_count):
-    count, dispatch = idom.hooks.use_reducer(reducer, initial_count)
+def Counter():
+    count, dispatch = idom.hooks.use_reducer(reducer, 0)
     return idom.html.div(
         f"Count: {count}",
         idom.html.button({"onClick": lambda event: dispatch("reset")}, "Reset"),
@@ -23,4 +23,4 @@ def Counter(initial_count):
     )
 
 
-display(Counter, 0)
+idom.run(Counter)

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

@@ -20,4 +20,4 @@ def Counter(initial_count):
     )
 
 
-display(Counter, 0)
+idom.run(Counter, 0)

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

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

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

@@ -36,6 +36,23 @@ def run(self):
                 }}
                 .enable-widget-button {{
                     padding: 10px;
+                    color: #ffffff !important;
+                    text-transform: uppercase;
+                    text-decoration: none;
+                    background: #3980b9;
+                    border: 2px solid #3980b9 !important;
+                    transition: all 0.2s ease 0s;
+                    box-shadow: 0 5px 10px grey;
+                }}
+                .enable-widget-button:hover {{
+                    color: #3980b9 !important;
+                    background: #ffffff;
+                    transition: all 0.2s ease 0s;
+                }}
+                .enable-widget-button:focus {{
+                    outline: 0 !important;
+                    transform: scale(0.98);
+                    transition: all 0.2s ease 0s;
                 }}
                 </style>
                 <div>
@@ -48,7 +65,7 @@ def run(self):
 
                         const mount = document.getElementById("{container_id}");
                         const enableWidgetButton = document.createElement("button");
-                        enableWidgetButton.innerHTML = "⚡ Enable Widget ⚡";
+                        enableWidgetButton.innerHTML = "Enable Widget";
                         enableWidgetButton.setAttribute("class", "enable-widget-button")
 
                         enableWidgetButton.addEventListener("click", () => {{