From 6c4227e2a2116e6b8b84f49b36be8240cfc676cc Mon Sep 17 00:00:00 2001 From: yy <40423888+yy-wow@users.noreply.github.com> Date: Thu, 10 Oct 2024 19:11:19 +0800 Subject: [PATCH] feat: customized canvas entry (#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 --- .../src/vite-plugins/devAliasPlugin.js | 1 + .../canvas/{.eslintrc.js => .eslintrc.cjs} | 0 .../canvas/DesignCanvas/src/DesignCanvas.vue | 20 +++++++--- .../canvas/container/src/CanvasContainer.vue | 20 ++++++---- packages/canvas/package.json | 8 ++++ packages/canvas/render/src/RenderMain.js | 4 ++ packages/canvas/render/src/context.js | 4 ++ packages/canvas/render/src/runner.js | 4 +- packages/canvas/vite.config.js | 7 ++-- packages/design-core/src/canvas/canvas.js | 2 +- .../src/components/BindEventsDialog.vue | 24 ++++++++---- packages/toolbars/preview/src/Main.vue | 37 ++++++++++++++++++- packages/toolbars/save/src/Main.vue | 1 + packages/toolbars/save/src/js/index.js | 34 +++++++++++++++++ 14 files changed, 135 insertions(+), 31 deletions(-) rename packages/canvas/{.eslintrc.js => .eslintrc.cjs} (100%) diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js index f36b81c86..87ed3c29a 100644 --- 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 b/packages/canvas/.eslintrc.cjs similarity index 100% rename from packages/canvas/.eslintrc.js rename to packages/canvas/.eslintrc.cjs diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue index 95229979d..041c6f2e8 100644 --- 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" > @@ -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 index aac69d2d1..c757c4278 100644 --- a/packages/canvas/container/src/CanvasContainer.vue +++ b/packages/canvas/container/src/CanvasContainer.vue @@ -11,13 +11,14 @@ - +
应用数据初始化中...
 @@ -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 index 2551272de..6ebe72c41 100644 --- 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 index 1f52ca617..04e2c928f 100644 --- 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 index 96b8ca673..710cf3ed9 100644 --- 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 index dab5021e3..deb1ce1b9 100644 --- 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 index a5e4deeb3..1dbb8f6a9 100644 --- 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 index a2be9e45a..c64de6120 100644 --- 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 index 10d387a91..a7f6ef122 100644 --- a/packages/settings/events/src/components/BindEventsDialog.vue +++ b/packages/settings/events/src/components/BindEventsDialog.vue @@ -13,7 +13,7 @@ 选择已有方法或者添加新方法（点击 确定 之后将在JS面板中创建一个该名称的新方法）。
- +