feat(create-arui-scripts-app): add simple routing in cli

Author: Боровский Дмитрий

packages/create-arui-scripts-app/README.md

@@ -45,6 +45,7 @@ npx create-arui-scripts-app my-app --yes
 - SSR-сервер на **Hapi** с рендерингом приложения (`renderToString`) и гидрацией на клиенте
 - транспилятор (**swc** / babel / tsc) и тест-раннер (**Jest** / Vitest)
 - опционально **e2e** (**Cypress** / Playwright) с конфигом и хелперами
+- опционально **React Router**
 - CSS-модули, полифилы (`core-js`), `experimentalReactCompiler`, docker registry, preset
 - опционально **arui-presets-lint** (eslint, prettier, stylelint, knip, secretlint, lefthook)
 - опциональная установка зависимостей сразу после генерации
@@ -61,8 +62,8 @@ npx create-arui-scripts-app my-app --yes --lint --install
 пример компонента со стилями и тестом, `global-definitions.d.ts`, `.gitignore`, `README.md`,
 `.yarnrc.yml` (с `nodeLinker: node-modules`),
 а также в зависимости от ответов - серверная точка входа на Hapi, store на RTK, полифилы,
-`vitest.config.ts`, e2e-каркас (Playwright или Cypress) и конфиги `arui-presets-lint`
-(`eslint.config.mts`, `knip.ts`, `.secretlintrc.json`, `lefthook.yml`).
+`vitest.config.ts`, e2e-каркас (Playwright или Cypress), роуты React Router и конфиги
+`arui-presets-lint` (`eslint.config.mts`, `knip.ts`, `.secretlintrc.json`, `lefthook.yml`).
 
 Дальнейшая сборка и запуск через команды `arui-scripts` в созданном проекте.
 См. [документацию arui-scripts](../arui-scripts/README.md).

packages/create-arui-scripts-app/src/__tests__/build-context.tests.ts

@@ -8,6 +8,7 @@ const base: InitAnswers = {
     codeLoader: 'swc',
     testRunner: 'jest',
     e2eFramework: 'none',
+    useRouter: false,
     cssModules: true,
     clientServerPort: 8080,
     serverPort: 3000,
@@ -108,4 +109,13 @@ describe('buildContext', () => {
         expect(cypressCtx.devDependencies).toHaveProperty('cypress');
         expect(cypressCtx.devDependencies).not.toHaveProperty('@playwright/test');
     });
+
+    it('useRouter добавляет react-router и react-router-dom', () => {
+        const withRouter = buildContext({ ...base, useRouter: true }, '1.0.0');
+        const withoutRouter = buildContext({ ...base, useRouter: false }, '1.0.0');
+
+        expect(withRouter.dependencies).toHaveProperty('react-router-dom');
+        expect(withRouter.dependencies).toHaveProperty('react-router');
+        expect(withoutRouter.dependencies).not.toHaveProperty('react-router-dom');
+    });
 });

packages/create-arui-scripts-app/src/__tests__/build-file-map.tests.ts

@@ -9,6 +9,7 @@ const base: InitAnswers = {
     codeLoader: 'swc',
     testRunner: 'jest',
     e2eFramework: 'none',
+    useRouter: false,
     cssModules: true,
     clientServerPort: 8080,
     serverPort: 3000,
@@ -310,4 +311,31 @@ describe('buildFileMap', () => {
         expect(pkg.scripts.e2e).toBeUndefined();
         expect(files['README.md']).not.toContain('## E2E');
     });
+
+    it('useRouter создает routes, layout, pages и BrowserRouter/StaticRouter', () => {
+        const files = map({ useRouter: true, clientOnly: false });
+        const pkg = JSON.parse(files['package.json']) as {
+            dependencies: Record<string, string>;
+        };
+
+        expect(files['src/client/routes.tsx']).toContain('AppRoutes');
+        expect(files['src/client/components/layout.tsx']).toContain('Outlet');
+        expect(files['src/client/pages/home.tsx']).toContain('HomePage');
+        expect(files['src/client/pages/about.tsx']).toContain('AboutPage');
+        expect(files['src/client/components/app.tsx']).toContain('AppRoutes');
+        expect(files['src/client/index.tsx']).toContain('BrowserRouter');
+        expect(files['src/server/index.tsx']).toContain('StaticRouter');
+        expect(files['src/server/index.tsx']).toContain('/{path*}');
+        expect(files['README.md']).toContain('/about');
+        expect(pkg.dependencies).toHaveProperty('react-router-dom');
+    });
+
+    it('без useRouter не создает routes/pages', () => {
+        const files = map({ useRouter: false });
+
+        expect(files['src/client/routes.tsx']).toBeUndefined();
+        expect(files['src/client/pages/home.tsx']).toBeUndefined();
+        expect(files['src/client/index.tsx']).not.toContain('BrowserRouter');
+        expect(files['package.json']).not.toContain('react-router-dom');
+    });
 });

