Architecture

What is the best way to sync a Redux store between two environments that can only communicate using postMessage? I see a huge number of options here https://github.com/markerikson/redux-ecosystem-links/blob/master/store.md#synchronization  but does anyone recommend one in particular or should I roll my own? I think I could just use middleware that sends a postMessage to the other environment for each action, and the other environment recieves it and dispatches the action.

My app is a VSCode extension ChatGPT clone. The UI is in a webview inside an iframe which can only communicate with the host extension using postMessage. The extension host needs to be the source of truth but I want to be able to access the store and dispatch actions from either environment and have it apply to both automatically.

About

• https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/frameworks/hello-world-react-vite
• https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/frameworks/hello-world-react-vite/docs
• Webiew UI Toolkit Blog
• Webiew UI Toolkit Docs

Initial Setup

npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-react-vite hello-world
cd hello-world

npm install -g vsce

Running Locally

# Update packages and build
npm run install:all
npm run build:webview

Press F5 to open a new Extension Development Host window

Install Extension Locally

# https://code.visualstudio.com/api/working-with-extensions/publishing-extension

npm run build:webview
vsce package
code --force --install-extension $(find -name "codalyst*" | tail -1)
code --force --install-extension ./codalyst-0.0.1.vsix

Misc

• TODO - Try this https://dev.to/sourishkrout/effortless-app-state-sync-across-different-js-sandboxes-inline-frames-web-workers-worker-threads-or-vs-code-webviews-768
• This extension adds a chat window in the sidebar using ~contributes.viewsContainers~ and ~contributes.views~
• The content of the view is populated with a WebviewView
  • https://code.visualstudio.com/api/extension-guides/webview

https://code.visualstudio.com/api/references/contribution-points#contributes.views

The content of a view can be populated in two ways:

• With a TreeView by providing a data provider through ~createTreeView~ API or register the data provider directly through ~registerTreeDataProvider~ API to populate data. TreeViews are ideal for showing hierarchical data and lists. Refer to the tree-view-sample.
• With a WebviewView by registering a provider with ~registerWebviewViewProvider~. Webview views allow rendering arbitrary HTML in the view. See the webview view sample extension for more details.