Merge pull request #107 from aleleba/PR-589725

PR-589725: Updating packages, fixing redux actions and fixing linting.
This commit is contained in:
Alejandro Lembke Barrientos 2025-04-11 00:28:31 -06:00 committed by GitHub
commit 04c03f7404
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 1499 additions and 992 deletions

View File

@ -2,62 +2,62 @@
const { execSync } = require('child_process');
var fs = require('fs');
const isWin = process.platform === "win32";
const isWin = process.platform === 'win32';
const runCommand = command => {
try{
execSync(`${command}`, {stdio: 'inherit'});
} catch (e) {
console.error(`Failed to execute ${command}`, e);
return false;
}
return true;
}
try{
execSync(`${command}`, {stdio: 'inherit'});
} catch (e) {
console.error(`Failed to execute ${command}`, e);
return false;
}
return true;
};
const runCommandWithOutput = command => {
try{
return execSync(`${command}`);
} catch (e) {
console.error(`Failed to execute ${command}`, e);
return false;
}
}
try{
return execSync(`${command}`);
} catch (e) {
console.error(`Failed to execute ${command}`, e);
return false;
}
};
const replaceTextOnFile = ({
file,
textToBeReplaced,
textReplace,
arrOfObjectsBeReplaced
file,
textToBeReplaced,
textReplace,
arrOfObjectsBeReplaced
}) => {
let data
try{
data = fs.readFileSync(file, 'utf8');
} catch (e) {
console.error(`Failed to read file ${file}`, e);
return false;
}
let data;
try{
data = fs.readFileSync(file, 'utf8');
} catch (e) {
console.error(`Failed to read file ${file}`, e);
return false;
}
let result
if(arrOfObjectsBeReplaced){
arrOfObjectsBeReplaced.forEach( obj => {
if(result){
result = result.replace(obj.textToBeReplaced, obj.textReplace).replace(/^\s*[\r\n]/gm, ' ');
}else{
result = data.replace(obj.textToBeReplaced, obj.textReplace).replace(/^\s*[\r\n]/gm, ' ');
}
})
}else{
result = data.replace(textToBeReplaced, textReplace).replace(/^\s*[\r\n]/gm, ' ');
}
let result;
if(arrOfObjectsBeReplaced){
arrOfObjectsBeReplaced.forEach( obj => {
if(result){
result = result.replace(obj.textToBeReplaced, obj.textReplace).replace(/^\s*[\r\n]/gm, ' ');
}else{
result = data.replace(obj.textToBeReplaced, obj.textReplace).replace(/^\s*[\r\n]/gm, ' ');
}
});
}else{
result = data.replace(textToBeReplaced, textReplace).replace(/^\s*[\r\n]/gm, ' ');
}
try{
console.log('text changed')
fs.writeFileSync(file, result, 'utf8');
} catch (e) {
console.error(`Failed to read file ${file}`, e);
return false;
}
}
try{
console.log('text changed');
fs.writeFileSync(file, result, 'utf8');
} catch (e) {
console.error(`Failed to read file ${file}`, e);
return false;
}
};
const repoName = process.argv[2];
const gitCheckoutCommand = `git clone --depth 1 https://github.com/aleleba/create-react-ssr ${repoName}`;
@ -65,13 +65,13 @@ console.log(`Cloning the repository with name ${repoName}`);
const checkedOut = runCommand(gitCheckoutCommand);
if(!checkedOut) process.exit(-1);
const actualVersion = runCommandWithOutput(`cd ${repoName} && node -p "require('./package.json').version"`).toString().trim()
const actualVersion = runCommandWithOutput(`cd ${repoName} && node -p "require('./package.json').version"`).toString().trim();
const installDepsCommand = `cd ${repoName} && npm i`;
const cleanGitHistoryCommand = `cd ${repoName} && rm -rf .git && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`
const cleanGitHistoryCommandWindows = `cd ${repoName} && rmdir .git /s /q && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`
const deleteFoldersCommand = `cd ${repoName} && rm -rf .github && rm -rf bin`
const deleteFoldersCommandWindows = `cd ${repoName} && rmdir .github /s /q && rmdir bin /s /q`
const cleanGitHistoryCommand = `cd ${repoName} && rm -rf .git && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`;
const cleanGitHistoryCommandWindows = `cd ${repoName} && rmdir .git /s /q && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`;
const deleteFoldersCommand = `cd ${repoName} && rm -rf .github && rm -rf bin`;
const deleteFoldersCommandWindows = `cd ${repoName} && rmdir .github /s /q && rmdir bin /s /q`;
console.log(`Installing dependencies for ${repoName}`);
const installedDeps = runCommand(installDepsCommand);
@ -79,31 +79,31 @@ if(!installedDeps) process.exit(-1);
console.log(`Replacing Json data for ${repoName}`);
replaceTextOnFile({
file: `./${repoName}/package.json`,
arrOfObjectsBeReplaced: [
{
textToBeReplaced: `"bin": "./bin/cli.js",`,
textReplace: ``
},
{
textToBeReplaced: `"version": "${actualVersion}",`,
textReplace: `"version": "0.0.1",`
},
{
textToBeReplaced: `"name": "@aleleba/create-react-ssr",`,
textReplace: `"name": "${repoName}",`
}
]
})
file: `./${repoName}/package.json`,
arrOfObjectsBeReplaced: [
{
textToBeReplaced: '"bin": "./bin/cli.js",',
textReplace: ''
},
{
textToBeReplaced: `"version": "${actualVersion}",`,
textReplace: '"version": "0.0.1",'
},
{
textToBeReplaced: '"name": "@aleleba/create-react-ssr",',
textReplace: `"name": "${repoName}",`
}
]
});
console.log(`Cleaning History of Git for ${repoName}`);
const cleanGitHistory = isWin ? runCommand(cleanGitHistoryCommandWindows) : runCommand(cleanGitHistoryCommand);
if(!cleanGitHistory) process.exit(-1);
console.log("Congratulations! You are ready. Follow the following commands to start");
console.log('Congratulations! You are ready. Follow the following commands to start');
console.log(`cd ${repoName}`);
console.log('Create a .env file with ENV=development(defauld: production), PORT=3000 (default: 80), PUBLIC_URL=your_public_url(optional)(default: "auto"), PREFIX_URL=your_prefix_url(optional)(default: ""), ONLY_EXACT_PATH=true(optional)(default: false)');
console.log(`Then you can run: npm start:dev`);
console.log('Then you can run: npm start:dev');
const deleteFolders = isWin ? runCommand(deleteFoldersCommandWindows) : runCommand(deleteFoldersCommand);
if(!deleteFolders) process.exit(-1);

