From 5b6a0312a822565404a6334576677fc574cfcd56 Mon Sep 17 00:00:00 2001 From: Alex Vukadinov Date: Tue, 23 May 2023 05:28:44 +0100 Subject: [PATCH] fix: value of var could be undefined when using `define:vars` (#7134) --- .changeset/odd-geese-shop.md | 5 +++++ packages/astro/src/runtime/server/render/util.ts | 2 +- packages/astro/test/astro-directives.test.js | 7 +++++-- .../fixtures/astro-directives/src/pages/define-vars.astro | 4 ++++ 4 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 .changeset/odd-geese-shop.md diff --git a/.changeset/odd-geese-shop.md b/.changeset/odd-geese-shop.md new file mode 100644 index 000000000000..2f238d726d2b --- /dev/null +++ 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 index 5ddd97716bbc..c2599401dace 100644 --- 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) { 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 index c4098b4fe6f5..9afbbbe973ce 100644 --- 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 = "' +let undef: undefined; --- @@ -32,6 +33,9 @@ let bar = '' + </body>