Refactor: split renderer

jsconfig.json

@@ -7,6 +7,7 @@
       "@opentiny/tiny-engine": ["packages/design-core/index.js"],
       "@opentiny/tiny-engine-meta-register": ["packages/register/src/index.js"],
       "@opentiny/tiny-engine-canvas": ["packages/canvas/src/index.js"],
+      "@opentiny/tiny-engine-renderer": ["packages/renderer/src/index.js"],
       "@opentiny/tiny-engine-plugin-materials": ["packages/plugins/materials/index"],
       "@opentiny/tiny-engine-plugin-state": ["packages/plugins/state/index"],
       "@opentiny/tiny-engine-plugin-script": ["packages/plugins/script/index"],

mockServer/src/mock/get/app-center/v1/apps/schema/918.json

@@ -2130,14 +2130,6 @@
           "main": ""
         }
       },
-      {
-        "name": "npm",
-        "type": "function",
-        "content": {
-          "type": "JSFunction",
-          "value": "''"
-        }
-      },
       {
         "name": "Pager",
         "type": "npm",

packages/build/vite-config/src/vite-plugins/devAliasPlugin.js

@@ -56,6 +56,7 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-http': path.resolve(basePath, 'packages/http/src/index.js'),
     '@opentiny/tiny-engine-canvas': path.resolve(basePath, 'packages/canvas/index.js'),
     '@opentiny/tiny-engine-canvas/render': path.resolve(basePath, 'packages/canvas/render/index.js'),
+    '@opentiny/tiny-engine-renderer': path.resolve(basePath, 'packages/renderer/src/index.js'),
     '@opentiny/tiny-engine-utils': path.resolve(basePath, 'packages/utils/src/index.js'),
     '@opentiny/tiny-engine-webcomponent-core': path.resolve(basePath, 'packages/webcomponent/src/lib.js'),
     '@opentiny/tiny-engine-i18n-host': path.resolve(basePath, 'packages/i18n/src/lib.js'),

packages/canvas/container/src/CanvasContainer.vue

@@ -117,6 +117,16 @@ export default {
       }
     }
 
