michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Revert "Fixes using React.lazy and Suspense"

Browse source 
This reverts commit 700d4f9649.
This commit is contained in:
Matthew Phillips 2022-04-20 17:17:36 -04:00
parent 700d4f9649
commit e621c2f7d3
20 changed files with 14 additions and 186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/astro/test/fixtures/react-component/src/components/LazyComponent.jsx vendored
View file

@ -1,9 +0,0 @@
import React from 'react';
export const LazyComponent = () => {
return (
<span id="lazy">inner content</span>
);
};
export default LazyComponent;

14
packages/astro/test/fixtures/react-component/src/components/Suspense.jsx vendored
View file

@ -1,14 +0,0 @@
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent.jsx'));
export const ParentComponent = () => {
return (
<div id="outer">
<Suspense>
<LazyComponent />
</Suspense>
</div>
);
};
export default ParentComponent;

17
packages/astro/test/fixtures/react-component/src/pages/suspense.astro vendored
View file

@ -1,17 +0,0 @@
---
import Suspense from '../components/Suspense.jsx';
---
<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<div id="client">
<Suspense client:load />
</div>
<div id="server">
<Suspense />
</div>
</body>
</html>

19
packages/astro/test/react-component.test.js
View file

@ -1,5 +1,5 @@
import { expect } from 'chai'; import { expect } from 'chai';
import { load as cheerioLoad } from 'cheerio'; import cheerio from 'cheerio';
import { isWindows, loadFixture } from './test-utils.js'; import { isWindows, loadFixture } from './test-utils.js';
let fixture; let fixture;
@ -18,7 +18,7 @@ describe('React Components', () => {
it('Can load React', async () => { it('Can load React', async () => {
const html = await fixture.readFile('/index.html'); const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html); const $ = cheerio.load(html);
// test 1: basic component renders // test 1: basic component renders
expect($('#react-static').text()).to.equal('Hello static!'); expect($('#react-static').text()).to.equal('Hello static!');
@ -51,13 +51,13 @@ describe('React Components', () => {
it('Can load Vue', async () => { it('Can load Vue', async () => {
const html = await fixture.readFile('/index.html'); const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html); const $ = cheerio.load(html);
expect($('#vue-h2').text()).to.equal('Hasta la vista, baby'); expect($('#vue-h2').text()).to.equal('Hasta la vista, baby');
}); });
it('Can use a pragma comment', async () => { it('Can use a pragma comment', async () => {
const html = await fixture.readFile('/pragma-comment/index.html'); const html = await fixture.readFile('/pragma-comment/index.html');
const $ = cheerioLoad(html); const $ = cheerio.load(html);
// test 1: rendered the PragmaComment component // test 1: rendered the PragmaComment component
expect($('.pragma-comment')).to.have.lengthOf(2); expect($('.pragma-comment')).to.have.lengthOf(2);
@ -66,7 +66,7 @@ describe('React Components', () => {
// TODO: is this still a relevant test? // TODO: is this still a relevant test?
it.skip('Includes reactroot on hydrating components', async () => { it.skip('Includes reactroot on hydrating components', async () => {
const html = await fixture.readFile('/index.html'); const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html); const $ = cheerio.load(html);
const div = $('#research'); const div = $('#research');
@ -76,13 +76,6 @@ describe('React Components', () => {
// test 2: renders correctly // test 2: renders correctly
expect(div.html()).to.equal('foo bar <!-- -->1'); 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; if (isWindows) return;
@ -100,7 +93,7 @@ describe('React Components', () => {
it('scripts proxy correctly', async () => { it('scripts proxy correctly', async () => {
const html = await fixture.fetch('/').then((res) => res.text()); const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerioLoad(html); const $ = cheerio.load(html);
for (const script of $('script').toArray()) { for (const script of $('script').toArray()) {
const { src } = script.attribs; const { src } = script.attribs;

3
packages/integrations/deno/src/index.ts
View file

@ -23,9 +23,6 @@ export default function createIntegration(args?: Options): AstroIntegration {
}, },
'astro:build:setup': ({ vite, target }) => { 'astro:build:setup': ({ vite, target }) => {
if (target === 'server') { 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 = { vite.ssr = {
noExternal: true, noExternal: true,
}; };

3
packages/integrations/deno/test/basics.test.js
View file

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

2
packages/integrations/deno/test/fixtures/basics/astro.config.mjs vendored
View file

@ -1,10 +1,8 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config';
import deno from '@astrojs/deno'; import deno from '@astrojs/deno';
import react from '@astrojs/react';
export default defineConfig({ export default defineConfig({
adapter: deno(), adapter: deno(),
integrations: [react()],
experimental: { experimental: {
ssr: true ssr: true
} }

3
packages/integrations/deno/test/fixtures/basics/package.json vendored
View file

@ -4,7 +4,6 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"astro": "workspace:*", "astro": "workspace:*",
"@astrojs/deno": "workspace:*", "@astrojs/deno": "workspace:*"
"@astrojs/react": "workspace:*"
} }
} }

7
packages/integrations/deno/test/fixtures/basics/src/components/React.jsx vendored
View file

@ -1,7 +0,0 @@
import React from 'react';
export default function() {
return (
<div id="react">testing</div>
);
}

3
packages/integrations/deno/test/fixtures/basics/src/pages/index.astro vendored
View file

@ -1,5 +1,5 @@
--- ---
import ReactComponent from '../components/React.jsx';
--- ---
<html> <html>
<head> <head>
@ -8,6 +8,5 @@ import ReactComponent from '../components/React.jsx';
</head> </head>
<body> <body>
<h1>Basic App on Deno</h1> <h1>Basic App on Deno</h1>
<ReactComponent />
</body> </body>
</html> </html>

3
packages/integrations/netlify/src/integration-edge-functions.ts
View file

@ -86,9 +86,6 @@ export function netlifyEdgeFunctions({ dist }: NetlifyEdgeFunctionsOptions = {})
}, },
'astro:build:setup': ({ vite, target }) => { 'astro:build:setup': ({ vite, target }) => {
if (target === 'server') { 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 = { vite.ssr = {
noExternal: true, noExternal: true,
}; };

1
packages/integrations/netlify/test/edge-functions/deps.ts
View file

@ -1,4 +1,3 @@
// @ts-nocheck // @ts-nocheck
export { fromFileUrl } from 'https://deno.land/std@0.110.0/path/mod.ts'; 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 { 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';

9
packages/integrations/netlify/test/edge-functions/edge-basic.test.ts
View file

@ -1,7 +1,7 @@
// @ts-ignore // @ts-ignore
import { runBuild } from './test-utils.ts'; import { runBuild } from './test-utils.ts';
// @ts-ignore // @ts-ignore
import { assertEquals, assert, DOMParser } from './deps.ts'; import { assertEquals, assert } from './deps.ts';
// @ts-ignore // @ts-ignore
Deno.test({ Deno.test({
@ -9,17 +9,12 @@ Deno.test({
async fn() { async fn() {
let close = await runBuild('./fixtures/edge-basic/'); let close = await runBuild('./fixtures/edge-basic/');
const { default: handler } = await import( 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/')); const response = await handler(new Request('http://example.com/'));
assertEquals(response.status, 200); assertEquals(response.status, 200);
const html = await response.text(); const html = await response.text();
assert(html, 'got some html'); assert(html, 'got some html');
const doc = new DOMParser().parseFromString(html, `text/html`)!;
const div = doc.querySelector('#react');
assert(div, 'div exists');
await close(); await close();
}, },
}); });

13
packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/.netlify/edge-functions/manifest.json
View file

@ -1,13 +0,0 @@
{
"functions": [
{
"function": "entry",
"path": "/"
},
{
"function": "entry",
"path": "/two"
}
],
"version": 1
}

2
packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/astro.config.mjs
View file

@ -1,12 +1,10 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config';
import { netlifyEdgeFunctions } from '@astrojs/netlify'; import { netlifyEdgeFunctions } from '@astrojs/netlify';
import react from "@astrojs/react";
export default defineConfig({ export default defineConfig({
adapter: netlifyEdgeFunctions({ adapter: netlifyEdgeFunctions({
dist: new URL('./dist/', import.meta.url), dist: new URL('./dist/', import.meta.url),
}), }),
integrations: [react()],
experimental: { experimental: {
ssr: true ssr: true
} }

1
packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/package.json
View file

@ -4,7 +4,6 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"astro": "workspace:*", "astro": "workspace:*",
"@astrojs/react": "workspace:*",
"@astrojs/netlify": "workspace:*" "@astrojs/netlify": "workspace:*"
} }
} }

7
packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/components/React.jsx
View file

@ -1,7 +0,0 @@
import React from 'react';
export default function() {
return (
<div id="react">testing</div>
)
}

4
packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/pages/index.astro
View file

@ -1,6 +1,3 @@
---
import ReactComponent from '../components/React.jsx';
---
<html> <html>
<head><title>Testing</title></head> <head><title>Testing</title></head>
<body> <body>
@ -9,6 +6,5 @@ import ReactComponent from '../components/React.jsx';
<ul> <ul>
<li><a href="/two/">Two</a></li> <li><a href="/two/">Two</a></li>
</ul> </ul>
<ReactComponent />
</body> </body>
</html> </html>

76
packages/integrations/react/server.js
View file

@ -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". // Note: there are packages that do some unholy things to create "components".
// Checking the $$typeof property catches most of these patterns. // Checking the $$typeof property catches most of these patterns.
if (typeof Component === 'object') { if (typeof Component === 'object') {
@ -42,7 +42,7 @@ async function check(Component, props, children) {
return React.createElement('div'); return React.createElement('div');
} }
await renderToStaticMarkup(Tester, props, children, {}); renderToStaticMarkup(Tester, props, children, {});
if (error) { if (error) {
throw error; throw error;
@ -50,13 +50,7 @@ async function check(Component, props, children) {
return isReactComponent; return isReactComponent;
} }
async function getNodeWritable() { function renderToStaticMarkup(Component, props, children, metadata) {
let nodeStreamBuiltinModuleName = 'stream';
let { Writable } = await import(nodeStreamBuiltinModuleName);
return Writable;
}
async function renderToStaticMarkup(Component, props, children, metadata) {
delete props['class']; delete props['class'];
const vnode = React.createElement(Component, { const vnode = React.createElement(Component, {
...props, ...props,
@ -65,74 +59,12 @@ async function renderToStaticMarkup(Component, props, children, metadata) {
let html; let html;
if (metadata && metadata.hydrate) { if (metadata && metadata.hydrate) {
html = ReactDOM.renderToString(vnode); html = ReactDOM.renderToString(vnode);
if('renderToReadableStream' in ReactDOM) {
html = await renderToReadableStreamAsync(vnode);
} else { } else {
html = await renderToPipeableStreamAsync(vnode); html = ReactDOM.renderToStaticMarkup(vnode);
}
} else {
if('renderToReadableStream' in ReactDOM) {
html = await renderToReadableStreamAsync(vnode);
} else {
html = await renderToStaticNodeStreamAsync(vnode);
}
} }
return { html }; 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 { export default {
check, check,
renderToStaticMarkup, renderToStaticMarkup,

4
pnpm-lock.yaml
View file

@ -1238,11 +1238,9 @@ importers:
packages/integrations/deno/test/fixtures/basics: packages/integrations/deno/test/fixtures/basics:
specifiers: specifiers:
'@astrojs/deno': workspace:* '@astrojs/deno': workspace:*
'@astrojs/react': workspace:*
astro: workspace:* astro: workspace:*
dependencies: dependencies:
'@astrojs/deno': link:../../.. '@astrojs/deno': link:../../..
'@astrojs/react': link:../../../../react
astro: link:../../../../../astro astro: link:../../../../../astro
packages/integrations/lit: packages/integrations/lit:
@ -1272,11 +1270,9 @@ importers:
packages/integrations/netlify/test/edge-functions/fixtures/edge-basic: packages/integrations/netlify/test/edge-functions/fixtures/edge-basic:
specifiers: specifiers:
'@astrojs/netlify': workspace:* '@astrojs/netlify': workspace:*
'@astrojs/react': workspace:*
astro: workspace:* astro: workspace:*
dependencies: dependencies:
'@astrojs/netlify': link:../../../.. '@astrojs/netlify': link:../../../..
'@astrojs/react': link:../../../../../react
astro: link:../../../../../../astro astro: link:../../../../../../astro
packages/integrations/node: packages/integrations/node: