diff --git a/packages/renderer/README.md b/packages/renderer/README.md index 026c71359..9a22e301c 100644 --- a/packages/renderer/README.md +++ b/packages/renderer/README.md @@ -8,21 +8,38 @@ A Vue3 renderer for tiny-engine. ```javascript // xxx.vue -import { h, reactive } from 'vue' -import Main from '@opentiny/tiny-engine-renderer' +import { h } from 'vue' +import Main, { api } from '@opentiny/tiny-engine-renderer' + +const getSchema = () => { + return newPromise((resolve) => { + setTimeout(() => { + const data = { + state: {}, + children: [ + { + componentName: 'Text', + props: { + text: 'Title' + } + } + ] + } + resolve(data) + }, 100) + }) +} export default { - render() { - // utils - const utils = reactive({}) - // globalState - const globalState = reactive([]) - // dataSource - const dataSourceMap = reactive({}) - // schema - const schema = reactive({}) + setup() { + onMounted(async () => { + const schema = await getSchema() - return schema.children.length ? h(Main, { schema, utils, globalState, dataSourceList }) : null + api.setSchema(schema) + }) + }, + render() { + return h(Main) } } ``` diff --git a/packages/renderer/README.zh-CN.md b/packages/renderer/README.zh-CN.md index 31d0036b6..360ae0378 100644 --- a/packages/renderer/README.zh-CN.md +++ b/packages/renderer/README.zh-CN.md @@ -8,21 +8,38 @@ ```javascript // xxx.vue -import { h, reactive } from 'vue' -import Main from '@opentiny/tiny-engine-renderer' +import { h } from 'vue' +import Main, { api } from '@opentiny/tiny-engine-renderer' + +const getSchema = () => { + return newPromise((resolve) => { + setTimeout(() => { + const data = { + state: {}, + children: [ + { + componentName: 'Text', + props: { + text: '标题' + } + } + ] + } + resolve(data) + }, 100) + }) +} export default { - render() { - // 页面schema - const schema = reactive({}) - // 工具类 - const utils = reactive({}) - // 全局状态 - const globalState = reactive([]) - // 数据源 - const dataSourceMap = reactive({}) + setup() { + onMounted(async () => { + const schema = await getSchema() - return schema.children.length ? h(Main, { schema, utils, globalState, dataSourceList }) : null + api.setSchema(schema) + }) + }, + render() { + return h(Main) } } ```