[Feature]: runtime config 增加 reduck 配置传输

[undermoodzyx]

这个功能解决了什么问题？

在约定式路由场景下，可以配置 reduck 的 middlewares

你期望的 API 是什么样子的？

其实更需要的是一个 api ，在约定式路由场景下，用户自行控制 App elem

// index.tsx
import Provider from 'project-specific'
import { AppReactElem } from '@modern-js/runtime'

export function render() {
  return (<Provider><AppReactElem /></Provider/>)
}

[guangzan]

约定式路由场景下，请问目前有什么解决方案吗，比如使用 NiceModal 需要添加根组件的 Provider：

import NiceModal from '@ebay/nice-modal-react';

ReactDOM.render(
  <React.StrictMode>
    <NiceModal.Provider>
      <App />
    </NiceModal.Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

类似的，使用 react router v6 的 <ScrollRestoration /> 时，需要添加到根路由中：

+ import { ScrollRestoration } from "react-router-dom";

function RootRouteComponent() {
  return (
    <div>
      {/* ... */}
+     <ScrollRestoration />
    </div>
  );
}

[caohuilin]

现在支持了一个新的自定义入口的方式，可以创建一个 src/entry.tsx 文件，然后通过 Modern.js API 获取到 rootElement，添加外层组件之后再使用 API 进行 render

import { createRoot } from '@modern-js/runtime/react';
import { render } from '@modern-js/runtime/browser';

const ModernRoot = createRoot();

render(<NiceModal.Provider><ModernRoot /></NiceModal.Provider>);

可以参考文档 https://modernjs.dev/guides/concept/entries.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%85%A5%E5%8F%A3