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

Fix: newline characters in Solid (#3505)

Browse source 
* fix: remove source map consumption from babel transform

* refactor: move inputSourceMap to integration option

* tests: add newline ex to test build and dev

* chore: change back to babel.transformAsync

* chore: changeset
This commit is contained in:
Ben Holmes 2022-06-02 13:35:03 -04:00 committed by GitHub
parent 45ae85c32f
commit 2b35650b5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/real-dogs-taste.md Normal file
View file

@ -0,0 +1,6 @@
---
'astro': patch
'@astrojs/solid-js': patch
---
Fix newline characters in SolidJS JSX attributes (ex: multiline CSS classes)

7
packages/astro/src/@types/astro.ts
View file

@ -793,12 +793,7 @@ export interface HydrateOptions {
value?: string; value?: string;
} }
export interface JSXTransformConfig { export type JSXTransformConfig = Pick<babel.TransformOptions, 'presets' | 'plugins' | 'inputSourceMap'>;
/** Babel presets */
presets?: babel.PluginItem[];
/** Babel plugins */
plugins?: babel.PluginItem[];
}
export type JSXTransformFn = (options: { export type JSXTransformFn = (options: {
mode: string; mode: string;

1
packages/astro/src/vite-plugin-jsx/index.ts
View file

@ -63,6 +63,7 @@ async function transformJSX({
sourceMaps: true, sourceMaps: true,
configFile: false, configFile: false,
babelrc: false, babelrc: false,
inputSourceMap: options.inputSourceMap,
}); });
// TODO: Be more strict about bad return values here. // TODO: Be more strict about bad return values here.
// Should we throw an error instead? Should we never return `{code: ""}`? // Should we throw an error instead? Should we never return `{code: ""}`?

15
packages/astro/test/fixtures/solid-component/src/components/WithNewlines.jsx vendored Normal file
View file

@ -0,0 +1,15 @@
// Test introduced to ensure JSX is correctly transformed
// See https://github.com/withastro/astro/issues/3371
import { createSignal } from 'solid-js';
export default function WithNewlines() {
const [count] = createSignal(0);
return (
<>
<div class="multiline
css-classes">Hello world - {count}</div>
</>
);
}

2
packages/astro/test/fixtures/solid-component/src/pages/index.astro vendored
View file

@ -1,11 +1,13 @@
--- ---
import Hello from '../components/Hello.jsx'; import Hello from '../components/Hello.jsx';
import WithNewlines from '../components/WithNewlines.jsx';
--- ---
<html> <html>
<head><title>Solid</title></head> <head><title>Solid</title></head>
<body> <body>
<div> <div>
<Hello client:load /> <Hello client:load />
<WithNewlines client:load />
</div> </div>
</body> </body>
</html> </html>

4
packages/integrations/solid/src/index.ts
View file

@ -12,6 +12,10 @@ function getRenderer(): AstroRenderer {
const options = { const options = {
presets: [solid({}, { generate: ssr ? 'ssr' : 'dom', hydratable: true })], presets: [solid({}, { generate: ssr ? 'ssr' : 'dom', hydratable: true })],
plugins: [], plugins: [],
// Otherwise, babel will try to consume the source map generated by esbuild
// This causes unexpected issues with newline characters: https://github.com/withastro/astro/issues/3371
// Note "vite-plugin-solid" does the same: https://github.com/solidjs/vite-plugin-solid/blob/master/src/index.ts#L344-L345
inputSourceMap: false as any,
}; };
return options; return options;