From 90ea1bf8ea3ba4abf4acf129663d0cc864d52dc0 Mon Sep 17 00:00:00 2001
From: loeify <loeify@gmail.com>
Date: Sat, 25 May 2024 15:51:30 +0800
Subject: [PATCH] feat: check is react component

---
 .github/workflows/ci.yml           | 4 +++-
 cypress/integration/create.spec.js | 9 +++++++--
 public/index.html                  | 2 +-
 src/core/component/core.tsx        | 6 +++---
 src/core/helper.ts                 | 8 +++++++-
 test/components/create-j.tsx       | 2 ++
 6 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c3e0745..81faea3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -33,4 +33,6 @@ jobs:
       run: npm run lint && npm run ci
 
     - name: Upload coverage to Codecov
-      uses: codecov/codecov-action@v1
+      uses: codecov/codecov-action@v3
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/cypress/integration/create.spec.js b/cypress/integration/create.spec.js
index 99f6b94..d5f28c7 100644
--- a/cypress/integration/create.spec.js
+++ b/cypress/integration/create.spec.js
@@ -44,10 +44,15 @@ describe('create component', () => {
       .next()
       .should('not.exist')
 
-    cy.contains('[INVALID_COMPONENT]:module cannot be executed')
+    cy.contains('create-j.k')
       .should('exist')
       .next()
-      .should('not.exist')
+      .should('have.text', '[INVALID_COMPONENT]:not a valid React component')
+
+    cy.contains('create-j.l')
+      .should('exist')
+      .next()
+      .should('have.text', '[INVALID_COMPONENT]:not a valid React component')
 
     cy.contains('[INVALID_COMPONENT]:module not defined')
       .should('exist')
diff --git a/public/index.html b/public/index.html
index 53759e8..46be6dc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -94,7 +94,7 @@
       icon: 'appstore',
       component: 'create',
       path: '/create',
-      components: ['create-h', 'create-i', 'create-jj', 'no-defined', 'create-path-error', 'create-empty-content', 'create-j', 'create-j.j', 'create-j.k', 'create-j.no-exist', 'create-timeout', 'create-slient'],
+      components: ['create-h', 'create-i', 'create-jj', 'no-defined', 'create-path-error', 'create-empty-content', 'create-j', 'create-j.j', 'create-j.k', 'create-j.l', 'create-j.no-exist', 'create-timeout', 'create-slient'],
     },
     {
       label: 'RenderComponent',
diff --git a/src/core/component/core.tsx b/src/core/component/core.tsx
index 9d8322f..2bb0257 100644
--- a/src/core/component/core.tsx
+++ b/src/core/component/core.tsx
@@ -1,6 +1,6 @@
 import React, { Component, ComponentType } from 'react'
 import { I18n, OnMessage } from '@variousjs/various'
-import { onError } from '../helper'
+import { isReactComponent, onError } from '../helper'
 import { isComponentLoaded, getMountedComponents } from './helper'
 import {
   connect,
@@ -142,8 +142,8 @@ export default function (
           return
         }
 
-        if (typeof componentNode !== 'function') {
-          const errorMessage = 'module cannot be executed'
+        if (!isReactComponent(componentNode)) {
+          const errorMessage = 'not a valid React component'
           onError({
             name: nameWidthModule,
             type: ERROR_TYPE.INVALID_COMPONENT,
diff --git a/src/core/helper.ts b/src/core/helper.ts
index fcfba29..32235f5 100644
--- a/src/core/helper.ts
+++ b/src/core/helper.ts
@@ -1,7 +1,7 @@
 import { getStore } from './store'
 import connector from './connector'
 import { ERROR_TYPE, ENV_KEY, CONFIG_KEY } from '../config'
-import { ErrorType } from '../types'
+import { ErrorType, RequiredComponent } from '../types'
 
 export const getEnv = () => getStore(ENV_KEY)
 
@@ -43,3 +43,9 @@ export const onError = (args: ErrorType) => {
 
   consoleError(name, `[${prefix}] ${message}`)
 }
+
+export const isReactComponent = (component: RequiredComponent) => (
+  !!component.prototype?.isReactComponent) || (
+  typeof component === 'function'
+    && String(component).includes('createElement(')
+)
diff --git a/test/components/create-j.tsx b/test/components/create-j.tsx
index 6ff33a8..554d95a 100644
--- a/test/components/create-j.tsx
+++ b/test/components/create-j.tsx
@@ -7,3 +7,5 @@ export default () => (
 export const j = () => (<div>j</div>)
 
 export const k = 'k'
+
+export const l = () => 'l'