From f8e3853394c2f2f48fac4b5eb2284e1960e59a13 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Wed, 10 Aug 2022 22:22:10 +0800 Subject: [PATCH] Fix preact compat support for libraries (#4213) Co-authored-by: Matthew Phillips --- .changeset/tall-eels-wink.md | 5 +++ .changeset/tall-walls-visit.md | 5 +++ packages/astro/package.json | 2 +- .../preact-compat-component/astro.config.mjs | 7 ++++ .../preact-compat-component/package.json | 11 +++++ .../packages/react-lib/index.js | 5 +++ .../packages/react-lib/package.json | 9 ++++ .../src/components/Counter.jsx | 19 +++++++++ .../src/pages/index.astro | 12 ++++++ .../test/preact-compat-component.test.js | 41 +++++++++++++++++++ packages/integrations/preact/src/index.ts | 9 +++- pnpm-lock.yaml | 32 +++++++++++---- 12 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 .changeset/tall-eels-wink.md create mode 100644 .changeset/tall-walls-visit.md create mode 100644 packages/astro/test/fixtures/preact-compat-component/astro.config.mjs create mode 100644 packages/astro/test/fixtures/preact-compat-component/package.json create mode 100644 packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js create mode 100644 packages/astro/test/fixtures/preact-compat-component/packages/react-lib/package.json create mode 100644 packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx create mode 100644 packages/astro/test/fixtures/preact-compat-component/src/pages/index.astro create mode 100644 packages/astro/test/preact-compat-component.test.js diff --git a/.changeset/tall-eels-wink.md b/.changeset/tall-eels-wink.md new file mode 100644 index 000000000000..af06792c7edf --- /dev/null +++ b/.changeset/tall-eels-wink.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Bump Vite to 3.0.5 diff --git a/.changeset/tall-walls-visit.md b/.changeset/tall-walls-visit.md new file mode 100644 index 000000000000..9168d09d8a85 --- /dev/null +++ b/.changeset/tall-walls-visit.md @@ -0,0 +1,5 @@ +--- +'@astrojs/preact': patch +--- + +Fix compat support for libraries diff --git a/packages/astro/package.json b/packages/astro/package.json index 36e017eeb1b5..f6cf58e689ca 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -138,7 +138,7 @@ "tsconfig-resolver": "^3.0.1", "unist-util-visit": "^4.1.0", "vfile": "^5.3.2", - "vite": "3.0.4", + "vite": "3.0.5", "yargs-parser": "^21.0.1", "zod": "^3.17.3" }, diff --git a/packages/astro/test/fixtures/preact-compat-component/astro.config.mjs b/packages/astro/test/fixtures/preact-compat-component/astro.config.mjs new file mode 100644 index 000000000000..58361989c9bd --- /dev/null +++ b/packages/astro/test/fixtures/preact-compat-component/astro.config.mjs @@ -0,0 +1,7 @@ +import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; + +// https://astro.build/config +export default defineConfig({ + integrations: [preact({ compat: true })], +}); \ No newline at end of file diff --git a/packages/astro/test/fixtures/preact-compat-component/package.json b/packages/astro/test/fixtures/preact-compat-component/package.json new file mode 100644 index 000000000000..9cef449cc829 --- /dev/null +++ b/packages/astro/test/fixtures/preact-compat-component/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/preact-compat-component", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/preact": "workspace:*", + "@test/react-lib": "workspace:*", + "astro": "workspace:*", + "preact": "^10.10.1" + } +} diff --git a/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js b/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js new file mode 100644 index 000000000000..22fb55f10567 --- /dev/null +++ b/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js @@ -0,0 +1,5 @@ +import { useState } from "react"; + +export function useSpecialState(initialState) { + return useState(initialState); +} \ No newline at end of file diff --git a/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/package.json b/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/package.json new file mode 100644 index 000000000000..651d1c90e3a1 --- /dev/null +++ b/packages/astro/test/fixtures/preact-compat-component/packages/react-lib/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/react-lib", + "version": "0.0.0", + "private": true, + "type": "module", + "dependencies": { + "react": "^18.2.0" + } +} diff --git a/packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx b/packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx new file mode 100644 index 000000000000..bfdf5bed15a8 --- /dev/null +++ b/packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx @@ -0,0 +1,19 @@ +/** @jsxImportSource preact */ +import { useSpecialState } from '@test/react-lib' + +export default function Counter({ children }) { + const [count, setCount] = useSpecialState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( + <> +
+ + 
{count}
+ +
+
{children}
+ + ); +} diff --git a/packages/astro/test/fixtures/preact-compat-component/src/pages/index.astro b/packages/astro/test/fixtures/preact-compat-component/src/pages/index.astro new file mode 100644 index 000000000000..d28a4fff55ab --- /dev/null +++ b/packages/astro/test/fixtures/preact-compat-component/src/pages/index.astro @@ -0,0 +1,12 @@ +--- +import Counter from '../components/Counter.jsx'; +--- + + + + Preact compat component + + + + + \ No newline at end of file diff --git a/packages/astro/test/preact-compat-component.test.js b/packages/astro/test/preact-compat-component.test.js new file mode 100644 index 000000000000..f0cd9e45fec9 --- /dev/null +++ b/packages/astro/test/preact-compat-component.test.js @@ -0,0 +1,41 @@ +import { expect } from 'chai'; +import * as cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('Preact compat component', () => { + describe('Development', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/preact-compat-component/', + }); + await fixture.startDevServer(); + }); + + it('Can load Counter', async () => { + const html = await fixture.fetch('/').then((res) => res.text()); + const $ = cheerio.load(html); + + expect($('#counter-text').text()).to.be.eq('0'); + }); + }); + + describe('Build', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/preact-compat-component/', + }); + await fixture.build(); + }); + + it('Can load Counter', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + expect($('#counter-text').text()).to.be.eq('0'); + }); + }); +}); diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts index 67a972475db2..5c5ed0363aff 100644 --- a/packages/integrations/preact/src/index.ts +++ b/packages/integrations/preact/src/index.ts @@ -78,8 +78,15 @@ function getViteConfiguration(compat?: boolean): ViteUserConfig { { find: 'react-dom', replacement: 'preact/compat' }, { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }, ], - dedupe: ['preact/compat'], + dedupe: ['preact/compat', 'preact'], }; + // noExternal React entrypoints to be bundled, resolved, and aliased by Vite + viteConfig.ssr!.noExternal = [ + 'react', + 'react-dom', + 'react-dom/test-utils', + 'react/jsx-runtime', + ]; } return viteConfig; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 05a830826405..4736948d78f0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -460,7 +460,7 @@ importers: tsconfig-resolver: ^3.0.1 unist-util-visit: ^4.1.0 vfile: ^5.3.2 - vite: 3.0.4 + vite: 3.0.5 yargs-parser: ^21.0.1 zod: ^3.17.3 dependencies: @@ -516,7 +516,7 @@ importers: tsconfig-resolver: 3.0.1 unist-util-visit: 4.1.0 vfile: 5.3.4 - vite: 3.0.4_sass@1.54.4 + vite: 3.0.5_sass@1.54.4 yargs-parser: 21.1.1 zod: 3.18.0 devDependencies: @@ -1666,6 +1666,24 @@ importers: devDependencies: postcss-preset-env: 7.7.2_postcss@8.4.16 + packages/astro/test/fixtures/preact-compat-component: + specifiers: + '@astrojs/preact': workspace:* + '@test/react-lib': workspace:* + astro: workspace:* + preact: ^10.10.1 + dependencies: + '@astrojs/preact': link:../../../../integrations/preact + '@test/react-lib': link:packages/react-lib + astro: link:../../.. + preact: 10.10.2 + + packages/astro/test/fixtures/preact-compat-component/packages/react-lib: + specifiers: + react: ^18.2.0 + dependencies: + react: 18.2.0 + packages/astro/test/fixtures/preact-component: specifiers: '@astrojs/preact': workspace:* @@ -16580,8 +16598,8 @@ packages: - supports-color dev: true - /vite/3.0.4_sass@1.54.4: - resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==} + /vite/3.0.5: + resolution: {integrity: sha512-bRvrt9Tw8EGW4jj64aYFTnVg134E8hgDxyl/eEHnxiGqYk7/pTPss6CWlurqPOUzqvEoZkZ58Ws+Iu8MB87iMA==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: @@ -16603,12 +16621,10 @@ packages: postcss: 8.4.16 resolve: 1.22.1 rollup: 2.77.2 - sass: 1.54.4 optionalDependencies: fsevents: 2.3.2 - dev: false - /vite/3.0.5: + /vite/3.0.5_sass@1.54.4: resolution: {integrity: sha512-bRvrt9Tw8EGW4jj64aYFTnVg134E8hgDxyl/eEHnxiGqYk7/pTPss6CWlurqPOUzqvEoZkZ58Ws+Iu8MB87iMA==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -16631,8 +16647,10 @@ packages: postcss: 8.4.16 resolve: 1.22.1 rollup: 2.77.2 + sass: 1.54.4 optionalDependencies: fsevents: 2.3.2 + dev: false /vitest/0.20.3: resolution: {integrity: sha512-cXMjTbZxBBUUuIF3PUzEGPLJWtIMeURBDXVxckSHpk7xss4JxkiiWh5cnIlfGyfJne2Ii3QpbiRuFL5dMJtljw==}