diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index 90f5d50..87742b9 100644 --- a/.github/workflows/build.yaml +++ b/.github/workflows/build.yaml @@ -10,10 +10,10 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - name: Use Node.js 14.x + - name: Use Node.js 16.x uses: actions/setup-node@v1 with: - node-version: 14.x + node-version: 16.x - run: yarn add shelljs - run: yarn run create:npm-package - name: Upload template @@ -26,17 +26,17 @@ jobs: needs: createNpmPackage runs-on: ubuntu-latest steps: - - name: Use Node.js 14.x + - name: Use Node.js 16.x uses: actions/setup-node@v1 with: - node-version: 14.x + node-version: 16.x - name: Download template uses: actions/download-artifact@v1 with: name: cra-template-rb path: ../cra-template-rb # Put into the upper folder. create-react-app wants the current directory empty - name: Create CRA from downloaded template - run: npx create-react-app --template file:../cra-template-rb . + run: yarn create react-app --template file:../cra-template-rb . - run: yarn run build - run: yarn run test:generators - run: yarn run lint diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 8961dc6..a538b88 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -10,7 +10,7 @@ jobs: createAndTestCRAFromNpm: strategy: matrix: - node-version: [14.x, 15.x, 16.x] + node-version: [16.x, 17.x] runs-on: ubuntu-latest steps: @@ -19,7 +19,7 @@ jobs: with: node-version: ${{ matrix.node-version }} - name: Create CRA from npm template - run: npx create-react-app --template cra-template-rb . + run: yarn create react-app --template cra-template-rb . - run: yarn run build - run: yarn run test:generators - run: yarn run lint diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index 3396b55..52a35f0 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -9,10 +9,10 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - name: Use Node.js 14.x + - name: Use Node.js 16.x uses: actions/setup-node@v1 with: - node-version: 14.x + node-version: 16.x - run: yarn --frozen-lockfile - run: yarn run test:coverage - name: Upload to Coveralls @@ -23,9 +23,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - name: Use Node.js 14.x + - name: Use Node.js 16.x uses: actions/setup-node@v1 with: - node-version: 14.x + node-version: 16.x - run: yarn --frozen-lockfile - run: yarn run test:internals diff --git a/README.md b/README.md index ebd9905..d0f9d79 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ Start your `create-react-app` projects in seconds with the best, industry-standa Create React App with the template ```shell -npx create-react-app --template cra-template-rb my-app +yarn create react-app --template cra-template-rb my-app ``` Start and check our example app, if you want diff --git a/docs/quick-start.md b/docs/quick-start.md index 4a599cc..4104702 100644 --- a/docs/quick-start.md +++ b/docs/quick-start.md @@ -7,7 +7,7 @@ You have just **3** easy-peasy steps to do :) **1)** Create **CRA** app with the custom template ```shell -npx create-react-app --template cra-template-rb my-app +yarn create react-app --template cra-template-rb my-app ``` **2)** Start the example application and checkout the features made ready for you. diff --git a/internals/extractMessages/jest.config.js b/internals/extractMessages/jest.config.js index 3439d34..ba6c0f7 100644 --- a/internals/extractMessages/jest.config.js +++ b/internals/extractMessages/jest.config.js @@ -1,9 +1,4 @@ module.exports = { - globals: { - 'ts-jest': { - tsConfig: 'internals/ts-node.tsconfig.json', - }, - }, testMatch: [ '**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)', diff --git a/internals/generators/plopfile.ts b/internals/generators/plopfile.ts index 3a51ea2..964becb 100644 --- a/internals/generators/plopfile.ts +++ b/internals/generators/plopfile.ts @@ -11,7 +11,7 @@ export default function plop(plop: NodePlopAPI) { plop.setGenerator('slice', sliceGenerator); plop.setActionType('prettify', (answers, config) => { - const data = config.data as PrettifyCustomActionData; + const data = config!.data as PrettifyCustomActionData; shell.exec(`yarn run prettify -- "${data.path}"`, { silent: true }); return ''; }); diff --git a/internals/scripts/create-changelog.script.ts b/internals/scripts/create-changelog.script.ts index 5209f38..d177121 100644 --- a/internals/scripts/create-changelog.script.ts +++ b/internals/scripts/create-changelog.script.ts @@ -10,7 +10,7 @@ export function createChangeLog(opts: Options = {}) { process.exit(1); } shell.exec( - `npx standard-version --skip.commit --skip.tag --skip.changelog=0`, + `yarn standard-version --skip.commit --skip.tag --skip.changelog=0`, { silent: false, }, diff --git a/internals/scripts/create-cra-app.script.ts b/internals/scripts/create-cra-app.script.ts index 67328cd..45190ce 100644 --- a/internals/scripts/create-cra-app.script.ts +++ b/internals/scripts/create-cra-app.script.ts @@ -8,7 +8,7 @@ export function createCRA(opts: Options = {}) { shell.exec(`rm -rf ${app_name}`); const template = createNpmPackage(); - shell.exec(`npx create-react-app ${app_name} --template file:${template}`, { + shell.exec(`yarn create react-app ${app_name} --template file:${template}`, { silent: false, fatal: true, }); diff --git a/internals/scripts/create-template-folder.ts b/internals/scripts/create-template-folder.ts index aa80c82..852cf98 100644 --- a/internals/scripts/create-template-folder.ts +++ b/internals/scripts/create-template-folder.ts @@ -60,8 +60,6 @@ export function crateTemplateFolder(opts: Options = {}) { copyToTemplate('internals/startingTemplate', true); copyToTemplate('internals/testing', true); - copyToTemplate('internals/ts-node.tsconfig.json'); - copyToTemplate('.vscode', true); copyToTemplate('public', true); copyToTemplate('src', true); diff --git a/internals/startingTemplate/src/app/pages/HomePage/index.tsx b/internals/startingTemplate/src/app/pages/HomePage/index.tsx index f422425..2bd8b88 100644 --- a/internals/startingTemplate/src/app/pages/HomePage/index.tsx +++ b/internals/startingTemplate/src/app/pages/HomePage/index.tsx @@ -5,10 +5,10 @@ export function HomePage() { return ( <> - Home Page + HomePage - HomePage container + My HomePage ); } diff --git a/internals/startingTemplate/src/styles/__tests__/media.test.ts b/internals/startingTemplate/src/styles/__tests__/media.test.ts index b1d0c0d..0bd2007 100644 --- a/internals/startingTemplate/src/styles/__tests__/media.test.ts +++ b/internals/startingTemplate/src/styles/__tests__/media.test.ts @@ -3,7 +3,7 @@ import { css } from 'styled-components/macro'; describe('media', () => { it('should return media query in css', () => { - const mediaQuery = media.small`color:red;`.join(''); + const mediaQuery = media.small`color: red;`.join(''); const cssVersion = css` @media (min-width: ${sizes.small}px) { color: red; diff --git a/internals/startingTemplate/tsconfig.json b/internals/startingTemplate/tsconfig.json index 84e18ec..ff1ba6c 100644 --- a/internals/startingTemplate/tsconfig.json +++ b/internals/startingTemplate/tsconfig.json @@ -18,5 +18,14 @@ "jsx": "react", "baseUrl": "./src" }, - "include": ["src"] + "include": ["src"], + "ts-node": { + "compilerOptions": { + "esModuleInterop": true, + "module": "commonjs", + "moduleResolution": "node", + "noEmit": true, + "allowSyntheticDefaultImports": true + } + } } diff --git a/internals/testing/generators/test-generators.ts b/internals/testing/generators/test-generators.ts index f2616d7..0f21174 100644 --- a/internals/testing/generators/test-generators.ts +++ b/internals/testing/generators/test-generators.ts @@ -13,9 +13,10 @@ import { sliceVariations } from './sliceVariations'; import { baseGeneratorPath } from '../../generators/paths'; interface PlopGenerator extends PG { - runActions: ( - props: { [P in T]: any }, - ) => Promise<{ changes: []; failures: [] }>; + runActions: (props: { [P in T]: any }) => Promise<{ + changes: []; + failures: []; + }>; } process.chdir(path.join(__dirname, '../../generators')); diff --git a/internals/ts-node.tsconfig.json b/internals/ts-node.tsconfig.json deleted file mode 100644 index 7532767..0000000 --- a/internals/ts-node.tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "compilerOptions": { - "esModuleInterop": true, - "module": "commonjs", - "moduleResolution": "node", - "noEmit": true, - "allowSyntheticDefaultImports": true - } -} diff --git a/package.json b/package.json index c30b114..deca45f 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,7 @@ }, "license": "MIT", "engines": { - "yarn": ">=1.22.10", - "node": ">=14.15.0" + "node": ">=14.x" }, "bugs": { "url": "https://github.com/react-boilerplate/react-boilerplate-cra-template/issues" @@ -37,28 +36,28 @@ "test": "react-scripts test", "// ---TEMPLATE---": "Scripts will be also in the template", "start:prod": "yarn run build && serve -s build", - "test:generators": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/testing/generators/test-generators.ts", + "test:generators": "ts-node ./internals/testing/generators/test-generators.ts", "checkTs": "tsc --noEmit", "eslint": "eslint --ext js,ts,tsx", "lint": "yarn run eslint src", "lint:fix": "yarn run eslint --fix src", "lint:css": "stylelint src/**/*.css", - "generate": "cross-env TS_NODE_PROJECT='./internals/ts-node.tsconfig.json' plop --plopfile internals/generators/plopfile.ts", - "cleanAndSetup": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/clean.ts", + "generate": "plop --plopfile internals/generators/plopfile.ts", + "cleanAndSetup": "ts-node ./internals/scripts/clean.ts", "prettify": "prettier --write", "extract-messages": "i18next-scanner --config=internals/extractMessages/i18next-scanner.config.js", "// ---TESTING TEMPLATE---": "", "test:internals": "yarn run test:extract-messages && yarn run test:generators", "test:extract-messages": "jest --config=internals/extractMessages/jest.config.js", - "verify-startingTemplate-changes": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/verify-startingTemplate-changes.ts", + "verify-startingTemplate-changes": "ts-node ./internals/scripts/verify-startingTemplate-changes.ts", "test:coverage": "yarn run test --watchAll=false --coverage", "test:cra": "yarn run create:cra-app && cd generated-cra-app && yarn run test:generators && yarn run lint && yarn run checkTs && yarn run cleanAndSetup && yarn run lint && yarn run checkTs", "// ---BUILDING TEMPLATE---": "", - "create:npm-package": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/create-npm-package.script.ts", - "create:cra-app": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/create-cra-app.script.ts", + "create:npm-package": "ts-node ./internals/scripts/create-npm-package.script.ts", + "create:cra-app": "ts-node ./internals/scripts/create-cra-app.script.ts", "// ---PUBLISHING---": "", "publish:github": "cross-env PUBLIC_URL='/react-boilerplate-cra-template' yarn build && gh-pages -d build", - "changelog": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/create-changelog.script.ts", + "changelog": "ts-node ./internals/scripts/create-changelog.script.ts", "release": "standard-version", "publish:npm": "yarn run create:npm-package && yarn publish .cra-template-rb --non-interactive" }, @@ -90,73 +89,73 @@ } }, "dependencies": { - "@reduxjs/toolkit": "1.6.1", + "@reduxjs/toolkit": "1.7.1", "fontfaceobserver": "2.1.0", - "i18next": "20.4.0", + "i18next": "21.6.6", "i18next-browser-languagedetector": "6.1.2", "react": "17.0.2", - "react-app-polyfill": "2.0.0", + "react-app-polyfill": "3.0.0", "react-dom": "17.0.2", - "react-helmet-async": "1.0.9", - "react-i18next": "11.11.4", - "react-redux": "7.2.4", + "react-helmet-async": "1.2.2", + "react-i18next": "11.15.3", + "react-is": "17.0.2", + "react-redux": "7.2.6", "react-router-dom": "5.2.0", "redux-injectors": "1.3.0", "redux-saga": "1.1.3", - "sanitize.css": "12.0.1", - "styled-components": "5.3.0", - "web-vitals": "2.1.0" + "sanitize.css": "13.0.0", + "styled-components": "5.3.3", + "web-vitals": "2.1.2" }, "devDependencies": { "@commitlint/cli": "13.1.0", "@commitlint/config-conventional": "13.1.0", - "@testing-library/jest-dom": "5.14.1", - "@testing-library/react": "12.0.0", + "@testing-library/jest-dom": "5.16.1", + "@testing-library/react": "12.1.2", "@types/fontfaceobserver": "2.1.0", - "@types/jest": "26.0.23", + "@types/jest": "27.4.0", "@types/node": "14.14.31", - "@types/react": "17.0.19", - "@types/react-dom": "17.0.9", - "@types/react-redux": "7.1.18", - "@types/react-router-dom": "5.1.8", + "@types/react": "17.0.38", + "@types/react-dom": "17.0.11", + "@types/react-redux": "7.1.22", + "@types/react-router-dom": "5.3.2", "@types/react-test-renderer": "17.0.1", "@types/rimraf": "3.0.2", - "@types/shelljs": "0.8.9", - "@types/styled-components": "5.1.12", - "@types/testing-library__jest-dom": "5.14.1", + "@types/shelljs": "0.8.11", + "@types/styled-components": "5.1.20", + "@types/testing-library__jest-dom": "5.14.2", "@types/webpack": "5.28.0", - "@types/webpack-env": "1.16.2", + "@types/webpack-env": "1.16.3", "chalk": "4.1.2", "cross-env": "7.0.3", "devmoji": "2.3.0", "eslint-config-prettier": "8.3.0", - "eslint-plugin-prettier": "3.4.0", - "eslint-plugin-react-hooks": "4.2.0", + "eslint-plugin-prettier": "4.0.0", + "eslint-plugin-react-hooks": "4.3.0", "gh-pages": "3.2.3", "git-branch-is": "4.0.0", - "husky": "7.0.1", - "i18next-scanner": "3.0.0", + "husky": "7.0.4", + "i18next-scanner": "3.1.0", "inquirer": "7.3.3", "inquirer-directory": "2.2.0", - "jest-styled-components": "7.0.5", - "lint-staged": "11.1.2", + "jest-styled-components": "7.0.8", + "lint-staged": "12.1.7", "node-plop": "0.26.2", "plop": "2.7.4", - "prettier": "2.3.2", - "react-scripts": "4.0.3", + "prettier": "2.5.1", + "react-scripts": "5.0.0", "react-test-renderer": "17.0.2", - "replace-in-file": "6.2.0", + "replace-in-file": "6.3.2", "rimraf": "3.0.2", - "serve": "12.0.0", - "shelljs": "0.8.4", - "standard-version": "9.3.1", - "stylelint": "13.13.1", - "stylelint-config-recommended": "5.0.0", + "serve": "13.0.2", + "shelljs": "0.8.5", + "standard-version": "9.3.2", + "stylelint": "14.2.0", + "stylelint-config-recommended": "6.0.0", "stylelint-config-styled-components": "0.1.1", "stylelint-processor-styled-components": "1.10.0", - "ts-jest": "26.5.6", - "ts-node": "10.2.1", - "typescript": "4.3.5" + "ts-node": "10.4.0", + "typescript": "4.5.4" }, "browserslist": { "production": [ diff --git a/src/app/__tests__/__snapshots__/index.test.tsx.snap b/src/app/__tests__/__snapshots__/index.test.tsx.snap index ff7db31..d24d286 100644 --- a/src/app/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/app/__tests__/__snapshots__/index.test.tsx.snap @@ -11,6 +11,7 @@ exports[` should render and match the snapshot 1`] = ` "lang": "en-US", } } + prioritizeSeoTags={false} titleTemplate="%s - React Boilerplate" > should match snapshot 1`] = ` - - + +