diff --git a/.changeset/soft-icons-travel.md b/.changeset/soft-icons-travel.md new file mode 100644 index 0000000000..3d7b9f9629 --- /dev/null +++ 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 index 08916b1fea..f7c8e034b6 100644 --- 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 index 6968717cfc..96de360e26 100644 --- 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 index 608b48458b..7a65b02ae3 100644 --- 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'; --- @@ -10,9 +11,13 @@ import * as ns from '../components/PreactCounter.tsx';
- -

preact

+ +

preact (namespace import)

 + + +

preact (named import)

+
diff --git a/packages/astro/e2e/fixtures/namespaced-component/src/pages/mdx.mdx b/packages/astro/e2e/fixtures/namespaced-component/src/pages/mdx.mdx new file mode 100644 index 0000000000..33ae8cff34 --- /dev/null +++ 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'; + + + preact (namespace import) + + + + preact (named import) + \ No newline at end of file diff --git a/packages/astro/e2e/namespaced-component.test.js b/packages/astro/e2e/namespaced-component.test.js index a23f9ee78f..729f67f4de 100644 --- 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: + 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: + 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: + 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: + 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 index 1a5a7664e7..a8c4ef3c69 100644 --- 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 index 8417f6568b..e3667f8e71 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -698,12 +698,14 @@ importers: packages/astro/e2e/fixtures/namespaced-component: specifiers: + '@astrojs/mdx': workspace:* '@astrojs/preact': workspace:* astro: workspace:* preact: ^10.7.3 dependencies: preact: 10.10.6 devDependencies: + '@astrojs/mdx': link:../../../../integrations/mdx '@astrojs/preact': link:../../../../integrations/preact astro: link:../../..