-
Notifications
You must be signed in to change notification settings - Fork 169
/
import.ts
48 lines (41 loc) · 1.57 KB
/
import.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React, { ComponentType, ReactElement, useEffect, useState } from 'https://esm.sh/react'
import util, { reModuleExt } from './util.ts'
interface ImportProps {
from: string
name?: string // default is 'default'
props?: Record<string, any>
fallback?: ReactElement
}
export default function Import(props: ImportProps) {
const { __importer, __sourceFile } = (props as any)
const [error, setError] = useState<string | null>(null)
const [mod, setMod] = useState<{ Component: ComponentType | null }>({ Component: null })
useEffect(() => {
if (reModuleExt.test(__sourceFile)) {
const p = util.splitPath(__importer)
p.pop()
import(util.cleanPath('/_aleph/' + p.join('/') + '/' + props.from))
.then(mod => {
const Component = mod[props.name || 'default']
if (util.isLikelyReactComponent(Component)) {
setMod({ Component })
} else {
setError(`component${props.name ? ` '${props.name}'` : ''} not found`)
}
})
.catch((err: Error) => {
setError(err.message)
})
}
}, [__importer, __sourceFile])
if (error) {
return React.createElement('div', { style: { color: 'red' } }, error)
}
if (mod.Component) {
return React.createElement(mod.Component, props.props)
}
if (reModuleExt.test(__sourceFile) && props.fallback) {
return props.fallback
}
return null
}