Fix astro add with third-party integrations (#4270)

* fix: nicer third-party integration names

* chore: add changeset

* fix: better handling for package names

* update changelog

Co-authored-by: Nate Moore <nate@astro.build>

.changeset/wise-cups-greet.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Make third-party integration names nicer when using `astro add`

packages/astro/src/core/add/index.ts

@@ -289,11 +289,30 @@ async function parseAstroConfig(configURL: URL): Promise<t.File> {
 	return result;
 }
 
+// Convert an arbitrary NPM package name into a JS identifier
+// Some examples:
+//  - @astrojs/image => image
+//  - @astrojs/markdown-component => markdownComponent
+//  - astro-cast => cast
+//  - markdown-astro => markdown
+//  - some-package => somePackage
+//  - example.com => exampleCom
+//  - under_score => underScore
+//  - 123numeric => numeric
+//  - @npm/thingy => npmThingy
+//  - @jane/foo.js => janeFoo
 const toIdent = (name: string) => {
-	if (name.includes('-')) {
+  const ident = name
-		return name.split('-')[0];
+    .trim()
-	}
+		// Remove astro or (astrojs) prefix and suffix
-	return name;
+    .replace(/[-_\.]?astro(?:js)?[-_\.]?/g, '')
+		// drop .js suffix
+    .replace(/\.js/, '')
+		// convert to camel case
+    .replace(/(?:[\.\-\_\/]+)([a-zA-Z])/g, (_, w) => w.toUpperCase())
+		// drop invalid first characters
+    .replace(/^[^a-zA-Z$_]+/, '');
+  return `${ident[0].toLowerCase()}${ident.slice(1)}`;
 };
 
 function createPrettyError(err: Error) {