diff --git a/.github/workflows/.hatch-run.yml b/.github/workflows/.hatch-run.yml index b312869e4..1b21e4202 100644 --- a/.github/workflows/.hatch-run.yml +++ b/.github/workflows/.hatch-run.yml @@ -1,59 +1,59 @@ name: hatch-run on: - workflow_call: - inputs: - job-name: - required: true - type: string - hatch-run: - required: true - type: string - runs-on-array: - required: false - type: string - default: '["ubuntu-latest"]' - python-version-array: - required: false - type: string - default: '["3.x"]' - node-registry-url: - required: false - type: string - default: "" - secrets: - node-auth-token: - required: false - pypi-username: - required: false - pypi-password: - required: false + workflow_call: + inputs: + job-name: + required: true + type: string + hatch-run: + required: true + type: string + runs-on-array: + required: false + type: string + default: '["ubuntu-latest"]' + python-version-array: + required: false + type: string + default: '["3.x"]' + node-registry-url: + required: false + type: string + default: "" + secrets: + node-auth-token: + required: false + pypi-username: + required: false + pypi-password: + required: false jobs: - hatch: - name: ${{ format(inputs.job-name, matrix.python-version, matrix.runs-on) }} - strategy: - matrix: - python-version: ${{ fromJson(inputs.python-version-array) }} - runs-on: ${{ fromJson(inputs.runs-on-array) }} - runs-on: ${{ matrix.runs-on }} - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 - with: - node-version: "14.x" - registry-url: ${{ inputs.node-registry-url }} - - name: Pin NPM Version - run: npm install -g npm@8.19.3 - - name: Use Python ${{ matrix.python-version }} - uses: actions/setup-python@v2 - with: - python-version: ${{ matrix.python-version }} - - name: Install Python Dependencies - run: pip install hatch poetry - - name: Run Scripts - env: - NODE_AUTH_TOKEN: ${{ secrets.node-auth-token }} - PYPI_USERNAME: ${{ secrets.pypi-username }} - PYPI_PASSWORD: ${{ secrets.pypi-password }} - run: hatch run ${{ inputs.hatch-run }} + hatch: + name: ${{ format(inputs.job-name, matrix.python-version, matrix.runs-on) }} + strategy: + matrix: + python-version: ${{ fromJson(inputs.python-version-array) }} + runs-on: ${{ fromJson(inputs.runs-on-array) }} + runs-on: ${{ matrix.runs-on }} + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + with: + node-version: "14.x" + registry-url: ${{ inputs.node-registry-url }} + - name: Pin NPM Version + run: npm install -g npm@8.19.3 + - name: Use Python ${{ matrix.python-version }} + uses: actions/setup-python@v2 + with: + python-version: ${{ matrix.python-version }} + - name: Install Python Dependencies + run: pip install hatch poetry + - name: Run Scripts + env: + NODE_AUTH_TOKEN: ${{ secrets.node-auth-token }} + PYPI_USERNAME: ${{ secrets.pypi-username }} + PYPI_PASSWORD: ${{ secrets.pypi-password }} + run: hatch run ${{ inputs.hatch-run }} diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml index af768579c..d370ea129 100644 --- a/.github/workflows/check.yml +++ b/.github/workflows/check.yml @@ -1,45 +1,48 @@ name: check on: - push: - branches: - - main - pull_request: - branches: - - main - schedule: - - cron: "0 0 * * 0" + push: + branches: + - main + pull_request: + branches: + - main + schedule: + - cron: "0 0 * * 0" jobs: - test-py-cov: - uses: ./.github/workflows/.hatch-run.yml - with: - job-name: "python-{0}" - hatch-run: "test-py" - lint-py: - uses: ./.github/workflows/.hatch-run.yml - with: - job-name: "python-{0}" - hatch-run: "lint-py" - test-py-matrix: - uses: ./.github/workflows/.hatch-run.yml - with: - job-name: "python-{0} {1}" - hatch-run: "test-py --no-cov" - runs-on-array: '["ubuntu-latest", "macos-latest", "windows-latest"]' - python-version-array: '["3.9", "3.10", "3.11"]' - test-docs: - uses: ./.github/workflows/.hatch-run.yml - with: - job-name: "python-{0}" - hatch-run: "test-docs" - test-js: - uses: ./.github/workflows/.hatch-run.yml - with: - job-name: "{1}" - hatch-run: "test-js" - lint-js: - uses: ./.github/workflows/.hatch-run.yml - with: - job-name: "{1}" - hatch-run: "lint-js" + test-py-cov: + uses: ./.github/workflows/.hatch-run.yml + with: + job-name: "python-{0}" + hatch-run: "test-py" + lint-py: + uses: ./.github/workflows/.hatch-run.yml + with: + job-name: "python-{0}" + hatch-run: "lint-py" + test-py-matrix: + uses: ./.github/workflows/.hatch-run.yml + with: + job-name: "python-{0} {1}" + hatch-run: "test-py --no-cov" + runs-on-array: '["ubuntu-latest", "macos-latest", "windows-latest"]' + python-version-array: '["3.9", "3.10", "3.11"]' + test-docs: + uses: ./.github/workflows/.hatch-run.yml + with: + job-name: "python-{0}" + hatch-run: "test-docs" + # as of Dec 2023 lxml does have wheels for 3.12 + # https://bugs.launchpad.net/lxml/+bug/2040440 + python-version-array: '["3.11"]' + test-js: + uses: ./.github/workflows/.hatch-run.yml + with: + job-name: "{1}" + hatch-run: "test-js" + lint-js: + uses: ./.github/workflows/.hatch-run.yml + with: + job-name: "{1}" + hatch-run: "lint-js" diff --git a/docs/source/about/changelog.rst b/docs/source/about/changelog.rst index 32a3df2dc..d874a470f 100644 --- a/docs/source/about/changelog.rst +++ b/docs/source/about/changelog.rst @@ -28,6 +28,12 @@ Unreleased - :pull:`1118` - `module_from_template` is broken with a recent release of `requests` - :pull:`1131` - `module_from_template` did not work when using Flask backend +**Added** + +- :pull:`1165` - Allow concurrent renders of discrete component tree - enable this + experimental feature by setting `REACTPY_ASYNC_RENDERING=true`. This should improve + the overall responsiveness of your app, particularly when handling larger renders + that would otherwise block faster renders from being processed. v1.0.2 ------ diff --git a/src/py/reactpy/pyproject.toml b/src/py/reactpy/pyproject.toml index 87fa7e036..67189808b 100644 --- a/src/py/reactpy/pyproject.toml +++ b/src/py/reactpy/pyproject.toml @@ -45,6 +45,8 @@ starlette = [ sanic = [ "sanic >=21", "sanic-cors", + "tracerite>=1.1.1", + "setuptools", "uvicorn[standard] >=0.19.0", ] fastapi = [ @@ -80,7 +82,7 @@ pre-install-command = "hatch build --hooks-only" dependencies = [ "coverage[toml]>=6.5", "pytest", - "pytest-asyncio>=0.17", + "pytest-asyncio>=0.23", "pytest-mock", "pytest-rerunfailures", "pytest-timeout", diff --git a/src/py/reactpy/reactpy/_option.py b/src/py/reactpy/reactpy/_option.py index 09d0304a9..1db0857e3 100644 --- a/src/py/reactpy/reactpy/_option.py +++ b/src/py/reactpy/reactpy/_option.py @@ -68,6 +68,10 @@ def current(self) -> _O: def current(self, new: _O) -> None: self.set_current(new) + @current.deleter + def current(self) -> None: + self.unset() + def subscribe(self, handler: Callable[[_O], None]) -> Callable[[_O], None]: """Register a callback that will be triggered when this option changes""" if not self.mutable: @@ -123,7 +127,8 @@ def unset(self) -> None: msg = f"{self} cannot be modified after initial load" raise TypeError(msg) old = self.current - delattr(self, "_current") + if hasattr(self, "_current"): + delattr(self, "_current") if self.current != old: for sub_func in self._subscribers: sub_func(self.current) diff --git a/src/py/reactpy/reactpy/backend/hooks.py b/src/py/reactpy/reactpy/backend/hooks.py index 19ad114ed..ee4ce1b5c 100644 --- a/src/py/reactpy/reactpy/backend/hooks.py +++ b/src/py/reactpy/reactpy/backend/hooks.py @@ -4,7 +4,8 @@ from typing import Any from reactpy.backend.types import Connection, Location -from reactpy.core.hooks import Context, create_context, use_context +from reactpy.core.hooks import create_context, use_context +from reactpy.core.types import Context # backend implementations should establish this context at the root of an app ConnectionContext: Context[Connection[Any] | None] = create_context(None) diff --git a/src/py/reactpy/reactpy/config.py b/src/py/reactpy/reactpy/config.py index 8371e6d08..8ea6aed03 100644 --- a/src/py/reactpy/reactpy/config.py +++ b/src/py/reactpy/reactpy/config.py @@ -80,3 +80,11 @@ def boolean(value: str | bool | int) -> bool: validator=float, ) """A default timeout for testing utilities in ReactPy""" + +REACTPY_ASYNC_RENDERING = Option( + "REACTPY_CONCURRENT_RENDERING", + default=False, + mutable=True, + validator=boolean, +) +"""Whether to render components concurrently. This is currently an experimental feature.""" diff --git a/src/py/reactpy/reactpy/core/_life_cycle_hook.py b/src/py/reactpy/reactpy/core/_life_cycle_hook.py new file mode 100644 index 000000000..ea5e6d634 --- /dev/null +++ b/src/py/reactpy/reactpy/core/_life_cycle_hook.py @@ -0,0 +1,245 @@ +from __future__ import annotations + +import logging +from asyncio import Event, Task, create_task, gather +from typing import Any, Callable, Protocol, TypeVar + +from anyio import Semaphore + +from reactpy.core._thread_local import ThreadLocal +from reactpy.core.types import ComponentType, Context, ContextProviderType + +T = TypeVar("T") + + +class EffectFunc(Protocol): + async def __call__(self, stop: Event) -> None: + ... + + +logger = logging.getLogger(__name__) + +_HOOK_STATE: ThreadLocal[list[LifeCycleHook]] = ThreadLocal(list) + + +def current_hook() -> LifeCycleHook: + """Get the current :class:`LifeCycleHook`""" + hook_stack = _HOOK_STATE.get() + if not hook_stack: + msg = "No life cycle hook is active. Are you rendering in a layout?" + raise RuntimeError(msg) + return hook_stack[-1] + + +class LifeCycleHook: + """An object which manages the "life cycle" of a layout component. + + The "life cycle" of a component is the set of events which occur from the time + a component is first rendered until it is removed from the layout. The life cycle + is ultimately driven by the layout itself, but components can "hook" into those + events to perform actions. Components gain access to their own life cycle hook + by calling :func:`current_hook`. They can then perform actions such as: + + 1. Adding state via :meth:`use_state` + 2. Adding effects via :meth:`add_effect` + 3. Setting or getting context providers via + :meth:`LifeCycleHook.set_context_provider` and + :meth:`get_context_provider` respectively. + + Components can request access to their own life cycle events and state through hooks + while :class:`~reactpy.core.proto.LayoutType` objects drive drive the life cycle + forward by triggering events and rendering view changes. + + Example: + + If removed from the complexities of a layout, a very simplified full life cycle + for a single component with no child components would look a bit like this: + + .. testcode:: + + from reactpy.core._life_cycle_hook import LifeCycleHook + from reactpy.core.hooks import current_hook + + # this function will come from a layout implementation + schedule_render = lambda: ... + + # --- start life cycle --- + + hook = LifeCycleHook(schedule_render) + + # --- start render cycle --- + + component = ... + await hook.affect_component_will_render(component) + try: + # render the component + ... + + # the component may access the current hook + assert current_hook() is hook + + # and save state or add effects + current_hook().use_state(lambda: ...) + + async def my_effect(stop_event): + ... + + current_hook().add_effect(my_effect) + finally: + await hook.affect_component_did_render() + + # This should only be called after the full set of changes associated with a + # given render have been completed. + await hook.affect_layout_did_render() + + # Typically an event occurs and a new render is scheduled, thus beginning + # the render cycle anew. + hook.schedule_render() + + + # --- end render cycle --- + + hook.affect_component_will_unmount() + del hook + + # --- end render cycle --- + """ + + __slots__ = ( + "__weakref__", + "_context_providers", + "_current_state_index", + "_effect_funcs", + "_effect_stops", + "_effect_tasks", + "_render_access", + "_rendered_atleast_once", + "_schedule_render_callback", + "_scheduled_render", + "_state", + "component", + ) + + component: ComponentType + + def __init__( + self, + schedule_render: Callable[[], None], + ) -> None: + self._context_providers: dict[Context[Any], ContextProviderType[Any]] = {} + self._schedule_render_callback = schedule_render + self._scheduled_render = False + self._rendered_atleast_once = False + self._current_state_index = 0 + self._state: tuple[Any, ...] = () + self._effect_funcs: list[EffectFunc] = [] + self._effect_tasks: list[Task[None]] = [] + self._effect_stops: list[Event] = [] + self._render_access = Semaphore(1) # ensure only one render at a time + + def schedule_render(self) -> None: + if self._scheduled_render: + return None + try: + self._schedule_render_callback() + except Exception: + msg = f"Failed to schedule render via {self._schedule_render_callback}" + logger.exception(msg) + else: + self._scheduled_render = True + + def use_state(self, function: Callable[[], T]) -> T: + """Add state to this hook + + If this hook has not yet rendered, the state is appended to the state tuple. + Otherwise, the state is retrieved from the tuple. This allows state to be + preserved across renders. + """ + if not self._rendered_atleast_once: + # since we're not initialized yet we're just appending state + result = function() + self._state += (result,) + else: + # once finalized we iterate over each succesively used piece of state + result = self._state[self._current_state_index] + self._current_state_index += 1 + return result + + def add_effect(self, effect_func: EffectFunc) -> None: + """Add an effect to this hook + + A task to run the effect is created when the component is done rendering. + When the component will be unmounted, the event passed to the effect is + triggered and the task is awaited. The effect should eventually halt after + the event is triggered. + """ + self._effect_funcs.append(effect_func) + + def set_context_provider(self, provider: ContextProviderType[Any]) -> None: + """Set a context provider for this hook + + The context provider will be used to provide state to any child components + of this hook's component which request a context provider of the same type. + """ + self._context_providers[provider.type] = provider + + def get_context_provider( + self, context: Context[T] + ) -> ContextProviderType[T] | None: + """Get a context provider for this hook of the given type + + The context provider will have been set by a parent component. If no provider + is found, ``None`` is returned. + """ + return self._context_providers.get(context) + + async def affect_component_will_render(self, component: ComponentType) -> None: + """The component is about to render""" + await self._render_access.acquire() + self._scheduled_render = False + self.component = component + self.set_current() + + async def affect_component_did_render(self) -> None: + """The component completed a render""" + self.unset_current() + self._rendered_atleast_once = True + self._current_state_index = 0 + self._render_access.release() + del self.component + + async def affect_layout_did_render(self) -> None: + """The layout completed a render""" + stop = Event() + self._effect_stops.append(stop) + self._effect_tasks.extend(create_task(e(stop)) for e in self._effect_funcs) + self._effect_funcs.clear() + + async def affect_component_will_unmount(self) -> None: + """The component is about to be removed from the layout""" + for stop in self._effect_stops: + stop.set() + self._effect_stops.clear() + try: + await gather(*self._effect_tasks) + except Exception: + logger.exception("Error in effect") + finally: + self._effect_tasks.clear() + + def set_current(self) -> None: + """Set this hook as the active hook in this thread + + This method is called by a layout before entering the render method + of this hook's associated component. + """ + hook_stack = _HOOK_STATE.get() + if hook_stack: + parent = hook_stack[-1] + self._context_providers.update(parent._context_providers) + hook_stack.append(self) + + def unset_current(self) -> None: + """Unset this hook as the active hook in this thread""" + if _HOOK_STATE.get().pop() is not self: + raise RuntimeError("Hook stack is in an invalid state") # nocov diff --git a/src/py/reactpy/reactpy/core/hooks.py b/src/py/reactpy/reactpy/core/hooks.py index a8334458b..4513dadef 100644 --- a/src/py/reactpy/reactpy/core/hooks.py +++ b/src/py/reactpy/reactpy/core/hooks.py @@ -1,7 +1,7 @@ from __future__ import annotations import asyncio -from collections.abc import Awaitable, Sequence +from collections.abc import Coroutine, Sequence from logging import getLogger from types import FunctionType from typing import ( @@ -9,7 +9,6 @@ Any, Callable, Generic, - NewType, Protocol, TypeVar, cast, @@ -19,8 +18,8 @@ from typing_extensions import TypeAlias from reactpy.config import REACTPY_DEBUG_MODE -from reactpy.core._thread_local import ThreadLocal -from reactpy.core.types import ComponentType, Key, State, VdomDict +from reactpy.core._life_cycle_hook import current_hook +from reactpy.core.types import Context, Key, State, VdomDict from reactpy.utils import Ref if not TYPE_CHECKING: @@ -96,7 +95,9 @@ def dispatch(new: _Type | Callable[[_Type], _Type]) -> None: _EffectCleanFunc: TypeAlias = "Callable[[], None]" _SyncEffectFunc: TypeAlias = "Callable[[], _EffectCleanFunc | None]" -_AsyncEffectFunc: TypeAlias = "Callable[[], Awaitable[_EffectCleanFunc | None]]" +_AsyncEffectFunc: TypeAlias = ( + "Callable[[], Coroutine[None, None, _EffectCleanFunc | None]]" +) _EffectApplyFunc: TypeAlias = "_SyncEffectFunc | _AsyncEffectFunc" @@ -147,25 +148,30 @@ def add_effect(function: _EffectApplyFunc) -> None: async_function = cast(_AsyncEffectFunc, function) def sync_function() -> _EffectCleanFunc | None: - future = asyncio.ensure_future(async_function()) + task = asyncio.create_task(async_function()) def clean_future() -> None: - if not future.cancel(): - clean = future.result() - if clean is not None: - clean() + if not task.cancel(): + try: + clean = task.result() + except asyncio.CancelledError: + pass + else: + if clean is not None: + clean() return clean_future - def effect() -> None: + async def effect(stop: asyncio.Event) -> None: if last_clean_callback.current is not None: last_clean_callback.current() - + last_clean_callback.current = None clean = last_clean_callback.current = sync_function() + await stop.wait() if clean is not None: - hook.add_effect(COMPONENT_WILL_UNMOUNT_EFFECT, clean) + clean() - return memoize(lambda: hook.add_effect(LAYOUT_DID_RENDER_EFFECT, effect)) + return memoize(lambda: hook.add_effect(effect)) if function is not None: add_effect(function) @@ -212,8 +218,8 @@ def context( *children: Any, value: _Type = default_value, key: Key | None = None, - ) -> ContextProvider[_Type]: - return ContextProvider( + ) -> _ContextProvider[_Type]: + return _ContextProvider( *children, value=value, key=key, @@ -225,18 +231,6 @@ def context( return context -class Context(Protocol[_Type]): - """Returns a :class:`ContextProvider` component""" - - def __call__( - self, - *children: Any, - value: _Type = ..., - key: Key | None = ..., - ) -> ContextProvider[_Type]: - ... - - def use_context(context: Context[_Type]) -> _Type: """Get the current value for the given context type. @@ -255,10 +249,10 @@ def use_context(context: Context[_Type]) -> _Type: raise TypeError(f"{context} has no 'value' kwarg") # nocov return cast(_Type, context.__kwdefaults__["value"]) - return provider._value + return provider.value -class ContextProvider(Generic[_Type]): +class _ContextProvider(Generic[_Type]): def __init__( self, *children: Any, @@ -269,14 +263,14 @@ def __init__( self.children = children self.key = key self.type = type - self._value = value + self.value = value def render(self) -> VdomDict: current_hook().set_context_provider(self) return {"tagName": "", "children": self.children} def __repr__(self) -> str: - return f"{type(self).__name__}({self.type})" + return f"ContextProvider({self.type})" _ActionType = TypeVar("_ActionType") @@ -495,231 +489,6 @@ def _try_to_infer_closure_values( return values -def current_hook() -> LifeCycleHook: - """Get the current :class:`LifeCycleHook`""" - hook_stack = _hook_stack.get() - if not hook_stack: - msg = "No life cycle hook is active. Are you rendering in a layout?" - raise RuntimeError(msg) - return hook_stack[-1] - - -_hook_stack: ThreadLocal[list[LifeCycleHook]] = ThreadLocal(list) - - -EffectType = NewType("EffectType", str) -"""Used in :meth:`LifeCycleHook.add_effect` to indicate what effect should be saved""" - -COMPONENT_DID_RENDER_EFFECT = EffectType("COMPONENT_DID_RENDER") -"""An effect that will be triggered each time a component renders""" - -LAYOUT_DID_RENDER_EFFECT = EffectType("LAYOUT_DID_RENDER") -"""An effect that will be triggered each time a layout renders""" - -COMPONENT_WILL_UNMOUNT_EFFECT = EffectType("COMPONENT_WILL_UNMOUNT") -"""An effect that will be triggered just before the component is unmounted""" - - -class LifeCycleHook: - """Defines the life cycle of a layout component. - - Components can request access to their own life cycle events and state through hooks - while :class:`~reactpy.core.proto.LayoutType` objects drive drive the life cycle - forward by triggering events and rendering view changes. - - Example: - - If removed from the complexities of a layout, a very simplified full life cycle - for a single component with no child components would look a bit like this: - - .. testcode:: - - from reactpy.core.hooks import ( - current_hook, - LifeCycleHook, - COMPONENT_DID_RENDER_EFFECT, - ) - - - # this function will come from a layout implementation - schedule_render = lambda: ... - - # --- start life cycle --- - - hook = LifeCycleHook(schedule_render) - - # --- start render cycle --- - - hook.affect_component_will_render(...) - - hook.set_current() - - try: - # render the component - ... - - # the component may access the current hook - assert current_hook() is hook - - # and save state or add effects - current_hook().use_state(lambda: ...) - current_hook().add_effect(COMPONENT_DID_RENDER_EFFECT, lambda: ...) - finally: - hook.unset_current() - - hook.affect_component_did_render() - - # This should only be called after the full set of changes associated with a - # given render have been completed. - hook.affect_layout_did_render() - - # Typically an event occurs and a new render is scheduled, thus beginning - # the render cycle anew. - hook.schedule_render() - - - # --- end render cycle --- - - hook.affect_component_will_unmount() - del hook - - # --- end render cycle --- - """ - - __slots__ = ( - "__weakref__", - "_context_providers", - "_current_state_index", - "_event_effects", - "_is_rendering", - "_rendered_atleast_once", - "_schedule_render_callback", - "_schedule_render_later", - "_state", - "component", - ) - - component: ComponentType - - def __init__( - self, - schedule_render: Callable[[], None], - ) -> None: - self._context_providers: dict[Context[Any], ContextProvider[Any]] = {} - self._schedule_render_callback = schedule_render - self._schedule_render_later = False - self._is_rendering = False - self._rendered_atleast_once = False - self._current_state_index = 0 - self._state: tuple[Any, ...] = () - self._event_effects: dict[EffectType, list[Callable[[], None]]] = { - COMPONENT_DID_RENDER_EFFECT: [], - LAYOUT_DID_RENDER_EFFECT: [], - COMPONENT_WILL_UNMOUNT_EFFECT: [], - } - - def schedule_render(self) -> None: - if self._is_rendering: - self._schedule_render_later = True - else: - self._schedule_render() - - def use_state(self, function: Callable[[], _Type]) -> _Type: - if not self._rendered_atleast_once: - # since we're not initialized yet we're just appending state - result = function() - self._state += (result,) - else: - # once finalized we iterate over each succesively used piece of state - result = self._state[self._current_state_index] - self._current_state_index += 1 - return result - - def add_effect(self, effect_type: EffectType, function: Callable[[], None]) -> None: - """Trigger a function on the occurrence of the given effect type""" - self._event_effects[effect_type].append(function) - - def set_context_provider(self, provider: ContextProvider[Any]) -> None: - self._context_providers[provider.type] = provider - - def get_context_provider( - self, context: Context[_Type] - ) -> ContextProvider[_Type] | None: - return self._context_providers.get(context) - - def affect_component_will_render(self, component: ComponentType) -> None: - """The component is about to render""" - self.component = component - - self._is_rendering = True - self._event_effects[COMPONENT_WILL_UNMOUNT_EFFECT].clear() - - def affect_component_did_render(self) -> None: - """The component completed a render""" - del self.component - - component_did_render_effects = self._event_effects[COMPONENT_DID_RENDER_EFFECT] - for effect in component_did_render_effects: - try: - effect() - except Exception: - logger.exception(f"Component post-render effect {effect} failed") - component_did_render_effects.clear() - - self._is_rendering = False - self._rendered_atleast_once = True - self._current_state_index = 0 - - def affect_layout_did_render(self) -> None: - """The layout completed a render""" - layout_did_render_effects = self._event_effects[LAYOUT_DID_RENDER_EFFECT] - for effect in layout_did_render_effects: - try: - effect() - except Exception: - logger.exception(f"Layout post-render effect {effect} failed") - layout_did_render_effects.clear() - - if self._schedule_render_later: - self._schedule_render() - self._schedule_render_later = False - - def affect_component_will_unmount(self) -> None: - """The component is about to be removed from the layout""" - will_unmount_effects = self._event_effects[COMPONENT_WILL_UNMOUNT_EFFECT] - for effect in will_unmount_effects: - try: - effect() - except Exception: - logger.exception(f"Pre-unmount effect {effect} failed") - will_unmount_effects.clear() - - def set_current(self) -> None: - """Set this hook as the active hook in this thread - - This method is called by a layout before entering the render method - of this hook's associated component. - """ - hook_stack = _hook_stack.get() - if hook_stack: - parent = hook_stack[-1] - self._context_providers.update(parent._context_providers) - hook_stack.append(self) - - def unset_current(self) -> None: - """Unset this hook as the active hook in this thread""" - if _hook_stack.get().pop() is not self: - raise RuntimeError("Hook stack is in an invalid state") # nocov - - def _schedule_render(self) -> None: - try: - self._schedule_render_callback() - except Exception: - logger.exception( - f"Failed to schedule render via {self._schedule_render_callback}" - ) - - def strictly_equal(x: Any, y: Any) -> bool: """Check if two values are identical or, for a limited set or types, equal. diff --git a/src/py/reactpy/reactpy/core/layout.py b/src/py/reactpy/reactpy/core/layout.py index 3252ba75c..d59ab31eb 100644 --- a/src/py/reactpy/reactpy/core/layout.py +++ b/src/py/reactpy/reactpy/core/layout.py @@ -1,10 +1,18 @@ from __future__ import annotations import abc -import asyncio +from asyncio import ( + FIRST_COMPLETED, + CancelledError, + Queue, + Task, + create_task, + get_running_loop, + wait, +) from collections import Counter from collections.abc import Iterator -from contextlib import ExitStack +from contextlib import AsyncExitStack from logging import getLogger from typing import ( Any, @@ -18,8 +26,14 @@ from uuid import uuid4 from weakref import ref as weakref -from reactpy.config import REACTPY_CHECK_VDOM_SPEC, REACTPY_DEBUG_MODE -from reactpy.core.hooks import LifeCycleHook +from anyio import Semaphore + +from reactpy.config import ( + REACTPY_ASYNC_RENDERING, + REACTPY_CHECK_VDOM_SPEC, + REACTPY_DEBUG_MODE, +) +from reactpy.core._life_cycle_hook import LifeCycleHook from reactpy.core.types import ( ComponentType, EventHandlerDict, @@ -41,6 +55,8 @@ class Layout: "root", "_event_handlers", "_rendering_queue", + "_render_tasks", + "_render_tasks_ready", "_root_life_cycle_state_id", "_model_states_by_life_cycle_state_id", ) @@ -58,21 +74,30 @@ def __init__(self, root: ComponentType) -> None: async def __aenter__(self) -> Layout: # create attributes here to avoid access before entering context manager self._event_handlers: EventHandlerDict = {} + self._render_tasks: set[Task[LayoutUpdateMessage]] = set() + self._render_tasks_ready: Semaphore = Semaphore(0) self._rendering_queue: _ThreadSafeQueue[_LifeCycleStateId] = _ThreadSafeQueue() - root_model_state = _new_root_model_state(self.root, self._rendering_queue.put) + root_model_state = _new_root_model_state(self.root, self._schedule_render_task) self._root_life_cycle_state_id = root_id = root_model_state.life_cycle_state.id - self._rendering_queue.put(root_id) - self._model_states_by_life_cycle_state_id = {root_id: root_model_state} + self._schedule_render_task(root_id) return self async def __aexit__(self, *exc: Any) -> None: root_csid = self._root_life_cycle_state_id root_model_state = self._model_states_by_life_cycle_state_id[root_csid] - self._unmount_model_states([root_model_state]) + + for t in self._render_tasks: + t.cancel() + try: + await t + except CancelledError: + pass + + await self._unmount_model_states([root_model_state]) # delete attributes here to avoid access after exiting context manager del self._event_handlers @@ -100,6 +125,12 @@ async def deliver(self, event: LayoutEventMessage) -> None: ) async def render(self) -> LayoutUpdateMessage: + if REACTPY_ASYNC_RENDERING.current: + return await self._concurrent_render() + else: # nocov + return await self._serial_render() + + async def _serial_render(self) -> LayoutUpdateMessage: # nocov """Await the next available render. This will block until a component is updated""" while True: model_state_id = await self._rendering_queue.get() @@ -111,19 +142,27 @@ async def render(self) -> LayoutUpdateMessage: f"{model_state_id!r} - component already unmounted" ) else: - update = self._create_layout_update(model_state) - if REACTPY_CHECK_VDOM_SPEC.current: - root_id = self._root_life_cycle_state_id - root_model = self._model_states_by_life_cycle_state_id[root_id] - validate_vdom_json(root_model.model.current) - return update - - def _create_layout_update(self, old_state: _ModelState) -> LayoutUpdateMessage: + return await self._create_layout_update(model_state) + + async def _concurrent_render(self) -> LayoutUpdateMessage: + """Await the next available render. This will block until a component is updated""" + await self._render_tasks_ready.acquire() + done, _ = await wait(self._render_tasks, return_when=FIRST_COMPLETED) + update_task: Task[LayoutUpdateMessage] = done.pop() + self._render_tasks.remove(update_task) + return update_task.result() + + async def _create_layout_update( + self, old_state: _ModelState + ) -> LayoutUpdateMessage: new_state = _copy_component_model_state(old_state) component = new_state.life_cycle_state.component - with ExitStack() as exit_stack: - self._render_component(exit_stack, old_state, new_state, component) + async with AsyncExitStack() as exit_stack: + await self._render_component(exit_stack, old_state, new_state, component) + + if REACTPY_CHECK_VDOM_SPEC.current: + validate_vdom_json(new_state.model.current) return { "type": "layout-update", @@ -131,9 +170,9 @@ def _create_layout_update(self, old_state: _ModelState) -> LayoutUpdateMessage: "model": new_state.model.current, } - def _render_component( + async def _render_component( self, - exit_stack: ExitStack, + exit_stack: AsyncExitStack, old_state: _ModelState | None, new_state: _ModelState, component: ComponentType, @@ -143,9 +182,8 @@ def _render_component( self._model_states_by_life_cycle_state_id[life_cycle_state.id] = new_state - life_cycle_hook.affect_component_will_render(component) - exit_stack.callback(life_cycle_hook.affect_layout_did_render) - life_cycle_hook.set_current() + await life_cycle_hook.affect_component_will_render(component) + exit_stack.push_async_callback(life_cycle_hook.affect_layout_did_render) try: raw_model = component.render() # wrap the model in a fragment (i.e. tagName="") to ensure components have @@ -154,7 +192,7 @@ def _render_component( wrapper_model: VdomDict = {"tagName": ""} if raw_model is not None: wrapper_model["children"] = [raw_model] - self._render_model(exit_stack, old_state, new_state, wrapper_model) + await self._render_model(exit_stack, old_state, new_state, wrapper_model) except Exception as error: logger.exception(f"Failed to render {component}") new_state.model.current = { @@ -166,8 +204,7 @@ def _render_component( ), } finally: - life_cycle_hook.unset_current() - life_cycle_hook.affect_component_did_render() + await life_cycle_hook.affect_component_did_render() try: parent = new_state.parent @@ -188,9 +225,9 @@ def _render_component( ], } - def _render_model( + async def _render_model( self, - exit_stack: ExitStack, + exit_stack: AsyncExitStack, old_state: _ModelState | None, new_state: _ModelState, raw_model: Any, @@ -205,7 +242,7 @@ def _render_model( if "importSource" in raw_model: new_state.model.current["importSource"] = raw_model["importSource"] self._render_model_attributes(old_state, new_state, raw_model) - self._render_model_children( + await self._render_model_children( exit_stack, old_state, new_state, raw_model.get("children", []) ) @@ -272,9 +309,9 @@ def _render_model_event_handlers_without_old_state( return None - def _render_model_children( + async def _render_model_children( self, - exit_stack: ExitStack, + exit_stack: AsyncExitStack, old_state: _ModelState | None, new_state: _ModelState, raw_children: Any, @@ -284,12 +321,12 @@ def _render_model_children( if old_state is None: if raw_children: - self._render_model_children_without_old_state( + await self._render_model_children_without_old_state( exit_stack, new_state, raw_children ) return None elif not raw_children: - self._unmount_model_states(list(old_state.children_by_key.values())) + await self._unmount_model_states(list(old_state.children_by_key.values())) return None child_type_key_tuples = list(_process_child_type_and_key(raw_children)) @@ -303,7 +340,7 @@ def _render_model_children( old_keys = set(old_state.children_by_key).difference(new_keys) if old_keys: - self._unmount_model_states( + await self._unmount_model_states( [old_state.children_by_key[key] for key in old_keys] ) @@ -319,7 +356,7 @@ def _render_model_children( key, ) elif old_child_state.is_component_state: - self._unmount_model_states([old_child_state]) + await self._unmount_model_states([old_child_state]) new_child_state = _make_element_model_state( new_state, index, @@ -332,7 +369,9 @@ def _render_model_children( new_state, index, ) - self._render_model(exit_stack, old_child_state, new_child_state, child) + await self._render_model( + exit_stack, old_child_state, new_child_state, child + ) new_state.append_child(new_child_state.model.current) new_state.children_by_key[key] = new_child_state elif child_type is _COMPONENT_TYPE: @@ -344,19 +383,19 @@ def _render_model_children( index, key, child, - self._rendering_queue.put, + self._schedule_render_task, ) elif old_child_state.is_component_state and ( old_child_state.life_cycle_state.component.type != child.type ): - self._unmount_model_states([old_child_state]) + await self._unmount_model_states([old_child_state]) old_child_state = None new_child_state = _make_component_model_state( new_state, index, key, child, - self._rendering_queue.put, + self._schedule_render_task, ) else: new_child_state = _update_component_model_state( @@ -364,20 +403,20 @@ def _render_model_children( new_state, index, child, - self._rendering_queue.put, + self._schedule_render_task, ) - self._render_component( + await self._render_component( exit_stack, old_child_state, new_child_state, child ) else: old_child_state = old_state.children_by_key.get(key) if old_child_state is not None: - self._unmount_model_states([old_child_state]) + await self._unmount_model_states([old_child_state]) new_state.append_child(child) - def _render_model_children_without_old_state( + async def _render_model_children_without_old_state( self, - exit_stack: ExitStack, + exit_stack: AsyncExitStack, new_state: _ModelState, raw_children: list[Any], ) -> None: @@ -394,18 +433,18 @@ def _render_model_children_without_old_state( for index, (child, child_type, key) in enumerate(child_type_key_tuples): if child_type is _DICT_TYPE: child_state = _make_element_model_state(new_state, index, key) - self._render_model(exit_stack, None, child_state, child) + await self._render_model(exit_stack, None, child_state, child) new_state.append_child(child_state.model.current) new_state.children_by_key[key] = child_state elif child_type is _COMPONENT_TYPE: child_state = _make_component_model_state( - new_state, index, key, child, self._rendering_queue.put + new_state, index, key, child, self._schedule_render_task ) - self._render_component(exit_stack, None, child_state, child) + await self._render_component(exit_stack, None, child_state, child) else: new_state.append_child(child) - def _unmount_model_states(self, old_states: list[_ModelState]) -> None: + async def _unmount_model_states(self, old_states: list[_ModelState]) -> None: to_unmount = old_states[::-1] # unmount in reversed order of rendering while to_unmount: model_state = to_unmount.pop() @@ -416,10 +455,25 @@ def _unmount_model_states(self, old_states: list[_ModelState]) -> None: if model_state.is_component_state: life_cycle_state = model_state.life_cycle_state del self._model_states_by_life_cycle_state_id[life_cycle_state.id] - life_cycle_state.hook.affect_component_will_unmount() + await life_cycle_state.hook.affect_component_will_unmount() to_unmount.extend(model_state.children_by_key.values()) + def _schedule_render_task(self, lcs_id: _LifeCycleStateId) -> None: + if not REACTPY_ASYNC_RENDERING.current: + self._rendering_queue.put(lcs_id) + return None + try: + model_state = self._model_states_by_life_cycle_state_id[lcs_id] + except KeyError: + logger.debug( + "Did not render component with model state ID " + f"{lcs_id!r} - component already unmounted" + ) + else: + self._render_tasks.add(create_task(self._create_layout_update(model_state))) + self._render_tasks_ready.release() + def __repr__(self) -> str: return f"{type(self).__name__}({self.root})" @@ -538,6 +592,7 @@ class _ModelState: __slots__ = ( "__weakref__", "_parent_ref", + "_render_semaphore", "children_by_key", "index", "key", @@ -649,11 +704,9 @@ class _LifeCycleState(NamedTuple): class _ThreadSafeQueue(Generic[_Type]): - __slots__ = "_loop", "_queue", "_pending" - def __init__(self) -> None: - self._loop = asyncio.get_running_loop() - self._queue: asyncio.Queue[_Type] = asyncio.Queue() + self._loop = get_running_loop() + self._queue: Queue[_Type] = Queue() self._pending: set[_Type] = set() def put(self, value: _Type) -> None: @@ -662,10 +715,7 @@ def put(self, value: _Type) -> None: self._loop.call_soon_threadsafe(self._queue.put_nowait, value) async def get(self) -> _Type: - while True: - value = await self._queue.get() - if value in self._pending: - break + value = await self._queue.get() self._pending.remove(value) return value diff --git a/src/py/reactpy/reactpy/core/types.py b/src/py/reactpy/reactpy/core/types.py index 194706c6e..e5a81814f 100644 --- a/src/py/reactpy/reactpy/core/types.py +++ b/src/py/reactpy/reactpy/core/types.py @@ -233,3 +233,26 @@ class LayoutEventMessage(TypedDict): """The ID of the event handler.""" data: Sequence[Any] """A list of event data passed to the event handler.""" + + +class Context(Protocol[_Type]): + """Returns a :class:`ContextProvider` component""" + + def __call__( + self, + *children: Any, + value: _Type = ..., + key: Key | None = ..., + ) -> ContextProviderType[_Type]: + ... + + +class ContextProviderType(ComponentType, Protocol[_Type]): + """A component which provides a context value to its children""" + + type: Context[_Type] + """The context type""" + + @property + def value(self) -> _Type: + "Current context value" diff --git a/src/py/reactpy/reactpy/testing/common.py b/src/py/reactpy/reactpy/testing/common.py index 6d126fd2e..c1eb18ba5 100644 --- a/src/py/reactpy/reactpy/testing/common.py +++ b/src/py/reactpy/reactpy/testing/common.py @@ -13,8 +13,8 @@ from typing_extensions import ParamSpec from reactpy.config import REACTPY_TESTING_DEFAULT_TIMEOUT, REACTPY_WEB_MODULES_DIR +from reactpy.core._life_cycle_hook import LifeCycleHook, current_hook from reactpy.core.events import EventHandler, to_event_handler_function -from reactpy.core.hooks import LifeCycleHook, current_hook def clear_reactpy_web_modules_dir() -> None: @@ -67,7 +67,7 @@ async def until( break elif (time.time() - started_at) > timeout: # nocov msg = f"Expected {description} after {timeout} seconds - last value was {result!r}" - raise TimeoutError(msg) + raise asyncio.TimeoutError(msg) async def until_is( self, diff --git a/src/py/reactpy/reactpy/types.py b/src/py/reactpy/reactpy/types.py index 4766fe801..1ac04395a 100644 --- a/src/py/reactpy/reactpy/types.py +++ b/src/py/reactpy/reactpy/types.py @@ -6,10 +6,10 @@ from reactpy.backend.types import BackendType, Connection, Location from reactpy.core.component import Component -from reactpy.core.hooks import Context from reactpy.core.types import ( ComponentConstructor, ComponentType, + Context, EventHandlerDict, EventHandlerFunc, EventHandlerMapping, diff --git a/src/py/reactpy/tests/conftest.py b/src/py/reactpy/tests/conftest.py index 21b23c12e..743d67f02 100644 --- a/src/py/reactpy/tests/conftest.py +++ b/src/py/reactpy/tests/conftest.py @@ -8,14 +8,18 @@ from _pytest.config.argparsing import Parser from playwright.async_api import async_playwright -from reactpy.config import REACTPY_TESTING_DEFAULT_TIMEOUT +from reactpy.config import ( + REACTPY_ASYNC_RENDERING, + REACTPY_TESTING_DEFAULT_TIMEOUT, +) from reactpy.testing import ( BackendFixture, DisplayFixture, capture_reactpy_logs, clear_reactpy_web_modules_dir, ) -from tests.tooling.loop import open_event_loop + +REACTPY_ASYNC_RENDERING.current = True def pytest_addoption(parser: Parser) -> None: @@ -33,13 +37,13 @@ async def display(server, page): yield display -@pytest.fixture(scope="session") +@pytest.fixture async def server(): async with BackendFixture() as server: yield server -@pytest.fixture(scope="session") +@pytest.fixture async def page(browser): pg = await browser.new_page() pg.set_default_timeout(REACTPY_TESTING_DEFAULT_TIMEOUT.current * 1000) @@ -49,18 +53,18 @@ async def page(browser): await pg.close() -@pytest.fixture(scope="session") +@pytest.fixture async def browser(pytestconfig: Config): async with async_playwright() as pw: yield await pw.chromium.launch(headless=not bool(pytestconfig.option.headed)) @pytest.fixture(scope="session") -def event_loop(): +def event_loop_policy(): if os.name == "nt": # nocov - asyncio.set_event_loop_policy(asyncio.WindowsProactorEventLoopPolicy()) - with open_event_loop() as loop: - yield loop + return asyncio.WindowsProactorEventLoopPolicy() + else: + return asyncio.DefaultEventLoopPolicy() @pytest.fixture(autouse=True) diff --git a/src/py/reactpy/tests/test_backend/test_all.py b/src/py/reactpy/tests/test_backend/test_all.py index d697e5d3f..dc8ec1284 100644 --- a/src/py/reactpy/tests/test_backend/test_all.py +++ b/src/py/reactpy/tests/test_backend/test_all.py @@ -14,7 +14,6 @@ @pytest.fixture( params=[*list(all_implementations()), default_implementation], ids=lambda imp: imp.__name__, - scope="module", ) async def display(page, request): imp: BackendType = request.param diff --git a/src/py/reactpy/tests/test_client.py b/src/py/reactpy/tests/test_client.py index 3c7250e48..a9ff10a89 100644 --- a/src/py/reactpy/tests/test_client.py +++ b/src/py/reactpy/tests/test_client.py @@ -30,6 +30,11 @@ def SomeComponent(): ), ) + async def get_count(): + # need to refetch element because may unmount on reconnect + count = await page.wait_for_selector("#count") + return await count.get_attribute("data-count") + async with AsyncExitStack() as exit_stack: server = await exit_stack.enter_async_context(BackendFixture(port=port)) display = await exit_stack.enter_async_context( @@ -38,11 +43,10 @@ def SomeComponent(): await display.show(SomeComponent) - count = await page.wait_for_selector("#count") incr = await page.wait_for_selector("#incr") for i in range(3): - assert (await count.get_attribute("data-count")) == str(i) + await poll(get_count).until_equals(str(i)) await incr.click() # the server is disconnected but the last view state is still shown @@ -57,13 +61,7 @@ def SomeComponent(): # use mount instead of show to avoid a page refresh display.backend.mount(SomeComponent) - async def get_count(): - # need to refetch element because may unmount on reconnect - count = await page.wait_for_selector("#count") - return await count.get_attribute("data-count") - for i in range(3): - # it may take a moment for the websocket to reconnect so need to poll await poll(get_count).until_equals(str(i)) # need to refetch element because may unmount on reconnect @@ -98,11 +96,15 @@ def ButtonWithChangingColor(): button = await display.page.wait_for_selector("#my-button") - assert (await _get_style(button))["background-color"] == "red" + await poll(_get_style, button).until( + lambda style: style["background-color"] == "red" + ) for color in ["blue", "red"] * 2: await button.click() - assert (await _get_style(button))["background-color"] == color + await poll(_get_style, button).until( + lambda style, c=color: style["background-color"] == c + ) async def _get_style(element): diff --git a/src/py/reactpy/tests/test_core/test_hooks.py b/src/py/reactpy/tests/test_core/test_hooks.py index 453d07c99..fa6acafd1 100644 --- a/src/py/reactpy/tests/test_core/test_hooks.py +++ b/src/py/reactpy/tests/test_core/test_hooks.py @@ -5,12 +5,8 @@ import reactpy from reactpy import html from reactpy.config import REACTPY_DEBUG_MODE -from reactpy.core.hooks import ( - COMPONENT_DID_RENDER_EFFECT, - LifeCycleHook, - current_hook, - strictly_equal, -) +from reactpy.core._life_cycle_hook import LifeCycleHook +from reactpy.core.hooks import strictly_equal, use_effect from reactpy.core.layout import Layout from reactpy.testing import DisplayFixture, HookCatcher, assert_reactpy_did_log, poll from reactpy.testing.logs import assert_reactpy_did_not_log @@ -32,10 +28,15 @@ def SimpleComponentWithHook(): async def test_simple_stateful_component(): + index = 0 + + def set_index(x): + return None + @reactpy.component def SimpleStatefulComponent(): + nonlocal index, set_index index, set_index = reactpy.hooks.use_state(0) - set_index(index + 1) return reactpy.html.div(index) sse = SimpleStatefulComponent() @@ -49,6 +50,7 @@ def SimpleStatefulComponent(): "children": [{"tagName": "div", "children": ["0"]}], }, ) + set_index(index + 1) update_2 = await layout.render() assert update_2 == update_message( @@ -58,6 +60,7 @@ def SimpleStatefulComponent(): "children": [{"tagName": "div", "children": ["1"]}], }, ) + set_index(index + 1) update_3 = await layout.render() assert update_3 == update_message( @@ -278,18 +281,18 @@ def double_set_state(event): first = await display.page.wait_for_selector("#first") second = await display.page.wait_for_selector("#second") - assert (await first.get_attribute("data-value")) == "0" - assert (await second.get_attribute("data-value")) == "0" + await poll(first.get_attribute, "data-value").until_equals("0") + await poll(second.get_attribute, "data-value").until_equals("0") await button.click() - assert (await first.get_attribute("data-value")) == "1" - assert (await second.get_attribute("data-value")) == "1" + await poll(first.get_attribute, "data-value").until_equals("1") + await poll(second.get_attribute, "data-value").until_equals("1") await button.click() - assert (await first.get_attribute("data-value")) == "2" - assert (await second.get_attribute("data-value")) == "2" + await poll(first.get_attribute, "data-value").until_equals("2") + await poll(second.get_attribute, "data-value").until_equals("2") async def test_use_effect_callback_occurs_after_full_render_is_complete(): @@ -562,7 +565,7 @@ def bad_effect(): return reactpy.html.div() - with assert_reactpy_did_log(match_message=r"Layout post-render effect .* failed"): + with assert_reactpy_did_log(match_message=r"Error in effect"): async with reactpy.Layout(ComponentWithEffect()) as layout: await layout.render() # no error @@ -588,7 +591,7 @@ def bad_cleanup(): return reactpy.html.div() with assert_reactpy_did_log( - match_message=r"Pre-unmount effect .*? failed", + match_message=r"Error in effect", error_type=ValueError, ): async with reactpy.Layout(OuterComponent()) as layout: @@ -1007,7 +1010,7 @@ def bad_effect(): return reactpy.html.div() with assert_reactpy_did_log( - match_message=r"post-render effect .*? failed", + match_message=r"Error in effect", error_type=ValueError, match_error="The error message", ): @@ -1030,13 +1033,15 @@ def SetStateDuringRender(): async with Layout(SetStateDuringRender()) as layout: await layout.render() - assert render_count.current == 1 - await layout.render() - assert render_count.current == 2 - # there should be no more renders to perform - with pytest.raises(asyncio.TimeoutError): - await asyncio.wait_for(layout.render(), timeout=0.1) + # we expect a second render to be triggered in the background + await poll(lambda: render_count.current).until_equals(2) + + # give an opportunity for a render to happen if it were to. + await asyncio.sleep(0.1) + + # however, we don't expect any more renders + assert render_count.current == 2 @pytest.mark.skipif(not REACTPY_DEBUG_MODE.current, reason="only logs in debug mode") @@ -1240,16 +1245,17 @@ async def test_error_in_component_effect_cleanup_is_gracefully_handled(): @reactpy.component @component_hook.capture def ComponentWithEffect(): - hook = current_hook() + @use_effect + def effect(): + def bad_cleanup(): + raise ValueError("The error message") - def bad_effect(): - raise ValueError("The error message") + return bad_cleanup - hook.add_effect(COMPONENT_DID_RENDER_EFFECT, bad_effect) return reactpy.html.div() with assert_reactpy_did_log( - match_message="Component post-render effect .*? failed", + match_message="Error in effect", error_type=ValueError, match_error="The error message", ): diff --git a/src/py/reactpy/tests/test_core/test_layout.py b/src/py/reactpy/tests/test_core/test_layout.py index 215e89137..9f27727df 100644 --- a/src/py/reactpy/tests/test_core/test_layout.py +++ b/src/py/reactpy/tests/test_core/test_layout.py @@ -2,6 +2,7 @@ import gc import random import re +from unittest.mock import patch from weakref import finalize from weakref import ref as weakref @@ -9,7 +10,7 @@ import reactpy from reactpy import html -from reactpy.config import REACTPY_DEBUG_MODE +from reactpy.config import REACTPY_ASYNC_RENDERING, REACTPY_DEBUG_MODE from reactpy.core.component import component from reactpy.core.hooks import use_effect, use_state from reactpy.core.layout import Layout @@ -20,14 +21,22 @@ assert_reactpy_did_log, capture_reactpy_logs, ) +from reactpy.testing.common import poll from reactpy.utils import Ref from tests.tooling import select +from tests.tooling.aio import Event from tests.tooling.common import event_message, update_message from tests.tooling.hooks import use_force_render, use_toggle from tests.tooling.layout import layout_runner from tests.tooling.select import element_exists, find_element +@pytest.fixture(autouse=True, params=[True, False]) +def concurrent_rendering(request): + with patch.object(REACTPY_ASYNC_RENDERING, "current", request.param): + yield request.param + + @pytest.fixture(autouse=True) def no_logged_errors(): with capture_reactpy_logs() as logs: @@ -164,7 +173,7 @@ def make_child_model(state): async def test_layout_render_error_has_partial_update_with_error_message(): @reactpy.component def Main(): - return reactpy.html.div([OkChild(), BadChild(), OkChild()]) + return reactpy.html.div(OkChild(), BadChild(), OkChild()) @reactpy.component def OkChild(): @@ -622,7 +631,7 @@ async def test_hooks_for_keyed_components_get_garbage_collected(): def Outer(): items, set_items = reactpy.hooks.use_state([1, 2, 3]) pop_item.current = lambda: set_items(items[:-1]) - return reactpy.html.div(Inner(key=k, finalizer_id=k) for k in items) + return reactpy.html.div([Inner(key=k, finalizer_id=k) for k in items]) @reactpy.component def Inner(finalizer_id): @@ -831,17 +840,19 @@ def some_effect(): async with reactpy.Layout(Root()) as layout: await layout.render() - assert effects == ["mount x"] + await poll(lambda: effects).until_equals(["mount x"]) set_toggle.current() await layout.render() - assert effects == ["mount x", "unmount x", "mount y"] + await poll(lambda: effects).until_equals(["mount x", "unmount x", "mount y"]) set_toggle.current() await layout.render() - assert effects == ["mount x", "unmount x", "mount y", "unmount y", "mount x"] + await poll(lambda: effects).until_equals( + ["mount x", "unmount x", "mount y", "unmount y", "mount x"] + ) async def test_layout_does_not_copy_element_children_by_key(): @@ -1250,3 +1261,52 @@ def App(): c, c_info = find_element(tree, select.id_equals("C")) assert c_info.path == (0, 1, 0) assert c["attributes"]["color"] == "blue" + + +async def test_concurrent_renders(concurrent_rendering): + if not concurrent_rendering: + raise pytest.skip("Concurrent rendering not enabled") + + child_1_hook = HookCatcher() + child_2_hook = HookCatcher() + child_1_rendered = Event() + child_2_rendered = Event() + child_1_render_count = Ref(0) + child_2_render_count = Ref(0) + + @component + def outer(): + return html._(child_1(), child_2()) + + @component + @child_1_hook.capture + def child_1(): + child_1_rendered.set() + child_1_render_count.current += 1 + + @component + @child_2_hook.capture + def child_2(): + child_2_rendered.set() + child_2_render_count.current += 1 + + async with Layout(outer()) as layout: + await layout.render() + + # clear render events and counts + child_1_rendered.clear() + child_2_rendered.clear() + child_1_render_count.current = 0 + child_2_render_count.current = 0 + + # we schedule two renders but expect only one + child_1_hook.latest.schedule_render() + child_1_hook.latest.schedule_render() + child_2_hook.latest.schedule_render() + child_2_hook.latest.schedule_render() + + await child_1_rendered.wait() + await child_2_rendered.wait() + + assert child_1_render_count.current == 1 + assert child_2_render_count.current == 1 diff --git a/src/py/reactpy/tests/test_core/test_serve.py b/src/py/reactpy/tests/test_core/test_serve.py index 64be0ec8b..9b22ee866 100644 --- a/src/py/reactpy/tests/test_core/test_serve.py +++ b/src/py/reactpy/tests/test_core/test_serve.py @@ -5,10 +5,12 @@ from jsonpointer import set_pointer import reactpy +from reactpy.core.hooks import use_effect from reactpy.core.layout import Layout from reactpy.core.serve import serve_layout from reactpy.core.types import LayoutUpdateMessage from reactpy.testing import StaticEventHandler +from tests.tooling.aio import Event from tests.tooling.common import event_message EVENT_NAME = "on_event" @@ -96,9 +98,10 @@ async def test_dispatch(): async def test_dispatcher_handles_more_than_one_event_at_a_time(): - block_and_never_set = asyncio.Event() - will_block = asyncio.Event() - second_event_did_execute = asyncio.Event() + did_render = Event() + block_and_never_set = Event() + will_block = Event() + second_event_did_execute = Event() blocked_handler = StaticEventHandler() non_blocked_handler = StaticEventHandler() @@ -114,6 +117,10 @@ async def block_forever(): async def handle_event(): second_event_did_execute.set() + @use_effect + def set_did_render(): + did_render.set() + return reactpy.html.div( reactpy.html.button({"on_click": block_forever}), reactpy.html.button({"on_click": handle_event}), @@ -129,11 +136,12 @@ async def handle_event(): recv_queue.get, ) ) - - await recv_queue.put(event_message(blocked_handler.target)) - await will_block.wait() - - await recv_queue.put(event_message(non_blocked_handler.target)) - await second_event_did_execute.wait() - - task.cancel() + try: + await did_render.wait() + await recv_queue.put(event_message(blocked_handler.target)) + await will_block.wait() + + await recv_queue.put(event_message(non_blocked_handler.target)) + await second_event_did_execute.wait() + finally: + task.cancel() diff --git a/src/py/reactpy/tests/tooling/aio.py b/src/py/reactpy/tests/tooling/aio.py new file mode 100644 index 000000000..b0f719400 --- /dev/null +++ b/src/py/reactpy/tests/tooling/aio.py @@ -0,0 +1,16 @@ +from __future__ import annotations + +from asyncio import Event as _Event +from asyncio import wait_for + +from reactpy.config import REACTPY_TESTING_DEFAULT_TIMEOUT + + +class Event(_Event): + """An event with a ``wait_for`` method.""" + + async def wait(self, timeout: float | None = None): + return await wait_for( + super().wait(), + timeout=timeout or REACTPY_TESTING_DEFAULT_TIMEOUT.current, + ) diff --git a/src/py/reactpy/tests/tooling/loop.py b/src/py/reactpy/tests/tooling/loop.py deleted file mode 100644 index f9e100981..000000000 --- a/src/py/reactpy/tests/tooling/loop.py +++ /dev/null @@ -1,91 +0,0 @@ -import asyncio -import threading -import time -from asyncio import wait_for -from collections.abc import Iterator -from contextlib import contextmanager - -from reactpy.config import REACTPY_TESTING_DEFAULT_TIMEOUT - - -@contextmanager -def open_event_loop(as_current: bool = True) -> Iterator[asyncio.AbstractEventLoop]: - """Open a new event loop and cleanly stop it - - Args: - as_current: whether to make this loop the current loop in this thread - """ - loop = asyncio.new_event_loop() - try: - if as_current: - asyncio.set_event_loop(loop) - loop.set_debug(True) - yield loop - finally: - try: - _cancel_all_tasks(loop, as_current) - if as_current: - loop.run_until_complete( - wait_for( - loop.shutdown_asyncgens(), - REACTPY_TESTING_DEFAULT_TIMEOUT.current, - ) - ) - loop.run_until_complete( - wait_for( - loop.shutdown_default_executor(), - REACTPY_TESTING_DEFAULT_TIMEOUT.current, - ) - ) - finally: - if as_current: - asyncio.set_event_loop(None) - start = time.time() - while loop.is_running(): - if (time.time() - start) > REACTPY_TESTING_DEFAULT_TIMEOUT.current: - msg = f"Failed to stop loop after {REACTPY_TESTING_DEFAULT_TIMEOUT.current} seconds" - raise TimeoutError(msg) - time.sleep(0.1) - loop.close() - - -def _cancel_all_tasks(loop: asyncio.AbstractEventLoop, is_current: bool) -> None: - to_cancel = asyncio.all_tasks(loop) - if not to_cancel: - return - - done = threading.Event() - count = len(to_cancel) - - def one_task_finished(future): - nonlocal count - count -= 1 - if count == 0: - done.set() - - for task in to_cancel: - loop.call_soon_threadsafe(task.cancel) - task.add_done_callback(one_task_finished) - - if is_current: - loop.run_until_complete( - wait_for( - asyncio.gather(*to_cancel, return_exceptions=True), - REACTPY_TESTING_DEFAULT_TIMEOUT.current, - ) - ) - elif not done.wait(timeout=3): # user was responsible for cancelling all tasks - msg = "Could not stop event loop in time" - raise TimeoutError(msg) - - for task in to_cancel: - if task.cancelled(): - continue - if task.exception() is not None: - loop.call_exception_handler( - { - "message": "unhandled exception during event loop shutdown", - "exception": task.exception(), - "task": task, - } - )