fix: fix isLikelyReactComponent in bundle mode

improve StatusError component

Author: ije

framework/react/error.ts

@@ -1,4 +1,4 @@
-import { Component, createElement, Fragment } from 'https://esm.sh/react'
+import { Component, createElement, CSSProperties } from 'https://esm.sh/react'
 
 export class ErrorBoundary extends Component {
     state: { stack: string | null }
@@ -43,7 +43,7 @@ export function E404Page() {
     )
 }
 
-export function E400MissingDefaultExportAsComponent({ name }: { name: string }) {
+export function E400MissingComponent({ name }: { name: string }) {
     return createElement(
         StatusError,
         {
@@ -54,47 +54,64 @@ export function E400MissingDefaultExportAsComponent({ name }: { name: string })
     )
 }
 
-export function StatusError({ status, message, showRefreshButton }: { status: number, message: string, showRefreshButton?: boolean }) {
+const resetStyle: CSSProperties = {
+    padding: 0,
+    margin: 0,
+    lineHeight: 1.5,
+    fontSize: 15,
+    fontWeight: 400,
+    color: '#333',
+}
+
+export function StatusError({ status, message }: { status: number, message: string }) {
     return (
         createElement(
-            Fragment,
-            null,
+            'div',
+            {
+                style: {
+                    ...resetStyle,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexDirection: 'column',
+                    width: '100vm',
+                    height: '100vh',
+                }
+            },
             createElement(
                 'p',
-                null,
+                {
+                    style: {
+                        ...resetStyle,
+                        fontWeight: 500,
+                    }
+                },
                 createElement(
-                    'strong',
-                    null,
-                    createElement(
-                        'code',
-                        null,
-                        status
-                    )
+                    'code',
+                    {
+                        style: {
+                            ...resetStyle,
+                            fontWeight: 700,
+                        }
+                    },
+                    status
                 ),
                 createElement(
                     'small',
-                    null,
+                    {
+                        style: {
+                            ...resetStyle,
+                            fontSize: 4,
+                            color: '#999'
+                        }
+                    },
                     ' - '
                 ),
                 createElement(
                     'span',
                     null,
                     message
                 )
-            ),
-            showRefreshButton && createElement(
-                'p',
-                null,
-                createElement(
-                    'button',
-                    {
-                        onClick() {
-                            const { location } = window as any
-                            location.reload()
-                        }
-                    },
-                    'Refresh'
-                )
             )
         )
     )

framework/react/renderer.ts

@@ -6,7 +6,7 @@ import util from '../../shared/util.ts'
 import type { RouterURL } from '../../types.ts'
 import events from '../core/events.ts'
 import { RendererContext, RouterContext } from './context.ts'
-import { AsyncUseDenoError, E400MissingDefaultExportAsComponent, E404Page } from './error.ts'
+import { AsyncUseDenoError, E400MissingComponent, E404Page } from './error.ts'
 import { serverStyles } from './style.ts'
 import { createPageProps, isLikelyReactComponent } from './util.ts'
 
@@ -30,21 +30,15 @@ export async function renderPage(
         if (isLikelyReactComponent(App)) {
             el = createElement(App, pageProps)
         } else {
-            el = createElement(
-                E400MissingDefaultExportAsComponent,
-                { name: 'Custom App' }
-            )
+            el = createElement(E400MissingComponent, { name: 'Custom App' })
         }
     } else {
         if (pageProps.Page == null) {
             if (E404) {
                 if (isLikelyReactComponent(E404)) {
                     el = createElement(E404)
                 } else {
-                    el = createElement(
-                        E400MissingDefaultExportAsComponent,
-                        { name: 'Custom 404' }
-                    )
+                    el = createElement(E400MissingComponent, { name: 'Custom 404' })
                 }
             } else {
                 el = createElement(E404Page)

framework/react/root.ts

@@ -5,7 +5,7 @@ import type { RouterURL } from '../../types.ts'
 import events from '../core/events.ts'
 import { RouteModule, Routing } from '../core/routing.ts'
 import { RouterContext } from './context.ts'
-import { E400MissingDefaultExportAsComponent, E404Page, ErrorBoundary } from './error.ts'
+import { E400MissingComponent, E404Page, ErrorBoundary } from './error.ts'
 import { createPageProps, importModule, isLikelyReactComponent } from './util.ts'
 
 export default function AlephAppRoot({
@@ -25,7 +25,7 @@ export default function AlephAppRoot({
             if (isLikelyReactComponent(E404)) {
                 return { Component: E404 }
             }
-            return { Component: E400MissingDefaultExportAsComponent, props: { name: 'Custom 404 Page' } }
+            return { Component: E400MissingComponent, props: { name: 'Custom 404 Page' } }
         }
         return { Component: E404Page }
     })
@@ -35,7 +35,7 @@ export default function AlephAppRoot({
             if (isLikelyReactComponent(App)) {
                 return { Component: App }
             }
-            return { Component: E400MissingDefaultExportAsComponent, props: { name: 'Custom App' } }
+            return { Component: E400MissingComponent, props: { name: 'Custom App' } }
         }
         return { Component: null }
     })
@@ -99,7 +99,7 @@ export default function AlephAppRoot({
                     if (isLikelyReactComponent(Component)) {
                         setApp({ Component })
                     } else {
-                        setApp({ Component: E400MissingDefaultExportAsComponent, props: { name: 'Custom App' } })
+                        setApp({ Component: E400MissingComponent, props: { name: 'Custom App' } })
                     }
                     break
                 }

framework/react/util.ts

@@ -2,7 +2,7 @@ import type { ComponentType } from 'https://esm.sh/react'
 import { hashShort, reModuleExt } from '../../shared/constants.ts'
 import util from '../../shared/util.ts'
 import { RouteModule } from '../core/routing.ts'
-import { E400MissingDefaultExportAsComponent } from './error.ts'
+import { E400MissingComponent } from './error.ts'
 
 const symbolFor = typeof Symbol === 'function' && Symbol.for
 const REACT_FORWARD_REF_TYPE = symbolFor ? Symbol.for('react.forward_ref') : 0xead0
@@ -51,6 +51,11 @@ export function isLikelyReactComponent(type: any): Boolean {
                     return false
                 }
             }
+            const { __ALEPH } = window as any
+            if (__ALEPH) {
+                // in bundle mode, component name will be compressed
+                return true
+            }
             const name = type.name || type.displayName
             return typeof name === 'string' && /^[A-Z]/.test(name)
         case 'object':
@@ -96,7 +101,7 @@ function _createPagePropsSegment(seg: { url: string, Component?: ComponentType<a
         if (isLikelyReactComponent(seg.Component)) {
             pageProps.Page = seg.Component
         } else {
-            pageProps.Page = E400MissingDefaultExportAsComponent
+            pageProps.Page = E400MissingComponent
             pageProps.pageProps = { name: 'Page: ' + util.trimPrefix(seg.url, '/pages').replace(reModuleExt, '') }
         }
     }