create-arui-scripts-app 1.0.0

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

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serverEntryTemplate = serverEntryTemplate;
+function serverEntryTemplate(ctx) {
+    const reduxImport = ctx.useRtk ? "\nimport { Provider } from 'react-redux';" : '';
+    const storeImport = ctx.useRtk ? "\nimport { makeStore } from '../client/store';" : '';
+    const renderPageFn = ctx.useRtk
+        ? `function renderPage(appHtml: string, assets: Assets, preloadedState: string): string {
+    const css = assets.css
+        .map((href) => '<link rel="stylesheet" href="/' + href + '" />')
+        .join('');
+    const js = assets.js.map((src) => '<script src="/' + src + '"></script>').join('');
+    const state = '<script>window.__PRELOADED_STATE__ = ' + preloadedState + ';</script>';
+
+    return (
+        '<!DOCTYPE html><html lang="ru"><head><meta charset="utf-8" /><base href="/" />' +
+        css +
+        '</head><body><div id="react-app">' +
+        appHtml +
+        '</div>' +
+        state +
+        js +
+        '</body></html>'
+    );
+}`
+        : `function renderPage(appHtml: string, assets: Assets): string {
+    const css = assets.css
+        .map((href) => '<link rel="stylesheet" href="/' + href + '" />')
+        .join('');
+    const js = assets.js.map((src) => '<script src="/' + src + '"></script>').join('');
+
+    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 handlerBody = ctx.useRtk
+        ? `            const assets = await readAssetsManifest();
+            const store = makeStore();
+            const appHtml = renderToString(
+                <Provider store={store}>
+                    <App />
+                </Provider>,
+            );
+            // Экранируем символ "<", чтобы через состояние нельзя было внедрить теги в HTML
+            const preloadedState = JSON.stringify(store.getState()).replace(/</g, '\\\\u003c');
+
+            return renderPage(appHtml, assets, preloadedState);`
+        : `            const assets = await readAssetsManifest();
+            const appHtml = renderToString(<App />);
+
+            return renderPage(appHtml, assets);`;
+    return `import path from 'path';
+
+import Hapi from '@hapi/hapi';
+import Inert from '@hapi/inert';
+import React from 'react';
+import { renderToString } from 'react-dom/server';${reduxImport}
+
+import { readAssetsManifest } from '@alfalab/scripts-server';
+
+import { App } from '../client/components/app';${storeImport}
+
+const PORT = ${ctx.serverPort};
+
+type Assets = {
+    css: string[];
+    js: string[];
+};
+
+${renderPageFn}
+
+async function start() {
+    const server = Hapi.server({
+        port: PORT,
+        routes: {
+            files: {
+                relativeTo: path.join(process.cwd(), '.build'),
+            },
+        },
+    });
+
+    await server.register(Inert);
+
+    server.route({
+        method: 'GET',
+        path: '/assets/{param*}',
+        handler: {
+            directory: {
+                path: 'assets',
+            },
+        },
+    });
+
+    server.route({
+        method: 'GET',
+        path: '/',
+        handler: async () => {
+${handlerBody}
+        },
+    });
+
+    await server.start();
+    // eslint-disable-next-line no-console
+    console.log('Server is listening on ' + server.info.uri);
+}
+
+start();
+`;
+}

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

@@ -0,0 +1,3 @@
+export declare function storeIndexTemplate(): string;
+export declare function storeHooksTemplate(): string;
+export declare function counterSliceTemplate(): string;

package/build/templates/store.template.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storeIndexTemplate = storeIndexTemplate;
+exports.storeHooksTemplate = storeHooksTemplate;
+exports.counterSliceTemplate = counterSliceTemplate;
+function storeIndexTemplate() {
+    return `import { combineReducers, configureStore } from '@reduxjs/toolkit';
+
+import { counterReducer } from './counter-slice';
+
+const rootReducer = combineReducers({
+    counter: counterReducer,
+});
+
+export function makeStore(preloadedState?: Partial<RootState>) {
+    return configureStore({
+        reducer: rootReducer,
+        preloadedState,
+    });
+}
+
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppStore = ReturnType<typeof makeStore>;
+export type AppDispatch = AppStore['dispatch'];
+`;
+}
+function storeHooksTemplate() {
+    return `import { useDispatch, useSelector } from 'react-redux';
+
+import type { AppDispatch, RootState } from './index';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
+`;
+}
+function counterSliceTemplate() {
+    return `import { createSlice } from '@reduxjs/toolkit';
+
+type CounterState = {
+    value: number;
+};
+
+const initialState: CounterState = {
+    value: 0,
+};
+
+const counterSlice = createSlice({
+    name: 'counter',
+    initialState,
+    reducers: {
+        increment: (state) => {
+            state.value += 1;
+        },
+        decrement: (state) => {
+            state.value -= 1;
+        },
+    },
+});
+
+export const { increment, decrement } = counterSlice.actions;
+export const counterReducer = counterSlice.reducer;
+`;
+}

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

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

package/build/templates/tsconfig.template.js

@@ -0,0 +1,14 @@
+"use strict";
+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 tsconfig = {
+        extends: 'arui-scripts/tsconfig.json',
+        include: ['global-definitions.d.ts', 'src/**/*.ts', 'src/**/*.tsx'],
+        compilerOptions: {
+            types,
+        },
+    };
+    return `${JSON.stringify(tsconfig, null, 4)}\n`;
+}

package/build/templates/vitest-config.template.d.ts

@@ -0,0 +1 @@
+export declare function vitestConfigTemplate(): string;

package/build/templates/vitest-config.template.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vitestConfigTemplate = vitestConfigTemplate;
+function vitestConfigTemplate() {
+    return `import { defineConfig, mergeConfig } from 'vitest/config';
+
+import aruiConfig from 'arui-scripts/vitest';
+
+export default mergeConfig(
+    aruiConfig,
+    defineConfig({
+        test: {
+            // тут можно переопределить настройки Vitest
+        },
+    }),
+);
+`;
+}

package/build/types.d.ts

@@ -0,0 +1,34 @@
+export type CodeLoader = 'swc' | 'babel' | 'tsc';
+export type TestRunner = 'jest' | 'vitest';
+export type InitAnswers = {
+    name: string;
+    useRtk: boolean;
+    clientOnly: boolean;
+    codeLoader: CodeLoader;
+    testRunner: TestRunner;
+    cssModules: boolean;
+    clientServerPort: number;
+    serverPort: number;
+    dockerRegistry: string;
+    presets: string;
+    polyfills: boolean;
+    reactCompiler: boolean;
+    install: boolean;
+};
+export type TemplateContext = {
+    name: string;
+    useRtk: boolean;
+    clientOnly: boolean;
+    codeLoader: CodeLoader;
+    testRunner: TestRunner;
+    cssModules: boolean;
+    clientServerPort: number;
+    serverPort: number;
+    dockerRegistry: string;
+    presets: string;
+    polyfills: boolean;
+    reactCompiler: boolean;
+    aruiScriptsVersion: string;
+    dependencies: Record<string, string>;
+    devDependencies: Record<string, string>;
+};

package/build/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/validate-project-name.d.ts

@@ -0,0 +1 @@
+export declare function validateProjectName(name: string): true | string;

package/build/validate-project-name.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateProjectName = validateProjectName;
+const validate_npm_package_name_1 = __importDefault(require("validate-npm-package-name"));
+function validateProjectName(name) {
+    var _a, _b;
+    const trimmed = name.trim();
+    if (!trimmed) {
+        return 'Имя проекта не может быть пустым';
+    }
+    const result = (0, validate_npm_package_name_1.default)(trimmed);
+    if (result.validForNewPackages) {
+        return true;
+    }
+    const messages = [...((_a = result.errors) !== null && _a !== void 0 ? _a : []), ...((_b = result.warnings) !== null && _b !== void 0 ? _b : [])];
+    return messages.join('; ') || 'Некорректное имя пакета';
+}

package/build/versions.d.ts

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

package/build/versions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_ARUI_SCRIPTS_VERSION = void 0;
+/** Версия arui-scripts, которую scaffold кладёт в package.json нового проекта.
+ * Генерируется скриптом scripts/sync-arui-scripts-version.js при сборке.
+ */
+exports.DEFAULT_ARUI_SCRIPTS_VERSION = '23.2.0';

package/build/write-files.d.ts

@@ -0,0 +1,4 @@
+export declare function findConflictingFiles(targetDir: string, files: Record<string, string>, extraPaths?: string[]): Promise<string[]>;
+export declare function writeFiles(targetDir: string, files: Record<string, string>): Promise<void>;
+export declare const STATIC_ASSET_PATHS: string[];
+export declare function copyStaticAssets(targetDir: string): Promise<number>;

package/build/write-files.js

@@ -0,0 +1,59 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATIC_ASSET_PATHS = void 0;
+exports.findConflictingFiles = findConflictingFiles;
+exports.writeFiles = writeFiles;
+exports.copyStaticAssets = copyStaticAssets;
+const path_1 = __importDefault(require("path"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+function findConflictingFiles(targetDir_1, files_1) {
+    return __awaiter(this, arguments, void 0, function* (targetDir, files, extraPaths = []) {
+        const conflicts = [];
+        yield Promise.all([...Object.keys(files), ...extraPaths].map((relPath) => __awaiter(this, void 0, void 0, function* () {
+            if (yield fs_extra_1.default.pathExists(path_1.default.join(targetDir, relPath))) {
+                conflicts.push(relPath);
+            }
+        })));
+        return conflicts.sort();
+    });
+}
+function writeFiles(targetDir, files) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield fs_extra_1.default.ensureDir(targetDir);
+        yield Promise.all(Object.keys(files).map((relPath) => fs_extra_1.default.outputFile(path_1.default.join(targetDir, relPath), files[relPath])));
+    });
+}
+// статические ассеты, которые копируются в проект как есть (к примеру, .yarn/releases)
+const STATIC_ASSETS_DIR = path_1.default.join(__dirname, '../assets');
+// пути, которые создает copyStaticAssets в целевой директории (для проверки конфликтов)
+exports.STATIC_ASSET_PATHS = ['.yarn'];
+function countFiles(dir) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const entries = yield fs_extra_1.default.readdir(dir);
+        const counts = yield Promise.all(entries.map((entry) => __awaiter(this, void 0, void 0, function* () {
+            const entryPath = path_1.default.join(dir, entry);
+            const stat = yield fs_extra_1.default.stat(entryPath);
+            return stat.isDirectory() ? countFiles(entryPath) : 1;
+        })));
+        return counts.reduce((sum, count) => sum + count, 0);
+    });
+}
+// копирует статические ассеты и возвращает количество скопированных файлов
+function copyStaticAssets(targetDir) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield fs_extra_1.default.copy(STATIC_ASSETS_DIR, targetDir);
+        return countFiles(STATIC_ASSETS_DIR);
+    });
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+    "name": "create-arui-scripts-app",
+    "version": "1.0.0",
+    "description": "CLI для генерации нового react приложения на arui-scripts",
+    "license": "MPL-2.0",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/core-ds/arui-scripts.git"
+    },
+    "bugs": {
+        "url": "https://github.com/core-ds/arui-scripts/issues"
+    },
+    "homepage": "https://github.com/core-ds/arui-scripts/tree/master/packages/create-arui-scripts-app#readme",
+    "bin": "./bin/create-arui-scripts-app.js",
+    "main": "./build/run.js",
+    "typings": "./build/run.d.ts",
+    "files": [
+        "assets",
+        "bin",
+        "build"
+    ],
+    "scripts": {
+        "sync:version": "node ./scripts/sync-arui-scripts-version.js",
+        "build": "yarn sync:version && tsc --project tsconfig.json",
+        "test": "jest",
+        "lint:scripts": "arui-presets-lint scripts",
+        "format": "arui-presets-lint format",
+        "format:check": "arui-presets-lint format:check",
+        "lint": "yarn lint:scripts && yarn format:check",
+        "lint:fix": "yarn lint:scripts --fix && yarn format",
+        "audit": "yarn npm audit --severity high --environment production"
+    },
+    "dependencies": {
+        "chalk": "^2.4.2",
+        "commander": "^12",
+        "fs-extra": "6.0.1",
+        "ora": "^5",
+        "prompts": "^2.4.2",
+        "shelljs": "0.8.5",
+        "validate-npm-package-name": "^5.0.1"
+    },
+    "devDependencies": {
+        "@types/fs-extra": "^9.0.13",
+        "@types/jest": "^29.5.14",
+        "@types/node": "^20.19.0",
+        "@types/prompts": "^2.4.9",
+        "@types/shelljs": "^0.8.12",
+        "@types/validate-npm-package-name": "^3.0.3",
+        "jest": "28.1.3",
+        "ts-jest": "28.0.8",
+        "typescript": "6.0.2"
+    },
+    "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+    }
+}