✨ [Feature]: TinyEngine的预览只能单页面预览么？怎么改成整个应用的预览呢？

[dengyi1992]

What problem does this feature solve

TinyEngine的预览只能单页面预览么？怎么改成整个应用的预览呢？

What does the proposed API look like

TinyEngine支持整个应用的预览

What is your project name

NA

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: ✨ [Feature]: Can TinyEngine preview only be previewed on a single page? How to change it to a preview of the entire application?

[chilingling]

欢迎 PR 🎉

基于 vue-repl 的应用级预览大致思路

当前思路仅是简单的参考，如果有更好的思路，（比如基于 sandpack 实现应用级别的页面预览可能是更佳的方案。）欢迎讨论与贡献。

tiny-engine vue-repl 当前使用的版本相对老，已经在规划升级，请注意相关联的 PR #1459 ，避免冲突。

步骤1: 数据获取 & 整个应用出码

可参考： https://github.com/opentiny/tiny-engine/blob/e26ea398d263b5373881b4a9389877b033845d7a/packages/toolbars/generate-code/src/Main.vue#L92-L167

调整出码配置：

原因：基于 vue-repl 都只有一级文件，没有目录的划分，但是默认的应用级出码有目录划分，这样会导致 import 路径不对。

1. 页面 imort 区块的相对路径直接调整为（基于 vue-repl 都只有一级文件，没有目录的划分）

{
  blockRelativePath: './'
}

2. 路由文件 有 index.js 改成 router.js，并将 router.js 中 () => import('@/views/xxx.vue') 改成 () => import('./xxx.vue')

3. lowcodeConfig/lowcode.js 文件中 import * as utils from '../utils' 调整成 import * as utils from './utils'

4. sores/index.js 文件名调整成 stores.js ?

5. lowcodeConfig/store.js 中的 import * as useDefinedStores from '@/stores' 调整成 import * as useDefinedStores from './stores'

6. i18n 目录的相对路径调整类似

调整方法： 文件名的调整：直接改出码中的 fileName 即可。

相对路径的调整： 建议抽取通用方法：将 @/xxxx/xxx/xxx.[js,vue] 调整成 ./xxx.[js,vue]，将 ../xxx/xxx/yy.[js,vue] 调整成 ./yy.[js,vue] 思路：

1. 使用 babel 将文件解析成 ast。
2. 遍历 import 语句，然后正则匹配。使用 MagicString 进行替换。

将调整完成的文件设置到 vue-repl 中

具体可参考： https://github.com/opentiny/tiny-engine/blob/e26ea398d263b5373881b4a9389877b033845d7a/packages/design-core/src/preview/src/preview/usePreviewData.ts#L368-L425

⚠️注意点：vue-repl 设置文件的时候需要注意顺序，第一个文件默认就是入口文件，所以第一个文件必须是 main.js。第二个文件是 App.vue。以此类推。

vue-router 的 vue-repl playground 示例

⚠️注意点2: vue-router 在 vue-repl 中需要使用 memory router，所以 router.js 的出码也需要改一下：

const router = createRouter({
  // 这里用的是 memory History
  history: createMemoryHistory(),
  routes,
})

其他

1. 参考现有的通信机制，实现新增页面自动增量编译构建预览。
2. 单页面预览与应用级别页面预览切换的功能？