Correctly transform third-party JSX files (withastro#5437)

ghostdevv · Nov 18, 2022 · 4b18813 · 4b18813
1 parent a334f12
commit 4b18813
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 0 deletions.
diff --git a/.changeset/dull-camels-accept.md b/.changeset/dull-camels-accept.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Correctly transform third-party JSX files
diff --git a/packages/astro/src/core/path.ts b/packages/astro/src/core/path.ts
@@ -59,3 +59,8 @@ export function removeFileExtension(path: string) {
  let idx = path.lastIndexOf('.');
  return idx === -1 ? path : path.slice(0, idx);
 }
+
+export function removeQueryString(path: string) {
+ const index = path.lastIndexOf('?');
+ return index > 0 ? path.substring(0, index) : path;
+}
diff --git a/packages/astro/src/vite-plugin-jsx/index.ts b/packages/astro/src/vite-plugin-jsx/index.ts
@@ -11,6 +11,7 @@ import esbuild from 'esbuild';
 import * as colors from 'kleur/colors';
 import path from 'path';
 import { error } from '../core/logger/core.js';
+import { removeQueryString } from '../core/path.js';
 import { parseNpmName } from '../core/util.js';
 import tagExportsPlugin from './tag.js';
 
@@ -187,6 +188,7 @@ export default function jsx({ settings, logging }: AstroPluginJSXOptions): Plugi
  },
  async transform(code, id, opts) {
  const ssr = Boolean(opts?.ssr);
+ id = removeQueryString(id);
  if (!JSX_EXTENSIONS.has(path.extname(id))) {
  return null;
  }

diff --git a/packages/astro/test/fixtures/solid-component/deps/solid-jsx-component/Counter.jsx b/packages/astro/test/fixtures/solid-component/deps/solid-jsx-component/Counter.jsx
@@ -0,0 +1,18 @@
+import { createSignal } from 'solid-js';
+
+export default function Counter(props) {
+ const [count, setCount] = createSignal(0);
+ const add = () => setCount(count() + 1);
+ const subtract = () => setCount(count() - 1);
+
+ return (
+ <>
+ <div class="counter">
+ <button onClick={subtract}>-</button>
+ <pre>{count()}</pre>
+ <button onClick={add}>+</button>
+ </div>
+ <div class="counter-message">{props.children}</div>
+ </>
+ );
+}
diff --git a/packages/astro/test/fixtures/solid-component/deps/solid-jsx-component/index.js b/packages/astro/test/fixtures/solid-component/deps/solid-jsx-component/index.js
@@ -0,0 +1 @@
+export { default as Counter } from './Counter'
diff --git a/packages/astro/test/fixtures/solid-component/deps/solid-jsx-component/package.json b/packages/astro/test/fixtures/solid-component/deps/solid-jsx-component/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "@test/solid-jsx-component",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "exports": {
+ ".": {
+ "solid": "./index.js",
+ "default": "./index.js"
+ }
+ },
+ "dependencies": {
+ "solid-js": "^1.5.6"
+ }
+}
diff --git a/packages/astro/test/fixtures/solid-component/package.json b/packages/astro/test/fixtures/solid-component/package.json
@@ -5,6 +5,7 @@
  "dependencies": {
  "@astrojs/solid-js": "workspace:*",
  "@solidjs/router": "^0.5.0",
+ "@test/solid-jsx-component": "file:./deps/solid-jsx-component",
  "astro": "workspace:*",
  "solid-js": "^1.5.6"
  }

diff --git a/packages/astro/test/fixtures/solid-component/src/pages/index.astro b/packages/astro/test/fixtures/solid-component/src/pages/index.astro
@@ -3,6 +3,7 @@ import Hello from '../components/Hello.jsx';
 import WithNewlines from '../components/WithNewlines.jsx';
 import { Router } from "@solidjs/router";
 import ProxyComponent from '../components/ProxyComponent.jsx';
+import { Counter as DepCounter } from '@test/solid-jsx-component';
 ---
 <html>
 <head><title>Solid</title></head>
@@ -12,6 +13,7 @@ import ProxyComponent from '../components/ProxyComponent.jsx';
  <WithNewlines client:load />
  <Router />
  <ProxyComponent client:load />
+ <DepCounter client:load />
  </div>
 </body>
 </html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml