From b934ab5d860aa3adeec56a9c395f629ee7252ca4 Mon Sep 17 00:00:00 2001
From: hippotastic <6137925+hippotastic@users.noreply.github.com>
Date: Thu, 30 Jun 2022 14:10:56 +0200
Subject: [PATCH] Fix "Invalid hook call" warning (#3769)

* Fix "Invalid hook call" warning

* Fix eslint warnings

* Apply code review suggestions
---
 .changeset/lazy-countries-kick.md      |  5 ++
 packages/integrations/preact/server.js | 83 +++++++++++++++++++++++---
 2 files changed, 79 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/lazy-countries-kick.md

diff --git a/.changeset/lazy-countries-kick.md b/.changeset/lazy-countries-kick.md
new file mode 100644
index 000000000000..1a4d1a8c8c11
--- /dev/null
+++ b/.changeset/lazy-countries-kick.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/preact': patch
+---
+
+Fix "Invalid hook call" warning
diff --git a/packages/integrations/preact/server.js b/packages/integrations/preact/server.js
index 29ae8a3b0cd9..36f66b7b5ef4 100644
--- a/packages/integrations/preact/server.js
+++ b/packages/integrations/preact/server.js
@@ -4,6 +4,9 @@ import StaticHtml from './static-html.js';
 
 const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
 
+let originalConsoleError;
+let consoleFilterRefs = 0;
+
 function check(Component, props, children) {
 	if (typeof Component !== 'function') return false;
 
@@ -11,18 +14,24 @@ function check(Component, props, children) {
 		return BaseComponent.isPrototypeOf(Component);
 	}
 
+	useConsoleFilter();
+
 	try {
-		const { html } = renderToStaticMarkup(Component, props, children);
-		if (typeof html !== 'string') {
-			return false;
-		}
+		try {
+			const { html } = renderToStaticMarkup(Component, props, children);
+			if (typeof html !== 'string') {
+				return false;
+			}
 
-		// There are edge cases (SolidJS) where Preact *might* render a string,
-		// but components would be <undefined></undefined>
+			// There are edge cases (SolidJS) where Preact *might* render a string,
+			// but components would be <undefined></undefined>
 
-		return !/\<undefined\>/.test(html);
-	} catch (err) {
-		return false;
+			return !/\<undefined\>/.test(html);
+		} catch (err) {
+			return false;
+		}
+	} finally {
+		finishUsingConsoleFilter();
 	}
 }
 
@@ -40,6 +49,62 @@ function renderToStaticMarkup(Component, props, { default: children, ...slotted
 	return { html };
 }
 
+/**
+ * Reduces console noise by filtering known non-problematic errors.
+ * 
+ * Performs reference counting to allow parallel usage from async code.
+ * 
+ * To stop filtering, please ensure that there always is a matching call
+ * to `finishUsingConsoleFilter` afterwards.
+ */
+function useConsoleFilter() {
+	consoleFilterRefs++;
+
+	if (!originalConsoleError) {
+		// eslint-disable-next-line no-console
+		originalConsoleError = console.error;
+
+		try {
+			// eslint-disable-next-line no-console
+			console.error = filteredConsoleError;
+		} catch (error) {
+			// If we're unable to hook `console.error`, just accept it
+		}
+	}
+}
+
+/**
+ * Indicates that the filter installed by `useConsoleFilter`
+ * is no longer needed by the calling code.
+ */
+function finishUsingConsoleFilter() {
+	consoleFilterRefs--;
+
+	// Note: Instead of reverting `console.error` back to the original
+	// when the reference counter reaches 0, we leave our hook installed
+	// to prevent potential race conditions once `check` is made async
+}
+
+/**
+ * Hook/wrapper function for the global `console.error` function.
+ * 
+ * Ignores known non-problematic errors while any code is using the console filter.
+ * Otherwise, simply forwards all arguments to the original function.
+ */
+function filteredConsoleError(msg, ...rest) {
+	if (consoleFilterRefs > 0 && typeof msg === 'string') {
+		// In `check`, we attempt to render JSX components through Preact.
+		// When attempting this on a React component, React may output
+		// the following error, which we can safely filter out:
+		const isKnownReactHookError =
+			msg.includes('Warning: Invalid hook call.') &&
+			msg.includes('https://reactjs.org/link/invalid-hook-call');
+		if (isKnownReactHookError)
+			return;
+	}
+	originalConsoleError(msg, ...rest);
+}
+
 export default {
 	check,
 	renderToStaticMarkup,