lazy method should be added

[kunjee17]

Solidjs supports something called lazy function for lazy loading. Can we have that here or is it even possible ?

import { lazy } from "solid-js"; // <- THIS ONE
import { Routes, Route } from "@solidjs/router"
const Users = lazy(() => import("./pages/Users")); // <- Is it possible to have import like this in fable. It is file import afaik
const Home = lazy(() => import("./pages/Home"));

export default function App() {
  return <>
    <h1>My Site with Lots of Pages</h1>
    <Routes>
      <Route path="/users" component={Users} />
      <Route path="/" component={Home} />
      <Route path="/about" element={<div>This site was made with Solid</div>} />
    </Routes>
  </>
}

[alfonsogarciacaro]

I had to add some magic to Fable to make it work, but it should be fine now with latest Fable 4 version. I added lazy in two flavors:

• Solid.lazy (not it must be quoted as lazy is an F# keyword): direct binding
• Solid.lazyImport: you can pass a reference and Fable will automatically detect where that reference is, and can also be used with non-default exports.

Example: https://github.com/fable-compiler/Fable.Solid/blob/c8d7fc9779a1b4b0b43f41aa46df5885eac3b1c0/src/App/App.fs#L9-L14