diff options
| author |  Alex Vukadinov <alexvuka1@gmail.com>
| 2023-05-23 05:28:44 +0100 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-05-23 12:28:44 +0800 |
| commit | 5b6a0312a822565404a6334576677fc574cfcd56 (patch) | |
| tree | 70206c461bb764edcd37562af9f0c3f17d718f18 | |
| parent | 64d2aba58338683959d4d9781a62da3fb4c23ca6 (diff) | |
| download | astro-5b6a0312a822565404a6334576677fc574cfcd56.tar.gz astro-5b6a0312a822565404a6334576677fc574cfcd56.tar.zst astro-5b6a0312a822565404a6334576677fc574cfcd56.zip | |
fix: value of var could be undefined when using `define:vars` (#7134)
Diffstat (limited to '')
4 files changed, 15 insertions, 3 deletions
diff --git a/.changeset/odd-geese-shop.md b/.changeset/odd-geese-shop.md new file mode 100644 index 000000000..2f238d726 --- /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 5ddd97716..c2599401d 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<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 index c4098b4fe..9afbbbe97 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 = "<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 index 993468878..47ec64fb7 100644 --- 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> |