create-arui-scripts-app 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

package/README.md

@@ -32,6 +32,7 @@ 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
@@ -43,6 +44,8 @@ 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)
 - опциональная установка зависимостей сразу после генерации
@@ -59,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` и конфиги `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).

package/build/build-context.js

@@ -23,6 +23,9 @@ 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) {
@@ -50,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;
     }
@@ -64,6 +71,12 @@ 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;
     }
@@ -73,6 +86,8 @@ function buildContext(answers, aruiScriptsVersion) {
         clientOnly: answers.clientOnly,
         codeLoader: answers.codeLoader,
         testRunner: answers.testRunner,
+        e2eFramework: answers.e2eFramework,
+        useRouter: answers.useRouter,
         cssModules: answers.cssModules,
         clientServerPort: answers.clientServerPort,
         serverPort: answers.serverPort,

package/build/build-file-map.js

@@ -7,9 +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");
@@ -23,7 +26,7 @@ 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),
@@ -46,11 +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))
@@ -77,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;
     }
@@ -98,6 +108,9 @@ 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;
     }

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;

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,
@@ -27,6 +29,8 @@ const ANSWER_FLAG_KEYS = [
     'clientOnly',
     'codeLoader',
     'testRunner',
+    'e2eFramework',
+    'useRouter',
     'cssModules',
     'clientServerPort',
     'serverPort',
@@ -44,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(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.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/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',

package/build/run.js

@@ -137,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);
     }
@@ -158,6 +161,9 @@ 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);
     }
@@ -178,6 +184,8 @@ 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();

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

@@ -5,6 +5,16 @@ 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';";

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

@@ -2,12 +2,29 @@
 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 {
+        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);
 }
 
@@ -15,9 +32,25 @@ function appStylesTemplate(ctx) {
     margin: var(--gap-0) var(--gap-0) var(--gap-12);
     @mixin headline_small;
 }
-`;
+${nav}`;
     }
-    return `.app {
+    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);
 }
 
@@ -25,5 +58,5 @@ function appStylesTemplate(ctx) {
     margin: var(--gap-0) var(--gap-0) var(--gap-12);
     @mixin headline_small;
 }
-`;
+${nav}`;
 }

package/build/templates/client-entry.template.js

@@ -9,14 +9,27 @@ const HMR_BLOCK = `if (process.env.NODE_ENV !== 'production' && module.hot) {
     });
 }
 `;
+function wrapWithRouter(jsx, ctx) {
+    if (!ctx.useRouter) {
+        return jsx;
+    }
+    return `<BrowserRouter>${jsx}</BrowserRouter>`;
+}
 function clientEntryTemplate(ctx) {
     return ctx.clientOnly ? clientOnlyEntryTemplate(ctx) : ssrEntryTemplate(ctx);
 }
+function routerImport(ctx) {
+    return ctx.useRouter ? "\nimport { BrowserRouter } from 'react-router-dom';" : '';
+}
 function ssrEntryTemplate(ctx) {
     if (ctx.useRtk) {
+        const appTree = wrapWithRouter(`
+        <Provider store={store}>
+            <App />
+        </Provider>`, ctx);
         return `import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
-import { Provider } from 'react-redux';
+import { Provider } from 'react-redux';${routerImport(ctx)}
 
 import { App } from './components/app';
 import { makeStore, type RootState } from './store';
@@ -31,32 +44,30 @@ const store = makeStore(window.__PRELOADED_STATE__);
 const targetElement = document.getElementById('react-app');
 
 const root = hydrateRoot(
-    targetElement!,
-    <Provider store={store}>
-        <App />
-    </Provider>,
+    targetElement!,${appTree},
 );
 
 function render(AppComponent: typeof App) {
-    root.render(
+    root.render(${wrapWithRouter(`
         <Provider store={store}>
             <AppComponent />
-        </Provider>,
+        </Provider>`, ctx)},
     );
 }
 
 ${HMR_BLOCK}`;
     }
+    const appTree = wrapWithRouter('<App />', ctx);
     return `import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
+import { hydrateRoot } from 'react-dom/client';${routerImport(ctx)}
 
 import { App } from './components/app';
 
 const targetElement = document.getElementById('react-app');
-const root = hydrateRoot(targetElement!, <App />);
+const root = hydrateRoot(targetElement!, ${appTree});
 
 function render(AppComponent: typeof App) {
-    root.render(<AppComponent />);
+    root.render(${wrapWithRouter('<AppComponent />', ctx)});
 }
 
 ${HMR_BLOCK}`;
@@ -65,7 +76,7 @@ function clientOnlyEntryTemplate(ctx) {
     if (ctx.useRtk) {
         return `import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { Provider } from 'react-redux';
+import { Provider } from 'react-redux';${routerImport(ctx)}
 
 import { App } from './components/app';
 import { makeStore } from './store';
@@ -75,10 +86,10 @@ const targetElement = document.getElementById('react-app');
 const root = createRoot(targetElement!);
 
 function render(AppComponent: typeof App) {
-    root.render(
+    root.render(${wrapWithRouter(`
         <Provider store={store}>
             <AppComponent />
-        </Provider>,
+        </Provider>`, ctx)},
     );
 }
 
@@ -87,7 +98,7 @@ render(App);
 ${HMR_BLOCK}`;
     }
     return `import React from 'react';
-import { createRoot } from 'react-dom/client';
+import { createRoot } from 'react-dom/client';${routerImport(ctx)}
 
 import { App } from './components/app';
 
@@ -95,7 +106,7 @@ const targetElement = document.getElementById('react-app');
 const root = createRoot(targetElement!);
 
 function render(AppComponent: typeof App) {
-    root.render(<AppComponent />);
+    root.render(${wrapWithRouter('<AppComponent />', ctx)});
 }
 
 render(App);

package/build/templates/e2e-cypress.template.d.ts

@@ -0,0 +1,5 @@
+import { type TemplateContext } from '../types';
+export declare function cypressConfigTemplate(ctx: TemplateContext): string;
+export declare function cypressSupportE2eTemplate(): string;
+export declare function cypressSupportCommandsTemplate(): string;
+export declare function cypressExampleSpecTemplate(): string;

package/build/templates/e2e-cypress.template.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cypressConfigTemplate = cypressConfigTemplate;
+exports.cypressSupportE2eTemplate = cypressSupportE2eTemplate;
+exports.cypressSupportCommandsTemplate = cypressSupportCommandsTemplate;
+exports.cypressExampleSpecTemplate = cypressExampleSpecTemplate;
+function baseUrl(ctx) {
+    return `http://localhost:${ctx.clientServerPort}`;
+}
+function cypressConfigTemplate(ctx) {
+    return `import { defineConfig } from 'cypress';
+
+export default defineConfig({
+    video: false,
+    e2e: {
+        baseUrl: '${baseUrl(ctx)}',
+        specPattern: 'cypress/e2e/**/*.cy.{ts,tsx}',
+        supportFile: 'cypress/support/e2e.ts',
+    },
+});
+`;
+}
+function cypressSupportE2eTemplate() {
+    return `import './commands';
+`;
+}
+function cypressSupportCommandsTemplate() {
+    return `// Кастомные команды Cypress.
+// Пример:
+// Cypress.Commands.add('login', (email, password) => { ... })
+
+export {};
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace Cypress {
+        interface Chainable {
+            // login(email: string, password: string): Chainable<void>;
+        }
+    }
+}
+`;
+}
+function cypressExampleSpecTemplate() {
+    return `describe('home page', () => {
+    it('loads', () => {
+        cy.visit('/');
+        cy.get('body').should('be.visible');
+    });
+});
+`;
+}

package/build/templates/e2e-playwright.template.d.ts

@@ -0,0 +1,4 @@
+import { type TemplateContext } from '../types';
+export declare function playwrightConfigTemplate(ctx: TemplateContext): string;
+export declare function playwrightHelpersTemplate(): string;
+export declare function playwrightExampleSpecTemplate(): string;

package/build/templates/e2e-playwright.template.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.playwrightConfigTemplate = playwrightConfigTemplate;
+exports.playwrightHelpersTemplate = playwrightHelpersTemplate;
+exports.playwrightExampleSpecTemplate = playwrightExampleSpecTemplate;
+function baseUrl(ctx) {
+    return `http://localhost:${ctx.clientServerPort}`;
+}
+function playwrightConfigTemplate(ctx) {
+    const url = baseUrl(ctx);
+    return `import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+    testDir: './e2e',
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: 'html',
+    use: {
+        baseURL: '${url}',
+        trace: 'on-first-retry',
+    },
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+    ],
+    webServer: {
+        command: 'yarn start',
+        url: '${url}',
+        reuseExistingServer: !process.env.CI,
+    },
+});
+`;
+}
+function playwrightHelpersTemplate() {
+    return `import { type Page } from '@playwright/test';
+
+export async function gotoHome(page: Page): Promise<void> {
+    await page.goto('/');
+}
+`;
+}
+function playwrightExampleSpecTemplate() {
+    return `import { expect, test } from '@playwright/test';
+
+import { gotoHome } from './helpers';
+
+test('home page loads', async ({ page }) => {
+    await gotoHome(page);
+    await expect(page.locator('body')).toBeVisible();
+});
+`;
+}

package/build/templates/misc.template.d.ts

@@ -1,5 +1,5 @@
 import { type TemplateContext } from '../types';
-export declare function gitignoreTemplate(): string;
+export declare function gitignoreTemplate(ctx?: TemplateContext): string;
 export declare function globalDefinitionsTemplate(): string;
 export declare function polyfillsTemplate(): string;
 export declare function yarnrcTemplate(): string;

package/build/templates/misc.template.js

@@ -5,7 +5,23 @@ exports.globalDefinitionsTemplate = globalDefinitionsTemplate;
 exports.polyfillsTemplate = polyfillsTemplate;
 exports.yarnrcTemplate = yarnrcTemplate;
 exports.readmeTemplate = readmeTemplate;
-function gitignoreTemplate() {
+function gitignoreTemplate(ctx) {
+    let e2eIgnores = '';
+    if ((ctx === null || ctx === void 0 ? void 0 : ctx.e2eFramework) === 'playwright') {
+        e2eIgnores = `
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/
+`;
+    }
+    else if ((ctx === null || ctx === void 0 ? void 0 : ctx.e2eFramework) === 'cypress') {
+        e2eIgnores = `
+cypress/videos/
+cypress/screenshots/
+cypress/downloads/
+`;
+    }
     return `node_modules
 .build
 build.tar
@@ -18,7 +34,7 @@ build.tar
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-`;
+${e2eIgnores}`;
 }
 function globalDefinitionsTemplate() {
     return `declare module '*.png' {
@@ -62,6 +78,41 @@ function readmeTemplate(ctx) {
     yarn lint         - eslint, stylelint, prettier, knip, secretlint
     yarn lint:fix    - автофикс eslint/stylelint + format
     yarn format       - prettier
+`
+        : '';
+    let e2eSection = '';
+    if (ctx.e2eFramework === 'playwright') {
+        e2eSection = `
+## E2E (Playwright)
+
+Перед первым запуском установите браузеры:
+
+    yarn playwright install
+
+Команды:
+
+    yarn e2e      - headless-прогон
+    yarn e2e:ui   - UI-режим Playwright
+
+Dev-сервер поднимается автоматически через webServer в playwright.config.ts.
+`;
+    }
+    else if (ctx.e2eFramework === 'cypress') {
+        e2eSection = `
+## E2E (Cypress)
+
+Сначала запустите приложение (\`yarn start\`), затем в другом терминале:
+
+    yarn e2e       - headless-прогон
+    yarn e2e:open  - интерактивный Cypress
+`;
+    }
+    const routerSection = ctx.useRouter
+        ? `
+## Маршруты
+
+    /       - главная (Home)
+    /about  - о проекте (About)
 `
         : '';
     return `# ${ctx.name}
@@ -76,5 +127,5 @@ function readmeTemplate(ctx) {
 ## Установка
 
     yarn install
-`;
+${routerSection}${e2eSection}`;
 }

package/build/templates/package-json.template.js

@@ -31,6 +31,14 @@ function packageJsonTemplate(ctx) {
         scripts['lint:fix'] =
             'yarn lint:styles --fix && yarn lint:scripts --fix && yarn format && yarn lint:secrets';
     }
+    if (ctx.e2eFramework === 'playwright') {
+        scripts.e2e = 'playwright test';
+        scripts['e2e:ui'] = 'playwright test --ui';
+    }
+    else if (ctx.e2eFramework === 'cypress') {
+        scripts.e2e = 'cypress run';
+        scripts['e2e:open'] = 'cypress open';
+    }
     const pkg = {
         name: ctx.name,
         version: '0.1.0',

package/build/templates/router.template.d.ts

@@ -0,0 +1,5 @@
+import { type TemplateContext } from '../types';
+export declare function layoutTemplate(ctx: TemplateContext): string;
+export declare function homePageTemplate(ctx: TemplateContext): string;
+export declare function aboutPageTemplate(ctx: TemplateContext): string;
+export declare function routesTemplate(): string;

package/build/templates/router.template.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.layoutTemplate = layoutTemplate;
+exports.homePageTemplate = homePageTemplate;
+exports.aboutPageTemplate = aboutPageTemplate;
+exports.routesTemplate = routesTemplate;
+function tsString(value) {
+    return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+}
+function layoutTemplate(ctx) {
+    const styleImport = ctx.cssModules
+        ? "import styles from './app.module.css';"
+        : "import './app.css';";
+    const navClass = ctx.cssModules ? '{styles.nav}' : "'app__nav'";
+    const linkClass = ctx.cssModules ? '{styles.navLink}' : "'app__nav-link'";
+    return `import React from 'react';
+import { Link, Outlet } from 'react-router-dom';
+
+${styleImport}
+
+export function Layout() {
+    return (
+        <div>
+            <nav className=${navClass}>
+                <Link to='/' className=${linkClass}>
+                    Главная
+                </Link>
+                <span aria-hidden={true}> · </span>
+                <Link to='/about' className=${linkClass}>
+                    О проекте
+                </Link>
+            </nav>
+            <Outlet />
+        </div>
+    );
+}
+`;
+}
+function homePageTemplate(ctx) {
+    const styleImport = ctx.cssModules
+        ? "import styles from '../components/app.module.css';"
+        : "import '../components/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';`;
+    if (ctx.useRtk) {
+        return `import React from 'react';
+
+${coreImports}
+
+import { decrement, increment } from '../store/counter-slice';
+import { useAppDispatch, useAppSelector } from '../store/hooks';
+
+${styleImport}
+
+const appName = ${appNameLiteral};
+
+export function HomePage() {
+    const count = useAppSelector((state) => state.counter.value);
+    const dispatch = useAppDispatch();
+
+    return (
+        <div className=${rootClass}>
+            <Typography.Title view='medium' tag='h1' className=${titleClass}>
+                {appName}
+            </Typography.Title>
+            <Gap size={16} />
+            <Typography.Text view='primary-medium'>Счетчик: {count}</Typography.Text>
+            <Gap size={16} />
+            <Button view='accent' size={48} onClick={() => dispatch(increment())}>
+                +1
+            </Button>{' '}
+            <Button view='secondary' size={48} onClick={() => dispatch(decrement())}>
+                -1
+            </Button>
+        </div>
+    );
+}
+`;
+    }
+    return `import React, { useState } from 'react';
+
+${coreImports}
+
+${styleImport}
+
+const appName = ${appNameLiteral};
+
+export function HomePage() {
+    const [count, setCount] = useState(0);
+
+    return (
+        <div className=${rootClass}>
+            <Typography.Title view='medium' tag='h1' className=${titleClass}>
+                {appName}
+            </Typography.Title>
+            <Gap size={16} />
+            <Typography.Text view='primary-medium'>Счетчик: {count}</Typography.Text>
+            <Gap size={16} />
+            <Button view='accent' size={48} onClick={() => setCount((prev) => prev + 1)}>
+                +1
+            </Button>{' '}
+            <Button view='secondary' size={48} onClick={() => setCount((prev) => prev - 1)}>
+                -1
+            </Button>
+        </div>
+    );
+}
+`;
+}
+function aboutPageTemplate(ctx) {
+    const styleImport = ctx.cssModules
+        ? "import styles from '../components/app.module.css';"
+        : "import '../components/app.css';";
+    const rootClass = ctx.cssModules ? '{styles.root}' : "'app'";
+    const titleClass = ctx.cssModules ? '{styles.title}' : "'app__title'";
+    return `import React from 'react';
+
+import { Typography } from '@alfalab/core-components/typography';
+
+${styleImport}
+
+export function AboutPage() {
+    return (
+        <div className=${rootClass}>
+            <Typography.Title view='medium' tag='h1' className=${titleClass}>
+                О проекте
+            </Typography.Title>
+            <Typography.Text view='primary-medium'>
+                Страница для React Router
+            </Typography.Text>
+        </div>
+    );
+}
+`;
+}
+function routesTemplate() {
+    return `import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import { Layout } from './components/layout';
+import { AboutPage } from './pages/about';
+import { HomePage } from './pages/home';
+
+export function AppRoutes() {
+    return (
+        <Routes>
+            <Route element={<Layout />}>
+                <Route index={true} element={<HomePage />} />
+                <Route path='about' element={<AboutPage />} />
+            </Route>
+        </Routes>
+    );
+}
+`;
+}

package/build/templates/server-entry.template.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.serverEntryTemplate = serverEntryTemplate;
 function serverEntryTemplate(ctx) {
     const reduxImport = ctx.useRtk ? "\nimport { Provider } from 'react-redux';" : '';
+    const routerImport = ctx.useRouter ? "\nimport { StaticRouter } from 'react-router';" : '';
     const storeImport = ctx.useRtk ? "\nimport { makeStore } from '../client/store';" : '';
     const renderPageFn = ctx.useRtk
         ? `function renderPage(appHtml: string, assets: Assets, preloadedState: string): string {
@@ -18,24 +19,41 @@ function serverEntryTemplate(ctx) {
 
     return \`<!DOCTYPE html><html lang="ru"><head><meta charset="utf-8" /><base href="/" />\${css}</head><body><div id="react-app">\${appHtml}</div>\${js}</body></html>\`;
 }`;
+    const appJsx = (() => {
+        let inner = '<App />';
+        if (ctx.useRtk) {
+            inner = `<Provider store={store}>
+                    ${inner}
+                </Provider>`;
+        }
+        if (ctx.useRouter) {
+            inner = `<StaticRouter location={location}>
+                    ${inner}
+                </StaticRouter>`;
+        }
+        return inner;
+    })();
     const handlerBody = ctx.useRtk
         ? `            const assets = await readAssetsManifest();
             const store = makeStore();
             const appHtml = renderToString(
-                <Provider store={store}>
-                    <App />
-                </Provider>,
+                ${appJsx},
             );
             // Экранируем символ "<", чтобы через состояние нельзя было внедрить теги в HTML
             const preloadedState = JSON.stringify(store.getState()).replace(/</g, '\\\\u003c');
 
             return renderPage(appHtml, assets, preloadedState);`
         : `            const assets = await readAssetsManifest();
-            const appHtml = renderToString(<App />);
+            const appHtml = renderToString(${appJsx});
 
             return renderPage(appHtml, assets);`;
+    const routePath = ctx.useRouter ? '/{path*}' : '/';
+    const locationLine = ctx.useRouter
+        ? `
+            const location = request.url.pathname;`
+        : '';
     return `import React from 'react';
-import { renderToString } from 'react-dom/server';${reduxImport}
+import { renderToString } from 'react-dom/server';${reduxImport}${routerImport}
 import Hapi from '@hapi/hapi';
 import Inert from '@hapi/inert';
 import path from 'node:path';
@@ -77,8 +95,8 @@ async function start() {
 
     server.route({
         method: 'GET',
-        path: '/',
-        handler: async () => {
+        path: '${routePath}',
+        handler: async (${ctx.useRouter ? 'request' : ''}) => {${locationLine}
 ${handlerBody}
         },
     });

package/build/templates/tsconfig.template.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tsconfigTemplate = tsconfigTemplate;
 function tsconfigTemplate(ctx) {
-    const types = ctx.testRunner === 'jest'
-        ? '["jest", "node", "webpack-env"]'
-        : '["node", "webpack-env"]';
+    const types = ctx.testRunner === 'jest' ? '["jest", "node", "webpack-env"]' : '["node", "webpack-env"]';
     return `{
     "extends": "arui-scripts/tsconfig.json",
     "include": ["global-definitions.d.ts", "src/**/*.ts", "src/**/*.tsx"],

package/build/types.d.ts

@@ -1,11 +1,14 @@
 export type CodeLoader = 'swc' | 'babel' | 'tsc';
 export type TestRunner = 'jest' | 'vitest';
+export type E2eFramework = 'cypress' | 'playwright' | 'none';
 export type InitAnswers = {
     name: string;
     useRtk: boolean;
     clientOnly: boolean;
     codeLoader: CodeLoader;
     testRunner: TestRunner;
+    e2eFramework: E2eFramework;
+    useRouter: boolean;
     cssModules: boolean;
     clientServerPort: number;
     serverPort: number;
@@ -22,6 +25,8 @@ export type TemplateContext = {
     clientOnly: boolean;
     codeLoader: CodeLoader;
     testRunner: TestRunner;
+    e2eFramework: E2eFramework;
+    useRouter: boolean;
     cssModules: boolean;
     clientServerPort: number;
     serverPort: number;

package/build/versions.d.ts

@@ -1,4 +1,4 @@
 /** Версия arui-scripts, которую scaffold кладёт в package.json нового проекта.
  * Генерируется скриптом scripts/sync-arui-scripts-version.js при сборке.
  */
-export declare const DEFAULT_ARUI_SCRIPTS_VERSION = "23.3.1";
+export declare const DEFAULT_ARUI_SCRIPTS_VERSION = "23.5.1";

package/build/versions.js

@@ -4,4 +4,4 @@ exports.DEFAULT_ARUI_SCRIPTS_VERSION = void 0;
 /** Версия arui-scripts, которую scaffold кладёт в package.json нового проекта.
  * Генерируется скриптом scripts/sync-arui-scripts-version.js при сборке.
  */
-exports.DEFAULT_ARUI_SCRIPTS_VERSION = '23.3.1';
+exports.DEFAULT_ARUI_SCRIPTS_VERSION = '23.5.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-arui-scripts-app",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "CLI для генерации нового react приложения на arui-scripts",
   "license": "MPL-2.0",
   "repository": {