create-arui-scripts-app 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# create-arui-scripts-app
+
+## 1.2.0
+
+### Minor Changes
+
+-   [#577](https://github.com/core-ds/arui-scripts/pull/577) [`231321b`](https://github.com/core-ds/arui-scripts/commit/231321bf2707abbbd909931cbd358880e488a2b5) Thanks [@dmitrbrvsk](https://github.com/dmitrbrvsk)! - В CLI генерации приложения добавлена возможность выбор e2e фреймворка (Cypress, Playwright) и подключение простого роутинга через React Router
+
+## 1.1.0
+
+### Minor Changes
+
+-   [#566](https://github.com/core-ds/arui-scripts/pull/566) [`d5de571`](https://github.com/core-ds/arui-scripts/commit/d5de571bf16582ad78258d3b35acbc08d7da42a4) Thanks [@dmitrbrvsk](https://github.com/dmitrbrvsk)! - добавлена возможность подключать пакет arui-presets-lint (https://github.com/core-ds/arui-presets-lint/tree/master/packages/arui-presets-lint)
+
+## 1.0.0
+
+### Major Changes
+
+-   [#552](https://github.com/core-ds/arui-scripts/pull/552) [`3658e49`](https://github.com/core-ds/arui-scripts/commit/3658e49b0b752c592e738726aa8056569e28e19b) Thanks [@dmitrbrvsk](https://github.com/dmitrbrvsk)! - Добавлен пакет `create-arui-scripts-app` для генерации нового приложения через CLI. В `arui-scripts` CLI был переведен на commander.

package/README.md

@@ -32,10 +32,11 @@ npx create-arui-scripts-app my-app --yes
 - `--ssr` / `--client-only` - SSR или только клиент
 - `--code-loader <swc|babel|tsc>` - транспилятор
 - `--test-runner <jest|vitest>` - тест-раннер
+- `--e2e-framework <cypress|playwright|none>` - e2e фреймворк
 - `--css-modules` / `--no-css-modules` - CSS-модули
 - `--client-port` / `--server-port` - порты клиента и сервера
 - `--docker-registry` / `--presets` - docker registry и preset
-- `--polyfills` / `--react-compiler` / `--install` - и соответствующие `--no-*`
+- `--polyfills` / `--react-compiler` / `--lint` / `--install` - и соответствующие `--no-*`
 
 ## Что настраивает мастер
 
@@ -43,16 +44,27 @@ npx create-arui-scripts-app my-app --yes
 - режим **SSR** (клиент + сервер, клиент в `src/client/`) или **clientOnly** (статика)
 - 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)
 - опциональная установка зависимостей сразу после генерации
 
+Пример с линтерами:
+
+```bash
+npx create-arui-scripts-app my-app --yes --lint --install
+```
+
 ## Результат
 
 Генерируются `package.json`, `arui-scripts.config.ts`, `tsconfig.json`, клиентская точка входа,
 пример компонента со стилями и тестом, `global-definitions.d.ts`, `.gitignore`, `README.md`,
 `.yarnrc.yml` (с `nodeLinker: node-modules`),
-а также в зависимости от ответов - серверная точка входа на Hapi, store на RTK, полифилы и
-`vitest.config.ts`.
+а также в зависимости от ответов - серверная точка входа на Hapi, store на RTK, полифилы,
+`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).
+При подключении lint: `yarn lint` / `yarn lint:fix`.

package/build/build-context.js

@@ -23,6 +23,10 @@ const VERSIONS = {
     tsJest: '^29.1.0',
     typesJest: '^29.5.0',
     vitest: '^4.1.5',
+    playwrightTest: '^1.57.0',
+    cypress: '^15.19.0',
+    reactRouterDom: '^7.6.0',
+    aruiPresetsLint: '^11.0.0',
 };
 function buildContext(answers, aruiScriptsVersion) {
     const dependencies = {
@@ -49,6 +53,10 @@ function buildContext(answers, aruiScriptsVersion) {
         dependencies['@reduxjs/toolkit'] = VERSIONS.reduxToolkit;
         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;
     }
@@ -63,12 +71,23 @@ function buildContext(answers, aruiScriptsVersion) {
     else {
         devDependencies.vitest = VERSIONS.vitest;
     }
+    if (answers.e2eFramework === 'playwright') {
+        devDependencies['@playwright/test'] = VERSIONS.playwrightTest;
+    }
+    else if (answers.e2eFramework === 'cypress') {
+        devDependencies.cypress = VERSIONS.cypress;
+    }
+    if (answers.useLint) {
+        devDependencies['arui-presets-lint'] = VERSIONS.aruiPresetsLint;
+    }
     return {
         name: answers.name,
         useRtk: answers.useRtk,
         clientOnly: answers.clientOnly,
         codeLoader: answers.codeLoader,
         testRunner: answers.testRunner,
+        e2eFramework: answers.e2eFramework,
+        useRouter: answers.useRouter,
         cssModules: answers.cssModules,
         clientServerPort: answers.clientServerPort,
         serverPort: answers.serverPort,
@@ -76,6 +95,7 @@ function buildContext(answers, aruiScriptsVersion) {
         presets: answers.presets.trim(),
         polyfills: answers.polyfills,
         reactCompiler: answers.reactCompiler,
+        useLint: answers.useLint,
         aruiScriptsVersion,
         dependencies,
         devDependencies,

package/build/build-file-map.js

@@ -7,8 +7,12 @@ const app_styles_template_1 = require("./templates/app-styles.template");
 const app_test_template_1 = require("./templates/app-test.template");
 const arui_scripts_config_template_1 = require("./templates/arui-scripts-config.template");
 const client_entry_template_1 = require("./templates/client-entry.template");
+const e2e_cypress_template_1 = require("./templates/e2e-cypress.template");
+const e2e_playwright_template_1 = require("./templates/e2e-playwright.template");
+const lint_template_1 = require("./templates/lint.template");
 const misc_template_1 = require("./templates/misc.template");
 const package_json_template_1 = require("./templates/package-json.template");
+const router_template_1 = require("./templates/router.template");
 const server_entry_template_1 = require("./templates/server-entry.template");
 const store_template_1 = require("./templates/store.template");
 const tsconfig_template_1 = require("./templates/tsconfig.template");
@@ -22,14 +26,14 @@ function buildFileMap(ctx) {
         'package.json': (0, package_json_template_1.packageJsonTemplate)(ctx),
         'arui-scripts.config.ts': (0, arui_scripts_config_template_1.aruiScriptsConfigTemplate)(ctx),
         'tsconfig.json': (0, tsconfig_template_1.tsconfigTemplate)(ctx),
-        '.gitignore': (0, misc_template_1.gitignoreTemplate)(),
+        '.gitignore': (0, misc_template_1.gitignoreTemplate)(ctx),
         '.yarnrc.yml': (0, misc_template_1.yarnrcTemplate)(),
         'global-definitions.d.ts': (0, misc_template_1.globalDefinitionsTemplate)(),
         'README.md': (0, misc_template_1.readmeTemplate)(ctx),
         [`${client}/index.tsx`]: (0, client_entry_template_1.clientEntryTemplate)(ctx),
         [`${client}/components/app.tsx`]: (0, app_component_template_1.appComponentTemplate)(ctx),
         [`${client}/components/${(0, app_styles_template_1.appStylesFileName)(ctx)}`]: (0, app_styles_template_1.appStylesTemplate)(ctx),
-        [`${client}/components/__tests__/app.test.tsx`]: (0, app_test_template_1.appTestTemplate)(ctx),
+        [`${client}/components/__tests__/app.test.ts`]: (0, app_test_template_1.appTestTemplate)(ctx),
     };
     if (!ctx.clientOnly) {
         files['src/server/index.tsx'] = (0, server_entry_template_1.serverEntryTemplate)(ctx);
@@ -45,5 +49,28 @@ function buildFileMap(ctx) {
         files[`${client}/store/hooks.ts`] = (0, store_template_1.storeHooksTemplate)();
         files[`${client}/store/counter-slice.ts`] = (0, store_template_1.counterSliceTemplate)();
     }
+    if (ctx.useRouter) {
+        files[`${client}/routes.tsx`] = (0, router_template_1.routesTemplate)();
+        files[`${client}/components/layout.tsx`] = (0, router_template_1.layoutTemplate)(ctx);
+        files[`${client}/pages/home.tsx`] = (0, router_template_1.homePageTemplate)(ctx);
+        files[`${client}/pages/about.tsx`] = (0, router_template_1.aboutPageTemplate)(ctx);
+    }
+    if (ctx.useLint) {
+        files['eslint.config.mts'] = (0, lint_template_1.eslintConfigTemplate)();
+        files['knip.ts'] = (0, lint_template_1.knipConfigTemplate)();
+        files['.secretlintrc.json'] = (0, lint_template_1.secretlintConfigTemplate)();
+        files['lefthook.yml'] = (0, lint_template_1.lefthookConfigTemplate)();
+    }
+    if (ctx.e2eFramework === 'playwright') {
+        files['playwright.config.ts'] = (0, e2e_playwright_template_1.playwrightConfigTemplate)(ctx);
+        files['e2e/helpers/index.ts'] = (0, e2e_playwright_template_1.playwrightHelpersTemplate)();
+        files['e2e/example.spec.ts'] = (0, e2e_playwright_template_1.playwrightExampleSpecTemplate)();
+    }
+    else if (ctx.e2eFramework === 'cypress') {
+        files['cypress.config.ts'] = (0, e2e_cypress_template_1.cypressConfigTemplate)(ctx);
+        files['cypress/support/e2e.ts'] = (0, e2e_cypress_template_1.cypressSupportE2eTemplate)();
+        files['cypress/support/commands.ts'] = (0, e2e_cypress_template_1.cypressSupportCommandsTemplate)();
+        files['cypress/e2e/example.cy.ts'] = (0, e2e_cypress_template_1.cypressExampleSpecTemplate)();
+    }
     return files;
 }

package/build/create-program.js

@@ -31,6 +31,13 @@ function createProgram(onInit = defaultInitHandler) {
         .addOption(new commander_1.Option('--ssr', 'Клиент + сервер').conflicts('clientOnly'))
         .addOption(new commander_1.Option('--code-loader <loader>', 'Транспилятор').choices(['swc', 'babel', 'tsc']))
         .addOption(new commander_1.Option('--test-runner <runner>', 'Тест-раннер').choices(['jest', 'vitest']))
+        .addOption(new commander_1.Option('--e2e-framework <framework>', 'e2e фреймворк').choices([
+        'cypress',
+        'playwright',
+        '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))
@@ -41,6 +48,8 @@ function createProgram(onInit = defaultInitHandler) {
         .option('--no-polyfills', 'Без полифилов')
         .option('--react-compiler', 'Включить experimentalReactCompiler')
         .option('--no-react-compiler', 'Выключить experimentalReactCompiler')
+        .option('--lint', 'Подключить arui-presets-lint')
+        .option('--no-lint', 'Без arui-presets-lint')
         .option('--install', 'Установить зависимости после генерации')
         .option('--no-install', 'Не устанавливать зависимости')
         .showHelpAfterError('(используйте --help для справки)')
@@ -75,6 +84,9 @@ function mapOptsToFlags(opts) {
     if (typeof opts.testRunner === 'string') {
         flags.testRunner = opts.testRunner;
     }
+    if (typeof opts.e2eFramework === 'string') {
+        flags.e2eFramework = opts.e2eFramework;
+    }
     if (typeof opts.cssModules === 'boolean') {
         flags.cssModules = opts.cssModules;
     }
@@ -96,6 +108,12 @@ function mapOptsToFlags(opts) {
     if (typeof opts.reactCompiler === 'boolean') {
         flags.reactCompiler = opts.reactCompiler;
     }
+    if (typeof opts.router === 'boolean') {
+        flags.useRouter = opts.router;
+    }
+    if (typeof opts.lint === 'boolean') {
+        flags.useLint = opts.lint;
+    }
     if (typeof opts.install === 'boolean') {
         flags.install = opts.install;
     }

package/build/defaults.d.ts

@@ -1,4 +1,4 @@
-import { type CodeLoader, type InitAnswers, type TestRunner } from './types';
+import { type CodeLoader, type E2eFramework, type InitAnswers, type TestRunner } from './types';
 export type CliFlags = {
     yes?: boolean;
     force?: boolean;
@@ -7,6 +7,8 @@ export type CliFlags = {
     clientOnly?: boolean;
     codeLoader?: CodeLoader;
     testRunner?: TestRunner;
+    e2eFramework?: E2eFramework;
+    useRouter?: boolean;
     cssModules?: boolean;
     clientServerPort?: number;
     serverPort?: number;
@@ -14,6 +16,7 @@ export type CliFlags = {
     presets?: string;
     polyfills?: boolean;
     reactCompiler?: boolean;
+    useLint?: boolean;
     install?: boolean;
 };
 export declare function defaultAnswers(name: string): InitAnswers;

package/build/defaults.js

@@ -10,6 +10,8 @@ function defaultAnswers(name) {
         clientOnly: false,
         codeLoader: 'swc',
         testRunner: 'jest',
+        e2eFramework: 'none',
+        useRouter: false,
         cssModules: true,
         clientServerPort: 8080,
         serverPort: 3000,
@@ -17,6 +19,7 @@ function defaultAnswers(name) {
         presets: '',
         polyfills: false,
         reactCompiler: false,
+        useLint: false,
         install: false,
     };
 }
@@ -26,6 +29,8 @@ const ANSWER_FLAG_KEYS = [
     'clientOnly',
     'codeLoader',
     'testRunner',
+    'e2eFramework',
+    'useRouter',
     'cssModules',
     'clientServerPort',
     'serverPort',
@@ -33,6 +38,7 @@ const ANSWER_FLAG_KEYS = [
     'presets',
     'polyfills',
     'reactCompiler',
+    'useLint',
     'install',
 ];
 function hasAnswerFlags(flags) {
@@ -42,7 +48,7 @@ function hasAnswerFlags(flags) {
 function answersFromFlags(defaultName, flags) {
     var _a, _b;
     const base = defaultAnswers(((_a = flags.name) === null || _a === void 0 ? void 0 : _a.trim()) || defaultName);
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, base), (flags.useRtk === undefined ? {} : { useRtk: flags.useRtk })), (flags.clientOnly === undefined ? {} : { clientOnly: flags.clientOnly })), (flags.codeLoader === undefined ? {} : { codeLoader: flags.codeLoader })), (flags.testRunner === undefined ? {} : { testRunner: flags.testRunner })), (flags.cssModules === undefined ? {} : { cssModules: flags.cssModules })), (flags.clientServerPort === undefined
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, base), (flags.useRtk === undefined ? {} : { useRtk: flags.useRtk })), (flags.clientOnly === undefined ? {} : { clientOnly: flags.clientOnly })), (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
         ? {}
-        : { clientServerPort: flags.clientServerPort })), (flags.serverPort === undefined ? {} : { serverPort: flags.serverPort })), (flags.dockerRegistry === undefined ? {} : { dockerRegistry: flags.dockerRegistry })), (flags.presets === undefined ? {} : { presets: flags.presets })), (flags.polyfills === undefined ? {} : { polyfills: flags.polyfills })), (flags.reactCompiler === undefined ? {} : { reactCompiler: flags.reactCompiler })), (flags.install === undefined ? {} : { install: flags.install })), { name: (((_b = flags.name) === null || _b === void 0 ? void 0 : _b.trim()) || defaultName).trim() });
+        : { clientServerPort: flags.clientServerPort })), (flags.serverPort === undefined ? {} : { serverPort: flags.serverPort })), (flags.dockerRegistry === undefined ? {} : { dockerRegistry: flags.dockerRegistry })), (flags.presets === undefined ? {} : { presets: flags.presets })), (flags.polyfills === undefined ? {} : { polyfills: flags.polyfills })), (flags.reactCompiler === undefined ? {} : { reactCompiler: flags.reactCompiler })), (flags.useLint === undefined ? {} : { useLint: flags.useLint })), (flags.install === undefined ? {} : { install: flags.install })), { name: (((_b = flags.name) === null || _b === void 0 ? void 0 : _b.trim()) || defaultName).trim() });
 }

package/build/install-dependencies.d.ts

@@ -1,3 +1,5 @@
 export type PackageManager = 'yarn' | 'npm';
 export declare function detectPackageManager(): PackageManager;
 export declare function installDependencies(targetDir: string, packageManager?: PackageManager): Promise<void>;
+export declare function hasGitRepository(targetDir: string): boolean;
+export declare function installLefthook(targetDir: string): Promise<void>;

package/build/install-dependencies.js

@@ -5,17 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.detectPackageManager = detectPackageManager;
 exports.installDependencies = installDependencies;
+exports.hasGitRepository = hasGitRepository;
+exports.installLefthook = installLefthook;
 const child_process_1 = require("child_process");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
 const shelljs_1 = __importDefault(require("shelljs"));
 function detectPackageManager() {
     return shelljs_1.default.which('yarn') ? 'yarn' : 'npm';
 }
-function installDependencies(targetDir, packageManager = detectPackageManager()) {
-    const args = packageManager === 'yarn' ? [] : ['install'];
+function runCommand(command, args, cwd) {
     return new Promise((resolve, reject) => {
         var _a, _b;
-        const child = (0, child_process_1.spawn)(packageManager, args, {
-            cwd: targetDir,
+        const child = (0, child_process_1.spawn)(command, args, {
+            cwd,
             stdio: ['ignore', 'pipe', 'pipe'],
             // для windows
             shell: process.platform === 'win32',
@@ -32,8 +35,18 @@ function installDependencies(targetDir, packageManager = detectPackageManager())
                 resolve();
             }
             else {
-                reject(new Error(`${packageManager} ${args.join(' ')} завершился с кодом ${code}\n${output.trim()}`));
+                reject(new Error(`${command} ${args.join(' ')} завершился с кодом ${code}\n${output.trim()}`));
             }
         });
     });
 }
+function installDependencies(targetDir, packageManager = detectPackageManager()) {
+    const args = packageManager === 'yarn' ? [] : ['install'];
+    return runCommand(packageManager, args, targetDir);
+}
+function hasGitRepository(targetDir) {
+    return fs_1.default.existsSync(path_1.default.join(targetDir, '.git'));
+}
+function installLefthook(targetDir) {
+    return runCommand('npx', ['--no-install', 'lefthook', 'install'], targetDir);
+}

package/build/questions.js

@@ -57,6 +57,29 @@ function getQuestions(defaultName, prefill = {}) {
                 { title: 'Vitest', value: 'vitest', description: 'Быстрее, на базе Vite' },
             ],
         },
+        {
+            type: unlessAnswered('e2eFramework', 'select'),
+            name: 'e2eFramework',
+            message: 'e2e фреймворк',
+            initial: 2,
+            choices: [
+                { title: 'Cypress', value: 'cypress', description: 'классический e2e фреймворк' },
+                {
+                    title: 'Playwright',
+                    value: 'playwright',
+                    description: 'Быстрый и современный e2e фреймворк',
+                },
+                { title: 'Без e2e', value: 'none', description: 'Не подключать e2e' },
+            ],
+        },
+        {
+            type: unlessAnswered('useRouter', 'toggle'),
+            name: 'useRouter',
+            message: 'Подключить React Router',
+            initial: false,
+            active: 'да',
+            inactive: 'нет',
+        },
         {
             type: unlessAnswered('cssModules', 'toggle'),
             name: 'cssModules',
@@ -114,6 +137,14 @@ function getQuestions(defaultName, prefill = {}) {
             active: 'да',
             inactive: 'нет',
         },
+        {
+            type: unlessAnswered('useLint', 'toggle'),
+            name: 'useLint',
+            message: 'Подключить arui-presets-lint',
+            initial: false,
+            active: 'да',
+            inactive: 'нет',
+        },
         {
             type: unlessAnswered('install', 'toggle'),
             name: 'install',

package/build/run.js

@@ -67,10 +67,32 @@ function runInit() {
                 spinner.fail(chalk_1.default.red('Не удалось установить зависимости'));
                 throw error;
             }
+            if (initAnswers.useLint) {
+                yield tryInstallLefthook(targetDir);
+            }
         }
         printNextSteps(targetDir, baseCwd, initAnswers, packageManager);
     });
 }
+function tryInstallLefthook(targetDir) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!(0, install_dependencies_1.hasGitRepository)(targetDir)) {
+            console.log(`  ${chalk_1.default.dim('lefthook: пропущено (нет .git). После git init выполните: npx --no-install lefthook install')}`);
+            return;
+        }
+        const spinner = (0, ora_1.default)({ text: 'Устанавливаю git-хуки lefthook…', color: 'cyan' }).start();
+        try {
+            yield (0, install_dependencies_1.installLefthook)(targetDir);
+            spinner.succeed(chalk_1.default.green('Git-хуки lefthook установлены'));
+        }
+        catch (error) {
+            spinner.fail(chalk_1.default.yellow('Не удалось установить lefthook'));
+            if (error instanceof Error && error.message) {
+                console.log(`  ${chalk_1.default.dim(error.message)}`);
+            }
+        }
+    });
+}
 function resolveAnswers(defaultName, flags) {
     return __awaiter(this, void 0, void 0, function* () {
         const base = (0, defaults_1.answersFromFlags)(defaultName, flags);
@@ -115,6 +137,9 @@ function mergePromptAnswers(base, answers) {
     if (answers.testRunner !== undefined) {
         merged.testRunner = answers.testRunner;
     }
+    if (answers.e2eFramework !== undefined) {
+        merged.e2eFramework = answers.e2eFramework;
+    }
     if (answers.cssModules !== undefined) {
         merged.cssModules = Boolean(answers.cssModules);
     }
@@ -136,6 +161,12 @@ function mergePromptAnswers(base, answers) {
     if (answers.reactCompiler !== undefined) {
         merged.reactCompiler = Boolean(answers.reactCompiler);
     }
+    if (answers.useRouter !== undefined) {
+        merged.useRouter = Boolean(answers.useRouter);
+    }
+    if (answers.useLint !== undefined) {
+        merged.useLint = Boolean(answers.useLint);
+    }
     if (answers.install !== undefined) {
         merged.install = Boolean(answers.install);
     }
@@ -153,6 +184,9 @@ function printSuccess(context, targetDir, fileCount) {
         chalk_1.default.dim(context.clientOnly ? 'clientOnly' : 'SSR'),
         chalk_1.default.dim(context.codeLoader),
         chalk_1.default.dim(context.testRunner),
+        ...(context.e2eFramework !== 'none' ? [chalk_1.default.dim(context.e2eFramework)] : []),
+        ...(context.useRouter ? [chalk_1.default.dim('router')] : []),
+        ...(context.useLint ? [chalk_1.default.dim('lint')] : []),
     ].join(chalk_1.default.dim(' · '));
     console.log();
     console.log(`  ${chalk_1.default.green('✔')} ${chalk_1.default.bold('Готово!')} ${chalk_1.default.dim(`проект «${context.name}» создан`)}`);
@@ -181,6 +215,12 @@ function printNextSteps(targetDir, baseCwd, answers, packageManager) {
     if (!answers.install) {
         steps.push(installCommand);
     }
+    if (answers.useLint && (!answers.install || !(0, install_dependencies_1.hasGitRepository)(targetDir))) {
+        steps.push('npx --no-install lefthook install');
+    }
+    if (answers.useLint) {
+        steps.push(packageManager === 'yarn' ? 'yarn lint' : 'npm run lint');
+    }
     steps.push(startCommand);
     console.log();
     console.log(`  ${chalk_1.default.bold('Дальше')}`);

package/build/templates/app-component.template.js

@@ -1,42 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.appComponentTemplate = appComponentTemplate;
+function tsString(value) {
+    return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+}
 function appComponentTemplate(ctx) {
+    if (ctx.useRouter) {
+        return `import React from 'react';
+
+import { AppRoutes } from '../routes';
+
+export function App() {
+    return <AppRoutes />;
+}
+`;
+    }
     const styleImport = ctx.cssModules
         ? "import styles from './app.module.css';"
         : "import './app.css';";
     const rootClass = ctx.cssModules ? '{styles.root}' : "'app'";
     const titleClass = ctx.cssModules ? '{styles.title}' : "'app__title'";
+    const appNameLiteral = tsString(ctx.name);
     const coreImports = `import { Button } from '@alfalab/core-components/button';
 import { Gap } from '@alfalab/core-components/gap';
 import { Typography } from '@alfalab/core-components/typography';`;
     const view = (count) => `        <div className=${rootClass}>
             <Typography.Title view='medium' tag='h1' className=${titleClass}>
-                {${JSON.stringify(ctx.name)}}
+                {appName}
             </Typography.Title>
-
             <Gap size={16} />
-
             <Typography.Text view='primary-medium'>Счетчик: {${count}}</Typography.Text>
-
             <Gap size={16} />`;
     if (ctx.useRtk) {
         return `import React from 'react';
 
 ${coreImports}
 
-import { useAppDispatch, useAppSelector } from '../store/hooks';
 import { decrement, increment } from '../store/counter-slice';
+import { useAppDispatch, useAppSelector } from '../store/hooks';
 
 ${styleImport}
 
+const appName = ${appNameLiteral};
+
 export function App() {
     const count = useAppSelector((state) => state.counter.value);
     const dispatch = useAppDispatch();
 
     return (
 ${view('count')}
-
             <Button view='accent' size={48} onClick={() => dispatch(increment())}>
                 +1
             </Button>{' '}
@@ -54,12 +66,13 @@ ${coreImports}
 
 ${styleImport}
 
+const appName = ${appNameLiteral};
+
 export function App() {
     const [count, setCount] = useState(0);
 
     return (
 ${view('count')}
-
             <Button view='accent' size={48} onClick={() => setCount((prev) => prev + 1)}>
                 +1
             </Button>{' '}

package/build/templates/app-styles.template.js

@@ -2,30 +2,61 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.appStylesFileName = appStylesFileName;
 exports.appStylesTemplate = appStylesTemplate;
+const CORE_COMPONENTS_VARS_IMPORT = "@import '@alfalab/core-components/vars';";
 function appStylesFileName(ctx) {
     return ctx.cssModules ? 'app.module.css' : 'app.css';
 }
 function appStylesTemplate(ctx) {
     if (ctx.cssModules) {
-        return `.root {
-    padding: 16px;
-    font-family: sans-serif;
+        const nav = ctx.useRouter
+            ? `
+.nav {
+    display: flex;
+    align-items: center;
+    padding: var(--gap-16);
+}
+
+.navLink {
+    color: var(--color-light-text-primary);
+    text-decoration: none;
+}
+`
+            : '';
+        return `${CORE_COMPONENTS_VARS_IMPORT}
+
+.root {
+    padding: var(--gap-16);
 }
 
 .title {
-    margin: 0 0 12px;
-    font-size: 24px;
+    margin: var(--gap-0) var(--gap-0) var(--gap-12);
+    @mixin headline_small;
 }
-`;
+${nav}`;
     }
-    return `.app {
-    padding: 16px;
-    font-family: sans-serif;
+    const nav = ctx.useRouter
+        ? `
+.app__nav {
+    display: flex;
+    align-items: center;
+    padding: var(--gap-16);
+}
+
+.app__nav-link {
+    color: var(--color-light-text-primary);
+    text-decoration: none;
+}
+`
+        : '';
+    return `${CORE_COMPONENTS_VARS_IMPORT}
+
+.app {
+    padding: var(--gap-16);
 }
 
 .app__title {
-    margin: 0 0 12px;
-    font-size: 24px;
+    margin: var(--gap-0) var(--gap-0) var(--gap-12);
+    @mixin headline_small;
 }
-`;
+${nav}`;
 }

package/build/templates/arui-scripts-config.template.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.aruiScriptsConfigTemplate = aruiScriptsConfigTemplate;
-// Безопасная вставка строки в конфиг
+// Безопасная вставка строки в конфиг (одинарные кавычки как у prettier)
 function tsString(value) {
-    return JSON.stringify(value);
+    return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
 }
 function aruiScriptsConfigTemplate(ctx) {
     const lines = [];