View File

@ -4,7 +4,7 @@ export const deFaultValues = {
PUBLIC_URL: 'auto',
PREFIX_URL: '',
ONLY_EXACT_PATH: false,
}
};
export const config = {
ENV: process.env.ENV ? process.env.ENV : deFaultValues.ENV,
@ -14,4 +14,4 @@ export const config = {
ONLY_EXACT_PATH: process.env.ONLY_EXACT_PATH ? process.env.ONLY_EXACT_PATH === 'true' : deFaultValues.ONLY_EXACT_PATH,
};
export default config
export default config;

View File

@ -1,20 +1,20 @@
describe('Initial Component Tests', () => {
it('Will show the Initial Component page.', () => {
cy.visit('/');
cy.get('a').contains('Other Component');
cy.get('a').contains('Other Component');
});
it('Will Redirect to Other Component page.', () => {
it('Will Redirect to Other Component page.', () => {
cy.visit('/');
cy.get('a').contains('Other Component').click();
cy.get('a').contains('Initial Component');
cy.get('a').contains('Other Component').click();
cy.get('a').contains('Initial Component');
});
it('Will show the Other Component page.', () => {
cy.visit('/other-component');
cy.get('a').contains('Initial Component');
cy.get('a').contains('Initial Component');
});
it('Will Redirect to Initial Component page.', () => {
cy.visit('/other-component');
cy.get('a').contains('Initial Component').click();
cy.get('a').contains('Initial Component').click();
cy.get('a').contains('Other Component');
});
});
});

View File

@ -34,4 +34,4 @@
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }
// }

View File

@ -22,7 +22,7 @@ import './commands';
// Alternatively you can use CommonJS syntax:
// require('./commands')
import { mount } from '@cypress/react'
import { mount } from '@cypress/react';
// Augment the Cypress namespace to include type definitions for
// your custom command.

View File

@ -4,52 +4,62 @@ import reactPlugin from 'eslint-plugin-react';
import globals from 'globals';
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
{
files: ['**/*.{js,jsx,ts,tsx}'],
ignores: [
'build/',
'webpack.config.ts',
'webpack.config.dev.ts',
'webpack.config.dev.server.ts',
'webpack.cy.config.ts',
'service-worker.ts',
'serviceWorkerRegistration.ts'
],
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: tseslint.parser,
parserOptions: {
ecmaFeatures: {
jsx: true
},
globals: {
...globals.browser,
...globals.node,
...globals.es2021
}
}
},
plugins: {
react: reactPlugin,
'@typescript-eslint': tseslint.plugin
},
settings: {
react: {
version: 'detect'
}
},
rules: {
'indent': ['error', 'tab'],
'linebreak-style': ['error', 'unix'],
'quotes': ['error', 'single'],
'semi': ['error', 'always'],
'eol-last': ['error', 'always'],
'@typescript-eslint/no-var-requires': 'off',
// Include here the recommended rules for react
...reactPlugin.configs.recommended.rules
}
}
);
{
ignores: [
'**/build/**',
'**/webpack.config.ts',
'**/webpack.config.dev.ts',
'**/webpack.config.dev.server.ts',
'**/webpack.cy.config.ts',
'**/service-worker.ts',
'**/serviceWorkerRegistration.ts',
'node_modules/**'
]
},
eslint.configs.recommended,
...tseslint.configs.recommended,
{
files: ['**/*.{js,jsx,ts,tsx}'],
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: tseslint.parser,
parserOptions: {
ecmaFeatures: {
jsx: true
},
globals: {
...globals.browser,
...globals.node,
...globals.es2021
}
}
},
plugins: {
react: reactPlugin,
'@typescript-eslint': tseslint.plugin
},
settings: {
react: {
version: 'detect'
}
},
rules: {
// Include here the recommended rules for react
...reactPlugin.configs.recommended.rules,
'indent': ['error', 'tab'],
'linebreak-style': ['error', 'unix'],
'quotes': ['error', 'single'],
'semi': ['error', 'always'],
'eol-last': ['error', 'always'],
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-require-imports': 'off',
'no-undef': 'off',
'@typescript-eslint/no-namespace': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unused-expressions': 'off',
}
}
);

1980
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "@aleleba/create-react-ssr",
"version": "3.9.28",
"version": "3.9.29",
"description": "Starter Kit of server side render of react",
"bin": "./bin/cli.js",
"main": "src/server/index",
@ -37,19 +37,19 @@
"homepage": "https://github.com/aleleba/create-react-ssr#readme",
"dependencies": {
"@babel/register": "^7.25.9",
"dotenv": "^16.4.7",
"express": "^4.21.2",
"dotenv": "^16.5.0",
"express": "^5.1.0",
"helmet": "^8.1.0",
"history": "^5.3.0",
"ignore-styles": "^5.0.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-redux": "^9.2.0",
"react-router-dom": "^7.4.0",
"react-router-dom": "^7.5.0",
"react-router-hash-link": "^2.4.3",
"redux": "^5.0.1",
"webpack": "^5.98.0",
"webpack-dev-server": "^5.2.0",
"webpack": "^5.99.5",
"webpack-dev-server": "^5.2.1",
"webpack-manifest-plugin": "^5.0.1",
"workbox-background-sync": "^7.3.0",
"workbox-broadcast-update": "^7.3.0",
@ -70,21 +70,21 @@
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.27.0",
"@cypress/react": "^9.0.1",
"@eslint/js": "^9.23.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
"@eslint/js": "^9.24.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.16",
"@redux-devtools/extension": "^3.3.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.2.0",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^14.6.1",
"@types/jest": "^29.5.14",
"@types/node": "^22.13.13",
"@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4",
"@types/node": "^22.14.0",
"@types/react": "^19.1.0",
"@types/react-dom": "^19.1.2",
"@types/webpack": "^5.28.5",
"@types/webpack-hot-middleware": "^2.25.9",
"@types/webpack-node-externals": "^3.0.4",
"@typescript-eslint/eslint-plugin": "^8.28.0",
"@typescript-eslint/parser": "^8.28.0",
"@typescript-eslint/eslint-plugin": "^8.29.1",
"@typescript-eslint/parser": "^8.29.1",
"babel-jest": "^29.7.0",
"babel-loader": "^10.0.0",
"clean-webpack-plugin": "^4.0.0",
@ -92,9 +92,9 @@
"copy-webpack-plugin": "^13.0.0",
"css-loader": "^7.1.2",
"css-minimizer-webpack-plugin": "^7.0.2",
"cypress": "^14.2.0",
"eslint": "^9.23.0",
"eslint-plugin-react": "^7.37.4",
"cypress": "^14.3.0",
"eslint": "^9.24.0",
"eslint-plugin-react": "^7.37.5",
"eslint-webpack-plugin": "^5.0.0",
"file-loader": "^6.2.0",
"globals": "^16.0.0",
@ -103,16 +103,17 @@
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-fetch-mock": "^3.0.3",
"jiti": "^2.4.2",
"mini-css-extract-plugin": "^2.9.2",
"react-refresh": "^0.16.0",
"react-refresh": "^0.17.0",
"resolve-ts-aliases": "^1.0.1",
"sass": "^1.86.0",
"sass": "^1.86.3",
"sass-loader": "^16.0.5",
"style-loader": "^4.0.0",
"terser-webpack-plugin": "^5.3.14",
"ts-jest": "^29.3.0",
"typescript": "^5.8.2",
"typescript-eslint": "^8.28.0",
"ts-jest": "^29.3.1",
"typescript": "^5.8.3",
"typescript-eslint": "^8.29.1",
"url-loader": "^4.1.1",
"webpack-cli": "^6.0.1",
"webpack-dev-middleware": "^7.4.2",

View File

@ -1,4 +1,4 @@
import * as express from "express"
import * as express from 'express';
declare global {
namespace Express {
@ -6,4 +6,4 @@ declare global {
hashManifest?: Record<string,any>
}
}
}
}

View File

@ -1,4 +1,4 @@
declare module "*.svg" {
declare module '*.svg' {
const content: any;
export default content;
}

View File

@ -6,22 +6,22 @@ import initialStateReducer from '../frontend/reducers/initialState';
import setStore from '../frontend/setStore';
export const ProviderMock = ({ children, initialState }: { children: any, initialState?: any}) => {
let initialStateMock = initialStateReducer
let initialStateMock = initialStateReducer;
if(initialState !== undefined){
initialStateMock = initialState
}
if(initialState !== undefined){
initialStateMock = initialState;
}
const history = createMemoryHistory();
const store = setStore({ initialState: initialStateMock });
const history = createMemoryHistory();
const store = setStore({ initialState: initialStateMock });
return(
<Provider store={store}>
<Router location={history.location} navigator={history}>
{children}
</Router>
</Provider>
)
}
return(
<Provider store={store}>
<Router location={history.location} navigator={history}>
{children}
</Router>
</Provider>
);
};
export default ProviderMock;

View File

@ -1,9 +1 @@
import test, { TTest } from './testAction';
export type TAction = TTest
const actions = {
test
}
export default actions
export * from '@actions/testAction';

View File

@ -14,12 +14,12 @@ export interface IChangeHelloPayload {
export type TTest = IChangeHello
const changeHello = (payload: string) => ({
type: ActionTypesTest.ChangeHello,
payload
})
type: ActionTypesTest.ChangeHello,
payload
});
const actions = {
changeHello
}
changeHello
};
export default actions
export default actions;

View File

@ -1,18 +1,18 @@
import React from 'react';
import logo from '../logo.svg';
import './InitialComponent.scss';
import { Link } from "react-router-dom";
import { Link } from 'react-router-dom';
const OtherComponent = () => (
<div className="App">
<header className="App-header">
<img src="assets/img/logo.svg" className="App-logo" alt="logo" />
<p>
<div className="App">
<header className="App-header">
<img src="assets/img/logo.svg" className="App-logo" alt="logo" />
<p>
Edit <code>src/frontend/OtherComponent.jsx</code> and save to reload.
</p>
<Link className="App-link" to="/">Initial Component</Link>
</header>
</div>
</p>
<Link className="App-link" to="/">Initial Component</Link>
</header>
</div>
);
export default OtherComponent;

View File

@ -4,7 +4,7 @@ import { useRoutes } from 'react-router-dom';
import routes from '../../routes';
const PrincipalRoutes = () => {
let element = useRoutes(routes);
const element = useRoutes(routes);
return element;
};

View File

@ -4,20 +4,20 @@ import { ProviderMock } from '@mocks';
import App from '@components/App';
describe('<App/> Component', () => {
beforeEach(() => {
fetchMock.resetMocks();
});
beforeEach(() => {
fetchMock.resetMocks();
});
it('Should render root <App /> Component', async () => {
fetchMock.mockResponseOnce(JSON.stringify({
//First Data Fetch
data: 'data'
}));
it('Should render root <App /> Component', async () => {
fetchMock.mockResponseOnce(JSON.stringify({
//First Data Fetch
data: 'data'
}));
render(
<ProviderMock>
<App />
</ProviderMock>
)
})
})
render(
<ProviderMock>
<App />
</ProviderMock>
);
});
});

View File

@ -1,10 +1,6 @@
import { combineReducers } from 'redux';
import testReducer from './testReducer';
import { IChangeHelloPayload } from '../actions/testAction';
export interface IInitialState {
testReducer?: IChangeHelloPayload | undefined
}
export * from './initialState';
const rootReducer = combineReducers({
// Here comes the reducers

View File

@ -1,3 +1,6 @@
import { IInitialState } from './';
import { IChangeHelloPayload } from '@actions';
export interface IInitialState {
testReducer?: IChangeHelloPayload | undefined
}
const initialState: IInitialState = {};
export default initialState;

View File

@ -1,10 +1,10 @@
import { TAction } from '../actions';
import { TTest } from '@actions';
const initialState = {
hello: 'world'
};
const testReducer = (state = initialState, action: TAction) => {
const testReducer = (state = initialState, action: TTest) => {
switch (action.type){
case 'CHANGE_HELLO': {
const newHello = action.payload.hello;

View File

@ -3,8 +3,7 @@ import { legacy_createStore as createStore} from 'redux'; //, applyMiddleware
// import { Provider } from 'react-redux';
import { composeWithDevTools as composeWithDevToolsWeb } from '@redux-devtools/extension';
import { config } from '../../config';
import reducer, { IInitialState } from './reducers';
import reducer, { IInitialState } from '@reducers';
const { ENV } = config;
@ -15,11 +14,11 @@ const composeEnhancers = composeWithDevToolsWeb({
const setStore = ({ initialState }: { initialState: IInitialState | undefined }) => {
const store = ENV === 'development' ? createStore(
reducer,
initialState,
initialState as any,
composeEnhancers(),
) : createStore(
reducer,
initialState,
initialState as any,
);
return store;
};

View File

@ -129,7 +129,7 @@ const renderApp = (req, res, next) => {
};
app
.get('*', renderApp);
.get('/{*splat}', renderApp);
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);

View File

@ -49,7 +49,16 @@ const config: Configuration = {
'options': {
modules: {
auto: /\.module\.\w+$/i,
}
},
url: {
filter: (url) => {
// No procesar URLs absolutas que comienzan con /
if (url.startsWith('/')) {
return false;
}
return true;
}
},
},
},
'sass-loader',

View File

@ -35,6 +35,12 @@ if(fs.existsSync(`${ROOT_DIR}/../public/img`)){
});
}
if(fs.existsSync(`${ROOT_DIR}/../public/fonts`)){
copyPatterns.push({
from: `${ROOT_DIR}/../public/fonts`, to: 'assets/fonts',
});
}
const config: Configuration = {
entry: [`webpack-hot-middleware/client?path=${envConfig.PREFIX_URL}/reload_wss&timeout=2000&reload=true&autoConnect=true`, `${ROOT_DIR}/../src/frontend/index.tsx`],
output: {
@ -68,7 +74,16 @@ const config: Configuration = {
'options': {
modules: {
auto: /\.module\.\w+$/i,
}
},
url: {
filter: (url) => {
// No procesar URLs absolutas que comienzan con /
if (url.startsWith('/')) {
return false;
}
return true;
}
},
},
},
'sass-loader',

View File

@ -41,6 +41,12 @@ if(fs.existsSync(`${ROOT_DIR}/public/img`)){
});
}
if(fs.existsSync(`${ROOT_DIR}/public/fonts`)){
copyPatterns.push({
from: `${ROOT_DIR}/public/fonts`, to: 'assets/fonts',
});
}
const frontendConfig = {
entry: {
frontend: `${ROOT_DIR}/src/frontend/index.tsx`,
@ -73,7 +79,16 @@ const frontendConfig = {
'options': {
modules: {
auto: /\.module\.\w+$/i,
}
},
url: {
filter: (url) => {
// No procesar URLs absolutas que comienzan con /
if (url.startsWith('/')) {
return false;
}
return true;
}
},
},
},
'sass-loader',

View File

@ -23,6 +23,12 @@ if(fs.existsSync(copyFromUrl)){
});
}
if(fs.existsSync(`${path.resolve(__dirname)}/public/fonts`)){
copyPatterns.push({
from: `${path.resolve(__dirname)}/public/fonts`, to: 'assets/fonts',
});
}
export default {
entry: './src/frontend/components/index.tsx',
resolve: {
@ -71,7 +77,16 @@ export default {
'options': {
modules: {
auto: /\.module\.\w+$/i,
}
},
url: {
filter: (url) => {
// No procesar URLs absolutas que comienzan con /
if (url.startsWith('/')) {
return false;
}
return true;
}
},
},
},
'sass-loader',