reactpy 2.0.0b5__py3-none-any.whl → 2.0.0b6__py3-none-any.whl

reactpy/__init__.py

@@ -1,4 +1,4 @@
-from reactpy import config, logging, types, web, widgets
+from reactpy import config, logging, reactjs, types, web, widgets
 from reactpy._html import html
 from reactpy.core import hooks
 from reactpy.core.component import component
@@ -23,7 +23,7 @@ from reactpy.pyscript.components import pyscript_component
 from reactpy.utils import Ref, reactpy_to_string, string_to_reactpy
 
 __author__ = "The Reactive Python Team"
-__version__ = "2.0.0b5"
+__version__ = "2.0.0b6"
 
 __all__ = [
     "Ref",
@@ -36,6 +36,7 @@ __all__ = [
     "html",
     "logging",
     "pyscript_component",
+    "reactjs",
     "reactpy_to_string",
     "string_to_reactpy",
     "types",

reactpy/_html.py

@@ -6,7 +6,6 @@ from typing import ClassVar, overload
 from reactpy.core.vdom import Vdom
 from reactpy.types import (
     EventHandlerDict,
-    Key,
     VdomAttributes,
     VdomChild,
     VdomChildren,
@@ -14,7 +13,7 @@ from reactpy.types import (
     VdomDict,
 )
 
-__all__ = ["html"]
+__all__ = ["h", "html"]
 
 NO_CHILDREN_ALLOWED_HTML_BODY = {
     "area",
@@ -100,12 +99,10 @@ NO_CHILDREN_ALLOWED_SVG = {
 def _fragment(
     attributes: VdomAttributes,
     children: Sequence[VdomChild],
-    key: Key | None,
     event_handlers: EventHandlerDict,
 ) -> VdomDict:
     """An HTML fragment - this element will not appear in the DOM"""
-    attributes.pop("key", None)
-    if attributes or event_handlers:
+    if any(k != "key" for k in attributes) or event_handlers:
         msg = "Fragments cannot have attributes besides 'key'"
         raise TypeError(msg)
     model = VdomDict(tagName="")
@@ -113,8 +110,8 @@ def _fragment(
     if children:
         model["children"] = children
 
-    if key is not None:
-        model["key"] = key
+    if attributes:
+        model["attributes"] = attributes
 
     return model
 
@@ -122,7 +119,6 @@ def _fragment(
 def _script(
     attributes: VdomAttributes,
     children: Sequence[VdomChild],
-    key: Key | None,
     event_handlers: EventHandlerDict,
 ) -> VdomDict:
     """Create a new `<script> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script>`__ element.
@@ -148,6 +144,8 @@ def _script(
         msg = "'script' elements do not support event handlers"
         raise ValueError(msg)
 
+    key = attributes.get("key")
+
     if children:
         if len(children) > 1:
             msg = "'script' nodes may have, at most, one child."
@@ -165,7 +163,9 @@ def _script(
             key = attributes["src"]
 
     if key is not None:
-        model["key"] = key
+        if "attributes" not in model:
+            model["attributes"] = {}
+        model["attributes"]["key"] = key
 
     return model
 
@@ -287,6 +287,7 @@ class HtmlConstructor:
         "fragment": Vdom("", custom_constructor=_fragment),
         "svg": SvgConstructor(),
     }
+    __call__ = __cache__["fragment"].__call__
 
     def __getattr__(self, value: str) -> VdomConstructor:
         value = value.rstrip("_").replace("_", "-")
@@ -423,3 +424,4 @@ class HtmlConstructor:
 
 
 html = HtmlConstructor()
+h = html  # shorthand alias for html

reactpy/core/_life_cycle_hook.py

@@ -33,7 +33,10 @@ class _HookStack(Singleton):  # nocov
     )
 
     def get(self) -> list[LifeCycleHook]:
-        return self._state.get()
+        try:
+            return self._state.get()
+        except LookupError:
+            return []
 
     def initialize(self) -> Token[list[LifeCycleHook]] | None:
         return None if isinstance(self._state, ThreadLocal) else self._state.set([])

reactpy/core/layout.py

@@ -34,7 +34,7 @@ from reactpy.config import (
     REACTPY_CHECK_VDOM_SPEC,
     REACTPY_DEBUG,
 )
-from reactpy.core._life_cycle_hook import LifeCycleHook
+from reactpy.core._life_cycle_hook import HOOK_STACK, LifeCycleHook
 from reactpy.core.vdom import validate_vdom_json
 from reactpy.types import (
     BaseLayout,
@@ -162,43 +162,47 @@ class Layout(BaseLayout):
     async def _create_layout_update(
         self, old_state: _ModelState
     ) -> LayoutUpdateMessage:
-        component = old_state.life_cycle_state.component
+        token = HOOK_STACK.initialize()
         try:
-            parent: _ModelState | None = old_state.parent
-        except AttributeError:
-            parent = None
-
-        async with AsyncExitStack() as exit_stack:
-            new_state = await self._render_component(
-                exit_stack,
-                old_state,
-                parent,
-                old_state.index,
-                old_state.key,
-                component,
-            )
+            component = old_state.life_cycle_state.component
+            try:
+                parent: _ModelState | None = old_state.parent
+            except AttributeError:
+                parent = None
+
+            async with AsyncExitStack() as exit_stack:
+                new_state = await self._render_component(
+                    exit_stack,
+                    old_state,
+                    parent,
+                    old_state.index,
+                    old_state.key,
+                    component,
+                )
 
-        if parent is not None:
-            parent.children_by_key[new_state.key] = new_state
-            old_parent_model = parent.model.current
-            old_parent_children = old_parent_model.setdefault("children", [])
-            parent.model.current = {
-                **old_parent_model,
-                "children": [
-                    *old_parent_children[: new_state.index],
-                    new_state.model.current,
-                    *old_parent_children[new_state.index + 1 :],
-                ],
+            if parent is not None:
+                parent.children_by_key[new_state.key] = new_state
+                old_parent_model = parent.model.current
+                old_parent_children = old_parent_model.setdefault("children", [])
+                parent.model.current = {
+                    **old_parent_model,
+                    "children": [
+                        *old_parent_children[: new_state.index],
+                        new_state.model.current,
+                        *old_parent_children[new_state.index + 1 :],
+                    ],
+                }
+
+            if REACTPY_CHECK_VDOM_SPEC.current:
+                validate_vdom_json(new_state.model.current)
+
+            return {
+                "type": "layout-update",
+                "path": new_state.patch_path,
+                "model": new_state.model.current,
             }
-
-        if REACTPY_CHECK_VDOM_SPEC.current:
-            validate_vdom_json(new_state.model.current)
-
-        return {
-            "type": "layout-update",
-            "path": new_state.patch_path,
-            "model": new_state.model.current,
-        }
+        finally:
+            HOOK_STACK.reset(token)
 
     async def _render_component(
         self,
@@ -299,8 +303,9 @@ class Layout(BaseLayout):
         except Exception as e:  # nocov
             msg = f"Expected a VDOM element dict, not {raw_model}"
             raise ValueError(msg) from e
-        if "key" in raw_model:
-            new_state.key = new_state.model.current["key"] = raw_model["key"]
+        key = raw_model.get("attributes", {}).get("key")
+        if key is not None:
+            new_state.key = key
         if "importSource" in raw_model:
             new_state.model.current["importSource"] = raw_model["importSource"]
         self._render_model_attributes(old_state, new_state, raw_model)
@@ -722,7 +727,7 @@ def _get_children_info(
             continue
         elif isinstance(child, dict):
             child_type = _DICT_TYPE
-            key = child.get("key")
+            key = child.get("attributes", {}).get("key")
         elif isinstance(child, Component):
             child_type = _COMPONENT_TYPE
             key = child.key

reactpy/core/serve.py

@@ -8,7 +8,6 @@ from anyio import create_task_group
 from anyio.abc import TaskGroup
 
 from reactpy.config import REACTPY_DEBUG
-from reactpy.core._life_cycle_hook import HOOK_STACK
 from reactpy.types import BaseLayout, LayoutEventMessage, LayoutUpdateMessage
 
 logger = getLogger(__name__)
@@ -45,22 +44,18 @@ async def _single_outgoing_loop(
     send: SendCoroutine,
 ) -> None:
     while True:
-        token = HOOK_STACK.initialize()
+        update = await layout.render()
         try:
-            update = await layout.render()
-            try:
-                await send(update)
-            except Exception:  # nocov
-                if not REACTPY_DEBUG.current:
-                    msg = (
-                        "Failed to send update. More info may be available "
-                        "if you enabling debug mode by setting "
-                        "`reactpy.config.REACTPY_DEBUG.current = True`."
-                    )
-                    logger.error(msg)
-                raise
-        finally:
-            HOOK_STACK.reset(token)
+            await send(update)
+        except Exception:  # nocov
+            if not REACTPY_DEBUG.current:
+                msg = (
+                    "Failed to send update. More info may be available "
+                    "if you enabling debug mode by setting "
+                    "`reactpy.config.REACTPY_DEBUG.current = True`."
+                )
+                logger.error(msg)
+            raise
 
 
 async def _single_incoming_loop(

reactpy/core/vdom.py

@@ -41,7 +41,6 @@ VDOM_JSON_SCHEMA = {
             "type": "object",
             "properties": {
                 "tagName": {"type": "string"},
-                "key": {"type": ["string", "number", "null"]},
                 "error": {"type": "string"},
                 "children": {"$ref": "#/definitions/elementChildren"},
                 "attributes": {"type": "object"},
@@ -170,7 +169,6 @@ class Vdom:
     ) -> VdomDict:
         """The entry point for the VDOM API, for example reactpy.html(<WE_ARE_HERE>)."""
         attributes, children = separate_attributes_and_children(attributes_and_children)
-        key = attributes.get("key", None)
         attributes, event_handlers, inline_javascript = (
             separate_attributes_handlers_and_inline_javascript(attributes)
         )
@@ -180,7 +178,6 @@ class Vdom:
         # Run custom constructor, if defined
         if self.custom_constructor:
             result = self.custom_constructor(
-                key=key,
                 children=children,
                 attributes=attributes,
                 event_handlers=event_handlers,
@@ -189,7 +186,6 @@ class Vdom:
         # Otherwise, use the default constructor
         else:
             result = {
-                **({"key": key} if key is not None else {}),
                 **({"children": children} if children else {}),
                 **({"attributes": attributes} if attributes else {}),
                 **({"eventHandlers": event_handlers} if event_handlers else {}),
@@ -277,7 +273,9 @@ def _validate_child_key_integrity(value: Any) -> None:
         for child in value:
             if isinstance(child, Component) and child.key is None:
                 warn(f"Key not specified for child in list {child}", UserWarning)
-            elif isinstance(child, Mapping) and "key" not in child:
+            elif isinstance(child, Mapping) and "key" not in child.get(
+                "attributes", {}
+            ):
                 # remove 'children' to reduce log spam
                 child_copy = {**child, "children": EllipsisRepr()}
                 warn(f"Key not specified for child in list {child_copy}", UserWarning)

reactpy/pyscript/utils.py

@@ -123,7 +123,7 @@ def extend_pyscript_config(
     pyscript_config["packages"].extend(extra_py)
 
     # FIXME: https://github.com/pyscript/pyscript/issues/2282
-    if any(pkg.endswith(".whl") for pkg in pyscript_config["packages"]):
+    if any(pkg.endswith(".whl") for pkg in pyscript_config["packages"]):  # nocov
         pyscript_config["packages_cache"] = "never"
 
     # Extend the JavaScript dependency list

reactpy/reactjs/__init__.py

@@ -0,0 +1,353 @@
+from __future__ import annotations
+
+import hashlib
+from pathlib import Path
+from typing import Any, overload
+
+from reactpy.reactjs.module import (
+    file_to_module,
+    import_reactjs,
+    module_to_vdom,
+    string_to_module,
+    url_to_module,
+)
+from reactpy.reactjs.types import (
+    NAME_SOURCE,
+    URL_SOURCE,
+)
+from reactpy.types import JavaScriptModule, VdomConstructor
+
+__all__ = [
+    "NAME_SOURCE",
+    "URL_SOURCE",
+    "component_from_file",
+    "component_from_npm",
+    "component_from_string",
+    "component_from_url",
+    "import_reactjs",
+]
+
+_URL_JS_MODULE_CACHE: dict[str, JavaScriptModule] = {}
+_FILE_JS_MODULE_CACHE: dict[str, JavaScriptModule] = {}
+_STRING_JS_MODULE_CACHE: dict[str, JavaScriptModule] = {}
+
+
+@overload
+def component_from_url(
+    url: str,
+    import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> VdomConstructor: ...
+
+
+@overload
+def component_from_url(
+    url: str,
+    import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> list[VdomConstructor]: ...
+
+
+def component_from_url(
+    url: str,
+    import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = False,
+    resolve_imports_depth: int = 5,
+    fallback: Any | None = None,
+    unmount_before_update: bool = False,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Import a component from a URL.
+
+    Parameters:
+        url:
+            The URL to import the component from.
+        import_names:
+            One or more component names to import. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
+        fallback:
+            What to temporarily display while the module is being loaded.
+        unmount_before_update:
+            Cause the component to be unmounted before each update. This option should
+            only be used if the imported package fails to re-render when props change.
+            Using this option has negative performance consequences since all DOM
+            elements must be changed on each render. See :issue:`461` for more info.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    key = f"{url}{resolve_imports}{resolve_imports_depth}{unmount_before_update}"
+    if key in _URL_JS_MODULE_CACHE:
+        module = _URL_JS_MODULE_CACHE[key]
+    else:
+        module = url_to_module(
+            url,
+            fallback=fallback,
+            resolve_imports=resolve_imports,
+            resolve_imports_depth=resolve_imports_depth,
+            unmount_before_update=unmount_before_update,
+        )
+        _URL_JS_MODULE_CACHE[key] = module
+    return module_to_vdom(module, import_names, fallback, allow_children)
+
+
+@overload
+def component_from_npm(
+    package: str,
+    import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    version: str = "latest",
+    cdn: str = "https://esm.sh",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> VdomConstructor: ...
+
+
+@overload
+def component_from_npm(
+    package: str,
+    import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    version: str = "latest",
+    cdn: str = "https://esm.sh",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> list[VdomConstructor]: ...
+
+
+def component_from_npm(
+    package: str,
+    import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = False,
+    resolve_imports_depth: int = 5,
+    version: str = "latest",
+    cdn: str = "https://esm.sh",
+    fallback: Any | None = None,
+    unmount_before_update: bool = False,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Import a component from an NPM package.
+
+    Is is mandatory to load `reactpy.reactjs.import_reactjs()` on your page before using this
+    function. It is recommended to put this within your HTML <head> content.
+
+    Parameters:
+        package:
+            The name of the NPM package.
+        import_names:
+            One or more component names to import. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
+        version:
+            The version of the package to use. Defaults to "latest".
+        cdn:
+            The CDN to use. Defaults to "https://esm.sh".
+        fallback:
+            What to temporarily display while the module is being loaded.
+        unmount_before_update:
+            Cause the component to be unmounted before each update. This option should
+            only be used if the imported package fails to re-render when props change.
+            Using this option has negative performance consequences since all DOM
+            elements must be changed on each render. See :issue:`461` for more info.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    url = f"{cdn}/{package}@{version}"
+
+    if "esm.sh" in cdn:
+        if "?" in url:
+            url += "&external=react,react-dom"
+        else:
+            url += "?external=react,react-dom"
+
+    return component_from_url(
+        url,
+        import_names,
+        fallback=fallback,
+        resolve_imports=resolve_imports,
+        resolve_imports_depth=resolve_imports_depth,
+        unmount_before_update=unmount_before_update,
+        allow_children=allow_children,
+    )
+
+
+@overload
+def component_from_file(
+    file: str | Path,
+    import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    name: str = "",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    symlink: bool = ...,
+    allow_children: bool = ...,
+) -> VdomConstructor: ...
+
+
+@overload
+def component_from_file(
+    file: str | Path,
+    import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    name: str = "",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    symlink: bool = ...,
+    allow_children: bool = ...,
+) -> list[VdomConstructor]: ...
+
+
+def component_from_file(
+    file: str | Path,
+    import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = False,
+    resolve_imports_depth: int = 5,
+    name: str = "",
+    fallback: Any | None = None,
+    unmount_before_update: bool = False,
+    symlink: bool = False,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Import a component from a file.
+
+    Parameters:
+        file:
+            The file from which the content of the web module will be created.
+        import_names:
+            One or more component names to import. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
+        name:
+            The human-readable name of the ReactJS package
+        fallback:
+            What to temporarily display while the module is being loaded.
+        unmount_before_update:
+            Cause the component to be unmounted before each update. This option should
+            only be used if the imported package fails to re-render when props change.
+            Using this option has negative performance consequences since all DOM
+            elements must be changed on each render. See :issue:`461` for more info.
+        symlink:
+            Whether the web module should be saved as a symlink to the given ``file``.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    name = name or hashlib.sha256(str(file).encode()).hexdigest()[:10]
+    key = f"{name}{resolve_imports}{resolve_imports_depth}{unmount_before_update}"
+    if key in _FILE_JS_MODULE_CACHE:
+        module = _FILE_JS_MODULE_CACHE[key]
+    else:
+        module = file_to_module(
+            name,
+            file,
+            fallback=fallback,
+            resolve_imports=resolve_imports,
+            resolve_imports_depth=resolve_imports_depth,
+            unmount_before_update=unmount_before_update,
+            symlink=symlink,
+        )
+        _FILE_JS_MODULE_CACHE[key] = module
+    return module_to_vdom(module, import_names, fallback, allow_children)
+
+
+@overload
+def component_from_string(
+    content: str,
+    import_names: str,
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    name: str = "",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> VdomConstructor: ...
+
+
+@overload
+def component_from_string(
+    content: str,
+    import_names: list[str] | tuple[str, ...],
+    resolve_imports: bool = ...,
+    resolve_imports_depth: int = ...,
+    name: str = "",
+    fallback: Any | None = ...,
+    unmount_before_update: bool = ...,
+    allow_children: bool = ...,
+) -> list[VdomConstructor]: ...
+
+
+def component_from_string(
+    content: str,
+    import_names: str | list[str] | tuple[str, ...],
+    resolve_imports: bool = False,
+    resolve_imports_depth: int = 5,
+    name: str = "",
+    fallback: Any | None = None,
+    unmount_before_update: bool = False,
+    allow_children: bool = True,
+) -> VdomConstructor | list[VdomConstructor]:
+    """Import a component from a string.
+
+    Parameters:
+        content:
+            The contents of the web module
+        import_names:
+            One or more component names to import. If given as a string, a single component
+            will be returned. If a list is given, then a list of components will be
+            returned.
+        resolve_imports:
+            Whether to try and find all the named imports of this module.
+        resolve_imports_depth:
+            How deeply to search for those imports.
+        name:
+            The human-readable name of the ReactJS package
+        fallback:
+            What to temporarily display while the module is being loaded.
+        unmount_before_update:
+            Cause the component to be unmounted before each update. This option should
+            only be used if the imported package fails to re-render when props change.
+            Using this option has negative performance consequences since all DOM
+            elements must be changed on each render. See :issue:`461` for more info.
+        allow_children:
+            Whether or not these components can have children.
+    """
+    name = name or hashlib.sha256(content.encode()).hexdigest()[:10]
+    key = f"{name}{resolve_imports}{resolve_imports_depth}{unmount_before_update}"
+    if key in _STRING_JS_MODULE_CACHE:
+        module = _STRING_JS_MODULE_CACHE[key]
+    else:
+        module = string_to_module(
+            name,
+            content,
+            fallback=fallback,
+            resolve_imports=resolve_imports,
+            resolve_imports_depth=resolve_imports_depth,
+            unmount_before_update=unmount_before_update,
+        )
+        _STRING_JS_MODULE_CACHE[key] = module
+    return module_to_vdom(module, import_names, fallback, allow_children)