From 26451a42910b094523a34e51b50c6bbb9558543c Mon Sep 17 00:00:00 2001 From: Sambo Chea Date: Sat, 12 Jun 2021 17:38:19 +0700 Subject: [PATCH] Task: Add app provider and add config alias paths for tsconfig and removed React imported --- README.md | 1 + craco.config.js | 17 ++++++++++++----- src/app/{App.css => App.less} | 0 src/app/App.tsx | 6 +++--- src/{index.css => index.less} | 0 src/index.tsx | 4 ++-- src/pages/About/index.tsx | 1 - src/pages/Home/index.tsx | 1 - src/provider/AppProvider.tsx | 5 +++++ src/routes/index.tsx | 1 - tsconfig.json | 11 +++++++++-- tsconfig.paths.json | 8 ++++++++ 12 files changed, 40 insertions(+), 15 deletions(-) rename src/app/{App.css => App.less} (100%) rename src/{index.css => index.less} (100%) create mode 100644 src/provider/AppProvider.tsx create mode 100644 tsconfig.paths.json diff --git a/README.md b/README.md index 9a95865..4b59bad 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ CUBETIQ React App Template for general use in react application. - Create React App: 4.0.3 - React: 17.0.0 - TypeScript: 4.1.2 +- Craco: 6.1.2 | Craco less: 1.17.1 # Contributors diff --git a/craco.config.js b/craco.config.js index ff7940b..e4e748f 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,9 +1,16 @@ -const path = require('path') +const path = require('path'); module.exports = { - resolve: { + webpack: { alias: { - '@': path.resolve(__dirname, './src'), - }, + '@': path.resolve(__dirname, 'src/') + } }, -} + jest: { + configure: { + moduleNameMapper: { + '^@(.*)$': '/src$1' + } + } + } +}; \ No newline at end of file diff --git a/src/app/App.css b/src/app/App.less similarity index 100% rename from src/app/App.css rename to src/app/App.less diff --git a/src/app/App.tsx b/src/app/App.tsx index a0eba27..53e2f89 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -1,10 +1,10 @@ -import React from 'react' +import AppProvider from '@/provider/AppProvider' import RouterView from '../routes' -import './App.css' +import './App.less' const App = () => { return ( - + ) } diff --git a/src/index.css b/src/index.less similarity index 100% rename from src/index.css rename to src/index.less diff --git a/src/index.tsx b/src/index.tsx index fd37fd8..265cf5a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom' -import './index.css' -import App from './app/App' +import './index.less' +import App from '@/app/App' import reportWebVitals from './reportWebVitals' ReactDOM.render( diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx index 616ce5b..6a9c4fb 100644 --- a/src/pages/About/index.tsx +++ b/src/pages/About/index.tsx @@ -1,4 +1,3 @@ -import React from 'react' import './index.less' export default function About() { diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index b3488b1..72f6dfd 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,4 +1,3 @@ -import React from 'react' import './index.less' export default function Home() { diff --git a/src/provider/AppProvider.tsx b/src/provider/AppProvider.tsx new file mode 100644 index 0000000..1f66a82 --- /dev/null +++ b/src/provider/AppProvider.tsx @@ -0,0 +1,5 @@ +const AppProvider = (props: any) => { + return <>{props.children} +} + +export default AppProvider diff --git a/src/routes/index.tsx b/src/routes/index.tsx index d655576..504534b 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,4 +1,3 @@ -import React from 'react' import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' import { routes } from './routes' diff --git a/tsconfig.json b/tsconfig.json index 9d379a3..7c2232b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -16,5 +20,8 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": ["src"] + "extends": "./tsconfig.paths.json", + "include": [ + "src" + ] } diff --git a/tsconfig.paths.json b/tsconfig.paths.json new file mode 100644 index 0000000..96c46e6 --- /dev/null +++ b/tsconfig.paths.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "paths": { + "@/*": ["src/*"] + } + } +}