(rollup/webpack) - Add isReactComponent check in isComponent (#238)

* Add isReactComponent check in isComponent

* Add @prefresh/utils resolution, changeset

* Add @prefresh/utils in changelog, move resoultions to fixture

* Add @prefresh/utils in next fixture

* Update .changeset/famous-turkeys-juggle.md

Co-authored-by: Jovi De Croock <decroockjovi@gmail.com>

Co-authored-by: Jovi De Croock <decroockjovi@gmail.com>

.changeset/famous-turkeys-juggle.md

@@ -0,0 +1,7 @@
+---
+'@prefresh/nollup': minor
+'@prefresh/utils': minor
+'@prefresh/webpack': minor
+---
+
+Add prototype-check to `@prefresh/utils` isComponent check and utilize this in nollup & webpack

packages/nollup/src/runtime.js

@@ -7,10 +7,7 @@ const shouldBind = m => {
 	let isCitizen = false;
 	const moduleExports = getExports(m);
 
-	if (
-		typeof moduleExports === 'function' &&
-		isComponent(moduleExports.name || moduleExports.displayName)
-	) {
+	if (isComponent(moduleExports)) {
 		isCitizen = true;
 	}
 
@@ -25,10 +22,7 @@ const shouldBind = m => {
 			if (key === '__esModule') continue;
 
 			const exportValue = moduleExports[key];
-			if (
-				typeof exportValue === 'function' &&
-				isComponent(exportValue.name || exportValue.displayName)
-			) {
+			if (isComponent(exportValue)) {
 				isCitizen = isCitizen || true;
 			}
 		}

packages/utils/src/index.js

@@ -25,5 +25,18 @@ export const flush = () => {
 	}
 };
 
-export const isComponent = name =>
-	typeof name === 'string' && name[0] && name[0] == name[0].toUpperCase();
+export const isComponent = exportValue => {
+	const name = exportValue.name || exportValue.displayName;
+	if (typeof exportValue === 'function') {
+		if (
+			exportValue.prototype != null &&
+			exportValue.prototype.isReactComponent
+		) {
+			return true;
+		}
+		return (
+			typeof name === 'string' && name[0] && name[0] == name[0].toUpperCase()
+		);
+	}
+	return false;
+};

packages/webpack/src/utils/prefresh.js

@@ -7,10 +7,7 @@ const shouldBind = m => {
 	let isCitizen = false;
 	const moduleExports = getExports(m);
 
-	if (
-		typeof moduleExports === 'function' &&
-		isComponent(moduleExports.name || moduleExports.displayName)
-	) {
+	if (isComponent(moduleExports)) {
 		isCitizen = true;
 	}
 
@@ -25,10 +22,7 @@ const shouldBind = m => {
 			if (key === '__esModule') continue;
 
 			const exportValue = moduleExports[key];
-			if (
-				typeof exportValue === 'function' &&
-				isComponent(exportValue.name || exportValue.displayName)
-			) {
+			if (isComponent(exportValue)) {
 				isCitizen = isCitizen || true;
 			}
 		}

test/fixture/next/package.json

@@ -1,22 +1,23 @@
 {
-  "scripts": {
-    "dev": "next"
-  },
-  "devDependencies": {
-    "@prefresh/next": "file:../../packages/next",
-    "@prefresh/babel-plugin": "file:../../packages/babel"
-  },
-  "resolutions": {
-    "@prefresh/webpack": "file:../../packages/webpack",
-    "@prefresh/next": "file:../../packages/next",
-    "@prefresh/babel-plugin": "file:../../packages/babel"
-  },
-  "dependencies": {
-    "next": "^10.0.0",
-    "preact": "^10.5.7",
-    "preact-render-to-string": "^5.1.12",
-    "react": "github:preact-compat/react#1.0.0",
-    "react-dom": "github:preact-compat/react-dom#1.0.0",
-    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.0.1"
-  }
+	"scripts": {
+		"dev": "next"
+	},
+	"devDependencies": {
+		"@prefresh/next": "file:../../packages/next",
+		"@prefresh/babel-plugin": "file:../../packages/babel"
+	},
+	"resolutions": {
+		"@prefresh/webpack": "file:../../packages/webpack",
+		"@prefresh/next": "file:../../packages/next",
+		"@prefresh/babel-plugin": "file:../../packages/babel",
+		"@prefresh/utils": "file:../../packages/utils"
+	},
+	"dependencies": {
+		"next": "^10.0.0",
+		"preact": "^10.5.7",
+		"preact-render-to-string": "^5.1.12",
+		"react": "github:preact-compat/react#1.0.0",
+		"react-dom": "github:preact-compat/react-dom#1.0.0",
+		"react-ssr-prepass": "npm:preact-ssr-prepass@^1.0.1"
+	}
 }

test/fixture/nollup/package.json

@@ -1,23 +1,26 @@
 {
-  "scripts": {
-    "clean": "shx rm -rf dist",
-    "start": "cross-env NODE_ENV=development nollup -c --hot --content-base public",
-    "build": "npm run clean && cross-env NODE_ENV=production rollup -c"
-  },
-  "dependencies": {
-    "preact": "^10.5.7"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@prefresh/babel-plugin": "file:../../packages/babel",
-    "@prefresh/nollup": "file:../../packages/nollup",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-node-resolve": "^8.0.1",
-    "babel-preset-preact": "^2.0.0",
-    "cross-env": "^7.0.2",
-    "nollup": "^0.14.2",
-    "rollup": "^2.34.0",
-    "rollup-plugin-terser": "^6.1.0",
-    "shx": "^0.3.2"
-  }
+	"scripts": {
+		"clean": "shx rm -rf dist",
+		"start": "cross-env NODE_ENV=development nollup -c --hot --content-base public",
+		"build": "npm run clean && cross-env NODE_ENV=production rollup -c"
+	},
+	"dependencies": {
+		"preact": "^10.5.7"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.10.2",
+		"@prefresh/babel-plugin": "file:../../packages/babel",
+		"@prefresh/nollup": "file:../../packages/nollup",
+		"@rollup/plugin-babel": "^5.2.2",
+		"@rollup/plugin-node-resolve": "^8.0.1",
+		"babel-preset-preact": "^2.0.0",
+		"cross-env": "^7.0.2",
+		"nollup": "^0.14.2",
+		"rollup": "^2.34.0",
+		"rollup-plugin-terser": "^6.1.0",
+		"shx": "^0.3.2"
+	},
+	"resolutions": {
+		"@prefresh/utils": "file:../../packages/utils"
+	}
 }

test/fixture/webpack/package.json

@@ -1,20 +1,23 @@
 {
-  "scripts": {
-    "dev": "webpack serve"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-transform-react-jsx": "^7.12.7",
-    "@babel/preset-env": "^7.12.7",
-    "@prefresh/babel-plugin": "file:../../packages/babel",
-    "@prefresh/webpack": "file:../../packages/webpack",
-    "babel-loader": "^8.2.2",
-    "html-webpack-plugin": "^4.5.0",
-    "webpack": "^5.10.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0"
-  },
-  "dependencies": {
-    "preact": "^10.4.1"
-  }
+	"scripts": {
+		"dev": "webpack serve"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.12.9",
+		"@babel/plugin-transform-react-jsx": "^7.12.7",
+		"@babel/preset-env": "^7.12.7",
+		"@prefresh/babel-plugin": "file:../../packages/babel",
+		"@prefresh/webpack": "file:../../packages/webpack",
+		"babel-loader": "^8.2.2",
+		"html-webpack-plugin": "^4.5.0",
+		"webpack": "^5.10.0",
+		"webpack-cli": "^4.2.0",
+		"webpack-dev-server": "^3.11.0"
+	},
+	"dependencies": {
+		"preact": "^10.4.1"
+	},
+	"resolutions": {
+		"@prefresh/utils": "file:../../packages/utils"
+	}
 }