finish up responding to events section

Author: rmorshea

docs/examples.py

@@ -41,10 +41,17 @@ def capture_component(component_constructor):
 
     idom.run = capture_component
     try:
-        code = compile(file.read_text(), str(file.absolute()), "exec")
-        exec(code, {"print": capture_print})
+        code = compile(file.read_text(), str(file), "exec")
+        exec(
+            code,
+            {
+                "print": capture_print,
+                "__file__": str(file),
+                "__name__": file.stem,
+            },
+        )
     except Exception:
-        return _make_error_display()
+        return _make_error_display(format_exc())
     finally:
         idom.run = RUN_IDOM
 
@@ -110,9 +117,9 @@ def ExampleDidNotRun():
     return ExampleDidNotRun
 
 
-def _make_error_display():
+def _make_error_display(message):
     @idom.component
     def ShowError():
-        return idom.html.pre(format_exc())
+        return idom.html.pre(message)
 
     return ShowError

docs/source/_examples/audio_player.py renamed to docs/source/_examples/adding_interactivity/audio_player.py

@@ -0,0 +1,23 @@
+import asyncio
+
+from idom import component, html, run
+
+
+@component
+def ButtonWithDelay(message, delay):
+    async def handle_event(event):
+        await asyncio.sleep(delay)
+        print(message)
+
+    return html.button({"onClick": handle_event}, message)
+
+
+@component
+def App():
+    return html.div(
+        ButtonWithDelay("print 3 seconds later", delay=3),
+        ButtonWithDelay("print immediately", delay=0),
+    )
+
+
+run(App)

docs/source/_examples/adding_interactivity/button_async_handlers.py

@@ -0,0 +1,33 @@
+from idom import component, html, run
+
+
+@component
+def Button(display_text, on_click):
+    return html.button({"onClick": on_click}, display_text)
+
+
+@component
+def PlayButton(movie_name):
+    def handle_click(event):
+        print(f"Playing {movie_name}")
+
+    return Button(f"Play {movie_name}", on_click=handle_click)
+
+
+@component
+def FastForwardButton():
+    def handle_click(event):
+        print("Skipping ahead")
+
+    return Button("Fast forward", on_click=handle_click)
+
+
+@component
+def App():
+    return html.div(
+        PlayButton("Buena Vista Social Club"),
+        FastForwardButton(),
+    )
+
+
+run(App)

docs/source/_examples/adding_interactivity/button_handler_as_arg.py

@@ -6,7 +6,7 @@ def Button():
     def handle_event(event):
         print(event)
 
-    return html.button({"onClick": handle_event}, "Print event to terminal")
+    return html.button({"onClick": handle_event}, "Click me!")
 
 
 run(Button)

docs/source/_examples/adding_interactivity/button_prints_event.py

@@ -0,0 +1,20 @@
+from idom import component, html, run
+
+
+@component
+def PrintButton(display_text, message_text):
+    def handle_event(event):
+        print(message_text)
+
+    return html.button({"onClick": handle_event}, display_text)
+
+
+@component
+def App():
+    return html.div(
+        PrintButton("Play", "Playing"),
+        PrintButton("Pause", "Paused"),
+    )
+
+
+run(App)

docs/source/_examples/adding_interactivity/button_prints_message.py

@@ -0,0 +1,18 @@
+from idom import component, event, html, run
+
+
+@component
+def DoNotChangePages():
+    return html.div(
+        html.p("Normally clicking this link would take you to a new page"),
+        html.a(
+            {
+                "onClick": event(lambda event: None, prevent_default=True),
+                "href": "https://google.com",
+            },
+            "https://google.com",
+        ),
+    )
+
+
+run(DoNotChangePages)

docs/source/_examples/adding_interactivity/prevent_default_event_actions.py

@@ -0,0 +1,38 @@
+from idom import component, event, hooks, html, run
+
+
+@component
+def DivInDiv():
+    stop_propagatation, set_stop_propagatation = hooks.use_state(True)
+    inner_count, set_inner_count = hooks.use_state(0)
+    outer_count, set_outer_count = hooks.use_state(0)
+
+    div_in_div = html.div(
+        {
+            "onClick": lambda event: set_outer_count(outer_count + 1),
+            "style": {"height": "100px", "width": "100px", "backgroundColor": "red"},
+        },
+        html.div(
+            {
+                "onClick": event(
+                    lambda event: set_inner_count(inner_count + 1),
+                    stop_propagation=stop_propagatation,
+                ),
+                "style": {"height": "50px", "width": "50px", "backgroundColor": "blue"},
+            },
+        ),
+    )
+
+    return html.div(
+        html.button(
+            {"onClick": lambda event: set_stop_propagatation(not stop_propagatation)},
+            "Toggle Propogation",
+        ),
+        html.pre(f"Will propagate: {not stop_propagatation}"),
+        html.pre(f"Inner click count: {inner_count}"),
+        html.pre(f"Outer click count: {outer_count}"),
+        div_in_div,
+    )
+
+
+run(DivInDiv)

docs/source/_examples/adding_interactivity/stop_event_propagation.py

@@ -1,31 +1,34 @@
 from pathlib import Path
 
-import idom
+from idom import component, run, web
 
 
 file = Path(__file__).parent / "super_simple_chart.js"
-ssc = idom.web.module_from_file("super-simple-chart", file, fallback="⌛")
-SuperSimpleChart = idom.web.export(ssc, "SuperSimpleChart")
+ssc = web.module_from_file("super-simple-chart", file, fallback="⌛")
+SuperSimpleChart = web.export(ssc, "SuperSimpleChart")
 
-idom.run(
-    idom.component(
-        lambda: SuperSimpleChart(
-            {
-                "data": [
-                    {"x": 1, "y": 2},
-                    {"x": 2, "y": 4},
-                    {"x": 3, "y": 7},
-                    {"x": 4, "y": 3},
-                    {"x": 5, "y": 5},
-                    {"x": 6, "y": 9},
-                    {"x": 7, "y": 6},
-                ],
-                "height": 300,
-                "width": 500,
-                "color": "royalblue",
-                "lineWidth": 4,
-                "axisColor": "silver",
-            }
-        )
+
+@component
+def App():
+    print(__name__)
+    return SuperSimpleChart(
+        {
+            "data": [
+                {"x": 1, "y": 2},
+                {"x": 2, "y": 4},
+                {"x": 3, "y": 7},
+                {"x": 4, "y": 3},
+                {"x": 5, "y": 5},
+                {"x": 6, "y": 9},
+                {"x": 7, "y": 6},
+            ],
+            "height": 300,
+            "width": 500,
+            "color": "royalblue",
+            "lineWidth": 4,
+            "axisColor": "silver",
+        }
     )
-)
+
+
+run(App)