Use named import/exports where possible

[aminya]

Fixes #22

[amoutonbrady]

Yes... The other issue is that HMR might break if we don't have default exported components. I think the latest version might have fixed the issue but I need to confirm that.

[JLarky]

Unfortunately, the lazy function expects a Promise<{ default: Component }>. So, using named import with lazy is kind of clunky. We should probably fix that and change the remaining components in another pull request. In my opinion, it should also accept Promise<Component>

I wonder if it's possible to create something like https://www.npmjs.com/package/react-lazily but for solid :) it should probably work without any changes :)

I just tested and react-lazily could be easily ported to solidjs :) see this example: https://codesandbox.io/s/solidjs-using-react-lazily-244e3?file=/src/App.js:282-831

// before
const Nav = lazy(() => import("./components/Nav"));
// after
const { Nav } = lazily(() => import("./components/Nav"));

UPDATE:

I published solidjs-lazily to npm, so if you want to try just do:

npm install solidjs-lazily
# or
yarn add solidjs-lazily

import { lazily } from 'solidjs-lazily'
const { MyComponent } = lazily(() => import('./MyComponent'))

[amoutonbrady]

Oh that's really cool! I'd have to see how well it plays with HMR first :)

[JLarky]

Oh that's really cool! I'd have to see how well it plays with HMR first :)

I don't imagine there could be any difference :)

[amoutonbrady]

I think this issue has run its course. The solution proposed to make named exports work are quite cool but I don't think they should belong in a starter template.

We should probably find a way to expose this solution though :)