Fix wrong AST for nesting script and style tags. (#68)

Author: ota-meshi

src/context/index.ts

@@ -7,11 +7,13 @@ import { LetDirectiveCollections } from "./let-directive-collection"
 import { getParserName } from "../parser/resolve-parser"
 
 export class ScriptsSourceCode {
-    private readonly raw
+    private raw: string
+
+    private trimmedRaw: string
 
     public readonly attrs: Record<string, string | undefined>
 
-    private _vcode: string | null = null
+    private _appendScriptLets: string | null = null
 
     public separateSemiIndex: number
 
@@ -20,32 +22,44 @@ export class ScriptsSourceCode {
         attrs: Record<string, string | undefined>,
     ) {
         this.raw = script
+        this.trimmedRaw = script.trimEnd()
         this.attrs = attrs
         this.separateSemiIndex = script.length
     }
 
     public get vcode(): string {
-        if (this._vcode == null) {
+        if (this._appendScriptLets == null) {
             return this.raw
         }
-        return this._vcode
+        return this.trimmedRaw + this._appendScriptLets
     }
 
     public addLet(letCode: string): { start: number; end: number } {
-        if (this._vcode == null) {
-            this._vcode = this.raw.trimEnd()
-            this.separateSemiIndex = this._vcode.length
-            this._vcode += ";"
-            const after = this.raw.slice(this._vcode.length)
-            this._vcode += after
+        if (this._appendScriptLets == null) {
+            this._appendScriptLets = ""
+            this.separateSemiIndex = this.vcode.length
+            this._appendScriptLets += ";"
+            const after = this.raw.slice(this.vcode.length)
+            this._appendScriptLets += after
         }
-        const start = this._vcode.length
-        this._vcode += letCode
+        const start = this.vcode.length
+        this._appendScriptLets += letCode
         return {
             start,
-            end: this._vcode.length,
+            end: this.vcode.length,
         }
     }
+
+    public stripCode(start: number, end: number): void {
+        this.raw =
+            this.raw.slice(0, start) +
+            this.raw.slice(start, end).replace(/[^\n\r ]/g, " ") +
+            this.raw.slice(end)
+        this.trimmedRaw =
+            this.trimmedRaw.slice(0, start) +
+            this.trimmedRaw.slice(start, end).replace(/[^\n\r ]/g, " ") +
+            this.trimmedRaw.slice(end)
+    }
 }
 export type ContextSourceCode = {
     template: string
@@ -202,6 +216,10 @@ export class Context {
 
         return (this.state.isTypeScript = false)
     }
+
+    public stripScriptCode(start: number, end: number): void {
+        this.sourceCode.scripts.stripCode(start, end)
+    }
 }
 
 /** Extract <script> blocks */

src/parser/converts/element.ts

@@ -236,6 +236,20 @@ function convertHTMLElement(
         },
     })
 
+    if (element.name.name === "script" || element.name.name === "style") {
+        for (const child of element.children) {
+            if (child.type === "SvelteText") {
+                child.value = ctx.code.slice(...child.range)
+            }
+        }
+        if (element.name.name === "script") {
+            ctx.stripScriptCode(
+                element.startTag.range[1],
+                element.endTag?.range[0] ?? element.range[1],
+            )
+        }
+    }
+
     return element
 }
 

tests/fixtures/parser/ast/docs/component-format/03-style/04-input.svelte

@@ -0,0 +1,9 @@
+<div>
+	<style>
+		/* this style tag will be inserted as-is */
+		div {
+			/* this will apply to all `<div>` elements in the DOM */
+			color: red;
+		}
+	</style>
+</div>