JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

fix(stage,runtime,ui-react): tmagicRuntimeReady时机修改

Browse Source 
fix #198
This commit is contained in:
roymondchen 2022-07-29 12:48:09 +08:00 committed by jia000
parent 0a1cf060a5
commit 9858327eb8
5 changed files with 152 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/stage/src/StageRender.ts
View File

@ -72,20 +72,22 @@ export default class StageRender extends EventEmitter {
* @param el 将页面挂载到该Dom节点上
*/
public async mount(el: HTMLDivElement) {
if (this.iframe) {
if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
// 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
let html = await fetch(this.runtimeUrl).then((res) => res.text());
// 使用base, 解决相对路径或绝对路径的问题
const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
html = html.replace('<head>', `<head>\n<base href="${base}">`);
this.iframe.srcdoc = html;
}
el.appendChild<HTMLIFrameElement>(this.iframe);
} else {
if (!this.iframe) {
throw Error('mount 失败');
}
if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
// 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
let html = await fetch(this.runtimeUrl).then((res) => res.text());
// 使用base, 解决相对路径或绝对路径的问题
const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
html = html.replace('<head>', `<head>\n<base href="${base}">`);
this.iframe.srcdoc = html;
}
el.appendChild<HTMLIFrameElement>(this.iframe);
this.postTmagicRuntimeReady();
}
public getRuntime = (): Promise<Runtime> => {
@ -111,26 +113,34 @@ export default class StageRender extends EventEmitter {
}
private loadHandler = async () => {
this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
if (!this.contentWindow?.magic) {
this.postTmagicRuntimeReady();
}
this.contentWindow.magic = this.getMagicApi();
if (!this.contentWindow) return;
if (this.render) {
const el = await this.render(this.core);
if (el) {
this.iframe?.contentDocument?.body?.appendChild(el);
this.contentWindow.document?.body?.appendChild(el);
}
}
this.emit('onload');
injectStyle(this.contentWindow.document, style);
};
private postTmagicRuntimeReady() {
this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
this.contentWindow.magic = this.getMagicApi();
this.contentWindow.postMessage(
{
tmagicRuntimeReady: true,
},
'*',
);
injectStyle(this.contentWindow.document, style);
};
}
}

1
packages/ui-react/src/useApp.ts
View File

