forked from opentiny/tiny-engine
feat: del blockToWebComponentTemplate (#1347)
This commit is contained in:
chilingling
GitHub
parent
1638fc156f
commit
fd681b4e2f
|
|
@ -1,5 +1,7 @@
|
|||
# 全新区块构建方案
|
||||
|
||||
> TinyEngine v2.1 起支持
|
||||
|
||||
原来的区块构建发布方案中，区块发布构建需要经过：
|
||||
|
||||
a. 后端得到区块 schema，调用 DSL 进行出码。
|
||||
|
|
@ -34,4 +36,9 @@ c. 画布使用异步组件加载得到的模块代码。
|
|||
|
||||
|
||||
|
||||
于是，经过新方案的改造之后，我们区块的构建速度从分钟级提升到了秒级，大幅提高开发效率。
|
||||
于是，经过新方案的改造之后，我们区块的构建速度从分钟级提升到了秒级，大幅提高开发效率。
|
||||
|
||||
## 后端发布接口支持：
|
||||
|
||||
- Java 版本：已经支持
|
||||
- Node.js 后端：如果是 fork Node.js 后端的用户需要使用 TinyEngine v2.1.0 新特性 ，更多细节请查看 PR [https://github.com/opentiny/tiny-engine-webservice/pull/25](https://github.com/opentiny/tiny-engine-webservice/pull/25)
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
# 区块局域网发布方案
|
||||
|
||||
> !WARNING ⚠️
|
||||
>
|
||||
> 从 TinyEngine v2.1 起，该区块发布方案已不再推荐。请参考 [全新区块构建方案](./block-construction-solution.md)
|
||||
|
||||
在TinyEngine开源后，对私有化部署存在诉求的用户越来越多，而当前TinyEngine多项内容都依托在公网中，当前官网提供的[区块发布方案](./block-release-solution.md)，为公网环境下的发布，不能完全满足部分用户的需求。因此需要提供用户能够在内网环境下，也能够正常使用TinyEngine全部功能的方案。
|
||||
|
||||
现在提出区块发布私有化的两种解决方案给用户自行选择：
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
# 区块发布方案
|
||||
|
||||
> !WARNING ⚠️
|
||||
>
|
||||
> 从 TinyEngine v2.1 起，该区块发布方案已不再推荐。请参考 [全新区块构建方案](./block-construction-solution.md)
|
||||
|
||||
## 介绍
|
||||
|
||||
### 背景
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
# @opentiny/tiny-engine-blockToWebComponentTemplate
|
||||
|
||||
将区块转换成 webComponent，使得不同技术栈的区块可以统一在 vue 的画布上面运行
|
||||
|
||||
## 使用
|
||||
|
||||
- 后端拉取 template
|
||||
- 将区块 schema 转换成 高代码，并写入 src 文件夹中
|
||||
- 写入 lib.js，替换 BlockFileName 为实际出码的文件名
|
||||
- 执行 `pnpm install` 安装依赖
|
||||
- 运行 `pnpm run build:block` 命令
|
||||
- 得到 webcomponent 转换产物
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
{
|
||||
"name": "@opentiny/tiny-engine-block-build",
|
||||
"version": "2.6.0",
|
||||
"description": "translate block to webcomponent template",
|
||||
"main": "./dist/web-components.es.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build:block": "vite build --mode block"
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"vue3",
|
||||
"frontend",
|
||||
"opentiny",
|
||||
"lowcode",
|
||||
"tiny-engine",
|
||||
"webComponent"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"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.20.0",
|
||||
"@opentiny/vue-icon": "~3.20.0",
|
||||
"@opentiny/vue-theme": "~3.20.0",
|
||||
"@vue/shared": "^3.3.11",
|
||||
"vue": "^3.4.15",
|
||||
"vue-i18n": "^9.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.1",
|
||||
"vite": "^5.4.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover">
|
||||
<tiny-input placeholder="请输入字段名称"></tiny-input>
|
||||
</tiny-popover>
|
||||
<div>
|
||||
<slot name="menu" :title="state.title">
|
||||
<span>TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。</span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as vue from 'vue'
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
import { I18nInjectionKey } from 'vue-i18n'
|
||||
import { Input as TinyInput, Popover as TinyPopover } from '@opentiny/vue'
|
||||
|
||||
const props = defineProps({ testSlot: { type: Object, default: () => ({}) } })
|
||||
const emit = defineEmits([])
|
||||
|
||||
const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
|
||||
const wrap = lowcodeWrap(props, { emit }, t)
|
||||
|
||||
const state = vue.reactive({
|
||||
title: 'test slot params'
|
||||
})
|
||||
|
||||
wrap({
|
||||
stores,
|
||||
state
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
color: #191919;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
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 config
|
||||
}
|
||||
|
||||
const vuePluginConfig = {}
|
||||
const styleLinks = ['https://unpkg.com/@opentiny/vue-theme@3.14/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
|
||||
})
|
||||
Loading…
Reference in New Issue