michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: exportName metadata for JSXMemberExpressions that use named imports (#4403)

Browse source 
* fix: exportName metadata for JSXMemberExpressions that use named imports

* Adding changeset

* Adding E2E test

* Adding tests for MDX
This commit is contained in:
John Daly 2022-09-07 11:51:09 -07:00 committed by GitHub
parent c01194b9d8
commit d31e72c3ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 88 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/soft-icons-travel.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix for components, declared with JSXMemberExpression nodes, that failed to hydrate due to incomplete 'component-export' metadata

3
packages/astro/e2e/fixtures/namespaced-component/astro.config.mjs
View file

@ -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()]
});

1
packages/astro/e2e/fixtures/namespaced-component/package.json
View file

@ -3,6 +3,7 @@
"version": "0.0.0",
"private": true,
"devDependencies": {
"@astrojs/mdx": "workspace:*",
"@astrojs/preact": "workspace:*",
"astro": "workspace:*"
},

9
packages/astro/e2e/fixtures/namespaced-component/src/pages/index.astro
View file

@ -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>

10
packages/astro/e2e/fixtures/namespaced-component/src/pages/mdx.mdx Normal file
View file

@ -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>

68
packages/astro/e2e/namespaced-component.test.js
View file

@ -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');
});
});

3
packages/astro/src/jsx/babel.ts
View file

@ -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;
}
}

2
pnpm-lock.yaml
View file

@ -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:../../..