From 20eaddb2a723253c7fbde3e56955a549bdf3f342 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 13 Jan 2022 13:28:29 -0500 Subject: [PATCH] Fix for using React in the static build (#2369) * Fix react in the static build * Adds a changeset --- .changeset/fuzzy-peas-nail.md | 5 +++++ .../src/components/RCounter.jsx | 18 ++++++++++++++++++ .../src/pages/{index.astro => preact.astro} | 0 .../src/pages/react.astro | 12 ++++++++++++ .../astro/test/static-build-frameworks.test.js | 16 ++++++++++------ packages/renderers/renderer-react/index.js | 5 ++++- .../renderers/renderer-react/jsx-runtime.js | 12 ++++++++++++ packages/renderers/renderer-react/package.json | 3 ++- 8 files changed, 63 insertions(+), 8 deletions(-) create mode 100644 .changeset/fuzzy-peas-nail.md create mode 100644 packages/astro/test/fixtures/static-build-frameworks/src/components/RCounter.jsx rename packages/astro/test/fixtures/static-build-frameworks/src/pages/{index.astro => preact.astro} (100%) create mode 100644 packages/astro/test/fixtures/static-build-frameworks/src/pages/react.astro create mode 100644 packages/renderers/renderer-react/jsx-runtime.js 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 ( + <> +
+ + 
{count}
+ +
+
{children}
+ + ); +} 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 similarity index 100% rename from packages/astro/test/fixtures/static-build-frameworks/src/pages/index.astro rename to 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'; +--- + + +Testing + + +

Testing

+ + + 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",