feat: add polyfills for stackblitz (#8130)

* feat: add polyfills for Stackblitz

* chore: changeset

.changeset/thin-ants-repeat.md

@@ -0,0 +1,6 @@
+---
+'@astrojs/telemetry': patch
+'astro': patch
+---
+
+Add some polyfills for Stackblitz until they support Node 18. Running Astro on Node 16 is still not officially supported, however.

packages/astro/astro.js

@@ -16,11 +16,15 @@ const CI_INSTRUCTIONS = {
 const engines = '>=18.14.1';
 const skipSemverCheckIfAbove = 19;
 
+// HACK (2023-08-18) Stackblitz does not support Node 18 yet, so we'll fake Node 16 support for some time until it's supported
+// TODO: Remove when Node 18 is supported on Stackblitz
+const isStackblitz = process.env.SHELL === '/bin/jsh' && process.versions.webcontainer != null;
+
 /** `astro *` */
 async function main() {
 	const version = process.versions.node;
 	// Fast-path for higher Node.js versions
-	if ((parseInt(version) || 0) <= skipSemverCheckIfAbove) {
+	if (!isStackblitz && (parseInt(version) || 0) <= skipSemverCheckIfAbove) {
 		try {
 			const semver = await import('semver');
 			if (!semver.satisfies(version, engines)) {

packages/astro/package.json

@@ -147,8 +147,8 @@
     "fast-glob": "^3.2.12",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
-    "http-cache-semantics": "^4.1.1",
     "html-escaper": "^3.0.3",
+    "http-cache-semantics": "^4.1.1",
     "js-yaml": "^4.1.0",
     "kleur": "^4.1.4",
     "magic-string": "^0.30.2",
@@ -166,6 +166,7 @@
     "string-width": "^5.1.2",
     "strip-ansi": "^7.1.0",
     "tsconfig-resolver": "^3.0.1",
+    "undici": "^5.23.0",
     "unist-util-visit": "^4.1.2",
     "vfile": "^5.3.7",
     "vite": "^4.4.6",

packages/astro/src/core/polyfill.ts

@@ -1,10 +1,67 @@
 import { File } from 'node:buffer';
 import crypto from 'node:crypto';
+import {
+	ByteLengthQueuingStrategy,
+	CountQueuingStrategy,
+	ReadableByteStreamController,
+	ReadableStream,
+	ReadableStreamBYOBReader,
+	ReadableStreamBYOBRequest,
+	ReadableStreamDefaultController,
+	ReadableStreamDefaultReader,
+	TransformStream,
+	WritableStream,
+	WritableStreamDefaultController,
+	WritableStreamDefaultWriter,
+} from 'node:stream/web';
+import { FormData, Headers, Request, Response, fetch, File as undiciFile } from 'undici';
 
 // NOTE: This file does not intend to polyfill everything that exists, its main goal is to make life easier
 // for users deploying to runtime that do support these features. In the future, we hope for this file to disappear.
 
+// HACK (2023-08-18) Stackblitz does not support Node 18 yet, so we'll fake Node 16 support for some time until it's supported
+// TODO: Remove when Node 18 is supported on Stackblitz
+const isStackblitz = process.env.SHELL === '/bin/jsh' && process.versions.webcontainer != null;
+
 export function apply() {
+	if (isStackblitz) {
+		const neededPolyfills = [
+			ByteLengthQueuingStrategy,
+			CountQueuingStrategy,
+			ReadableByteStreamController,
+			ReadableStream,
+			ReadableStreamBYOBReader,
+			ReadableStreamBYOBRequest,
+			ReadableStreamDefaultController,
+			ReadableStreamDefaultReader,
+			TransformStream,
+			WritableStream,
+			WritableStreamDefaultController,
+			WritableStreamDefaultWriter,
+			undiciFile,
+			FormData,
+			Headers,
+			Request,
+			Response,
+			fetch,
+		];
+
+		for (let polyfillName of Object.keys(neededPolyfills)) {
+			if (Object.hasOwnProperty.call(globalThis, polyfillName)) continue;
+
+			// Add polyfill to globalThis
+			Object.defineProperty(globalThis, polyfillName, {
+				configurable: true,
+				enumerable: true,
+				writable: true,
+				value:
+					neededPolyfills[
+						(polyfillName === 'undiciFile' ? 'File' : polyfillName) as keyof typeof neededPolyfills
+					],
+			});
+		}
+	}
+
 	// Remove when Node 18 is dropped for Node 20
 	if (!globalThis.crypto) {
 		Object.defineProperty(globalThis, 'crypto', {

packages/telemetry/package.json

@@ -35,7 +35,8 @@
     "dset": "^3.1.2",
     "is-docker": "^3.0.0",
     "is-wsl": "^2.2.0",
-    "which-pm-runs": "^1.1.0"
+    "which-pm-runs": "^1.1.0",
+    "undici": "^5.23.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.8",

packages/telemetry/src/post.ts

@@ -1,4 +1,5 @@
 const ASTRO_TELEMETRY_ENDPOINT = `https://telemetry.astro.build/api/v1/record`;
+import { fetch } from 'undici';
 
 export function post(body: Record<string, any>): Promise<any> {
 	return fetch(ASTRO_TELEMETRY_ENDPOINT, {