create-arui-scripts-app 1.0.0 → 1.2.0

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

@@ -3,21 +3,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.clientEntryTemplate = clientEntryTemplate;
 const HMR_BLOCK = `if (process.env.NODE_ENV !== 'production' && module.hot) {
     module.hot.accept('./components/app', () => {
-        // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-        const NextApp = require('./components/app').App;
+        const mod = require('./components/app') as { App: typeof App };
 
-        render(NextApp);
+        render(mod.App);
     });
 }
 `;
+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';
@@ -32,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}`;
@@ -66,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';
@@ -76,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)},
     );
 }
 
@@ -88,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';
 
@@ -96,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/lint.template.d.ts

@@ -0,0 +1,4 @@
+export declare function eslintConfigTemplate(): string;
+export declare function knipConfigTemplate(): string;
+export declare function secretlintConfigTemplate(): string;
+export declare function lefthookConfigTemplate(): string;

package/build/templates/lint.template.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eslintConfigTemplate = eslintConfigTemplate;
+exports.knipConfigTemplate = knipConfigTemplate;
+exports.secretlintConfigTemplate = secretlintConfigTemplate;
+exports.lefthookConfigTemplate = lefthookConfigTemplate;
+function eslintConfigTemplate() {
+    return `import { defineConfig, eslintConfig, TYPESCRIPT_SCRIPTS_SCOPE } from 'arui-presets-lint/eslint';
+
+export default defineConfig(eslintConfig, [
+    {
+        languageOptions: {
+            parserOptions: {
+                projectService: {
+                    allowDefaultProject: [
+                        'arui-scripts.config.ts',
+                        'eslint.config.mts',
+                        'knip.ts',
+                        'vitest.config.ts',
+                    ],
+                },
+            },
+        },
+        files: [TYPESCRIPT_SCRIPTS_SCOPE],
+    },
+]);
+`;
+}
+function knipConfigTemplate() {
+    return `import baseConfig from 'arui-presets-lint/knip';
+
+export default {
+    ...baseConfig,
+    // ts-jest подключается через jest.preset arui-scripts, прямых импортов в коде нет
+    ignoreDependencies: [...baseConfig.ignoreDependencies, 'ts-jest'],
+};
+`;
+}
+function secretlintConfigTemplate() {
+    return `${JSON.stringify({
+        rules: [
+            {
+                id: '@secretlint/secretlint-rule-preset-recommend',
+            },
+        ],
+    }, null, 4)}\n`;
+}
+function lefthookConfigTemplate() {
+    return `extends:
+    - ./node_modules/arui-presets-lint/lefthook/index.yml
+`;
+}

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' {
@@ -57,6 +73,48 @@ defaultSemverRangePrefix: ""
 }
 function readmeTemplate(ctx) {
     const testCommand = ctx.testRunner === 'jest' ? 'arui-scripts test' : 'arui-scripts test:vitest';
+    const lintSection = ctx.useLint
+        ? `
+    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}
 
 Проект создан с помощью arui-scripts.
@@ -65,10 +123,9 @@ function readmeTemplate(ctx) {
 
     arui-scripts start - запуск dev-сервера
     arui-scripts build - production-сборка
-    ${testCommand}${' '.repeat(Math.max(1, 20 - testCommand.length))}- запуск тестов
-
+    ${testCommand}${' '.repeat(Math.max(1, 20 - testCommand.length))}- запуск тестов${lintSection}
 ## Установка
 
     yarn install
-`;
+${routerSection}${e2eSection}`;
 }

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

@@ -18,6 +18,27 @@ function packageJsonTemplate(ctx) {
     if (ctx.dockerRegistry) {
         scripts['docker-build'] = 'arui-scripts docker-build';
     }
+    if (ctx.useLint) {
+        scripts['lint:styles'] = 'arui-presets-lint styles --max-warnings=0';
+        scripts['lint:scripts'] = 'arui-presets-lint scripts --max-warnings=0';
+        scripts.format = 'arui-presets-lint format';
+        scripts['format:check'] = 'arui-presets-lint format:check';
+        scripts['lint:unused'] = 'arui-presets-lint knip';
+        scripts['lint:unused:fix'] = 'arui-presets-lint knip --fix';
+        scripts['lint:secrets'] = 'arui-presets-lint secretlint';
+        scripts.lint =
+            'yarn lint:styles && yarn lint:scripts && yarn format:check && yarn lint:unused && yarn lint:secrets';
+        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',
@@ -27,6 +48,11 @@ function packageJsonTemplate(ctx) {
             node: '>=24.11.1',
         },
     };
+    if (ctx.useLint) {
+        pkg.prettier = 'arui-presets-lint/prettier';
+        pkg.stylelint = { extends: 'arui-presets-lint/stylelint' };
+        pkg.commitlint = { extends: './node_modules/arui-presets-lint/commitlint' };
+    }
     if (ctx.testRunner === 'jest') {
         pkg.jest = { preset: 'arui-scripts' };
     }

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>
+    );
+}
+`;
+}