Implementing localStorage integration

Author: williamneto

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

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

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

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

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

@@ -204,6 +204,23 @@ function createReconnectingWebSocket(
     socket.current.onopen = () => {
       everConnected = true;
       logger.log("client connected");
+
+      let storage : 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)
+        }
+        socket.current?.send(
+          JSON.stringify(
+            {
+              "type": "sync-local-storage",
+              "storage": storage
+            }
+          )
+        )
+      }
+
       interval = startInterval;
       retries = 0;
       if (props.onOpen) {

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

@@ -5,6 +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
 
 # backend implementations should establish this context at the root of an app
 ConnectionContext: Context[Connection[Any] | None] = create_context(None)
@@ -27,3 +28,7 @@ def use_scope() -> MutableMapping[str, Any]:
 def use_location() -> Location:
     """Get the current :class:`~reactpy.backend.types.Connection`'s location."""
     return use_connection().location
+
+def use_local_storage() -> LocalStorage:
+    """Get the storage object for the connection"""
+    return use_connection().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
+from reactpy.core.types import RootComponentConstructor, LocalStorage
 
 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 conn
+    return 
 
 
 @dataclass
@@ -140,6 +140,7 @@ 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)
 
         try:
             await serve_layout(
@@ -149,10 +150,12 @@ async def model_stream(socket: WebSocket) -> None:
                         value=Connection(
                             scope=socket.scope,
                             location=Location(pathname, f"?{search}" if search else ""),
+                            storage=storage_obj,
                             carrier=socket,
                         ),
                     )
                 ),
+                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
+from reactpy.core.types import RootComponentConstructor, LocalStorage
 
 _App = TypeVar("_App")
 
@@ -51,6 +51,8 @@ class Connection(Generic[_Carrier]):
     location: Location
     """The current location (URL)"""
 
+    storage: LocalStorage
+
     carrier: _Carrier
     """How the connection is mediated. For example, a request or websocket.
 

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

@@ -8,8 +8,8 @@
 from anyio.abc import TaskGroup
 
 from reactpy.config import REACTPY_DEBUG_MODE
-from reactpy.core.types import LayoutEventMessage, LayoutType, LayoutUpdateMessage
-
+from reactpy.core.types import StorageEventMessage, LocalStorage, LayoutEventMessage, LayoutType, LayoutUpdateMessage
+from reactpy.core.layout import Layout
 logger = getLogger(__name__)
 
 
@@ -33,6 +33,7 @@ class Stop(BaseException):
 
 async def serve_layout(
     layout: LayoutType[LayoutUpdateMessage, LayoutEventMessage],
+    storage: LocalStorage,
     send: SendCoroutine,
     recv: RecvCoroutine,
 ) -> None:
@@ -41,11 +42,10 @@ 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, recv)
+                task_group.start_soon(_single_incoming_loop, task_group, layout, storage, recv)
         except Stop:
             logger.info(f"Stopped serving {layout}")
 
-
 async def _single_outgoing_loop(
     layout: LayoutType[LayoutUpdateMessage, LayoutEventMessage], send: SendCoroutine
 ) -> None:
@@ -63,13 +63,23 @@ async def _single_outgoing_loop(
                 logger.error(msg)
             raise
 
+async def incoming_router(
+    layout: Layout,
+    storage: LocalStorage,
+    event: LayoutEventMessage or StorageEventMessage,
+): 
+    if event["type"] == "sync-local-storage":
+        storage._sync(event["storage"])
+    else:
+        await layout.deliver(event)
 
 async def _single_incoming_loop(
     task_group: TaskGroup,
     layout: LayoutType[LayoutUpdateMessage, LayoutEventMessage],
+    storage: LocalStorage,
     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(layout.deliver, await recv())
+        task_group.start_soon(incoming_router, layout, storage, await recv())

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

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
-import sys
+import sys, json
+from starlette.websockets import WebSocket
 from collections import namedtuple
 from collections.abc import Mapping, Sequence
 from types import TracebackType
@@ -233,3 +234,42 @@ class LayoutEventMessage(TypedDict):
     """The ID of the event handler."""
     data: Sequence[Any]
     """A list of event data passed to the event handler."""
+
+class StorageEventMessage(TypedDict):
+    type: Literal["sync-local-storage"]
+    storage: dict
+
+class LocalStorage():
+    _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-local-storage",
+                    "storage": self.storage
+                }
+            )
+        )
+
+    def get_item(
+        self,
+        key: str
+    ):
+        return self.storage.get(key)
+
+    async def set_item(
+        self,
+        key: str,
+        value: str
+    ):
+        self.storage[key] = value
+        await self._sync_client()