Fix preact compat support for libraries (#4213)
Co-authored-by: Matthew Phillips <matthew@skypack.dev>
This commit is contained in:
parent
c38e7f1890
commit
f8e3853394
12 changed files with 171 additions and 32 deletions
5
.changeset/tall-eels-wink.md
Normal file
5
.changeset/tall-eels-wink.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Bump Vite to 3.0.5
|
5
.changeset/tall-walls-visit.md
Normal file
5
.changeset/tall-walls-visit.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@astrojs/preact': patch
|
||||
---
|
||||
|
||||
Fix compat support for libraries
|
|
@ -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"
|
||||
},
|
||||
|
|
7
packages/astro/test/fixtures/preact-compat-component/astro.config.mjs
vendored
Normal file
7
packages/astro/test/fixtures/preact-compat-component/astro.config.mjs
vendored
Normal file
|
@ -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 })],
|
||||
});
|
11
packages/astro/test/fixtures/preact-compat-component/package.json
vendored
Normal file
11
packages/astro/test/fixtures/preact-compat-component/package.json
vendored
Normal file
|
@ -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"
|
||||
}
|
||||
}
|
5
packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js
vendored
Normal file
5
packages/astro/test/fixtures/preact-compat-component/packages/react-lib/index.js
vendored
Normal file
|
@ -0,0 +1,5 @@
|
|||
import { useState } from "react";
|
||||
|
||||
export function useSpecialState(initialState) {
|
||||
return useState(initialState);
|
||||
}
|
9
packages/astro/test/fixtures/preact-compat-component/packages/react-lib/package.json
vendored
Normal file
9
packages/astro/test/fixtures/preact-compat-component/packages/react-lib/package.json
vendored
Normal file
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"name": "@test/react-lib",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
}
|
19
packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx
vendored
Normal file
19
packages/astro/test/fixtures/preact-compat-component/src/components/Counter.jsx
vendored
Normal file
|
@ -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 (
|
||||
<>
|
||||
<div class="counter">
|
||||
<button onClick={subtract}>-</button>
|
||||
<pre id="counter-text">{count}</pre>
|
||||
<button onClick={add}>+</button>
|
||||
</div>
|
||||
<div class="counter-message">{children}</div>
|
||||
</>
|
||||
);
|
||||
}
|
12
packages/astro/test/fixtures/preact-compat-component/src/pages/index.astro
vendored
Normal file
12
packages/astro/test/fixtures/preact-compat-component/src/pages/index.astro
vendored
Normal file
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
import Counter from '../components/Counter.jsx';
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Preact compat component</title>
|
||||
</head>
|
||||
<body>
|
||||
<Counter client:load />
|
||||
</body>
|
||||
</html>
|
41
packages/astro/test/preact-compat-component.test.js
Normal file
41
packages/astro/test/preact-compat-component.test.js
Normal file
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
|
@ -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;
|
||||
|
|
|
@ -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'}
|
||||
|
|
Loading…
Reference in a new issue