From 588baaab07e219fade59c3134a7a111d12d61559 Mon Sep 17 00:00:00 2001 From: chilingling <26962197+chilingling@users.noreply.github.com> Date: Thu, 14 Dec 2023 23:33:02 -0800 Subject: [PATCH] feat(block2webcomponent): add block2webcomponent package (#146) * feat(block2webcomponent): add block2webcomponent package * fix(build): fix build config uncorrect * fix(build): change cdn link to npmmirror --- .../blockToWebComponentTemplate/README.md | 12 ++++ .../blockToWebComponentTemplate/package.json | 44 +++++++++++++ .../src/BlockFileName.vue | 46 +++++++++++++ .../blockToWebComponentTemplate/src/lib.js | 20 ++++++ .../vite.config.js | 66 +++++++++++++++++++ 5 files changed, 188 insertions(+) create mode 100644 packages/blockToWebComponentTemplate/README.md create mode 100644 packages/blockToWebComponentTemplate/package.json create mode 100644 packages/blockToWebComponentTemplate/src/BlockFileName.vue create mode 100644 packages/blockToWebComponentTemplate/src/lib.js create mode 100644 packages/blockToWebComponentTemplate/vite.config.js diff --git a/packages/blockToWebComponentTemplate/README.md b/packages/blockToWebComponentTemplate/README.md new file mode 100644 index 000000000..cb104541e --- /dev/null +++ b/packages/blockToWebComponentTemplate/README.md @@ -0,0 +1,12 @@ +# @opentiny/tiny-engine-blockToWebComponentTemplate + +将区块转换成 webComponent，使得不同技术栈的区块可以统一在 vue 的画布上面运行 + +## 使用 + +- 后端拉取 template +- 将区块 schema 转换成 高代码，并写入 src 文件夹中 +- 写入 lib.js，替换 BlockFileName 为实际出码的文件名 +- 执行 `pnpm install` 安装依赖 +- 运行 `pnpm run build:block` 命令 +- 得到 webcomponent 转换产物 \ No newline at end of file diff --git a/packages/blockToWebComponentTemplate/package.json b/packages/blockToWebComponentTemplate/package.json new file mode 100644 index 000000000..8d82be1c9 --- /dev/null +++ b/packages/blockToWebComponentTemplate/package.json @@ -0,0 +1,44 @@ +{ + "name": "@opentiny/tiny-engine-blockToWebComponentTemplate", + "version": "0.0.1-alpha.0", + "description": "translate block to webcomponent template", + "main": "./dist/web-components.es.js", + "scripts": { + "build:block": "vite build --mode block" + }, + "keywords": [ + "vue", + "vue3", + "frontend", + "opentiny", + "lowcode", + "tiny-engine", + "webComponent" + ], + "repository": { + "type": "git", + "url": "https://github.com/opentiny/tiny-engine", + "directory": "packages/builtinComponent" + }, + "bugs": { + "url": "https://github.com/opentiny/tiny-engine/issues" + }, + "author": "OpenTiny Team", + "license": "MIT", + "homepage": "https://opentiny.design/tiny-engine", + "dependencies": { + "@opentiny/tiny-engine-i18n-host": "workspace:*", + "@opentiny/tiny-engine-webcomponent-core": "workspace:*", + "@opentiny/vue": "~3.11.0", + "@opentiny/vue-icon": "~3.11.0", + "@opentiny/vue-theme": "~3.11.0", + "@vue/shared": "^3.3.11", + "vue": "^3.3.11", + "vue-i18n": "^9.8.0" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.5.2", + "@vitejs/plugin-vue-jsx": "^3.1.0", + "vite": "^4.3.7" + } +} diff --git a/packages/blockToWebComponentTemplate/src/BlockFileName.vue b/packages/blockToWebComponentTemplate/src/BlockFileName.vue new file mode 100644 index 000000000..90791a499 --- /dev/null +++ b/packages/blockToWebComponentTemplate/src/BlockFileName.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/blockToWebComponentTemplate/src/lib.js b/packages/blockToWebComponentTemplate/src/lib.js new file mode 100644 index 000000000..61a538b09 --- /dev/null +++ b/packages/blockToWebComponentTemplate/src/lib.js @@ -0,0 +1,20 @@ +import { hyphenate } from '@vue/shared' +import { defineCustomElement } from '@opentiny/tiny-engine-webcomponent-core' +import block from './BlockFileName.vue' + +window.TinyLowcodeResource = window.TinyLowcodeResource || {} + +const blockName = hyphenate('BlockFileName') + +if (customElements.get(blockName)) { + if (window.TinyLowcodeResource[blockName]) { + Object.assign(window.TinyLowcodeResource[blockName], block) + } +} else { + block.links = process.env.VUE_APP_UI_LIB_FULL_STYLE_FILE_URL + block.styles = ['svg { width: 10px; height: 10px;}', ...(block.styles || [])] + window.TinyLowcodeResource[blockName] = block + customElements.define(blockName, defineCustomElement(block)) +} + +export default block diff --git a/packages/blockToWebComponentTemplate/vite.config.js b/packages/blockToWebComponentTemplate/vite.config.js new file mode 100644 index 000000000..db65f1cc6 --- /dev/null +++ b/packages/blockToWebComponentTemplate/vite.config.js @@ -0,0 +1,66 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import path from 'path' + +const config = { + define: {}, + resolve: { + alias: {} + }, + build: { + cssCodeSplit: false, + minify: false, + commonjsOptions: { + transformMixedEsModules: true + }, + rollupOptions: { + external: [ + 'vue', + 'vue-i18n', + '@opentiny/tiny-engine-i18n-host', + '@opentiny/tiny-engine-webcomponent-core', + '@opentiny/vue', + '@opentiny/vue-icon' + ], + output: { + globals: { + vue: 'Vue', + 'vue-i18n': 'VueI18n', + '@opentiny/tiny-engine-i18n-host': 'TinyI18nHost', + '@opentiny/tiny-engine-webcomponent-core': 'TinyWebcomponentCore', + '@opentiny/vue': 'TinyVue', + '@opentiny/vue-icon': 'TinyVueIcon' + } + } + } + } +} + +export default defineConfig(({ command, mode }) => { + if (command !== 'build' || mode !== 'block') { + return + } + + const vuePluginConfig = {} + const styleLinks = ['https://registry.npmmirror.com/@opentiny/vue-theme/3.11/files/index.css'] + + config.publicDir = false + + config.build.lib = { + entry: path.resolve(__dirname, './src/lib.js'), + name: 'TinyVueBlock', + formats: ['umd', 'es'], + fileName: (format) => `js/web-component.${format}.js` + } + + vuePluginConfig.customElement = true + + config.plugins = [vue(vuePluginConfig), vueJsx()] + + config.define['process.env'] = { + VUE_APP_UI_LIB_FULL_STYLE_FILE_URL: styleLinks + } + + return config +})