fix: exportName metadata for JSXMemberExpressions that use named impo…

…rts (#4403) * fix: exportName metadata for JSXMemberExpressions that use named imports * Adding changeset * Adding E2E test * Adding tests for MDX
withastro · Sep 7, 2022 · d31e72c · d31e72c
1 parent c01194b
commit d31e72c
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 13 deletions.
diff --git a/.changeset/soft-icons-travel.md b/.changeset/soft-icons-travel.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix for components, declared with JSXMemberExpression nodes, that failed to hydrate due to incomplete 'component-export' metadata
diff --git a/packages/astro/e2e/fixtures/namespaced-component/astro.config.mjs b/packages/astro/e2e/fixtures/namespaced-component/astro.config.mjs
@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
+import mdx from "@astrojs/mdx";
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [preact()],
+  integrations: [preact(), mdx()]
 });
diff --git a/packages/astro/e2e/fixtures/namespaced-component/package.json b/packages/astro/e2e/fixtures/namespaced-component/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
+    "@astrojs/mdx": "workspace:*",
     "@astrojs/preact": "workspace:*",
     "astro": "workspace:*"
   },

diff --git a/packages/astro/e2e/fixtures/namespaced-component/src/pages/index.astro b/packages/astro/e2e/fixtures/namespaced-component/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import * as ns from '../components/PreactCounter.tsx';
+import { components } from '../components/PreactCounter.tsx';
 ---
 
 <html lang="en">
@@ -10,9 +11,13 @@ import * as ns from '../components/PreactCounter.tsx';
 	</head>
 	<body>
 		<main>
-			<ns.components.PreactCounter id="preact-counter" client:load>
-				<h1>preact</h1>
+			<ns.components.PreactCounter id="preact-counter-namespace" client:load>
+				<h1>preact (namespace import)</h1>
 			</ns.components.PreactCounter>
+
+      <components.PreactCounter id="preact-counter-named" client:load>
+				<h1>preact (named import)</h1>
+			</components.PreactCounter>
 		</main>
 	</body>
 </html>
diff --git a/packages/astro/e2e/fixtures/namespaced-component/src/pages/mdx.mdx b/packages/astro/e2e/fixtures/namespaced-component/src/pages/mdx.mdx
@@ -0,0 +1,10 @@
+import * as ns from '../components/PreactCounter.tsx';
+import { components } from '../components/PreactCounter.tsx';
+
+<ns.components.PreactCounter id="preact-counter-namespace" client:load>
+  preact (namespace import)
+</ns.components.PreactCounter>
+
+<components.PreactCounter id="preact-counter-named" client:load>
+  preact (named import)
+</components.PreactCounter>
diff --git a/packages/astro/e2e/namespaced-component.test.js b/packages/astro/e2e/namespaced-component.test.js
@@ -19,18 +19,68 @@ test.describe('Hydrating namespaced components', () => {
 	test('Preact Component', async ({ page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#preact-counter');
-		await expect(counter, 'component is visible').toBeVisible();
+		// Counter declared with: <ns.components.PreactCounter id="preact-counter-namespace" client:load>
+		const namespacedCounter = await page.locator('#preact-counter-namespace');
+		await expect(namespacedCounter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('pre');
-		await expect(count, 'initial count is 0').toHaveText('0');
+		const namespacedCount = await namespacedCounter.locator('pre');
+		await expect(namespacedCount, 'initial count is 0').toHaveText('0');
 
-		const children = await counter.locator('.children');
-		await expect(children, 'children exist').toHaveText('preact');
+		const namespacedChildren = await namespacedCounter.locator('.children');
+		await expect(namespacedChildren, 'children exist').toHaveText('preact (namespace import)');
 
-		const increment = await counter.locator('.increment');
-		await increment.click();
+		const namespacedIncrement = await namespacedCounter.locator('.increment');
+		await namespacedIncrement.click();
 
-		await expect(count, 'count incremented by 1').toHaveText('1');
+		await expect(namespacedCount, 'count incremented by 1').toHaveText('1');
+
+		// Counter declared with: <components.PreactCounterTwo id="preact-counter-named" client:load>
+		const namedCounter = await page.locator('#preact-counter-named');
+		await expect(namedCounter, 'component is visible').toBeVisible();
+
+		const namedCount = await namedCounter.locator('pre');
+		await expect(namedCount, 'initial count is 0').toHaveText('0');
+
+		const namedChildren = await namedCounter.locator('.children');
+		await expect(namedChildren, 'children exist').toHaveText('preact (named import)');
+
+		const namedIncrement = await namedCounter.locator('.increment');
+		await namedIncrement.click();
+
+		await expect(namedCount, 'count incremented by 1').toHaveText('1');
+	});
+
+	test('MDX', async ({ page }) => {
+		await page.goto('/mdx');
+
+		// Counter declared with: <ns.components.PreactCounter id="preact-counter-namespace" client:load>
+		const namespacedCounter = await page.locator('#preact-counter-namespace');
+		await expect(namespacedCounter, 'component is visible').toBeVisible();
+
+		const namespacedCount = await namespacedCounter.locator('pre');
+		await expect(namespacedCount, 'initial count is 0').toHaveText('0');
+
+		const namespacedChildren = await namespacedCounter.locator('.children');
+		await expect(namespacedChildren, 'children exist').toHaveText('preact (namespace import)');
+
+		const namespacedIncrement = await namespacedCounter.locator('.increment');
+		await namespacedIncrement.click();
+
+		await expect(namespacedCount, 'count incremented by 1').toHaveText('1');
+
+		// Counter declared with: <components.PreactCounterTwo id="preact-counter-named" client:load>
+		const namedCounter = await page.locator('#preact-counter-named');
+		await expect(namedCounter, 'component is visible').toBeVisible();
+
+		const namedCount = await namedCounter.locator('pre');
+		await expect(namedCount, 'initial count is 0').toHaveText('0');
+
+		const namedChildren = await namedCounter.locator('.children');
+		await expect(namedChildren, 'children exist').toHaveText('preact (named import)');
+
+		const namedIncrement = await namedCounter.locator('.increment');
+		await namedIncrement.click();
+
+		await expect(namedCount, 'count incremented by 1').toHaveText('1');
 	});
 });
diff --git a/packages/astro/src/jsx/babel.ts b/packages/astro/src/jsx/babel.ts
@@ -207,7 +207,8 @@ export default function astroJSX(): PluginObj {
 							break;
 						}
 						if (namespace.at(0) === local) {
-							path.setData('import', { name: imported, path: source });
+							const name = imported === '*' ? imported : tagName;
+							path.setData('import', { name, path: source });
 							break;
 						}
 					}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml