Better response.arrayBuffer() handling in Node (#3860)

* Better response.arrayBuffer() handling in Node * Adds a changeset
withastro · Jul 8, 2022 · c2c4e5c · c2c4e5c
1 parent ed8161f
commit c2c4e5c
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 3 deletions.
diff --git a/.changeset/great-pants-chew.md b/.changeset/great-pants-chew.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes response.arrayBuffer() handling in large pages
diff --git a/packages/astro/src/runtime/server/response.ts b/packages/astro/src/runtime/server/response.ts
@@ -34,11 +34,19 @@ function createResponseClass() {
 		async arrayBuffer(): Promise<ArrayBuffer> {
 			if (this.#isStream && isNodeJS) {
 				let body = this.#body as AsyncIterable<Uint8Array>;
-				let chunks: number[] = [];
+				let chunks: Uint8Array[] = [];
+				let len = 0;
 				for await (let chunk of body) {
-					chunks.push(...chunk);
+					chunks.push(chunk);
+					len += chunk.length;
 				}
-				return Uint8Array.from(chunks);
+				let ab = new Uint8Array(len);
+				let offset = 0;
+				for(const chunk of chunks) {
+					ab.set(chunk, offset);
+					offset += chunk.length;
+				}
+				return ab;
 			}
 			return super.arrayBuffer();
 		}

diff --git a/packages/astro/test/fixtures/large-array/astro.config.mjs b/packages/astro/test/fixtures/large-array/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import solid from '@astrojs/solid-js';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [solid()],
+});
diff --git a/packages/astro/test/fixtures/large-array/package.json b/packages/astro/test/fixtures/large-array/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/large-array-solid",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/solid-js": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/large-array/src/components/Counter.jsx b/packages/astro/test/fixtures/large-array/src/components/Counter.jsx
@@ -0,0 +1,18 @@
+import { createSignal } from 'solid-js';
+
+export default function Counter({ children, largeProp }) {
+  const [count, setCount] = createSignal(0);
+  const add = () => setCount(count() + 1);
+  const subtract = () => setCount(count() - 1);
+
+  return (
+    <>
+      <div class="counter">
+        <button onClick={subtract}>-</button>
+        <pre>{count()}</pre>
+        <button onClick={add}>+</button>
+      </div>
+      <div class="counter-message">{children}</div>
+    </>
+  );
+}
diff --git a/packages/astro/test/fixtures/large-array/src/pages/index.astro b/packages/astro/test/fixtures/large-array/src/pages/index.astro
@@ -0,0 +1,32 @@
+---
+import Counter from '../components/Counter.jsx';
+const largeArray = []
+for (let i = 0; i < 600; i++) {
+	largeArray.push({ a: 'abc', b: 'abc', c: 'abc', d: 'abc', e: 'abc', foo: 'bar' })
+}
+---
+
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+		<style>
+			html,
+			body {
+				font-family: system-ui;
+				margin: 0;
+			}
+			body {
+				padding: 2rem;
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<Counter client:visible largeProp={largeArray}>
+				<h1>Hello, Solid!</h1>
+			</Counter>
+		</main>
+	</body>
+</html>
diff --git a/packages/astro/test/ssr-large-array.test.js b/packages/astro/test/ssr-large-array.test.js
@@ -0,0 +1,35 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+import testAdapter from './test-adapter.js';
+
+describe('SSR with Large Array and client rendering', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/large-array/',
+			experimental: {
+				ssr: true,
+			},
+			adapter: testAdapter(),
+		});
+		await fixture.build();
+	});
+
+	it('Using response.arrayBuffer() gets the right HTML', async () => {
+		const app = await fixture.loadTestAdapterApp();
+		const request = new Request('http://example.com/');
+		const response = await app.render(request);
+		const data = await response.arrayBuffer();
+		const html = new TextDecoder().decode(data);
+
+		const $ = cheerio.load(html);
+		expect($('head meta[name="viewport"]')).to.have.a.lengthOf(1);
+		expect($('head link[rel="icon"]')).to.have.a.lengthOf(1);
+		expect($('main')).to.have.a.lengthOf(1);
+		expect($('astro-island')).to.have.a.lengthOf(1);
+		expect($('h1').text()).to.equal('Hello, Solid!');
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml