first commit

Author: Zila-itc

.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'plugin:jsx-a11y/recommended',
+    'plugin:eslint-comments/recommended',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+    '@typescript-eslint/no-var-requires': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+  },
+}

.gitignore

@@ -0,0 +1,4 @@
+build/
+node_modules
+
+yarn-error.log

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: false,
+  trailingComma: 'es5',
+  singleQuote: true,
+  printWidth: 80,
+  tabWidth: 2,
+  endOfLine: 'auto'
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/i18n"
+    ],
+    "i18n-ally.keystyle": "nested"
+}

README.md

@@ -0,0 +1,16 @@
+## Download the starter kit
+
+npx degit https://github.com/gopinav/React-TypeScript-Webpack-Starter my-app
+
+## Install dependencies
+
+cd my-app &&
+yarn
+
+## Run dev server
+
+yarn start
+
+## Build
+
+yarn build

package.json

@@ -0,0 +1,76 @@
+{
+  "name": "react-typescript-webpack-starter",
+  "version": "1.0.0",
+  "description": "A starter template for React with Typescript using Webpack 5",
+  "scripts": {
+    "start": "webpack serve --config webpack/webpack.config.js --env env=dev",
+    "build": "webpack --config webpack/webpack.config.js --env env=prod",
+    "lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"",
+    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "React",
+    "TypeScript",
+    "Webpack 5",
+    "Starter Template",
+    "Boilerplate"
+  ],
+  "author": "Vishwas",
+  "license": "MIT",
+  "dependencies": {
+    "i18next": "^22.4.9",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-i18next": "^12.1.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/preset-env": "^7.12.16",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.12.16",
+    "@babel/runtime": "^7.13.10",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
+    "@typescript-eslint/parser": "^4.15.0",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^5.0.2",
+    "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "html-webpack-plugin": "^5.1.0",
+    "husky": "4",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.2.1",
+    "react-refresh": "^0.9.0",
+    "style-loader": "^2.0.0",
+    "typescript": "^4.1.5",
+    "webpack": "^5.21.2",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "eslint --fix"
+    ],
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --write"
+    ]
+  }
+}

src/@types/global.d.ts

@@ -0,0 +1,13 @@
+
+// Manual export global type
+
+export {};
+
+declare global {
+
+  const t: typeof import('i18next').default['t'];
+
+  // ---------------------------Component-------------------------------------
+  const cls: typeof import('classnames');
+}
+

src/@types/i18next.d.ts

@@ -0,0 +1,7 @@
+import { resources } from '../i18n/config';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    resources: typeof resources['en'];
+  }
+}

src/App.tsx

@@ -0,0 +1,16 @@
+import { changeLanguage } from 'i18next'
+
+export const App = () => {
+  const changeLang = (lang: 'km' | 'en', forceReload = true) => {
+    changeLanguage(lang)
+    forceReload && location.reload()
+  }
+
+  return (
+    <>
+      <h1>{t('title', { name: 'Jonh' })}</h1>
+      <button onClick={() => changeLang('km')}>Change To Khmer</button>
+      <button onClick={() => changeLang('en')}>Change to English</button>
+    </>
+  )
+}

src/declarations.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.svg' {
+  const content: string
+  export default content
+}

src/i18n/config.ts

@@ -0,0 +1,39 @@
+import i18next from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import en from './en/translation.json'
+import km from './km/translation.json'
+
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+export const resources = {
+  en: {
+    translation: en,
+  },
+  km: {
+    translation: km,
+  },
+}
+
+i18next
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to the react-i18next components.
+  // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    fallbackLng: 'en',
+    debug: true,
+    resources,
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+
+    // special options for react-i18next
+    // learn more: https://react.i18next.com/components/i18next-instance
+    react: {},
+  })
+
+export default i18next.t

src/i18n/en/translation.json

@@ -0,0 +1,7 @@
+{
+    "title": "Welcome {{name}}, to react using react-i18next fully type-safe",
+    "description": {
+      "part1": "This is a simple example.",
+      "part2": "😉"
+    }
+  }

src/i18n/km/translation.json

@@ -0,0 +1,7 @@
+{
+  "title": "សូមស្វាគមន៍ {{name}} ដើម្បីប្រតិកម្មដោយប្រើ react-i18next fully type-safe",
+  "description": {
+    "part1": "នេះគឺជាឧទាហរណ៍ដ៏សាមញ្ញមួយ។",
+    "part2": "😉"
+  }
+}

src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>React TypeScript Webpack 5 Starter Template</title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>

src/index.tsx

@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom'
+import { App } from './App'
+import './i18n/config';
+
+ReactDOM.render(<App />, document.getElementById('root'))

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ /* Type declaration files to be included in compilation. */,
+    "lib": [
+      "DOM",
+      "ESNext"
+    ] /* Specify library files to be included in the compilation. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react' or 'react-jsx'. */,
+    "noEmit": true /* Do not emit outputs. */,
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+    "resolveJsonModule": true
+    // "allowJs": true /* Allow javascript files to be compiled. Useful when migrating JS to TS */,
+    // "checkJs": true /* Report errors in .js files. Works in tandem with allowJs. */,
+  },
+  "include": ["src/**/*"]
+}

webpack/webpack.common.js

@@ -0,0 +1,49 @@
+const path = require('path')
+const webpack = require('webpack')
+
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: path.resolve(__dirname, '..', './src/index.tsx'),
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
+        type: 'asset/inline',
+      },
+    ],
+  },
+  output: {
+    path: path.resolve(__dirname, '..', './build'),
+    filename: 'bundle.js',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, '..', './src/index.html'),
+    }),
+    new webpack.ProvidePlugin({
+      t: [require.resolve('../src/i18n/config.ts'), 'default'],
+    }),
+  ],
+  stats: 'errors-only',
+}

webpack/webpack.config.js

@@ -0,0 +1,9 @@
+const { merge } = require('webpack-merge')
+const commonConfig = require('./webpack.common.js')
+
+module.exports = (envVars) => {
+  const { env } = envVars
+  const envConfig = require(`./webpack.${env}.js`)
+  const config = merge(commonConfig, envConfig)
+  return config
+}

webpack/webpack.dev.js

@@ -0,0 +1,18 @@
+const webpack = require('webpack')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+
+module.exports = {
+  mode: 'development',
+  devtool: 'cheap-module-source-map',
+  devServer: {
+    hot: true,
+    open: true,
+  },
+  plugins: [
+    new ReactRefreshWebpackPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.name': JSON.stringify('Vishwas'),
+    }),
+
+  ],
+}