diff options
| author |  Matthew Phillips <matthew@matthewphillips.info>
| 2022-01-13 13:28:29 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-01-13 13:28:29 -0500 |
| commit | 20eaddb2a723253c7fbde3e56955a549bdf3f342 (patch) | |
| tree | e3b61872034fb55a2531e50b7bf72b23c2eb699d | |
| parent | 500295395caade20e024bda9234a3f5b9e9a2126 (diff) | |
| download | astro-20eaddb2a723253c7fbde3e56955a549bdf3f342.tar.gz astro-20eaddb2a723253c7fbde3e56955a549bdf3f342.tar.zst astro-20eaddb2a723253c7fbde3e56955a549bdf3f342.zip | |
Fix for using React in the static build (#2369)
* Fix react in the static build
* Adds a changeset
| -rw-r--r-- | .changeset/fuzzy-peas-nail.md | 5 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/static-build-frameworks/src/components/RCounter.jsx | 18 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/static-build-frameworks/src/pages/preact.astro (renamed from packages/astro/test/fixtures/static-build-frameworks/src/pages/index.astro) | 0 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/static-build-frameworks/src/pages/react.astro | 12 | ||||
| -rw-r--r-- | packages/astro/test/static-build-frameworks.test.js | 16 | ||||
| -rw-r--r-- | packages/renderers/renderer-react/index.js | 5 | ||||
| -rw-r--r-- | packages/renderers/renderer-react/jsx-runtime.js | 12 | ||||
| -rw-r--r-- | packages/renderers/renderer-react/package.json | 3 |
8 files changed, 63 insertions, 8 deletions
diff --git a/.changeset/fuzzy-peas-nail.md b/.changeset/fuzzy-peas-nail.md new file mode 100644 index 000000000..969d58bb5 --- /dev/null +++ b/.changeset/fuzzy-peas-nail.md @@ -0,0 +1,5 @@ +--- +'@astrojs/renderer-react': patch +--- + +Fix for using the React renderer with the static build diff --git a/packages/astro/test/fixtures/static-build-frameworks/src/components/RCounter.jsx b/packages/astro/test/fixtures/static-build-frameworks/src/components/RCounter.jsx new file mode 100644 index 000000000..9422ac0a1 --- /dev/null +++ b/packages/astro/test/fixtures/static-build-frameworks/src/components/RCounter.jsx @@ -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> + </> + ); +} diff --git a/packages/astro/test/fixtures/static-build-frameworks/src/pages/index.astro b/packages/astro/test/fixtures/static-build-frameworks/src/pages/preact.astro index 53e5ce551..53e5ce551 100644 --- a/packages/astro/test/fixtures/static-build-frameworks/src/pages/index.astro +++ b/packages/astro/test/fixtures/static-build-frameworks/src/pages/preact.astro diff --git a/packages/astro/test/fixtures/static-build-frameworks/src/pages/react.astro b/packages/astro/test/fixtures/static-build-frameworks/src/pages/react.astro new file mode 100644 index 000000000..0a1c32e4f --- /dev/null +++ b/packages/astro/test/fixtures/static-build-frameworks/src/pages/react.astro @@ -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> diff --git a/packages/astro/test/static-build-frameworks.test.js b/packages/astro/test/static-build-frameworks.test.js index a3706d7e7..f653aa8fe 100644 --- a/packages/astro/test/static-build-frameworks.test.js +++ b/packages/astro/test/static-build-frameworks.test.js @@ -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'); }); }); diff --git a/packages/renderers/renderer-react/index.js b/packages/renderers/renderer-react/index.js index e73dd622a..a3cedcf07 100644 --- a/packages/renderers/renderer-react/index.js +++ b/packages/renderers/renderer-react/index.js @@ -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() { diff --git a/packages/renderers/renderer-react/jsx-runtime.js b/packages/renderers/renderer-react/jsx-runtime.js new file mode 100644 index 000000000..1df555fc0 --- /dev/null +++ b/packages/renderers/renderer-react/jsx-runtime.js @@ -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 +}; diff --git a/packages/renderers/renderer-react/package.json b/packages/renderers/renderer-react/package.json index c8e02ad2f..b462a120e 100644 --- a/packages/renderers/renderer-react/package.json +++ b/packages/renderers/renderer-react/package.json @@ -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", |