diff --git a/.github/auto-labeler.yml b/.github/auto-labeler.yml new file mode 100644 index 000000000..9727d7434 --- /dev/null +++ b/.github/auto-labeler.yml @@ -0,0 +1,23 @@ +version: v1 + +labels: + - label: 'enhancement' + sync: true + matcher: + title: '^feat:.*' + - label: 'document' + sync: true + matcher: + title: '^docs:.*' + - label: 'bug' + sync: true + matcher: + title: '^fix:.*' + - label: 'ospp-2024' + sync: true + matcher: + baseBranch: '^ospp-2024/.*' + - label: 'refactor-main' + sync: true + matcher: + baseBranch: 'refactor/develop' diff --git a/.github/workflows/auto-labeler.yml b/.github/workflows/auto-labeler.yml new file mode 100644 index 000000000..f607334c5 --- /dev/null +++ b/.github/workflows/auto-labeler.yml @@ -0,0 +1,19 @@ +name: Pull Request Auto Labeler + +on: + pull_request_target: + types: [opened, edited] + +permissions: + # Setting up permissions in the workflow to limit the scope of what it can do. Optional! + contents: read # the config file + pull-requests: write # for labeling pull requests (on: pull_request_target or on: pull_request) + +jobs: + label: + runs-on: ubuntu-latest + steps: + - uses: fuxingloh/multi-labeler@v4 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} # optional, default to '${{ github.token }}' + config-path: .github/auto-labeler.yml # optional, default to '.github/labeler.yml' diff --git a/.github/workflows/push-check.yml b/.github/workflows/push-check.yml index 509d951e4..0acaab2bd 100644 --- a/.github/workflows/push-check.yml +++ b/.github/workflows/push-check.yml @@ -12,12 +12,13 @@ jobs: steps: - uses: actions/checkout@v4 + - name: Install pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 - uses: actions/setup-node@v4 with: node-version: 18 - - - name: Install pnpm - run: npm i -g pnpm - name: Install dependencies run: pnpm i @@ -33,4 +34,10 @@ jobs: - name: Run ESLint run: npx eslint ${{steps.get_changed_files.outputs.all_changed_files}} - name: Run Build - run: pnpm run build:plugin && pnpm run build:alpha + run: pnpm run build:plugin && pnpm run build:alpha > build-alpha.log 2>&1 + + - name: Upload build logs + uses: actions/upload-artifact@v4 + with: + name: build-alpha-log + path: build-alpha.log diff --git a/designer-demo/env/.env.alpha b/designer-demo/env/.env.alpha index 1816a0471..6cd7ceea6 100644 --- a/designer-demo/env/.env.alpha +++ b/designer-demo/env/.env.alpha @@ -1,7 +1,7 @@ # alpha mode, used by the "build:alpha" script NODE_ENV=production -VITE_CDN_DOMAIN=https://npm.onmicrosoft.cn +VITE_CDN_DOMAIN=https://unpkg.com VITE_LOCAL_IMPORT_MAPS=false VITE_LOCAL_BUNDLE_DEPS=false # VITE_ORIGIN= diff --git a/designer-demo/env/.env.production b/designer-demo/env/.env.production index 04b27fbc3..8768ec32c 100644 --- a/designer-demo/env/.env.production +++ b/designer-demo/env/.env.production @@ -1,7 +1,7 @@ # prod mode, used by the "build:prod" script NODE_ENV=production -VITE_CDN_DOMAIN=https://npm.onmicrosoft.cn +VITE_CDN_DOMAIN=https://unpkg.com VITE_LOCAL_IMPORT_MAPS=false VITE_LOCAL_BUNDLE_DEPS=false #VITE_ORIGIN= diff --git a/designer-demo/package.json b/designer-demo/package.json index 3f34fce4f..893f294a1 100644 --- a/designer-demo/package.json +++ b/designer-demo/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "cross-env VITE_THEME=light vite", "build:alpha": "cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_THEME=light vite build --mode alpha", - "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_THEME=light vite build --mode prod" + "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_THEME=light vite build" }, "dependencies": { "vue": "^3.4.21", diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json index 6cd511432..3e7e49562 100644 --- a/designer-demo/public/mock/bundle.json +++ b/designer-demo/public/mock/bundle.json @@ -20,8 +20,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElInput" }, @@ -300,8 +300,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElButton" }, @@ -621,8 +621,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElForm" }, @@ -1078,8 +1078,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElFormItem" }, @@ -1428,8 +1428,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElTable" }, @@ -2666,8 +2666,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElTableColumn" }, @@ -2732,8 +2732,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "CarouselItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "category": "容器组件", @@ -2866,8 +2868,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Carousel", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "category": "容器组件", @@ -4601,8 +4605,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "ButtonGroup", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "category": "general", @@ -4760,8 +4766,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Row", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 5, @@ -4910,8 +4918,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Form", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 5, @@ -5263,8 +5273,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "FormItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 12, @@ -5398,8 +5410,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Col", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -5680,8 +5694,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Button", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -6020,8 +6036,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Input", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -6435,8 +6453,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Radio", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 3, @@ -6674,8 +6694,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Select", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 8, @@ -7082,8 +7104,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Switch", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 9, @@ -7284,8 +7308,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Search", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -7410,7 +7436,7 @@ { "name": "1", "label": { - "zh_CN": "其他配置" + "zh_CN": "其他" }, "content": [ { @@ -7563,8 +7589,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Checkbox", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 4, @@ -7822,8 +7850,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "CheckboxButton", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -8013,8 +8043,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "CheckboxGroup", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -8224,8 +8256,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "DialogBox", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 4, @@ -8504,8 +8538,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Tabs", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 10, @@ -8789,8 +8825,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "TabItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -8902,8 +8940,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Select", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -9040,8 +9080,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "BreadcrumbItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -9133,8 +9175,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Collapse", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 3, @@ -9265,8 +9309,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "CollapseItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -9380,8 +9426,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Grid", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -9917,7 +9965,7 @@ }, { "label": { - "zh_CN": "其他属性" + "zh_CN": "其他" }, "description": { "zh_CN": "其他属性" @@ -10302,8 +10350,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Pager", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -10539,8 +10589,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "PopEditor", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 6, @@ -10905,8 +10957,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Tree", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 12, @@ -11243,8 +11297,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "TimeLine", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 3, @@ -11452,8 +11508,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Tooltip", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 11, @@ -11674,8 +11732,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Popover", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 7, @@ -12160,8 +12220,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "DatePicker", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -12576,8 +12638,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Numeric", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -13010,170 +13074,96 @@ "blocks": [], "snippets": [ { - "group": "element-plus", + "group": "layout", + "label": { + "zh_CN": "布局与容器" + }, "children": [ { "name": { - "zh_CN": "输入框" - }, - "icon": "input", - "screenshot": "", - "snippetName": "ElInput", - "schema": {} - }, - { - "name": { - "zh_CN": "按钮" - }, - "icon": "button", - "screenshot": "", - "snippetName": "ElButton", - "schema": { - "children": [ - { - "componentName": "Text", - "props": { - "text": "按钮文本" - } - } - ] - } - }, - { - "name": { - "zh_CN": "表单" + "zh_CN": "栅格布局" }, - "icon": "form", + "icon": "row", "screenshot": "", - "snippetName": "ElForm", + "snippetName": "TinyLayout", "schema": { + "componentName": "TinyLayout", + "props": {}, "children": [ { - "componentName": "ElFormItem", + "componentName": "TinyRow", "props": { - "label": "账号", - "prop": "account" + "style": "padding: 10px;" }, "children": [ { - "componentName": "ElInput", + "componentName": "TinyCol", "props": { - "modelValue": "", - "placeholder": "请输入账号" + "span": 3 + } + }, + { + "componentName": "TinyCol", + "props": { + "span": 3 + } + }, + { + "componentName": "TinyCol", + "props": { + "span": 3 + } + }, + { + "componentName": "TinyCol", + "props": { + "span": 3 } } ] }, { - "componentName": "ElFormItem", + "componentName": "TinyRow", "props": { - "label": "密码", - "prop": "password" + "style": "padding: 10px;" }, "children": [ { - "componentName": "ElInput", + "componentName": "TinyCol", "props": { - "modelValue": "", - "placeholder": "请输入密码", - "type": "password" + "span": 3 } - } - ] - }, - { - "componentName": "ElFormItem", - "props": {}, - "children": [ + }, { - "componentName": "ElButton", + "componentName": "TinyCol", "props": { - "type": "primary", - "style": "margin-right: 10px" - }, - "children": [ - { - "componentName": "Text", - "props": { - "text": "提交" - } - } - ] + "span": 3 + } }, { - "componentName": "ElButton", + "componentName": "TinyCol", "props": { - "type": "primary" - }, - "children": [ - { - "componentName": "Text", - "props": { - "text": "重置" - } - } - ] + "span": 3 + } + }, + { + "componentName": "TinyCol", + "props": { + "span": 3 + } } ] } ] } - }, - { - "name": { - "zh_CN": "表格" - }, - "icon": "grid", - "screenshot": "", - "snippetName": "ElTable", - "schema": { - "props": { - "data": [ - { - "date": "2016-05-03", - "name": "Tom", - "address": "No. 189, Grove St, Los Angeles" - }, - { - "date": "2016-05-02", - "name": "Tom", - "address": "No. 189, Grove St, Los Angeles" - }, - { - "date": "2016-05-04", - "name": "Tom", - "address": "No. 189, Grove St, Los Angeles" - }, - { - "date": "2016-05-01", - "name": "Tom", - "address": "No. 189, Grove St, Los Angeles" - } - ], - "columns": [ - { - "type": "index" - }, - { - "label": "Date", - "prop": "date" - }, - { - "label": "Name", - "prop": "name" - }, - { - "label": "Address", - "prop": "address" - } - ] - } - } } ] }, { - "group": "html", + "group": "basic", + "label": { + "zh_CN": "基础元素" + }, "children": [ { "name": { @@ -13221,21 +13211,6 @@ "children": "Heading" } }, - { - "name": { - "zh_CN": "输入框" - }, - "icon": "input", - "screenshot": "", - "snippetName": "input", - "schema": { - "componentName": "input", - "props": { - "type": "text", - "placeholder": "请输入" - } - } - }, { "name": { "zh_CN": "视频" @@ -13255,170 +13230,111 @@ }, { "name": { - "zh_CN": "图片" + "zh_CN": "按钮" }, - "icon": "Image", + "icon": "button", "screenshot": "", - "snippetName": "img", + "snippetName": "TinyButton", "schema": { - "componentName": "img", + "componentName": "TinyButton", "props": { - "src": "img/webNova.jpg", - "width": "200", - "height": "100" + "text": "按钮文案" } } }, { "name": { - "zh_CN": "按钮" + "zh_CN": "按钮组" }, - "icon": "button", + "icon": "buttons", + "snippetName": "TinyButtons", "screenshot": "", - "snippetName": "button", "schema": { - "componentName": "button", + "componentName": "div", "props": {}, "children": [ { - "componentName": "Text", + "componentName": "TinyButton", + "props": { + "text": "提交", + "type": "primary", + "style": { + "margin": "0 5px 0 5px" + } + } + }, + { + "componentName": "TinyButton", + "props": { + "text": "重置", + "style": { + "margin": "0 5px 0 5px" + } + } + }, + { + "componentName": "TinyButton", "props": { - "text": "按钮文案" + "text": "取消" } } ] + }, + "configure": { + "isContainer": true } }, { "name": { - "zh_CN": "表格" + "zh_CN": "互斥按钮组" }, - "icon": "table", + "icon": "buttons", + "snippetName": "TinyButtonGroup", "screenshot": "", - "snippetName": "table", "schema": { - "componentName": "table", + "componentName": "TinyButtonGroup", "props": { - "border": "1" - }, - "children": [ - { - "componentName": "tr", - "children": [ - { - "componentName": "td", - "children": "Month" - }, - { - "componentName": "td", - "children": "Savings" - } - ] - }, - { - "componentName": "tr", - "children": [ - { - "componentName": "td", - "children": "January" - }, - { - "componentName": "td", - "children": "100" - } - ] - } - ] + "data": [ + { + "text": "Button1", + "value": "1" + }, + { + "text": "Button2", + "value": "2" + }, + { + "text": "Button3", + "value": "3" + } + ], + "modelValue": "1" + } } }, { "name": { - "zh_CN": "表单" + "zh_CN": "搜索框" }, - "icon": "form", + "icon": "search", "screenshot": "", - "snippetName": "form", + "snippetName": "TinySearch", "schema": { - "componentName": "form", + "componentName": "TinySearch", "props": { - "action": "action" - }, - "children": [ - { - "componentName": "label", - "props": { - "for": "male" - }, - "children": "male" - }, - { - "componentName": "input", - "props": { - "type": "text" - } - }, - { - "componentName": "br" - }, - { - "componentName": "label", - "props": { - "for": "Female" - }, - "children": "Female" - }, - { - "componentName": "input", - "props": { - "type": "text" - } - } - ] + "modelValue": "", + "placeholder": "输入关键词" + } } } ] }, { - "group": "content", + "group": "form", + "label": { + "zh_CN": "表单类型" + }, "children": [ - { - "name": { - "zh_CN": "走马灯" - }, - "screenshot": "", - "snippetName": "tiny-carousel", - "icon": "carousel", - "schema": { - "componentName": "TinyCarousel", - "props": { - "height": "180px" - }, - "children": [ - { - "componentName": "TinyCarouselItem", - "children": [ - { - "componentName": "div", - "props": { - "style": "margin:10px 0 0 30px" - } - } - ] - }, - { - "componentName": "TinyCarouselItem", - "children": [ - { - "componentName": "div", - "props": { - "style": "margin:10px 0 0 30px" - } - } - ] - } - ] - } - }, { "name": { "zh_CN": "表单" @@ -13584,124 +13500,88 @@ }, { "name": { - "zh_CN": "对话框" + "zh_CN": "输入框" }, + "icon": "input", "screenshot": "", - "snippetName": "TinyDialogBox", - "icon": "dialogbox", + "snippetName": "TinyInput", "schema": { - "componentName": "TinyDialogBox", + "componentName": "TinyInput", "props": { - "visible": true, - "show-close": true, - "title": "dialogBox title" - }, - "children": [ - { - "componentName": "div" - } - ] + "placeholder": "请输入", + "modelValue": "" + } } }, { "name": { - "zh_CN": "标签页" + "zh_CN": "单选" }, - "icon": "tabs", + "icon": "radio", "screenshot": "", - "group": true, - "snippetName": "TinyTabs", + "snippetName": "TinyRadio", "schema": { - "componentName": "TinyTabs", + "componentName": "TinyRadio", "props": { - "modelValue": "first" - }, - "children": [ - { - "componentName": "TinyTabItem", - "props": { - "title": "标签页1", - "name": "first" - }, - "children": [ - { - "componentName": "div", - "props": { - "style": "margin:10px 0 0 30px" - } - } - ] - }, - { - "componentName": "TinyTabItem", - "props": { - "title": "标签页2", - "name": "second" - }, - "children": [ - { - "componentName": "div", - "props": { - "style": "margin:10px 0 0 30px" - } - } - ] - } - ] + "label": "1", + "text": "单选文本" + } } }, { "name": { - "zh_CN": "折叠面板" + "zh_CN": "复选框" }, + "icon": "checkbox", "screenshot": "", - "snippetName": "TinyCollapse", - "icon": "collapse", + "snippetName": "TinyCheckbox", "schema": { - "componentName": "TinyCollapse", + "componentName": "TinyCheckbox", "props": { - "modelValue": "collapse1" - }, - "children": [ - { - "componentName": "TinyCollapseItem", - "props": { - "name": "collapse1", - "title": "折叠项1" - }, - "children": [ - { - "componentName": "div" - } - ] - }, - { - "componentName": "TinyCollapseItem", - "props": { - "name": "collapse2", - "title": "折叠项2" - }, - "children": [ - { - "componentName": "div" - } - ] - }, - { - "componentName": "TinyCollapseItem", - "props": { - "name": "collapse3", - "title": "折叠项3" - }, - "children": [ - { - "componentName": "div" - } - ] - } - ] + "text": "复选框文案" + } + } + }, + { + "name": { + "zh_CN": "日期选择" + }, + "icon": "datepick", + "screenshot": "", + "snippetName": "TinyDatePicker", + "schema": { + "componentName": "TinyDatePicker", + "props": { + "placeholder": "请输入", + "modelValue": "" + } } }, + { + "name": { + "zh_CN": "数字输入框" + }, + "icon": "numeric", + "screenshot": "", + "snippetName": "TinyNumeric", + "schema": { + "componentName": "TinyNumeric", + "props": { + "allow-empty": true, + "placeholder": "请输入", + "controlsPosition": "right", + "step": 1 + } + } + } + ] + }, + { + "group": "table", + "label": { + "zh_CN": "表格类型" + }, + "children": [ { "name": { "zh_CN": "表格" @@ -13762,28 +13642,164 @@ }, { "name": { - "zh_CN": "弹出编辑" + "zh_CN": "分页" }, - "icon": "popeditor", + "icon": "pager", "screenshot": "", - "snippetName": "TinyPopeditor", + "snippetName": "TinyPager", "schema": { - "componentName": "TinyPopeditor", + "componentName": "TinyPager", "props": { - "modelValue": "", - "placeholder": "请选择", - "gridOp": { - "columns": [ - { - "field": "id", - "title": "ID", - "width": 40 - }, - { - "field": "name", - "title": "名称", - "showOverflow": "tooltip" - }, + "layout": "total, sizes, prev, pager, next", + "total": 100, + "pageSize": 10, + "currentPage": 1 + } + } + } + ] + }, + { + "group": "data-display", + "label": { + "zh_CN": "数据展示类" + }, + "children": [ + { + "name": { + "zh_CN": "走马灯" + }, + "screenshot": "", + "snippetName": "tiny-carousel", + "icon": "carousel", + "schema": { + "componentName": "TinyCarousel", + "props": { + "height": "180px" + }, + "children": [ + { + "componentName": "TinyCarouselItem", + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + } + } + ] + }, + { + "componentName": "TinyCarouselItem", + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + } + } + ] + } + ] + } + }, + { + "name": { + "zh_CN": "对话框" + }, + "screenshot": "", + "snippetName": "TinyDialogBox", + "icon": "dialogbox", + "schema": { + "componentName": "TinyDialogBox", + "props": { + "visible": true, + "show-close": true, + "title": "dialogBox title" + }, + "children": [ + { + "componentName": "div" + } + ] + } + }, + { + "name": { + "zh_CN": "折叠面板" + }, + "screenshot": "", + "snippetName": "TinyCollapse", + "icon": "collapse", + "schema": { + "componentName": "TinyCollapse", + "props": { + "modelValue": "collapse1" + }, + "children": [ + { + "componentName": "TinyCollapseItem", + "props": { + "name": "collapse1", + "title": "折叠项1" + }, + "children": [ + { + "componentName": "div" + } + ] + }, + { + "componentName": "TinyCollapseItem", + "props": { + "name": "collapse2", + "title": "折叠项2" + }, + "children": [ + { + "componentName": "div" + } + ] + }, + { + "componentName": "TinyCollapseItem", + "props": { + "name": "collapse3", + "title": "折叠项3" + }, + "children": [ + { + "componentName": "div" + } + ] + } + ] + } + }, + { + "name": { + "zh_CN": "弹出编辑" + }, + "icon": "popeditor", + "screenshot": "", + "snippetName": "TinyPopeditor", + "schema": { + "componentName": "TinyPopeditor", + "props": { + "modelValue": "", + "placeholder": "请选择", + "gridOp": { + "columns": [ + { + "field": "id", + "title": "ID", + "width": 40 + }, + { + "field": "name", + "title": "名称", + "showOverflow": "tooltip" + }, { "field": "province", "title": "省份", @@ -13979,21 +13995,37 @@ } ] } - }, + } + ] + }, + { + "group": "navigation", + "label": { + "zh_CN": "导航类型" + }, + "children": [ { "name": { - "zh_CN": "分页" + "zh_CN": "时间线" }, - "icon": "pager", + "icon": "timeline", "screenshot": "", - "snippetName": "TinyPager", + "snippetName": "TinyTimeLine", "schema": { - "componentName": "TinyPager", + "componentName": "TinyTimeLine", "props": { - "layout": "total, sizes, prev, pager, next", - "total": 100, - "pageSize": 10, - "currentPage": 1 + "active": "2", + "data": [ + { + "name": "已下单" + }, + { + "name": "运输中" + }, + { + "name": "已签收" + } + ] } } }, @@ -14026,96 +14058,67 @@ }, { "name": { - "zh_CN": "日期选择" - }, - "icon": "datepick", - "screenshot": "", - "snippetName": "TinyDatePicker", - "schema": { - "componentName": "TinyDatePicker", - "props": { - "placeholder": "请输入", - "modelValue": "" - } - } - }, - { - "name": { - "zh_CN": "数字输入框" + "zh_CN": "标签页" }, - "icon": "numeric", + "icon": "tabs", "screenshot": "", - "snippetName": "TinyNumeric", + "group": true, + "snippetName": "TinyTabs", "schema": { - "componentName": "TinyNumeric", + "componentName": "TinyTabs", "props": { - "allow-empty": true, - "placeholder": "请输入", - "controlsPosition": "right", - "step": 1 - } - } - } - ] - }, - { - "group": "general", - "children": [ - { - "name": { - "zh_CN": "Row" - }, - "icon": "row", - "screenshot": "", - "snippetName": "TinyRow", - "schema": { - "componentName": "TinyRow", - "props": {}, + "modelValue": "first" + }, "children": [ { - "componentName": "TinyCol", - "props": { - "span": 3 - } - }, - { - "componentName": "TinyCol", - "props": { - "span": 3 - } - }, - { - "componentName": "TinyCol", + "componentName": "TinyTabItem", "props": { - "span": 3 - } + "title": "标签页1", + "name": "first" + }, + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + } + } + ] }, { - "componentName": "TinyCol", + "componentName": "TinyTabItem", "props": { - "span": 3 - } + "title": "标签页2", + "name": "second" + }, + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + } + } + ] } ] } - }, + } + ] + }, + { + "group": "element-plus", + "label": { + "zh_CN": "Element Plus组件" + }, + "children": [ { "name": { - "zh_CN": "Col" + "zh_CN": "输入框" }, - "icon": "col", + "icon": "input", "screenshot": "", - "snippetName": "TinyCol", - "schema": { - "componentName": "TinyCol", - "props": { - "span": 12, - "style": { - "height": "30px", - "border": "1px solid #ccc" - } - } - } + "snippetName": "ElInput", + "schema": {} }, { "name": { @@ -14123,168 +14126,144 @@ }, "icon": "button", "screenshot": "", - "snippetName": "TinyButton", + "snippetName": "ElButton", "schema": { - "componentName": "TinyButton", - "props": { - "text": "按钮文案" - } + "children": [ + { + "componentName": "Text", + "props": { + "text": "按钮文本" + } + } + ] } }, { "name": { - "zh_CN": "按钮组" + "zh_CN": "表单" }, - "icon": "buttons", - "snippetName": "TinyButtons", + "icon": "form", "screenshot": "", + "snippetName": "ElForm", "schema": { - "componentName": "div", - "props": {}, "children": [ { - "componentName": "TinyButton", + "componentName": "ElFormItem", "props": { - "text": "提交", - "type": "primary", - "style": { - "margin": "0 5px 0 5px" + "label": "账号", + "prop": "account" + }, + "children": [ + { + "componentName": "ElInput", + "props": { + "modelValue": "", + "placeholder": "请输入账号" + } } - } + ] }, { - "componentName": "TinyButton", + "componentName": "ElFormItem", "props": { - "text": "重置", - "style": { - "margin": "0 5px 0 5px" + "label": "密码", + "prop": "password" + }, + "children": [ + { + "componentName": "ElInput", + "props": { + "modelValue": "", + "placeholder": "请输入密码", + "type": "password" + } } - } + ] }, { - "componentName": "TinyButton", - "props": { - "text": "取消" - } + "componentName": "ElFormItem", + "props": {}, + "children": [ + { + "componentName": "ElButton", + "props": { + "type": "primary", + "style": "margin-right: 10px" + }, + "children": [ + { + "componentName": "Text", + "props": { + "text": "提交" + } + } + ] + }, + { + "componentName": "ElButton", + "props": { + "type": "primary" + }, + "children": [ + { + "componentName": "Text", + "props": { + "text": "重置" + } + } + ] + } + ] } ] - }, - "configure": { - "isContainer": true } }, { "name": { - "zh_CN": "互斥按钮组" + "zh_CN": "表格" }, - "icon": "buttons", - "snippetName": "TinyButtonGroup", + "icon": "grid", "screenshot": "", + "snippetName": "ElTable", "schema": { - "componentName": "TinyButtonGroup", "props": { "data": [ { - "text": "Button1", - "value": "1" + "date": "2016-05-03", + "name": "Tom", + "address": "No. 189, Grove St, Los Angeles" }, { - "text": "Button2", - "value": "2" + "date": "2016-05-02", + "name": "Tom", + "address": "No. 189, Grove St, Los Angeles" }, { - "text": "Button3", - "value": "3" + "date": "2016-05-04", + "name": "Tom", + "address": "No. 189, Grove St, Los Angeles" + }, + { + "date": "2016-05-01", + "name": "Tom", + "address": "No. 189, Grove St, Los Angeles" } ], - "modelValue": "1" - } - } - }, - { - "name": { - "zh_CN": "输入框" - }, - "icon": "input", - "screenshot": "", - "snippetName": "TinyInput", - "schema": { - "componentName": "TinyInput", - "props": { - "placeholder": "请输入", - "modelValue": "" - } - } - }, - { - "name": { - "zh_CN": "单选" - }, - "icon": "radio", - "screenshot": "", - "snippetName": "TinyRadio", - "schema": { - "componentName": "TinyRadio", - "props": { - "label": "1", - "text": "单选文本" - } - } - }, - { - "name": { - "zh_CN": "复选框" - }, - "icon": "checkbox", - "screenshot": "", - "snippetName": "TinyCheckbox", - "schema": { - "componentName": "TinyCheckbox", - "props": { - "text": "复选框文案" - } - } - } - ] - }, - { - "group": "navigation", - "children": [ - { - "name": { - "zh_CN": "搜索框" - }, - "icon": "search", - "screenshot": "", - "snippetName": "TinySearch", - "schema": { - "componentName": "TinySearch", - "props": { - "modelValue": "", - "placeholder": "输入关键词" - } - } - }, - { - "name": { - "zh_CN": "时间线" - }, - "icon": "timeline", - "screenshot": "", - "snippetName": "TinyTimeLine", - "schema": { - "componentName": "TinyTimeLine", - "props": { - "active": "2", - "data": [ + "columns": [ { - "name": "已下单" + "type": "index" }, { - "name": "运输中" + "label": "Date", + "prop": "date" }, { - "name": "已签收" + "label": "Name", + "prop": "name" + }, + { + "label": "Address", + "prop": "address" } ] } diff --git a/designer-demo/registry.js b/designer-demo/registry.js index 8ccf1ec08..1f34089bf 100644 --- a/designer-demo/registry.js +++ b/designer-demo/registry.js @@ -15,16 +15,17 @@ import { Fullscreen, Lang, Logo, + Lock, Media, Redoundo, Save, Clean, Preview, - GenerateVue, + GenerateCode, Refresh, Collaboration, Materials, - Data, + State, Script, Tree, Help, @@ -49,11 +50,7 @@ import engineConfig from './engine.config' export default { root: { id: 'engine.root', - metas: [ - EditorInfoService, - AppService, - GenerateCodeService - ] + metas: [EditorInfoService, AppService, GenerateCodeService] }, config: engineConfig, layout: Layout, @@ -68,18 +65,19 @@ export default { toolbars: [ Logo, Breadcrumb, + Lock, Media, Redoundo, Collaboration, Clean, Preview, Refresh, - GenerateVue, + GenerateCode, Save, Fullscreen, Lang ], - plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, Data, Schema, Help, Robot], + plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot], dsls: [{ id: 'engine.dsls.dslvue' }], settings: [Props, Styles, Events], canvas: Canvas diff --git a/designer-demo/vite.config.js b/designer-demo/vite.config.js index 996ff90a3..e60881797 100644 --- a/designer-demo/vite.config.js +++ b/designer-demo/vite.config.js @@ -11,7 +11,6 @@ export default defineConfig((configEnv) => { envDir: './env' }) - const customConfig = { envDir: './env', publicDir: path.resolve(__dirname, './public'), diff --git a/jsconfig.json b/jsconfig.json index 9444d28b6..06993f594 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -8,7 +8,7 @@ "@opentiny/tiny-engine-meta-register": ["packages/register/src/index.js"], "@opentiny/tiny-engine-canvas": ["packages/canvas/src/index.js"], "@opentiny/tiny-engine-plugin-materials": ["packages/plugins/materials/index"], - "@opentiny/tiny-engine-plugin-data": ["packages/plugins/data/index"], + "@opentiny/tiny-engine-plugin-state": ["packages/plugins/state/index"], "@opentiny/tiny-engine-plugin-script": ["packages/plugins/script/index"], "@opentiny/tiny-engine-plugin-tree": ["packages/plugins/tree/index"], "@opentiny/tiny-engine-plugin-help": ["packages/plugins/help/index"], @@ -24,11 +24,11 @@ "@opentiny/tiny-engine-toolbar-fullscreen": ["packages/toolbars/fullscreen/index"], "@opentiny/tiny-engine-toolbar-lang": ["packages/toolbars/lang/index"], "@opentiny/tiny-engine-toolbar-layout": ["packages/toolbars/layout/index"], - "@opentiny/tiny-engine-toolbar-checkinout": ["packages/toolbars/lock/index"], + "@opentiny/tiny-engine-toolbar-lock": ["packages/toolbars/lock/index"], "@opentiny/tiny-engine-toolbar-logo": ["packages/toolbars/logo/index"], "@opentiny/tiny-engine-toolbar-media": ["packages/toolbars/media/index"], "@opentiny/tiny-engine-toolbar-preview": ["packages/toolbars/preview/index"], - "@opentiny/tiny-engine-toolbar-generate-vue": ["packages/toolbars/generate-vue/index"], + "@opentiny/tiny-engine-toolbar-generate-code": ["packages/toolbars/generate-code/index"], "@opentiny/tiny-engine-toolbar-clean": ["packages/toolbars/clean/index"], "@opentiny/tiny-engine-toolbar-save": ["packages/toolbars/save/index"], "tiny-engine-canvas": ["packages/canvas/index"], @@ -37,7 +37,7 @@ "@opentiny/tiny-engine-svgs": ["packages/svgs/index"], "@opentiny/tiny-engine-http": ["packages/http/index"], "@opentiny/tiny-engine-plugin-materials/*": ["packages/plugins/materials/*"], - "@opentiny/tiny-engine-plugin-data/*": ["packages/plugins/data/*"], + "@opentiny/tiny-engine-plugin-state/*": ["packages/plugins/state/*"], "@opentiny/tiny-engine-plugin-script/*": ["packages/plugins/script/*"], "@opentiny/tiny-engine-plugin-tree/*": ["packages/plugins/tree/*"], "@opentiny/tiny-engine-plugin-help/*": ["packages/plugins/help/*"], @@ -53,7 +53,7 @@ "@opentiny/tiny-engine-toolbar-fullscreen/*": ["packages/toolbars/fullscreen/*"], "@opentiny/tiny-engine-toolbar-lang/*": ["packages/toolbars/lang/*"], "@opentiny/tiny-engine-toolbar-layout/*": ["packages/toolbars/layout/*"], - "@opentiny/tiny-engine-toolbar-checkinout/*": ["packages/toolbars/lock/*"], + "@opentiny/tiny-engine-toolbar-lock/*": ["packages/toolbars/lock/*"], "@opentiny/tiny-engine-toolbar-logo/*": ["packages/toolbars/logo/*"], "@opentiny/tiny-engine-toolbar-media/*": ["packages/toolbars/media/*"], "@opentiny/tiny-engine-toolbar-preview/*": ["packages/toolbars/preview/*"], diff --git a/mockServer/src/assets/json/appinfo.json b/mockServer/src/assets/json/appinfo.json index 72f1bf068..156bb9cce 100644 --- a/mockServer/src/assets/json/appinfo.json +++ b/mockServer/src/assets/json/appinfo.json @@ -7317,7 +7317,7 @@ { "name": "1", "label": { - "zh_CN": "其他配置" + "zh_CN": "其他" }, "content": [ { @@ -12426,7 +12426,7 @@ }, { "label": { - "zh_CN": "其他属性" + "zh_CN": "其他" }, "description": { "zh_CN": "其他属性" @@ -24081,7 +24081,7 @@ { "name": "1", "label": { - "zh_CN": "其他配置" + "zh_CN": "其他" }, "content": [ { @@ -26586,7 +26586,7 @@ }, { "label": { - "zh_CN": "其他属性" + "zh_CN": "其他" }, "description": { "zh_CN": "其他属性" diff --git a/mockServer/src/assets/json/bundle.json b/mockServer/src/assets/json/bundle.json index bd886eaba..85420cf94 100644 --- a/mockServer/src/assets/json/bundle.json +++ b/mockServer/src/assets/json/bundle.json @@ -4687,7 +4687,7 @@ { "name": "1", "label": { - "zh_CN": "其他配置" + "zh_CN": "其他" }, "content": [ { @@ -7192,7 +7192,7 @@ }, { "label": { - "zh_CN": "其他属性" + "zh_CN": "其他" }, "description": { "zh_CN": "其他属性" diff --git a/packages/blockToWebComponentTemplate/vite.config.js b/packages/blockToWebComponentTemplate/vite.config.js index ddbf655c3..9ad6a1861 100644 --- a/packages/blockToWebComponentTemplate/vite.config.js +++ b/packages/blockToWebComponentTemplate/vite.config.js @@ -43,7 +43,7 @@ export default defineConfig(({ command, mode }) => { } const vuePluginConfig = {} - const styleLinks = ['https://npm.onmicrosoft.cn/@opentiny/vue-theme@3.14/index.css'] + const styleLinks = ['https://unpkg.com/@opentiny/vue-theme@3.14/index.css'] config.publicDir = false diff --git a/packages/build/vite-config/index.js b/packages/build/vite-config/index.js index bfe2779d7..d7afd8d93 100644 --- a/packages/build/vite-config/index.js +++ b/packages/build/vite-config/index.js @@ -1,2 +1,3 @@ export { useTinyEngineBaseConfig } from './src/default-config.js' export { default as metaCommentsPlugin } from '@opentiny/tiny-engine-vite-plugin-meta-comments' +export { canvasDevExternal } from './src/canvas-dev-external.js' diff --git a/packages/build/vite-config/package.json b/packages/build/vite-config/package.json index 9e342e6bb..f5459e64d 100644 --- a/packages/build/vite-config/package.json +++ b/packages/build/vite-config/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "@babel/core": "~7.23.2", + "@babel/eslint-parser": "^7.21.3", "@babel/generator": "~7.23.2", "@babel/parser": "~7.23.2", "@babel/traverse": "~7.23.2", - "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:^", - "@babel/eslint-parser": "^7.21.3", "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@esbuild-plugins/node-modules-polyfill": "^0.2.2", + "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:^", "@types/node": "^18.0.0", "@vitejs/plugin-vue": "^4.2.3", "@vitejs/plugin-vue-jsx": "^3.1.0", @@ -44,6 +44,7 @@ "shelljs": "^0.8.5", "svg-sprite-loader": "^6.0.11", "vite": "^4.3.7", + "vite-plugin-externalize-dependencies": "^1.0.1", "vite-plugin-monaco-editor": "^1.1.0", "vite-plugin-static-copy": "^0.16.0", "vite-plugin-svg-icons": "^2.0.1", diff --git a/packages/build/vite-config/src/canvas-dev-external.js b/packages/build/vite-config/src/canvas-dev-external.js new file mode 100644 index 000000000..0d0c4bcc3 --- /dev/null +++ b/packages/build/vite-config/src/canvas-dev-external.js @@ -0,0 +1,37 @@ +import vitePluginExternalize from 'vite-plugin-externalize-dependencies' +import { genImportMapPlugin } from './vite-plugins/genImportMapOnly.js' +export function canvasDevExternal(override = {}) { + const prefix = '/node_modules/@opentiny/tiny-engine' + + // 以下内容由于区块WebComponent加载需要补充 + const blockRequire = { + externals: [/^@opentiny\/vue$/, /^@opentiny\/vue-icon$/], + imports: { + '@opentiny/vue': `${prefix}/node_modules/@opentiny/vue/runtime/tiny-vue.mjs`, + '@opentiny/vue-icon': `${prefix}/node_modules/@opentiny/vue/runtime/tiny-vue-icon.mjs` + }, + importStyles: [`${prefix}/node_modules/@opentiny/vue-theme/index.css`] + } + // 以下内容由于物料协议不支持声明子依赖而@opentiny/vue需要依赖所以需要补充 + const tinyVueRequire = { + imports: { + '@opentiny/vue-common': `${prefix}/node_modules/@opentiny/vue/runtime/tiny-vue-common.mjs`, + '@opentiny/vue-locale': `${prefix}/node_modules/@opentiny/vue/runtime/tiny-vue-locale.mjs` + } + } + return [ + vitePluginExternalize({ externals: [/^vue$/, /^vue-i18n$/, ...blockRequire.externals] }), + genImportMapPlugin( + { + imports: { + vue: `${prefix}/node_modules/vue/dist/vue.runtime.esm-browser.js`, + 'vue-i18n': `${prefix}/node_modules/vue-i18n/dist/vue-i18n.esm-browser.js`, + ...blockRequire.imports, + ...tinyVueRequire.imports, + ...override + } + }, + [...blockRequire.importStyles] + ) + ] +} diff --git a/packages/build/vite-config/src/default-config.js b/packages/build/vite-config/src/default-config.js index cbf430b8e..54f0b86b5 100644 --- a/packages/build/vite-config/src/default-config.js +++ b/packages/build/vite-config/src/default-config.js @@ -8,12 +8,12 @@ import nodeModulesPolyfillPluginCjs from '@esbuild-plugins/node-modules-polyfill import nodePolyfill from 'rollup-plugin-polyfill-node' import esbuildCopy from 'esbuild-plugin-copy' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' -import { importmapPlugin } from './externalDeps.js' import visualizerCjs from 'rollup-plugin-visualizer' import generateComment from '@opentiny/tiny-engine-vite-plugin-meta-comments' -import { getBaseUrlFromCli, copyBundleDeps, copyPreviewImportMap, copyLocalImportMap } from './localCdnFile/index.js' +import { getBaseUrlFromCli, copyBundleDeps, copyPreviewImportMap } from './localCdnFile/index.js' import { devAliasPlugin } from './vite-plugins/devAliasPlugin.js' import { htmlUpgradeHttpsPlugin } from './vite-plugins/upgradeHttpsPlugin.js' +import { canvasDevExternal } from './canvas-dev-external.js' const monacoEditorPlugin = monacoEditorPluginCjs.default const nodeGlobalsPolyfillPlugin = nodeGlobalsPolyfillPluginCjs.default @@ -108,7 +108,6 @@ const getDefaultConfig = (engineConfig) => { plugins: [nodePolyfill({ include: null })], // 使用@rollup/plugin-inject的默认值{include: null}, 即在所有代码中生效 input: { index: path.resolve(process.cwd(), './index.html'), - canvas: path.resolve(process.cwd(), './canvas.html'), preview: path.resolve(process.cwd(), './preview.html') }, output: { @@ -131,21 +130,11 @@ const getDefaultConfig = (engineConfig) => { } } -const defaultImportMapVersions = { - prettier: '2.7.1', - vue: '3.4.23', - tinyVue: '~3.14' -} - export function useTinyEngineBaseConfig(engineConfig) { - const importMapVersions = { - ...defaultImportMapVersions, - ...(engineConfig.importMapVersions || {}) - } const { envDir = '', viteConfigEnv } = engineConfig const { command = 'serve', mode = 'serve' } = viteConfigEnv const env = loadEnv(mode, envDir) - const { VITE_CDN_DOMAIN = 'https://npm.onmicrosoft.cn', VITE_LOCAL_IMPORT_MAPS, VITE_LOCAL_BUNDLE_DEPS } = env + const { VITE_CDN_DOMAIN = 'https://unpkg.com', VITE_LOCAL_IMPORT_MAPS, VITE_LOCAL_BUNDLE_DEPS } = env const isLocalImportMap = VITE_LOCAL_IMPORT_MAPS === 'true' // true公共依赖库使用本地打包文件，false公共依赖库使用公共CDN const isCopyBundleDeps = VITE_LOCAL_BUNDLE_DEPS === 'true' // true bundle里的cdn依赖处理成本地依赖， false 不处理 const monacoPublicPath = 'editor/monaco-workers' @@ -156,45 +145,6 @@ export function useTinyEngineBaseConfig(engineConfig) { }) const config = getDefaultConfig(engineConfig) - if (command === 'serve') { - const devVueAlias = { - find: /^vue$/, - replacement: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser.js` - } - - config.resolve.alias = [...(isLocalImportMap ? [] : [devVueAlias])] - } else { - // command === 'build' - if (mode === 'prod') { - config.build.minify = true - config.build.sourcemap = false - } - } - - const importmap = { - imports: { - prettier: `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/standalone.mjs`, - 'prettier/': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/`, - 'prettier/parser-typescript': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-typescript.mjs`, - 'prettier/parser-html': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-html.mjs`, - 'prettier/parser-postcss': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-postcss.mjs`, - 'prettier/parser-babel': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-babel.mjs`, - - vue: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser${ - command === 'build' ? '.prod' : '' - }.js`, - '@opentiny/vue': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue.mjs`, - '@opentiny/vue-icon': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-icon.mjs`, - '@opentiny/vue-common': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-common.mjs`, - '@opentiny/vue-locale': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-locale.mjs`, - '@opentiny/vue-design-smb': `${VITE_CDN_DOMAIN}/@opentiny/vue-design-smb@${importMapVersions.tinyVue}/index.js`, - '@opentiny/vue-theme/theme-tool': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme-tool.js`, - '@opentiny/vue-theme/theme': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme/index.js` - } - } - - const importMapStyles = [`${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/index.css`] - config.plugins.push( createSvgIconsPlugin({ iconDirs: engineConfig.iconDirs || [], @@ -203,19 +153,6 @@ export function useTinyEngineBaseConfig(engineConfig) { }), monacoEditorPluginInstance, htmlUpgradeHttpsPlugin(mode), - isLocalImportMap - ? copyLocalImportMap({ - importMap: importmap, - styleUrls: importMapStyles, - originCdnPrefix: VITE_CDN_DOMAIN, - base: getBaseUrlFromCli(config.base), - packageCopy: [ - // 这两个包的js存在相对路径引用，不能单独拷贝一个文件，需要整个包拷贝 - '@opentiny/vue-theme/theme-tool', - '@opentiny/vue-theme/theme' - ] - }) - : importmapPlugin(importmap, importMapStyles), isCopyBundleDeps ? copyBundleDeps({ bundleFile: 'public/mock/bundle.json', @@ -241,5 +178,9 @@ export function useTinyEngineBaseConfig(engineConfig) { config.plugins.push(devAliasPlugin(env, engineConfig.useSourceAlias)) + if (engineConfig.useSourceAlias && command === 'serve') { + config.plugins.push(canvasDevExternal()) + } + return config } diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js index dcbc74388..f36b81c86 100644 --- a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js +++ b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js @@ -18,7 +18,7 @@ const getDevAlias = (useSourceAlias) => { '@opentiny/tiny-engine-common': path.resolve(basePath, 'packages/common/index.js'), '@opentiny/tiny-engine-plugin-materials': path.resolve(basePath, 'packages/plugins/materials/index.js'), '@opentiny/tiny-engine-plugin-block': path.resolve(basePath, 'packages/plugins/block/index.js'), - '@opentiny/tiny-engine-plugin-data': path.resolve(basePath, 'packages/plugins/data/index.js'), + '@opentiny/tiny-engine-plugin-state': path.resolve(basePath, 'packages/plugins/state/index.js'), '@opentiny/tiny-engine-plugin-datasource': path.resolve(basePath, 'packages/plugins/datasource/index.js'), '@opentiny/tiny-engine-plugin-script': path.resolve(basePath, 'packages/plugins/script/index.js'), '@opentiny/tiny-engine-plugin-tree': path.resolve(basePath, 'packages/plugins/tree/index.js'), @@ -37,12 +37,12 @@ const getDevAlias = (useSourceAlias) => { '@opentiny/tiny-engine-toolbar-fullscreen': path.resolve(basePath, 'packages/toolbars/fullscreen/index.js'), '@opentiny/tiny-engine-toolbar-lang': path.resolve(basePath, 'packages/toolbars/lang/index.js'), '@opentiny/tiny-engine-toolbar-layout': path.resolve(basePath, 'packages/toolbars/layout/index.js'), - '@opentiny/tiny-engine-toolbar-checkinout': path.resolve(basePath, 'packages/toolbars/lock/index.js'), + '@opentiny/tiny-engine-toolbar-lock': path.resolve(basePath, 'packages/toolbars/lock/index.js'), '@opentiny/tiny-engine-toolbar-logo': path.resolve(basePath, 'packages/toolbars/logo/index.js'), '@opentiny/tiny-engine-toolbar-logout': path.resolve(basePath, 'packages/toolbars/logout/index.js'), '@opentiny/tiny-engine-toolbar-media': path.resolve(basePath, 'packages/toolbars/media/index.js'), '@opentiny/tiny-engine-toolbar-preview': path.resolve(basePath, 'packages/toolbars/preview/index.js'), - '@opentiny/tiny-engine-toolbar-generate-vue': path.resolve(basePath, 'packages/toolbars/generate-vue/index.js'), + '@opentiny/tiny-engine-toolbar-generate-code': path.resolve(basePath, 'packages/toolbars/generate-code/index.js'), '@opentiny/tiny-engine-toolbar-refresh': path.resolve(basePath, 'packages/toolbars/refresh/index.js'), '@opentiny/tiny-engine-toolbar-redoundo': path.resolve(basePath, 'packages/toolbars/redoundo/index.js'), '@opentiny/tiny-engine-toolbar-clean': path.resolve(basePath, 'packages/toolbars/clean/index.js'), diff --git a/packages/build/vite-config/src/vite-plugins/genImportMapOnly.js b/packages/build/vite-config/src/vite-plugins/genImportMapOnly.js new file mode 100644 index 000000000..26cd9457c --- /dev/null +++ b/packages/build/vite-config/src/vite-plugins/genImportMapOnly.js @@ -0,0 +1,31 @@ +export function genImportMapPlugin(importMap, importMapStyles) { + return { + name: 'vite-plugin-gen-import-map', + transformIndexHtml: { + enforce: 'pre', + transform(html) { + return { + html, + tags: [ + { + tag: 'script', + attrs: { + type: 'importmap' + }, + children: JSON.stringify(importMap, null, 2), + injectTo: 'head-prepend' + }, + ...(importMapStyles || []).map((url) => ({ + tag: 'link', + attrs: { + rel: 'stylesheet', + href: url + }, + injectTo: 'head-prepend' + })) + ] + } + } + } + } +} diff --git a/packages/builtinComponent/src/meta/CanvasCol.json b/packages/builtinComponent/src/meta/CanvasCol.json index 090feda23..8e03bd5ab 100644 --- a/packages/builtinComponent/src/meta/CanvasCol.json +++ b/packages/builtinComponent/src/meta/CanvasCol.json @@ -1,5 +1,5 @@ { - "components": { + "component": { "icon": "Box", "name": { "zh_CN": "CanvasCol" diff --git a/packages/builtinComponent/src/meta/CanvasRow.json b/packages/builtinComponent/src/meta/CanvasRow.json index 0ee26acbf..4ca0ea73b 100644 --- a/packages/builtinComponent/src/meta/CanvasRow.json +++ b/packages/builtinComponent/src/meta/CanvasRow.json @@ -1,5 +1,5 @@ { - "components": { + "component": { "icon": "Box", "name": { "zh_CN": "CanvasRow" diff --git a/packages/builtinComponent/src/meta/CanvasRowColContainer.json b/packages/builtinComponent/src/meta/CanvasRowColContainer.json index 5ee884cdf..3281b14a0 100644 --- a/packages/builtinComponent/src/meta/CanvasRowColContainer.json +++ b/packages/builtinComponent/src/meta/CanvasRowColContainer.json @@ -1,5 +1,5 @@ { - "components": { + "component": { "icon": "Box", "name": { "zh_CN": "行列容器" @@ -58,7 +58,7 @@ } } }, - "snippets": { + "snippet": { "name": { "zh_CN": "行列容器" }, diff --git a/packages/builtinComponent/src/meta/index.js b/packages/builtinComponent/src/meta/index.js index fa2fca60d..2480e7051 100644 --- a/packages/builtinComponent/src/meta/index.js +++ b/packages/builtinComponent/src/meta/index.js @@ -3,16 +3,14 @@ import CanvasRow from './CanvasRow.json' import CanvasRowColContainer from './CanvasRowColContainer.json' export default { - components: [ - { - group: '内置组件', - children: [{ ...CanvasCol.components }, { ...CanvasRow.components }, { ...CanvasRowColContainer.components }] - } - ], + components: [CanvasCol.component, CanvasRow.component, CanvasRowColContainer.component], snippets: [ { - group: '内置组件', - children: [{ ...CanvasRowColContainer.snippets }] + group: 'layout', + label: { + zh_CN: '布局与容器' + }, + children: [CanvasRowColContainer.snippet] } ] } diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue index 5c4f8415a..95229979d 100644 --- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue +++ b/packages/canvas/DesignCanvas/src/DesignCanvas.vue @@ -30,15 +30,11 @@ import { } from '@opentiny/tiny-engine-meta-register' import { useHttp } from '@opentiny/tiny-engine-http' import { constants } from '@opentiny/tiny-engine-utils' -import { isVsCodeEnv, isDevelopEnv } from '@opentiny/tiny-engine-common/js/environments' import * as ast from '@opentiny/tiny-engine-common/js/ast' +import { initCanvas } from '../../init-canvas/init-canvas' +import { getImportMapData } from './importMap' const { PAGE_STATUS } = constants -const tenant = new URLSearchParams(location.search).get('tenant') || '' -const canvasUrl = - isVsCodeEnv || isDevelopEnv - ? `canvas.html?tenant=${tenant}` - : window.location.origin + window.location.pathname + `/canvas?tenant=${tenant}` const componentType = { Block: '区块', @@ -162,6 +158,9 @@ export default { canvasResizeObserver?.disconnect?.() }) + const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion) + const { html: canvasUrl } = initCanvas(importMap, importStyles) + return { removeNode, canvasUrl, diff --git a/packages/canvas/DesignCanvas/src/importMap.js b/packages/canvas/DesignCanvas/src/importMap.js new file mode 100644 index 000000000..813fdb7dc --- /dev/null +++ b/packages/canvas/DesignCanvas/src/importMap.js @@ -0,0 +1,45 @@ +import { VITE_CDN_DOMAIN } from '@opentiny/tiny-engine-common/js/environments' + +export function getImportMapData(overrideVersions = {}) { + const importMapVersions = Object.assign( + { + vue: '3.4.23', + tinyVue: '~3.14', + vueI18n: '^9.9.0' + }, + overrideVersions + ) + + // 以下内容由于区块WebComponent加载需要补充 + const blockRequire = { + imports: { + '@opentiny/vue': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue.mjs`, + '@opentiny/vue-icon': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-icon.mjs` + }, + importStyles: [`${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/index.css`] + } + + // 以下内容由于物料协议不支持声明子依赖而@opentiny/vue需要依赖所以需要补充 + const tinyVueRequire = { + imports: { + '@opentiny/vue-common': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-common.mjs`, + '@opentiny/vue-locale': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-locale.mjs` + } + } + + const importMap = { + imports: { + vue: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser.prod.js`, + 'vue-i18n': `${VITE_CDN_DOMAIN}/vue-i18n@${importMapVersions.vueI18n}/dist/vue-i18n.esm-browser.js`, + ...blockRequire.imports, + ...tinyVueRequire.imports + } + } + + const importStyles = [...blockRequire.importStyles] + + return { + importMap, + importStyles + } +} diff --git a/packages/canvas/README.md b/packages/canvas/README.md index eea15cef4..63f827de3 100644 --- a/packages/canvas/README.md +++ b/packages/canvas/README.md @@ -1,7 +1,36 @@ -# Vue 3 + Vite +# tiny-engine-canvas -This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` + diff --git a/designer-demo/src/canvas.js b/packages/canvas/init-canvas/canvas.js similarity index 89% rename from designer-demo/src/canvas.js rename to packages/canvas/init-canvas/canvas.js index fc3fb5f5c..cbfae1846 100644 --- a/designer-demo/src/canvas.js +++ b/packages/canvas/init-canvas/canvas.js @@ -9,7 +9,6 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ - -import { createRender } from '@opentiny/tiny-engine/canvas' +import { createRender } from '../render' createRender(window.parent.TinyGlobalConfig) diff --git a/packages/canvas/init-canvas/init-canvas.js b/packages/canvas/init-canvas/init-canvas.js new file mode 100644 index 000000000..cdac3432d --- /dev/null +++ b/packages/canvas/init-canvas/init-canvas.js @@ -0,0 +1,14 @@ +import canvasScript from './canvas?url&build=canvas' +import canvasHtml from './canvas.html?raw' + +export function initCanvas(importMap = {}, importStyleUrls = []) { + return { + html: canvasHtml + .replace('', ``) + .replace( + '', + importStyleUrls.map((styleUrl) => ``).join('\n') + ) + .replace('', ``) + } +} diff --git a/packages/canvas/render/src/RenderMain.js b/packages/canvas/render/src/RenderMain.js index 8f27665d7..a159fedbd 100644 --- a/packages/canvas/render/src/RenderMain.js +++ b/packages/canvas/render/src/RenderMain.js @@ -12,10 +12,21 @@ import { h, provide, inject, nextTick, shallowReactive, reactive, ref, watch, watchEffect } from 'vue' import { I18nInjectionKey } from 'vue-i18n' +import TinyVue from '@opentiny/vue' +import * as TinyVueIcon from '@opentiny/vue-icon' import { useBroadcastChannel } from '@vueuse/core' import { constants, utils as commonUtils } from '@opentiny/tiny-engine-utils' import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render' -import { getNode as getNodeById, clearNodes, getRoot, setContext, getContext, setCondition, context, setNode } from './context' +import { + getNode as getNodeById, + clearNodes, + getRoot, + setContext, + getContext, + setCondition, + context, + setNode +} from './context' import CanvasEmpty from './CanvasEmpty.vue' const { BROADCAST_CHANNEL } = constants @@ -61,13 +72,13 @@ const setUtils = (data, clear, isForceRefresh) => { const utilsCollection = {} // 目前画布还不具备远程加载utils工具类的功能，目前只能加载TinyVue组件库中的组件工具 data?.forEach((item) => { - const util = window.TinyVue[item.content.exportName] + const util = TinyVue[item.content.exportName] if (util) { utilsCollection[item.name] = util } // 此处需要把工具类中的icon图标也加入utils上下文环境 - const utilIcon = window.TinyVueIcon[item.content.exportName] + const utilIcon = TinyVueIcon[item.content.exportName] if (utilIcon) { utilsCollection[item.name] = utilIcon } @@ -345,7 +356,7 @@ const getNode = (id, parent) => (id ? getNodeById(id, parent) : schema) let canvasRenderer = null -const defaultRenderer = function() { +const defaultRenderer = function () { // 渲染画布增加根节点，与出码和预览保持一致 const rootChildrenSchema = { componentName: 'div', @@ -373,7 +384,7 @@ const setRenderer = (fn) => { let rendererMounted -const getRendererMounted = () => rendererMounted || function() {} +const getRendererMounted = () => rendererMounted || function () {} const setRendererMounted = (fn) => { rendererMounted = fn diff --git a/packages/canvas/render/src/builtin/builtin.json b/packages/canvas/render/src/builtin/builtin.json index 57510cc4e..ad56e67ab 100644 --- a/packages/canvas/render/src/builtin/builtin.json +++ b/packages/canvas/render/src/builtin/builtin.json @@ -3,446 +3,444 @@ "materials": { "components": [ { - "group": "内置组件", - "children": [ - { - "icon": "Box", - "name": { - "zh_CN": "Box" - }, - "component": "div", - "schema": { - "slots": {}, - "properties": [ - { - "label": { - "zh_CN": "基础信息" - }, - "description": { - "zh_CN": "基础信息" - }, - "collapse": { - "number": 6, - "text": { - "zh_CN": "显示更多" - } - }, - "content": [] - } - ], - "events": { - "onClick": { - "label": { - "zh_CN": "点击事件" - }, - "description": { - "zh_CN": "点击时触发的回调函数" - }, - "type": "event", - "functionInfo": { - "params": [], - "returns": {} - }, - "defaultValue": "" + "icon": "Box", + "name": { + "zh_CN": "Box" + }, + "component": "div", + "schema": { + "slots": {}, + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "collapse": { + "number": 6, + "text": { + "zh_CN": "显示更多" } }, - "shortcuts": { - "properties": [] + "content": [] + } + ], + "events": { + "onClick": { + "label": { + "zh_CN": "点击事件" }, - "contentMenu": { - "actions": [] - } - }, - "configure": { - "loop": true, - "isContainer": true, - "nestingRule": { - "childWhitelist": [], - "descendantBlacklist": [] - } + "description": { + "zh_CN": "点击时触发的回调函数" + }, + "type": "event", + "functionInfo": { + "params": [], + "returns": {} + }, + "defaultValue": "" } }, - { - "icon": "slot", - "name": { - "zh_CN": "Slot" - }, - "component": "Slot", - "schema": { - "properties": [ + "shortcuts": { + "properties": [] + }, + "contentMenu": { + "actions": [] + } + }, + "configure": { + "loop": true, + "isContainer": true, + "nestingRule": { + "childWhitelist": [], + "descendantBlacklist": [] + } + } + }, + { + "icon": "slot", + "name": { + "zh_CN": "Slot" + }, + "component": "Slot", + "schema": { + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "collapse": { + "number": 6, + "text": { + "zh_CN": "显示更多" + } + }, + "content": [ { + "property": "name", + "type": "String", "label": { - "zh_CN": "基础信息" - }, - "description": { - "zh_CN": "基础信息" + "text": { + "zh_CN": "插槽名称" + } }, - "collapse": { - "number": 6, + "cols": 12, + "widget": { + "component": "InputConfigurator", + "props": {} + } + }, + { + "property": "params", + "type": "String", + "defaultValue": "", + "label": { "text": { - "zh_CN": "显示更多" + "zh_CN": "作用域参数" } }, - "content": [ - { - "property": "name", - "type": "String", - "label": { - "text": { - "zh_CN": "插槽名称" - } - }, - "cols": 12, - "widget": { - "component": "InputConfigurator", - "props": {} - } - }, - { - "property": "params", - "type": "String", - "defaultValue": "", - "label": { - "text": { - "zh_CN": "作用域参数" - } - }, - "widget": { - "component": "CodeConfigurator", - "props": { - "language": "json", - "tips": { - "title": { "zh_CN": "提示：数据为数组类型" }, - "demo": { - "zh_CN": "示例：\n[\n {\n \"name\": \"text\",\n \"value\": {\n \"type\": \"JSExpression\",\n \"value\": \"this.state.greetingMessage\"\n }\n },\n {\n \"name\": \"count\",\n \"value\": 1\n }\n]" - } - } + "widget": { + "component": "CodeConfigurator", + "props": { + "language": "json", + "tips": { + "title": { "zh_CN": "提示：数据为数组类型" }, + "demo": { + "zh_CN": "示例：\n[\n {\n \"name\": \"text\",\n \"value\": {\n \"type\": \"JSExpression\",\n \"value\": \"this.state.greetingMessage\"\n }\n },\n {\n \"name\": \"count\",\n \"value\": 1\n }\n]" } } } - ] + } } - ], - "events": {}, - "shortcuts": { - "properties": [] - }, - "contentMenu": { - "actions": [] - } - }, - "configure": { - "isContainer": true + ] } + ], + "events": {}, + "shortcuts": { + "properties": [] }, - { - "icon": "Collection", - "name": { - "zh_CN": "Collection" - }, - "component": "Collection", - "schema": { - "slots": {}, - "properties": [ + "contentMenu": { + "actions": [] + } + }, + "configure": { + "isContainer": true + } + }, + { + "icon": "Collection", + "name": { + "zh_CN": "Collection" + }, + "component": "Collection", + "schema": { + "slots": {}, + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "collapse": { + "number": 6, + "text": { + "zh_CN": "显示更多" + } + }, + "content": [ { + "property": "condition", + "type": "Boolean", + "defaultValue": true, "label": { - "zh_CN": "基础信息" - }, - "description": { - "zh_CN": "基础信息" + "text": { + "zh_CN": "是否渲染" + } }, - "collapse": { - "number": 6, + "cols": 12, + "rules": [], + "widget": { + "component": "SwitchConfigurator", + "props": {} + } + }, + { + "property": "style", + "type": "String", + "defaultValue": "", + "label": { "text": { - "zh_CN": "显示更多" + "zh_CN": "样式" } }, - "content": [ - { - "property": "condition", - "type": "Boolean", - "defaultValue": true, - "label": { - "text": { - "zh_CN": "是否渲染" - } - }, - "cols": 12, - "rules": [], - "widget": { - "component": "SwitchConfigurator", - "props": {} - } - }, - { - "property": "style", - "type": "String", - "defaultValue": "", - "label": { - "text": { - "zh_CN": "样式" - } - }, - "cols": 12, - "rules": [], - "widget": { - "component": "CodeConfigurator", - "props": {} - } - }, - { - "property": "dataSource", - "type": "String", - "defaultValue": "", - "bindState": false, - "label": { - "text": { - "zh_CN": "数据源" - } - }, - "cols": 12, - "rules": [], - "widget": { - "component": "CollectionConfigurator", - "props": {} - } + "cols": 12, + "rules": [], + "widget": { + "component": "CodeConfigurator", + "props": {} + } + }, + { + "property": "dataSource", + "type": "String", + "defaultValue": "", + "bindState": false, + "label": { + "text": { + "zh_CN": "数据源" } - ] + }, + "cols": 12, + "rules": [], + "widget": { + "component": "CollectionConfigurator", + "props": {} + } } - ], - "events": {}, - "shortcuts": { - "properties": [] - }, - "contentMenu": { - "actions": [] - } - }, - "configure": { - "isContainer": true + ] } + ], + "events": {}, + "shortcuts": { + "properties": [] }, - { - "icon": "Text", - "name": { - "zh_CN": "Text" - }, - "component": "Text", - "schema": { - "properties": [ + "contentMenu": { + "actions": [] + } + }, + "configure": { + "isContainer": true + } + }, + { + "icon": "Text", + "name": { + "zh_CN": "Text" + }, + "component": "Text", + "schema": { + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "collapse": { + "number": 6, + "text": { + "zh_CN": "显示更多" + } + }, + "content": [ { + "property": "text", + "type": "String", + "defaultValue": "TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。", "label": { - "zh_CN": "基础信息" - }, - "description": { - "zh_CN": "基础信息" - }, - "collapse": { - "number": 6, "text": { - "zh_CN": "显示更多" + "zh_CN": "文本内容" } }, - "content": [ - { - "property": "text", - "type": "String", - "defaultValue": "TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。", - "label": { - "text": { - "zh_CN": "文本内容" - } - }, - "cols": 12, - "rules": [], - "widget": { - "component": "InputConfigurator", - "props": { - "type": "textarea", - "autosize": true - } - } + "cols": 12, + "rules": [], + "widget": { + "component": "InputConfigurator", + "props": { + "type": "textarea", + "autosize": true } - ] - } - ], - "events": { - "onClick": { - "label": { - "zh_CN": "点击事件" - }, - "description": { - "zh_CN": "点击时触发的回调函数" - }, - "type": "event", - "functionInfo": { - "params": [], - "returns": {} - }, - "defaultValue": "" + } } + ] + } + ], + "events": { + "onClick": { + "label": { + "zh_CN": "点击事件" }, - "shortcuts": { - "properties": ["text"] + "description": { + "zh_CN": "点击时触发的回调函数" }, - "contentMenu": { - "actions": [] - } - }, - "configure": { - "loop": true + "type": "event", + "functionInfo": { + "params": [], + "returns": {} + }, + "defaultValue": "" } }, - { - "icon": "icon", - "name": { - "zh_CN": "Icon" - }, - "component": "Icon", - "container": false, - "schema": { - "properties": [ + "shortcuts": { + "properties": ["text"] + }, + "contentMenu": { + "actions": [] + } + }, + "configure": { + "loop": true + } + }, + { + "icon": "icon", + "name": { + "zh_CN": "Icon" + }, + "component": "Icon", + "container": false, + "schema": { + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "collapse": { + "number": 6, + "text": { + "zh_CN": "显示更多" + } + }, + "content": [ { + "property": "name", + "type": "String", + "defaultValue": "IconDel", + "bindState": true, "label": { - "zh_CN": "基础信息" - }, - "description": { - "zh_CN": "基础信息" - }, - "collapse": { - "number": 6, "text": { - "zh_CN": "显示更多" + "zh_CN": "图标类型" } }, - "content": [ - { - "property": "name", - "type": "String", - "defaultValue": "IconDel", - "bindState": true, - "label": { - "text": { - "zh_CN": "图标类型" - } - }, - "cols": 12, - "rules": [], - "widget": { - "component": "SelectIconConfigurator", - "props": {} - } - } - ] - } - ], - "events": { - "onClick": { - "label": { - "zh_CN": "点击事件" - }, - "description": { - "zh_CN": "点击时触发的回调函数" - }, - "type": "event", - "functionInfo": { - "params": [], - "returns": {} - }, - "defaultValue": "" + "cols": 12, + "rules": [], + "widget": { + "component": "SelectIconConfigurator", + "props": {} + } } + ] + } + ], + "events": { + "onClick": { + "label": { + "zh_CN": "点击事件" }, - "shortcuts": { - "properties": ["name"] + "description": { + "zh_CN": "点击时触发的回调函数" }, - "contentMenu": { - "actions": [] - } - }, - "configure": { - "loop": true + "type": "event", + "functionInfo": { + "params": [], + "returns": {} + }, + "defaultValue": "" } }, - { - "icon": "Image", - "name": { - "zh_CN": "Img" - }, - "component": "Img", - "container": false, - "schema": { - "properties": [ + "shortcuts": { + "properties": ["name"] + }, + "contentMenu": { + "actions": [] + } + }, + "configure": { + "loop": true + } + }, + { + "icon": "Image", + "name": { + "zh_CN": "Img" + }, + "component": "Img", + "container": false, + "schema": { + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "collapse": { + "number": 6, + "text": { + "zh_CN": "显示更多" + } + }, + "content": [ { + "property": "src", + "type": "String", + "defaultValue": "", + "bindState": true, "label": { - "zh_CN": "基础信息" - }, - "description": { - "zh_CN": "基础信息" - }, - "collapse": { - "number": 6, "text": { - "zh_CN": "显示更多" - } - }, - "content": [ - { - "property": "src", - "type": "String", - "defaultValue": "", - "bindState": true, - "label": { - "text": { - "zh_CN": "src路径" - } - }, - "cols": 12, - "rules": [], - "widget": { - "component": "InputConfigurator", - "props": {} - } + "zh_CN": "src路径" } - ] - } - ], - "events": { - "onClick": { - "label": { - "zh_CN": "点击事件" }, - "description": { - "zh_CN": "点击时触发的回调函数" - }, - "type": "event", - "functionInfo": { - "params": [], - "returns": {} - }, - "defaultValue": "" + "cols": 12, + "rules": [], + "widget": { + "component": "InputConfigurator", + "props": {} + } } + ] + } + ], + "events": { + "onClick": { + "label": { + "zh_CN": "点击事件" }, - "shortcuts": { - "properties": ["src"] + "description": { + "zh_CN": "点击时触发的回调函数" }, - "contentMenu": { - "actions": [] - } - }, - "configure": { - "loop": true + "type": "event", + "functionInfo": { + "params": [], + "returns": {} + }, + "defaultValue": "" } + }, + "shortcuts": { + "properties": ["src"] + }, + "contentMenu": { + "actions": [] } - ] + }, + "configure": { + "loop": true + } } ], "snippets": [ { - "group": "内置组件", + "group": "layout", + "label": { + "zh_CN": "布局与容器" + }, "children": [ { "name": { - "zh_CN": "Box" + "zh_CN": "盒子容器" }, "screenshot": "", "snippetName": "Box", @@ -451,34 +449,18 @@ "componentName": "div", "props": {} } - }, - { - "name": { - "zh_CN": "Slot" - }, - "screenshot": "", - "snippetName": "Slot", - "icon": "slot", - "schema": { - "componentName": "Slot", - "props": {} - } - }, - { - "name": { - "zh_CN": "Collection" - }, - "screenshot": "", - "snippetName": "Collection", - "icon": "Collection", - "schema": { - "componentName": "Collection", - "props": {} - } - }, + } + ] + }, + { + "group": "basic", + "label": { + "zh_CN": "基础元素" + }, + "children": [ { "name": { - "zh_CN": "Text" + "zh_CN": "文本" }, "screenshot": "", "snippetName": "Text", @@ -492,7 +474,7 @@ }, { "name": { - "zh_CN": "Icon" + "zh_CN": "图标" }, "screenshot": "", "snippetName": "Icon", @@ -506,7 +488,7 @@ }, { "name": { - "zh_CN": "Img" + "zh_CN": "图片" }, "screenshot": "", "snippetName": "Img", @@ -519,6 +501,38 @@ } } ] + }, + { + "group": "advanced", + "label": { + "zh_CN": "高级元素" + }, + "children": [ + { + "name": { + "zh_CN": "插槽" + }, + "screenshot": "", + "snippetName": "Slot", + "icon": "slot", + "schema": { + "componentName": "Slot", + "props": {} + } + }, + { + "name": { + "zh_CN": "数据源容器" + }, + "screenshot": "", + "snippetName": "Collection", + "icon": "Collection", + "schema": { + "componentName": "Collection", + "props": {} + } + } + ] } ] } diff --git a/packages/canvas/render/src/runner.js b/packages/canvas/render/src/runner.js index c23769a39..d7f94b144 100644 --- a/packages/canvas/render/src/runner.js +++ b/packages/canvas/render/src/runner.js @@ -11,16 +11,11 @@ */ import * as Vue from 'vue' -import * as VueI18n from 'vue-i18n' import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../../common' import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n' -import * as TinyWebcomponentCore from '@opentiny/tiny-engine-webcomponent-core' -import TinyVue from '@opentiny/vue' -import * as TinyVueIcon from '@opentiny/vue-icon' import Main, { api } from './RenderMain' -import { getComponent, blockSlotDataMap } from './render' import lowcode from './lowcode' -import { camelize, capitalize } from '@vue/shared' +import { supportUmdBlock } from './supportUmdBlock' const dispatch = (name, data) => { window.parent.document.dispatchEvent(new CustomEvent(name, data)) @@ -31,68 +26,10 @@ const initRenderContext = () => { TinyI18nHost.lowcode = lowcode - // 目前先兼容老区块发布的代码，后期区块发布整改后再删除 - window.React = {} - window.React.createElement = Vue.h - - // 不能采用new Proxy代理Vue的方案，在编译后的vue会报错警告，采用一下方案扩展用于注入一些区块加载逻辑 - window.Vue = { - ...Vue, - resolveComponent(...args) { - // 此处先执行vue内部的解析组件的方法，如果可以拿到组件对象则直接返回，反之则去注册区块 - const component = Vue.resolveComponent(args[0]) - if (component && typeof component === 'string') { - return getComponent(capitalize(camelize(args[0]))) - } else { - return component - } - }, - // renderSlot方法第三个参数是作用域插槽传递的数据，格式{ data: vue.unref(state).componentData } - renderSlot(...args) { - // 获取当前vue的实例 - const instance = Vue.getCurrentInstance() - - // 获取当前区块名称 - const blockName = instance.attrs.dataTag - - const [, slotName, slotData] = args - - // 如果是作用域插槽，则获取作用域插槽传递过来的参数 - if (slotData) { - if (blockSlotDataMap[blockName]) { - blockSlotDataMap[blockName][slotName] = slotData - } else { - blockSlotDataMap[blockName] = { [slotName]: slotData } - } - } - - /** - * vue源码中的renderSlot会忽略default插槽的名称，所以这里必须手动添加args第三个参数的name值 - * vue源码如右所示：if (name !== 'default') props.name = name; return createVNode('slot', props, fallback && fallback()); - **/ - if (slotName === 'default') { - args[2] = args[2] || {} - args[2].name = slotName - } - - return Vue.renderSlot(...args) - } - } - - window.VueI18n = VueI18n - window.TinyVue = TinyVue - window.TinyVueIcon = TinyVueIcon - window.TinyWebcomponentCore = TinyWebcomponentCore - window.TinyI18nHost = TinyI18nHost window.TinyLowcodeComponent = {} window.TinyComponentLibs = {} - Object.entries(TinyVue).forEach(([_key, component]) => { - const { name } = component - if (name) { - window.TinyLowcodeComponent[name] = component - } - }) + supportUmdBlock() document.addEventListener('updateDependencies', updateDependencies) } diff --git a/packages/canvas/render/src/supportUmdBlock.js b/packages/canvas/render/src/supportUmdBlock.js new file mode 100644 index 000000000..b07d50658 --- /dev/null +++ b/packages/canvas/render/src/supportUmdBlock.js @@ -0,0 +1,61 @@ +import * as Vue from 'vue' +import * as VueI18n from 'vue-i18n' +import * as TinyWebcomponentCore from '@opentiny/tiny-engine-webcomponent-core' +import * as TinyVueIcon from '@opentiny/vue-icon' +import TinyVue from '@opentiny/vue' +import TinyI18nHost from '@opentiny/tiny-engine-common/js/i18n' +import { camelize, capitalize } from '@vue/shared' +import { blockSlotDataMap, getComponent } from './render' + +// 和 @opentiny/tiny-engine-block-build 打包umd方式相适配 +export function supportUmdBlock() { + // 不能采用new Proxy代理Vue的方案，在编译后的vue会报错警告，采用一下方案扩展用于注入一些区块加载逻辑 + window.Vue = { + ...Vue, + resolveComponent(...args) { + // 此处先执行vue内部的解析组件的方法，如果可以拿到组件对象则直接返回，反之则去注册区块 + const component = Vue.resolveComponent(args[0]) + if (component && typeof component === 'string') { + return getComponent(capitalize(camelize(args[0]))) + } else { + return component + } + }, + // renderSlot方法第三个参数是作用域插槽传递的数据，格式{ data: vue.unref(state).componentData } + renderSlot(...args) { + // 获取当前vue的实例 + const instance = Vue.getCurrentInstance() + + // 获取当前区块名称 + const blockName = instance.attrs.dataTag + + const [, slotName, slotData] = args + + // 如果是作用域插槽，则获取作用域插槽传递过来的参数 + if (slotData) { + if (blockSlotDataMap[blockName]) { + blockSlotDataMap[blockName][slotName] = slotData + } else { + blockSlotDataMap[blockName] = { [slotName]: slotData } + } + } + + /** + * vue源码中的renderSlot会忽略default插槽的名称，所以这里必须手动添加args第三个参数的name值 + * vue源码如右所示：if (name !== 'default') props.name = name; return createVNode('slot', props, fallback && fallback()); + **/ + if (slotName === 'default') { + args[2] = args[2] || {} + args[2].name = slotName + } + + return Vue.renderSlot(...args) + } + } + + window.VueI18n = VueI18n + window.TinyVue = TinyVue + window.TinyVueIcon = TinyVueIcon + window.TinyWebcomponentCore = TinyWebcomponentCore + window.TinyI18nHost = TinyI18nHost +} diff --git a/packages/canvas/scripts/canvas-vite.config.js b/packages/canvas/scripts/canvas-vite.config.js new file mode 100644 index 000000000..d5e3588a0 --- /dev/null +++ b/packages/canvas/scripts/canvas-vite.config.js @@ -0,0 +1,61 @@ +/** + * Copyright (c) 2023 - present TinyEngine Authors. + * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd. + * + * Use of this source code is governed by an MIT-style license. + * + * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, + * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR + * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. + * + */ + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import nodePolyfill from 'rollup-plugin-polyfill-node' +// https://vitejs.dev/config/ +export default defineConfig({ + base: './', + plugins: [ + vue(), + vueJsx(), + { + name: 'vite-plugin-style-inline-loader', + apply: 'build', + enforce: 'post', + generateBundle(_, bundle) { + const jsFiles = Object.keys(bundle).filter((fileName) => fileName.endsWith('.js')) + jsFiles.forEach((jsFileName) => { + const importedCssFile = [...bundle[jsFileName].viteMetadata.importedCss] + const importCSSContent = importedCssFile.map((cssFileName) => bundle[cssFileName].source).join() + let IIFEcss = '' + if (importCSSContent) { + IIFEcss = `(function() {try {var elementStyle = document.createElement('style');elementStyle.innerText = ${JSON.stringify( + importCSSContent + )};document.head.appendChild(elementStyle);} catch(error) {console.error(error, 'unable to concat style inside the bundled file')}})()` + } + bundle[jsFileName].code += IIFEcss + importedCssFile.forEach((cssFileName) => { + delete bundle[cssFileName] + }) + }) + } + } + ], + publicDir: false, + build: { + cssCodeSplit: true, + rollupOptions: { + plugins: [nodePolyfill({ include: null })], + external: [ + 'vue', + 'vue-i18n', + // 以下内容由于区块和物料公用需要external + '@opentiny/vue', + '@opentiny/vue-icon' + ] + }, + minify: true + } +}) diff --git a/packages/canvas/scripts/vite-plugin-separate-build.js b/packages/canvas/scripts/vite-plugin-separate-build.js new file mode 100644 index 000000000..ecb7a37d9 --- /dev/null +++ b/packages/canvas/scripts/vite-plugin-separate-build.js @@ -0,0 +1,120 @@ +import { build } from 'vite' + +const buildRE = /(?:\?|&)build=(?.*?)(?:&|$)/ +const queryRE = /[?#].*$/ + +const bundleCache = new WeakMap() + +function cleanUrl(url) { + return url.replace(queryRE, '') +} +function saveEmitBundleAssets(config, asset) { + const bundleMap = bundleCache.get(config) + bundleMap.assets.set(asset.fileName, asset) +} + +async function bundleBuildEntry(config, options) { + const viteConfigFile = options.customBuildConfig[options.buildConfig] + const { + output: [outputChunk, ...outputChunks] + } = await build({ + configFile: viteConfigFile, + build: { + rollupOptions: { + input: options.entries + } + } + }) + + // handle sourceMap + const { map: sourcemap, fileName: chunkFileName } = outputChunk + if (sourcemap) { + if (config.build.sourcemap === 'hidden' || config.build.sourcemap === true) { + saveEmitBundleAssets(config, { + fileName: chunkFileName + '.map', + source: sourcemap.toString() + }) + } + } + + // handle assets + outputChunks.forEach((assets) => { + if (assets.type === 'assets') { + saveEmitBundleAssets(config, assets) + } else if (assets.type === 'chunk') { + saveEmitBundleAssets(config, { + fileName: assets.fileName, + source: assets.code + }) + } + }) + return outputChunk +} + +function isSameContent(a, b) { + if (typeof a === 'string') { + if (typeof b === 'string') { + return a === b + } + return Buffer.from(a).equals(b) + } + return Buffer.from(b).equals(a) +} + +export async function vitePluginBuildEntry(customBuildConfig) { + let config + return { + name: 'vite-plugin-build-entry', + apply: 'build', + enforce: 'pre', + configResolved(resolveConfig) { + config = resolveConfig + }, + buildStart() { + bundleCache.set(config, { + assets: new Map(), + bundle: new Map(), + fileNameHash: new Map() + }) + }, + async load(id) { + const match = buildRE.exec(id) + if (!match) { + return + } + const file = cleanUrl(id) + const { code } = await bundleBuildEntry(config, { + customBuildConfig, + buildConfig: match.groups.name, + entries: [file] + }) + const formatBase64 = (code) => { + return 'data:text/javascript;base64,' + Buffer.from(code).toString('base64') + } + return `export default ${JSON.stringify(formatBase64(code))}\n` + }, + generateBundle(opts, bundle) { + if (opts.__vite_skip_assets_emit__) { + return + } + const bundleMap = bundleCache.get(config) + bundleMap.assets.forEach((asset) => { + const duplicateAsset = bundle[asset.fileName] + if (duplicateAsset) { + const content = duplicateAsset.type === 'asset' ? duplicateAsset.source : duplicateAsset.code + if (isSameContent(content, asset.source)) { + return + } + } + this.emitFile({ + type: 'asset', + fileName: asset.fileName, + source: asset.source + }) + bundleMap.assets.clear() + }) + } + } +} + +export default vitePluginBuildEntry diff --git a/packages/canvas/vite.config.js b/packages/canvas/vite.config.js index 5ab5e7e14..a5e4deeb3 100644 --- a/packages/canvas/vite.config.js +++ b/packages/canvas/vite.config.js @@ -14,57 +14,44 @@ import { defineConfig } from 'vite' import path from 'path' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' -import { terser } from 'rollup-plugin-terser' import generateComments from '@opentiny/tiny-engine-vite-plugin-meta-comments' +import { vitePluginBuildEntry } from './scripts/vite-plugin-separate-build' // https://vitejs.dev/config/ export default defineConfig({ - resolve: { - alias: { - '@': path.resolve(__dirname, 'src') - } - }, + base: './', + plugins: [ - vue({ - template: { - compilerOptions: { - isCustomElement: (tag) => tag.startsWith('tiny-i18n-host') - } - } - }), + vue(), vueJsx(), - { ...terser({ module: true }), enforce: 'post' }, - { - apply: 'build', - enforce: 'post', - generateBundle(_, bundle) { - const cssFileName = 'style.css' - const jsFileName = 'index.js' - const { [cssFileName]: cssBundle } = bundle - let IIFEcss = '' - - if (cssBundle) { - IIFEcss = `(function() {try {var elementStyle = document.createElement('style');elementStyle.innerText = ${JSON.stringify( - cssBundle.source - )};document.head.appendChild(elementStyle);} catch(error) {console.error(error, 'unable to concat style inside the bundled file')}})()` - delete bundle[cssFileName] - } - - bundle[jsFileName].code += IIFEcss - } - }, - generateComments() + generateComments(), + vitePluginBuildEntry({ + canvas: path.resolve(__dirname, './scripts/canvas-vite.config.js') + }) ], publicDir: false, build: { - cssCodeSplit: false, + cssCodeSplit: true, lib: { - entry: path.resolve(__dirname, './index.js'), + entry: { + index: path.resolve(__dirname, './index.js') + }, name: 'canvas', fileName: () => 'index.js', formats: ['es'] }, rollupOptions: { + output: { + entryFileNames: '[name].js', + chunkFileNames: '[name].js', + assetFileNames: '[name].[ext]', + banner: (chunk) => { + if (['index'].includes(chunk.name)) { + return `import "./${chunk.name}.css"` + } + return '' + } + }, external: ['vue', '@vueuse/core', 'vue-i18n', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/] }, minify: true diff --git a/packages/common/component/I18nInput.vue b/packages/common/component/I18nInput.vue index b65a33075..076fe34fb 100644 --- a/packages/common/component/I18nInput.vue +++ b/packages/common/component/I18nInput.vue @@ -34,11 +34,11 @@