+    const isCanvasEvent = (event, handler) => {
+      const canvasFlag = canvasApi.getRenderer().getCanvasFlag()
+
+      if (!canvasFlag) {
+        return
+      }
+
+      return handler(event)
+    }
+
     const canvasReady = ({ detail }) => {
       if (iframe.value) {
         // 设置monitor报错埋点
@@ -131,15 +141,17 @@ export default {
 
         // 以下是内部iframe监听的事件
         win.addEventListener('mousedown', (event) => {
-          // html元素使用scroll和mouseup事件处理
-          if (event.target === doc.documentElement) {
-            isScrolling = false
-            return
-          }
-
-          insertPosition.value = false
-          setCurrentNode(event)
-          target.value = event.target
+          isCanvasEvent(event, (e) => {
+            // html元素使用scroll和mouseup事件处理
+            if (e.target === doc.documentElement) {
+              isScrolling = false
+              return
+            }
+
+            insertPosition.value = false
+            setCurrentNode(e)
+            target.value = e.target
+          })
         })
 
         win.addEventListener('scroll', () => {
@@ -168,7 +180,9 @@ export default {
         })
 
         win.addEventListener('mousemove', (ev) => {
-          dragMove(ev, true)
+          isCanvasEvent(ev, (e) => {
+            dragMove(e, true)
+          })
         })
 
         // 阻止浏览器默认的右键菜单功能

packages/canvas/container/src/container.js

@@ -21,7 +21,7 @@ import {
 } from '../../common'
 import { useCanvas, useLayout, useResource, useTranslate, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
-import Builtin from '../../render/src/builtin/builtin.json' //TODO 画布内外应该分开
+import { BuiltinBundle } from '@opentiny/tiny-engine-renderer'
 
 export const POSITION = Object.freeze({
   TOP: 'top',
@@ -895,7 +895,7 @@ export const canvasApi = {
   getGlobalState,
   getDocument,
   canvasDispatch,
-  Builtin,
+  BuiltinBundle,
   setDataSourceMap: (...args) => {
     return canvasState.renderer.setDataSourceMap(...args)
   },

packages/canvas/package.json

@@ -36,13 +36,13 @@
   "type": "module",
   "dependencies": {
     "@babel/core": "7.18.13",
-    "@opentiny/tiny-engine-builtin-component": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
     "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/tiny-engine-meta-register": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/tiny-engine-webcomponent-core": "workspace:*",
+    "@opentiny/tiny-engine-renderer": "workspace:*",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/shared": "^3.3.4",
     "@vueuse/core": "^9.6.0"

packages/canvas/render/src/lowcode.js

@@ -12,8 +12,9 @@
 
 import { getCurrentInstance, nextTick, provide, inject } from 'vue'
 import { I18nInjectionKey } from 'vue-i18n'
-import { api } from './RenderMain'
-import { collectionMethodsMap, generateFn, globalNotify } from './render'
+import { api } from '@opentiny/tiny-engine-renderer'
+
+const { getCollectionMethodsMap, generateFn, globalNotify, getUtils, getDataSourceMap } = api
 
 export const lowcodeWrap = (props, context) => {
   const global = {}
@@ -49,10 +50,10 @@ export const lowcodeWrap = (props, context) => {
     location: { get: location },
     history: { get: history },
     utils: {
-      get: api.getUtils
+      get: getUtils
     },
     bridge: { get: () => ({}) },
-    dataSourceMap: { get: api.getDataSourceMap },
+    dataSourceMap: { get: getDataSourceMap },
     $: { get: () => ref }
   })
 
@@ -61,7 +62,7 @@ export const lowcodeWrap = (props, context) => {
       const fnName = fn.name
       if (fn.toString().includes('return this')) {
         return () => global
-      } else if (fnName && collectionMethodsMap[fnName.slice(0, -1)]) {
+      } else if (fnName && getCollectionMethodsMap()[fnName.slice(0, -1)]) {
         // 这里区块打包的时候会在方法名称后面多加一个字符串，所以此处需要截取下函数名称
         fn.realName = fnName.slice(0, -1)
         return generateFn(fn)

packages/canvas/render/src/runner.js

@@ -13,7 +13,7 @@
 import { createApp } from 'vue'
 import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../../common'
 import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n'
-import Main, { api } from './RenderMain'
+import Main, { api } from '@opentiny/tiny-engine-renderer'
 import lowcode from './lowcode'
 import { supportUmdBlock } from './supportUmdBlock'
 

packages/canvas/render/src/supportUmdBlock.js

@@ -5,7 +5,9 @@ import * as TinyVueIcon from '@opentiny/vue-icon'
 import TinyVue from '@opentiny/vue'
 import TinyI18nHost from '@opentiny/tiny-engine-common/js/i18n'
 import { camelize, capitalize } from '@vue/shared'
-import { blockSlotDataMap, getComponent } from './render'
+import { api } from '@opentiny/tiny-engine-renderer'
+
+const { getBlockSlotDataMap, getComponent } = api
 
 // 和 @opentiny/tiny-engine-block-build 打包umd方式相适配
 export function supportUmdBlock() {
@@ -33,6 +35,8 @@ export function supportUmdBlock() {
 
       // 如果是作用域插槽，则获取作用域插槽传递过来的参数
       if (slotData) {
+        const blockSlotDataMap = getBlockSlotDataMap()
+
         if (blockSlotDataMap[blockName]) {
           blockSlotDataMap[blockName][slotName] = slotData
         } else {

packages/plugins/materials/src/composable/useMaterial.js

@@ -399,9 +399,9 @@ const updateCanvasDependencies = (blocks) => {
 }
 
 const initBuiltinMaterial = () => {
-  const { Builtin } = useCanvas().canvasApi.value
+  const { BuiltinBundle } = useCanvas().canvasApi.value
   // 添加画布物料
-  addMaterials(Builtin.data.materials)
+  addMaterials(BuiltinBundle.data.materials)
   // 添加builtin-component NPM包物料
   addMaterials(BuiltinComponentMaterials)
 }

packages/renderer/.eslintrc.cjs

@@ -0,0 +1,42 @@
+/**
+* Copyright (c) 2023 - present TinyEngine Authors.
+* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+module.exports = {
+  env: {
+    browser: true,
+    es2015: true,
+    node: true,
+    jest: true
+  },
+  extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    requireConfigFile: false,
+    babelOptions: {
+      parserOpts: {
+        plugins: ['jsx']
+      }
+    }
+  },
+  plugins: ['vue'],
+  rules: {
+    'no-console': 'error',
+    'no-debugger': 'error',
+    'space-before-function-paren': 'off',
+    'vue/multi-word-component-names': 'off',
+    'no-use-before-define': 'error',
+    'no-unused-vars': ['error', { ignoreRestSiblings: true, varsIgnorePattern: '^_', argsIgnorePattern: '^_' }]
+  }
+}

packages/renderer/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/renderer/README.md

@@ -0,0 +1,28 @@
+# tiny-engine-renderer
+
+## Introduction
+
+A Vue3 renderer for tiny-engine.
+
+## Usage
+
+```javascript
+// xxx.vue
+import { h, reactive } from 'vue'
+import Main from '@opentiny/tiny-engine-renderer'
+
+export default {
+  render() {
+    // utils
+    const utils = reactive({})
+    // globalState
+    const globalState = reactive([])
+    // dataSource
+    const dataSourceMap = reactive({})
+    // schema
+    const schema = reactive({})
+
+    return schema.children.length ? h(Main, { schema, utils, globalState, dataSourceList }) : null
+  }
+}
+```

packages/renderer/README.zh-CN.md

@@ -0,0 +1,28 @@
+# tiny-engine-renderer
+
+## 简介
+
+基于 Vue 3 的低代码渲染引擎。
+
+## 用法
+
+```javascript
+// xxx.vue
+import { h, reactive } from 'vue'
+import Main from '@opentiny/tiny-engine-renderer'
+
+export default {
+  render() {
+    // 页面schema
+    const schema = reactive({})
+    // 工具类
+    const utils = reactive({})
+    // 全局状态
+    const globalState = reactive([])
+    // 数据源
+    const dataSourceMap = reactive({})
+
+    return schema.children.length ? h(Main, { schema, utils, globalState, dataSourceList }) : null
+  }
+}
+```

packages/renderer/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@opentiny/tiny-engine-renderer",
+  "version": "2.0.0-alpha.4",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opentiny/tiny-engine",
+    "directory": "packages/renderer"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-engine/issues"
+  },
+  "author": "OpenTiny Team",
+  "license": "MIT",
+  "homepage": "https://opentiny.design/tiny-engine",
+  "type": "module",
+  "dependencies": {
+    "@babel/core": "7.18.13",
+    "@opentiny/tiny-engine-builtin-component": "workspace:*",
+    "@opentiny/tiny-engine-i18n-host": "workspace:*",
+    "@opentiny/tiny-engine-meta-register": "workspace:*",
+    "@opentiny/tiny-engine-utils": "workspace:*",
+    "@vue/babel-plugin-jsx": "1.1.1",
+    "@vue/shared": "^3.3.4",
+    "@vueuse/core": "^9.6.0"
+  },
+  "devDependencies": {
+    "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "vite": "^5.4.2"
+  },
+  "peerDependencies": {
+    "@opentiny/vue": "^3.14.0",
+    "@opentiny/vue-icon": "^3.14.0",
+    "@opentiny/vue-renderless": "^3.14.0",
+    "vue": "^3.4.15",
+    "vue-i18n": "^9.9.0"
+  }
+}

packages/renderer/src/CanvasEmpty.vue

@@ -0,0 +1,14 @@
+<template>
+  <p class="empty-text">从左侧面板拖入组件，以构建页面</p>
+</template>
+
+<style lang="less" scoped>
+.empty-text {
+  position: absolute;
+  top: 250px;
+  left: 50%;
+  transform: translate(-50%);
+  color: #808080;
+  font-size: 12px;
+}
+</style>