solidjs-lazily
solidjs-lazily is a simple wrapper around SolidJS's lazy that supports named imports.
TL;DR
run this
npm install solidjs-lazily
# or
yarn add solidjs-lazilywrite this
import { lazily } from 'solidjs-lazily'
const { MyComponent } = lazily(() => import('./MyComponent'))instead of this
import { lazy } from 'solid-js'
const MyComponent = lazy(() => import('./MyComponent'))Motivation
Consider that component MyComponent is exported with export default MyComponent then per solidjs docs you could do:
import { lazy } from 'solid-js'
const MyComponent = lazy(() => import('./MyComponent'))But if the component is exported with named export export const MyComponent = ... then you have to do:
const MyComponent = lazy(() =>
import('./MyComponent').then((module) => ({ default: module.MyComponent }))
)With solidjs-lazily it becomes:
import { lazily } from 'solidjs-lazily'
const { MyComponent } = lazily(() => import('./MyComponent'))Full example
See: https://codesandbox.io/s/solidjs-lazily-example-qvv3y
import { createSignal, Suspense } from 'solid-js'
import { lazily } from 'solidjs-lazily'
const { MyComponent } = lazily(() => import('./MyComponent'))
const App = () => {
const [open, setOpen] = createSignal(false)
return (
<>
{open() ? (
<Suspense fallback={<>Loading...</>}>
<MyComponent />
</Suspense>
) : (
<button onClick={() => setOpen(true)}>Load</button>
)}
</>
)
}
