fix(canvas): wrapper runner render contextinitializationwithfunction#…

…161(#426)
opentiny · Apr 18, 2024 · 005f36a · 005f36a
1 parent a69082f
commit 005f36a
Showing 1 changed file with 64 additions and 61 deletions.
diff --git a/packages/canvas/src/components/render/runner.js b/packages/canvas/src/components/render/runner.js
@@ -26,73 +26,77 @@ const dispatch = (name, data) => {
   window.parent.document.dispatchEvent(new CustomEvent(name, data))
 }
 
-dispatch('beforeCanvasReady')
-
-TinyI18nHost.lowcode = lowcode
-
-// 目前先兼容老区块发布的代码，后期区块发布整改后再删除
-window.React = {}
-window.React.createElement = Vue.h
-
-// 不能采用new Proxy代理Vue的方案，在编译后的vue会报错警告，采用一下方案扩展用于注入一些区块加载逻辑
-window.Vue = {
-  ...Vue,
-  resolveComponent(...args) {
-    // 此处先执行vue内部的解析组件的方法，如果可以拿到组件对象则直接返回，反之则去注册区块
-    const component = Vue.resolveComponent(args[0])
-    if (component && typeof component === 'string') {
-      return getComponent(capitalize(camelize(args[0])))
-    } else {
-      return component
-    }
-  },
-  // renderSlot方法第三个参数是作用域插槽传递的数据，格式{ data: vue.unref(state).componentData }
-  renderSlot(...args) {
-    // 获取当前vue的实例
-    const instance = Vue.getCurrentInstance()
-
-    // 获取当前区块名称
-    const blockName = instance.attrs.dataTag
-
-    const [, slotName, slotData] = args
-
-    // 如果是作用域插槽，则获取作用域插槽传递过来的参数
-    if (slotData) {
-      if (blockSlotDataMap[blockName]) {
-        blockSlotDataMap[blockName][slotName] = slotData
+const initRenderContext = () => {
+  dispatch('beforeCanvasReady')
+
+  TinyI18nHost.lowcode = lowcode
+
+  // 目前先兼容老区块发布的代码，后期区块发布整改后再删除
+  window.React = {}
+  window.React.createElement = Vue.h
+
+  // 不能采用new Proxy代理Vue的方案，在编译后的vue会报错警告，采用一下方案扩展用于注入一些区块加载逻辑
+  window.Vue = {
+    ...Vue,
+    resolveComponent(...args) {
+      // 此处先执行vue内部的解析组件的方法，如果可以拿到组件对象则直接返回，反之则去注册区块
+      const component = Vue.resolveComponent(args[0])
+      if (component && typeof component === 'string') {
+        return getComponent(capitalize(camelize(args[0])))
       } else {
-        blockSlotDataMap[blockName] = { [slotName]: slotData }
+        return component
+      }
+    },
+    // renderSlot方法第三个参数是作用域插槽传递的数据，格式{ data: vue.unref(state).componentData }
+    renderSlot(...args) {
+      // 获取当前vue的实例
+      const instance = Vue.getCurrentInstance()
+
+      // 获取当前区块名称
+      const blockName = instance.attrs.dataTag
+
+      const [, slotName, slotData] = args
+
+      // 如果是作用域插槽，则获取作用域插槽传递过来的参数
+      if (slotData) {
+        if (blockSlotDataMap[blockName]) {
+          blockSlotDataMap[blockName][slotName] = slotData
+        } else {
+          blockSlotDataMap[blockName] = { [slotName]: slotData }
+        }
+      }
+
+      /**
+       * vue源码中的renderSlot会忽略default插槽的名称，所以这里必须手动添加args第三个参数的name值
+       * vue源码如右所示：if (name !== 'default') props.name = name; return createVNode('slot', props, fallback && fallback());
+       **/
+      if (slotName === 'default') {
+        args[2] = args[2] || {}
+        args[2].name = slotName
       }
+
+      return Vue.renderSlot(...args)
     }
+  }
 
-    /**
-     * vue源码中的renderSlot会忽略default插槽的名称，所以这里必须手动添加args第三个参数的name值
-     * vue源码如右所示：if (name !== 'default') props.name = name; return createVNode('slot', props, fallback && fallback());
-     **/
-    if (slotName === 'default') {
-      args[2] = args[2] || {}
-      args[2].name = slotName
+  window.VueI18n = VueI18n
+  window.TinyVue = TinyVue
+  window.TinyVueIcon = TinyVueIcon
+  window.TinyWebcomponentCore = TinyWebcomponentCore
+  window.TinyI18nHost = TinyI18nHost
+  window.TinyLowcodeComponent = {}
+  window.TinyComponentLibs = {}
+
+  Object.entries(TinyVue).forEach(([_key, component]) => {
+    const { name } = component
+    if (name) {
+      window.TinyLowcodeComponent[name] = component
     }
+  })
 
-    return Vue.renderSlot(...args)
-  }
+  document.addEventListener('updateDependencies', updateDependencies)
 }
 
-window.VueI18n = VueI18n
-window.TinyVue = TinyVue
-window.TinyVueIcon = TinyVueIcon
-window.TinyWebcomponentCore = TinyWebcomponentCore
-window.TinyI18nHost = TinyI18nHost
-window.TinyLowcodeComponent = {}
-window.TinyComponentLibs = {}
-
-Object.entries(TinyVue).forEach(([_key, component]) => {
-  const { name } = component
-  if (name) {
-    window.TinyLowcodeComponent[name] = component
-  }
-})
-
 let App = null
 
 const renderer = {
@@ -129,6 +133,7 @@ const create = () => {
 }
 
 export const createRender = (config) => {
+  initRenderContext()
   const { dslMode, canvasOptions } = config
   const { styles = [], scripts = [] } = canvasOptions[dslMode]
   const { styles: thirdStyles = [], scripts: thirdScripts = [] } = window.thirdPartyDeps || {}
@@ -138,5 +143,3 @@ export const createRender = (config) => {
     ...scripts.map((src) => addScript(src)).concat([...thirdStyles, ...styles].map((src) => addStyle(src)))
   ]).finally(create)
 }
-
-document.addEventListener('updateDependencies', updateDependencies)