some strange error idk

This commit is contained in:
Max 2025-04-07 22:17:50 +03:00
parent 4f1dd5eb7a
commit f8816b1627
48 changed files with 8816 additions and 670 deletions

View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>

View File

@ -0,0 +1,2 @@
import('./src/main')
export { }

View File

@ -0,0 +1,62 @@
{
"name": "main",
"version": "1.0.0",
"main": "index.js",
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"scripts": {
"start": "webpack serve --env mode=development",
"build:dev": "webpack --env mode=development",
"build:prod": "webpack --env mode=production",
"build:mobile": "webpack --env mode=production --env platform=mobile",
"build:desktop": "webpack --env mode=production --env platform=desktop",
"typecheck": "tsc"
},
"dependencies": {
"@packages/build-config": "*",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router-dom": "^6.26.2"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@hello-pangea/dnd": "^18.0.1",
"@radix-ui/react-form": "^0.1.2",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/themes": "^3.2.0",
"@reduxjs/toolkit": "^2.6.1",
"@tailwindcss/postcss": "^4.1.3",
"@tailwindcss/vite": "^4.0.6",
"@tanstack/react-query": "^5.66.0",
"@tanstack/react-query-devtools": "^5.66.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "^22.14.0",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.21",
"axios": "^1.7.9",
"css-loader": "^7.1.2",
"eslint": "^9.19.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.18",
"globals": "^15.14.0",
"jotai": "^2.12.0",
"js-cookie": "^3.0.5",
"mini-css-extract-plugin": "^2.9.2",
"postcss": "^8.5.3",
"postcss-loader": "^8.1.1",
"react-redux": "^9.2.0",
"style-loader": "^4.0.0",
"tailwindcss": "^4.1.3",
"typescript": "~5.7.2",
"typescript-eslint": "^8.22.0",
"vite": "^6.1.0",
"webpack": "^5.88.2",
"webpack-bundle-analyzer": "^4.9.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}

View File

@ -0,0 +1,5 @@
module.exports = {
plugins: [
require('@tailwindcss/postcss'),
],
}

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -1,5 +1,3 @@
@import 'tailwindcss';
#root {
height: 100vh;
}

View File

@ -1,5 +1,5 @@
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import App from './App';
import './index.css';
createRoot(document.getElementById('root')!).render(<App />);

View File

@ -8,14 +8,14 @@ import {
TextField,
} from '@radix-ui/themes';
import { Form } from 'radix-ui';
import { useState } from 'react';
import React from 'react';
import { useLoginMutation } from '../../../services/mainApi';
export default function LoginPage() {
const [login, { isError }] = useLoginMutation();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();

View File

@ -0,0 +1,7 @@
export const content = [
'./src/**/*.{html,js,tsx}',
];
export const theme = {
extend: {},
};
export const plugins = [];

View File

@ -0,0 +1,10 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"outDir": "./dist/",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

View File

@ -0,0 +1,97 @@
import { BuildMode, BuildPaths, BuildPlatform, buildWebpack } from '@packages/build-config';
import fs from 'fs';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import path from 'path';
import webpack from 'webpack';
import packageJson from './package.json';
interface EnvVariables {
mode?: BuildMode;
analyzer?: boolean;
port?: number;
platform?: BuildPlatform;
}
export default (env: EnvVariables) => {
const paths: BuildPaths = {
output: path.resolve(__dirname, 'build'),
entry: path.resolve(__dirname, 'index.tsx'),
html: path.resolve(__dirname, 'index.html'),
public: path.resolve(__dirname, 'public'),
src: path.resolve(__dirname, 'src'),
}
const config: webpack.Configuration = buildWebpack({
port: env.port ?? 3001,
mode: env.mode ?? 'development',
paths,
analyzer: env.analyzer,
platform: env.platform ?? 'desktop'
})
// Check if tailwind.config.js exists
const tailwindConfigPath = path.resolve(__dirname, 'tailwind.config.js');
if (!fs.existsSync(tailwindConfigPath)) {
console.error('tailwind.config.js does not exist. Please create it or check the path.');
process.exit(1);
} else {
console.log(` tailwind.config.js found at: ${tailwindConfigPath}`);
}
// Check if postcss.config.js exists
const postcssConfigPath = path.resolve(__dirname, 'postcss.config.js');
if (!fs.existsSync(postcssConfigPath)) {
console.error('postcss.config.js does not exist. Please create it or check the path.');
process.exit(1);
} else {
console.log(`postcss.config.js found at: ${postcssConfigPath}`);
}
if(!config.plugins) {
console.error('No plugins found in webpack configuration');
process.exit(1);
}
// Add Tailwind configuration to build plugins
if(config.module && config.module.rules) {
config.module.rules.push({
test: /\.css$/,
use: [
env.mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
});
}
config.plugins.push(
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new webpack.container.ModuleFederationPlugin({
name: 'todo_thingy',
filename: 'remoteEntry.js',
exposes: {
'./AppMain': './src/App.tsx',
},
shared: {
...packageJson.dependencies,
'react': {
eager: true,
requiredVersion: packageJson.dependencies['react'],
},
'react-router-dom': {
eager: true,
requiredVersion: packageJson.dependencies['react-router-dom'],
},
'react-dom': {
eager: true,
requiredVersion: packageJson.dependencies['react-dom'],
},
},
}))
return config;
}

View File

@ -0,0 +1,18 @@
{
"compilerOptions": {
"noImplicitAny": true,
"module": "ESNext",
"target": "es5",
"jsx": "react-jsx",
"allowJs": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true
},
"ts-node": {
"compilerOptions": {
"module": "CommonJS"
}
}
}

File diff suppressed because it is too large Load Diff

View File

@ -2,43 +2,8 @@
"name": "cool_todo_manager",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@hello-pangea/dnd": "^18.0.1",
"@radix-ui/react-form": "^0.1.2",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/themes": "^3.2.0",
"@reduxjs/toolkit": "^2.6.0",
"@tailwindcss/vite": "^4.0.6",
"@tanstack/react-query": "^5.66.0",
"@tanstack/react-query-devtools": "^5.66.0",
"axios": "^1.7.9",
"jotai": "^2.12.0",
"js-cookie": "^3.0.5",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-redux": "^9.2.0",
"react-router-dom": "^6.26.2",
"tailwindcss": "^4.0.6"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@types/js-cookie": "^3.0.6",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.19.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.18",
"globals": "^15.14.0",
"typescript": "~5.7.2",
"typescript-eslint": "^8.22.0",
"vite": "^6.1.0"
}
"workspaces": [
"mainApp/*",
"packages/*"
]
}

View File

@ -0,0 +1,38 @@
{
"name": "@packages/build-config",
"version": "1.0.0",
"main": "./src/index.ts",
"devDependencies": {
"@babel/core": "^7.23.2",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.2",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
"@svgr/webpack": "^8.1.0",
"@types/babel__core": "^7.20.3",
"@types/node": "^20.8.3",
"@types/webpack": "^5.28.3",
"@types/webpack-bundle-analyzer": "^4.6.1",
"@types/webpack-dev-server": "^4.7.2",
"babel-loader": "^9.1.3",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.8.1",
"fork-ts-checker-webpack-plugin": "^9.0.0",
"html-webpack-plugin": "^5.5.3",
"mini-css-extract-plugin": "^2.7.6",
"react-refresh": "^0.14.0",
"react-refresh-typescript": "^2.0.9",
"sass": "^1.69.0",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"ts-loader": "^9.5.0",
"ts-node": "^10.9.1",
"typescript": "^5.2.2",
"webpack": "^5.88.2",
"webpack-bundle-analyzer": "^4.9.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
"dependencies": {
"react": "^19.1.0"
}
}

View File

@ -0,0 +1,12 @@
import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
import { BuildOptions } from "./types/types";
export function buildDevServer(options: BuildOptions): DevServerConfiguration {
return {
port: options.port ?? 3000,
open: true,
// если раздавать статику через nginx То надо делать проксирование на Index.html
historyApiFallback: true,
hot: true
}
}

View File

@ -0,0 +1,87 @@
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import ReactRefreshTypeScript from "react-refresh-typescript";
import { ModuleOptions } from "webpack";
import { BuildOptions } from "./types/types";
export function buildLoaders(options: BuildOptions): ModuleOptions['rules'] {
const isDev = options.mode === 'development';
const assetLoader = {
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
const svgrLoader = {
test: /\.svg$/i,
use: [
{
loader: '@svgr/webpack',
options: {
icon: true,
svgoConfig: {
plugins: [
{
name: 'convertColors',
params: {
currentColor: true,
}
}
]
}
}
}
],
}
const cssLoaderWithModules = {
loader: "css-loader",
options: {
modules: {
localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]'
},
},
}
const scssLoader = {
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
cssLoaderWithModules,
// Compiles Sass to CSS
"sass-loader",
],
}
const tsLoader = {
// ts-loader умеет работать с JSX
// Если б мы не использовали тайпскрипт: нужен был бы babel-loader
exclude: /node_modules/,
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
getCustomTransformers: () => ({
before: [isDev && ReactRefreshTypeScript()].filter(Boolean),
}),
}
}
]
}
// const babelLoader = buildBabelLoader(options);
return [
assetLoader,
scssLoader,
tsLoader,
// babelLoader,
svgrLoader
]
}

View File

@ -0,0 +1,52 @@
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import webpack, { Configuration, DefinePlugin } from "webpack";
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
import { BuildOptions } from "./types/types";
// import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
import CopyPlugin from "copy-webpack-plugin";
import path from "path";
export function buildPlugins({mode, paths, analyzer, platform}: BuildOptions): Configuration['plugins'] {
const isDev = mode === 'development';
const isProd = mode === 'production';
const plugins: Configuration['plugins'] = [
new HtmlWebpackPlugin({
template: paths.html,
favicon: path.resolve(paths.public, 'favicon.ico'),
publicPath: '/'
}),
new DefinePlugin({
__PLATFORM__: JSON.stringify(platform),
__ENV__: JSON.stringify(mode),
}),
]
if(isDev) {
plugins.push(new webpack.ProgressPlugin())
/** Выносит проверку типов в отдельный процесс: не нагружая сборку */
// plugins.push(new ForkTsCheckerWebpackPlugin())
plugins.push(new ReactRefreshWebpackPlugin())
}
if(isProd) {
plugins.push(new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css',
}))
plugins.push(new CopyPlugin({
patterns: [
{ from: path.resolve(paths.public, 'locales'), to: path.resolve(paths.output, 'locales') },
],
}),)
}
if(analyzer) {
plugins.push(new BundleAnalyzerPlugin())
}
return plugins;
}

View File

@ -0,0 +1,11 @@
import { Configuration } from "webpack";
import { BuildOptions } from "./types/types";
export function buildResolvers(options: BuildOptions): Configuration['resolve'] {
return {
extensions: ['.tsx', '.ts', '.js'],
alias: {
'@': options.paths.src,
},
}
}

View File

@ -0,0 +1,28 @@
import webpack from "webpack";
import { buildDevServer } from "./buildDevServer";
import { buildLoaders } from "./buildLoaders";
import { buildPlugins } from "./buildPlugins";
import { buildResolvers } from "./buildResolvers";
import { BuildOptions } from "./types/types";
export function buildWebpack(options: BuildOptions): webpack.Configuration {
const {mode, paths} = options
const isDev = mode === 'development';
return {
mode: mode ?? 'development',
entry: paths.entry,
output: {
path: paths.output,
filename: '[name].[contenthash].js',
clean: true
},
plugins: buildPlugins(options),
module: {
rules: buildLoaders(options),
},
resolve: buildResolvers(options),
devtool: isDev ? 'eval-cheap-module-source-map' : 'source-map',
devServer: isDev ? buildDevServer(options) : undefined,
}
}

View File

@ -0,0 +1,2 @@
export { buildWebpack } from './buildWebpack'
export type { BuildMode, BuildOptions, BuildPaths, BuildPlatform } from './types/types'

View File

@ -0,0 +1,18 @@
export interface BuildPaths {
entry: string;
html: string;
public: string;
output: string;
src: string;
}
export type BuildMode = 'production' | 'development';
export type BuildPlatform = 'mobile' | 'desktop';
export interface BuildOptions {
port: number;
paths: BuildPaths;
mode: BuildMode;
platform: BuildPlatform;
analyzer?: boolean;
}

View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "ESNext",
"target": "es5",
"jsx": "react-jsx",
"allowJs": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"composite": true
}
}

View File

@ -1,26 +0,0 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src", "../@types/**/*"]
}

View File

@ -1,7 +0,0 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

View File

@ -1,24 +0,0 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}