$ show smapiot/piral
Piral is a production-grade micro-frontend framework that enables building modular single-page applications (SPAs) with independently developed, runtime-integrated modules called pilets. The repository is a monorepo containing the core framework (piral-core, piral-base, piral), a CLI toolchain (piral-cli, piral-cli-webpack5), over 20 feature plugins (authentication, UI components, state management, search, notifications, etc.), and 15+ framework converters (React, Vue, Angular, Svelte, Blazor, etc.). The core architecture provides a shell application with pilet loading, extension slots, event system, shared dependency management via import maps, and state management using Zustand. The CLI supports scaffolding, building, debugging, validation, and publishing of both pilets and Piral instances. The codebase demonstrates strong engineering practices with extensive TypeScript, unit tests (Vitest), and a consistent plugin/converter pattern. Some technical drift exists in legacy pilet specifications and multiple router version adapters, but the project remains actively maintained.
The LLM identified 4 files worth highlighting for reuse:
A React component that renders all registered extensions for a given slot name. It supports ordering, custom rendering via a 'render' prop, and fallback content. This is the core extensibility mechanism of Piral, allowing pilets and plugins to contribute UI fragments at named points in the shell. The implementation is isolated and could be extracted as a generic 'slot' component for any plugin-based React application.
Defines multiple strategies for loading pilets: synchronous, asynchronous, progressive, blazing, and standard. Each strategy is a factory function that returns a loadPilet function, controlling how pilets are fetched, evaluated, and cached. This is a clean abstraction of the pilet loading lifecycle, decoupled from the actual HTTP fetch and module evaluation. The pattern can be reused in any system that needs configurable, sequential, or parallel resource loading with retry and error handling.
A utility module for parsing and resolving import maps used for shared dependency management between pilets and the shell. It handles local, remote, and npm dependencies, version behavior (exact, match-major, any-patch), inheritance from parent maps, and exclusion rules. The implementation is self-contained and demonstrates a non-trivial algorithm for dependency resolution that could be reused in any micro-frontend or module federation system.
A React hook that manages the lifecycle of data fetching for a feed (connector) with configurable resolver, subscriber, and reducer. It tracks loading, error, and data states, supports initial loading, polling, and manual refetch. The hook abstracts the data layer from the UI and can be extracted for use in any React application needing a reusable data-fetching hook with subscriber-based updates.