Proposal: Support Type-Safe, CDN-Loadable Components with Recursive Routing and Context Contracts

[see7788]

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/[email protected]"
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

[rschristian]

I propose Preact support CDN-hosted component registration as a first-class feature:

What would the proposal be exactly? Dynamic import + lazy() should pretty much solve that already. There's nothing unique about loading a bundle from a CDN as opposed to anywhere else.