feat(compiler-core): add allowSideEffectTag option

By default, the compiler drops `<script>` and `<style>` tags from SFC files. There are good use cases for these tags (like generating stylesheets based on some refs or application state).

I see no documented reason to not allow a bypass if the user knows what's doing, so that's why I'm adding this new option

Signed-off-by: GitHub <noreply@github.com>

packages/compiler-core/src/options.ts

@@ -230,6 +230,12 @@ export interface TransformOptions
    * @default null
    */
   transformHoist?: HoistTransform | null
+  /**
+   * Allow `<script>` and `<style>` tags inside the template of SFC files.
+   * Disabled by default to avoid unintentionally adding side effects into the application.
+   * @default false
+   */
+  allowSideEffectTags?: boolean
   /**
    * If the pairing runtime provides additional built-in elements, use this to
    * mark them as built-in so the compiler will generate component vnodes

packages/compiler-core/src/transform.ts

@@ -128,6 +128,7 @@ export function createTransformContext(
   root: RootNode,
   {
     filename = '',
+    allowSideEffectTags = false,
     prefixIdentifiers = false,
     hoistStatic = false,
     hmr = false,
@@ -156,6 +157,7 @@ export function createTransformContext(
     // options
     filename,
     selfName: nameMatch && capitalize(camelize(nameMatch[1])),
+    allowSideEffectTags,
     prefixIdentifiers,
     hoistStatic,
     hmr,

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

@@ -13,6 +13,13 @@ describe('compiler: ignore side effect tags', () => {
     expect(err!.message).toMatch(`Tags with side effect`)
   })
 
+  it('should allow script when allowSideEffectTags is true', () => {
+    const { code } = compile(`<script>console.log(1)</script>`, {
+      allowSideEffectTags: true,
+    })
+    expect(code).toMatch('script')
+  })
+
   it('should ignore style', () => {
     let err: CompilerError | undefined
     const { code } = compile(`<style>h1 { color: red }</style>`, {
@@ -24,4 +31,11 @@ describe('compiler: ignore side effect tags', () => {
     expect(err).toBeDefined()
     expect(err!.message).toMatch(`Tags with side effect`)
   })
+
+  it('should allow style when allowSideEffectTags is true', () => {
+    const { code } = compile(`<style>h1 { color: red }</style>`, {
+      allowSideEffectTags: true,
+    })
+    expect(code).toMatch('style')
+  })
 })

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

@@ -5,7 +5,8 @@ export const ignoreSideEffectTags: NodeTransform = (node, context) => {
   if (
     node.type === NodeTypes.ELEMENT &&
     node.tagType === ElementTypes.ELEMENT &&
-    (node.tag === 'script' || node.tag === 'style')
+    (node.tag === 'script' || node.tag === 'style') &&
+    !context.allowSideEffectTags
   ) {
     __DEV__ &&
       context.onError(