Conversation
| @@ -0,0 +1,110 @@ | |||
| import { Fragment, JSX, h } from 'preact' | |||
| import { Suspense } from 'preact/compat' | |||
| import { LocationProvider, Router, Route, lazy } from 'preact-iso' | |||
There was a problem hiding this comment.
You can use ErrorBoundary from preact-iso rather than forcing every one into compat mode
| // Create a component that handles pending and error states | ||
| const LazyComponent = (props: any) => { | ||
| console.log('LAZY - Rendering component for:', key) | ||
| const Page = () => (mod?.Pending ? h(Suspense, { fallback: h(mod.Pending, {}) }, h(Default, props)) : h(Default, props)) |
There was a problem hiding this comment.
I don't think you want to be wrapping pages w/ <Suspense> or <ErrorBoundary>; components within a page, sure, but you should probably let iso's <Router> handle suspending children directly.
Off the top of my head, I think this will break the loading states.
| export const components = <Path extends string, Params extends Record<string, any>>() => { | ||
| return { | ||
| // @ts-expect-error - Type complexity with forwardRef and generics | ||
| Link: forwardRef(({ to, params, ...props }: LinkProps<Path | To<Path>, Params>, ref: any) => { |
There was a problem hiding this comment.
You may need to add a click handler on links to stop event propagation; iso attaches a delegated handler to the window to capture any bubbling link clicks and it's likely the route patterns it uses don't align with the patterns used here (most libs do things a bit differently).
|
Hey @pax-k, thanks for submitting this! It's looking good overall, but I'll take a proper look as soon as I can and will get back to you. |
4 participants
I wanted to use filesystem based routing with Preact + Vite (
bun create preact), so I found Genrouted which is super cool, but it lacked preact-iso support, so this is my attempt to provide it.It still needs cleanup and proper testing, but if you are kind enough, please take a look and let me know if you spot anything wrong.
cc @oedotme