Solidjs-lazily - a simple wrapper around SolidJS's lazy that supports named imports

by React

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-lazily

write 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>
      )}
    </>
  )
}

Related

GitHub

View Github