From 1d696744657d1c1dbc91d2a0cd558f3127a90c97 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Thu, 11 Aug 2022 13:37:37 -0500 Subject: [PATCH 1/7] fix(#4209): handle namespaced JSX and MDX --- examples/with-mdx/src/components/Counter.jsx | 2 +- examples/with-mdx/src/pages/index.mdx | 7 +- .../namespaced-component/astro.config.mjs | 7 ++ .../namespaced-component/package.json | 12 +++ .../src/components/PreactCounter.tsx | 19 +++++ .../src/pages/index.astro | 18 ++++ .../astro/e2e/namespaced-component.test.js | 36 ++++++++ packages/astro/src/jsx/babel.ts | 72 +++++++++++++++- .../astro/src/runtime/server/astro-island.ts | 10 ++- .../fixtures/mdx-namespace/astro.config.mjs | 6 ++ .../test/fixtures/mdx-namespace/package.json | 8 ++ .../src/components/Component.jsx | 6 ++ .../mdx-namespace/src/pages/object.mdx | 3 + .../fixtures/mdx-namespace/src/pages/star.mdx | 3 + .../mdx/test/mdx-namespace.test.js | 83 +++++++++++++++++++ pnpm-lock.yaml | 10 +++ 16 files changed, 297 insertions(+), 5 deletions(-) create mode 100644 packages/astro/e2e/fixtures/namespaced-component/astro.config.mjs create mode 100644 packages/astro/e2e/fixtures/namespaced-component/package.json create mode 100644 packages/astro/e2e/fixtures/namespaced-component/src/components/PreactCounter.tsx create mode 100644 packages/astro/e2e/fixtures/namespaced-component/src/pages/index.astro create mode 100644 packages/astro/e2e/namespaced-component.test.js create mode 100644 packages/integrations/mdx/test/fixtures/mdx-namespace/astro.config.mjs create mode 100644 packages/integrations/mdx/test/fixtures/mdx-namespace/package.json create mode 100644 packages/integrations/mdx/test/fixtures/mdx-namespace/src/components/Component.jsx create mode 100644 packages/integrations/mdx/test/fixtures/mdx-namespace/src/pages/object.mdx create mode 100644 packages/integrations/mdx/test/fixtures/mdx-namespace/src/pages/star.mdx create mode 100644 packages/integrations/mdx/test/mdx-namespace.test.js diff --git a/examples/with-mdx/src/components/Counter.jsx b/examples/with-mdx/src/components/Counter.jsx index 801eefe733cd..a23cd96c31cb 100644 --- a/examples/with-mdx/src/components/Counter.jsx +++ b/examples/with-mdx/src/components/Counter.jsx @@ -1,6 +1,6 @@ import { useState } from 'preact/hooks'; -export default function Counter({ children }) { +export function Counter({ children }) { const [count, setCount] = useState(0); const add = () => setCount((i) => i + 1); const subtract = () => setCount((i) => i - 1); diff --git a/examples/with-mdx/src/pages/index.mdx b/examples/with-mdx/src/pages/index.mdx index 13a929624bf8..a19abc27fb52 100644 --- a/examples/with-mdx/src/pages/index.mdx +++ b/examples/with-mdx/src/pages/index.mdx @@ -1,4 +1,4 @@ -import Counter from '../components/Counter.jsx'; +import * as c from '../components/Counter'; import Title from '../components/Title.astro'; export const components = { h1: Title }; @@ -14,7 +14,10 @@ Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}. Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}. -This is a **counter**! + +export const value = () => console.log(c); + +This is a **counter**! ## Syntax highlighting diff --git a/packages/astro/e2e/fixtures/namespaced-component/astro.config.mjs b/packages/astro/e2e/fixtures/namespaced-component/astro.config.mjs new file mode 100644 index 000000000000..08916b1fea78 --- /dev/null +++ b/packages/astro/e2e/fixtures/namespaced-component/astro.config.mjs @@ -0,0 +1,7 @@ +import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; + +// https://astro.build/config +export default defineConfig({ + integrations: [preact()], +}); diff --git a/packages/astro/e2e/fixtures/namespaced-component/package.json b/packages/astro/e2e/fixtures/namespaced-component/package.json new file mode 100644 index 000000000000..6968717cfc45 --- /dev/null +++ b/packages/astro/e2e/fixtures/namespaced-component/package.json @@ -0,0 +1,12 @@ +{ + "name": "@e2e/namespaced-component", + "version": "0.0.0", + "private": true, + "devDependencies": { + "@astrojs/preact": "workspace:*", + "astro": "workspace:*" + }, + "dependencies": { + "preact": "^10.7.3" + } +} diff --git a/packages/astro/e2e/fixtures/namespaced-component/src/components/PreactCounter.tsx b/packages/astro/e2e/fixtures/namespaced-component/src/components/PreactCounter.tsx new file mode 100644 index 000000000000..7f3dd435660c --- /dev/null +++ b/packages/astro/e2e/fixtures/namespaced-component/src/components/PreactCounter.tsx @@ -0,0 +1,19 @@ +import { useState } from 'preact/hooks'; + +/** a counter written in Preact */ +function PreactCounter({ children, id }) { + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( +
+ + 
{count}
+ +
{children}
+
+ ); +} + +export const components = { PreactCounter } diff --git a/packages/astro/e2e/fixtures/namespaced-component/src/pages/index.astro b/packages/astro/e2e/fixtures/namespaced-component/src/pages/index.astro new file mode 100644 index 000000000000..608b48458bd8 --- /dev/null +++ b/packages/astro/e2e/fixtures/namespaced-component/src/pages/index.astro @@ -0,0 +1,18 @@ +--- +import * as ns from '../components/PreactCounter.tsx'; +--- + + + + + + + + +
+ +

