Skip to content

Commit c3e312c

Browse files
committed
fix: jsxRaw
1 parent 4d889d9 commit c3e312c

File tree

2 files changed

+24
-17
lines changed

2 files changed

+24
-17
lines changed

playground/src/App.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ const { copy } = useClipboard()
55
66
const code = $ref(
77
`
8+
console.log(jsxToString(<div>Hello World: { true ? 1 + 2 + 3 : 'never!' }</div>))
89
const t = Date.now()
9-
console.log(jsxToString(<div>Now: { true ? jsxRaw(Math.trunc(t / 1000)) : 'never!'}</div>))
10+
console.log(jsxToString(<div>Now: { jsxRaw(Math.trunc(t / 1000)) }</div>))
1011
console.log(jsxToString(<div className={[
1112
\`Hello\` + 'World' + true,
1213
'foo',

src/core/convert.ts

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ function transformJsx(code: string, node: JSX) {
224224
}
225225
}
226226

227-
function resolveExpression(node: Node): EvaluatedValue {
227+
function resolveExpression(node: Node, parent?: Node): EvaluatedValue {
228228
if (isLiteral(node)) {
229229
return resolveLiteral(node)
230230
} else if (isJSX(node)) {
@@ -242,35 +242,39 @@ function transformJsx(code: string, node: JSX) {
242242
case 'UnaryExpression':
243243
return resolveUnaryExpression(node)
244244
case 'ConditionalExpression':
245-
return resolveExpression(node.test)
246-
? resolveExpression(node.consequent)
247-
: resolveExpression(node.alternate)
245+
return resolveExpression(node.test, node)
246+
? resolveExpression(node.consequent, node)
247+
: resolveExpression(node.alternate, node)
248248
case 'SequenceExpression': {
249249
const expressions = node.expressions.map((expr) =>
250-
resolveExpression(expr)
250+
resolveExpression(expr, node)
251251
)
252252
return expressions.slice(-1)[0]
253253
}
254254
case 'TSNonNullExpression':
255-
return resolveExpression(node.expression)
255+
return resolveExpression(node.expression, node)
256256
case 'CallExpression':
257-
return resolveCallExpression(node)
257+
return resolveCallExpression(node, !parent)
258258
default:
259259
return notSupported(node)
260260
}
261261
}
262262

263-
function resolveCallExpression(node: CallExpression) {
264-
if (node.callee.type === 'Identifier' && node.callee.name === 'jsxRaw') {
263+
function resolveCallExpression(node: CallExpression, isTopLevel: boolean) {
264+
if (
265+
isTopLevel &&
266+
node.callee.type === 'Identifier' &&
267+
node.callee.name === 'jsxRaw'
268+
) {
265269
return `__RAW_${getSource(node.arguments[0])}_RAW`
266270
}
267271

268272
return notSupported(node)
269273
}
270274

271275
function resolveBinary(node: Binary) {
272-
const left: any = resolveExpression(node.left)
273-
const right: any = resolveExpression(node.right)
276+
const left: any = resolveExpression(node.left, node)
277+
const right: any = resolveExpression(node.right, node)
274278
switch (node.operator) {
275279
case '+':
276280
return left + right
@@ -341,7 +345,7 @@ function transformJsx(code: string, node: JSX) {
341345
}
342346

343347
function resolveUnaryExpression(node: UnaryExpression) {
344-
const value: any = resolveExpression(node.argument)
348+
const value: any = resolveExpression(node.argument, node)
345349
switch (node.operator) {
346350
case '!':
347351
return !value
@@ -385,7 +389,7 @@ function transformJsx(code: string, node: JSX) {
385389
function resolveArrayExpression(node: ArrayExpression) {
386390
const items: any[] = []
387391
for (const [i, element] of node.elements.entries()) {
388-
if (element) items[i] = resolveExpression(element)
392+
if (element) items[i] = resolveExpression(element, node)
389393
}
390394
return items
391395
}
@@ -399,10 +403,10 @@ function transformJsx(code: string, node: JSX) {
399403
if (isIdentifier(prop.key) && !prop.computed) {
400404
key = prop.key.name
401405
} else {
402-
key = resolveExpression(prop.key)
406+
key = resolveExpression(prop.key, prop)
403407
}
404408

405-
obj[key] = resolveExpression(prop.value)
409+
obj[key] = resolveExpression(prop.value, prop)
406410
}
407411

408412
return obj
@@ -412,7 +416,9 @@ function transformJsx(code: string, node: JSX) {
412416
return node.quasis.reduce((prev, curr, idx) => {
413417
if (node.expressions[idx]) {
414418
return (
415-
prev + curr.value.cooked + resolveExpression(node.expressions[idx])
419+
prev +
420+
curr.value.cooked +
421+
resolveExpression(node.expressions[idx], node)
416422
)
417423
}
418424
return prev + curr.value.cooked

0 commit comments

Comments
 (0)