Skip to content

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

@see7788

Description

@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/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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions