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 = '';
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;

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

@ -11,7 +11,7 @@ export default defineMarkdocConfig({
},
},
tags: {
mq: {
'marquee-element': {
render: component('./src/components/CustomMarquee.astro'),
attributes: {
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:
{% mq direction="right" %}
{% marquee-element direction="right" %}
I'm a marquee too!
{% /mq %}
{% /marquee-element %}
And a code component for code blocks: