From 2b35650b5dca28b5cd5dd7c9bb689d0eee6a2ddf Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Thu, 2 Jun 2022 13:35:03 -0400 Subject: [PATCH] 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 --- .changeset/real-dogs-taste.md | 6 ++++++ packages/astro/src/@types/astro.ts | 7 +------ packages/astro/src/vite-plugin-jsx/index.ts | 1 + .../src/components/WithNewlines.jsx | 15 +++++++++++++++ .../solid-component/src/pages/index.astro | 2 ++ packages/integrations/solid/src/index.ts | 4 ++++ 6 files changed, 29 insertions(+), 6 deletions(-) create mode 100644 .changeset/real-dogs-taste.md create mode 100644 packages/astro/test/fixtures/solid-component/src/components/WithNewlines.jsx diff --git a/.changeset/real-dogs-taste.md b/.changeset/real-dogs-taste.md new file mode 100644 index 000000000000..907d91b45140 --- /dev/null +++ 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 index b64edbb2bd2f..ff158ffe1823 100644 --- 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; 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 index 004ae2eee98b..9881a78349af 100644 --- 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 new file mode 100644 index 000000000000..6ddc4c22dab3 --- /dev/null +++ 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 ( + <> +
Hello world - {count}
+ + ); +} diff --git a/packages/astro/test/fixtures/solid-component/src/pages/index.astro b/packages/astro/test/fixtures/solid-component/src/pages/index.astro index 73a9e2d3afda..1f7522cedcb4 100644 --- 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'; --- Solid
+
diff --git a/packages/integrations/solid/src/index.ts b/packages/integrations/solid/src/index.ts index 1205c6d091d6..00c61a75a8d6 100644 --- 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;