@opentiny/tiny-engine-canvas 1.0.0

package/src/components/render/runner.js

@@ -0,0 +1,140 @@
+/**
+ * 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.
+ *
+ */
+
+import * as Vue from 'vue'
+import * as VueI18n from 'vue-i18n'
+import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../common'
+import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n'
+import * as TinyWebcomponentCore from '@opentiny/tiny-engine-webcomponent-core'
+import TinyVue from '@opentiny/vue'
+import * as TinyVueIcon from '@opentiny/vue-icon'
+import Main, { api } from './RenderMain'
+import { getComponent, blockSlotDataMap } from './render'
+import lowcode from '../../lowcode'
+import { camelize, capitalize } from '@vue/shared'
+
+const dispatch = (name, data) => {
+  window.parent.document.dispatchEvent(new CustomEvent(name, data))
+}
+
+dispatch('beforeCanvasReady')
+
+TinyI18nHost.lowcode = lowcode
+
+// 目前先兼容老区块发布的代码，后期区块发布整改后再删除
+window.React = {}
+window.React.createElement = Vue.h
+
+// 不能采用new Proxy代理Vue的方案，在编译后的vue会报错警告，采用一下方案扩展用于注入一些区块加载逻辑
+window.Vue = {
+  ...Vue,
+  resolveComponent(...args) {
+    // 此处先执行vue内部的解析组件的方法，如果可以拿到组件对象则直接返回，反之则去注册区块
+    const component = Vue.resolveComponent(args[0])
+    if (component && typeof component === 'string') {
+      return getComponent(capitalize(camelize(args[0])))
+    } else {
+      return component
+    }
+  },
+  // renderSlot方法第三个参数是作用域插槽传递的数据，格式{ data: vue.unref(state).componentData }
+  renderSlot(...args) {
+    // 获取当前vue的实例
+    const instance = Vue.getCurrentInstance()
+
+    // 获取当前区块名称
+    const blockName = instance.attrs.dataTag
+
+    const [, slotName, slotData] = args
+
+    // 如果是作用域插槽，则获取作用域插槽传递过来的参数
+    if (slotData) {
+      if (blockSlotDataMap[blockName]) {
+        blockSlotDataMap[blockName][slotName] = slotData
+      } else {
+        blockSlotDataMap[blockName] = { [slotName]: slotData }
+      }
+    }
+
+    /**
+     * vue源码中的renderSlot会忽略default插槽的名称，所以这里必须手动添加args第三个参数的name值
+     * vue源码如右所示：if (name !== 'default') props.name = name; return createVNode('slot', props, fallback && fallback());
+     **/
+    if (slotName === 'default') {
+      args[2] = args[2] || {}
+      args[2].name = slotName
+    }
+
+    return Vue.renderSlot(...args)
+  }
+}
+
+window.VueI18n = VueI18n
+window.TinyVue = TinyVue
+window.TinyVueIcon = TinyVueIcon
+window.TinyWebcomponentCore = TinyWebcomponentCore
+window.TinyI18nHost = TinyI18nHost
+window.TinyLowcodeComponent = {}
+window.TinyComponentLibs = {}
+
+Object.entries(TinyVue).forEach(([_key, component]) => {
+  const { name } = component
+  if (name) {
+    window.TinyLowcodeComponent[name] = component
+  }
+})
+
+let App = null
+
+const renderer = {
+  getApp() {
+    return App
+  },
+  getI18n() {
+    return TinyI18nHost
+  },
+  ...api
+}
+
+const create = () => {
+  App && App.unmount()
+  App = null
+
+  document.body.remove()
+  document.body = document.createElement('body')
+  dispatch('canvasReady', { detail: renderer })
+
+  App = Vue.createApp(Main).use(TinyI18nHost).provide(I18nInjectionKey, TinyI18nHost)
+  App.config.globalProperties.lowcodeConfig = window.parent.TinyGlobalConfig
+  App.mount(document.body)
+
+  new ResizeObserver(() => {
+    dispatch('canvasResize')
+  }).observe(document.body)
+
+  App.config.errorHandler = () => {}
+}
+
+export const createRender = (config) => {
+  const { dslMode, canvasOptions } = config
+  const { styles = [], scripts = [] } = canvasOptions[dslMode]
+  const { styles: thirdStyles = [], scripts: thirdScripts = [] } = window.thirdPartyDeps || {}
+
+  Promise.all([
+    ...thirdScripts.map(dynamicImportComponents),
+    ...scripts.map((src) => addScript(src)).concat([...thirdStyles, ...styles].map((src) => addStyle(src)))
+  ]).finally(create)
+}
+
+createRender(window.parent.TinyGlobalConfig)
+
+document.addEventListener('updateDependencies', updateDependencies)

package/src/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "tip": {
+    "ok": "are you ok"
+  }
+}

package/src/i18n/zh.json

@@ -0,0 +1,5 @@
+{
+  "tip": {
+    "ok": "准备好了吗？"
+  }
+}

package/src/i18n.js

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ *
+ */
+
+import i18n from '@opentiny/tiny-engine-i18n-host'
+import lowcode from './lowcode'
+import locale from './locale'
+
+i18n.lowcode = lowcode
+i18n.global.mergeLocaleMessage('zh_CN', locale.zh)
+i18n.global.mergeLocaleMessage('en_US', locale.en)
+
+export default i18n

package/src/index.js

