2.0.1-beta.12 • Published 1 year ago
@notionpet/sdk v2.0.1-beta.12
关于
什么是 @notionpet/sdk
?
@notionpet/sdk
是开发组件用的工具包, 结合 组件世界 平台,开发好后的组件可以发布到该平台然后通过 embed 嵌入notion软件中。
🏄♀️ 组件渲染流程
- 🌏 渲染:用户访问组件渲染器 -> 判定找到组件资源(index.js) -> 执行
defineRender
方法 并传入配置项信息、组件数据信息,此时需要执行组件真正的渲染方法。 - 🆚 更新:编辑器配置更新配置内容 -> 执行
defineUpdate
方法 并传入配置项信息、组件数据信息,此时开发者可以通过自身逻辑控制组件视图更新。 - 💻 组件数据:每个组件被创建都会拥有一定的数据储存空间,类似于
localStorage
,开发者可以根据业务在合适的时机保存较为重要的信息,以备下次进入组件保持目标效果。保存、更新数据只需要调用api.update
方法来控制。
🎮 API
defineRender
定义渲染方法
使用示例
defineRender
- @param render {IRender} 渲染函数
- @param options {IDefineRenderOptions} 参数
- options.isDevMode 是否为开发模式,立即渲染,开发阶段将其设置为true,一般传递
process.env.NODE_ENV === 'development'
- options.isSingle 是否首次渲染和二次更新同方法,默认分离方法 如果传递为 true 则无需定义
defineUpdate
- options.isDevMode 是否为开发模式,立即渲染,开发阶段将其设置为true,一般传递
import { defineRender } from '@notion-pet/sdk';
import { render } from 'preact';
const isDevMode = process.env.NODE_ENV === 'development'
const isSingle = false
defineRender(({options: {}, data: {}}) => {
render(<App options={options} data={data} />)
}, {isDevMode, isSingle})
defineUpdate
定义更新
使用示例
defineUpdate
import { defineUpdate } from '@notion-pet/sdk';
import { useState } from 'preact/hooks';
export default () => {
const [state, setState] = useState({value: 1})
defineUpdate(({options: {}, data: {}}) => {
setState({
value: data.value
})
})
return <div>
{state.value}
</div>
}
utils
常用工具函数
使用示例
replaceAll
import { utils } from '@notion-pet/sdk';
utils.replaceAll('a', 'b', 'abc') // 'bbc'
uuid
import { utils } from '@notion-pet/sdk';
const uuid = utils.uuid() // 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
uniqueTimeout 唯一的 setTimeout
import { utils } from '@notion-pet/sdk';
const timer = utils.uniqueTimeout()
timer(() => {
console.log('hello')
}, 1000)
uniqueInterval 唯一的 setInterval
import { utils } from '@notion-pet/sdk';
const timer = utils.uniqueInterval()
timer(() => {
console.log('hello')
}, 1000)
挂载CSS或JS
import { utils } from '@notion-pet/sdk';
// script | style
utils.mountElement('script', {
id: 'rootJS',
content: `
// ...js code
`,
// or
// url: "https://xxx.com/xxx.js"
})
挂载CSS语法糖
import { utils } from '@notion-pet/sdk';
utils.mountCSS({
id: 'rootCSS',
content: `
// ...css code
`
// or
// url: "https://xxx.com/xxx.css"
})
挂载JS语法糖
import { utils } from '@notion-pet/sdk';
utils.mountJS({
id: 'rootJS',
content: `
// ...js code
`
// or
// url: "https://xxx.com/xxx.js"
})
api
组件数据交互-接口请求
使用示例
update 更新方法
import { api } from '@notion-pet/sdk';
import { useState } from 'preact/hooks';
export default () => {
const [state, setState] = useState({value: 1})
const onClick = () => {
setState({value: ++state.value})
api.update(state)
}
return <div onClick={onClick}>
{state.value}
</div>
}
get 获取数据方法
import { api } from '@notion-pet/sdk';
import { useState } from 'preact/hooks';
export default () => {
const [state, setState] = useState({value: 1})
const onClick = async () => {
try {
const {data} = await api.get()
setState({value: data.value})
} catch(error) {
console.error(error)
}
}
return <div onClick={onClick}>
{state.value}
</div>
}
axios 代理axios接口请求方法
import { api } from '@notion-pet/sdk';
try {
const data = await api.axios({
method: 'get',
url: 'http://www.baidu.com',
// ...more axios config
})
} catch(error) {
console.error(error)
}
Element
TextELement
文本元素
使用示例
import { TextElement } from '@notion-pet/sdk';
import { render } from 'preact';
render((options) => {
// 从配置项集合中取出文本配置项
const instance = new TextElement(options.text)
return <div onLoadCapture={(e) => instance.render(e.target)} />
})
RectELement
矩形元素
使用示例
import { RectElement } from '@notion-pet/sdk';
import { render } from 'preact';
render((options) => {
// 从配置项集合中取出矩形容器配置项
const instance = new RectElement(options.rect)
return <div onLoadCapture={(e) => instance.render(e.target)} />
})
资料
组件开发模板
2.0.1-beta.8
1 year ago
2.0.1-beta.9
1 year ago
2.0.1-beta.2
1 year ago
2.0.1-beta.3
1 year ago
2.0.1-beta.1
1 year ago
2.0.1-beta.6
1 year ago
2.0.1-beta.7
1 year ago
2.0.1-beta.4
1 year ago
2.0.1
1 year ago
2.0.1-beta.5
1 year ago
2.0.0
1 year ago
2.0.1-beta.12
1 year ago
2.0.1-beta.11
1 year ago
2.0.1-beta.10
1 year ago
0.2.0
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.5
2 years ago
0.2.4
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.9
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago