feat(canvas): add the renderer extension capability (opentiny#718)

特性画布create增加lifeCycles配置，添加beforeAppCreate与appCreated钩子画布添加getRender/setRender API --------- Co-authored-by: yaoyun8 <[email protected]>
yy-wow · Sep 9, 2024 · 2a5f346 · 2a5f346
1 parent 1700d3c
commit 2a5f346
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 25 deletions.
diff --git a/packages/canvas/render/src/RenderMain.js b/packages/canvas/render/src/RenderMain.js
@@ -17,7 +17,16 @@ import * as TinyVueIcon from '@opentiny/vue-icon'
 import { useBroadcastChannel } from '@vueuse/core'
 import { constants, utils as commonUtils } from '@opentiny/tiny-engine-utils'
 import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render'
-import { getNode as getNodeById, clearNodes, getRoot, setContext, getContext, setCondition, context } from './context'
+import {
+  getNode as getNodeById,
+  clearNodes,
+  getRoot,
+  setContext,
+  getContext,
+  setCondition,
+  context,
+  setNode
+} from './context'
 import CanvasEmpty from './CanvasEmpty.vue'
 
 const { BROADCAST_CHANNEL } = constants
@@ -39,15 +48,13 @@ const globalState = ref([])
 const stores = shallowReactive({})
 const dataSourceMap = shallowReactive({})
 
-const Func = Function
-
 watchEffect(() => {
   reset(stores)
   globalState.value.forEach(({ id, state = {}, getters = {} }) => {
     const computedGetters = Object.keys(getters).reduce(
       (acc, key) => ({
         ...acc,
-        [key]: new Func('return ' + getters[key].value)().call(acc, state)
+        [key]: parseData(getters[key], state, acc)
       }),
       {}
     )
@@ -347,6 +354,34 @@ const setSchema = async (data) => {
 
 const getNode = (id, parent) => (id ? getNodeById(id, parent) : schema)
 
+let canvasRenderer = null
+
+const defaultRenderer = function () {
+  // 渲染画布增加根节点，与出码和预览保持一致
+  const rootChildrenSchema = {
+    componentName: 'div',
+    props: schema.props,
+    children: schema.children
+  }
+
+  return h(
+    'tiny-i18n-host',
+    {
+      locale: 'zh_CN',
+      key: refreshKey.value,
+      ref: 'page',
+      className: 'design-page'
+    },
+    schema.children?.length ? h(renderer, { schema: rootChildrenSchema, parent: schema }) : [h(CanvasEmpty)]
+  )
+}
+
+const getRenderer = () => canvasRenderer || defaultRenderer
+
+const setRenderer = (fn) => {
+  canvasRenderer = fn
+}
+
 export default {
   setup() {
     provide('rootSchema', schema)
@@ -378,23 +413,7 @@ export default {
     )
   },
   render() {
-    // 渲染画布增加根节点，与出码和预览保持一致
-    const rootChildrenSchema = {
-      componentName: 'div',
-      props: schema.props,
-      children: schema.children
-    }
-
-    return h(
-      'tiny-i18n-host',
-      {
-        locale: 'zh_CN',
-        key: refreshKey.value,
-        ref: 'page',
-        className: 'design-page'
-      },
-      schema.children?.length ? h(renderer, { schema: rootChildrenSchema, parent: schema }) : [h(CanvasEmpty)]
-    )
+    return getRenderer().call(this)
   }
 }
 
@@ -424,5 +443,8 @@ export const api = {
   getGlobalState,
   getDataSourceMap,
   setDataSourceMap,
-  setGlobalState
+  setGlobalState,
+  setNode,
+  getRenderer,
+  setRenderer
 }
diff --git a/packages/canvas/render/src/runner.js b/packages/canvas/render/src/runner.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { createApp } from 'vue'
+import { createApp, h } from 'vue'
 import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../../common'
 import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n'
 import Main, { api } from './RenderMain'
@@ -46,7 +46,11 @@ const renderer = {
   ...api
 }
 
-const create = () => {
+const create = async (config) => {
+  const { beforeAppCreate, appCreated } = config.lifeCycles || {}
+  if (typeof beforeAppCreate === 'function') {
+    await beforeAppCreate({ Vue: { h }, canvasWin: window, api })
+  }
   App && App.unmount()
   App = null
 
@@ -59,6 +63,11 @@ const create = () => {
   dispatch('canvasReady', { detail: renderer })
 
   App = createApp(Main).use(TinyI18nHost).provide(I18nInjectionKey, TinyI18nHost)
+
+  if (typeof appCreated === 'function') {
+    await appCreated(App)
+  }
+
   App.config.globalProperties.lowcodeConfig = window.parent.TinyGlobalConfig
   App.mount(document.querySelector('#app'))
 
@@ -78,5 +87,5 @@ export const createRender = (config) => {
   Promise.all([
     ...thirdScripts.map(dynamicImportComponents),
     ...scripts.map((src) => addScript(src)).concat([...thirdStyles, ...styles].map((src) => addStyle(src)))
-  ]).finally(create)
+  ]).finally(() => create(config))
 }