Fix: Hyphens breaking Markdoc tags (#7599)

* fix: handle hyphens in tag names

* test: add hyphen in test suite

* chore: changeset

1 files changed, 10 insertions, 3 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;