feat: customized canvas entry (opentiny#850)

* feat: customized canvas entry * feat: export conditions * feat: delete vue params * feat: add beforeSaveMethod * feat: add hooks * fix: review * fix: review * fix: cjs * fix: eslint * fix: review * fix: reset cjs * fix: load render.css
betterdancing · Oct 10, 2024 · 6c4227e · 6c4227e
1 parent 4111db5
commit 6c4227e
Show file tree

Hide file tree

Showing 14 changed files with 135 additions and 31 deletions.
diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js
@@ -55,6 +55,7 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-svgs': path.resolve(basePath, 'packages/svgs/index.js'),
     '@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-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'),

diff --git a/packages/canvas/.eslintrc.js → packages/canvas/.eslintrc.cjs b/packages/canvas/.eslintrc.js → packages/canvas/.eslintrc.cjs
diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -5,7 +5,8 @@
         :is="CanvasContainer.entry"
         :controller="controller"
         :materials-panel="materialsPanel"
-        :canvas-src="canvasUrl"
+        :canvas-src="canvasSrc"
+        :canvas-src-doc="canvasSrcDoc"
         @remove="removeNode"
         @selected="nodeSelected"
       ></component>
@@ -26,13 +27,15 @@ import {
   useHistory,
   useModal,
   getMergeRegistry,
-  getMergeMeta
+  getMergeMeta,
+  getOptions
 } from '@opentiny/tiny-engine-meta-register'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { constants } from '@opentiny/tiny-engine-utils'
 import * as ast from '@opentiny/tiny-engine-common/js/ast'
 import { initCanvas } from '../../init-canvas/init-canvas'
 import { getImportMapData } from './importMap'
+import meta from '../meta'
 
 const { PAGE_STATUS } = constants
 
@@ -52,6 +55,13 @@ export default {
     const showMask = ref(true)
     const canvasRef = ref(null)
     let showModal = false // 弹窗标识
+    const { canvasSrc = '' } = getOptions(meta.id) || {}
+    let canvasSrcDoc = ''
+
+    if (!canvasSrc) {
+      const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion)
+      canvasSrcDoc = initCanvas(importMap, importStyles)
+    }
 
     const removeNode = (node) => {
       const { pageState } = useCanvas()
@@ -158,12 +168,10 @@ export default {
       canvasResizeObserver?.disconnect?.()
     })
 
