diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2023-07-07 16:50:06 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-07-07 16:50:06 -0400 |
| commit | 8df6a423c5088a68cc409b5415b09aff0c10a0f1 (patch) | |
| tree | 2e2e2a8d5ab59538eb9432f237e6e2bcdc6864ed /packages/integrations | |
| parent | 6fd9f4a1601424f054985611a716123c272429c3 (diff) | |
| download | astro-8df6a423c5088a68cc409b5415b09aff0c10a0f1.tar.gz astro-8df6a423c5088a68cc409b5415b09aff0c10a0f1.tar.zst astro-8df6a423c5088a68cc409b5415b09aff0c10a0f1.zip | |
Fix: Hyphens breaking Markdoc tags (#7599)
* fix: handle hyphens in tag names
* test: add hyphen in test suite
* chore: changeset
Diffstat (limited to 'packages/integrations')
3 files changed, 13 insertions, 6 deletions
diff --git a/packages/integrations/markdoc/src/content-entry-type.ts b/packages/integrations/markdoc/src/content-entry-type.ts index 2bae5402c..348c8a882 100644 --- a/packages/integrations/markdoc/src/content-entry-type.ts +++ b/packages/integrations/markdoc/src/content-entry-type.ts @@ -225,8 +225,8 @@ function getStringifiedImports( let stringifiedComponentImports = ''; for (const [key, config] of Object.entries(componentConfigMap)) { const importName = config.namedExport - ? `{ ${config.namedExport} as ${componentNamePrefix + key} }` - : componentNamePrefix + key; + ? `{ ${config.namedExport} as ${componentNamePrefix + toImportName(key)} }` + : componentNamePrefix + toImportName(key); const resolvedPath = config.type === 'local' ? new URL(config.path, root).pathname : config.path; @@ -235,6 +235,11 @@ function getStringifiedImports( return stringifiedComponentImports; } +function toImportName(unsafeName: string) { + // TODO: more checks that name is a safe JS variable name + return unsafeName.replace('-', '_'); +} + /** * Get a stringified map from tag / node name to component import name. * This uses the same `componentNamePrefix` used by `getStringifiedImports()`. @@ -247,7 +252,9 @@ function getStringifiedMap( ) { let stringifiedComponentMap = '{'; for (const key in componentConfigMap) { - stringifiedComponentMap += `${key}: ${componentNamePrefix + key},\n`; + stringifiedComponentMap += `${JSON.stringify(key)}: ${ + componentNamePrefix + toImportName(key) + },\n`; } stringifiedComponentMap += '}'; return stringifiedComponentMap; diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts index b7845d182..ffb264ed8 100644 --- a/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts @@ -11,7 +11,7 @@ export default defineMarkdocConfig({ }, }, tags: { - mq: { + 'marquee-element': { render: component('./src/components/CustomMarquee.astro'), attributes: { direction: { diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc index 2c9bae972..61f404a97 100644 --- a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc @@ -6,9 +6,9 @@ title: Post with components This uses a custom marquee component with a shortcode: -{% mq direction="right" %} +{% marquee-element direction="right" %} I'm a marquee too! -{% /mq %} +{% /marquee-element %} And a code component for code blocks: |