packages/create-arui-scripts-app/src/__tests__/create-program.tests.ts

@@ -22,12 +22,19 @@ describe('createProgram', () => {
     });
 
     it('позитивные флаги дают true', async () => {
-        const flags = await parseFlags(['--rtk', '--css-modules', '--lint', '--install']);
+        const flags = await parseFlags([
+            '--rtk',
+            '--css-modules',
+            '--lint',
+            '--install',
+            '--router',
+        ]);
 
         expect(flags.useRtk).toBe(true);
         expect(flags.cssModules).toBe(true);
         expect(flags.useLint).toBe(true);
         expect(flags.install).toBe(true);
+        expect(flags.useRouter).toBe(true);
     });
 
     it('--no-* флаги дают false', async () => {
@@ -36,6 +43,7 @@ describe('createProgram', () => {
             '--no-css-modules',
             '--no-polyfills',
             '--no-react-compiler',
+            '--no-router',
             '--no-lint',
             '--no-install',
         ]);
@@ -44,6 +52,7 @@ describe('createProgram', () => {
         expect(flags.cssModules).toBe(false);
         expect(flags.polyfills).toBe(false);
         expect(flags.reactCompiler).toBe(false);
+        expect(flags.useRouter).toBe(false);
         expect(flags.useLint).toBe(false);
         expect(flags.install).toBe(false);
     });
@@ -66,4 +75,9 @@ describe('createProgram', () => {
             e2eFramework: 'none',
         });
     });
+
+    it('--router и --no-router управляют useRouter', async () => {
+        await expect(parseFlags(['--router'])).resolves.toEqual({ useRouter: true });
+        await expect(parseFlags(['--no-router'])).resolves.toEqual({ useRouter: false });
+    });
 });

packages/create-arui-scripts-app/src/__tests__/questions.tests.ts

