mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-09-18 03:20:03 +08:00
chore: 删除vue2 runtime，后续vue-components里的组件不再考虑vue2的支持
This commit is contained in:
roymondchen
parent
0967c3449e
commit
7d3a2df793
@ -375,7 +375,7 @@ const stageContentMenu = ref([
|
||||
```html
|
||||
<template>
|
||||
<m-editor
|
||||
runtime-url="https://tencent.github.io/tmagic-editor/playground/runtime/vue3/playground/index.html"
|
||||
runtime-url="https://tencent.github.io/tmagic-editor/playground/runtime/vue/playground/index.html"
|
||||
></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
@ -60,6 +60,5 @@ export default defineComponent({
|
||||
|
||||
## 渲染器示例
|
||||
在tmagic-editor的示例项目中，我们提供了三个版本的 @tmagic/ui。可以参考对应前端框架的渲染器实现。
|
||||
- [vue3 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui/src/container/src/Container.vue)
|
||||
- [vue2 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-vue2/src/container/Container.vue)
|
||||
- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react/src/container/Container.tsx)
|
||||
- [vue 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/vue-components/container/src/Container.vue)
|
||||
- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/react-components/container/src/Container.tsx)
|
||||
@ -5,15 +5,13 @@ tmagic-editor的设计是希望发布的页面支持多个前端框架，即各
|
||||
|
||||
所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 来 @tmagic/ui 和业务组件的，具体 runtime 概念，可以参考[页面发布](../publish)。
|
||||
|
||||
@tmagic/ui 在tmagic-editor设计中，承担的是业务逻辑无关的，基础组件渲染的功能。一切和业务相关的逻辑，都应该在 [runtime](../runtime.html) 中实现。这样 @tmagic/ui 就能保持其通用性。
|
||||
|
||||
我们以项目代码中提供的 vue3 版本的 @tmagic/ui 作为示例介绍其中包含的内容。
|
||||
我们以项目代码中提供的 vue 版本的 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 作为示例介绍其中包含的内容。
|
||||
|
||||
## 渲染器
|
||||
在 vue3 中，实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#容器渲染)。
|
||||
在 vue 中，实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#容器渲染)。
|
||||
|
||||
## 基础组件
|
||||
在 @tmagic/ui vue3 中，我们提供了几个基础组件，可以在项目源码中找到对应内容。
|
||||
在 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 中，我们提供了几个基础组件，可以在项目源码中找到对应内容。
|
||||
|
||||
- page tmagic-editor的页面基础
|
||||
- container tmagic-editor的容器渲染器
|
||||
@ -23,8 +21,3 @@ tmagic-editor的设计是希望发布的页面支持多个前端框架，即各
|
||||
其中 page/container/Component 是 UI 的基础，是每个框架的 UI 都应该实现的。
|
||||
|
||||
button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考[组件开发](../component)。
|
||||
|
||||
## @tmagic/ui 示例
|
||||
- [vue3 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui)
|
||||
- [vue2 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-vue2)
|
||||
- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react)
|
||||
@ -2,14 +2,14 @@
|
||||
tmagic-editor支持业务方进行自定义组件开发。在tmagic-editor中，组件是以 npm 包形式存在的，组件和插件只要按照规范开发，就可以在tmagic-editor的 runtime 中被加入并正确渲染组件。
|
||||
|
||||
## 组件开发
|
||||
以 vue3 的组件开发为例。运行项目中的 playground 示例，会自动加载 vue3 的 runtime。runtime会加载[@tmagic/ui](https://github.com/Tencent/tmagic-editor/tree/master/packages/ui)
|
||||
以 vue 的组件开发为例。运行项目中的 playground 示例，会自动加载 vue 的 runtime。runtime会加载[@tmagic/ui](https://github.com/Tencent/tmagic-editor/tree/master/packages/ui)
|
||||
|
||||
## 组件注册
|
||||
在 [playground](https://tencent.github.io/tmagic-editor/playground/index.html#/) 中，我们可以尝试点击添加一个组件，在模拟器区域里，就会出现这个组件。其中就涉及到组件注册。
|
||||
|
||||
这一步需要开发者基于tmagic-editor搭建了平台后，实现组件列表的注册、获取机制，tmagic-editor组件注册其实就是保存好组件 `type` 的映射关系。`type` 可以参考[组件介绍](../guide/conception.html#组件)。
|
||||
|
||||
可以参考 vue3 版本的 @tmagic/ui 中，[组件渲染](../guide/advanced/page.html#组件渲染)逻辑里，type 会作为组件名进入渲染。所以在 vue3 的组件开发中，我们也需要在为 vue 组件声明 name 字段时，和 type 值对应起来，才能正确渲染组件。
|
||||
可以参考 vue 版本的 @tmagic/ui 中，[组件渲染](../guide/advanced/page.html#组件渲染)逻辑里，type 会作为组件名进入渲染。所以在 vue 的组件开发中，我们也需要在为 vue 组件声明 name 字段时，和 type 值对应起来，才能正确渲染组件。
|
||||
|
||||
### 组件规范
|
||||
组件的基础形式，需要有四个文件
|
||||
@ -22,7 +22,7 @@ tmagic-editor支持业务方进行自定义组件开发。在tmagic-editor中，
|
||||
@tmagic/ui 中的 button/text 就是基础的组件示例。我们要求声明 index 入口，因为我们希望在后续的配套打包工具实现上，可以有一个统一规范入口。
|
||||
|
||||
### 1. 创建组件
|
||||
在项目中，如 runtime vue3 目录中，创建一个名为 test-component 的组件目录，其中包含上面四个规范文件。
|
||||
在项目中，如 runtime 目录中，创建一个名为 test-component 的组件目录，其中包含上面四个规范文件。
|
||||
```javascript
|
||||
// index.js
|
||||
// vue
|
||||
@ -69,7 +69,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
vue3 版本的组件代码示例
|
||||
版本的组件代码示例
|
||||
```vue
|
||||
<!-- Test.vue -->
|
||||
<template>
|
||||
@ -119,7 +119,7 @@ export default Test;
|
||||
```
|
||||
|
||||
### 2. 使用tmagic-cli
|
||||
在 runtime vue3 中，我们已经提供好一份示例。在 tmagic.config.ts 文件中。只需要在 packages 加入你创建的组件的路径（如果是个 npm 包，则将路径替换为包名即可），打包工具就会自动识别到你的组件。
|
||||
在 runtime vue 中，我们已经提供好一份示例。在 tmagic.config.ts 文件中。只需要在 packages 加入你创建的组件的路径（如果是个 npm 包，则将路径替换为包名即可），打包工具就会自动识别到你的组件。
|
||||
|
||||
### 3. 启动 playground
|
||||
在上面的步骤完成后，在 playground/src/configs/componentGroupList 中。找到组件栏的基础组件列表，在其中加入你的开发组件
|
||||
@ -155,7 +155,7 @@ npm run playground
|
||||
<img src="https://image.video.qpic.cn/oa_fd3c9c-3_548108267_1636719045199471">
|
||||
|
||||
### 4. 启动 runtime
|
||||
在完成开发中组件在编辑器中的实现后，我们将编辑器中的 DSL 源码📄 打开，复制 DSL。并在 runtime/vue3/src/page 下。创建一个 page-config.js 文件。将 DSL 作为配置导出。
|
||||
在完成开发中组件在编辑器中的实现后，我们将编辑器中的 DSL 源码📄 打开，复制 DSL。并在 runtime/vue/src/page 下。创建一个 page-config.js 文件。将 DSL 作为配置导出。
|
||||
|
||||
```javascript
|
||||
window.magicDSL = [
|
||||
@ -168,7 +168,7 @@ window.magicDSL = [
|
||||
import './page-config.js';
|
||||
```
|
||||
|
||||
然后执行在 runtime/vue3 目录下执行
|
||||
然后执行在 runtime/ 目录下执行
|
||||
```
|
||||
npm run build:libs
|
||||
npm run dev
|
||||
|
||||
@ -60,11 +60,6 @@ DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了
|
||||
### runtime
|
||||
我们把页面统一称为 runtime，更具体的 runtime 概念可以查看[页面发布](./publish.html#runtime)。**runtime 是承载tmagic-editor项目页面的运行环境**。编辑器的工作区是 runtime 的一个具体实例，另一个就是我们发布上线后，用户访问的真实项目页面。
|
||||
|
||||
### @tmagic/ui
|
||||
@tmagic/ui 包含了tmagic-editor的基础组件库，提供了容器、文本、按钮这样的基础组件。我们提供了不同语言框架的 @tmagic/ui，如 vue2 和 vue3。
|
||||
|
||||
@tmagic/ui 和 runtime 是配套出现的，runtime 必须基于 @tmagic/ui 才可以实现渲染。因为 @tmagic/ui 需要提供 runtime 所需要的渲染器。
|
||||
|
||||
## 联动
|
||||
页面搭建过程中，会涉及到两种联动形式
|
||||
- 在编辑器中，组件的表单配置项之间需要联动。
|
||||
|
||||
@ -125,7 +125,7 @@ app.mount('#app');
|
||||
// 初始化页面数据
|
||||
}),
|
||||
|
||||
runtimeUrl: "/runtime/vue3/playground/index.html",
|
||||
runtimeUrl: "/runtime/vue/playground/index.html",
|
||||
|
||||
propsConfigs: [
|
||||
// 组件属性列表
|
||||
@ -208,10 +208,10 @@ npm install sass -D
|
||||
|
||||
```javascript
|
||||
setup() {
|
||||
asyncLoadJs(`/runtime/vue3/assets/config.js`).then(() => {
|
||||
asyncLoadJs(`/runtime/vue/assets/config.js`).then(() => {
|
||||
propsConfigs.value = window.magicPresetConfigs;
|
||||
});
|
||||
asyncLoadJs(`/runtime/vue3/assets/value.js`).then(() => {
|
||||
asyncLoadJs(`/runtime/vue/assets/value.js`).then(() => {
|
||||
propsValues.value = window.magicPresetValues;
|
||||
});
|
||||
}
|
||||
|
||||
@ -36,9 +36,6 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目
|
||||
- **@tmagic/core** 实现对组件进行跨框架管理与一些通用复杂逻辑的实现。
|
||||
- **@tmagic/data-source** 实现数据源的管理与编译。
|
||||
- **@tmagic/stage** 实现在编辑器中对组件的位置拖动与大小拖拉。
|
||||
- **@tmagic/ui** 提供一些vue3基础组件。
|
||||
- **@tmagic/ui-vue2** 提供一些vue2基础组件。
|
||||
- **@tmagic/ui-react** 提供一些react基础组件。
|
||||
- **runtime** 实现在编辑器中对使用不同框架的组件的渲染。
|
||||
|
||||
可以查阅 tmagic 的[源代码](https://github.com/Tencent/tmagic-editor)，与文档描述内容可以逐一对应上，希望文档内容可以为开发者带来比较好的开发体验。
|
||||
|
||||
@ -13,7 +13,7 @@ runtime 的概念，是理解tmagic-editor项目页运行的重要概念，runti
|
||||
|
||||
所以更深入描述，runtime 是tmagic-editor页面的渲染环境，提供不同场景下的能力封装。如果理解了tmagic-editor的设计，阅读了tmagic-editor的源码，可以发现，runtime 只是对tmagic-editor的渲染器做了一层包装，在不同 runtime 中，tmagic-editor的渲染逻辑和组件代码都是相同的。
|
||||
|
||||
并且，由于tmagic-editor在编辑器中的模拟器是通过 iframe 渲染的，和tmagic-editor平台本身可以做到框架解耦，所以 runtime 也可以用不同框架开发。目前tmagic-editor提供了 vue2/vue3 和 react 的 runtime 示例。
|
||||
并且，由于tmagic-editor在编辑器中的模拟器是通过 iframe 渲染的，和tmagic-editor平台本身可以做到框架解耦，所以 runtime 也可以用不同框架开发。目前tmagic-editor提供了 vue 和 react 的 runtime 示例。
|
||||
|
||||
各个 runtime 的作用除了作为不同场景下的渲染环境，同时也是不同环境的打包构建载体。tmagic-editor示例代码中的打包就是基于 runtime 进行的。
|
||||
|
||||
@ -21,8 +21,7 @@ runtime 的概念，是理解tmagic-editor项目页运行的重要概念，runti
|
||||
由于 runtime 是页面渲染的承载环境，其中会加载 @tmagic/ui 以及各个业务组件，业务发布项目页也是基于 runtime，所以在 runtime 中实现业务方的自定义逻辑是最合适的。runtime 可以提供一些全局 API，供业务组件调用。我们可以把下面的模拟器中的 runtime 视为一个业务方runtime。
|
||||
|
||||
tmagic-editor提供了三个版本的 runtime 示例，可以参考：
|
||||
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
|
||||
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
|
||||
- [vue runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue)
|
||||
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
|
||||
|
||||
### 真实页面渲染（Page）
|
||||
|
||||
@ -14,8 +14,7 @@ runtime 的 `page` 部分，就是真实项目页面的渲染环境。发布出
|
||||
- 加载第三方全局组件/插件等
|
||||
|
||||
具体的 page 实现示例，可以参考
|
||||
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3/page)
|
||||
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2/page)
|
||||
- [vue runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue/page)
|
||||
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react/page)
|
||||
|
||||
### playground
|
||||
@ -45,8 +44,7 @@ window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
|
||||
|sortNode| 组件在容器间排序 |{ `src` , `dist`, `root` }: `SortEventData` |
|
||||
|
||||
runtime 的实现示例，可以参考tmagic-editor提供的：
|
||||
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
|
||||
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
|
||||
- [vue runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue)
|
||||
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
|
||||
|
||||
### 页面发布
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 3.[DSL](../conception.md#dsl) 解析渲染
|
||||
|
||||
tmagic 提供了 vue3/vue2/react 三个版本的解析渲染组件，可以直接使用
|
||||
tmagic 提供了 vue/react 两个个版本的解析渲染组件，可以直接使用
|
||||
|
||||
[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
|
||||
|
||||
|
||||
@ -11,16 +11,14 @@
|
||||
"clean:all": "pnpm clean:top && pnpm clean:modules",
|
||||
"lint": "eslint --cache .",
|
||||
"lint-fix": "eslint --fix --cache .",
|
||||
"playground": "pnpm --filter \"runtime-vue3\" build:libs && pnpm --filter \"runtime-vue3\" --filter \"tmagic-playground\" dev",
|
||||
"playground": "pnpm --filter \"runtime-vue\" build:libs && pnpm --filter \"runtime-vue\" --filter \"tmagic-playground\" dev",
|
||||
"pg": "pnpm playground",
|
||||
"playground:vue2": "pnpm --filter \"runtime-vue2\" build:libs && pnpm --filter \"runtime-vue2\" --filter \"tmagic-playground\" dev:vue2",
|
||||
"pg:vue2": "pnpm playground:vue2",
|
||||
"playground:react": "pnpm --filter \"runtime-react\" build:libs && pnpm --filter \"runtime-react\" --filter \"tmagic-playground\" dev:react",
|
||||
"pg:react": "pnpm playground:react",
|
||||
"build": "pnpm build:dts && node scripts/build.mjs",
|
||||
"build:dts": "pnpm --filter \"@tmagic/cli\" build && tsc -p tsconfig.build-browser.json && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build-vue.json && rollup -c rollup.dts.config.js && rimraf temp",
|
||||
"check:type": "tsc --incremental --noEmit -p tsconfig.check.json && vue-tsc --noEmit -p tsconfig.check-vue.json",
|
||||
"build:playground": "pnpm --filter \"runtime-vue3\" build && pnpm --filter \"tmagic-playground\" build",
|
||||
"build:playground": "pnpm --filter \"runtime-vue\" build && pnpm --filter \"tmagic-playground\" build",
|
||||
"docs:dev": "vitepress dev docs",
|
||||
"docs:serve": "vitepress serve docs",
|
||||
"docs:build": "vitepress build docs",
|
||||
|
||||
1
playground/.env.vue
Normal file
1
playground/.env.vue
Normal file
@ -0,0 +1 @@
|
||||
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue VITE_ENTRY_PATH=./entry/vue
|
||||
@ -1,2 +0,0 @@
|
||||
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue2
|
||||
VITE_ENTRY_PATH=./entry/vue2
|
||||
@ -1,2 +0,0 @@
|
||||
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue3
|
||||
VITE_ENTRY_PATH=./entry/vue3
|
||||
@ -1,27 +0,0 @@
|
||||
# Vue 3 + Typescript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and Typescript in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
|
||||
|
||||
### If Using `<script setup>`
|
||||
|
||||
[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).
|
||||
|
||||
## Type Support For `.vue` Imports in TS
|
||||
|
||||
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:
|
||||
|
||||
### If Using Volar
|
||||
|
||||
Run `Volar: Switch TS Plugin on/off` from VSCode command palette.
|
||||
|
||||
### If Using Vetur
|
||||
|
||||
1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
|
||||
2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
|
||||
3. Open `src/main.ts` in VSCode
|
||||
4. Open the VSCode command palette
|
||||
5. Search and run "Select TypeScript version" -> "Use workspace version"
|
||||
@ -5,10 +5,9 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"clean:top": "rimraf dist",
|
||||
"dev": "vite --mode vue3",
|
||||
"dev:vue2": "vite --mode vue2",
|
||||
"dev": "vite --mode vue",
|
||||
"dev:react": "vite --mode react",
|
||||
"build": "npm run clean:top && node --max_old_space_size=8192 node_modules/vite/bin/vite.js build --mode vue3",
|
||||
"build": "npm run clean:top && node --max_old_space_size=8192 node_modules/vite/bin/vite.js build --mode vue",
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
139
pnpm-lock.yaml
generated
139
pnpm-lock.yaml
generated
@ -1059,81 +1059,7 @@ importers:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.2
|
||||
|
||||
runtime/vue-runtime-help:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
specifier: '>=1.6.0-beta.0'
|
||||
version: 1.6.0-beta.0(typescript@5.9.2)
|
||||
'@tmagic/stage':
|
||||
specifier: '>=1.6.0-beta.0'
|
||||
version: 1.6.0-beta.0(@tmagic/core@1.6.0-beta.0(typescript@5.9.2))(typescript@5.9.2)
|
||||
'@vue/composition-api':
|
||||
specifier: '>=1.7.2'
|
||||
version: 1.7.2(vue@2.7.16)
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.2
|
||||
vue:
|
||||
specifier: '>=2.6.0 || >=3.5.0'
|
||||
version: 2.7.16
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@2.7.16))(vue@2.7.16)
|
||||
devDependencies:
|
||||
'@vue/test-utils':
|
||||
specifier: ^2.4.6
|
||||
version: 2.4.6
|
||||
|
||||
runtime/vue2:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
specifier: 1.6.0-beta.6
|
||||
version: 1.6.0-beta.6(typescript@5.9.2)
|
||||
'@tmagic/stage':
|
||||
specifier: 1.6.0-beta.6
|
||||
version: 1.6.0-beta.6(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(typescript@5.9.2)
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: ^1.2.0
|
||||
version: 1.2.1(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(@tmagic/stage@1.6.0-beta.6(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(typescript@5.9.2))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.9.2)(vue@2.7.16)
|
||||
axios:
|
||||
specifier: ^1.11.0
|
||||
version: 1.11.0
|
||||
vue:
|
||||
specifier: ^2.7.16
|
||||
version: 2.7.16
|
||||
devDependencies:
|
||||
'@tmagic/cli':
|
||||
specifier: 1.6.0-beta.6
|
||||
version: 1.6.0-beta.6(typescript@5.9.2)
|
||||
'@types/events':
|
||||
specifier: ^3.0.3
|
||||
version: 3.0.3
|
||||
'@vitejs/plugin-legacy':
|
||||
specifier: ^7.2.1
|
||||
version: 7.2.1(terser@5.43.1)(vite@7.1.3(@types/node@24.0.10)(jiti@2.4.2)(sass@1.91.0)(terser@5.43.1)(yaml@2.8.0))
|
||||
'@vitejs/plugin-vue2':
|
||||
specifier: ^2.3.3
|
||||
version: 2.3.3(vite@7.1.3(@types/node@24.0.10)(jiti@2.4.2)(sass@1.91.0)(terser@5.43.1)(yaml@2.8.0))(vue@2.7.16)
|
||||
rollup:
|
||||
specifier: 4.44.1
|
||||
version: 4.44.1
|
||||
rollup-plugin-external-globals:
|
||||
specifier: ^0.13.0
|
||||
version: 0.13.0(rollup@4.44.1)
|
||||
sass:
|
||||
specifier: ^1.91.0
|
||||
version: 1.91.0
|
||||
terser:
|
||||
specifier: ^5.43.1
|
||||
version: 5.43.1
|
||||
vite:
|
||||
specifier: 'catalog:'
|
||||
version: 7.1.3(@types/node@24.0.10)(jiti@2.4.2)(sass@1.91.0)(terser@5.43.1)(yaml@2.8.0)
|
||||
vue-template-compiler:
|
||||
specifier: ^2.7.16
|
||||
version: 2.7.16
|
||||
|
||||
runtime/vue3:
|
||||
runtime/vue:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
specifier: 1.6.0-beta.6
|
||||
@ -1197,6 +1123,31 @@ importers:
|
||||
specifier: 'catalog:'
|
||||
version: 7.1.3(@types/node@24.0.10)(jiti@2.4.2)(sass@1.91.0)(terser@5.43.1)(yaml@2.8.0)
|
||||
|
||||
runtime/vue-runtime-help:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
specifier: '>=1.6.0-beta.0'
|
||||
version: 1.6.0-beta.0(typescript@5.9.2)
|
||||
'@tmagic/stage':
|
||||
specifier: '>=1.6.0-beta.0'
|
||||
version: 1.6.0-beta.0(@tmagic/core@1.6.0-beta.0(typescript@5.9.2))(typescript@5.9.2)
|
||||
'@vue/composition-api':
|
||||
specifier: '>=1.7.2'
|
||||
version: 1.7.2(vue@2.7.16)
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.2
|
||||
vue:
|
||||
specifier: '>=2.6.0 || >=3.5.0'
|
||||
version: 2.7.16
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@2.7.16))(vue@2.7.16)
|
||||
devDependencies:
|
||||
'@vue/test-utils':
|
||||
specifier: ^2.4.6
|
||||
version: 2.4.6
|
||||
|
||||
vue-components/button:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
@ -3562,13 +3513,6 @@ packages:
|
||||
vite: ^5.0.0 || ^6.0.0 || ^7.0.0
|
||||
vue: ^3.0.0
|
||||
|
||||
'@vitejs/plugin-vue2@2.3.3':
|
||||
resolution: {integrity: sha512-qexY6+bbwY8h0AZerzUuGywNTi0cLOkbiSbggr0R3WEW95iB2hblQFyv4MAkkc2vm4gZN1cO5kzT1Kp6xlVzZw==}
|
||||
engines: {node: ^14.18.0 || >= 16.0.0}
|
||||
peerDependencies:
|
||||
vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
|
||||
vue: ^2.7.0-0
|
||||
|
||||
'@vitejs/plugin-vue@5.2.3':
|
||||
resolution: {integrity: sha512-IYSLEQj4LgZZuoVpdSUCw3dIynTWQgPlaRP6iAvMle4My0HdYwr5g5wQAfwOeHQBmYwEkqF70nRpSilr6PoUDg==}
|
||||
engines: {node: ^18.0.0 || >=20.0.0}
|
||||
@ -6895,9 +6839,6 @@ packages:
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
|
||||
vue-template-compiler@2.7.16:
|
||||
resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
|
||||
|
||||
vue-tsc@3.0.6:
|
||||
resolution: {integrity: sha512-Tbs8Whd43R2e2nxez4WXPvvdjGbW24rOSgRhLOHXzWiT4pcP4G7KeWh0YCn18rF4bVwv7tggLLZ6MJnO6jXPBg==}
|
||||
hasBin: true
|
||||
@ -8691,9 +8632,9 @@ snapshots:
|
||||
|
||||
'@rollup/pluginutils@5.1.4(rollup@4.44.1)':
|
||||
dependencies:
|
||||
'@types/estree': 1.0.7
|
||||
'@types/estree': 1.0.8
|
||||
estree-walker: 2.0.2
|
||||
picomatch: 4.0.2
|
||||
picomatch: 4.0.3
|
||||
optionalDependencies:
|
||||
rollup: 4.44.1
|
||||
|
||||
@ -8850,7 +8791,7 @@ snapshots:
|
||||
cac: 6.7.14
|
||||
chokidar: 3.6.0
|
||||
esbuild: 0.21.5
|
||||
fs-extra: 11.3.0
|
||||
fs-extra: 11.3.1
|
||||
picocolors: 1.1.1
|
||||
recast: 0.23.11
|
||||
tslib: 2.8.1
|
||||
@ -9157,16 +9098,6 @@ snapshots:
|
||||
optionalDependencies:
|
||||
typescript: 5.9.2
|
||||
|
||||
'@tmagic/vue-runtime-help@1.2.1(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(@tmagic/stage@1.6.0-beta.6(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(typescript@5.9.2))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.9.2)(vue@2.7.16)':
|
||||
dependencies:
|
||||
vue: 2.7.16
|
||||
vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@2.7.16))(vue@2.7.16)
|
||||
optionalDependencies:
|
||||
'@tmagic/core': 1.6.0-beta.6(typescript@5.9.2)
|
||||
'@tmagic/stage': 1.6.0-beta.6(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(typescript@5.9.2)
|
||||
'@vue/composition-api': 1.7.2(vue@2.7.16)
|
||||
typescript: 5.9.2
|
||||
|
||||
'@tmagic/vue-runtime-help@1.2.1(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(@tmagic/stage@1.6.0-beta.6(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(typescript@5.9.2))(@vue/composition-api@1.7.2(vue@3.5.20(typescript@5.9.2)))(typescript@5.9.2)(vue@3.5.20(typescript@5.9.2))':
|
||||
dependencies:
|
||||
vue: 3.5.20(typescript@5.9.2)
|
||||
@ -9412,11 +9343,6 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@vitejs/plugin-vue2@2.3.3(vite@7.1.3(@types/node@24.0.10)(jiti@2.4.2)(sass@1.91.0)(terser@5.43.1)(yaml@2.8.0))(vue@2.7.16)':
|
||||
dependencies:
|
||||
vite: 7.1.3(@types/node@24.0.10)(jiti@2.4.2)(sass@1.91.0)(terser@5.43.1)(yaml@2.8.0)
|
||||
vue: 2.7.16
|
||||
|
||||
'@vitejs/plugin-vue@5.2.3(vite@5.4.16(@types/node@24.0.10)(sass@1.91.0)(terser@5.43.1))(vue@3.5.20(typescript@5.9.2))':
|
||||
dependencies:
|
||||
vite: 5.4.16(@types/node@24.0.10)(sass@1.91.0)(terser@5.43.1)
|
||||
@ -11649,7 +11575,7 @@ snapshots:
|
||||
|
||||
is-reference@3.0.3:
|
||||
dependencies:
|
||||
'@types/estree': 1.0.7
|
||||
'@types/estree': 1.0.8
|
||||
|
||||
is-regex@1.2.1:
|
||||
dependencies:
|
||||
@ -13383,11 +13309,6 @@ snapshots:
|
||||
'@vue/devtools-api': 6.6.4
|
||||
vue: 3.5.20(typescript@5.9.2)
|
||||
|
||||
vue-template-compiler@2.7.16:
|
||||
dependencies:
|
||||
de-indent: 1.0.2
|
||||
he: 1.2.0
|
||||
|
||||
vue-tsc@3.0.6(typescript@5.9.2):
|
||||
dependencies:
|
||||
'@volar/typescript': 2.4.23
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "runtime-vue3",
|
||||
"name": "runtime-vue",
|
||||
"version": "1.6.0-beta.6",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/favicon.png" type="image/png">
|
||||
<title>Vue3 Page</title>
|
||||
<title>Vue Page</title>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
@ -17,7 +17,7 @@ export default defineConfig({
|
||||
enforce: 'post',
|
||||
closeBundle() {
|
||||
const clientFile = path.resolve(__dirname, '../dist/page')
|
||||
fse.copySync(clientFile, path.resolve(__dirname, '../../../playground/public/runtime/vue3/runtime/page'))
|
||||
fse.copySync(clientFile, path.resolve(__dirname, '../../../playground/public/runtime/vue/runtime/page'))
|
||||
},
|
||||
}
|
||||
],
|
||||
@ -5,7 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.png" type="image/png">
|
||||
<title>Vue3 Playground</title>
|
||||
<title>Vue Playground</title>
|
||||
<style>
|
||||
.magic-ui-page {
|
||||
overflow: hidden;
|
||||
@ -16,7 +16,7 @@ export default defineConfig({
|
||||
enforce: 'post',
|
||||
closeBundle() {
|
||||
const clientFile = path.resolve(__dirname, '../dist/playground')
|
||||
fse.copySync(clientFile, path.resolve(__dirname, '../../../playground/public/runtime/vue3/playground'))
|
||||
fse.copySync(clientFile, path.resolve(__dirname, '../../../playground/public/runtime/vue/playground'))
|
||||
},
|
||||
}
|
||||
],
|
||||
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
@ -24,7 +24,7 @@ export default defineConfig((mode) => {
|
||||
apply: 'build',
|
||||
enforce: 'post',
|
||||
closeBundle() {
|
||||
fse.copySync(publicPath, path.resolve(dirname, `../../../playground/public/entry/vue3/${fileName}`));
|
||||
fse.copySync(publicPath, path.resolve(dirname, `../../../playground/public/entry/vue/${fileName}`));
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -51,7 +51,7 @@ export default defineConfig({
|
||||
|
||||
root: './',
|
||||
|
||||
base: '/tmagic-editor/playground/runtime/vue3',
|
||||
base: '/tmagic-editor/playground/runtime/vue',
|
||||
|
||||
publicDir: 'public',
|
||||
|
||||
2
runtime/vue2/.gitignore
vendored
2
runtime/vue2/.gitignore
vendored
@ -1,2 +0,0 @@
|
||||
.tmagic
|
||||
entry-dist
|
||||
@ -1,87 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2025 Tencent. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import path from 'path';
|
||||
|
||||
import { defineConfig } from 'vite';
|
||||
import legacy from '@vitejs/plugin-legacy';
|
||||
import vue from '@vitejs/plugin-vue2';
|
||||
// @ts-ignore
|
||||
import externalGlobals from 'rollup-plugin-external-globals';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
if (['value', 'config', 'event', 'ds:value', 'ds:config', 'ds:event'].includes(mode)) {
|
||||
const capitalToken = mode
|
||||
.split(':')
|
||||
.map((word) => word[0].toUpperCase() + word.slice(1))
|
||||
.join('');
|
||||
|
||||
const fileName = mode.replace(':', '-');
|
||||
|
||||
return {
|
||||
publicDir: './.tmagic/public',
|
||||
build: {
|
||||
cssCodeSplit: false,
|
||||
sourcemap: true,
|
||||
minify: false,
|
||||
target: 'esnext',
|
||||
outDir: `../../playground/public/entry/vue2/${fileName}`,
|
||||
|
||||
lib: {
|
||||
entry: `.tmagic/${fileName}-entry.ts`,
|
||||
name: `magicPreset${capitalToken}s`,
|
||||
fileName: 'index',
|
||||
formats: ['umd'],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (['page', 'playground'].includes(mode)) {
|
||||
return {
|
||||
plugins: [
|
||||
vue(),
|
||||
externalGlobals({ 'vue-demi': 'VueDemi', vue: 'Vue' }, { exclude: [`./${mode}/index.html`] }),
|
||||
legacy({
|
||||
targets: ['defaults', 'not IE 11'],
|
||||
}),
|
||||
],
|
||||
|
||||
root: `./${mode}/`,
|
||||
|
||||
publicDir: '../public',
|
||||
|
||||
base: `/tmagic-editor/playground/runtime/vue2/${mode}`,
|
||||
|
||||
optimizeDeps: {
|
||||
exclude: ['vue-demi'],
|
||||
},
|
||||
|
||||
build: {
|
||||
emptyOutDir: true,
|
||||
sourcemap: true,
|
||||
outDir: path.resolve(process.cwd(), `../../playground/public/runtime/vue2/${mode}`),
|
||||
rollupOptions: {
|
||||
external: ['vue', 'vue-demi'],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
});
|
||||
@ -1,59 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2025 Tencent. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import path from 'path';
|
||||
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue2';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
|
||||
resolve: {
|
||||
alias: [
|
||||
{ find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
|
||||
{
|
||||
find: /^@tmagic\/core\/resetcss.css/,
|
||||
replacement: path.join(__dirname, '../../packages/core/resetcss.css'),
|
||||
},
|
||||
{ find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
|
||||
{ find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
|
||||
{ find: /^@data-source/, replacement: path.join(__dirname, '../../packages/data-source/src') },
|
||||
{ find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../../packages/data-source/src/index.ts') },
|
||||
{ find: /^@tmagic\/dep/, replacement: path.join(__dirname, '../../packages/dep/src/index.ts') },
|
||||
{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
|
||||
{ find: /^@tmagic\/vue-runtime-help/, replacement: path.join(__dirname, '../vue-runtime-help/src/index.ts') },
|
||||
],
|
||||
},
|
||||
|
||||
root: './',
|
||||
|
||||
base: '/tmagic-editor/playground/runtime/vue2/',
|
||||
|
||||
publicDir: 'public',
|
||||
|
||||
optimizeDeps: {
|
||||
exclude: ['vue-demi'],
|
||||
},
|
||||
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 8078,
|
||||
strictPort: true,
|
||||
},
|
||||
});
|
||||
@ -1,43 +0,0 @@
|
||||
{
|
||||
"name": "runtime-vue2",
|
||||
"version": "1.6.0-beta.6",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev:vue2": "vite --config dev.vite.config.ts",
|
||||
"dev:playground": "vite --config dev.vite.config.ts",
|
||||
"build": "npm run build:libs && npm run build:page && npm run build:playground",
|
||||
"build:page": "vite build --config build.vite.config.ts --mode page",
|
||||
"build:playground": "vite build --config build.vite.config.ts --mode playground",
|
||||
"build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event && npm run build:ds:libs",
|
||||
"build:ds:libs": "npm run build:ds:config && npm run build:ds:value && npm run build:ds:event",
|
||||
"build:config": "vite build --config build.vite.config.ts --mode config",
|
||||
"build:value": "vite build --config build.vite.config.ts --mode value",
|
||||
"build:event": "vite build --config build.vite.config.ts --mode event",
|
||||
"build:ds:config": "vite build --config build.vite.config.ts --mode ds:config",
|
||||
"build:ds:value": "vite build --config build.vite.config.ts --mode ds:value",
|
||||
"build:ds:event": "vite build --config build.vite.config.ts --mode ds:event"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/core": "1.6.0-beta.6",
|
||||
"@tmagic/stage": "1.6.0-beta.6",
|
||||
"@tmagic/vue-runtime-help": "^1.2.0",
|
||||
"axios": "^1.11.0",
|
||||
"vue": "^2.7.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tmagic/cli": "1.6.0-beta.6",
|
||||
"@types/events": "^3.0.3",
|
||||
"rollup": "4.44.1",
|
||||
"rollup-plugin-external-globals": "^0.13.0",
|
||||
"sass": "^1.91.0",
|
||||
"terser": "^5.43.1",
|
||||
"vite": "catalog:",
|
||||
"@vitejs/plugin-legacy": "^7.2.1",
|
||||
"@vitejs/plugin-vue2": "^2.3.3",
|
||||
"vue-template-compiler": "^2.7.16"
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<component :is="pageComponent" :config="pageConfig"></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import { useComponent, useDsl } from '@tmagic/vue-runtime-help';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
|
||||
setup() {
|
||||
const { pageConfig } = useDsl();
|
||||
const pageComponent = useComponent('page');
|
||||
|
||||
return {
|
||||
pageComponent,
|
||||
pageConfig,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/favicon.png" type="image/png">
|
||||
<title>Vue2 Page</title>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
#app {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#app::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
|
||||
</head>
|
||||
<body style="font-size: 14px">
|
||||
<div id="app"></div>
|
||||
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,78 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2025 Tencent. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Vue from 'vue';
|
||||
|
||||
import TMagicApp, { DataSourceManager, DeepObservedData, getUrlParam, registerDataSourceOnDemand } from '@tmagic/core';
|
||||
import type { UserRenderFunctionOptions } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import asyncDataSources from '../.tmagic/async-datasource-entry';
|
||||
import components from '../.tmagic/comp-entry';
|
||||
import plugins from '../.tmagic/plugin-entry';
|
||||
|
||||
import request, { service } from './utils/request';
|
||||
import AppComponent from './App.vue';
|
||||
import { getLocalConfig } from './utils';
|
||||
|
||||
import '@tmagic/core/resetcss.css';
|
||||
|
||||
DataSourceManager.registerObservedData(DeepObservedData);
|
||||
|
||||
Vue.use(request);
|
||||
|
||||
const dsl = ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {};
|
||||
|
||||
const app = new TMagicApp({
|
||||
ua: window.navigator.userAgent,
|
||||
config: dsl,
|
||||
request: service,
|
||||
curPage: getUrlParam('page'),
|
||||
useMock: Boolean(getUrlParam('useMock')),
|
||||
});
|
||||
|
||||
app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
|
||||
|
||||
Object.entries(components).forEach(([type, component]: [string, any]) => {
|
||||
app.registerComponent(type, component);
|
||||
});
|
||||
|
||||
Object.values(plugins).forEach((plugin: any) => {
|
||||
Vue.use(plugin, { app });
|
||||
});
|
||||
|
||||
registerDataSourceOnDemand(dsl, asyncDataSources).then((dataSources) => {
|
||||
Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
|
||||
DataSourceManager.register(type, ds);
|
||||
});
|
||||
|
||||
Vue.prototype.app = app;
|
||||
|
||||
const vueApp = new Vue({
|
||||
provide: {
|
||||
app,
|
||||
userRender: ({ h, type, props, attrs, style, className }: UserRenderFunctionOptions) =>
|
||||
// class作为保留字符，android 4.4以下不能直接使用, 需要加引号
|
||||
// eslint-disable-next-line prettier/prettier
|
||||
h(type, { props, attrs, style, 'class': className }),
|
||||
},
|
||||
|
||||
render: (h) => h(AppComponent),
|
||||
});
|
||||
|
||||
vueApp.$mount('#app');
|
||||
});
|
||||
@ -1,41 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2025 Tencent. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
|
||||
const requestHandler = function (config: Record<any, any>) {
|
||||
return config;
|
||||
};
|
||||
|
||||
const responseHandler = function (response: AxiosResponse) {
|
||||
return response;
|
||||
};
|
||||
|
||||
export const service = axios.create({
|
||||
withCredentials: true,
|
||||
timeout: 7000,
|
||||
});
|
||||
|
||||
service.interceptors.request.use(requestHandler);
|
||||
service.interceptors.response.use(responseHandler);
|
||||
|
||||
export default {
|
||||
install(Vue: any) {
|
||||
Vue.prototype.request = service;
|
||||
},
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<component v-if="pageConfig" :is="pageComponent" :key="pageConfig.id" :config="pageConfig"></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import { useComponent, useEditorDsl } from '@tmagic/vue-runtime-help';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const { pageConfig } = useEditorDsl();
|
||||
const pageComponent = useComponent('page');
|
||||
|
||||
return {
|
||||
pageComponent,
|
||||
pageConfig,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.magic-ui-container {
|
||||
background-color: rgba(136, 136, 136, 0.5);
|
||||
}
|
||||
|
||||
.action-area {
|
||||
background-color: rgba(51, 153, 255, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,50 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" style="font-size: 100px">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.png" type="image/png">
|
||||
<title>Vue2 Playground</title>
|
||||
<style>
|
||||
.magic-ui-page {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
#app {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.magic-ui-container {
|
||||
background-color: rgba(136, 136, 136, 0.5);
|
||||
}
|
||||
|
||||
.action-area {
|
||||
background-color: rgba(51, 153, 255, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
|
||||
</head>
|
||||
<body style="font-size: 14px">
|
||||
|
||||
<div id="app" class="in-editor"></div>
|
||||
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,70 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2025 Tencent. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Vue from 'vue';
|
||||
|
||||
import TMagicApp, { DataSourceManager, DeepObservedData } from '@tmagic/core';
|
||||
import type { UserRenderFunctionOptions } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
import '@tmagic/core/resetcss.css';
|
||||
|
||||
DataSourceManager.registerObservedData(DeepObservedData);
|
||||
|
||||
Promise.all([
|
||||
import('../.tmagic/comp-entry'),
|
||||
import('../.tmagic/plugin-entry'),
|
||||
import('../.tmagic/datasource-entry'),
|
||||
]).then(([components, plugins, dataSources]) => {
|
||||
const app = new TMagicApp({
|
||||
ua: window.navigator.userAgent,
|
||||
platform: 'editor',
|
||||
});
|
||||
|
||||
if (app.env.isWeb) {
|
||||
app.setDesignWidth(window.document.documentElement.getBoundingClientRect().width);
|
||||
}
|
||||
|
||||
Object.entries(components.default).forEach(([type, component]: [string, any]) => {
|
||||
app.registerComponent(type, component);
|
||||
});
|
||||
|
||||
Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
|
||||
DataSourceManager.register(type, ds);
|
||||
});
|
||||
|
||||
Object.values(plugins.default).forEach((plugin: any) => {
|
||||
Vue.use(plugin, { app });
|
||||
});
|
||||
|
||||
window.appInstance = app;
|
||||
|
||||
Vue.prototype.app = app;
|
||||
|
||||
new Vue({
|
||||
// @ts-ignore
|
||||
render: (h) => h(App),
|
||||
provide: {
|
||||
app,
|
||||
userRender: ({ h, type, props, attrs, style, className }: UserRenderFunctionOptions) =>
|
||||
h(type, { props, attrs, style, class: className }),
|
||||
},
|
||||
el: '#app',
|
||||
});
|
||||
});
|
||||
6
runtime/vue3/page/shims-vue.d.ts
vendored
6
runtime/vue3/page/shims-vue.d.ts
vendored
@ -1,6 +0,0 @@
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue';
|
||||
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2025 Tencent. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { MApp } from '@tmagic/core';
|
||||
|
||||
export const getLocalConfig = (): MApp[] => {
|
||||
const configStr = localStorage.getItem('magicDSL');
|
||||
if (!configStr) return [];
|
||||
try {
|
||||
// eslint-disable-next-line no-eval
|
||||
return [eval(`(${configStr})`)];
|
||||
} catch (err) {
|
||||
console.error('Error parsing localStorage magicDSL:', err);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
6
runtime/vue3/playground/shims-vue.d.ts
vendored
6
runtime/vue3/playground/shims-vue.d.ts
vendored
@ -1,6 +0,0 @@
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue';
|
||||
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
@ -1,9 +0,0 @@
|
||||
import path from 'path';
|
||||
|
||||
import { defineConfig } from '@tmagic/cli';
|
||||
|
||||
export default defineConfig({
|
||||
packages: [path.join(__dirname, '../ui')],
|
||||
componentFileAffix: '.vue',
|
||||
dynamicImport: true,
|
||||
});
|
||||
@ -310,7 +310,7 @@ function updateVersions(version, getNewPackageName = keepThePackageName) {
|
||||
// 2. update all packages
|
||||
packages.forEach((p) => updatePackage(getPkgRoot(p), version, getNewPackageName));
|
||||
|
||||
['vue3', 'react', 'vue2'].forEach((p) => updatePackage(getRunTimeRoot(p), version, getNewPackageName, true));
|
||||
['vue', 'react'].forEach((p) => updatePackage(getRunTimeRoot(p), version, getNewPackageName, true));
|
||||
updatePackage(getPlayground(), version, getNewPackageName, true);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user