🐛 [Bug]: tiny-grid 列启用插槽后无法预览

[stwflyfox]

Environment

chrome

Version

latest

Version

latest

Link to minimal reproduction

启用插槽后无法预览一片空白，而出码后的页面显示正常

Step to reproduce

启用插槽后无法预览一片空白，而出码后的页面显示正常

What is expected

No response

What is actually happening

No response

Any additional comments (optional)

No response

[Issues-translate-bot]

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

---

Title: 🐛 [Bug]: tiny-grid column cannot be previewed after enabling slots

[stwflyfox]

预览时出错截屏

[zeyongTsai]

vue Repl 目前还不支持 jsx/tsx ，可以考虑代码生产逻辑改为使用 h 函数模式

[Issues-translate-bot]

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

---

vue Repl does not currently support jsx/tsx. You can consider using the h function mode for code production logic.

[huiyuanz]

vue Repl 目前还不支持 jsx/tsx ，可以考虑代码生产逻辑改为使用 h 函数模式

遇到同样的问题，能否给个示例

[Issues-translate-bot]

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

---

vue Repl currently does not support jsx/tsx. You can consider changing the code production logic to use the h function mode.

I have the same problem, can you give me an example?

[zeyongTsai]

tiny-engine/packages/vue-generator/src/parser/state-type.js

Lines 48 to 57 in 68637db

	[JS_SLOT]: ({ value = [], params = ['row'] }, description) => {
	description.hasJSX = true
	// 处理协议中的特殊情况，如：Icon 协议转换、Collection 使用 div 渲染
	value.forEach(preProcess)
	const slotValues = value.map((item) => generateJSXTemplate(item, description)).join('')
	// 默认解构参数 row，因为jsx slot 必须有第二个参数 h
	return `${start}({ ${params.join(',')} }, h) => ${slotValues}${end}`
	}

实现对等 generateJSXTemplate 的 h 函数调用形式的模板。

或者对 vue Repl 做二次开发，替换内部的编译工具以支持 jsx （官方有相关的 PR，但久久未合并）。个人更倾向这个选择，毕竟 h 函数模式不太好维护。

[Issues-translate-bot]

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

---

tiny-engine/packages/vue-generator/src/parser/state-type.js

Lines 48 to 57 in 68637db

	[JS_SLOT]: ({ value = [], params = ['row'] }, description) => {
	description.hasJSX = true
	// 处理协议中的特殊情况，如：Icon 协议转换、Collection 使用 div 渲染
	value.forEach(preProcess)
	const slotValues = value.map((item) => generateJSXTemplate(item, description)).join('')
	// 默认解构参数 row，因为jsx slot 必须有第二个参数 h
	return `${start}({ ${params.join(',')} }, h) => ${slotValues}${end}`
	}

A template that implements the equivalent h function call to generateJSXTemplate.

Or do secondary development of vue Repl and replace the internal compilation tools to support jsx (officially there is a related PR, but it has not been merged for a long time). Personally, I prefer this option. After all, the h function pattern is not easy to maintain.