在宿主页面中动态加载 **Vite Dev Server** 上的 React 组件,并保持 React Fast Refresh/HMR 能力。
npm install @dev-to/react-loader在宿主页面中动态加载 Vite Dev Server 上的 React 组件,并保持 React Fast Refresh/HMR 能力。
该包默认与 @dev-to/react-plugin(Vite 侧)配套使用。
``bash`
pnpm add @dev-to/react-loader
确保你的 Vite 项目启用了 @dev-to/react-plugin:
`ts
import { devToReactPlugin } from '@dev-to/react-plugin'
devToReactPlugin({ MyCard: 'src/MyCard.tsx' })
`
`tsx
import { ReactLoader } from '@dev-to/react-loader'
export function Demo() {
return (
name="MyCard"
componentProps={{ title: 'Hello' }}
/>
)
}
`
如果你已经拿到完整入口 URL,也可以绕过内部解析:
`tsx`
- 统一发现端点,包含所有配置信息$3
- Contract: /__dev_to__/react/contract.js - 桥接合约
- Init: /__dev_to__/react/init.js - 初始化脚本这些端点常量由
@dev-to/shared 统一定义,保证与 @dev-to/react-plugin 保持一致。可通过
contractEndpoint 自定义 contract 路径;init 路径由 contract 返回值决定(未提供时回退到默认值)。$3
使用新的发现端点 API:
`tsx
import { loadDiscoveryContract } from '@dev-to/react-loader'// 加载统一发现合约
const discovery = await loadDiscoveryContract('http://localhost:5173')
console.log(discovery.framework.type) // 'react'
console.log(discovery.framework.version) // '18.2.0'
console.log(discovery.server.origins) // 所有可用的 origin
console.log(discovery.components) // 组件映射
`导出内容
$3
- ReactLoader - 主加载器组件$3
- loadDiscoveryContract - (新) 加载统一发现合约
- loadBridgeContract - 加载桥接合约(兼容旧版)
- ensureBridgeInit - 确保 HMR 运行时初始化
- resolveReactEntry - 解析组件入口 URL
- resolveReactEntryForLoader - 带错误处理的入口解析$3
- DEFAULT_DISCOVERY_ENDPOINT - (新) 默认发现端点
- DEFAULT_CONTRACT_ENDPOINT - 默认合约端点
- DEFAULT_INIT_ENDPOINT` - 默认初始化端点