Fix client code as well

Author: JoviDeCroock

src/lib/chunked.js

@@ -31,14 +31,14 @@ export async function renderToChunks(vnode, { context, onWrite, abortSignal }) {
 		// Inserting the deferred <div hidden> wrapper after </html> is invalid HTML
 		// and causes browsers to reject the content. Instead, we inject the deferred
 		// content before the closing tags, then emit them last.
-		const docSuffix = getDocumentClosingTags(shell);
-		onWrite(docSuffix ? shell.slice(0, -docSuffix.length) : shell);
+		const docSuffixIndex = getDocumentClosingTagsIndex(shell);
+		onWrite(docSuffixIndex !== -1 ? shell.slice(0, docSuffixIndex) : shell);
 		onWrite('<div hidden>');
 		onWrite(createInitScript(len));
 		// We should keep checking all promises
 		await forkPromises(renderer);
 		onWrite('</div>');
-		if (docSuffix) onWrite(docSuffix);
+		if (docSuffixIndex !== -1) onWrite(shell.slice(docSuffixIndex));
 	} else {
 		onWrite(shell);
 	}
@@ -48,11 +48,10 @@ export async function renderToChunks(vnode, { context, onWrite, abortSignal }) {
  * If the shell ends with </body></html> (full document rendering), return that
  * suffix so it can be emitted *after* the deferred content, keeping the HTML valid.
  * @param {string} html
- * @returns {string | null}
+ * @returns {number}
  */
-function getDocumentClosingTags(html) {
-	const match = html.match(/(<\/body>)?\s*<\/html>\s*/i);
-	return match ? match[0] : null;
+function getDocumentClosingTagsIndex(html) {
+	return html.indexOf('</html>');
 }
 
 async function forkPromises(renderer) {

src/lib/client.js

@@ -19,7 +19,7 @@
 // 				else if (n.data == '/preact-island:' + i) e = n;
 // 				if (s && e) break;
 // 			}
-// 			if (s && e) {
+// 			if (s && e && s.parentNode !== document) {
 // 				requestAnimationFrame(() => {
 // 					var p = e.previousSibling;
 // 					while (p != s) {
@@ -46,7 +46,7 @@
 // }
 
 // To modify the INIT_SCRIPT, uncomment the above code, modify it, and paste it into https://try.terser.org/.
-const INIT_SCRIPT = `class e extends HTMLElement{connectedCallback(){var e=this;if(!e.isConnected)return;let t=this.getAttribute("data-target");if(t){for(var r,a,i=document.createNodeIterator(document,128);i.nextNode();){let e=i.referenceNode;if(e.data=="preact-island:"+t?r=e:e.data=="/preact-island:"+t&&(a=e),r&&a)break}r&&a&&requestAnimationFrame((()=>{for(var t=a.previousSibling;t!=r&&t&&t!=r;)a.parentNode.removeChild(t),t=a.previousSibling;for(i=r;e.firstChild;)r=e.firstChild,e.removeChild(r),i.after(r),i=r;e.parentNode.removeChild(e)}))}}}customElements.define("preact-island",e);`;
+const INIT_SCRIPT = `class e extends HTMLElement{connectedCallback(){var e=this;if(!e.isConnected)return;let t=this.getAttribute("data-target");if(t){for(var r,a,i=document.createNodeIterator(document,128);i.nextNode();){let e=i.referenceNode;if(e.data=="preact-island:"+t?r=e:e.data=="/preact-island:"+t&&(a=e),r&&a)break}r&&a&&r.parentNode!==document&&requestAnimationFrame((()=>{for(var t=a.previousSibling;t!=r&&t&&t!=r;)a.parentNode.removeChild(t),t=a.previousSibling;for(i=r;e.firstChild;)r=e.firstChild,e.removeChild(r),i.after(r),i=r;e.parentNode.removeChild(e)}))}}}customElements.define("preact-island",e);`;
 
 export function createInitScript() {
 	return `<script>(function(){${INIT_SCRIPT}}())</script>`;