-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Description
Hi Preact team,
Thank you for building a framework that values performance and simplicity. I'm using Preact with react-router-dom to build a deeply nested, plugin-architected application, and I've implemented a fully type-safe, globally decoupled routing system that I believe represents a powerful direction for modular UIs.
My architecture achieves:
Infinite nested routing (e.g., /a/a/a/b/a1/a2/a1/a1/a1/a2) via a recursive composition pattern.
Type-safe route registration using Record<keyof navigate_t, PathRouteProps>, ensuring all routes are statically defined and validated.
Type-safe context passing through Outlet and useOutletContext: parent routes inject structured config (context={config}), and children consume it with full TypeScript inference (e.g., const { lpMedia } = useOutletContext<context_t>()).
Type-safe navigation via useNavigate, where destination keys are derived from keyof navigate_t, preventing invalid route jumps.
Dynamic component loading — components like LpMedia, JieTu, etc., are defined in standalone libraries (lib-vanilla) and loaded via lazy(() => import(...)).
To evolve this from project-level to global-level reuse, I propose Preact support CDN-hosted component registration as a first-class feature:
Add a componentUrl field to route configs:
type RouterBaseObj = PathRouteProps & {
componentUrl?: string; // e.g., "https://cdn.example.com/widgets/lp-media@1.0.0.js"
requiredContext?: (keyof context_t)[];
};
With a built-in loader:
const loadComponent = (url: string) => lazy(() => import(url));
This allows routes to be registered via CDN URLs while maintaining:
Full type safety (via .d.ts files published alongside)
Context contract validation
Seamless integration with RecursiveRoute, Outlet, and useOutletContext
Preact’s minimal size (~3KB) makes it ideal for lightweight, embeddable, and distributable UI modules. This would enable true micro-frontend ecosystems, plugin marketplaces, and zero-bundle-sharing integration.
I’d love to collaborate on an RFC or PoC to make Preact the go-to framework for globally reusable, type-safe, CDN-loadable components.
Best regards,
see7788