element render functions do not need to be async

add use_async hook to compensate - this isolates async things to effects

Author: rmorshea

README.md

@@ -1,5 +1,8 @@
 # IDOM
 
+<a href="https://github.com/idom-team/idom/actions?query=workflow%3ATest">
+  <img alt="Tests" src="https://github.com/idom-team/idom/workflows/Test/badge.svg?event=push" />
+</a>
 <a href="https://codecov.io/gh/rmorshea/idom">
   <img alt="Code Coverage" src="https://codecov.io/gh/rmorshea/idom/branch/master/graph/badge.svg" />
 </a>
@@ -45,7 +48,7 @@ IDOM can be used to create a simple slideshow which changes whenever a user clic
 import idom
 
 @idom.element
-async def Slideshow():
+def Slideshow():
     index, set_index = idom.hooks.use_state(0)
     url = f"https://picsum.photos/800/300?image={index}"
     return idom.html.img({"src": url, "onClick": lambda event: set_index(index + 1)})

docs/source/core-concepts.rst

@@ -45,7 +45,7 @@ whose body contains a hook usage. We'll demonstrate that with a simple
 
 
     @idom.element
-    async def ClickCount():
+    def ClickCount():
         count, set_count = idom.hooks.use_state(0)
 
         return idom.html.button(
@@ -85,7 +85,7 @@ have to re-render the layout and see what changed:
 
 
     @idom.element
-    async def ClickCount():
+    def ClickCount():
         count, set_count = idom.hooks.use_state(0)
 
         @idom.event(target_id=event_handler_id)  # <-- trick to hard code event handler ID

docs/source/examples.rst

@@ -36,7 +36,7 @@ view. In a Jupyter Notebook it will appear in an output cell. If you're running
         PerClientStateServer(element, *args, **kwargs).run("127.0.0.1", 8765)
 
     @idom.element
-    async def Main(self):
+    def Main(self):
         # define your element here
         ...
 
@@ -52,7 +52,7 @@ view. In a Jupyter Notebook it will appear in an output cell. If you're running
     display = init_display("127.0.0.1")
 
     @idom.element
-    async def MyElement():
+    def MyElement():
         # define your element here
         ...
 

docs/source/examples/click_count.py

@@ -2,7 +2,7 @@
 
 
 @idom.element
-async def ClickCount():
+def ClickCount():
     count, set_count = idom.hooks.use_state(0)
 
     return idom.html.button(

docs/source/examples/custom_chart.py

@@ -19,7 +19,7 @@
 
 
 @idom.element
-async def ShowChartClicks():
+def ShowChartClicks():
     last_event, set_last_event = idom.hooks.use_state({})
     return idom.html.div(
         ClickableChart(

docs/source/examples/matplotlib_plot.py

@@ -7,7 +7,7 @@
 
 
 @idom.element
-async def PolynomialPlot():
+def PolynomialPlot():
     coefficients, set_coefficients = idom.hooks.use_state([0])
 
     x = [n for n in linspace(-1, 1, 50)]
@@ -20,7 +20,7 @@ async def PolynomialPlot():
 
 
 @idom.element
-async def ExpandableNumberInputs(values, set_values):
+def ExpandableNumberInputs(values, set_values):
     inputs = []
     for i in range(len(values)):
 

docs/source/examples/primary_secondary_buttons.py

@@ -18,7 +18,7 @@ def pre_seperated(*args):
 
 
 @idom.element
-async def PrimarySecondaryButtons():
+def PrimarySecondaryButtons():
     state, set_state = idom.hooks.use_state(
         {"message": None, "event": None, "info": None}
     )

docs/source/examples/simple_dashboard.py

@@ -10,7 +10,7 @@
 
 
 @idom.element
-async def RandomWalk():
+def RandomWalk():
     mu = idom.hooks.use_ref(0)
     sigma = idom.hooks.use_ref(1)
 
@@ -39,11 +39,11 @@ async def RandomWalk():
 
 
 @idom.element
-async def RandomWalkGraph(mu, sigma):
+def RandomWalkGraph(mu, sigma):
     interval = use_interval(0.5)
     data, set_data = idom.hooks.use_state([{"x": 0, "y": 0}] * 50)
 
-    @use_async_effect
+    @idom.hooks.use_async
     async def animate():
         await interval
         last_data_point = data[-1]
@@ -57,7 +57,7 @@ async def animate():
 
 
 @idom.element
-async def NumberInput(label, value, set_value_callback, domain):
+def NumberInput(label, value, set_value_callback, domain):
     minimum, maximum, step = domain
     attrs = {"min": minimum, "max": maximum, "step": step}
 
@@ -75,22 +75,14 @@ def update_value(value):
     )
 
 
-def use_async_effect(function):
-    def ensure_effect_future():
-        future = asyncio.ensure_future(function())
-        return future.cancel
+def use_interval(rate: float) -> Awaitable[None]:
+    usage_time = use_ref(time.time())
 
-    idom.hooks.use_effect(ensure_effect_future)
-
-
-def use_interval(rate):
-    usage_time = idom.hooks.use_ref(time.time())
-
-    async def interval():
+    async def interval() -> None:
         await asyncio.sleep(rate - (time.time() - usage_time.current))
         usage_time.current = time.time()
 
-    return interval()
+    return asyncio.ensure_future(interval())
 
 
 display(RandomWalk)

docs/source/examples/slideshow.py

@@ -2,7 +2,7 @@
 
 
 @idom.element
-async def Slideshow():
+def Slideshow():
     index, set_index = idom.hooks.use_state(0)
 
     async def next_image(event):

docs/source/examples/snake_game.py

@@ -14,32 +14,23 @@ class GameState(enum.Enum):
 
 
 @idom.element
-async def GameView(grid_size, block_scale):
+def GameView(grid_size, block_scale):
     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)
 
-    async def start_playing(event):
-        set_game_state(GameState.play)
+    start_button = idom.html.button(
+        {"onClick": lambda event: set_game_state(GameState.play)},
+        "Start",
+    )
 
     if game_state == GameState.won:
-        await asyncio.sleep(1)
-        return idom.html.div(
-            idom.html.h1("You won!"),
-            idom.html.button({"onClick": start_playing}, "Start"),
-        )
+        return idom.html.div(idom.html.h1("You won!"), start_button)
     elif game_state == GameState.lost:
-        await asyncio.sleep(1)
-        return idom.html.div(
-            idom.html.h1("You lost"),
-            idom.html.button({"onClick": start_playing}, "Start"),
-        )
+        return idom.html.div(idom.html.h1("You lost"), start_button)
     else:
-        return idom.html.div(
-            idom.html.h1("Click to play"),
-            idom.html.button({"onClick": start_playing}, "Start"),
-        )
+        return idom.html.div(idom.html.h1("Click to play"), start_button)
 
 
 class Direction(enum.Enum):
@@ -50,7 +41,7 @@ class Direction(enum.Enum):
 
 
 @idom.element
-async def GameLoop(grid_size, block_scale, set_game_state):
+def GameLoop(grid_size, block_scale, set_game_state):
     # we `use_ref` here to capture the latest direction press without any delay
     direction = idom.hooks.use_ref(Direction.ArrowRight.value)
 
@@ -75,17 +66,23 @@ async def on_direction_change(event):
     for location in snake:
         assign_grid_block_color(grid, location, "white")
 
+    new_game_state = None
     if snake[-1] in snake[:-1]:
         assign_grid_block_color(grid, snake[-1], "red")
-        set_game_state(GameState.lost)
+        new_game_state = GameState.lost
     elif len(snake) == grid_size ** 2:
         assign_grid_block_color(grid, snake[-1], "yellow")
-        set_game_state(GameState.won)
+        new_game_state = GameState.won
 
     interval = use_interval(0.5)
 
-    @use_async_effect
+    @idom.hooks.use_async
     async def animate():
+        if new_game_state is not None:
+            await asyncio.sleep(1)
+            set_game_state(new_game_state)
+            return
+
         await interval
 
         new_snake_head = (
@@ -105,31 +102,6 @@ async def animate():
     return grid
 
 
-def use_async_effect(function):
-    def ensure_effect_future():
-        future = asyncio.ensure_future(function())
-
-        def cleanup():
-            if future.done():
-                future.result()
-            else:
-                future.cancel()
-
-        return cleanup
-
-    idom.hooks.use_effect(ensure_effect_future)
-
-
-def use_interval(rate):
-    usage_time = idom.hooks.use_ref(time.time())
-
-    async def interval():
-        await asyncio.sleep(rate - (time.time() - usage_time.current))
-        usage_time.current = time.time()
-
-    return asyncio.ensure_future(interval())
-
-
 def use_snake_food(grid_size, current_snake):
     grid_points = {(x, y) for x in range(grid_size) for y in range(grid_size)}
     points_not_in_snake = grid_points.difference(current_snake)
@@ -142,6 +114,16 @@ def set_food():
     return food, set_food
 
 
+def use_interval(rate: float) -> Awaitable[None]:
+    usage_time = use_ref(time.time())
+
+    async def interval() -> None:
+        await asyncio.sleep(rate - (time.time() - usage_time.current))
+        usage_time.current = time.time()
+
+    return asyncio.ensure_future(interval())
+
+
 def create_grid(grid_size, block_scale):
     return idom.html.div(
         {

docs/source/examples/todo.py

@@ -2,7 +2,7 @@
 
 
 @idom.element
-async def Todo():
+def Todo():
     items, set_items = idom.hooks.use_state([])
 
     async def add_new_task(event):

docs/source/examples/use_reducer_counter.py

@@ -13,7 +13,7 @@ def reducer(count, action):
 
 
 @idom.element
-async def Counter(initial_count):
+def Counter(initial_count):
     count, dispatch = idom.hooks.use_reducer(reducer, initial_count)
     return idom.html.div(
         f"Count: {count}",

docs/source/examples/use_state_counter.py

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

docs/source/getting-started.rst

@@ -10,7 +10,7 @@ Let's look at the example that you may have seen
 
 
     @idom.element
-    async def Slideshow():
+    def Slideshow():
         index, set_index = idom.hooks.use_state(0)
 
         def next_image(event):
@@ -34,7 +34,7 @@ Since it's likely a lot to take in at once, we'll break it down piece by piece:
 .. code-block::
 
    @idom.element
-   async def Slideshow():
+   def Slideshow():
 
 The ``idom.element`` decorator creates an :ref:`Element <Stateful Elements>` constructor
 whose render function is defined by the `asynchronous function`_ below it. To create

docs/source/index.rst

@@ -25,9 +25,9 @@ Libraries for defining and controlling interactive webpages with Python
 Try it Now!
 -----------
 
-- In a Jupyter Notebook - |launch-binder|
+- Using working :ref:`Examples`
 
-- Using working :ref:`examples <Examples>`
+- In a Jupyter Notebook - |launch-binder|
 
 
 Early Days
@@ -48,7 +48,7 @@ user clicks an image:
     import idom
 
     @idom.element
-    async def Slideshow():
+    def Slideshow():
         index, set_index = idom.hooks.use_state(0)
 
         def next_image(event):

docs/source/life-cycle-hooks.rst

@@ -106,7 +106,7 @@ use_effect
 The ``use_effect`` hook accepts a function which may be imperative, or mutate state. The
 function will be called immediately after the layout has fully updated.
 
-Mutations, subscriptions, delayed actions, and other `side effects`_ can cause
+Asynchronous actions, mutations, subscriptions, and other `side effects`_ can cause
 unexpected bugs if placed in the main body of an element's render function. Thus the
 ``use_effect`` hook provides a way to safely escape the purely functional world of
 element render functions.
@@ -272,6 +272,18 @@ hook alongside :ref:`use_effect` or in response to element event handlers.
 :ref:`The Game Snake` provides a good use case for ``use_ref``.
 
 
+**Unique Hooks**
+----------------
+
+Hooks which are specific to IDOM and not present in React.
+
+
+use_async
+---------
+
+...
+
+
 **Rules of Hooks**
 ------------------