release v1.0.0-rc.11 (#138)

* fix(editor): 页面标题不要换行

* docs: 教程与stageCore

* fix(editor): runtime.updateRootConfig可以为空

* fix(editor): 编辑组件是获取parent需要获取到Proxy

* fix(editor): 默认page属性值加上layout

* fix(stage): magic注入时机应当在iframe onload之后

* chore: release v1.0.0-rc.11

* chore: 更新changlog

Co-authored-by: roymondchen <roymondchen@tencent.com>

CHANGELOG.md

@@ -1,43 +1,28 @@
-# [1.0.0-rc.10](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.7...v1.0.0-rc.10) (2022-06-15)
+# [1.0.0-rc.11](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.10...v1.0.0-rc.11) (2022-06-17)
+
+
+### Bug Fixes
+
+* **editor:** runtime.updateRootConfig可以为空 ([9ade1ab](https://github.com/Tencent/tmagic-editor/commit/9ade1ab64aee3d09231fd9693d60f74b3a25f8f3))
+* **editor:** 编辑组件是获取parent需要获取到Proxy ([6db8e07](https://github.com/Tencent/tmagic-editor/commit/6db8e07005ceacaef0a5520e9da97b784715d4c7))
+* **editor:** 页面标题不要换行 ([1bdafee](https://github.com/Tencent/tmagic-editor/commit/1bdafee2528312a8f9fa6b71310e43c4becb6688))
+* **editor:** 默认page属性值加上layout ([11c0190](https://github.com/Tencent/tmagic-editor/commit/11c01908d4f5ae69c997a3e094cc20d22818ec4d))
+* **stage:** magic注入时机应当在iframe onload之后 ([31a7748](https://github.com/Tencent/tmagic-editor/commit/31a7748ac835141549114f0646a5a913a5b114d0))
+
+# [1.0.0-rc.10](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.9...v1.0.0-rc.10) (2022-06-15)
 
 
 ### Bug Fixes
 
-* **editor:** page和container默认value加上items ([10577ae](https://github.com/Tencent/tmagic-editor/commit/10577aea68a63323bc1312faced84bcd5c616d1f))
 * **form:** 函数配置中添加config参数 ([7ad80e8](https://github.com/Tencent/tmagic-editor/commit/7ad80e848f81d3a96622540cce44f1fa10d9dc57))
-* **form:** 函数配置中添加config参数 ([eae9725](https://github.com/Tencent/tmagic-editor/commit/eae9725ccbbdbe8ffc9ded5af42993cff21bec77))
-* **stage:** 所有父节点中如果有translate，导致选中框定位出错 ([feff617](https://github.com/Tencent/tmagic-editor/commit/feff6177c97851dbe5457d4d59222c3f045ce864))
 
-
+# [1.0.0-rc.9](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.8...v1.0.0-rc.9) (2022-06-15)
-### Features
-
-* **docs:** 添加搜索 ([4e812c3](https://github.com/Tencent/tmagic-editor/commit/4e812c396de05286a990cfe8831b7cb20531b2e3))
-* **playground:** 优化form/table playground ([c570370](https://github.com/Tencent/tmagic-editor/commit/c57037030d652ff160a108d632ff79b9bac97e2a))
-* **playground:** 添加form、table playground入口 ([f808253](https://github.com/Tencent/tmagic-editor/commit/f80825331e373047d467bb189cc4e5857dac6dfa))
-* **playground:** 添加不同设备切换 ([9f23cd6](https://github.com/Tencent/tmagic-editor/commit/9f23cd6361cce60c10178f39e133e13aa71a62ca))
-* 支持配置updateDragEl方法来调制选中框 ([154860c](https://github.com/Tencent/tmagic-editor/commit/154860c66c149b72537029b351401a0e90179e9c))
-
-
-
-# [1.0.0-rc.9](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.7...v1.0.0-rc.9) (2022-06-15)
 
 
 ### Bug Fixes
 
-* **editor:** page和container默认value加上items ([10577ae](https://github.com/Tencent/tmagic-editor/commit/10577aea68a63323bc1312faced84bcd5c616d1f))
 * **stage:** 所有父节点中如果有translate，导致选中框定位出错 ([c6c4461](https://github.com/Tencent/tmagic-editor/commit/c6c44618f4eea197bbbe0f7d9ebcb07c2be03912))
 
-
-### Features
-
-* **docs:** 添加搜索 ([4e812c3](https://github.com/Tencent/tmagic-editor/commit/4e812c396de05286a990cfe8831b7cb20531b2e3))
-* **playground:** 优化form/table playground ([c570370](https://github.com/Tencent/tmagic-editor/commit/c57037030d652ff160a108d632ff79b9bac97e2a))
-* **playground:** 添加form、table playground入口 ([f808253](https://github.com/Tencent/tmagic-editor/commit/f80825331e373047d467bb189cc4e5857dac6dfa))
-* **playground:** 添加不同设备切换 ([9f23cd6](https://github.com/Tencent/tmagic-editor/commit/9f23cd6361cce60c10178f39e133e13aa71a62ca))
-* 支持配置updateDragEl方法来调制选中框 ([154860c](https://github.com/Tencent/tmagic-editor/commit/154860c66c149b72537029b351401a0e90179e9c))
-
-
-
 # [1.0.0-rc.8](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.7...v1.0.0-rc.8) (2022-06-15)
 
 

docs/src/.vuepress/config.ts

@@ -55,7 +55,7 @@ const sidebar = {
   ],
   editorApi: [
     {
-      text: '编辑器',
+      text: '编辑器(@tmagic/editor)',
       children: [
         '/api/editor/editor',
         '/api/editor/services',
@@ -64,7 +64,7 @@ const sidebar = {
   ],
   formApi: [
     {
-      text: '表单',
+      text: '表单(@tmagic/form)',
       children: [
         '/api/form/form',
       ]
@@ -103,6 +103,26 @@ const sidebar = {
         '/api/form-config/relate',
       ]
     },
+  ],
+  stageApi: [
+    {
+      text: '画布(@tmagic/stage)',
+      children: [
+        '/api/stage/core',
+        '/api/stage/mask',
+        '/api/stage/render',
+        '/api/stage/drag-resize',
+      ]
+    },
+  ],
+  tutorial: [
+    {
+      text: '教程',
+      children: [
+        '/tutorial/hello-world',
+        '/tutorial/runtime',
+      ]
+    },
   ]
 };
 
@@ -150,7 +170,14 @@ export default defineUserConfig({
             text: '表单配置',
             link: '/api/form-config/layout'
           },
+          {
+            text: '画布(Stage)',
+            link: '/api/stage/core'
+          },
         ],
+      }, {
+        text: '教程',
+        link: '/tutorial/hello-world',
       }, {
         text: '查看源码',
         link: 'https://github.com/Tencent/tmagic-editor'
@@ -168,6 +195,8 @@ export default defineUserConfig({
       '/api/editor': sidebar.editorApi,
       '/api/form': sidebar.formApi,
       '/api/form-config': sidebar.formConfig,
+      '/api/stage': sidebar.stageApi,
+      '/tutorial': sidebar.tutorial,
     },
     lastUpdated: false,
     contributors: false,

docs/src/api/editor/editor.md

@@ -2,7 +2,7 @@
 
 ## props
 
-### data
+### modelValue
 
 - **类型：** [MApp](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)[]
   
@@ -185,7 +185,7 @@ import { ArrowLeft, Coin } from '@element-plus/icons';
   
 - **详情：**
   
-  中间工作区域中画布渲染的内容
+  中间工作区域中画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
 
 - **示例：**
 
@@ -201,7 +201,7 @@ import { ArrowLeft, Coin } from '@element-plus/icons';
   
 - **详情：**
   
-  中间工作区域中画布通过iframe渲染时的页面url
+  runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径
 
 ### propsConfigs
 
@@ -281,6 +281,27 @@ import { ArrowLeft, Coin } from '@element-plus/icons';
   
   画布的大小配置
 
+### autoScrollIntoView
+
+- **类型：** boolean
+  
+- **默认值：** undefined
+  
+- **详情：**
+  
+选中组件时，知否自动滚动改组件到可视区域
+
+### updateDragEl
+
+- **类型：** (el: HTMLDivElement, target: HTMLElement) => void;
+  
+- **默认值：** undefined
+  
+- **详情：**
+  
+当选中框与组件不贴合时，可以通过此方法进行调整
+
+
 ## slots
 
 ### nav

docs/src/api/editor/services.md

@@ -43,7 +43,7 @@ editorService.set('node', node);
 
 - **参数：**
 
-  - `{'root' | 'page' | 'parent' | 'node'} name`
+  - `{'root' | 'page' | 'parent' | 'node' | 'stage' | 'highlightNode' | 'pageLength'} name`
 
 - **返回：**
 
@@ -61,6 +61,14 @@ editorService.set('node', node);
 
   'node': 当前选中的节点
 
+  'stage': [StageCore](../../api/stage/core.md)实例
+
+  'highlightNode': 当前高亮的Dom
+
+  'modifiedNodeIds': 当前已修改未保存的组件id
+
+  'pageLength': 当前的页面数量
+
 - **示例：**
 
 ```js

docs/src/api/stage/core.md

@@ -0,0 +1,286 @@
+# StageCore
+
+## 配置
+
+### canSelect
+
+- **类型：** Function
+  
+- **默认值：** (el: HTMLElement) => !!el.id
+  
+- **详情：**
+  
+  判断Dom节点是否能被选中
+
+### moveableOptions
+
+- **类型：** (el: HTMLElement) => boolean
+  
+- **默认值：** (el: HTMLElement) => !!el.id
+  
+- **详情：**
+  
+  选中框配置选项，使用的是[moveable](https://github.com/daybrush/moveable)第三方库
+  
+  ### runtimeUrl
+
+- **类型：** string
+  
+- **默认值：** undefined
+  
+- **详情：**
+  
+  runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径
+  
+  ### render
+
+- **类型：** (renderer: StageCore) => Promise\<HTMLElement\> | HTMLElement
+  
+- **默认值：** undefined
+  
+- **详情：**
+  
+  画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
+
+### autoScrollIntoView
+
+- **类型：** boolean
+  
+- **默认值：** undefined
+  
+- **详情：**
+  
+选中组件时，知否自动滚动改组件到可视区域
+
+
+### updateDragEl
+
+- **类型：** (el: HTMLDivElement, target: HTMLElement) => void;
+  
+- **默认值：** undefined
+  
+- **详情：**
+  
+当选中框与组件不贴合时，可以通过此方法进行调整
+
+
+## 属性
+
+### selectedDom
+
+- **类型：** Element | undefined
+  
+- **详情：**
+  
+当前选中的Dom
+
+### highlightedDom
+
+- **类型：** Element | undefined
+  
+- **详情：**
+  
+当前高亮的Dom
+
+### renderer
+
+- **类型：** [StageRender](./render.md)
+  
+- **详情：**
+  
+StageRender实例
+
+### mask
+
+- **类型：** [StageMask](./mask.md)
+  
+- **详情：**
+  
+StageMask实例
+
+
+### dr
+
+- **类型：** [StageDragResize](./drag-resize.md)
+  
+- **详情：**
+  
+StageDragResize实例
+
+### config
+
+- **类型：** Object
+  
+- **详情：**
+  
+初始化配置
+
+### container
+
+- **类型：** HTMLDivElement
+  
+- **详情：**
+  
+画布根节点
+
+## 方法
+
+### mount
+
+- **参数：**
+
+  - `{HTMLDivElement} el` 将stage挂载到该Dom节点上
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  挂载Dom节点
+
+### clearGuides
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  清空所有参考线
+
+### destroy
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  销毁实例
+
+
+### setElementFromPoint
+
+- **参数：**
+
+  - `{MouseEvent} event`
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+
+### select
+
+- **参数：**
+
+  - `{Id | HTMLElement} idOrEl` 组件Dom节点的id属性，或者Dom节点
+  - `{MouseEvent} MouseEvent`
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **用法：**
+
+  选中组件
+
+### update
+
+- **参数：**
+
+  - `{UpdateData} data` 更新的数据
+
+```ts
+interface UpdateData {
+  config: MNode;
+  root: MApp;
+}
+```
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **用法：**
+
+  更新选中的节点
+
+### highlight
+
+- **参数：**
+
+  - `{HTMLElement | Id} idOrEl` 组件Dom节点的id属性，或者Dom节点
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **用法：**
+
+  高亮选中组件
+
+### sortNode
+
+- **参数：**
+
+  - `{SortEventData} data`
+
+```ts
+interface SortEventData {
+  src: Id;
+  dist: Id;
+  root?: MApp;
+}
+```
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+### add
+
+- **参数：**
+
+  - `{UpdateData} data`
+
+
+```ts
+interface UpdateData {
+  config: MNode;
+  root: MApp;
+}
+```
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+### remove
+
+- **参数：**
+
+  - `{UpdateData} data`
+
+
+```ts
+interface UpdateData {
+  config: MNode;
+  root: MApp;
+}
+```
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+### setZoom
+
+- **参数：**
+
+  - `{number} zoom`
+
+- **返回：**
+
+  - `{void}`

docs/src/api/stage/drag-resize.md

@@ -0,0 +1,182 @@
+# StageDragResize
+
+## 配置
+
+### core
+
+- **类型：** [StageCore](./core.md)
+  
+- **详情：**
+  
+StageCore实例
+
+### container
+
+- **类型：** HTMLElement
+  
+- **详情：**
+  
+选中框容器
+
+## 属性
+
+### core
+
+- **类型：** [StageCore](./core.md)
+  
+- **详情：**
+
+### container
+
+- **类型：** HTMLElement
+  
+- **详情：**
+  
+选中框容器
+
+### target
+
+- **类型：** HTMLElement
+  
+- **详情：**
+  
+目标节点
+
+### dragEl
+
+- **类型：** HTMLElement
+  
+- **详情：**
+  
+目标节点在蒙层中的占位节点
+
+### moveable
+
+- **类型：** [moveable](https://github.com/daybrush/moveable)
+  
+- **详情：**
+  
+moveable实例
+
+### horizontalGuidelines
+
+- **类型：** number[]
+  
+- **详情：**
+  
+水平参考线
+
+### verticalGuidelines
+
+- **类型：** number[]
+  
+- **详情：**
+  
+垂直参考线
+
+### elementGuidelines
+
+- **类型：** HTMLElement[]
+  
+- **详情：**
+  
+对齐元素集合
+
+### mode
+
+- **类型：** Mode
+
+```ts
+enum Mode {
+  /** 绝对定位布局 */
+  ABSOLUTE = 'absolute',
+  /** 固定定位布局 */
+  FIXED = 'fixed',
+  /** 流式布局 */
+  SORTABLE = 'sortable',
+}
+```
+  
+- **详情：**
+  
+布局方式：流式布局、绝对定位、固定定位
+
+## 方法
+
+
+### select
+
+- **参数：**
+
+  - `{HTMLElement} el` 组件Dom节点
+  - `{MouseEvent} MouseEvent`
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  将选中框渲染并覆盖到选中的组件Dom节点上方
+
+  当选中的节点是不是absolute时，会创建一个新的节点出来作为拖拽目标
+
+### updateMoveable
+
+- **参数：**
+
+  - `{HTMLElement} el` 组件Dom节点
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  初始化选中框并渲染出来
+
+### setGuidelines
+
+- **参数：**
+
+  - `{GuidesType} type` 参考线类型
+  - `{number[]} guidelines` 参考线偏移值
+
+```ts
+/** 参考线类型 */
+export enum GuidesType {
+  /** 水平 */
+  HORIZONTAL = 'horizontal',
+  /** 垂直 */
+  VERTICAL = 'vertical',
+}
+```
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  设置参考线
+
+### clearGuides
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  情况参考线
+
+### destroy
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  销毁实例
+

docs/src/api/stage/mask.md

@@ -0,0 +1,173 @@
+# StageMask
+
+## 配置
+
+### core
+
+- **类型：** [StageCore](./core.md)
+  
+- **详情：**
+  
+StageCore实例
+
+## 属性
+
+### content
+
+- **类型：** HTMLDivElement
+  
+- **详情：**
+  
+蒙层的Dom节点
+
+### wrapper
+
+- **类型：** HTMLDivElement
+  
+- **详情：**
+  
+蒙层的容器Dom节点，用于实现滚动
+
+### core
+
+- **类型：** [StageCore](./core.md)
+  
+- **详情：**
+  
+StageCore实例
+
+### page
+
+- **类型：** HTMLElement | null
+  
+- **详情：**
+  
+当前页面组件Dom节点
+
+### pageScrollParent
+
+- **类型：** HTMLElement | null
+  
+- **详情：**
+  
+页面组件的滚动父节点
+
+### scrollTop
+
+- **类型：** number
+  
+- **详情：**
+  
+垂直滚动位移
+
+### scrollLeft
+
+- **类型：** number
+  
+- **详情：**
+  
+水平滚动位移
+
+### width
+
+- **类型：** number
+  
+- **详情：**
+  
+蒙层宽度，不应该手动设置，会自动同步[page](#page)
+
+### height
+
+- **类型：** number
+  
+- **详情：**
+  
+蒙层高度，不应该手动设置，会自动同步[page](#page)
+
+### wrapperHeight
+
+- **类型：** number
+  
+- **详情：**
+  
+蒙层容器高度
+
+### wrapperWidth
+
+- **类型：** number
+  
+- **详情：**
+  
+蒙层容器宽度
+
+### maxScrollTop
+
+- **类型：** number
+  
+- **详情：**
+  
+最大垂直滚动位移
+
+### maxScrollLeft
+
+- **类型：** number
+  
+- **详情：**
+  
+最大水平滚动位移
+
+## 方法
+
+### mount
+
+- **参数：**
+
+  - `{HTMLDivElement} el` 将蒙层挂载到该Dom节点上
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  挂载Dom节点
+
+### scrollIntoView
+
+- **参数：**
+
+  - `{Element} el` 需要滚动的节点
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  将指定节点滚动到可视区域
+
+### destroy
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  销毁实例
+
+### setLayout
+
+- **参数：**
+
+  - `{Element} el`
+
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  根据节点设置模式，固定模式wrap与content宽高保持一直
+

docs/src/api/stage/render.md

@@ -0,0 +1,110 @@
+# StageRender
+
+## 配置
+
+### core
+
+- **类型：** [StageCore](./core.md)
+  
+- **详情：**
+  
+StageCore实例
+
+## 属性
+
+### core
+
+- **类型：** [StageCore](./core.md)
+  
+- **详情：**
+
+StageCore实例
+
+### contentWindow
+
+- **类型：** RuntimeWindow | null
+
+```ts
+interface RuntimeWindow extends Window {
+  magic: Magic;
+}
+
+interface Magic {
+  /** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
+  onPageElUpdate: (el: HTMLElement) => void;
+
+  onRuntimeReady: (runtime: Runtime) => void;
+}
+```
+  
+- **详情：**
+
+组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow
+
+### runtime
+
+- **类型：** Runtime | null
+
+```ts
+interface Runtime {
+  getApp?: () => Core;
+  beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
+  // 编辑器Dsl整个改变时调用
+  updateRootConfig?: (config: MApp) => void;
+  // 选择页面时调用
+  updatePageId?: (id: Id) => void;
+  // 选中组件时调用
+  select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
+  // 添加组件时调用
+  add?: (data: UpdateData) => void;
+  // 更新组件时调用
+  update?: (data: UpdateData) => void;
+  // 流式布局下拖动组件后调用
+  sortNode?: (data: SortEventData) => void;
+  // 删除组件时调用
+  remove?: (data: RemoveData) => void;
+}
+```
+  
+- **详情：**
+
+用于编辑器与画布的交互
+
+### iframe
+
+- **类型：** HTMLIFrameElement
+  
+- **详情：**
+
+### runtimeUrl
+
+- **类型：** string
+  
+- **详情：**
+
+## 方法
+
+### destroy
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  销毁实例
+
+### mount
+
+- **参数：**
+
+  - `{HTMLDivElement} el` 将页面挂载到该Dom节点上
+
+- **返回：**
+
+  - `{void}`
+
+- **用法：**
+
+  挂载Dom节点
+

docs/src/tutorial/hello-world.md

@@ -0,0 +1,287 @@
+# 1.Hello World
+
+## 环境准备
+
+使用[@vue/cli](https://cli.vuejs.org/zh/guide/installation.html)初始化项目
+
+```
+npm install -g @vue/cli
+```
+
+> 由于大部分新的webpack插件都已不支持webpack5以下，建议使用@vue/cli@5.0.0及以上版本
+> 如现有项目是webpack4的，需要注意安装node_module时使用对应的版本
+> 使用@vue/cli@4的，需要在vue.config.ts 中加入 transpileDependencies: [/@tmagic/]
+
+::: tip
+虽然这里使用@vue/cli作为示例教程，但是更推荐使用[vite](https://github.com/vitejs/vite)
+:::
+
+::: warning
+:warning: 如用node 16安装不成功，可以尝试用node 14
+:::
+
+## 创建项目
+
+[关于@vue/cli的详细教程可以查看官方文档](https://cli.vuejs.org/zh/guide/installation.html)
+
+```
+vue create hello-world
+
+cd hello-world
+```
+
+得到项目目录如下
+
+```
+.
+└─hello-world
+   └─ public
+   └─ test
+   └─ src
+      ├─ APP.vue
+      ├─ main.vue
+      └─ components
+         └─ HelloWorld.vue
+   └─ vue.config.js
+   ...
+```
+
+> src/components在本次教程中暂时没有用到，可以删掉；
+
+## 添加依赖
+
+```
+npm install --save @tmagic/editor @tmagic/form element-plus
+```
+
+## 注册组件
+
+将以下代码覆盖到src/magic.ts中
+
+```ts
+import 'element-plus/dist/index.css';
+import '@tmagic/editor/dist/style.css';
+import '@tmagic/form/dist/style.css';
+
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+
+import TMagicEditor from '@tmagic/editor';
+import TMagicForm from '@tmagic/form';
+
+import App from './App.vue';
+
+createApp(App)
+  .use(ElementPlus)
+  .use(TMagicEditor)
+  .use(TMagicForm)
+  .mount('#app');
+
+```
+
+## 渲染编辑器
+
+将以下代码覆盖到src/App.vue中
+
+```vue
+<template>
+  <m-editor
+    v-model="value"
+    :render="render"
+    :component-group-list="componentGroupList"
+  ></m-editor>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref();
+
+const componentGroupList = ref([]);
+
+const render = () => window.document.createElement('div');
+</script>
+
+<style>
+html,
+body,
+#app,
+.m-editor {
+  height: 100vh;
+}
+
+body {
+  margin: 0;
+}
+</style>
+
+```
+
+## 运行项目
+
+```
+npm run serve
+```
+
+到这里一个空白的编辑器就运行起来了。不出意外，通过浏览器访问http://localhost:8081/，将看到
+
+<img src="/tutorial/one/init.png" />
+
+## 添加组件列表
+
+api详情：[componentGroupList](../api/editor/editor.md#componentGroupList)
+
+```ts
+const componentGroupList = ref([
+  {
+    title: '组件列表',
+    items: [
+      {
+        icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png',
+        text: 'HelloWorld',
+        type: 'hello-world',
+      },
+    ],
+  },
+]);
+```
+
+到这里，左侧会出现一个叫HelloWorld的爱心图标，点击它会发现没有反应，代开控制台会发现有error；这是因为还没有创建页面
+
+点击中间的新增页面也会发现没有反应，这是因为没有编辑器初始值，只需要给value赋上初始值就可以了
+
+## 设置编辑器初始值
+
+api详情：[modelValue](../api/editor/editor.md#modelValue)
+
+```ts
+const value = ref({
+  type: 'app',
+  items: [],
+});
+```
+
+加上初始值后，点击新增页面就可以渲染出一个画布了，但是点击添加HelloWorld组件依然没有反应
+
+这是因为这时的编辑器并能理解HelloWorld是什么，需要在[render](../api/editor/editor.html#render)函数中处理
+
+## 渲染
+
+api详情：[render](../api/editor/editor.md#render)
+
+```ts
+const render = () => {
+  const root = window.document.createElement('div');
+  const page = value.value.items[0];
+
+  if (!page) return root;
+
+  root.id = `${page.value.id}`;
+
+  createApp(
+    {
+      template: '<p v-for="node in config.items" :key="node.id" :id="node.id">hello world</p>',
+      props: ['config'],
+    },
+    {
+      config: page,
+    },
+  ).mount(root);
+
+  return root;
+};
+```
+
+这里用到了动态编译Vue模板，所以需要在vue.config.js中添加vue alias
+
+```js
+configureWebpack: {
+  resolve: {
+    alias: {
+      vue$: 'vue/dist/vue.esm-bundler.js',
+    },
+  },
+}
+```
+
+> render函数中获取page是通过value.value.items[0]，这样只是表示第一个页面，如果页面有多个页面就会有问题
+> 可以通过[editorService.get('page')](../api/editor/services.md#get)获取到当前选中的页面
+
+```ts
+import { editorService } from '@tmagic/editor';
+import type { MPage } from '@tmagic/schema';
+
+const page = computed(() => editorService.get<MPage>('page'))
+```
+
+到这已经能渲染出HelloWorld组件了，但是会发现无法选中，因为这时并不知道画布中的Dom已经发生变化，所以需要通知编辑器
+
+需要调用
+
+```ts
+renderer.iframe.contentWindow.magic?.onRuntimeReady({});
+renderer.iframe.contentWindow.magic?.onPageElUpdate(root);
+```
+> render函数接收一个stageCore参数 [StageCore](../api/stage/core.md)
+
+最终完整的render函数实现
+
+```ts
+const render = async ({ renderer }: StageCore) => {
+  const root = window.document.createElement('div');
+
+  if (!page.value) return root;
+
+  const { width = 375, height = 1700 } = page.value.style || {};
+
+  root.id = `${page.value.id}`;
+  root.style.cssText = `
+    width: ${width}px;
+    height: ${height}px;
+  `;
+
+  createApp(
+    {
+      template: '<div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div>',
+      props: ['config'],
+    },
+    {
+      config: page.value,
+    },
+  ).mount(root);
+
+  renderer.on('onload', () => {
+    const style = window.document.createElement('style');
+    // 隐藏滚动条，重置默认样式
+    style.innerHTML = `
+      body {
+        overflow: auto;
+      }
+
+      html,body {
+        height: 100%; margin: 0;padding: 0;
+      }
+      
+      html::-webkit-scrollbar {
+        width: 0 !important;
+        display: none;
+      }
+    `;
+
+    renderer.iframe.contentDocument.head.appendChild(style);
+
+    renderer.iframe.contentWindow.magic?.onPageElUpdate(root);
+    renderer.iframe.contentWindow.magic?.onRuntimeReady({});
+  });
+
+  return root;
+};
+```
+
+以上就是一个简单的搭建编辑器的示例，安装上面的步骤完成后会发现，可以添加组件，也可选中组件，但是无法拖动，配置属性中的样式也无法生效，这是因为上述的render函数并不完整，没有处理dsl中style，下一节将详细介绍runtime的搭建，将不再使用render函数的方式而是使用[runtimeUrl](../api/editor/editor.md#runtimeurl)。
+
+::: tip
+并不是render函数不好，但是从设计上将，render函数还是让渲染逻辑落到了编辑中，@tmagic/editor的设计是希望做到渲染也编辑器解耦
+:::
+
+[源码](https://github.com/jia000/tmagic-tutorial)

docs/src/tutorial/runtime.md

@@ -0,0 +1 @@
+# 2.Runtime

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "tmagic",
   "private": true,
   "packageManager": "pnpm@7.1.9",

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/core",
   "sideEffects": [
     "dist/*"
@@ -33,7 +33,7 @@
     "vue"
   ],
   "dependencies": {
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
     "events": "^3.3.0"
   },
   "devDependencies": {

packages/editor/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -43,11 +43,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "1.0.0-rc.10",
+    "@tmagic/core": "1.0.0-rc.11",
-    "@tmagic/form": "1.0.0-rc.10",
+    "@tmagic/form": "1.0.0-rc.11",
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
-    "@tmagic/stage": "1.0.0-rc.10",
+    "@tmagic/stage": "1.0.0-rc.11",
-    "@tmagic/utils": "1.0.0-rc.10",
+    "@tmagic/utils": "1.0.0-rc.11",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
@@ -60,7 +60,7 @@
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.0.0-rc.10",
+    "@tmagic/form": "1.0.0-rc.11",
     "element-plus": "^2.2.0",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.0"

packages/editor/src/layouts/workspace/Stage.vue

@@ -123,7 +123,7 @@ export default defineComponent({
       stage?.on('runtime-ready', (rt) => {
         runtime = rt;
         // toRaw返回的值是一个引用而非快照，需要cloneDeep
-        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
         page.value?.id && runtime?.updatePageId?.(page.value.id);
         setTimeout(() => {
           node.value && stage?.select(toRaw(node.value.id));
@@ -138,7 +138,7 @@ export default defineComponent({
 
     watch(root, (root) => {
       if (runtime && root) {
-        runtime.updateRootConfig(cloneDeep(toRaw(root)));
+        runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
       }
     });
 

packages/editor/src/services/editor.ts

@@ -108,10 +108,14 @@ class Editor extends BaseService {
   /**
    * 根据id获取组件、组件的父组件以及组件所属的页面节点
    * @param {number | string} id 组件id
+   * @param {boolean} raw 是否使用toRaw
    * @returns {EditorNodeInfo}
    */
-  public getNodeInfo(id: Id): EditorNodeInfo {
+  public getNodeInfo(id: Id, raw = true): EditorNodeInfo {
-    const root = toRaw(this.get<MApp | null>('root'));
+    let root = this.get<MApp | null>('root');
+    if (raw) {
+      root = toRaw(root);
+    }
     if (!root) return {};
 
     if (id === root.id) {
@@ -141,21 +145,23 @@ class Editor extends BaseService {
   /**
    * 根据ID获取指点节点配置
    * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
    * @returns 组件节点配置
    */
-  public getNodeById(id: Id): MNode | undefined {
+  public getNodeById(id: Id, raw = true): MNode | undefined {
-    const { node } = this.getNodeInfo(id);
+    const { node } = this.getNodeInfo(id, raw);
     return node;
   }
 
   /**
    * 根据ID获取指点节点的父节点配置
    * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
    * @returns 指点组件的父节点配置
    */
-  public getParentById(id: Id): MContainer | undefined {
+  public getParentById(id: Id, raw = true): MContainer | undefined {
     if (!this.get<MApp | null>('root')) return;
-    const { parent } = this.getNodeInfo(id);
+    const { parent } = this.getNodeInfo(id, raw);
     return parent;
   }
 
@@ -279,7 +285,7 @@ class Editor extends BaseService {
     } else if (curNode.items) {
       parentNode = curNode;
     } else {
-      parentNode = this.getParentById(curNode.id);
+      parentNode = this.getParentById(curNode.id, false);
     }
 
     if (!parentNode) throw new Error('未找到父元素');
@@ -332,7 +338,7 @@ class Editor extends BaseService {
 
     if (!root) throw new Error('没有root');
 
-    const { parent, node: curNode } = this.getNodeInfo(node.id);
+    const { parent, node: curNode } = this.getNodeInfo(node.id, false);
 
     if (!parent || !curNode) throw new Error('找不要删除的节点');
 
@@ -384,7 +390,7 @@ class Editor extends BaseService {
   public async update(config: MNode): Promise<MNode> {
     if (!config?.id) throw new Error('没有配置或者配置缺少id值');
 
-    const info = this.getNodeInfo(config.id);
+    const info = this.getNodeInfo(config.id, false);
 
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 

packages/editor/src/theme/page-bar.scss

@@ -25,6 +25,7 @@
     justify-items: center;
     align-items: center;
     background-color: #f3f3f3;
+    white-space: nowrap;
 
     &.active {
       background-color: #fff;

packages/editor/src/utils/props.ts

@@ -248,6 +248,7 @@ export const getDefaultPropsValue = (type: string, id: string) =>
     ? {
         type,
         id,
+        layout: 'absolute',
         style: {},
         name: type,
         items: [],

packages/form/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/form",
   "sideEffects": [
     "dist/*",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "1.0.0-rc.10",
+    "@tmagic/utils": "1.0.0-rc.11",
     "element-plus": "^2.2.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.2",

packages/schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/schema",
   "sideEffects": false,
   "main": "dist/tmagic-schema.umd.js",

packages/stage/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.0.0-rc.10",
+    "@tmagic/core": "1.0.0-rc.11",
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
-    "@tmagic/utils": "1.0.0-rc.10",
+    "@tmagic/utils": "1.0.0-rc.11",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.29.4",

packages/stage/src/StageRender.ts

@@ -81,10 +81,6 @@ export default class StageRender extends EventEmitter {
       }
 
       el.appendChild<HTMLIFrameElement>(this.iframe);
-
-      this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
-
-      this.contentWindow.magic = this.getMagicApi();
     } else {
       throw Error('mount 失败');
     }
@@ -113,7 +109,9 @@ export default class StageRender extends EventEmitter {
   }
 
   private loadHandler = async () => {
-    this.emit('onload');
+    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+
+    this.contentWindow.magic = this.getMagicApi();
 
     if (this.render) {
       const el = await this.render(this.core);
@@ -121,5 +119,7 @@ export default class StageRender extends EventEmitter {
         this.iframe?.contentDocument?.body?.appendChild(el);
       }
     }
+
+    this.emit('onload');
   };
 }

packages/stage/src/types.ts

@@ -105,7 +105,7 @@ export interface Runtime {
   getApp?: () => Core;
   beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
   getSnapElements?: (el?: HTMLElement) => HTMLElement[];
-  updateRootConfig: (config: MApp) => void;
+  updateRootConfig?: (config: MApp) => void;
   updatePageId?: (id: Id) => void;
   select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
   add?: (data: UpdateData) => void;

packages/table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/table",
   "sideEffects": [
     "dist/*"
@@ -30,13 +30,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form": "1.0.0-rc.10",
+    "@tmagic/form": "1.0.0-rc.11",
     "element-plus": "^2.2.0",
     "lodash-es": "^4.17.21",
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.0.0-rc.10",
+    "@tmagic/form": "1.0.0-rc.11",
     "element-plus": "^2.2.0",
     "vue": "^3.2.0"
   },

packages/ui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmagic/ui-react",
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "main": "src/index.ts",
   "engines": {
     "node": ">=14"
@@ -13,7 +13,7 @@
     "react:build": "tsc && vite build"
   },
   "dependencies": {
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
     "qrcode": "^1.5.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"

packages/ui-vue2/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/ui-vue2",
   "main": "src/index.ts",
   "engines": {
@@ -10,7 +10,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
     "@vue/composition-api": "1.0.5",
     "qrcode": "^1.5.0",
     "vue": "^2.6.14"

packages/ui/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/ui",
   "main": "src/index.ts",
   "engines": {
@@ -11,7 +11,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
     "delegate": "^3.2.0",
     "qrcode": "^1.5.0",
     "tiny-emitter": "^2.1.0",

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/utils",
   "main": "dist/tmagic-utils.umd.js",
   "module": "dist/tmagic-utils.es.js",
@@ -22,7 +22,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
     "moment": "^2.29.2"
   },
   "devDependencies": {

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmagic-playground",
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "private": true,
   "scripts": {
     "clean:top": "rimraf dist",
@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/editor": "1.0.0-rc.10",
+    "@tmagic/editor": "1.0.0-rc.11",
-    "@tmagic/form": "1.0.0-rc.10",
+    "@tmagic/form": "1.0.0-rc.11",
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
-    "@tmagic/stage": "1.0.0-rc.10",
+    "@tmagic/stage": "1.0.0-rc.11",
-    "@tmagic/utils": "1.0.0-rc.10",
+    "@tmagic/utils": "1.0.0-rc.11",
     "element-plus": "^2.2.0",
     "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",

pnpm-lock.yaml

@@ -105,7 +105,7 @@ importers:
 
   packages/core:
     specifiers:
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
       '@types/events': ^3.0.0
       '@types/node': ^15.12.4
       events: ^3.3.0
@@ -126,11 +126,11 @@ importers:
     specifiers:
       '@babel/core': ^7.18.0
       '@element-plus/icons': 0.0.11
-      '@tmagic/core': 1.0.0-rc.10
+      '@tmagic/core': 1.0.0-rc.11
-      '@tmagic/form': 1.0.0-rc.10
+      '@tmagic/form': 1.0.0-rc.11
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
-      '@tmagic/stage': 1.0.0-rc.10
+      '@tmagic/stage': 1.0.0-rc.11
-      '@tmagic/utils': 1.0.0-rc.10
+      '@tmagic/utils': 1.0.0-rc.11
       '@types/events': ^3.0.0
       '@types/lodash-es': ^4.17.4
       '@types/node': ^15.12.4
@@ -191,7 +191,7 @@ importers:
     specifiers:
       '@babel/core': ^7.18.0
       '@element-plus/icons': 0.0.11
-      '@tmagic/utils': 1.0.0-rc.10
+      '@tmagic/utils': 1.0.0-rc.11
       '@types/lodash-es': ^4.17.4
       '@types/node': ^15.12.4
       '@types/sortablejs': ^1.10.7
@@ -247,9 +247,9 @@ importers:
   packages/stage:
     specifiers:
       '@scena/guides': ^0.17.0
-      '@tmagic/core': 1.0.0-rc.10
+      '@tmagic/core': 1.0.0-rc.11
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
-      '@tmagic/utils': 1.0.0-rc.10
+      '@tmagic/utils': 1.0.0-rc.11
       '@types/events': ^3.0.0
       '@types/lodash-es': ^4.17.4
       '@types/node': ^15.12.4
@@ -281,7 +281,7 @@ importers:
 
   packages/table:
     specifiers:
-      '@tmagic/form': 1.0.0-rc.10
+      '@tmagic/form': 1.0.0-rc.11
       '@types/color': ^3.0.1
       '@types/lodash-es': ^4.17.4
       '@types/node': ^15.12.4
@@ -317,7 +317,7 @@ importers:
   packages/ui:
     specifiers:
       '@testing-library/vue': ^6.4.2
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
       '@types/qrcode': ^1.4.2
       '@vue/compiler-sfc': ^3.2.0
       '@vue/test-utils': ^2.0.0
@@ -339,7 +339,7 @@ importers:
 
   packages/ui-react:
     specifiers:
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
       '@types/react': ^17.0.37
       '@types/react-dom': ^17.0.11
       qrcode: ^1.5.0
@@ -358,7 +358,7 @@ importers:
 
   packages/ui-vue2:
     specifiers:
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
       '@vue/composition-api': 1.0.5
       qrcode: ^1.5.0
       vite: ^2.3.7
@@ -377,7 +377,7 @@ importers:
 
   packages/utils:
     specifiers:
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
       '@types/node': ^15.12.4
       moment: ^2.29.2
       typescript: ^4.3.4
@@ -395,11 +395,11 @@ importers:
   playground:
     specifiers:
       '@element-plus/icons': 0.0.11
-      '@tmagic/editor': 1.0.0-rc.10
+      '@tmagic/editor': 1.0.0-rc.11
-      '@tmagic/form': 1.0.0-rc.10
+      '@tmagic/form': 1.0.0-rc.11
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
-      '@tmagic/stage': 1.0.0-rc.10
+      '@tmagic/stage': 1.0.0-rc.11
-      '@tmagic/utils': 1.0.0-rc.10
+      '@tmagic/utils': 1.0.0-rc.11
       '@types/node': ^15.12.4
       '@types/serialize-javascript': ^5.0.1
       '@vitejs/plugin-legacy': ^1.8.2
@@ -441,8 +441,8 @@ importers:
 
   runtime/react:
     specifiers:
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
-      '@tmagic/stage': 1.0.0-rc.10
+      '@tmagic/stage': 1.0.0-rc.11
       '@types/react': ^17.0.37
       '@types/react-dom': ^17.0.11
       '@vitejs/plugin-react-refresh': ^1.3.1
@@ -466,8 +466,8 @@ importers:
 
   runtime/vue2:
     specifiers:
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
-      '@tmagic/stage': 1.0.0-rc.10
+      '@tmagic/stage': 1.0.0-rc.11
       '@types/events': ^3.0.0
       '@vue/composition-api': 1.0.5
       axios: ^0.27.2
@@ -497,8 +497,8 @@ importers:
 
   runtime/vue3:
     specifiers:
-      '@tmagic/schema': 1.0.0-rc.10
+      '@tmagic/schema': 1.0.0-rc.11
-      '@tmagic/stage': 1.0.0-rc.10
+      '@tmagic/stage': 1.0.0-rc.11
       '@types/node': ^15.12.4
       '@vitejs/plugin-vue': ^1.2.3
       '@vue/compiler-sfc': ^3.2.0

runtime/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-react",
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "private": true,
   "scripts": {
     "dev:react": "npm run build && npm run serve",
@@ -9,8 +9,8 @@
     "serve": "vite preview --port 8076"
   },
   "dependencies": {
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
-    "@tmagic/stage": "1.0.0-rc.10",
+    "@tmagic/stage": "1.0.0-rc.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

runtime/vue2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue2",
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "private": true,
   "scripts": {
     "dev:vue2": "npm run build && npm run serve",
@@ -9,8 +9,8 @@
     "serve": "vite preview --port 8077"
   },
   "dependencies": {
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
-    "@tmagic/stage": "1.0.0-rc.10",
+    "@tmagic/stage": "1.0.0-rc.11",
     "@vue/composition-api": "1.0.5",
     "vue": "^2.6.14"
   },

runtime/vue3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue3",
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "private": true,
   "scripts": {
     "dev": "npm run build && npm run serve",
@@ -9,8 +9,8 @@
     "serve": "vite preview --port 8078"
   },
   "dependencies": {
-    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.11",
-    "@tmagic/stage": "1.0.0-rc.10",
+    "@tmagic/stage": "1.0.0-rc.11",
     "axios": "^0.25.0",
     "vue": "^3.2.0"
   },