JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-13 06:49:48 +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节点上 * @param el 将页面挂载到该Dom节点上
*/ */
public async mount(el: HTMLDivElement) { public async mount(el: HTMLDivElement) {
if (this.iframe) { 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 {
throw Error('mount 失败'); 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> => { public getRuntime = (): Promise<Runtime> => {
@ -111,26 +113,34 @@ export default class StageRender extends EventEmitter {
} }
private loadHandler = async () => { 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) { if (this.render) {
const el = await this.render(this.core); const el = await this.render(this.core);
if (el) { if (el) {
this.iframe?.contentDocument?.body?.appendChild(el); this.contentWindow.document?.body?.appendChild(el);
} }
} }
this.emit('onload'); 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( this.contentWindow.postMessage(
{ {
tmagicRuntimeReady: true, 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(() => { useEffect(() => {
const emitData = { const emitData = {
config,
...methods, ...methods,
}; };

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

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

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

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

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

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