From 86b4a54ab83cb07dcf1e550812f6beb290376469 Mon Sep 17 00:00:00 2001
From: jdecroock <decroockjovi@gmail.com>
Date: Mon, 15 Jul 2024 11:09:34 +0200
Subject: [PATCH] use shorter notation

---
 src/index.js               | 12 +++++++-----
 test/compat/async.test.jsx | 23 +++++++++++++----------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/index.js b/src/index.js
index d911576..015c99b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,8 +23,11 @@ import {
 } from './lib/constants.js';
 
 const EMPTY_ARR = [];
+const EMPTY_OBJ = {};
 const isArray = Array.isArray;
 const assign = Object.assign;
+const BEGIN_SUSPENSE_DENOMINATOR = '<!--$s-->';
+const END_SUSPENSE_DENOMINATOR = '<!--/$s-->';
 
 // Global state for the current render pass
 let beforeDiff, afterDiff, renderHook, ummountHook;
@@ -149,10 +152,6 @@ function markAsDirty() {
 	this.__d = true;
 }
 
-const EMPTY_OBJ = {};
-const BEGIN_SUSPENSE_DENOMINATOR = '<!-- $s -->';
-const END_SUSPENSE_DENOMINATOR = '<!-- /$s -->';
-
 /**
  * @param {VNode} vnode
  * @param {Record<string, unknown>} context
@@ -373,7 +372,10 @@ function _renderToString(
 					try {
 						rendered = type.call(component, props, cctx);
 					} catch (e) {
-						if (asyncMode) vnode._suspended = true;
+						if (asyncMode) {
+							console.log('marking', vnode.type);
+							vnode._suspended = true;
+						}
 						throw e;
 					}
 				}
diff --git a/test/compat/async.test.jsx b/test/compat/async.test.jsx
index 1063138..24c05b8 100644
--- a/test/compat/async.test.jsx
+++ b/test/compat/async.test.jsx
@@ -17,7 +17,7 @@ describe('Async renderToString', () => {
 			</Suspense>
 		);
 
-		const expected = `<!-- $s --><div class="foo">bar</div><!-- /$s -->`;
+		const expected = `<!--$s--><div class="foo">bar</div><!--/$s-->`;
 
 		suspended.resolve();
 
@@ -40,7 +40,7 @@ describe('Async renderToString', () => {
 			</Suspense>
 		);
 
-		const expected = `<!-- $s --><!-- /$s --><div class="foo">bar</div>`;
+		const expected = `<!--$s--><!--/$s--><div class="foo">bar</div>`;
 
 		suspended.resolve();
 
@@ -73,7 +73,7 @@ describe('Async renderToString', () => {
 			</ul>
 		);
 
-		const expected = `<ul><!-- $s --><li>one</li><!-- $s --><li>two</li><!-- /$s --><li>three</li><!-- /$s --></ul>`;
+		const expected = `<ul><!--$s--><li>one</li><!--$s--><li>two</li><!--/$s--><li>three</li><!--/$s--></ul>`;
 
 		suspendedOne.resolve();
 		suspendedTwo.resolve();
@@ -109,7 +109,7 @@ describe('Async renderToString', () => {
 			</ul>
 		);
 
-		const expected = `<ul><!-- $s --><li>one</li><!-- $s --><li>two</li><!-- /$s --><li>three</li><!-- /$s --></ul>`;
+		const expected = `<ul><!--$s--><li>one</li><!--$s--><li>two</li><!--/$s--><li>three</li><!--/$s--></ul>`;
 
 		suspendedOne.resolve();
 		suspendedTwo.resolve();
@@ -152,7 +152,7 @@ describe('Async renderToString', () => {
 			</ul>
 		);
 
-		const expected = `<ul><!-- $s --><li>one</li><!-- $s --><li>two</li><!-- /$s --><!-- $s --><li>three</li><!-- /$s --><li>four</li><!-- /$s --></ul>`;
+		const expected = `<ul><!--$s--><li>one</li><!--$s--><li>two</li><!--/$s--><!--$s--><li>three</li><!--/$s--><li>four</li><!--/$s--></ul>`;
 
 		suspendedOne.resolve();
 		suspendedTwo.resolve();
@@ -164,7 +164,7 @@ describe('Async renderToString', () => {
 		expect(rendered).to.equal(expected);
 	});
 
-	it.only('should render JSX with deeply nested suspense boundaries', async () => {
+	it('should render JSX with deeply nested suspense boundaries', async () => {
 		const {
 			Suspender: SuspenderOne,
 			suspended: suspendedOne
@@ -199,7 +199,7 @@ describe('Async renderToString', () => {
 			</ul>
 		);
 
-		const expected = `<ul><!-- $s --><li>one</li><!-- $s --><li>two</li><!-- $s --><li>three</li><!-- /$s --><!-- /$s --><li>four</li><!-- /$s --></ul>`;
+		const expected = `<ul><!--$s--><li>one</li><!--$s--><li>two</li><!--$s--><li>three</li><!--/$s--><!--/$s--><li>four</li><!--/$s--></ul>`;
 
 		suspendedOne.resolve();
 		suspendedTwo.resolve();
@@ -243,7 +243,7 @@ describe('Async renderToString', () => {
 			</ul>
 		);
 
-		const expected = `<ul><!-- $s --><li>one</li><!-- /$s --><!-- $s --><li>two</li><!-- /$s --><!-- $s --><li>three</li><!-- /$s --></ul>`;
+		const expected = `<ul><!--$s--><li>one</li><!--/$s--><!--$s--><li>two</li><!--/$s--><!--$s--><li>three</li><!--/$s--></ul>`;
 
 		suspendedOne.resolve();
 		suspendedTwo.resolve();
@@ -303,7 +303,7 @@ describe('Async renderToString', () => {
 
 		suspended.resolve();
 		const rendered = await promise;
-		expect(rendered).to.equal('<!-- $s --><p>ok</p><!-- /$s -->');
+		expect(rendered).to.equal('<!--$s--><p>ok</p><!--/$s-->');
 	});
 
 	it('should work with an in-render suspension', async () => {
@@ -340,6 +340,9 @@ describe('Async renderToString', () => {
 			</Context.Provider>
 		);
 
-		expect(rendered).to.equal(`<div>2</div>`);
+		// Before we get to the actual DOM this suspends twice
+		expect(rendered).to.equal(
+			`<!--$s--><!--$s--><div>2</div><!--/$s--><!--/$s-->`
+		);
 	});
 });