From 42f4cccedabdc14a1dde9afa28b29400fcac796b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Thu, 20 Jun 2024 19:23:39 +0000
Subject: [PATCH] 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              |  6 ++++++
 packages/compiler-core/src/transform.ts            |  2 ++
 .../transforms/ignoreSideEffectTags.spec.ts        | 14 ++++++++++++++
 .../src/transforms/ignoreSideEffectTags.ts         |  3 ++-
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index 5a8cd0079..d8a175853 100644
--- a/packages/compiler-core/src/options.ts
+++ b/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
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 69821f7f8..db56f3eac 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/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,
diff --git a/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts b/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts
index f06b9fd52..3ef34a56a 100644
--- a/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts
+++ b/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')
+  })
 })
diff --git a/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts b/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts
index 81dc49849..7c4882266 100644
--- a/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts
+++ b/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(