fix: value of var could be undefined when using define:vars (#7134)

withastro · May 23, 2023 · 5b6a031 · 5b6a031
1 parent 64d2aba
commit 5b6a031
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/odd-geese-shop.md b/.changeset/odd-geese-shop.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+value of var can be undefined when using `define:vars`
diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts
@@ -43,7 +43,7 @@ export function defineScriptVars(vars: Record<any, any>) {
 	for (const [key, value] of Object.entries(vars)) {
 		// Use const instead of let as let global unsupported with Safari
 		// https://stackoverflow.com/questions/29194024/cant-use-let-keyword-in-safari-javascript
-		output += `const ${toIdent(key)} = ${JSON.stringify(value).replace(
+		output += `const ${toIdent(key)} = ${JSON.stringify(value)?.replace(
 			/<\/script>/g,
 			'\\x3C/script>'
 		)};\n`;

diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js
@@ -14,7 +14,7 @@ describe('Directives', async () => {
 		const html = await fixture.readFile('/define-vars/index.html');
 		const $ = cheerio.load(html);
 
-		expect($('script')).to.have.lengthOf(4);
+		expect($('script')).to.have.lengthOf(5);
 
 		let i = 0;
 		for (const script of $('script').toArray()) {
@@ -27,9 +27,12 @@ describe('Directives', async () => {
 			} else if (i < 3) {
 				// Convert invalid keys to valid identifiers
 				expect($(script).toString()).to.include('const dashCase = "bar"');
-			} else {
+			} else if (i < 4) {
 				// Closing script tags in strings are escaped
 				expect($(script).toString()).to.include('const bar = "<script>bar\\x3C/script>"');
+			} else {
+				// Vars with undefined values are handled
+				expect($(script).toString()).to.include('const undef = undefined');
 			}
 			i++;
 		}

diff --git a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro
@@ -4,6 +4,7 @@ let foo = 'bar'
 let bg = 'white'
 let fg = 'black'
 let bar = '<script>bar</script>'
+let undef: undefined;
 ---
 
 <html>
@@ -32,6 +33,9 @@ let bar = '<script>bar</script>'
 		<script id="inline-4" define:vars={{ bar }}>
 			console.log(bar);
 		</script>
+		<script id="inline-5" define:vars={{ undef }}>
+			console.log(undef);
+		</script>
 
 		<Title />
   </body>