feat(block2webcomponent): add block2webcomponent package (#146)

* feat(block2webcomponent): add block2webcomponent package

* fix(build): fix build config uncorrect

* fix(build): change cdn link to npmmirror

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 转换产物

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"
+  }
+}

packages/blockToWebComponentTemplate/src/BlockFileName.vue

@@ -0,0 +1,46 @@
+<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>

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

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
+})