✨ [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: 数据获取 & 整个应用出码

可参考：

tiny-engine/packages/toolbars/generate-code/src/Main.vue

Lines 92 to 167 in e26ea39

	const getAllPageDetails = async (pageList) => {
	const detailPromise = pageList.map(({ id }) => getMetaApi(META_APP.AppManage).getPageById(id))
	const detailList = await Promise.allSettled(detailPromise)
	return detailList
	.map((item) => {
	if (item.status === 'fulfilled' && item.value) {
	return item.value
	}
	})
	.filter((item) => Boolean(item))
	}
	const getPreGenerateInfo = async () => {
	const params = getParams()
	const { id } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
	const promises = [
	getMetaApi(META_SERVICE.Http).get(`/app-center/v1/api/apps/schema/${id}`),
	fetchMetaData(params),
	fetchPageList(params.app)
	]
	if (!state.dirHandle) {
	promises.push(fs.getUserBaseDirHandle())
	}
	const [appData, metaData, pageList, dirHandle] = await Promise.all(promises)
	const pageDetailList = await getAllPageDetails(pageList)
	// 这里需要手动传入 blockSet 的原因是多页面可能会存在重复的区块
	const blockSet = new Set()
	const list = pageDetailList.map((page) => getAllNestedBlocksSchema(page.page_content, fetchBlockSchema, blockSet))
	const blocks = await Promise.allSettled(list)
	const blockSchema = []
	blocks.forEach((item) => {
	if (item.status === 'fulfilled' && Array.isArray(item.value)) {
	blockSchema.push(...item.value)
	}
	})
	// 处理 i18n 对象中可能为 null 的情况
	if (metaData.i18n) {
	Object.keys(metaData.i18n).forEach((langKey) => {
	metaData.i18n[langKey] = metaData.i18n[langKey] || {}
	})
	} else {
	metaData.i18n = {}
	}
	const appSchema = {
	// metaData 包含dataSource、utils、i18n、globalState
	...metaData,
	// 页面 schema
	pageSchema: pageDetailList.map((item) => {
	const { page_content, ...meta } = item
	return {
	...page_content,
	meta: {
	...meta,
	router: meta.route
	}
	}
	}),
	blockSchema,
	// 物料数据
	componentsMap: [...(appData.componentsMap || [])],
	// 物料依赖
	packages: [...(appData.packages || [])],
	meta: {
	...(appData.meta || {})
	}
	}
	const res = await generateAppCode(appSchema)

调整出码配置：

原因：基于 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 中

具体可参考：

tiny-engine/packages/design-core/src/preview/src/preview/usePreviewData.ts

Lines 368 to 425 in e26ea39

	const updatePreview = async (params: {
	currentPage: IPage
	ancestors: IPage[]
	scripts: Record<string, string>
	styles: string[]
	}) => {
	const { appData, metaData, importMapData } = await getBasicData(basicFiles, params.scripts)
	previewState.currentPage = params.currentPage
	previewState.ancestors = params.ancestors
	// importMap 发生变化才更新 importMap
	if (JSON.stringify(previewState.importMap) !== JSON.stringify(importMapData)) {
	store.setImportMap(importMapData)
	previewState.importMap = importMapData
	}
	const blockSet = new Set()
	let blocks = []
	const { getAllNestedBlocksSchema, generatePageCode } = getMetaApi('engine.service.generateCode')
	if (params.ancestors?.length) {
	const promises = params.ancestors.map((item) =>
	getAllNestedBlocksSchema(item.page_content, fetchBlockSchema, blockSet)
	)
	blocks = (await Promise.all(promises)).flat()
	}
	const currentPageBlocks = await getAllNestedBlocksSchema(
	params.currentPage?.page_content || {},
	fetchBlockSchema,
	blockSet
	)
	blocks = blocks.concat(currentPageBlocks)
	const pageCode = [
	...getPageAncestryFiles(appData, params),
	...(blocks || []).map((blockSchema) => {
	return {
	panelName: `${blockSchema.fileName}.vue`,
	panelValue: generatePageCode(blockSchema, appData?.componentsMap || [], { blockRelativePath: './' }) || '',
	panelType: 'vue'
	}
	})
	]
	const newFiles = store.getFiles()
	const appJsCode = processAppJsCode(newFiles['app.js'], params.styles)
	newFiles['app.js'] = appJsCode
	pageCode.map(fixScriptLang).forEach((item) => assignFiles(item, newFiles))
	const metaFiles = generateMetaFiles(metaData)
	Object.assign(newFiles, metaFiles)
	setFiles(newFiles)

⚠️注意点：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. 单页面预览与应用级别页面预览切换的功能？