Adjust streamed id from preact-island to $s

Author: JoviDeCroock

src/lib/chunked.js

@@ -128,7 +128,5 @@ function handleError(error, vnode, renderChild) {
 
 	const fallback = renderChild(vnode.props.fallback);
 
-	return found
-		? ''
-		: `<!--preact-island:${id}-->${fallback}<!--/preact-island:${id}-->`;
+	return found ? '' : `<!--$s:${id}-->${fallback}<!--/$s:${id}-->`;
 }

src/lib/client.js

@@ -15,8 +15,8 @@
 // 			while (c.nextNode()) {
 // 				let n = c.referenceNode;
 
-// 				if (n.data == 'preact-island:' + i) s = n;
-// 				else if (n.data == '/preact-island:' + i) e = n;
+// 				if (n.data == '$s:' + i) s = n;
+// 				else if (n.data == '/$s:' + i) e = n;
 // 				if (s && e) break;
 // 			}
 // 			if (s && e && s.parentNode !== document) {
@@ -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&&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);`;
+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=="$s:"+t?r=e:e.data=="/$s:"+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>`;

test/compat/render-chunked.test.jsx

@@ -34,7 +34,7 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:5-->loading...<!--/preact-island:5--></div>',
+			'<div><!--$s:5-->loading...<!--/$s:5--></div>',
 			'<div hidden>',
 			createInitScript(),
 			createSubtree('5', '<p>it works</p>'),
@@ -62,7 +62,7 @@ describe('renderToChunks', () => {
 		suspended.resolve();
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:10-->loading...<!--/preact-island:10--></div>',
+			'<div><!--$s:10-->loading...<!--/$s:10--></div>',
 			'<div hidden>',
 			createInitScript(1),
 			'</div>'
@@ -109,7 +109,7 @@ describe('renderToChunks', () => {
 		}
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:16-->loading...<!--/preact-island:16--></div>',
+			'<div><!--$s:16-->loading...<!--/$s:16--></div>',
 			'<div hidden>',
 			createInitScript(1),
 			createSubtree('16', '<p>it works</p>'),
@@ -142,7 +142,7 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).to.deep.equal([
-			'<div><p>id: P0-0</p><!--preact-island:24-->loading...<!--/preact-island:24--></div>',
+			'<div><p>id: P0-0</p><!--$s:24-->loading...<!--/$s:24--></div>',
 			'<div hidden>',
 			createInitScript(1),
 			createSubtree('24', '<p>id: P0-1</p>'),
@@ -182,7 +182,7 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).toEqual([
-			'<div><p>id: P0-0</p><!--preact-island:33-->loading...<!--/preact-island:33--><!--preact-island:36-->loading...<!--/preact-island:36--></div>',
+			'<div><p>id: P0-0</p><!--$s:33-->loading...<!--/$s:33--><!--$s:36-->loading...<!--/$s:36--></div>',
 			'<div hidden>',
 			createInitScript(1),
 			createSubtree('33', '<p>id: P0-1</p>'),
@@ -305,7 +305,7 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:70-->loading part 1...<!--/preact-island:70--></div>',
+			'<div><!--$s:70-->loading part 1...<!--/$s:70--></div>',
 			'<div hidden>',
 			createInitScript(1),
 			createSubtree('70', '<p>it works</p><p>it works</p>'),

test/compat/stream-node.test.jsx

@@ -66,7 +66,7 @@ describe('renderToPipeableStream', () => {
 		const result = await sink.promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:5-->loading...<!--/preact-island:5--></div>',
+			'<div><!--$s:5-->loading...<!--/$s:5--></div>',
 			'<div hidden>',
 			createInitScript(),
 			createSubtree('5', '<p>it works</p>'),

test/compat/stream.test.jsx

@@ -82,7 +82,7 @@ describe('renderToReadableStream', () => {
 		const result = await sink.promise;
 
 		expect(result).toEqual([
-			'<div><!--preact-island:5-->loading...<!--/preact-island:5--></div>',
+			'<div><!--$s:5-->loading...<!--/$s:5--></div>',
 			'<div hidden>',
 			createInitScript(),
 			createSubtree('5', '<p>it works</p>'),
@@ -106,7 +106,7 @@ describe('renderToReadableStream', () => {
 		const first = await reader.read();
 		expect(first.done).toBe(false);
 		expect(decoder.decode(first.value)).toBe(
-			'<div><!--preact-island:10-->loading...<!--/preact-island:10--></div>'
+			'<div><!--$s:10-->loading...<!--/$s:10--></div>'
 		);
 
 		await reader.cancel('client disconnected');