Revert "Fixes using React.lazy and Suspense"

This reverts commit 700d4f9.
withastro · Apr 20, 2022 · e621c2f · e621c2f
1 parent 700d4f9
commit e621c2f
Show file tree

Hide file tree

Showing 20 changed files with 14 additions and 186 deletions.
diff --git a/packages/astro/test/fixtures/react-component/src/components/LazyComponent.jsx b/packages/astro/test/fixtures/react-component/src/components/LazyComponent.jsx
diff --git a/packages/astro/test/fixtures/react-component/src/components/Suspense.jsx b/packages/astro/test/fixtures/react-component/src/components/Suspense.jsx
diff --git a/packages/astro/test/fixtures/react-component/src/pages/suspense.astro b/packages/astro/test/fixtures/react-component/src/pages/suspense.astro
diff --git a/packages/astro/test/react-component.test.js b/packages/astro/test/react-component.test.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { load as cheerioLoad } from 'cheerio';
+import cheerio from 'cheerio';
 import { isWindows, loadFixture } from './test-utils.js';
 
 let fixture;
@@ -18,7 +18,7 @@ describe('React Components', () => {
 
 		it('Can load React', async () => {
 			const html = await fixture.readFile('/index.html');
-			const $ = cheerioLoad(html);
+			const $ = cheerio.load(html);
 
 			// test 1: basic component renders
 			expect($('#react-static').text()).to.equal('Hello static!');
@@ -51,13 +51,13 @@ describe('React Components', () => {
 
 		it('Can load Vue', async () => {
 			const html = await fixture.readFile('/index.html');
-			const $ = cheerioLoad(html);
+			const $ = cheerio.load(html);
 			expect($('#vue-h2').text()).to.equal('Hasta la vista, baby');
 		});
 
 		it('Can use a pragma comment', async () => {
 			const html = await fixture.readFile('/pragma-comment/index.html');
-			const $ = cheerioLoad(html);
+			const $ = cheerio.load(html);
 
 			// test 1: rendered the PragmaComment component
 			expect($('.pragma-comment')).to.have.lengthOf(2);
@@ -66,7 +66,7 @@ describe('React Components', () => {
 		// TODO: is this still a relevant test?
 		it.skip('Includes reactroot on hydrating components', async () => {
 			const html = await fixture.readFile('/index.html');
-			const $ = cheerioLoad(html);
+			const $ = cheerio.load(html);
 
 			const div = $('#research');
 
@@ -76,13 +76,6 @@ describe('React Components', () => {
 			// test 2: renders correctly
 			expect(div.html()).to.equal('foo bar <!-- -->1');
 		});
-
-		it('Can load Suspense-using components', async () => {
-			const html = await fixture.readFile('/suspense/index.html');
-			const $ = cheerioLoad(html);
-			expect($('#client #lazy')).to.have.lengthOf(1);
-			expect($('#server #lazy')).to.have.lengthOf(1);
-		});
 	});
 
 	if (isWindows) return;
@@ -100,7 +93,7 @@ describe('React Components', () => {
 
 		it('scripts proxy correctly', async () => {
 			const html = await fixture.fetch('/').then((res) => res.text());
-			const $ = cheerioLoad(html);
+			const $ = cheerio.load(html);
 
 			for (const script of $('script').toArray()) {
 				const { src } = script.attribs;

diff --git a/packages/integrations/deno/src/index.ts b/packages/integrations/deno/src/index.ts
@@ -23,9 +23,6 @@ export default function createIntegration(args?: Options): AstroIntegration {
 			},
 			'astro:build:setup': ({ vite, target }) => {
 				if (target === 'server') {
-					vite.resolve = vite.resolve || {};
-					vite.resolve.alias = vite.resolve.alias || {};
-					vite.resolve.alias['react-dom/server'] = 'react-dom/server.browser'
 					vite.ssr = {
 						noExternal: true,
 					};

diff --git a/packages/integrations/deno/test/basics.test.js b/packages/integrations/deno/test/basics.test.js
@@ -13,9 +13,6 @@ Deno.test({
 			assertEquals(resp.status, 200);
 			const html = await resp.text();
 			assert(html);
-			const doc = new DOMParser().parseFromString(html, `text/html`);
-			const div = doc.querySelector("#react");
-			assert(div, 'div exists');
 		});
 	},
 });

diff --git a/packages/integrations/deno/test/fixtures/basics/astro.config.mjs b/packages/integrations/deno/test/fixtures/basics/astro.config.mjs
@@ -1,10 +1,8 @@
 import { defineConfig } from 'astro/config';
 import deno from '@astrojs/deno';
-import react from '@astrojs/react';
 
 export default defineConfig({
 	adapter: deno(),
-	integrations: [react()],
 	experimental: {
 		ssr: true
 	}

diff --git a/packages/integrations/deno/test/fixtures/basics/package.json b/packages/integrations/deno/test/fixtures/basics/package.json
@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "astro": "workspace:*",
-    "@astrojs/deno": "workspace:*",
-    "@astrojs/react": "workspace:*"
+    "@astrojs/deno": "workspace:*"
   }
 }
diff --git a/packages/integrations/deno/test/fixtures/basics/src/components/React.jsx b/packages/integrations/deno/test/fixtures/basics/src/components/React.jsx
diff --git a/packages/integrations/deno/test/fixtures/basics/src/pages/index.astro b/packages/integrations/deno/test/fixtures/basics/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import ReactComponent from '../components/React.jsx';
+
 ---
 <html>
 <head>
@@ -8,6 +8,5 @@ import ReactComponent from '../components/React.jsx';
 </head>
 <body>
 	<h1>Basic App on Deno</h1>
-	<ReactComponent />
 </body>
 </html>
diff --git a/packages/integrations/netlify/src/integration-edge-functions.ts b/packages/integrations/netlify/src/integration-edge-functions.ts
@@ -86,9 +86,6 @@ export function netlifyEdgeFunctions({ dist }: NetlifyEdgeFunctionsOptions = {})
 			},
 			'astro:build:setup': ({ vite, target }) => {
 				if (target === 'server') {
-					vite.resolve = vite.resolve || {};
-					vite.resolve.alias = vite.resolve.alias || {};
-					vite.resolve.alias['react-dom/server'] = 'react-dom/server.browser'
 					vite.ssr = {
 						noExternal: true,
 					};

diff --git a/packages/integrations/netlify/test/edge-functions/deps.ts b/packages/integrations/netlify/test/edge-functions/deps.ts
@@ -1,4 +1,3 @@
 // @ts-nocheck
 export { fromFileUrl } from 'https://deno.land/std@0.110.0/path/mod.ts';
 export { assertEquals, assert } from 'https://deno.land/std@0.132.0/testing/asserts.ts';
-export * from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
diff --git a/packages/integrations/netlify/test/edge-functions/edge-basic.test.ts b/packages/integrations/netlify/test/edge-functions/edge-basic.test.ts
@@ -1,25 +1,20 @@
 // @ts-ignore
 import { runBuild } from './test-utils.ts';
 // @ts-ignore
-import { assertEquals, assert, DOMParser } from './deps.ts';
+import { assertEquals, assert } from './deps.ts';
 
 // @ts-ignore
 Deno.test({
 	name: 'Edge Basics',
 	async fn() {
 		let close = await runBuild('./fixtures/edge-basic/');
 		const { default: handler } = await import(
-			'./fixtures/edge-basic/dist/edge-functions/entry.js'
+			'./fixtures/edge-basic/dist/edge-functions/entry.mjs'
 		);
 		const response = await handler(new Request('http://example.com/'));
 		assertEquals(response.status, 200);
 		const html = await response.text();
 		assert(html, 'got some html');
-
-		const doc = new DOMParser().parseFromString(html, `text/html`)!;
-		const div = doc.querySelector('#react');
-		assert(div, 'div exists');
-
 		await close();
 	},
 });
diff --git a/...ons/netlify/test/edge-functions/fixtures/edge-basic/.netlify/edge-functions/manifest.json b/...ons/netlify/test/edge-functions/fixtures/edge-basic/.netlify/edge-functions/manifest.json
diff --git a/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/astro.config.mjs b/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/astro.config.mjs
@@ -1,12 +1,10 @@
 import { defineConfig } from 'astro/config';
 import { netlifyEdgeFunctions } from '@astrojs/netlify';
-import react from "@astrojs/react";
 
 export default defineConfig({
 	adapter: netlifyEdgeFunctions({
 		dist: new URL('./dist/', import.meta.url),
 	}),
-	integrations: [react()],
 	experimental: {
 		ssr: true
 	}

diff --git a/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/package.json b/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/package.json
@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "astro": "workspace:*",
-    "@astrojs/react": "workspace:*",
     "@astrojs/netlify": "workspace:*"
   }
 }
diff --git a/...ges/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/components/React.jsx b/...ges/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/components/React.jsx
diff --git a/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/pages/index.astro b/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/pages/index.astro
@@ -1,6 +1,3 @@
----
-import ReactComponent from '../components/React.jsx';
----
 <html>
 <head><title>Testing</title></head>
 <body>
@@ -9,6 +6,5 @@ import ReactComponent from '../components/React.jsx';
 	<ul>
 		<li><a href="/two/">Two</a></li>
 	</ul>
-	<ReactComponent />
 </body>
 </html>
diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
@@ -12,7 +12,7 @@ function errorIsComingFromPreactComponent(err) {
 	);
 }
 
-async function check(Component, props, children) {
+function check(Component, props, children) {
 	// Note: there are packages that do some unholy things to create "components".
 	// Checking the $$typeof property catches most of these patterns.
 	if (typeof Component === 'object') {
@@ -42,21 +42,15 @@ async function check(Component, props, children) {
 		return React.createElement('div');
 	}
 
-	await renderToStaticMarkup(Tester, props, children, {});
+	renderToStaticMarkup(Tester, props, children, {});
 
 	if (error) {
 		throw error;
 	}
 	return isReactComponent;
 }
 
-async function getNodeWritable() {
-	let nodeStreamBuiltinModuleName = 'stream';
-	let { Writable } = await import(nodeStreamBuiltinModuleName);
-	return Writable;
-}
-
-async function renderToStaticMarkup(Component, props, children, metadata) {
+function renderToStaticMarkup(Component, props, children, metadata) {
 	delete props['class'];
 	const vnode = React.createElement(Component, {
 		...props,
@@ -65,74 +59,12 @@ async function renderToStaticMarkup(Component, props, children, metadata) {
 	let html;
 	if (metadata && metadata.hydrate) {
 		html = ReactDOM.renderToString(vnode);
-		if('renderToReadableStream' in ReactDOM) {
-			html = await renderToReadableStreamAsync(vnode);
-		} else {
-			html = await renderToPipeableStreamAsync(vnode);
-		}
 	} else {
-		if('renderToReadableStream' in ReactDOM) {
-			html = await renderToReadableStreamAsync(vnode);
-		} else {
-			html = await renderToStaticNodeStreamAsync(vnode);
-		}
-
+		html = ReactDOM.renderToStaticMarkup(vnode);
 	}
 	return { html };
 }
 
-async function renderToPipeableStreamAsync(vnode) {
-	const Writable = await getNodeWritable();
-	let html = '';
-	return new Promise((resolve, reject) => {
-		let error = undefined;
-		let stream = ReactDOM.renderToPipeableStream(vnode, {
-			onError(err) {
-				error = err;
-				reject(error);
-			},
-			onAllReady() {
-				stream.pipe(new Writable({
-					write(chunk, _encoding, callback) {
-						html += chunk.toString('utf-8');
-						callback();
-					},
-					destroy() {
-						resolve(html);
-					}
-				}));
-			}
-		});
-	});
-}
-
-async function renderToStaticNodeStreamAsync(vnode) {
-	const Writable = await getNodeWritable();
-	let html = '';
-	return new Promise((resolve) => {
-		let stream = ReactDOM.renderToStaticNodeStream(vnode);
-		stream.pipe(new Writable({
-			write(chunk, _encoding, callback) {
-				html += chunk.toString('utf-8');
-				callback();
-			},
-			destroy() {
-				resolve(html);
-			}
-		}));
-	});
-}
-
-async function renderToReadableStreamAsync(vnode) {
-	const decoder = new TextDecoder();
-	const stream = await ReactDOM.renderToReadableStream(vnode);
-	let html = '';
-	for await(const chunk of stream) {
-		html += decoder.decode(chunk);
-	}
-	return html;
-}
-
 export default {
 	check,
 	renderToStaticMarkup,