refactor: extract sync to files

package.json

@@ -11,13 +11,14 @@
     "build": "father build",
     "changeset": "tsx scripts/changeset.ts && changeset",
     "check": "prettier --check .",
-    "ci": "npm run check && npm run build && npm run test --run && npm run test:e2e && father doctor",
+    "ci": "npm run check && npm run build && npm run tsc && npm run test --run && npm run test:e2e && father doctor",
     "dev": "father dev",
     "format": "prettier --write .",
     "release": "tsx scripts/release.ts",
     "release:create-tnf": "pnpm --filter create-tnf release",
     "test": "vitest",
-    "test:e2e": "tsx scripts/e2e.ts"
+    "test:e2e": "tsx scripts/e2e.ts",
+    "tsc": "tsc --noEmit"
   },
   "bin": {
     "tnf": "bin/tnf.js"

src/build.ts

@@ -3,7 +3,7 @@ import chokidar from 'chokidar';
 import path from 'pathe';
 import type { Config } from './config';
 import { FRAMEWORK_NAME } from './constants';
-import { sync } from './sync';
+import { sync } from './sync/sync';
 
 export async function build({
   cwd,

src/cli.ts

@@ -46,7 +46,7 @@ async function run(cwd: string) {
         name,
       });
     case 'sync':
-      const { sync } = await import('./sync.js');
+      const { sync } = await import('./sync/sync.js');
       const tmpPath = path.join(cwd, `src/.${FRAMEWORK_NAME}`);
       return sync({
         cwd,

src/sync/sync.ts

@@ -0,0 +1,35 @@
+import fs from 'fs';
+import type { Config as TnfConfig } from '../config';
+import { writeClientEntry } from './write_client_entry';
+import { writeGlobalStyle } from './write_global_style';
+import { writeRouteTree } from './write_route_tree';
+import { writeTailwindcss } from './write_tailwindcss';
+
+interface BaseOptions {
+  cwd: string;
+  tmpPath: string;
+  config?: TnfConfig;
+  mode: 'development' | 'production';
+}
+
+export interface SyncOptions extends BaseOptions {
+  runAgain?: boolean;
+}
+
+export async function sync(opts: SyncOptions) {
+  const { tmpPath } = opts;
+
+  fs.rmSync(tmpPath, { recursive: true, force: true });
+  fs.mkdirSync(tmpPath, { recursive: true });
+
+  await writeRouteTree(opts);
+  const globalStyleImportPath = writeGlobalStyle(opts);
+  const tailwindcssPath = await writeTailwindcss(opts);
+  writeClientEntry({
+    opts,
+    globalStyleImportPath,
+    tailwindcssPath,
+  });
+
+  console.log('Synced');
+}

src/sync/write_client_entry.ts

@@ -0,0 +1,58 @@
+import fs from 'fs';
+import path from 'pathe';
+import type { SyncOptions } from './sync';
+
+export function writeClientEntry({
+  opts,
+  globalStyleImportPath,
+  tailwindcssPath,
+}: {
+  opts: SyncOptions;
+  globalStyleImportPath: string;
+  tailwindcssPath: string | undefined;
+}) {
+  const { tmpPath, config } = opts;
+
+  fs.writeFileSync(
+    path.join(tmpPath, 'client.tsx'),
+    `
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+  RouterProvider,
+  createRouter,
+} from '@umijs/tnf/router';
+import { routeTree } from './routeTree.gen';
+${globalStyleImportPath}
+${tailwindcssPath ? `import '${tailwindcssPath}'` : ''}
+const router = createRouter({
+  routeTree,
+  defaultPreload: ${config?.router?.defaultPreload ? `'${config.router.defaultPreload}'` : 'false'},
+  defaultPreloadDelay: ${config?.router?.defaultPreloadDelay || 50},
+});
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+const TanStackRouterDevtools =
+  process.env.NODE_ENV === 'production'
+    ? () => null
+    : React.lazy(() =>
+        import('@tanstack/router-devtools').then((res) => ({
+          default: res.TanStackRouterDevtools,
+        })),
+      )
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <>
+    <RouterProvider router={router} />
+    ${
+      config?.router?.devtool !== false
+        ? `<TanStackRouterDevtools router={router} initialIsOpen=${config?.router?.devtool?.options?.initialIsOpen || '{false}'} position=${config?.router?.devtool?.options?.position || '"bottom-left"'} />`
+        : ''
+    }
+  </>
+);
+  `,
+  );
+}

src/sync/write_global_style.ts

@@ -0,0 +1,18 @@
+import fs from 'fs';
+import path from 'pathe';
+import type { SyncOptions } from './sync';
+
+const supportedExtensions = ['.css', '.less'];
+
+export function getStyleImportPath(basePath: string) {
+  const ext = supportedExtensions.find((ext) =>
+    fs.existsSync(path.join(basePath + ext)),
+  );
+  return ext ? `import '${basePath}${ext}';` : '';
+}
+
+export function writeGlobalStyle(opts: SyncOptions) {
+  const { cwd } = opts;
+  const globalStylePath = path.join(cwd, 'src/global');
+  return getStyleImportPath(globalStylePath);
+}

src/sync/write_route_tree.ts

@@ -0,0 +1,31 @@
+import { type Config, generator } from '@tanstack/router-generator';
+import path from 'pathe';
+import type { SyncOptions } from './sync';
+
+export async function writeRouteTree(opts: SyncOptions) {
+  const { cwd, tmpPath } = opts;
+  await generator({
+    routeFileIgnorePrefix: '-',
+    routesDirectory: path.join(cwd, 'src/pages'),
+    generatedRouteTree: path.join(tmpPath, 'routeTree.gen.ts'),
+    quoteStyle: 'single',
+    semicolons: false,
+    disableTypes: false,
+    addExtensions: false,
+    disableLogging: false,
+    disableManifestGeneration: false,
+    apiBase: '/api',
+    routeTreeFileHeader: [
+      '/* prettier-ignore-start */',
+      '/* eslint-disable */',
+      '// @ts-nocheck',
+      '// noinspection JSUnusedGlobalSymbols',
+    ],
+    routeTreeFileFooter: ['/* prettier-ignore-end */'],
+    indexToken: 'index',
+    routeToken: 'route',
+    experimental: {
+      enableCodeSplitting: true,
+    },
+  } as Config);
+}

src/sync/write_tailwindcss.ts

@@ -0,0 +1,16 @@
+import { generateTailwindcss } from '../fishkit/tailwindcss';
+import type { SyncOptions } from './sync';
+
+export async function writeTailwindcss(opts: SyncOptions) {
+  const { cwd, tmpPath, config, mode, runAgain } = opts;
+
+  let tailwindcssPath: string | undefined;
+  if (config?.tailwindcss && !runAgain) {
+    tailwindcssPath = await generateTailwindcss({
+      cwd,
+      tmpPath,
+      mode,
+    });
+  }
+  return tailwindcssPath;
+}