fix: Script with innerHTML not working on Safari (#4861)

* fix: Script with innerHTML not working on Safari

* Update cool-camels-tease.md

.changeset/cool-camels-tease.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+use const instead of let for define:vars

packages/astro/src/runtime/server/render/util.ts

@@ -34,7 +34,9 @@ const toStyleString = (obj: Record<string, any>) =>
 export function defineScriptVars(vars: Record<any, any>) {
 	let output = '';
 	for (const [key, value] of Object.entries(vars)) {
-		output += `let ${toIdent(key)} = ${JSON.stringify(value)};\n`;
+		// 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)};\n`;
 	}
 	return markHTMLString(output);
 }

packages/astro/test/astro-directives.test.js

@@ -23,10 +23,10 @@ describe('Directives', async () => {
 			expect($(script).text().at(-1)).to.equal('}');
 			if (i < 2) {
 				// Inline defined variables
-				expect($(script).toString()).to.include('let foo = "bar"');
+				expect($(script).toString()).to.include('const foo = "bar"');
 			} else {
 				// Convert invalid keys to valid identifiers
-				expect($(script).toString()).to.include('let dashCase = "bar"');
+				expect($(script).toString()).to.include('const dashCase = "bar"');
 			}
 			i++;
 		}