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

Fix for using React in the static build (#2369)

Browse source 
* Fix react in the static build

* Adds a changeset
This commit is contained in:
Matthew Phillips 2022-01-13 13:28:29 -05:00 committed by GitHub
parent 500295395c
commit 20eaddb2a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 63 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fuzzy-peas-nail.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/renderer-react': patch
---
Fix for using the React renderer with the static build

18
packages/astro/test/fixtures/static-build-frameworks/src/components/RCounter.jsx vendored Normal file
View file

@ -0,0 +1,18 @@
import { useState } from 'react';
export default function Counter({ children }) {
const [count, setCount] = useState(0);
const add = () => setCount((i) => i + 1);
const subtract = () => setCount((i) => i - 1);
return (
<>
<div className="counter">
<button onClick={subtract}>-</button>
<pre>{count}</pre>
<button onClick={add}>+</button>
</div>
<div className="counter-message">{children}</div>
</>
);
}

0
packages/astro/test/fixtures/static-build-frameworks/src/pages/index.astro → packages/astro/test/fixtures/static-build-frameworks/src/pages/preact.astro vendored
View file

12
packages/astro/test/fixtures/static-build-frameworks/src/pages/react.astro vendored Normal file
View file

@ -0,0 +1,12 @@
---
import RCounter from '../components/RCounter.jsx';
---
<html>
<head>
<title>Testing</title>
</head>
<body>
<h1>Testing</h1>
<RCounter client:load />
</body>
</html>

16
packages/astro/test/static-build-frameworks.test.js
View file

@ -2,17 +2,16 @@ import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
function addLeadingSlash(path) {
return path.startsWith('/') ? path : '/' + path;
}
describe('Static build - frameworks', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/static-build-frameworks/',
renderers: ['@astrojs/renderer-preact'],
renderers: [
'@astrojs/renderer-preact',
'@astrojs/renderer-react'
],
buildOptions: {
experimentalStaticBuild: true,
},
@ -21,7 +20,12 @@ describe('Static build - frameworks', () => {
});
it('can build preact', async () => {
const html = await fixture.readFile('/index.html');
const html = await fixture.readFile('/preact/index.html');
expect(html).to.be.a('string');
});
it('can build react', async () => {
const html = await fixture.readFile('/react/index.html');
expect(html).to.be.a('string');
});
});

5
packages/renderers/renderer-react/index.js
View file

@ -8,7 +8,10 @@ export default {
default: { default: jsx },
} = await import('@babel/plugin-transform-react-jsx');
return {
plugins: [jsx({}, { runtime: 'automatic', importSource: 'react' })],
plugins: [jsx({}, {
runtime: 'automatic',
importSource: '@astrojs/renderer-react'
})],
};
},
viteConfig() {

12
packages/renderers/renderer-react/jsx-runtime.js Normal file
View file

@ -0,0 +1,12 @@
// This module is a simple wrapper around react/jsx-runtime so that
// it can run in Node ESM. 'react' doesn't declare this module as an export map
// So we have to use the .js. The .js is not added via the babel automatic JSX transform
// hence this module as a workaround.
import jsxr from 'react/jsx-runtime.js';
const { jsx, jsxs, Fragment } = jsxr;
export {
jsx,
jsxs,
Fragment
};

3
packages/renderers/renderer-react/package.json
View file

@ -17,7 +17,8 @@
"./*": "./*",
"./client.js": "./client.js",
"./server.js": "./server.js",
"./package.json": "./package.json"
"./package.json": "./package.json",
"./jsx-runtime": "./jsx-runtime.js"
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.16.0",