Implementing access to sessionStorage

Author: williamneto

src/js/packages/@reactpy/client/src/components.tsx

@@ -52,6 +52,18 @@ export function Layout(props: { client: ReactPyClient }): JSX.Element {
       })
   )
 
+  useEffect(
+    () =>
+      props.client.onMessage("sync-session-storage", ({ type, storage}) => {
+        for (let itemKey in storage) {
+          window.sessionStorage.setItem(
+            itemKey,
+            storage[itemKey]
+          )
+        }
+      })
+  )
+
   return (
     <ClientContext.Provider value={props.client}>
       <Element model={currentModel} />

src/js/packages/@reactpy/client/src/messages.ts

@@ -17,6 +17,11 @@ export type LocalStorageUpdateMessage = {
   storage: any;
 }
 
-export type IncomingMessage = LayoutUpdateMessage | LocalStorageUpdateMessage;
-export type OutgoingMessage = LayoutEventMessage | LocalStorageUpdateMessage;
+export type SessionStorageUpdateMessage = {
+  type: "sync-session-storage",
+  storage: any;
+}
+
+export type IncomingMessage = LayoutUpdateMessage | LocalStorageUpdateMessage | SessionStorageUpdateMessage;
+export type OutgoingMessage = LayoutEventMessage | LocalStorageUpdateMessage | SessionStorageUpdateMessage;
 export type Message = IncomingMessage | OutgoingMessage;

src/js/packages/@reactpy/client/src/reactpy-client.ts

@@ -205,21 +205,37 @@ function createReconnectingWebSocket(
       everConnected = true;
       logger.log("client connected");
 
-      let storage : any = {}
+      let _localStorage : any = {}
       for (let i = 0; i <= window.localStorage.length; i++) {
         let storage_key = window.localStorage.key(i)
         if (storage_key){
-          storage[storage_key] = window.localStorage.getItem(storage_key)
+          _localStorage[storage_key] = window.localStorage.getItem(storage_key)
         }
-        socket.current?.send(
-          JSON.stringify(
-            {
-              "type": "sync-local-storage",
-              "storage": storage
-            }
-          )
+      }
+      socket.current?.send(
+        JSON.stringify(
+          {
+            "type": "sync-local-storage",
+            "storage": _localStorage
+          }
         )
+      )
+
+      let _sessionStorage : any = {}
+      for (let i = 0; i <= window.sessionStorage.length; i++) {
+        let storage_key = window.sessionStorage.key(i)
+        if (storage_key){
+          _sessionStorage[storage_key] = window.sessionStorage.getItem(storage_key)
+        }
       }
+      socket.current?.send(
+        JSON.stringify(
+          {
+            "type": "sync-local-storage",
+            "storage": _sessionStorage
+          }
+        )
+      )
 
       interval = startInterval;
       retries = 0;

src/py/reactpy/reactpy/backend/hooks.py

@@ -5,7 +5,7 @@
 
 from reactpy.backend.types import Connection, Location
 from reactpy.core.hooks import Context, create_context, use_context
-from reactpy.core.types import LocalStorage
+from reactpy.core.types import LocalStorage, SessionStorage
 
 # backend implementations should establish this context at the root of an app
 ConnectionContext: Context[Connection[Any] | None] = create_context(None)
@@ -30,5 +30,9 @@ def use_location() -> Location:
     return use_connection().location
 
 def use_local_storage() -> LocalStorage:
-    """Get the storage object for the connection"""
-    return use_connection().storage
+    """Get the localStorage object for the connection"""
+    return use_connection().local_storage
+
+def use_session_storage() -> SessionStorage:
+    """Get the sessionStorage object for the connection"""
+    return use_connection().session_storage

src/py/reactpy/reactpy/backend/starlette.py

@@ -29,7 +29,7 @@
 from reactpy.config import REACTPY_WEB_MODULES_DIR
 from reactpy.core.layout import Layout
 from reactpy.core.serve import RecvCoroutine, SendCoroutine, serve_layout
-from reactpy.core.types import RootComponentConstructor, LocalStorage
+from reactpy.core.types import RootComponentConstructor, LocalStorage, SessionStorage
 
 logger = logging.getLogger(__name__)
 
@@ -79,7 +79,7 @@ def use_connection() -> Connection[WebSocket]:
     if not isinstance(conn.carrier, WebSocket):  # nocov
         msg = f"Connection has unexpected carrier {conn.carrier}. Are you running with a Flask server?"
         raise TypeError(msg)
-    return 
+    return conn
 
 
 @dataclass
@@ -140,7 +140,8 @@ async def model_stream(socket: WebSocket) -> None:
         pathname = "/" + socket.scope["path_params"].get("path", "")
         pathname = pathname[len(options.url_prefix) :] or "/"
         search = socket.scope["query_string"].decode()
-        storage_obj = LocalStorage(sock=socket)
+        local_storage_obj = LocalStorage(sock=socket)
+        session_storage_obj = SessionStorage(sock=socket)
 
         try:
             await serve_layout(
@@ -150,12 +151,14 @@ async def model_stream(socket: WebSocket) -> None:
                         value=Connection(
                             scope=socket.scope,
                             location=Location(pathname, f"?{search}" if search else ""),
-                            storage=storage_obj,
+                            local_storage=local_storage_obj,
+                            session_storage=session_storage_obj,
                             carrier=socket,
                         ),
                     )
                 ),
-                storage_obj,
+                local_storage_obj,
+                session_storage_obj,
                 send,
                 recv,
             )

src/py/reactpy/reactpy/backend/types.py

@@ -5,7 +5,7 @@
 from dataclasses import dataclass
 from typing import Any, Callable, Generic, Protocol, TypeVar, runtime_checkable
 
-from reactpy.core.types import RootComponentConstructor, LocalStorage
+from reactpy.core.types import RootComponentConstructor, LocalStorage, SessionStorage
 
 _App = TypeVar("_App")
 
@@ -51,7 +51,11 @@ class Connection(Generic[_Carrier]):
     location: Location
     """The current location (URL)"""
 
-    storage: LocalStorage
+    local_storage: LocalStorage
+    """An object to obtain client localStorage"""
+
+    session_storage: SessionStorage
+    """An object to obtain client sessionStorage"""
 
     carrier: _Carrier
     """How the connection is mediated. For example, a request or websocket.

src/py/reactpy/reactpy/core/serve.py

@@ -8,7 +8,15 @@
 from anyio.abc import TaskGroup
 
 from reactpy.config import REACTPY_DEBUG_MODE
-from reactpy.core.types import StorageEventMessage, LocalStorage, LayoutEventMessage, LayoutType, LayoutUpdateMessage
+from reactpy.core.types import (
+    LocalStorageEventMessage, 
+    SessionStorageEventMessage, 
+    LocalStorage, 
+    SessionStorage,
+    LayoutEventMessage, 
+    LayoutType, 
+    LayoutUpdateMessage
+)
 from reactpy.core.layout import Layout
 logger = getLogger(__name__)
 
@@ -33,7 +41,8 @@ class Stop(BaseException):
 
 async def serve_layout(
     layout: LayoutType[LayoutUpdateMessage, LayoutEventMessage],
-    storage: LocalStorage,
+    local_storage: LocalStorage,
+    session_storage: SessionStorage,
     send: SendCoroutine,
     recv: RecvCoroutine,
 ) -> None:
@@ -42,7 +51,7 @@ async def serve_layout(
         try:
             async with create_task_group() as task_group:
                 task_group.start_soon(_single_outgoing_loop, layout, send)
-                task_group.start_soon(_single_incoming_loop, task_group, layout, storage, recv)
+                task_group.start_soon(_single_incoming_loop, task_group, layout, local_storage, session_storage,recv)
         except Stop:
             logger.info(f"Stopped serving {layout}")
 
@@ -65,21 +74,25 @@ async def _single_outgoing_loop(
 
 async def incoming_router(
     layout: Layout,
-    storage: LocalStorage,
-    event: LayoutEventMessage or StorageEventMessage,
+    local_storage: LocalStorage,
+    session_storage: SessionStorage,
+    event: LayoutEventMessage or LocalStorageEventMessage or SessionStorageEventMessage,
 ): 
     if event["type"] == "sync-local-storage":
-        storage._sync(event["storage"])
-    else:
+        local_storage._sync(event["storage"])
+    elif event["type"] == "sync-session-storage":
+        session_storage._sync(event["storage"])
+    elif event["type"] == "layout-event":
         await layout.deliver(event)
 
 async def _single_incoming_loop(
     task_group: TaskGroup,
     layout: LayoutType[LayoutUpdateMessage, LayoutEventMessage],
-    storage: LocalStorage,
+    local_storage: LocalStorage,
+    session_storage: SessionStorage,
     recv: RecvCoroutine,
 ) -> None:
     while True:
         # We need to fire and forget here so that we avoid waiting on the completion
         # of this event handler before receiving and running the next one.
-        task_group.start_soon(incoming_router, layout, storage, await recv())
+        task_group.start_soon(incoming_router, layout, local_storage, session_storage, await recv())

src/py/reactpy/reactpy/core/types.py

@@ -235,9 +235,21 @@ class LayoutEventMessage(TypedDict):
     data: Sequence[Any]
     """A list of event data passed to the event handler."""
 
-class StorageEventMessage(TypedDict):
+class LocalStorageEventMessage(TypedDict):
+    """Message describing an event containing localStorage"""
+    
     type: Literal["sync-local-storage"]
+    """The type of message"""
+    storage: dict
+    """A dictionary containing localStorage items"""
+
+class SessionStorageEventMessage(TypedDict):
+    """Message describing an event containing sessionStorage"""
+
+    type: Literal["sync-session-storage"]
+    """Message describing an event containing localStorage"""
     storage: dict
+    """A dictionary containing localStorage items"""
 
 class LocalStorage():
     _socket: WebSocket
@@ -266,6 +278,41 @@ def get_item(
     ):
         return self.storage.get(key)
 
+    async def set_item(
+        self,
+        key: str,
+        value: str
+    ):
+        self.storage[key] = value
+        await self._sync_client()
+
+class SessionStorage():
+    _socket: WebSocket
+    storage: dict
+    
+    def __init__(self, sock):
+        self._socket = sock
+        self.storage = {}
+    
+    def _sync(self, sto):
+        self.storage = sto
+
+    async def _sync_client(self):
+        await self._socket.send_text(
+            json.dumps(
+                {
+                    "type": "sync-session-storage",
+                    "storage": self.storage
+                }
+            )
+        )
+
+    def get_item(
+        self,
+        key: str
+    ):
+        return self.storage.get(key)
+
     async def set_item(
         self,
         key: str,