michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix client:only when used with JSX (#4592)

Browse source
This commit is contained in:
Matthew Phillips 2022-09-01 21:27:26 -04:00 committed by GitHub
parent f018e365cf
commit 8476f2a293
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 46 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/astro/src/core/build/internal.ts
View file

@ -1,7 +1,7 @@
import type { OutputChunk, RenderedChunk } from 'rollup';
import type { PageBuildData, ViteID } from './types';
import { prependForwardSlash } from '../path.js';
import { prependForwardSlash, removeFileExtension } from '../path.js';
import { viteID } from '../util.js';
export interface BuildInternals {
@ -136,8 +136,15 @@ export function* getPageDatasByClientOnlyID(
): Generator<PageBuildData, void, unknown> {
const pagesByClientOnly = internals.pagesByClientOnly;
if (pagesByClientOnly.size) {
const pathname = `/@fs${prependForwardSlash(viteid)}`;
const pageBuildDatas = pagesByClientOnly.get(pathname);
let pathname = `/@fs${prependForwardSlash(viteid)}`;
let pageBuildDatas = pagesByClientOnly.get(viteid);
// BUG! The compiler partially resolves .jsx to remove the file extension so we have to check again.
// We should probably get rid of all `@fs` usage and always fully resolve via Vite,
// but this would be a bigger change.
if(!pageBuildDatas) {
pathname = `/@fs${prependForwardSlash(removeFileExtension(viteid))}`
pageBuildDatas = pagesByClientOnly.get(pathname);
}
if (pageBuildDatas) {
for (const pageData of pageBuildDatas) {
yield pageData;

5
packages/astro/src/core/path.ts
View file

@ -46,3 +46,8 @@ function isString(path: unknown): path is string {
export function joinPaths(...paths: (string | undefined)[]) {
return paths.filter(isString).map(trimSlashes).join('/');
}
export function removeFileExtension(path: string) {
let idx = path.lastIndexOf('.');
return idx === -1 ? path : path.slice(0, idx);
}

6
packages/astro/test/astro-client-only.test.js
View file

@ -33,6 +33,12 @@ describe('Client only components', () => {
expect(css).to.match(/yellowgreen/, 'Svelte styles are added');
expect(css).to.match(/Courier New/, 'Global styles are added');
});
it('Includes CSS from components that use CSS modules', async () => {
const html = await fixture.readFile('/css-modules/index.html');
const $ = cheerioLoad(html);
expect($('link[rel=stylesheet]')).to.have.a.lengthOf(1);
});
});
describe('Client only components subpath', () => {

11
packages/astro/test/fixtures/astro-client-only/src/components/UsingCSSModules.jsx vendored Normal file
View file

@ -0,0 +1,11 @@
import Styles from './styles.module.scss';
const ClientApp = () => {
return (
<div>
<h2 className={Styles.red}>This text should be red</h2>
</div>
);
};
export default ClientApp;

3
packages/astro/test/fixtures/astro-client-only/src/components/styles.module.scss vendored Normal file
View file

@ -0,0 +1,3 @@
.red {
color: red;
}

11
packages/astro/test/fixtures/astro-client-only/src/pages/css-modules.astro vendored Normal file
View file

@ -0,0 +1,11 @@
---
import UsingCSSModules from '../components/UsingCSSModules.jsx';
---
<html>
<head>
<title>Using CSS modules</title>
</head>
<body>
<UsingCSSModules client:only="react" />
</body>
</html>