forked from opentiny/tiny-engine
fix(canvas): wrapper runner render contextinitializationwithfunction#161(#426)
This commit is contained in:
parent
a69082f518
commit
005f36af3c
|
@ -26,73 +26,77 @@ const dispatch = (name, data) => {
|
||||||
window.parent.document.dispatchEvent(new CustomEvent(name, data))
|
window.parent.document.dispatchEvent(new CustomEvent(name, data))
|
||||||
}
|
}
|
||||||
|
|
||||||
dispatch('beforeCanvasReady')
|
const initRenderContext = () => {
|
||||||
|
dispatch('beforeCanvasReady')
|
||||||
|
|
||||||
TinyI18nHost.lowcode = lowcode
|
TinyI18nHost.lowcode = lowcode
|
||||||
|
|
||||||
// 目前先兼容老区块发布的代码,后期区块发布整改后再删除
|
// 目前先兼容老区块发布的代码,后期区块发布整改后再删除
|
||||||
window.React = {}
|
window.React = {}
|
||||||
window.React.createElement = Vue.h
|
window.React.createElement = Vue.h
|
||||||
|
|
||||||
// 不能采用new Proxy代理Vue的方案,在编译后的vue会报错警告,采用一下方案扩展用于注入一些区块加载逻辑
|
// 不能采用new Proxy代理Vue的方案,在编译后的vue会报错警告,采用一下方案扩展用于注入一些区块加载逻辑
|
||||||
window.Vue = {
|
window.Vue = {
|
||||||
...Vue,
|
...Vue,
|
||||||
resolveComponent(...args) {
|
resolveComponent(...args) {
|
||||||
// 此处先执行vue内部的解析组件的方法,如果可以拿到组件对象则直接返回,反之则去注册区块
|
// 此处先执行vue内部的解析组件的方法,如果可以拿到组件对象则直接返回,反之则去注册区块
|
||||||
const component = Vue.resolveComponent(args[0])
|
const component = Vue.resolveComponent(args[0])
|
||||||
if (component && typeof component === 'string') {
|
if (component && typeof component === 'string') {
|
||||||
return getComponent(capitalize(camelize(args[0])))
|
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
|
|
||||||
} else {
|
} else {
|
||||||
blockSlotDataMap[blockName] = { [slotName]: slotData }
|
return component
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
// renderSlot方法第三个参数是作用域插槽传递的数据,格式{ data: vue.unref(state).componentData }
|
||||||
|
renderSlot(...args) {
|
||||||
|
// 获取当前vue的实例
|
||||||
|
const instance = Vue.getCurrentInstance()
|
||||||
|
|
||||||
/**
|
// 获取当前区块名称
|
||||||
* vue源码中的renderSlot会忽略default插槽的名称,所以这里必须手动添加args第三个参数的name值
|
const blockName = instance.attrs.dataTag
|
||||||
* 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)
|
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)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
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
|
let App = null
|
||||||
|
|
||||||
const renderer = {
|
const renderer = {
|
||||||
|
@ -129,6 +133,7 @@ const create = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const createRender = (config) => {
|
export const createRender = (config) => {
|
||||||
|
initRenderContext()
|
||||||
const { dslMode, canvasOptions } = config
|
const { dslMode, canvasOptions } = config
|
||||||
const { styles = [], scripts = [] } = canvasOptions[dslMode]
|
const { styles = [], scripts = [] } = canvasOptions[dslMode]
|
||||||
const { styles: thirdStyles = [], scripts: thirdScripts = [] } = window.thirdPartyDeps || {}
|
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)))
|
...scripts.map((src) => addScript(src)).concat([...thirdStyles, ...styles].map((src) => addStyle(src)))
|
||||||
]).finally(create)
|
]).finally(create)
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('updateDependencies', updateDependencies)
|
|
||||||
|
|
Loading…
Reference in New Issue