fix(compiler-dom): should ignore and warn side effect tags like scrip…

…t and style

This keeps behavior consistency with v2.

packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts

@@ -0,0 +1,27 @@
+import { compile, CompilerError } from '../../src'
+
+describe('compiler: ignore side effect tags', () => {
+ it('should ignore script', () => {
+ let err: CompilerError | undefined
+ const { code } = compile(`<script>console.log(1)</script>`, {
+ onError(e) {
+ err = e
+ }
+ })
+ expect(code).not.toMatch('script')
+ expect(err).toBeDefined()
+ expect(err!.message).toMatch(`Tags with side effect`)
+ })
+
+ it('should ignore style', () => {
+ let err: CompilerError | undefined
+ const { code } = compile(`<style>h1 { color: red }</style>`, {
+ onError(e) {
+ err = e
+ }
+ })
+ expect(code).not.toMatch('style')
+ expect(err).toBeDefined()
+ expect(err!.message).toMatch(`Tags with side effect`)
+ })
+})

packages/compiler-dom/src/errors.ts

@@ -31,6 +31,7 @@ export const enum DOMErrorCodes {
  X_V_MODEL_UNNECESSARY_VALUE,
  X_V_SHOW_NO_EXPRESSION,
  X_TRANSITION_INVALID_CHILDREN,
+ X_IGNORED_SIDE_EFFECT_TAG,
  __EXTEND_POINT__
 }
 
@@ -44,5 +45,6 @@ export const DOMErrorMessages: { [code: number]: string } = {
  [DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot used on file inputs since they are read-only. Use a v-on:change listener instead.`,
  [DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
  [DOMErrorCodes.X_V_SHOW_NO_EXPRESSION]: `v-show is missing expression.`,
- [DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN]: `<Transition> expects exactly one child element or component.`
+ [DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN]: `<Transition> expects exactly one child element or component.`,
+ [DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
 }

packages/compiler-dom/src/index.ts

@@ -18,6 +18,7 @@ import { transformOn } from './transforms/vOn'
 import { transformShow } from './transforms/vShow'
 import { warnTransitionChildren } from './transforms/warnTransitionChildren'
 import { stringifyStatic } from './transforms/stringifyStatic'
+import { ignoreSideEffectTags } from './transforms/ignoreSideEffectTags'
 import { extend } from '@vue/shared'
 
 export { parserOptions }
@@ -43,7 +44,14 @@ export function compile(
  return baseCompile(
  template,
  extend({}, parserOptions, options, {
- nodeTransforms: [...DOMNodeTransforms, ...(options.nodeTransforms || [])],
+ nodeTransforms: [
+ // ignore <script> and <tag>
+ // this is not put inside DOMNodeTransforms because that list is used
+ // by compiler-ssr to generate vnode fallback branches
+ ignoreSideEffectTags,
+ ...DOMNodeTransforms,
+ ...(options.nodeTransforms || [])
+ ],
  directiveTransforms: extend(
  {},
  DOMDirectiveTransforms,

packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts

@@ -0,0 +1,15 @@
+import { NodeTransform, NodeTypes, ElementTypes } from '@vue/compiler-core/src'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
+
+export const ignoreSideEffectTags: NodeTransform = (node, context) => {
+ if (
+ node.type === NodeTypes.ELEMENT &&
+ node.tagType === ElementTypes.ELEMENT &&
+ (node.tag === 'script' || node.tag === 'style')
+ ) {
+ context.onError(
+ createDOMCompilerError(DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG, node.loc)
+ )
+ context.removeNode()
+ }
+}