website·Indexed 29 days ago
https://shuvijs.github.io/shuvijs.org/A front-end application development solution featuring a runtime with routing, server-side rendering, and custom configuration via shuvi.config.ts. The documentation includes API references for interfaces like IRouter, IRouteMatch, and IViewServer, as well as guides for custom error pages and application initialization.
Shuvi.js uses a lifecycle hook system to allow developers to add custom behaviors. There are three types of plugins based on which part of the framework they modify:
corePlugin: Modifies the build process.serverPlugin: Modifies the behavior of the server.runtimePlugin: Modifies or extends runtime components and context.Shuvijs is a full-stack web development framework designed for developer efficiency and performance. Key features include:
@shuvi/router/lib/index namespace provides internal runtime utilities for routing. It includes core functionality for history management (Browser, Hash, and Memory history), route matching, and navigation lifecycle hooks.Shuvijs is a full-stack web development framework designed for developer efficiency and performance. Key features include:
internal_.default class is part of the runtime module and extends the History class. It is used for managing application navigation, history state, and transitions between different path records.internal.IRequest interface represents an HTTP request within the shuvijs runtime. It extends IIncomingMessage and provides detailed information about the request URL, parameters, and headers.// Example of the IRequest structure
interface IRequest extends IIncomingMessage {
headers: IncomingHttpHeaders;
originalUrl?: string;
params: IParams;
parsedUrl: UrlWithParsedQuery;
pathname: string;
query: ParsedQuery<string>;
url: string;
}.js, .jsx, .ts, or .tsx extensions. Supported features include ES6, Async/await (ES2017), Object Rest/Spread Properties (ES2018), Dynamic import() (ES2020), Optional Chaining (ES2020), Nullish Coalescing (ES2020), and Class Fields/Static Properties (Stage 3). TypeScript is supported built-in for both runtime and plugins.IRouter<RouteRecord> interface provides the core routing functionality for the shuvijs runtime. It manages navigation state, route resolution, and navigation guards. It accepts a type parameter RouteRecord which must extend Object (defaults to any).Location<S> interface represents an entry in a history stack. It extends the Path interface and provides information about the URL path, a unique identifier for the location, and arbitrary state data. It uses a type parameter S (which extends State) to define the type of the associated state object.// Example of the Location interface structure
interface Location<S extends State = State> extends Path {
key: string;
state: S;
redirectedFrom?: PathRecord;
}.js or .jsx files can alternatively be written as .ts or .tsx files..
├── .shuvi/ # Internal temporary files (regenerated on dev/build)
├── dist/ # Default build output directory
├── public/ # Static assets (copied to output directory)
├── src/
│ ├── apis/ # API handlers
│ │ ├── */
│ │ │ ├── index.js
│ │ │ └── *.js
│ │ ├── index.js
│ │ └── *.js
│ ├── pages/ # Page components and route middlewares
│ │ ├── */
│ │ │ ├── index.jsx
│ │ │ ├── *.jsx
│ │ │ └── _middlewares.js
│ │ ├── index.jsx
│ │ ├── *.jsx
│ │ └── _middlewares.js
│ ├── app.jsx # Root component wrapping all routes
│ ├── error.js # Error handling
│ ├── runtime.js # Runtime configuration
│ ├── server.js # Server configuration
│ ├── document.js # Server-side HTML generation logic
│ └── document.ejs # Basic HTML template
└── shuvi.config.js # Project configuration fileIRouter<RouteRecord> interface provides the core routing capabilities for the @shuvi/router package. It is generic, where RouteRecord extends Object (defaulting to any), allowing developers to define the structure of their route records.