@umijs/tnf

Tnf, the north face, the next framework. Tnf is focused on simple, performance and developer experience. Framework should be simple. CSR development should be simple. Type safety should be built-in.

Please consider following this project's author, sorrycc, and consider starring the project to show your ❤️ and support.

Features

• Simple, performance and developer experience focused.
• Type safety built-in.
• TanStack Router built-in.
• Conventional global style with src/global.{less,css}.
• Less, CSS Modules support built-in.
• Tailwind CSS support built-in.
• Framework unified plugin system which is compatible with umi and other frameworks.
• Security built-in. Including doctor rules which is used in Ant Group.
• Support SSR.
• Support API routes and server functions.
• AI based generator and other features.
• Rust based for heavy computation tasks.
• Easy to integrate with popular libraries.

Getting Started

Create a new project with the following command:

$ pnpm create tnf myapp --template=simple
$ cd myapp
$ pnpm i

Then you can generate a page with the following command.

$ npx tnf generate page foo

Then you can start the development server or build the project. After building, you can preview the product locally.

$ pnpm dev
$ pnpm build
$ pnpm preview

Commands

• tnf build: Build the project.
• tnf config list/get/set/remove [name] [value]: Manage the config.
• tnf dev: Start the development server.
• tnf generate/g <type> <name>: Generate a new page (or component and other types in the future).
• tnf preview: Preview the product after building the project.
• tnf sync --mode=<mode>: Sync the project to the temporary directory.

API

• @umijs/tnf: The entry of tnf, including defineConfig, ...
• @umijs/tnf/router: The router module, reexported from @tanstack/react-router.
• @umijs/tnf/ssr: The ssr module, including Meta, Client and Server.

Config

Config is loaded from .tnfrc.ts by default.

alias

• Type: [string, string][]
• Default: []

Alias is used to replace the values in import statements. These values are passed to bundlers and TypeScript automatically.

export default {
  alias: [
    ['foo', './src/foo'],
  ],
}

NOTICE: You will need to run tnf dev to have the alias configuration in tsconfig.json automatically generated.

bundler

• Type: 'webpack' | 'mako'
• Default: 'mako'

The bundler to use.

NOTICE: webpack bundler is not implemented yet.

clickToComponent

• Type: { editor?: 'vscode' | 'vscode-insiders' | 'cursor' } | false
• Default: false

Click the component to open in the editor.

devServer

• Type: { port?: number; host?: string; https?: { hosts?: string[] }; ip?: string }
• Default: { port: 8000, host: 'localhost' }

The development server configuration.

externals

• Type: Record<string, string>
• Default: {}

An object that maps package names to their corresponding paths.

less

• Type: { modifyVars?: Record<string, string>; globalVars?: Record<string, string>; math?: 'always' | 'strict' | 'parens-division' | 'parens' | 'strict-legacy' | number; sourceMap?: any; plugins?: (string | [string, Record<string, any>])[];}
• Default: {}

The configuration passed to lessLoader.

router

• Type: { defaultPreload?: 'intent' | 'render' | 'viewport'; defaultPreloadDelay?: number; devtool?: { options?: { initialIsOpen?: boolean; position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' }; } | false; convention?: any }
• Default: { defaultPreload: 'intent', defaultPreloadDelay: 100 }

The router configuration. Checkout @tanstack/router-generator for convention config.

ssr

• Type: { renderMode?: 'stream' | 'string' }
• Default: { renderMode: 'stream' }

The ssr configuration.

FAQ

How to specify a redirect route?

You can use redirect function in loader to specify a redirect route.

import { redirect, createFileRoute } from '@umijs/tnf/router';
const Route = createFileRoute('/foo')({
  loader: async () => redirect({ to: '/bar' }),
});

CREDITS

This project is inspired by:

• @tanstack/router for the router and ssr.

LICENSE

MIT