From e621c2f7d3844e950168f4198e4dd1c6f43031d0 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Wed, 20 Apr 2022 17:17:36 -0400 Subject: [PATCH] Revert "Fixes using React.lazy and Suspense" This reverts commit 700d4f9649b72e98a56586a480e6d3c413cf45f1. --- .../src/components/LazyComponent.jsx | 9 --- .../src/components/Suspense.jsx | 14 ---- .../react-component/src/pages/suspense.astro | 17 ----- packages/astro/test/react-component.test.js | 19 ++--- packages/integrations/deno/src/index.ts | 3 - .../integrations/deno/test/basics.test.js | 3 - .../test/fixtures/basics/astro.config.mjs | 2 - .../deno/test/fixtures/basics/package.json | 3 +- .../fixtures/basics/src/components/React.jsx | 7 -- .../fixtures/basics/src/pages/index.astro | 3 +- .../netlify/src/integration-edge-functions.ts | 3 - .../netlify/test/edge-functions/deps.ts | 1 - .../test/edge-functions/edge-basic.test.ts | 9 +-- .../.netlify/edge-functions/manifest.json | 13 ---- .../fixtures/edge-basic/astro.config.mjs | 2 - .../fixtures/edge-basic/package.json | 1 - .../edge-basic/src/components/React.jsx | 7 -- .../fixtures/edge-basic/src/pages/index.astro | 4 - packages/integrations/react/server.js | 76 +------------------ pnpm-lock.yaml | 4 - 20 files changed, 14 insertions(+), 186 deletions(-) delete mode 100644 packages/astro/test/fixtures/react-component/src/components/LazyComponent.jsx delete mode 100644 packages/astro/test/fixtures/react-component/src/components/Suspense.jsx delete mode 100644 packages/astro/test/fixtures/react-component/src/pages/suspense.astro delete mode 100644 packages/integrations/deno/test/fixtures/basics/src/components/React.jsx delete mode 100644 packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/.netlify/edge-functions/manifest.json delete mode 100644 packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/components/React.jsx diff --git a/packages/astro/test/fixtures/react-component/src/components/LazyComponent.jsx b/packages/astro/test/fixtures/react-component/src/components/LazyComponent.jsx deleted file mode 100644 index b43aa36be6b8..000000000000 --- a/packages/astro/test/fixtures/react-component/src/components/LazyComponent.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -export const LazyComponent = () => { - return ( - inner content - ); -}; - -export default LazyComponent; diff --git a/packages/astro/test/fixtures/react-component/src/components/Suspense.jsx b/packages/astro/test/fixtures/react-component/src/components/Suspense.jsx deleted file mode 100644 index 87dc82625eb8..000000000000 --- a/packages/astro/test/fixtures/react-component/src/components/Suspense.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Suspense } from 'react'; -const LazyComponent = React.lazy(() => import('./LazyComponent.jsx')); - -export const ParentComponent = () => { - return ( -
- - - -
- ); -}; - -export default ParentComponent; diff --git a/packages/astro/test/fixtures/react-component/src/pages/suspense.astro b/packages/astro/test/fixtures/react-component/src/pages/suspense.astro deleted file mode 100644 index 5a9d156443d6..000000000000 --- a/packages/astro/test/fixtures/react-component/src/pages/suspense.astro +++ /dev/null @@ -1,17 +0,0 @@ ---- -import Suspense from '../components/Suspense.jsx'; ---- - - - - - - -
- -
-
- -
- - diff --git a/packages/astro/test/react-component.test.js b/packages/astro/test/react-component.test.js index 749fc0c16575..bb67f3df2e38 100644 --- 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 index bc06de74c3a9..d1b3b14baa37 100644 --- 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 index 42efc87d9a86..115883466c5d 100644 --- 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 index af5f1aa6b2ca..e56fe2e985fd 100644 --- 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 index 7800873f73e3..a623de7662a8 100644 --- 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 deleted file mode 100644 index 42c74a7aae89..000000000000 --- a/packages/integrations/deno/test/fixtures/basics/src/components/React.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export default function() { - return ( -
testing
- ); -} diff --git a/packages/integrations/deno/test/fixtures/basics/src/pages/index.astro b/packages/integrations/deno/test/fixtures/basics/src/pages/index.astro index 4eb15f2f0e7d..9a37d684b6fd 100644 --- 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'; + --- @@ -8,6 +8,5 @@ import ReactComponent from '../components/React.jsx';

Basic App on Deno

- diff --git a/packages/integrations/netlify/src/integration-edge-functions.ts b/packages/integrations/netlify/src/integration-edge-functions.ts index 991838312d9c..0165c783143a 100644 --- 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 index 1b23a94f743b..f3e46181a67c 100644 --- 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 index 0b29fc1a9d65..7fc8877bddaa 100644 --- a/packages/integrations/netlify/test/edge-functions/edge-basic.test.ts +++ b/packages/integrations/netlify/test/edge-functions/edge-basic.test.ts @@ -1,7 +1,7 @@ // @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({ @@ -9,17 +9,12 @@ Deno.test({ 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/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/.netlify/edge-functions/manifest.json b/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/.netlify/edge-functions/manifest.json deleted file mode 100644 index f49242402b89..000000000000 --- a/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/.netlify/edge-functions/manifest.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "functions": [ - { - "function": "entry", - "path": "/" - }, - { - "function": "entry", - "path": "/two" - } - ], - "version": 1 -} \ No newline at end of file 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 index d7c89926484f..c55135e43b7a 100644 --- 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 index 16ff300883d2..bbda2476b440 100644 --- 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/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/components/React.jsx b/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/components/React.jsx deleted file mode 100644 index c6cf39aa55a8..000000000000 --- a/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/components/React.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export default function() { - return ( -
testing
- ) -} 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 index 80d2eed75b60..a87de65dbbd4 100644 --- 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'; ---- Testing @@ -9,6 +6,5 @@ import ReactComponent from '../components/React.jsx'; - diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js index b41492a7ae1e..6ae49e7bc9c8 100644 --- 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,7 +42,7 @@ async function check(Component, props, children) { return React.createElement('div'); } - await renderToStaticMarkup(Tester, props, children, {}); + renderToStaticMarkup(Tester, props, children, {}); if (error) { throw error; @@ -50,13 +50,7 @@ async function check(Component, props, children) { 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, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e81d40f4283a..8d789fc31d85 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1238,11 +1238,9 @@ importers: packages/integrations/deno/test/fixtures/basics: specifiers: '@astrojs/deno': workspace:* - '@astrojs/react': workspace:* astro: workspace:* dependencies: '@astrojs/deno': link:../../.. - '@astrojs/react': link:../../../../react astro: link:../../../../../astro packages/integrations/lit: @@ -1272,11 +1270,9 @@ importers: packages/integrations/netlify/test/edge-functions/fixtures/edge-basic: specifiers: '@astrojs/netlify': workspace:* - '@astrojs/react': workspace:* astro: workspace:* dependencies: '@astrojs/netlify': link:../../../.. - '@astrojs/react': link:../../../../../react astro: link:../../../../../../astro packages/integrations/node: