Consolidate hydration scripts into just one (#3571)

* Remove redundant hydration scripts

* Prebuild the island JS

* Fix build

* Updates to tests

* Update more references

* Custom element test now has two classic scripts

* Account for non-default exports

* Restructure hydration directives

* Move nested logic into the island component

* Remove try/catch

2 files changed, 6 insertions, 6 deletions

diff --git a/packages/markdown/remark/src/rehype-islands.ts b/packages/markdown/remark/src/rehype-islands.ts
index bbd584792..a8b78848d 100644
--- a/packages/markdown/remark/src/rehype-islands.ts
+++ b/packages/markdown/remark/src/rehype-islands.ts
@@ -9,14 +9,14 @@ const visit = _visit as (
 ) => any;
 
 // This fixes some confusing bugs coming from somewhere inside of our Markdown pipeline.
-// `unist`/`remark`/`rehype` (not sure) often generate malformed HTML inside of <astro-root>
+// `unist`/`remark`/`rehype` (not sure) often generate malformed HTML inside of <astro-island>
 // For hydration to work properly, frameworks need the DOM to be the exact same on server/client.
 // This reverts some "helpful corrections" that are applied to our perfectly valid HTML!
 export default function rehypeIslands(): any {
 	return function (node: any): any {
 		return visit(node, 'element', (el) => {
-			// Bugs only happen inside of <astro-root> islands
-			if (el.tagName == 'astro-root') {
+			// Bugs only happen inside of <astro-island> islands
+			if (el.tagName == 'astro-island') {
 				visit(el, 'text', (child, index, parent) => {
 					if (child.type === 'text') {
 						// Sometimes comments can be trapped as text, which causes them to be escaped
diff --git a/packages/markdown/remark/src/remark-unwrap.ts b/packages/markdown/remark/src/remark-unwrap.ts
index e54f01397..399bd6cd6 100644
--- a/packages/markdown/remark/src/remark-unwrap.ts
+++ b/packages/markdown/remark/src/remark-unwrap.ts
@@ -8,7 +8,7 @@ const visit = _visit as (
 	callback?: (node: any, index: number, parent: any) => any
 ) => any;
 
-// Remove the wrapping paragraph for <astro-root> islands
+// Remove the wrapping paragraph for <astro-island> islands
 export default function remarkUnwrap() {
 	const astroRootNodes = new Set();
 	let insideAstroRoot = false;
@@ -19,10 +19,10 @@ export default function remarkUnwrap() {
 		astroRootNodes.clear();
 
 		visit(tree, 'html', (node) => {
-			if (node.value.indexOf('<astro-root') > -1 && !insideAstroRoot) {
+			if (node.value.indexOf('<astro-island') > -1 && !insideAstroRoot) {
 				insideAstroRoot = true;
 			}
-			if (node.value.indexOf('</astro-root') > -1 && insideAstroRoot) {
+			if (node.value.indexOf('</astro-island') > -1 && insideAstroRoot) {
 				insideAstroRoot = false;
 			}
 			astroRootNodes.add(node);