@@ -0,0 +1,96 @@
+/**
+* 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.
+*
+*/
+
+import CanvasContainer from './components/container/CanvasContainer.vue'
+import CanvasAction from './components/container/CanvasAction.vue'
+import CanvasDragItem from './components/container/CanvasDragItem.vue'
+import CanvasFooter from './components/container/CanvasFooter.vue'
+import CanvasResize from './components/container/CanvasResize.vue'
+import Builtin from './components/builtin/builtin.json'
+import RenderMain, { api as renderApi } from './components/render/RenderMain'
+import {
+  dragStart,
+  updateRect,
+  getContext,
+  getNodePath,
+  dragMove,
+  setLocales,
+  setState,
+  deleteState,
+  getRenderer,
+  clearSelect,
+  selectNode,
+  hoverNode,
+  insertNode,
+  removeNode,
+  addComponent,
+  setPageCss,
+  addScript,
+  addStyle,
+  getNode,
+  getCurrent,
+  setSchema,
+  setUtils,
+  getSchema,
+  setI18n,
+  getCanvasType,
+  setCanvasType,
+  setProps,
+  setGlobalState,
+  getGlobalState,
+  getDocument,
+  canvasDispatch
+} from './components/container/container'
+
+export {
+  CanvasContainer,
+  CanvasAction,
+  CanvasFooter,
+  CanvasDragItem,
+  CanvasResize,
+  RenderMain,
+  renderApi,
+  Builtin,
+  dragStart,
+  dragMove,
+  updateRect,
+  getContext,
+  getNodePath,
+  getNode,
+  getCurrent,
+  setSchema,
+  setUtils,
+  getSchema,
+  setLocales,
+  setState,
+  deleteState,
+  setI18n,
+  getRenderer,
+  clearSelect,
+  selectNode,
+  insertNode,
+  removeNode,
+  hoverNode,
+  addComponent,
+  setPageCss,
+  addScript,
+  addStyle,
+  getCanvasType,
+  setCanvasType,
+  setProps,
+  setGlobalState,
+  getGlobalState,
+  getDocument,
+  canvasDispatch
+}
+
+export default CanvasContainer

package/src/locale.js

@@ -0,0 +1,19 @@
+/**
+* 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.
+*
+*/
+
+import zh from './i18n/zh.json'
+import en from './i18n/en.json'
+
+export default {
+  en,
+  zh
+}

package/src/lowcode.js

@@ -0,0 +1,104 @@
+/**
+* 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.
+*
+*/
+
+import { getCurrentInstance, nextTick, provide, inject } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+import { api } from './components/render/RenderMain'
+import { collectionMethodsMap, generateFn, globalNotify } from './components/render/render'
+
+export const lowcodeWrap = (props, context) => {
+  const global = {}
+  const instance = getCurrentInstance()
+  const router = ''
+  const route = ''
+  const { t, locale } = inject(I18nInjectionKey).global
+  const emit = context.emit
+  const ref = (ref) => instance.refs[ref]
+
+  const setState = (newState, callback) => {
+    Object.assign(global.state, newState)
+    nextTick(() => callback?.apply(global))
+  }
+
+  const getLocale = () => locale.value
+  const setLocale = (val) => {
+    locale.value = val
+  }
+
+  const location = () => window.location
+  const history = () => window.history
+
+  Object.defineProperties(global, {
+    props: { get: () => props },
+    emit: { get: () => emit },
+    setState: { get: () => setState },
+    router: { get: () => router },
+    route: { get: () => route },
+    i18n: { get: () => t },
+    getLocale: { get: () => getLocale },
+    setLocale: { get: () => setLocale },
+    location: { get: location },
+    history: { get: history },
+    utils: {
+      get: api.getUtils
+    },
+    bridge: { get: () => ({}) },
+    dataSourceMap: { get: api.getDataSourceMap },
+    $: { get: () => ref }
+  })
+
+  const wrap = (fn) => {
+    if (typeof fn === 'function') {
+      const fnName = fn.name
+      if (fn.toString().includes('return this')) {
+        return () => global
+      } else if (fnName && collectionMethodsMap[fnName.slice(0, -1)]) {
+        // 这里区块打包的时候会在方法名称后面多加一个字符串，所以此处需要截取下函数名称
+        fn.realName = fnName.slice(0, -1)
+        return generateFn(fn)
+      } else if (fn.name === 'setter' || fn.name === 'getter') {
+        // 这里需要保证在消费区块时，区块中的访问器函数可以正常执行
+        return (...args) => {
+          try {
+            fn.apply(global, args)
+          } catch (error) {
+            globalNotify({
+              type: 'warning',
+              title: `访问器函数:${fn.name}执行报错`,
+              message: error?.message || `访问器函数:${fn.name}执行报错，请检查语法`
+            })
+          }
+        }
+      } else {
+        return () => Promise.resolve({ result: [], page: { total: 100 } })
+      }
+    }
+
+    Object.entries(fn).forEach(([name, value]) => {
+      Object.defineProperty(global, name, {
+        get: () => value
+      })
+    })
+
+    fn.t = t
+
+    return fn
+  }
+
+  return wrap
+}
+
+export default () => {
+  const i18n = inject(I18nInjectionKey)
+  provide(I18nInjectionKey, i18n)
+  return { t: i18n.global.t, lowcodeWrap }
+}

package/src/main.js

@@ -0,0 +1,17 @@
+/**
+* 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.
+*
+*/
+
+import { createApp } from 'vue'
+
+import App from './Design.vue'
+
+createApp(App).mount('#app')