feat: check is react component

.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 }}

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')

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',

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,

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(')
+)

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'