mirrors
/
vue3-core
mirror of https://mirror.osredm.com/root/vue3-core.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: self closing tag

This commit is contained in:
三咲智子 Kevin Deng 2023-11-24 14:59:10 +08:00
parent dc3bc7016e
commit 30ba8daeb2
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
4 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/compiler-vapor/__tests__/__snapshots__/basic.test.ts.snap
View File

@ -4,7 +4,7 @@ exports[`basic 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
import { watchEffect } from 'vue' import { watchEffect } from 'vue'
import { template, insert, setText, on, setHtml } from 'vue/vapor' import { template, insert, setText, on, setHtml } from 'vue/vapor'
const t0 = template(\`<h1 id=\\"title\\">Counter</h1><p>Count: </p><p>Double: </p><button>Increment</button><div/>\`) const t0 = template(\`<h1 id=\\"title\\">Counter</h1><p>Count: </p><p>Double: </p><button>Increment</button><div></div><input type=\\"text\\">\`)
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
const html = '<b>HTML</b>' const html = '<b>HTML</b>'

1
packages/compiler-vapor/__tests__/fixtures/counter.vue
View File

@ -15,4 +15,5 @@ const html = '<b>HTML</b>'
<p>Double: {{ double }}</p> <p>Double: {{ double }}</p>
<button @click="increment">Increment</button> <button @click="increment">Increment</button>
<div v-html="html" /> <div v-html="html" />
<input type="text" />
</template> </template>

10
packages/compiler-vapor/src/transform.ts
View File

@ -16,6 +16,7 @@ import {
type RootIRNode, type RootIRNode,
IRNodeTypes, IRNodeTypes,
} from './ir' } from './ir'
import { isVoidTag } from '@vue/shared'
export interface TransformContext<T extends Node = Node> { export interface TransformContext<T extends Node = Node> {
node: T node: T
@ -211,13 +212,14 @@ function transformElement(ctx: TransformContext<ElementNode>) {
ctx.template += `<${tag}` ctx.template += `<${tag}`
props.forEach((prop) => transformProp(prop, ctx)) props.forEach((prop) => transformProp(prop, ctx))
ctx.template += node.isSelfClosing ? '/>' : `>` ctx.template += `>`
if (children.length) transformChildren(ctx) if (children.length) transformChildren(ctx)
// TODO remove unnecessary close tag // TODO remove unnecessary close tag, e.g. if it's the last element of the template
// TODO: [bug] self closing <div /> if (!node.isSelfClosing || !isVoidTag(tag)) {
if (!node.isSelfClosing) ctx.template += `</${tag}>` ctx.template += `</${tag}>`
}
} }
function transformInterpolation( function transformInterpolation(

4
playground/src/App.vue
View File

@ -29,8 +29,8 @@ globalThis.html = html
<button @click="inc">inc</button> <button @click="inc">inc</button>
<button @click="dec">dec</button> <button @click="dec">dec</button>
</div> </div>
<div v-html="html"></div> <div v-html="html" />
<div v-text="html"></div> <div v-text="html" />
</div> </div>
</template> </template>