RFC: Roadmap for React-ESI

[J3m5]

RFC: Roadmap for React-ESI

We are seeking feedback on the proposed roadmap for React-ESI and welcome your suggestions to refine it. The items listed below are not ranked in any particular order, and we're open to removing, adding or rearranging them based on priority and community feedback.

• Dual ESM/CJS Build or ESM Only: Consider publishing react-esi with support for both module systems or transition fully to ESM to align with modern JavaScript standards.

• Improve ESM Compatibility: Explore various strategies to enhance ESM compatibility, including:

  • Replacing dynamic require in the WithESI component with dynamic import, noting the shift to asynchronous code.
  • Making server-side code isomorphic and potentially leverage code splitting, thereby minimizing or eliminating the need for server-side bundling.
  • Investigating alternative solutions that could offer a balanced approach without significant trade-offs.

• Function Component for WithESI: Propose a redesign of the WithESI component as a function component, embracing React's modern features and hooks.

• NextJS-Specific Component: If necessary, introduce a component tailored for NextJS, especially considering the new App Router setup. This would avoid mixing NextJS-specific code into the base component and ensure a clean separation of concerns.

• Simplify ESI Fragments Distribution in NextJS: Explore NextJS's App Router and API Routes for ESI Fragments, eliminating the need for a custom server. This simplifies deployment and removes the necessity for users to bundle Fragment components in a separate build step, streamlining the development process.

• Development Dockerfile: Add a Dockerfile designed for development purposes. This would facilitate real-time testing of React-ESI integration and modifications directly within the examples, enhancing the development workflow.

• E2E Testing: Implement end-to-end (E2E) tests based on the examples. These tests should be configured to run in continuous integration (CI) environments to ensure that new changes do not break existing functionalities, specially in production builds.

• React/Vite Example: Update our examples to include a React/Vite setup. This reflects current trends in development practices and could simplify the build and bundling process, providing a more streamlined and efficient development experience.

• Enhance Code Coverage Reporting: Switch to Codecov GitHub Action for uploading code coverage reports. This update replaces the outdated Coveralls integration, providing more accurate and up-to-date coverage analysis directly within our CI/CD pipeline.

• Expand Ecosystem with Vue-ESI for Vue3 and NuxtJS: Develop a Vue3 and NuxtJS compatible version of React-ESI. This extension aims to bring the benefits of ESI to the Vue community, enhancing server-side rendering capabilities and component caching. Additionally, create an example project to demonstrate Vue-ESI's integration and usage, serving as a reference and starting point for developers.

Your input is invaluable to us as we aim to make React-ESI more robust and aligned with the needs of the developer community. Please share your thoughts, suggestions, or any additional items you believe should be considered for the roadmap.