Fix: newline characters in Solid (#3505)

* 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
withastro · Jun 2, 2022 · 2b35650 · 2b35650
1 parent 45ae85c
commit 2b35650
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 6 deletions.
diff --git a/.changeset/real-dogs-taste.md b/.changeset/real-dogs-taste.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/solid-js': patch
+---
+
+Fix newline characters in SolidJS JSX attributes (ex: multiline CSS classes)
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -793,12 +793,7 @@ export interface HydrateOptions {
 	value?: string;
 }
 
-export interface JSXTransformConfig {
-	/** Babel presets */
-	presets?: babel.PluginItem[];
-	/** Babel plugins */
-	plugins?: babel.PluginItem[];
-}
+export type JSXTransformConfig = Pick<babel.TransformOptions, 'presets' | 'plugins' | 'inputSourceMap'>;
 
 export type JSXTransformFn = (options: {
 	mode: string;

diff --git a/packages/astro/src/vite-plugin-jsx/index.ts b/packages/astro/src/vite-plugin-jsx/index.ts
@@ -63,6 +63,7 @@ async function transformJSX({
 		sourceMaps: true,
 		configFile: false,
 		babelrc: false,
+    inputSourceMap: options.inputSourceMap,
 	});
 	// TODO: Be more strict about bad return values here.
 	// Should we throw an error instead? Should we never return `{code: ""}`?

diff --git a/packages/astro/test/fixtures/solid-component/src/components/WithNewlines.jsx b/packages/astro/test/fixtures/solid-component/src/components/WithNewlines.jsx
@@ -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>
+    </>
+  );
+}
diff --git a/packages/astro/test/fixtures/solid-component/src/pages/index.astro b/packages/astro/test/fixtures/solid-component/src/pages/index.astro
@@ -1,11 +1,13 @@
 ---
 import Hello from '../components/Hello.jsx';
+import WithNewlines from '../components/WithNewlines.jsx';
 ---
 <html>
 <head><title>Solid</title></head>
 <body>
   <div>
     <Hello client:load />
+		<WithNewlines client:load />
   </div>
 </body>
 </html>
diff --git a/packages/integrations/solid/src/index.ts b/packages/integrations/solid/src/index.ts
@@ -12,6 +12,10 @@ function getRenderer(): AstroRenderer {
 			const options = {
 				presets: [solid({}, { generate: ssr ? 'ssr' : 'dom', hydratable: true })],
 				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;