@@ -12,6 +12,7 @@ describe('getQuestions', () => {
             'swc', // codeLoader
             'jest', // testRunner
             'none', // e2eFramework
+            false, // useRouter
             true, // cssModules
             8080, // clientServerPort
             // serverPort пропущен
@@ -37,6 +38,7 @@ describe('getQuestions', () => {
             'swc', // codeLoader
             'jest', // testRunner
             'none', // e2eFramework
+            false, // useRouter
             true, // cssModules
             8080, // clientServerPort
             3001, // serverPort
@@ -61,6 +63,7 @@ describe('getQuestions', () => {
             'app', // name
             false, // useRtk
             'none', // e2eFramework
+            false, // useRouter
             true, // cssModules
             8080, // clientServerPort
             '', // dockerRegistry
@@ -91,6 +94,7 @@ describe('getQuestions', () => {
             'swc', // codeLoader
             'jest', // testRunner
             // e2eFramework задан флагом
+            false, // useRouter
             true, // cssModules
             8080, // clientServerPort
             '', // dockerRegistry
@@ -114,6 +118,7 @@ describe('getQuestions', () => {
             'swc', // codeLoader
             'jest', // testRunner
             'cypress', // e2eFramework
+            false, // useRouter
             true, // cssModules
             8080, // clientServerPort
             // serverPort задан флагом — вопрос пропущен

packages/create-arui-scripts-app/src/__tests__/run.tests.ts

@@ -111,6 +111,7 @@ describe('runInit', () => {
                 'babel', // codeLoader
                 'vitest', // testRunner
                 'none', // e2eFramework
+                false, // useRouter
                 true, // cssModules
                 8081, // clientServerPort
                 '', // dockerRegistry

packages/create-arui-scripts-app/src/build-context.ts

@@ -24,6 +24,7 @@ const VERSIONS = {
     vitest: '^4.1.5',
     playwrightTest: '^1.57.0',
     cypress: '^15.19.0',
+    reactRouterDom: '^7.6.0',
     aruiPresetsLint: '^11.0.0',
 } as const;
 
@@ -56,6 +57,11 @@ export function buildContext(answers: InitAnswers, aruiScriptsVersion: string):
         dependencies['react-redux'] = VERSIONS.reactRedux;
     }
 
+    if (answers.useRouter) {
+        dependencies['react-router'] = VERSIONS.reactRouterDom;
+        dependencies['react-router-dom'] = VERSIONS.reactRouterDom;
+    }
+
     if (answers.polyfills) {
         dependencies['core-js'] = VERSIONS.coreJs;
     }
@@ -89,6 +95,7 @@ export function buildContext(answers: InitAnswers, aruiScriptsVersion: string):
         codeLoader: answers.codeLoader,
         testRunner: answers.testRunner,
         e2eFramework: answers.e2eFramework,
+        useRouter: answers.useRouter,
         cssModules: answers.cssModules,
         clientServerPort: answers.clientServerPort,
         serverPort: answers.serverPort,

packages/create-arui-scripts-app/src/build-file-map.ts

@@ -28,6 +28,12 @@ import {
     yarnrcTemplate,
 } from './templates/misc.template';
 import { packageJsonTemplate } from './templates/package-json.template';
+import {
+    aboutPageTemplate,
+    homePageTemplate,
+    layoutTemplate,
+    routesTemplate,
+} from './templates/router.template';
 import { serverEntryTemplate } from './templates/server-entry.template';
 import {
     counterSliceTemplate,
@@ -77,6 +83,13 @@ export function buildFileMap(ctx: TemplateContext): Record<string, string> {
         files[`${client}/store/counter-slice.ts`] = counterSliceTemplate();
     }
 
+    if (ctx.useRouter) {
+        files[`${client}/routes.tsx`] = routesTemplate();
+        files[`${client}/components/layout.tsx`] = layoutTemplate(ctx);
+        files[`${client}/pages/home.tsx`] = homePageTemplate(ctx);
+        files[`${client}/pages/about.tsx`] = aboutPageTemplate(ctx);
+    }
+
     if (ctx.useLint) {
         files['eslint.config.mts'] = eslintConfigTemplate();
         files['knip.ts'] = knipConfigTemplate();

packages/create-arui-scripts-app/src/create-program.ts

@@ -36,6 +36,8 @@ export function createProgram(onInit: InitHandler = defaultInitHandler): Command
                 'none',
             ]),
         )
+        .option('--router', 'Подключить React Router')
+        .option('--no-router', 'Без React Router')
         .option('--css-modules', 'CSS-модули')
         .option('--no-css-modules', 'Обычный css')
         .option('--client-port <port>', 'Порт dev-сервера', (value) => Number(value))
@@ -124,6 +126,10 @@ export function mapOptsToFlags(opts: Record<string, unknown>): CliFlags {
         flags.reactCompiler = opts.reactCompiler;
     }
 
+    if (typeof opts.router === 'boolean') {
+        flags.useRouter = opts.router;
+    }
+
     if (typeof opts.lint === 'boolean') {
         flags.useLint = opts.lint;
     }

packages/create-arui-scripts-app/src/defaults.ts

@@ -9,6 +9,7 @@ export type CliFlags = {
     codeLoader?: CodeLoader;
     testRunner?: TestRunner;
     e2eFramework?: E2eFramework;
+    useRouter?: boolean;
     cssModules?: boolean;
     clientServerPort?: number;
     serverPort?: number;
@@ -28,6 +29,7 @@ export function defaultAnswers(name: string): InitAnswers {
         codeLoader: 'swc',
         testRunner: 'jest',
         e2eFramework: 'none',
+        useRouter: false,
         cssModules: true,
         clientServerPort: 8080,
         serverPort: 3000,
@@ -47,6 +49,7 @@ const ANSWER_FLAG_KEYS: Array<keyof CliFlags> = [
     'codeLoader',
     'testRunner',
     'e2eFramework',
+    'useRouter',
     'cssModules',
     'clientServerPort',
     'serverPort',
@@ -73,6 +76,7 @@ export function answersFromFlags(defaultName: string, flags: CliFlags): InitAnsw
         ...(flags.codeLoader === undefined ? {} : { codeLoader: flags.codeLoader }),
         ...(flags.testRunner === undefined ? {} : { testRunner: flags.testRunner }),
         ...(flags.e2eFramework === undefined ? {} : { e2eFramework: flags.e2eFramework }),
+        ...(flags.useRouter === undefined ? {} : { useRouter: flags.useRouter }),
         ...(flags.cssModules === undefined ? {} : { cssModules: flags.cssModules }),
         ...(flags.clientServerPort === undefined
             ? {}