fix(compiler-dom): should ignore and warn side effect tags like script and style

This keeps behavior consistency with v2.

Author: yyx990803

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()
+  }
+}