preact

+ +
+ + diff --git a/packages/astro/e2e/namespaced-component.test.js b/packages/astro/e2e/namespaced-component.test.js new file mode 100644 index 000000000000..8b9766ea70a7 --- /dev/null +++ b/packages/astro/e2e/namespaced-component.test.js @@ -0,0 +1,36 @@ +import { expect } from '@playwright/test'; +import { testFactory } from './test-utils.js'; + +const test = testFactory({ + root: './fixtures/namespaced-component/', +}); + +let devServer; + +test.beforeEach(async ({ astro }) => { + devServer = await astro.startDevServer(); +}); + +test.afterEach(async () => { + await devServer.stop(); +}); + +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(); + + const count = await counter.locator('pre'); + await expect(count, 'initial count is 0').toHaveText('0'); + + const children = await counter.locator('.children'); + await expect(children, 'children exist').toHaveText('preact'); + + const increment = await counter.locator('.increment'); + await increment.click(); + + await expect(count, 'count incremented by 1').toHaveText('1'); + }); +}); diff --git a/packages/astro/src/jsx/babel.ts b/packages/astro/src/jsx/babel.ts index 3482bbf372ab..a9f91f97318d 100644 --- a/packages/astro/src/jsx/babel.ts +++ b/packages/astro/src/jsx/babel.ts @@ -69,7 +69,7 @@ function addClientMetadata( } if (!existingAttributes.find((attr) => attr === 'client:component-export')) { if (meta.name === '*') { - meta.name = getTagName(node).split('.').at(1)!; + meta.name = getTagName(node).split('.').slice(1).join('.')!; } const componentExport = t.jsxAttribute( t.jsxNamespacedName(t.jsxIdentifier('client'), t.jsxIdentifier('component-export')), @@ -177,6 +177,76 @@ export default function astroJSX(): PluginObj { } state.set('imports', imports); }, + JSXMemberExpression(path, state) { + const node = path.node; + // Skip automatic `_components` in MDX files + if (state.filename?.endsWith('.mdx') && t.isJSXIdentifier(node.object) && node.object.name === '_components') { + return; + } + const parent = path.findParent((n) => t.isJSXElement(n))!; + const parentNode = parent.node as t.JSXElement; + const tagName = getTagName(parentNode); + if (!isComponent(tagName)) return; + if (!hasClientDirective(parentNode)) return; + const isClientOnly = isClientOnlyComponent(parentNode); + if (tagName === ClientOnlyPlaceholder) return; + + const imports = state.get('imports') ?? new Map(); + const namespace = tagName.split('.'); + for (const [source, specs] of imports) { + for (const { imported, local } of specs) { + const reference = path.referencesImport(source, imported); + if (reference) { + path.setData('import', { name: imported, path: source }); + break; + } + if (namespace.at(0) === local) { + path.setData('import', { name: imported, path: source }); + break; + } + } + } + + const meta = path.getData('import'); + if (meta) { + let resolvedPath: string; + if (meta.path.startsWith('.')) { + const fileURL = pathToFileURL(state.filename!); + resolvedPath = `/@fs${new URL(meta.path, fileURL).pathname}`; + if (resolvedPath.endsWith('.jsx')) { + resolvedPath = resolvedPath.slice(0, -4); + } + } else { + resolvedPath = meta.path; + } + + if (isClientOnly) { + (state.file.metadata as PluginMetadata).astro.clientOnlyComponents.push({ + exportName: meta.name, + specifier: tagName, + resolvedPath, + }); + + meta.resolvedPath = resolvedPath; + addClientOnlyMetadata(parentNode, meta); + } else { + (state.file.metadata as PluginMetadata).astro.hydratedComponents.push({ + exportName: '*', + specifier: tagName, + resolvedPath, + }); + + meta.resolvedPath = resolvedPath; + addClientMetadata(parentNode, meta); + } + } else { + throw new Error( + `Unable to match <${getTagName( + parentNode + )}> with client:* directive to an import statement!` + ); + } + }, JSXIdentifier(path, state) { const isAttr = path.findParent((n) => t.isJSXAttribute(n)); if (isAttr) return; diff --git a/packages/astro/src/runtime/server/astro-island.ts b/packages/astro/src/runtime/server/astro-island.ts index d2cf57d6ceae..dd25c05931b0 100644 --- a/packages/astro/src/runtime/server/astro-island.ts +++ b/packages/astro/src/runtime/server/astro-island.ts @@ -65,7 +65,15 @@ declare const Astro: { import(this.getAttribute('component-url')!), rendererUrl ? import(rendererUrl) : () => () => {}, ]); - this.Component = componentModule[this.getAttribute('component-export') || 'default']; + const componentExport = this.getAttribute('component-export') || 'default'; + if (!componentExport.includes('.')) { + this.Component = componentModule[componentExport]; + } else { + this.Component = componentModule; + for (const part of componentExport.split('.')) { + this.Component = this.Component[part] + } + } this.hydrator = hydrator; return this.hydrate; }, diff --git a/packages/integrations/mdx/test/fixtures/mdx-namespace/astro.config.mjs b/packages/integrations/mdx/test/fixtures/mdx-namespace/astro.config.mjs new file mode 100644 index 000000000000..4671227d3ea1 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-namespace/astro.config.mjs @@ -0,0 +1,6 @@ +import mdx from '@astrojs/mdx'; +import react from '@astrojs/react'; + +export default { + integrations: [react(), mdx()] +} diff --git a/packages/integrations/mdx/test/fixtures/mdx-namespace/package.json b/packages/integrations/mdx/test/fixtures/mdx-namespace/package.json new file mode 100644 index 000000000000..7917f372db1c --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-namespace/package.json @@ -0,0 +1,8 @@ +{ + "name": "@test/mdx-namespace", + "dependencies": { + "astro": "workspace:*", + "@astrojs/mdx": "workspace:*", + "@astrojs/react": "workspace:*" + } +} diff --git a/packages/integrations/mdx/test/fixtures/mdx-namespace/src/components/Component.jsx b/packages/integrations/mdx/test/fixtures/mdx-namespace/src/components/Component.jsx new file mode 100644 index 000000000000..19a3d9c193cd --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-namespace/src/components/Component.jsx @@ -0,0 +1,6 @@ +const Component = () => { + return

Hello world

; +}; +export const ns = { + Component +} diff --git a/packages/integrations/mdx/test/fixtures/mdx-namespace/src/pages/object.mdx b/packages/integrations/mdx/test/fixtures/mdx-namespace/src/pages/object.mdx new file mode 100644 index 000000000000..6f399013714b --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-namespace/src/pages/object.mdx @@ -0,0 +1,3 @@ +import * as mod from '../components/Component.jsx'; + + diff --git a/packages/integrations/mdx/test/fixtures/mdx-namespace/src/pages/star.mdx b/packages/integrations/mdx/test/fixtures/mdx-namespace/src/pages/star.mdx new file mode 100644 index 000000000000..b3af5422c2d4 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-namespace/src/pages/star.mdx @@ -0,0 +1,3 @@ +import { ns } from '../components/Component.jsx'; + + diff --git a/packages/integrations/mdx/test/mdx-namespace.test.js b/packages/integrations/mdx/test/mdx-namespace.test.js new file mode 100644 index 000000000000..ad958764003b --- /dev/null +++ b/packages/integrations/mdx/test/mdx-namespace.test.js @@ -0,0 +1,83 @@ +import { expect } from 'chai'; +import { parseHTML } from 'linkedom'; +import { loadFixture } from '../../../astro/test/test-utils.js'; + +describe('MDX Namespace', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: new URL('./fixtures/mdx-namespace/', import.meta.url), + }); + }); + + describe('build', () => { + before(async () => { + await fixture.build(); + }); + + it('works for object', async () => { + const html = await fixture.readFile('/object/index.html'); + const { document } = parseHTML(html); + + const island = document.querySelector('astro-island'); + const component = document.querySelector('#component'); + + expect(island).not.undefined; + expect(component.textContent).equal('Hello world') + }); + + it('works for star', async () => { + const html = await fixture.readFile('/star/index.html'); + const { document } = parseHTML(html); + + const island = document.querySelector('astro-island'); + const component = document.querySelector('#component'); + + expect(island).not.undefined; + expect(component.textContent).equal('Hello world') + }); + }); + + describe('dev', () => { + let devServer; + + before(async () => { + devServer = await fixture.startDevServer(); + }); + + after(async () => { + await devServer.stop(); + }); + + it('works for object', async () => { + const res = await fixture.fetch('/object'); + + expect(res.status).to.equal(200); + + const html = await res.text(); + const { document } = parseHTML(html); + + const island = document.querySelector('astro-island'); + const component = document.querySelector('#component'); + + expect(island).not.undefined; + expect(component.textContent).equal('Hello world') + }); + + it('works for star', async () => { + const res = await fixture.fetch('/star'); + + expect(res.status).to.equal(200); + + const html = await res.text(); + const { document } = parseHTML(html); + + const island = document.querySelector('astro-island'); + const component = document.querySelector('#component'); + + expect(island).not.undefined; + expect(component.textContent).equal('Hello world') + }); + }); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 327ec0393603..6f00aa449c43 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2288,6 +2288,16 @@ importers: reading-time: 1.5.0 unist-util-visit: 4.1.0 + packages/integrations/mdx/test/fixtures/mdx-namespace: + specifiers: + '@astrojs/mdx': workspace:* + '@astrojs/react': workspace:* + astro: workspace:* + dependencies: + '@astrojs/mdx': link:../../.. + '@astrojs/react': link:../../../../react + astro: link:../../../../../astro + packages/integrations/mdx/test/fixtures/mdx-page: specifiers: '@astrojs/mdx': workspace:* From 4c132c73ae465dab0d33b48f2c3be3c5b140cbe7 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Thu, 11 Aug 2022 13:38:25 -0500 Subject: [PATCH 2/7] chore: add changeset --- .changeset/late-tips-study.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/late-tips-study.md diff --git a/.changeset/late-tips-study.md b/.changeset/late-tips-study.md new file mode 100644 index 000000000000..ea829d4ae60b --- /dev/null +++ b/.changeset/late-tips-study.md @@ -0,0 +1,6 @@ +--- +'astro': patch +'@astrojs/mdx': patch +--- + +Properly handle hydration for namespaced components From a442171eaada2c85cf717e40b9fdc7148cf82e36 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Thu, 11 Aug 2022 14:23:35 -0500 Subject: [PATCH 3/7] chore: update lockfile --- pnpm-lock.yaml | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6f00aa449c43..099a0f1904e9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -712,6 +712,17 @@ importers: '@astrojs/vue': link:../../../../integrations/vue astro: link:../../.. + packages/astro/e2e/fixtures/namespaced-component: + specifiers: + '@astrojs/preact': workspace:* + astro: workspace:* + preact: ^10.7.3 + dependencies: + preact: 10.10.2 + devDependencies: + '@astrojs/preact': link:../../../../integrations/preact + astro: link:../../.. + packages/astro/e2e/fixtures/nested-in-preact: specifiers: '@astrojs/preact': workspace:* From 2b94a20a8cd64e2d92b8b7491a5b7af09d208625 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Thu, 11 Aug 2022 15:06:45 -0500 Subject: [PATCH 4/7] fix: throw error when componentExport is unresolved --- packages/astro/src/runtime/server/hydration.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts index f100c1d7c676..d58dc406ebe7 100644 --- a/packages/astro/src/runtime/server/hydration.ts +++ b/packages/astro/src/runtime/server/hydration.ts @@ -118,9 +118,9 @@ export async function generateHydrateScript( const { renderer, result, astroId, props, attrs } = scriptOptions; const { hydrate, componentUrl, componentExport } = metadata; - if (!componentExport) { + if (!componentExport.value) { throw new Error( - `Unable to resolve a componentExport for "${metadata.displayName}"! Please open an issue.` + `Unable to resolve a valid export for "${metadata.displayName}"! Please open an issue at https://astro.build/issues!` ); } From 4ef037a1d370646694d89df3cee4d35eb7334928 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Fri, 12 Aug 2022 13:06:13 -0500 Subject: [PATCH 5/7] chore: bump compiler --- packages/astro/package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/astro/package.json b/packages/astro/package.json index 7fc26ec1629e..5338fbe788ab 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -86,7 +86,7 @@ "test:e2e:match": "playwright test -g" }, "dependencies": { - "@astrojs/compiler": "^0.23.1", + "@astrojs/compiler": "^0.23.2", "@astrojs/language-server": "^0.20.0", "@astrojs/markdown-remark": "^1.0.0", "@astrojs/telemetry": "^1.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 099a0f1904e9..1f2fe5494ef1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -381,7 +381,7 @@ importers: packages/astro: specifiers: - '@astrojs/compiler': ^0.23.1 + '@astrojs/compiler': ^0.23.2 '@astrojs/language-server': ^0.20.0 '@astrojs/markdown-remark': ^1.0.0 '@astrojs/telemetry': ^1.0.0 @@ -464,7 +464,7 @@ importers: yargs-parser: ^21.0.1 zod: ^3.17.3 dependencies: - '@astrojs/compiler': 0.23.1 + '@astrojs/compiler': 0.23.2 '@astrojs/language-server': 0.20.3 '@astrojs/markdown-remark': link:../markdown/remark '@astrojs/telemetry': link:../telemetry @@ -3100,8 +3100,8 @@ packages: resolution: {integrity: sha512-8nvyxZTfCXLyRmYfTttpJT6EPhfBRg0/q4J/Jj3/pNPLzp+vs05ZdktsY6QxAREaOMAnNEtSqcrB4S5DsXOfRg==} dev: true - /@astrojs/compiler/0.23.1: - resolution: {integrity: sha512-KsoDrASGwTKZoWXbjy8SlIeoDv7y1OfBJtHVLuPuzhConA8e0SZpGzFqIuVRfG4bhisSTptZLDQZ7oxwgPv2jA==} + /@astrojs/compiler/0.23.2: + resolution: {integrity: sha512-WF1TFA1pQeg/qqIa04afh3KXA/QfkMGSN3lmQ+/UMFPCs6tV7IizehwP1raYAtI0jQx/Xh1gTOtqIzKiFvRBRQ==} dev: false /@astrojs/language-server/0.20.3: From 18cd04c030ea33b5d0848700e7e5c7de9f7abf1c Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Fri, 12 Aug 2022 14:07:39 -0500 Subject: [PATCH 6/7] chore: bump compiler --- packages/astro/package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/astro/package.json b/packages/astro/package.json index b88b03067834..60e6ff744379 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -86,7 +86,7 @@ "test:e2e:match": "playwright test -g" }, "dependencies": { - "@astrojs/compiler": "^0.23.2", + "@astrojs/compiler": "^0.23.3", "@astrojs/language-server": "^0.20.0", "@astrojs/markdown-remark": "^1.0.0", "@astrojs/telemetry": "^1.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26dea7470e51..b58cb0f81e09 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -381,7 +381,7 @@ importers: packages/astro: specifiers: - '@astrojs/compiler': ^0.23.2 + '@astrojs/compiler': ^0.23.3 '@astrojs/language-server': ^0.20.0 '@astrojs/markdown-remark': ^1.0.0 '@astrojs/telemetry': ^1.0.0 @@ -464,7 +464,7 @@ importers: yargs-parser: ^21.0.1 zod: ^3.17.3 dependencies: - '@astrojs/compiler': 0.23.2 + '@astrojs/compiler': 0.23.3 '@astrojs/language-server': 0.20.3 '@astrojs/markdown-remark': link:../markdown/remark '@astrojs/telemetry': link:../telemetry @@ -3100,8 +3100,8 @@ packages: resolution: {integrity: sha512-8nvyxZTfCXLyRmYfTttpJT6EPhfBRg0/q4J/Jj3/pNPLzp+vs05ZdktsY6QxAREaOMAnNEtSqcrB4S5DsXOfRg==} dev: true - /@astrojs/compiler/0.23.2: - resolution: {integrity: sha512-WF1TFA1pQeg/qqIa04afh3KXA/QfkMGSN3lmQ+/UMFPCs6tV7IizehwP1raYAtI0jQx/Xh1gTOtqIzKiFvRBRQ==} + /@astrojs/compiler/0.23.3: + resolution: {integrity: sha512-eBWo0d3DoRDeg2Di1/5YJtOXh5eGFSjJMp1wVoVfoITHR4egdUGgsrDHZTzj0a25M/S9W5S6SpXCyNWcqi8jOA==} dev: false /@astrojs/language-server/0.20.3: From dfa3519d4c1aba888dceec50f285677d659d1540 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Fri, 12 Aug 2022 14:45:31 -0500 Subject: [PATCH 7/7] chore: revert example changes --- examples/with-mdx/src/components/Counter.jsx | 2 +- examples/with-mdx/src/pages/index.mdx | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/examples/with-mdx/src/components/Counter.jsx b/examples/with-mdx/src/components/Counter.jsx index a23cd96c31cb..801eefe733cd 100644 --- a/examples/with-mdx/src/components/Counter.jsx +++ b/examples/with-mdx/src/components/Counter.jsx @@ -1,6 +1,6 @@ import { useState } from 'preact/hooks'; -export function Counter({ children }) { +export default function Counter({ children }) { const [count, setCount] = useState(0); const add = () => setCount((i) => i + 1); const subtract = () => setCount((i) => i - 1); diff --git a/examples/with-mdx/src/pages/index.mdx b/examples/with-mdx/src/pages/index.mdx index a19abc27fb52..13a929624bf8 100644 --- a/examples/with-mdx/src/pages/index.mdx +++ b/examples/with-mdx/src/pages/index.mdx @@ -1,4 +1,4 @@ -import * as c from '../components/Counter'; +import Counter from '../components/Counter.jsx'; import Title from '../components/Title.astro'; export const components = { h1: Title }; @@ -14,10 +14,7 @@ Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}. Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}. - -export const value = () => console.log(c); - -This is a **counter**! +This is a **counter**! ## Syntax highlighting