Skip to content

Commit

Permalink
Fix preact compat support for libraries (#4213)
Browse files Browse the repository at this point in the history
Co-authored-by: Matthew Phillips <matthew@skypack.dev>
  • Loading branch information
bluwy and matthewp authored Aug 10, 2022
1 parent c38e7f1 commit f8e3853
Show file tree
Hide file tree
Showing 12 changed files with 148 additions and 9 deletions.
5 changes: 5 additions & 0 deletions .changeset/tall-eels-wink.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Bump Vite to 3.0.5
5 changes: 5 additions & 0 deletions .changeset/tall-walls-visit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/preact': patch
---

Fix compat support for libraries
2 changes: 1 addition & 1 deletion packages/astro/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
Original file line number Diff line number Diff line change
@@ -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 changes: 11 additions & 0 deletions packages/astro/test/fixtures/preact-compat-component/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { useState } from "react";

export function useSpecialState(initialState) {
return useState(initialState);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"name": "@test/react-lib",
"version": "0.0.0",
"private": true,
"type": "module",
"dependencies": {
"react": "^18.2.0"
}
}
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
Original file line number Diff line number Diff line change
@@ -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 changes: 41 additions & 0 deletions packages/astro/test/preact-compat-component.test.js
Original file line number Diff line number Diff line change
@@ -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');
});
});
});
9 changes: 8 additions & 1 deletion packages/integrations/preact/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
32 changes: 25 additions & 7 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit f8e3853

Please sign in to comment.