@ -43,6 +43,7 @@ export default ({ config, methods }: UseAppOptions) => {
useEffect(() => {
const emitData = {
config,
...methods,
};

2
runtime/react/src/playground/App.css
View File

@ -10,7 +10,7 @@ body,
overflow: auto;
}
#app::-webkit-scrollbar {
::-webkit-scrollbar {
width: 0;
}

124
runtime/vue2/src/playground/App.vue
View File

@ -3,7 +3,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, nextTick, onMounted, provide, reactive, ref, watch } from 'vue';
import { computed, defineComponent, nextTick, provide, reactive, ref, watch } from 'vue';
import Core from '@tmagic/core';
import type { Id, MApp, MNode } from '@tmagic/schema';
@ -39,71 +39,69 @@ export default defineComponent({
page && window.magic.onPageElUpdate(page);
});
onMounted(() => {
window.magic?.onRuntimeReady({
getApp() {
return app;
},
window.magic?.onRuntimeReady({
getApp() {
return app;
},
updateRootConfig(config: MApp) {
console.log('update config', config);
root.value = config;
app?.setConfig(config, curPageId.value);
},
updateRootConfig(config: MApp) {
console.log('update config', config);
root.value = config;
app?.setConfig(config, curPageId.value);
},
updatePageId(id: Id) {
console.log('update page id', id);
curPageId.value = id;
app?.setPage(id);
},
updatePageId(id: Id) {
console.log('update page id', id);
curPageId.value = id;
app?.setPage(id);
},
getSnapElements() {
return Array.from(document.querySelectorAll<HTMLElement>('[class*=magic-ui][id]'));
},
getSnapElements() {
return Array.from(document.querySelectorAll<HTMLElement>('[class*=magic-ui][id]'));
},
select(id: Id) {
console.log('select config', id);
selectedId.value = id;
const el = document.getElementById(`${id}`);
if (el) return el;
// 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
},
select(id: Id) {
console.log('select config', id);
selectedId.value = id;
const el = document.getElementById(`${id}`);
if (el) return el;
// 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
},
add({ config }: UpdateData) {
console.log('add config', config);
if (!root.value) throw new Error('error');
if (!selectedId.value) throw new Error('error');
const path = getNodePath(selectedId.value, [root.value]);
const node = path.pop();
const parent = node?.items ? node : path.pop();
if (!parent) throw new Error('未找到父节点');
parent.items?.push(config);
},
add({ config }: UpdateData) {
console.log('add config', config);
if (!root.value) throw new Error('error');
if (!selectedId.value) throw new Error('error');
const path = getNodePath(selectedId.value, [root.value]);
const node = path.pop();
const parent = node?.items ? node : path.pop();
if (!parent) throw new Error('未找到父节点');
parent.items?.push(config);
},
update({ config }: UpdateData) {
console.log('update config', config);
if (!root.value) throw new Error('error');
const path = getNodePath(config.id, [root.value]);
const node = path.pop();
const parent = path.pop();
if (!node) throw new Error('未找到目标节点');
if (!parent) throw new Error('未找到父节点');
const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
parent.items.splice(index, 1, reactive(config));
},
update({ config }: UpdateData) {
console.log('update config', config);
if (!root.value) throw new Error('error');
const path = getNodePath(config.id, [root.value]);
const node = path.pop();
const parent = path.pop();
if (!node) throw new Error('未找到目标节点');
if (!parent) throw new Error('未找到父节点');
const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
parent.items.splice(index, 1, reactive(config));
},
remove({ id }: RemoveData) {
if (!root.value) throw new Error('error');
const path = getNodePath(id, [root.value]);
const node = path.pop();
if (!node) throw new Error('未找到目标元素');
const parent = path.pop();
if (!parent) throw new Error('未找到父元素');
const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
parent.items.splice(index, 1);
},
});
remove({ id }: RemoveData) {
if (!root.value) throw new Error('error');
const path = getNodePath(id, [root.value]);
const node = path.pop();
if (!node) throw new Error('未找到目标元素');
const parent = path.pop();
if (!parent) throw new Error('未找到父元素');
const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
parent.items.splice(index, 1);
},
});
return {
@ -114,6 +112,10 @@ export default defineComponent({
</script>
<style lang="scss">
::-webkit-scrollbar {
width: 0;
}
html,
body,
#app {
@ -124,10 +126,6 @@ body,
#app {
position: relative;
overflow: auto;
&::-webkit-scrollbar {
width: 0;
}
}
.magic-ui-container {

124
runtime/vue3/src/playground/App.vue
View File

@ -3,7 +3,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, nextTick, onMounted, provide, reactive, ref, watch } from 'vue';
import { computed, defineComponent, nextTick, provide, reactive, ref, watch } from 'vue';
import Core from '@tmagic/core';
import type { Id, MApp, MNode } from '@tmagic/schema';
@ -39,71 +39,69 @@ export default defineComponent({
page && window.magic.onPageElUpdate(page);
});
onMounted(() => {
window.magic?.onRuntimeReady({
getApp() {
return app;
},
window.magic?.onRuntimeReady({
getApp() {
return app;
},
updateRootConfig(config: MApp) {
console.log('update config', config);
root.value = config;
app?.setConfig(config, curPageId.value);
},
updateRootConfig(config: MApp) {
console.log('update config', config);
root.value = config;
app?.setConfig(config, curPageId.value);
},
updatePageId(id: Id) {
console.log('update page id', id);
curPageId.value = id;
app?.setPage(id);
},
updatePageId(id: Id) {
console.log('update page id', id);
curPageId.value = id;
app?.setPage(id);
},
getSnapElements() {
return Array.from(document.querySelectorAll<HTMLElement>('[class*=magic-ui][id]'));
},
getSnapElements() {
return Array.from(document.querySelectorAll<HTMLElement>('[class*=magic-ui][id]'));
},
select(id: Id) {
console.log('select config', id);
selectedId.value = id;
const el = document.getElementById(`${id}`);
if (el) return el;
// 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
},
select(id: Id) {
console.log('select config', id);
selectedId.value = id;
const el = document.getElementById(`${id}`);
if (el) return el;
// 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
},
add({ config }: UpdateData) {
console.log('add config', config);
if (!root.value) throw new Error('error');
if (!selectedId.value) throw new Error('error');
const path = getNodePath(selectedId.value, [root.value]);
const node = path.pop();
const parent = node?.items ? node : path.pop();
if (!parent) throw new Error('未找到父节点');
parent.items?.push(config);
},
add({ config }: UpdateData) {
console.log('add config', config);
if (!root.value) throw new Error('error');
if (!selectedId.value) throw new Error('error');
const path = getNodePath(selectedId.value, [root.value]);
const node = path.pop();
const parent = node?.items ? node : path.pop();
if (!parent) throw new Error('未找到父节点');
parent.items?.push(config);
},
update({ config }: UpdateData) {
console.log('update config', config);
if (!root.value) throw new Error('error');
const path = getNodePath(config.id, [root.value]);
const node = path.pop();
const parent = path.pop();
if (!node) throw new Error('未找到目标节点');
if (!parent) throw new Error('未找到父节点');
const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
parent.items.splice(index, 1, reactive(config));
},
update({ config }: UpdateData) {
console.log('update config', config);
if (!root.value) throw new Error('error');
const path = getNodePath(config.id, [root.value]);
const node = path.pop();
const parent = path.pop();
if (!node) throw new Error('未找到目标节点');
if (!parent) throw new Error('未找到父节点');
const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
parent.items.splice(index, 1, reactive(config));
},
remove({ id }: RemoveData) {
if (!root.value) throw new Error('error');
const path = getNodePath(id, [root.value]);
const node = path.pop();
if (!node) throw new Error('未找到目标元素');
const parent = path.pop();
if (!parent) throw new Error('未找到父元素');
const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
parent.items.splice(index, 1);
},
});
remove({ id }: RemoveData) {
if (!root.value) throw new Error('error');
const path = getNodePath(id, [root.value]);
const node = path.pop();
if (!node) throw new Error('未找到目标元素');
const parent = path.pop();
if (!parent) throw new Error('未找到父元素');
const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
parent.items.splice(index, 1);
},
});
return {
@ -114,6 +112,10 @@ export default defineComponent({
</script>
<style lang="scss">
::-webkit-scrollbar {
width: 0;
}
html,
body,
#app {
@ -124,10 +126,6 @@ body,
#app {
position: relative;
overflow: auto;
&::-webkit-scrollbar {
width: 0;
}
}
.magic-ui-container {