diff options
Diffstat (limited to 'packages')
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: |