-
sugar-hox-dev-tools
是一个带有 hox 原 API 及导出一个展示组件,用于展示被createModel
包裹的数据。[更多功能计划中] -
修改了 hox 一小部分源码,如果依赖 hox 包,那么得在打包的时候,webpack 注入我自己修改的部分代码,相对麻烦,成本也高。于是邮箱问过 umi/hox 的开发者之一 brickspert,经过同意且此仓库为 MIT 协议,所以 fork 了此仓库并拉取源码进行修改,相关 API 仍保持与 hox 一致
-
之所以做这个 devtools,原因在于我们使用了 createModel 包裹之后,不知道这个数据是否真的被持久化、全局共享,只能通过在组件中 import 这个数据源,然后 console.log 打印,然后看是否真的被修改。
-
还有就是当其他人接手项目之后,他想查看一些已经存在于全局共享的 Model,并没有一个展示全局共享数据的 看板,所以
sugar-hox-dev-tools
出生了。
与你正常写 hooks,使用 hox 一样,只要经过 createModel 包裹后的 hooks,修改数据源之后,可以在 devtools 组件中,实时看到对应 model 的变化哦~
npm install sugar-hox-devtools --save
这里的说明拷至 hox 文档,更多详情点击这里访问
import { useState } from 'react'
import hoxAPI from 'sugar-hox-devtools'
function useCounter() {
const [count, setCount] = useState(0)
const decrement = () => setCount(count - 1)
const increment = () => setCount(count + 1)
return {
count,
decrement,
increment,
}
}
useCounter.namespace = 'useCounter' // 这里需要给每一个 model 都添加命名空间标识
export default hoxAPI.createModel(useCounter)
这里的说明拷至 hox 文档,更多详情点击这里访问
// 在组件中调用这个 Hook ,就可以获取到 model 的数据了。
import counterModel from '../models/counter'
function App(props) {
const { counter, increment, decrement } = counterModel()
return (
<div>
<p>{counter}</p>
<button onClick={decrement}>-1</button>
<button onClick={increment}>+1</button>
</div>
)
}
sugar-hox-devtools
抛出一个组件,调用此组件即可;所有经过createModel
包裹后的 model,都会被注入添加到 window.sugarHox
上。控制台打印 window.sugarHox 就能拿到数据。
import React, { useState } from 'react'
import sugar from 'sugar-hox-devtools'
const SugarHoxDevTools = sugar.SugarHoxDevTools
function App() {
const [showDevTools, setShowDevTools] = useState(true)
return (
<div>
...
{showDevTools && (
<SugarHoxDevTools onClose={() => setShowDevTools(false)} />
)}
</div>
)
}
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 自定义 | string | sugar-hox-devtools |
closeIcon | 关闭 icon | ReactNode | X |
onClose | 点击 closeIcon 方法 | () => void | - |
maxScrollHeight | 容器滚动的最大高度 | number | 200 |
hox 本身比较简单,可以说是短小精干,问题出现也相对较少,当然,sugar-hox-devtools
开发者也会随时跟进 hox 的版本,进行更新~
PRs accepted.
MIT © 2020 PDKSophia/SugarTurboS