Designing a React Integration for Miew: Seeking Ideas and Collaboration

[NadezhdaKatcman]

We’re working on integrating Miew into React and would love to gather ideas and feedback from the community.

Our key objectives:

• Rendering Miew visually in React apps.
• Allowing interaction with Miew instance via code for actions like reload or settings adjustments.
• Suggest a user-friendly system for adding UI controls that interact with Miew.

Challenges:
Miew has its own internal state and supports event subscriptions and external settings manipulation. However, React’s lifecycle and state management paradigm complicates the architectural choices.
Should we sync Miew’s state with React state, or rely on Miew’s internal state and expose events/settings hooks for React?

Two deliverables are expected from this discussion:

• React Component: A reusable wrapper to embed Miew into React projects.
• Ecosystem Utility: A method (possibly React context or hooks) that simplifies Miew’s usage across React apps.

For reference, we’re also considering an example solution in Miew’s library that demonstrates best practices for React integration or offers alternative approaches.

We’d love to hear your insights on how we can solve these challenges effectively! Any suggestions or ideas are welcome.

[NadezhdaKatcman]

Here’s our current approach for integrating Miew into React:

1. The component receives options as props, which are passed to Miew to configure its behavior.
2. We are using useRef to create a reference for the DOM element where the Miew instance is mounted.
3. We use useLayoutEffect to handle updates when options change. Specifically, we:
   -- Destroy the current Miew instance to ensure a clean state.
   -- Recreate the Miew instance with the updated options prop.

This approach ensures that Miew is reinitialized whenever there are changes to its configuration (options).

However, working this way raises some challenges:

• Efficiency: Destroying and recreating the Miew instance with every update could potentially introduce performance issues.
• State Management: Since we’re not syncing Miew’s internal state with React, it can sometimes feel inconsistent with React’s declarative paradigm.
• Developer Usability: React developers might expect a more intuitive API or lifecycle management without needing to manage the nuances of Miew’s internal state explicitly.

[NadezhdaKatcman]

We’re also aware of another approach that could be explored for integrating Miew into React:

1. Using React Context:
   -- In this approach, we use React Context to store the Miew instance and provide access to it across the application.
   -- The Miew instance is still mounted to the DOM using useRef, but by passing it through Context, other components (e.g., controls) can directly access the Miew instance.
2. Synchronizing State with Miew Events:
   -- For components that need to track updates or changes, we could subscribe to Miew’s native events. This would allow us to synchronize React state with Miew’s internal state as needed, using useState or similar mechanisms to keep the UI updated based on changes in Miew.
   -- For example, if a setting or property inside Miew is updated (via code or user interaction), the corresponding React state could be updated automatically through event subscriptions.

This approach could simplify accessing and interacting with Miew, but it introduces some complexity:

• Managing synchronization between React state and Miew’s event-driven updates.
• Determining when and how to store Miew settings in React state versus just relying on Miew’s internal state.

We’re interested in hearing thoughts on whether this approach might be more effective or how it could be improved to work seamlessly in React apps. Let us know what you think!