Automatic code splitting for nested routes

[thomkrupa]

Do you want to request a feature or report a bug?

Feature

What is the current behaviour?

Automatic code splitting works perfectly for top-level routes like src/components/blog/index.js but it doesn't work for nested routers, i.e. src/components/blog/first-post/index.js or something like src/components/blog/first-post.js. Code from those routers is bundled in the main bundle. I'm not sure if this is expected behavior.

What is the expected behaviour?

Automatic code splitting for every route, not just top-level index.js.

If this is a feature request, what is motivation or use case for changing the behaviour?

I think it's a common way to organize nested routes in subdirectories. At least in tools like Gatsby and Next.js.

Example:

src
├── components
├── routes
│   ├── about
│   │   ├── index.js
│   │   └── style.css
│   ├── blog
│   │   ├── hello-world-post
│   │   │   └── index.js
│   │   ├── another-amazing-post
│   │   │   └── index.js
│   │   └── index.js
│   ├── contact
│   │   ├── foo
│   │   │   ├── bar
│   │   │   │   └── index.js
│   │   │   └── index.js
│   │   └── index.js
│   ├── home
│   │   ├── index.js
│   │   └── style.css

[developit]

The main reason this is problematic is that we don't really know enough to assume that contact/foo/bar/index.js in your example is a Route. It could just be a component loaded by the foo/index.js route, which would mean we'd be code-splitting it even though they're always loaded together.

[AEnterprise]

maybe an opt in config setting? or a whitelist/blacklist we can set in preact.config.js for users who would like to make use of this?

[ForsakenHarmony]

We can probably add any index.js file in the routes folder and subfolders as a route

Not sure if you can take the location it gets imported from into account

But I'd be fine with accepting a pr for that

For now you can always import 'async!./routes/foo/bar/baz/index.js'