How to use idom - 10 common examples

@idom.element(state="grid_size, block_size")
async def GameView(self, grid_size, block_size):
    game = GameState(grid_size, block_size)

    grid_events = game.grid["eventHandlers"]

    @grid_events.on("KeyDown", prevent_default=True)
    async def direction_change(event):
        if hasattr(Directions, event["key"]):
            game.new_direction.set(Directions[event["key"]])

    game.snake.extend(
        [
            (grid_size // 2 - 1, grid_size // 2 - 3),
            (grid_size // 2 - 1, grid_size // 2 - 2),
            (grid_size // 2 - 1, grid_size // 2 - 1),
        ]

async def test_layout_cancels_renders_on_close():
    event_that_is_never_set = asyncio.Event()
    render_is_cancelled = asyncio.Event()

    @idom.element
    async def MyElement(self):
        try:
            await event_that_is_never_set.wait()
        finally:
            render_is_cancelled.set()

    async with idom.Layout(MyElement()):
        await asyncio.sleep(0.1)

    await render_is_cancelled.wait()

def test_input_cast_and_ignore_empty(driver, driver_wait, display):
    # ignore empty since that's an invalid float
    change_occured = Event()

    inp = idom.Input("number", 1, {"id": "inp"}, cast=float, ignore_empty=True)

    @inp.events.on("change")
    async def on_change(event):
        change_occured.set()

    display(inp)

    client_inp = driver.find_element_by_id("inp")
    assert client_inp.get_attribute("value") == "1"

    send_keys(client_inp, Keys.BACKSPACE)
    time.sleep(0.1)  # waiting and deleting again seems to decrease flakiness
    send_keys(client_inp, Keys.BACKSPACE)

    assert change_occured.wait(timeout=3.0)
    assert client_inp.get_attribute("value") == ""

async def ComponentWithMemo():
        location, set_location = idom.hooks.use_state("left")
        memoized_func = idom.hooks.use_lru_cache(function_to_memoize, maxsize=2)
        last_memoized_location = memoized_func(location)

        async def on_left_button_click(event):
            set_location("left")

        async def on_center_button_click(event):
            set_location("center")

        async def on_right_button_click(event):
            set_location("right")

        return idom.html.div(
            idom.html.button(
                {"onClick": on_left_button_click, "id": "left-button"}, "left button"
            ),
            idom.html.button(
                {"onClick": on_center_button_click, "id": "center-button"},
                "center button",
            ),
            idom.html.button(
                {"onClick": on_right_button_click, "id": "right-button"}, "right button"
            ),
            f"Last triggered on click: {last_memoized_location}",
        )

async def Counter(self, count):
        finalize(self, was_garbage_collected.set)
        return idom.html.div({"id": f"count-is-{count}"}, count)

def MyComponentWithChildrenAndAttributes(children, x):
        return idom.html.div({"x": x * 2}, children + ["world"])

def MyComponentWithChildren(children):
        return idom.html.div(children + ["world"])

async def ComponentWithMemo():
        location, set_location = idom.hooks.use_state("left")
        count = idom.hooks.use_memo(function_to_memoize, location)

        async def on_left_button_click(event):
            set_location("left")

        async def on_right_button_click(event):
            set_location("right")

        return idom.html.div(
            idom.html.button(
                {"onClick": on_left_button_click, "id": "left-button"}, "left button"
            ),
            idom.html.button(
                {"onClick": on_right_button_click, "id": "right-button"}, "right button"
            ),
            f"Memo trigger count: {count}",
        )

async def Clickable(self, count=0):
        @idom.event(target_id="an-event")
        async def an_event():
            self.update(count=count + 1)

        return idom.html.div({"anEvent": an_event, "count": count})

async def Button(self):
        async def on_click(event):
            clicked.set(True)
            self.update()

        if not clicked.get():
            return idom.html.button({"onClick": on_click, "id": "click"}, ["Click Me!"])
        else:
            return idom.html.p({"id": "complete"}, ["Complete"])