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 | 78 ++++++++++++------- 12 files changed, 171 insertions(+), 32 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 000000000..af06792c7 --- /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 000000000..9168d09d8 --- /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 36e017eeb..f6cf58e68 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 000000000..58361989c --- /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 000000000..9cef449cc --- /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 000000000..22fb55f10 --- /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 000000000..651d1c90e --- /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 000000000..bfdf5bed1 --- /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 000000000..d28a4fff5 --- /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 000000000..f0cd9e45f --- /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 67a972475..5c5ed0363 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 05a830826..4736948d7 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,34 +16598,6 @@ packages: - supports-color dev: true - /vite/3.0.4_sass@1.54.4: - resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==} - engines: {node: ^14.18.0 || >=16.0.0} - hasBin: true - peerDependencies: - less: '*' - sass: '*' - stylus: '*' - terser: ^5.4.0 - peerDependenciesMeta: - less: - optional: true - sass: - optional: true - stylus: - optional: true - terser: - optional: true - dependencies: - esbuild: 0.14.54 - 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: resolution: {integrity: sha512-bRvrt9Tw8EGW4jj64aYFTnVg134E8hgDxyl/eEHnxiGqYk7/pTPss6CWlurqPOUzqvEoZkZ58Ws+Iu8MB87iMA==} engines: {node: ^14.18.0 || >=16.0.0} @@ -16634,6 +16624,34 @@ packages: optionalDependencies: fsevents: 2.3.2 + /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 + peerDependencies: + less: '*' + sass: '*' + stylus: '*' + terser: ^5.4.0 + peerDependenciesMeta: + less: + optional: true + sass: + optional: true + stylus: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.14.54 + 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==} engines: {node: '>=v14.16.0'}