From 8e1e7ef0de470cffcb3c1bb133d8a55b316b6eb6 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 29 Jul 2022 16:56:12 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BF=AE=E6=94=B9onRuntimeReady?=
 =?UTF-8?q?=E6=8F=8F=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/src/tutorial/runtime.md | 68 +++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/docs/src/tutorial/runtime.md b/docs/src/tutorial/runtime.md
index dc6fba22..98908de0 100644
--- a/docs/src/tutorial/runtime.md
+++ b/docs/src/tutorial/runtime.md
@@ -149,12 +149,23 @@ devServer: {
 
 这是因为在runtime中无法直接获取到editor中的dsl，所以需要通过editor注入到window的magic api来交互
 
-在App.vue中通过监听message，来准备获取magic注入时机，然后调用magic.onRuntimeReady，示例代码如下
+> 如出现在runtime中出现magic为undefined， 可以尝试在App.vue中通过监听message，来准备获取magic注入时机，然后调用magic.onRuntimeReady，示例代码如下
+```js
+window.addEventListener('message', ({ data }) => {
+  if (!data.tmagicRuntimeReady) {
+    return;
+  }
 
+  window.magic?.onRuntimeReady({
+    // ...
+  });
+});
+```
 > 这里可能会出现editor抛出message的时候，runtime还没有执行到监听message的情况
 > 编辑器只在iframe onload事件中抛出message
 > 如果出现runtime中接收不到message的情况，可以尝试在onMounted的时候调用magic.onRuntimeReady
 
+
 ```ts
 import type { Magic } from '@tmagic/stage';
 
@@ -165,47 +176,40 @@ declare global {
 }
 ```
 
-
 ```ts
 import type { RemoveData, UpdateData } from '@tmagic/stage';
 import type { Id, MApp, MNode } from '@tmagic/schema';
 
 const root = ref<MApp>();
 
-window.addEventListener('message', ({ data }) => {
-  if (!data.tmagicRuntimeReady) {
-    return;
-  }
+window.magic?.onRuntimeReady({
+  /** 当编辑器的dsl对象变化时会调用 */
+  updateRootConfig(config: MApp) {
+    root.value = config;
+  },
 
-  window.magic?.onRuntimeReady({
-    /** 当编辑器的dsl对象变化时会调用 */
-    updateRootConfig(config: MApp) {
-      root.value = config;
-    },
+  /** 当编辑器的切换页面时会调用 */
+  updatePageId(id: Id) {
+    page.value = root.value?.items?.find((item) => item.id === id);
+  },
 
-    /** 当编辑器的切换页面时会调用 */
-    updatePageId(id: Id) {
-      page.value = root.value?.items?.find((item) => item.id === id);
-    },
+  /** 新增组件时调用 */
+  add({ config }: UpdateData) {
+    const parent = config.type === 'page' ? root.value : page.value;
+    parent.items?.push(config);
+  },
 
-    /** 新增组件时调用 */
-    add({ config }: UpdateData) {
-      const parent = config.type === 'page' ? root.value : page.value;
-      parent.items?.push(config);
-    },
+  /** 更新组件时调用 */
+  update({ config }: UpdateData) {
+    const index = page.value.items?.findIndex((child: MNode) => child.id === config.id);
+    page.value.items.splice(index, 1, reactive(config));
+  },
 
-    /** 更新组件时调用 */
-    update({ config }: UpdateData) {
-      const index = page.value.items?.findIndex((child: MNode) => child.id === config.id);
-      page.value.items.splice(index, 1, reactive(config));
-    },
-
-    /** 删除组件时调用 */
-    remove({ id }: RemoveData) {
-      const index = page.value.items?.findIndex((child: MNode) => child.id === id);
-      page.value.items.splice(index, 1);
-    },
-  });
+  /** 删除组件时调用 */
+  remove({ id }: RemoveData) {
+    const index = page.value.items?.findIndex((child: MNode) => child.id === id);
+    page.value.items.splice(index, 1);
+  },
 });
 
 ```