-    const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion)
-    const { html: canvasUrl } = initCanvas(importMap, importStyles)
-
     return {
       removeNode,
-      canvasUrl,
+      canvasSrc,
+      canvasSrcDoc,
       nodeSelected,
       footData,
       materialsPanel,

diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue
@@ -11,13 +11,14 @@
   <canvas-divider :selectState="selectState"></canvas-divider>
   <canvas-resize-border :iframe="iframe"></canvas-resize-border>
   <canvas-resize>
-    <iframe
-      v-if="!loading"
-      id="canvas"
-      ref="iframe"
-      :srcdoc="canvasSrc"
-      style="border: none; width: 100%; height: 100%"
-    ></iframe>
+    <template v-if="!loading">
+      <iframe
+        id="canvas"
+        ref="iframe"
+        :[srcAttrName]="canvasSrc || canvasSrcDoc"
+        style="border: none; width: 100%; height: 100%"
+      ></iframe>
+    </template>
     <div v-else class="datainit-tip">应用数据初始化中...</div>
   </canvas-resize>
   <canvas-menu @insert="insertComponent"></canvas-menu>
@@ -63,6 +64,7 @@ export default {
   props: {
     controller: Object,
     canvasSrc: String,
+    canvasSrcDoc: String,
     materialsPanel: Object
   },
   emits: ['selected', 'remove'],
@@ -73,6 +75,7 @@ export default {
     const loading = computed(() => useCanvas().isLoading())
     let showSettingModel = ref(false)
     let target = ref(null)
+    const srcAttrName = computed(() => (props.canvasSrc ? 'src' : 'srcdoc'))
 
     const setCurrentNode = async (event) => {
       const { clientX, clientY } = event
@@ -241,7 +244,8 @@ export default {
       target,
       showSettingModel,
       insertPosition,
-      loading
+      loading,
+      srcAttrName
     }
   }
 }

diff --git a/packages/canvas/package.json b/packages/canvas/package.json
@@ -14,6 +14,14 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./render": {
+      "import": "./dist/render.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/opentiny/tiny-engine",

diff --git a/packages/canvas/render/src/RenderMain.js b/packages/canvas/render/src/RenderMain.js
@@ -24,6 +24,8 @@ import {
   setContext,
   getContext,
   setCondition,
+  getCondition,
+  getConditions,
   context,
   setNode
 } from './context'
@@ -441,6 +443,8 @@ export const api = {
   getRoot,
   setPagecss,
   setCondition,
+  getCondition,
+  getConditions,
   getGlobalState,
   getDataSourceMap,
   setDataSourceMap,

diff --git a/packages/canvas/render/src/context.js b/packages/canvas/render/src/context.js
@@ -51,3 +51,7 @@ export const getContext = () => context
 export const setCondition = (id, visible = false) => {
   conditions[id] = visible
 }
+
+export const getCondition = (id) => conditions[id] !== false
+
+export const getConditions = () => conditions
diff --git a/packages/canvas/render/src/runner.js b/packages/canvas/render/src/runner.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { createApp, h } from 'vue'
+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'
@@ -49,7 +49,7 @@ const renderer = {
 const create = async (config) => {
   const { beforeAppCreate, appCreated } = config.lifeCycles || {}
   if (typeof beforeAppCreate === 'function') {
-    await beforeAppCreate({ Vue: { h }, canvasWin: window, api })
+    await beforeAppCreate({ api: renderer })
   }
   App && App.unmount()
   App = null

diff --git a/packages/canvas/vite.config.js b/packages/canvas/vite.config.js
@@ -34,10 +34,9 @@ export default defineConfig({
     cssCodeSplit: true,
     lib: {
       entry: {
-        index: path.resolve(__dirname, './index.js')
+        index: path.resolve(__dirname, './index.js'),
+        render: path.resolve(__dirname, './render/index.js')
       },
-      name: 'canvas',
-      fileName: () => 'index.js',
       formats: ['es']
     },
     rollupOptions: {
@@ -46,7 +45,7 @@ export default defineConfig({
         chunkFileNames: '[name].js',
         assetFileNames: '[name].[ext]',
         banner: (chunk) => {
-          if (['index'].includes(chunk.name)) {
+          if (['index', 'render'].includes(chunk.name)) {
             return `import "./${chunk.name}.css"`
           }
           return ''

diff --git a/packages/design-core/src/canvas/canvas.js b/packages/design-core/src/canvas/canvas.js
@@ -1,2 +1,2 @@
 // 不能在 index.js 导出，不然主应用样式会污染画布
-export { createRender } from '@opentiny/tiny-engine-canvas'
+export { createRender } from '@opentiny/tiny-engine-canvas/render'
diff --git a/packages/settings/events/src/components/BindEventsDialog.vue b/packages/settings/events/src/components/BindEventsDialog.vue
@@ -13,7 +13,7 @@
       选择已有方法或者添加新方法（点击 确定 之后将在JS面板中创建一个该名称的新方法）。
     </div>
     <div class="bind-event-dialog-content">
-      <component :is="BindEventsDialogSidebar" :eventBinding="eventBinding"></component>
+      <component :is="BindEventsDialogSidebar" :dialogVisible="dialogVisible" :eventBinding="eventBinding"></component>
       <component :is="BindEventsDialogContent" :dialogVisible="dialogVisible"></component>
     </div>
     <template #footer>
@@ -32,6 +32,7 @@ import {
   useCanvas,
   useHistory,
   useLayout,
+  getOptions,
   getMetaApi,
   META_APP
 } from '@opentiny/tiny-engine-meta-register'
@@ -171,7 +172,7 @@ export default {
       })
     }
 
-    const confirm = () => {
+    const confirm = async () => {
       if (state.tipError) {
         return
       }
@@ -193,13 +194,20 @@ export default {
 
       // 需要在bindMethod之后
       const functionBody = getFunctionBody()
-
-      saveMethod?.({
-        name: state.bindMethodInfo.name,
+      const { name } = state.bindMethodInfo
+      const method = {
+        name,
         content: state.enableExtraParams
-          ? `function ${state.bindMethodInfo.name}(eventArgs,${formatParams}) ${functionBody}`
-          : `function ${state.bindMethodInfo.name}(${formatParams})  ${functionBody}`
-      })
+          ? `function ${name}(eventArgs,${formatParams}) ${functionBody}`
+          : `function ${name}(${formatParams})  ${functionBody}`
+      }
+      const { beforeSaveMethod } = getOptions(meta.id)
+
+      if (typeof beforeSaveMethod === 'function') {
+        await beforeSaveMethod(method, state.bindMethodInfo)
+      }
+
+      saveMethod?.(method)
 
       activePagePlugin()
       close()

diff --git a/packages/toolbars/preview/src/Main.vue b/packages/toolbars/preview/src/Main.vue
@@ -13,7 +13,8 @@
 <script>
 import { previewPage, previewBlock } from '@opentiny/tiny-engine-common/js/preview'
 import { useBlock, useCanvas, useLayout, useNotify } from '@opentiny/tiny-engine-meta-register'
-import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
+import { getMergeMeta, getOptions } from '@opentiny/tiny-engine-meta-register'
+import meta from '../meta'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
 
 export default {
@@ -30,7 +31,28 @@ export default {
     const { isBlock, getCurrentPage, canvasApi } = useCanvas()
     const { getCurrentBlock } = useBlock()
 
-    const preview = () => {
+    const preview = async () => {
+      const { beforePreview, previewMethod, afterPreview } = getOptions(meta.id)
+
+      try {
+        if (typeof beforePreview === 'function') {
+          await beforePreview()
+        }
+
+        if (typeof previewMethod === 'function') {
+          const stop = await previewMethod()
+
+          if (stop) {
+            return
+          }
+        }
+      } catch (error) {
+        useNotify({
+          type: 'error',
+          message: `Error in previewing: ${error}`
+        })
+      }
+
       if (useLayout().isEmptyPage()) {
         useNotify({
           type: 'warning',
@@ -59,6 +81,17 @@ export default {
         params.pageInfo.name = page?.name
         previewPage(params)
       }
+
+      if (typeof afterPreview === 'function') {
+        try {
+          await afterPreview()
+        } catch (error) {
+          useNotify({
+            type: 'error',
+            message: `Error in afterPreview: ${error}`
+          })
+        }
+      }
     }
 
     return {

diff --git a/packages/toolbars/save/src/Main.vue b/packages/toolbars/save/src/Main.vue
@@ -65,6 +65,7 @@ import { useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
 import { openCommon, saveCommon } from './js/index'
 import { isLoading } from './js/index'
+
 export const api = {
   saveCommon,
   openCommon

diff --git a/packages/toolbars/save/src/js/index.js b/packages/toolbars/save/src/js/index.js
@@ -17,11 +17,13 @@ import {
   useLayout,
   useNotify,
   usePage,
+  getOptions,
   getMetaApi,
   META_APP
 } from '@opentiny/tiny-engine-meta-register'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { handlePageUpdate } from '@opentiny/tiny-engine-common/js/http'
+import meta from '../../meta'
 
 const { PAGE_STATUS } = constants
 const state = reactive({
@@ -95,6 +97,27 @@ export const openCommon = async () => {
     return
   }
 
+  const { beforeSave, saveMethod, saved } = getOptions(meta.id)
+
+  try {
+    if (typeof beforeSave === 'function') {
+      await beforeSave()
+    }
+
+    if (typeof saveMethod === 'function') {
+      const stop = await saveMethod()
+
+      if (stop) {
+        return
+      }
+    }
+  } catch (error) {
+    useNotify({
+      type: 'error',
+      message: `Error in saving: ${error}`
+    })
+  }
+
   const pageStatus = useLayout().layoutState?.pageStatus
   const curPageState = pageStatus?.state
   const pageInfo = pageStatus?.data
@@ -138,5 +161,16 @@ export const openCommon = async () => {
 
   saveCommon(state.code).finally(() => {
     state.disabled = false
+
+    if (typeof saved === 'function') {
+      try {
+        saved()
+      } catch (error) {
+        useNotify({
+          type: 'error',
+          message: `Error in saved: ${error}`
+        })
+      }
+    }
   })
 }