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.

• 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, API routes and server functions.
• AI based generator and other features.
• Rust based for heavy computation tasks.
• Easy to integrate with popular libraries.

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

• 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.

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

Config is loaded from .tnfrc.ts by default.

• alias: [string, string][]: An array of alias pairs.
• bundler: 'webpack' | 'mako': The bundler to use, default is mako.
• clickToComponent: { editor?: 'vscode' | 'vscode-insiders' | 'cursor' } | false: Click the component to open in the editor.
• devServer: { port?: number; host?: string; https?: { hosts?: string[] }; ip?: string }: The development server configuration.
• externals: Record<string, string>: An object that maps package names to their corresponding paths.
• less: { 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>])[];}: The configuration passed to lessLoader.
• router: { defaultPreload?: 'intent' | 'render' | 'viewport'; defaultPreloadDelay?: number; devtool?: { options?: { initialIsOpen?: boolean; position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' }; } | false; convention?: [@tanstack/router-generator](https://github.com/TanStack/router/blob/main/packages/router-generator/src/config.ts#L22C14-L22C26).Config }: The router configuration.
• ssr: {}: The ssr configuration.
• tailwindcss: boolean: Turn on/off tailwindcss. Need to be used in conjunction with src/tailwind.css and tailwind.config.js.

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' }),
});

MIT