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

Fix: Hyphens breaking Markdoc tags (#7599)

Browse source 
* fix: handle hyphens in tag names

* test: add hyphen in test suite

* chore: changeset
This commit is contained in:
Ben Holmes 2023-07-07 16:50:06 -04:00 committed by GitHub
parent 6fd9f4a160
commit 8df6a423c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/witty-pandas-behave.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/markdoc': patch
---
Fix hyphens in Markdoc tag names causing build failures

13
packages/integrations/markdoc/src/content-entry-type.ts
View file

@ -225,8 +225,8 @@ function getStringifiedImports(
let stringifiedComponentImports = ''; let stringifiedComponentImports = '';
for (const [key, config] of Object.entries(componentConfigMap)) { for (const [key, config] of Object.entries(componentConfigMap)) {
const importName = config.namedExport const importName = config.namedExport
? `{ ${config.namedExport} as ${componentNamePrefix + key} }` ? `{ ${config.namedExport} as ${componentNamePrefix + toImportName(key)} }`
: componentNamePrefix + key; : componentNamePrefix + toImportName(key);
const resolvedPath = const resolvedPath =
config.type === 'local' ? new URL(config.path, root).pathname : config.path; config.type === 'local' ? new URL(config.path, root).pathname : config.path;
@ -235,6 +235,11 @@ function getStringifiedImports(
return stringifiedComponentImports; 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. * Get a stringified map from tag / node name to component import name.
* This uses the same `componentNamePrefix` used by `getStringifiedImports()`. * This uses the same `componentNamePrefix` used by `getStringifiedImports()`.
@ -247,7 +252,9 @@ function getStringifiedMap(
) { ) {
let stringifiedComponentMap = '{'; let stringifiedComponentMap = '{';
for (const key in componentConfigMap) { for (const key in componentConfigMap) {
stringifiedComponentMap += `${key}: ${componentNamePrefix + key},\n`; stringifiedComponentMap += `${JSON.stringify(key)}: ${
componentNamePrefix + toImportName(key)
},\n`;
} }
stringifiedComponentMap += '}'; stringifiedComponentMap += '}';
return stringifiedComponentMap; return stringifiedComponentMap;

2
packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts vendored
View file

@ -11,7 +11,7 @@ export default defineMarkdocConfig({
}, },
}, },
tags: { tags: {
mq: { 'marquee-element': {
render: component('./src/components/CustomMarquee.astro'), render: component('./src/components/CustomMarquee.astro'),
attributes: { attributes: {
direction: { direction: {

4
packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc vendored
View file

@ -6,9 +6,9 @@ title: Post with components
This uses a custom marquee component with a shortcode: This uses a custom marquee component with a shortcode:
{% mq direction="right" %} {% marquee-element direction="right" %}
I'm a marquee too! I'm a marquee too!
{% /mq %} {% /marquee-element %}
And a code component for code blocks: And a code component for code blocks: