15 | 
22 |
29 | )
30 | } // App()
31 |
32 | export default App
33 |
--------------------------------------------------------------------------------
/config/utils/StyleLoader.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const loader = require('style-loader')
3 |
4 | module.exports = function () {}
5 |
6 | module.exports.pitch = function (request) {
7 | const result = loader.pitch.call(this, request)
8 | const index = result.indexOf(
9 | 'options.styleTagTransform = styleTagTransformFn;\n'
10 | )
11 | if (index === -1) return result
12 | const insertIndex = index - 1
13 |
14 | // eslint-disable-next-line prefer-destructuring
15 | const resourcePath = this.resourcePath
16 | const relativePath = path.relative(
17 | path.resolve(__dirname, '..'),
18 | resourcePath
19 | )
20 |
21 | const insertAttr = `
22 | if (typeof options.attributes !== 'object') {
23 | options.attributes = {}
24 | }
25 | options.attributes["source-path"] = '${relativePath}' // do anything you want
26 | runtimeOptions.attributes = options.attributes;
27 | `
28 |
29 | console.log(
30 | result.slice(0, insertIndex) + insertAttr + result.slice(insertIndex)
31 | )
32 |
33 | return result.slice(0, insertIndex) + insertAttr + result.slice(insertIndex)
34 | }
35 |
--------------------------------------------------------------------------------
/config/utils/SocketHandler.js:
--------------------------------------------------------------------------------
1 | const http = require('http')
2 | const { Server } = require('socket.io')
3 | const { findFreePort, setPort } = require('./PortHandler')
4 |
5 | const server = http.createServer()
6 | const io = new Server(server)
7 |
8 | let socket = null
9 | const promiseIOConnection = new Promise(async (resolve) => {
10 | const SOCKET_IO_PORT = await findFreePort(3030)
11 | setPort(SOCKET_IO_PORT, 'SOCKET_IO_PORT')
12 |
13 | let callback = null
14 | io.on('connection', (initializeSocket) => {
15 | let sockets = {}
16 | // Save the list of all connections to a variable
17 | sockets[initializeSocket.io] = initializeSocket
18 | socket = initializeSocket
19 |
20 | // When disconnect, delete the socket with the variable
21 | initializeSocket.on('disconnect', () => {
22 | delete sockets[initializeSocket.id]
23 | })
24 |
25 | if (callback) {
26 | callback({ server, io, socket })
27 | } else {
28 | resolve({
29 | server,
30 | io,
31 | socket,
32 | setupCallback: function (fn) {
33 | callback = fn
34 | },
35 | })
36 | }
37 | })
38 |
39 | server.listen(SOCKET_IO_PORT)
40 | })
41 |
42 | module.exports = promiseIOConnection
43 |
--------------------------------------------------------------------------------
/config/utils/NetworkGenerator.js:
--------------------------------------------------------------------------------
1 | //=======================================
2 | // NOTE - generate External IP
3 | //=======================================
4 | const os = require('os')
5 | const OSNetworkInterfaces = os.networkInterfaces()
6 | const Ethernet =
7 | OSNetworkInterfaces.Ethernet || Object.values(OSNetworkInterfaces)
8 |
9 | let IPV4_ADDRESS = null
10 |
11 | if (Ethernet) {
12 | let ethernetFormatted = Ethernet
13 |
14 | if (ethernetFormatted[0].length) {
15 | let tmpEthernetFormatted = []
16 |
17 | ethernetFormatted.forEach(function (EthernetItem) {
18 | tmpEthernetFormatted = tmpEthernetFormatted.concat(EthernetItem)
19 | })
20 |
21 | ethernetFormatted = tmpEthernetFormatted
22 | }
23 |
24 | ethernetFormatted.some(function (ethernetItem) {
25 | const ethernetItemInfo =
26 | ethernetItem.family &&
27 | /ipv4|4/.test(ethernetItem.family?.toLowerCase?.() ?? ethernetItem.family)
28 | ? ethernetItem
29 | : null
30 |
31 | if (
32 | ethernetItemInfo &&
33 | ethernetItemInfo.address !== '127.0.0.1' &&
34 | (ethernetItemInfo.address.includes('192') ||
35 | ethernetItemInfo.address.includes('172'))
36 | ) {
37 | IPV4_ADDRESS = ethernetItemInfo.address
38 | return true
39 | }
40 | })
41 | }
42 |
43 | module.exports = { IPV4_ADDRESS }
44 |
--------------------------------------------------------------------------------
/config/types/dts-generator.mjs:
--------------------------------------------------------------------------------
1 | import {
2 | quicktype,
3 | InputData,
4 | jsonInputForTargetLanguage,
5 | } from 'quicktype-core'
6 | import {
7 | ENV_OBJECT_DEFAULT as ImportMeta,
8 | promiseENVWriteFileSync,
9 | } from '../env/env.mjs'
10 | import { writeFile } from 'fs'
11 | import { resolve } from 'path'
12 |
13 | async function quicktypeJSON(targetLanguage, jsonString) {
14 | const jsonInput = jsonInputForTargetLanguage(targetLanguage)
15 |
16 | // We could add multiple samples for the same desired
17 | // type, or many sources for other types. Here we're
18 | // just making one type from one piece of sample JSON.
19 | await jsonInput.addSource({
20 | name: 'ImportMeta',
21 | samples: [jsonString],
22 | })
23 |
24 | const inputData = new InputData()
25 | inputData.addInput(jsonInput)
26 |
27 | return await quicktype({
28 | inputData,
29 | lang: targetLanguage,
30 | rendererOptions: { 'just-types': 'true' },
31 | })
32 | }
33 |
34 | async function main() {
35 | const { lines: tdsGroup } = await quicktypeJSON(
36 | 'typescript',
37 | JSON.stringify({ env: ImportMeta })
38 | )
39 |
40 | writeFile(
41 | resolve('./config/types', 'ImportMeta.d.ts'),
42 | tdsGroup.join('\n').replace(/export\s/g, ''),
43 | function (err) {}
44 | )
45 | }
46 |
47 | main()
48 |
49 | export { promiseENVWriteFileSync }
50 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/diamond.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
46 |
--------------------------------------------------------------------------------
/config/build-tool-packages/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "build-tool-packages",
3 | "version": "1.0.0",
4 | "description": "build-tool-packages",
5 | "main": "",
6 | "scripts": {},
7 | "author": "",
8 | "license": "ISC",
9 | "overrides": {
10 | "isomorphic-fetch@*": "$isomorphic-fetch"
11 | },
12 | "dependencies": {
13 | "@babel/core": "7.22.15",
14 | "@babel/preset-env": "^7.22.15",
15 | "@babel/preset-react": "7.22.15",
16 | "@babel/preset-typescript": "7.22.15",
17 | "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
18 | "@types/react": "^18.2.14",
19 | "@types/webpack-env": "^1.18.1",
20 | "autoprefixer": "^10.4.14",
21 | "babel-loader": "^9.1.2",
22 | "clean-webpack-plugin": "^4.0.0",
23 | "copy-webpack-plugin": "^11.0.0",
24 | "core-js": "^3.31.0",
25 | "cross-env": "^7.0.3",
26 | "css-loader": "^6.8.1",
27 | "css-minimizer-webpack-plugin": "^5.0.1",
28 | "html-webpack-plugin": "^5.5.3",
29 | "isomorphic-fetch": "^3.0.0",
30 | "mini-css-extract-plugin": "^2.7.6",
31 | "postcss": "^8.4.24",
32 | "postcss-loader": "^7.3.3",
33 | "postcss-preset-env": "^9.0.0",
34 | "postcss-simple-vars": "^7.0.1",
35 | "purgecss-webpack-plugin": "^5.0.0",
36 | "quicktype-core": "^23.0.49",
37 | "react-refresh": "^0.14.0",
38 | "socket.io": "^4.7.1",
39 | "esbuild-loader": "^4.0.2",
40 | "tailwindcss": "^3.3.2",
41 | "terser-webpack-plugin": "^5.3.9",
42 | "unplugin-auto-import": "^0.16.5",
43 | "webpack": "^5.88.1",
44 | "webpack-cli": "^5.1.4",
45 | "webpack-dev-server": "^4.15.1"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/config/eslint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | ignorePatterns: ['webpack.config.js', 'env/**/*', 'config/**/*', 'dist/**/*'],
4 | extends: [
5 | '.eslintrc-auto-import.json',
6 | 'airbnb-typescript',
7 | 'airbnb/hooks',
8 | 'plugin:@typescript-eslint/recommended',
9 | // 'plugin:jest/recommended',
10 | 'plugin:prettier/recommended',
11 | 'eslint:recommended',
12 | 'plugin:import/recommended',
13 | 'plugin:import/typescript',
14 | 'plugin:import/errors',
15 | 'plugin:import/warnings',
16 | 'prettier',
17 | ],
18 | plugins: ['react', '@typescript-eslint/eslint-plugin'],
19 | env: {
20 | browser: true,
21 | es6: true,
22 | node: true,
23 | // jest: true,
24 | },
25 | globals: {
26 | Atomics: 'readonly',
27 | SharedArrayBuffer: 'readonly',
28 | NodeJS: true,
29 | },
30 | parser: '@typescript-eslint/parser',
31 | parserOptions: {
32 | parser: {
33 | js: 'espree',
34 | jsx: 'espree',
35 | '': 'espree',
36 | },
37 | ecmaFeatures: {
38 | jsx: true,
39 | tsx: true,
40 | },
41 | ecmaVersion: 'latest',
42 | sourceType: 'module',
43 | project: './tsconfig.json',
44 | },
45 | rules: {
46 | 'linebreak-style': 'off',
47 | 'prettier/prettier': [
48 | 'error',
49 | {
50 | endOfLine: 'auto',
51 | },
52 | ],
53 | '@typescript-eslint/naming-convention': 'off',
54 | 'no-unused-vars': 'warn',
55 | 'react-hooks/rules-of-hooks': 'warn',
56 | 'react-hooks/exhaustive-deps': 'warn',
57 | },
58 | settings: {
59 | 'import/resolver': {
60 | 'eslint-import-resolver-custom-alias': {
61 | alias: {
62 | '': './src',
63 | },
64 | extensions: ['.js', '.jsx', '.ts', '.tsx'],
65 | },
66 | },
67 | },
68 | }
69 |
--------------------------------------------------------------------------------
/config/cz.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | useEmoji: true,
3 | skipQuestions: ['footerPrefix', 'footer', 'confirmCommit'],
4 | types: [
5 | {
6 | value: 'chore',
7 | name: "chore: 🤷 If you don't know the type will select",
8 | emoji: ':shrug:',
9 | },
10 | {
11 | value: 'perf',
12 | name: 'perf: ⚡️ Improve perfomance',
13 | emoji: ':zap:',
14 | },
15 | {
16 | value: 'release',
17 | name: 'release: 🎯 Create a release commit',
18 | emoji: ':dart:',
19 | },
20 | {
21 | value: 'docs',
22 | name: 'docs: 🗒 Create / change some document files (ex: *.docs, *.md)',
23 | emoji: ':spiral_notepad:',
24 | },
25 | {
26 | value: 'test',
27 | name: 'test: 🔬 Add / change a test',
28 | emoji: ':microscope:',
29 | },
30 | {
31 | value: 'style',
32 | name: 'style: 🎨 Only style for layout',
33 | emoji: ':art:',
34 | },
35 | {
36 | value: 'fix',
37 | name: 'fix: 🐞 Fix a bug',
38 | emoji: ':lady_beetle:',
39 | },
40 | {
41 | value: 'feat',
42 | name: 'feat: 🧩 Create a new feature',
43 | emoji: ':jigsaw:',
44 | },
45 | {
46 | value: 'update',
47 | name: 'update: 🧩 Update but not improve performance',
48 | emoji: ':jigsaw:',
49 | },
50 | ],
51 | scopes: [
52 | 'page',
53 | 'comp-page',
54 | 'comp-glob',
55 | 'lib',
56 | 'util',
57 | 'enum',
58 | 'define',
59 | 'server',
60 | 'other',
61 | ],
62 | messages: {
63 | type: 'Select the type of committing:',
64 | customScope: 'Select the scope this component affects:',
65 | subject: 'Title:\n',
66 | body: 'Description:\n',
67 | breaking: 'List any breaking changes:\n',
68 | footer: 'Issues this commit closes, e.g #123:',
69 | confirmCommit: 'Ready to commit ?\n',
70 | },
71 | }
72 |
--------------------------------------------------------------------------------
/config/.git-cz.json:
--------------------------------------------------------------------------------
1 | {
2 | "list": [
3 | "feat",
4 | "style",
5 | "test",
6 | "fix",
7 | "docs",
8 | "release",
9 | "update",
10 | "perf",
11 | "chore"
12 | ],
13 | "questions": ["type", "scope", "subject", "body", "breaking", "issues"],
14 | "types": {
15 | "chore": {
16 | "description": "If you don't know the type will select",
17 | "emoji": "🤷",
18 | "value": "chore"
19 | },
20 | "perf": {
21 | "description": "Improve perfomance",
22 | "emoji": "⚡️",
23 | "value": "perf"
24 | },
25 | "release": {
26 | "description": "Create a release commit",
27 | "emoji": "🎯",
28 | "value": "release"
29 | },
30 | "docs": {
31 | "description": " Create / change some document files (ex: *.docs, *.md)",
32 | "emoji": "🗒",
33 | "value": " docs"
34 | },
35 | "test": {
36 | "description": "Add / change a test",
37 | "emoji": "🔬",
38 | "value": "test"
39 | },
40 | "style": {
41 | "description": "Only style for layout",
42 | "emoji": "🎨",
43 | "value": "style"
44 | },
45 | "fix": {
46 | "description": "Fix a bug",
47 | "emoji": "🐞",
48 | "value": "fix"
49 | },
50 | "feat": {
51 | "description": "Create a new feature",
52 | "emoji": "🧩",
53 | "value": "feat"
54 | },
55 | "update": {
56 | "description": "Update but not improve performance",
57 | "emoji": "🧩",
58 | "value": "update"
59 | }
60 | },
61 | "scopes": [
62 | "page",
63 | "comp-page",
64 | "comp-glob",
65 | "lib",
66 | "util",
67 | "enum",
68 | "define",
69 | "server",
70 | "other"
71 | ],
72 | "messages": {
73 | "type": "Select the type of committing:",
74 | "customScope": "Select the scope this component affects:",
75 | "subject": "Title:\n",
76 | "body": "Description:\n",
77 | "breaking": "List any breaking changes:\n",
78 | "footer": "Issues this commit closes, e.g #123:",
79 | "confirmCommit": "Ready to commit ?\n"
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "dev": "cross-env ENV=development PORT=3000 IO_PORT=3030 webpack serve --mode=development",
4 | "build": "tsc && webpack --mode=production",
5 | "build:esm": "tsc && cross-env ESM=true webpack --mode=production",
6 | "preview": "cross-env PORT=8080 NODE_NO_WARNINGS=1 node ./config/webpack.serve.config.js",
7 | "prettier": "tsc --noEmit && prettier src/**/*.{t,j}s{,x} --no-error-on-unmatched-pattern --check",
8 | "lint": "tsc --noEmit && eslint src/**/*.{t,j}s{,x} --no-error-on-unmatched-pattern --ignore-pattern node_modules/",
9 | "lint:fix": "npm run lint -- --fix",
10 | "prettier:fix": "npm run prettier -- --write",
11 | "format": "npm run prettier:fix && npm run lint:fix",
12 | "prepare": "npx husky install",
13 | "pre-commit": "tsc && lint-staged"
14 | },
15 | "browserslist": [
16 | "> 1%",
17 | "last 2 versions",
18 | "not dead"
19 | ],
20 | "dependencies": {
21 | "polished": "^4.2.2",
22 | "react": "^18.2.0",
23 | "react-dom": "^18.2.0",
24 | "styled-components": "^6.0.2"
25 | },
26 | "devDependencies": {
27 | "commit-packages": "file:./config/commit-packages",
28 | "lint-and-format-packages": "file:./config/lint-and-format-packages",
29 | "build-tool-packages": "file:./config/build-tool-packages"
30 | },
31 | "eslintConfig": {
32 | "extends": [
33 | "./config/eslint.config.js"
34 | ]
35 | },
36 | "prettier": "./config/prettier.config.js",
37 | "lint-staged": {
38 | "*.{js,jsx,ts,tsx}": "npm run prettier:fix && npm run lint"
39 | },
40 | "commitlint": {
41 | "extends": [
42 | "@commitlint/config-conventional"
43 | ],
44 | "rules": {
45 | "type-enum": [
46 | 2,
47 | "always",
48 | [
49 | "feat",
50 | "style",
51 | "test",
52 | "fix",
53 | "docs",
54 | "release",
55 | "update",
56 | "perf",
57 | "chore"
58 | ]
59 | ]
60 | }
61 | },
62 | "config": {
63 | "commitizen": {
64 | "path": "cz-git",
65 | "czConfig": "./config/cz.config.js"
66 | }
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/bitcoin.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
51 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/chili.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
52 |
--------------------------------------------------------------------------------
/src/assets/static/images/logo.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/config/utils/PortHandler/index.js:
--------------------------------------------------------------------------------
1 | const net = require('net')
2 | const fs = require('fs')
3 | const path = require('path')
4 | const ObjectToEnvConverter = require('../ObjectToEnvConverter')
5 |
6 | const envPortPath = path.resolve(__dirname, './.env')
7 |
8 | const readFileENVSync = () => {
9 | if (!fs.existsSync(envPortPath)) {
10 | return
11 | }
12 |
13 | const portInfoStringity = fs.readFileSync(envPortPath, {
14 | encoding: 'utf8',
15 | flag: 'r',
16 | })
17 |
18 | if (!portInfoStringity) return
19 |
20 | let portInfo = {}
21 | portInfoStringity.split('\n').forEach((line) => {
22 | const [name, value] = line.split('=')
23 | if (name && value) {
24 | portInfo[name] = value
25 | }
26 | })
27 |
28 | return portInfo
29 | } // readFileENVSync
30 |
31 | const writeFileENVSync = (port, name) => {
32 | if (!port || !name) return
33 |
34 | const portInfo = readFileENVSync() || {}
35 |
36 | portInfo[name] = port
37 |
38 | new Promise(function (resolve) {
39 | try {
40 | fs.writeFileSync(envPortPath, ObjectToEnvConverter(portInfo))
41 |
42 | resolve('done')
43 | } catch {}
44 | })
45 | } // writeFileENVSync
46 |
47 | const checkPort = (port) => {
48 | return new Promise((resolve) => {
49 | const server = net.createServer()
50 | server.unref()
51 | server.on('error', () => {
52 | resolve(false)
53 | })
54 | server.listen(port, () => {
55 | server.close(() => {
56 | resolve(true)
57 | })
58 | })
59 | })
60 | } // checkPort
61 |
62 | const findFreePort = async (port) => {
63 | let tmpPort = port
64 | while (true) {
65 | const isFree = await checkPort(tmpPort)
66 | if (isFree) {
67 | return tmpPort
68 | }
69 | tmpPort++
70 | }
71 | } // findFreePort
72 |
73 | const getPort = (name) => {
74 | const portInfo = readFileENVSync()
75 |
76 | if (!portInfo || (name && !portInfo[name])) return
77 |
78 | return name ? portInfo[name] : portInfo
79 | } // getPort
80 |
81 | const releasePort = (port) => {
82 | return new Promise((resolve, reject) => {
83 | const server = net.createServer()
84 | server.unref()
85 | server.on('error', (err) => {
86 | reject(err)
87 | })
88 | server.listen(port, () => {
89 | server.close(() => {
90 | resolve()
91 | })
92 | })
93 | })
94 | }
95 |
96 | module.exports = {
97 | findFreePort,
98 | releasePort,
99 | setPort: (() => {
100 | return writeFileENVSync
101 | })(),
102 | getPort,
103 | }
104 |
--------------------------------------------------------------------------------
/config/env/env.mjs:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import { fileURLToPath } from 'url'
3 | import fs from 'fs'
4 |
5 | import ENV_DEFINE_LIST from '../../env/env-register.mjs'
6 | import ObjToEnvConverter from '../utils/ObjectToEnvConverter.js'
7 |
8 | const __filename = fileURLToPath(import.meta.url)
9 | const __dirname = path.dirname(__filename)
10 | const PROJECT_PATH = __dirname.replace(/\\/g, '/')
11 |
12 | const ENV_OBJECT_DEFAULT = {
13 | PORT: Number(),
14 | IO_PORT: Number(),
15 | LOCAL_ADDRESS: String(),
16 | LOCAL_HOST: String(),
17 | IPV4_ADDRESS: String(),
18 | IPV4_HOST: String(),
19 | IO_HOST: String(),
20 | }
21 | const ENV_OBJ_WITH_JSON_STRINGIFY_VALUE = { ...ENV_OBJECT_DEFAULT }
22 |
23 | const generateObjectFormatted = (obj, prefix) => {
24 | if (!obj || typeof obj !== 'object') return {}
25 | for (const key in obj) {
26 | let tmpKey = `${
27 | prefix ? prefix.toUpperCase() + '_' : ''
28 | }${key.toUpperCase()}`
29 |
30 | if (typeof obj[key] === 'object' && !obj[key].length) {
31 | for (const childKey in obj[key]) {
32 | setValueForObject(
33 | ENV_OBJECT_DEFAULT,
34 | tmpKey + '_' + childKey.toUpperCase(),
35 | obj[key][childKey]
36 | )
37 | setValueForObject(
38 | ENV_OBJ_WITH_JSON_STRINGIFY_VALUE,
39 | tmpKey + '_' + childKey.toUpperCase(),
40 | JSON.stringify(obj[key][childKey])
41 | )
42 | }
43 |
44 | delete obj[key]
45 | } else {
46 | setValueForObject(ENV_OBJECT_DEFAULT, tmpKey, obj[key])
47 | setValueForObject(
48 | ENV_OBJ_WITH_JSON_STRINGIFY_VALUE,
49 | tmpKey,
50 | JSON.stringify(obj[key])
51 | )
52 | delete obj[key]
53 | }
54 | }
55 | } // getObjectWithPrefix()
56 |
57 | const setValueForObject = (obj, key, value) => {
58 | if (!typeof obj === 'object' || !key) return
59 | obj[key] = value
60 | } // setValueForObject()
61 |
62 | // NOTE - First step is generate object formatted
63 | if (ENV_DEFINE_LIST.length) {
64 | ENV_DEFINE_LIST.forEach(function (item) {
65 | generateObjectFormatted(item.data, item.prefix)
66 | })
67 | }
68 | // End Region
69 |
70 | const promiseENVWriteFileSync = new Promise(function (resolve) {
71 | try {
72 | fs.writeFileSync(
73 | `${PROJECT_PATH}/.env`,
74 | ObjToEnvConverter(ENV_OBJECT_DEFAULT)
75 | )
76 | fs.writeFileSync(
77 | `${PROJECT_PATH}/env.json`,
78 | JSON.stringify(ENV_OBJ_WITH_JSON_STRINGIFY_VALUE)
79 | )
80 |
81 | resolve('done')
82 | } catch {}
83 | })
84 |
85 | export {
86 | ENV_OBJECT_DEFAULT,
87 | ENV_OBJ_WITH_JSON_STRINGIFY_VALUE,
88 | promiseENVWriteFileSync,
89 | }
90 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/sycee-gold.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
58 |
--------------------------------------------------------------------------------
/config/utils/WebpackCustomizeDefinePlugin.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack')
2 |
3 | class RuntimeUpdateValue {
4 | _pluginFn = null
5 | _options = null
6 |
7 | constructor(pluginFn, options) {
8 | this._pluginFn = pluginFn
9 | this._options = options
10 | }
11 |
12 | async getValue() {
13 | let tmpPluginValue =
14 | typeof this._pluginFn === 'function' ? this._pluginFn() : this._pluginFn
15 | tmpPluginValue =
16 | (await tmpPluginValue?.then?.(function (data) {
17 | return data
18 | })) ?? tmpPluginValue
19 |
20 | return typeof tmpPluginValue === 'object' &&
21 | tmpPluginValue instanceof Object &&
22 | !Array.isArray(tmpPluginValue)
23 | ? { ...tmpPluginValue, date: Date.now() }
24 | : tmpPluginValue
25 | }
26 |
27 | setRuntime(pluginKey, instanceOfPlugin, compiler) {
28 | if (!pluginKey || !instanceOfPlugin || !this._options || !compiler) return
29 |
30 | const self = this
31 |
32 | compiler.hooks.watchRun.tapAsync('MyPlugin', async (compilation, cb) => {
33 | if (
34 | compilation.modifiedFiles &&
35 | [...compilation.modifiedFiles][0] === this._options.fileDependencies
36 | ) {
37 | instanceOfPlugin.definitions[pluginKey] = await self.getValue()
38 | }
39 | cb()
40 | })
41 |
42 | compiler.hooks.afterCompile.tap('MyPlugin', (compilation) => {
43 | compilation.fileDependencies.add(this._options.fileDependencies)
44 | })
45 | }
46 | }
47 |
48 | class WebpackCustomizeDefinePlugin {
49 | _objPlugin = null
50 |
51 | constructor(objPlugin) {
52 | this._objPlugin = objPlugin
53 | }
54 |
55 | async apply(compiler) {
56 | if (
57 | !compiler ||
58 | !this._objPlugin ||
59 | !(
60 | typeof this._objPlugin === 'object' &&
61 | this._objPlugin instanceof Object &&
62 | !Array.isArray(this._objPlugin)
63 | )
64 | )
65 | return
66 |
67 | const objInstanceOfPlugin = {}
68 |
69 | // NOTE - The key is name of plugin that we want to define in project
70 | for (const key in this._objPlugin) {
71 | if (this._objPlugin[key] instanceof RuntimeUpdateValue) {
72 | objInstanceOfPlugin[key] = new webpack.DefinePlugin({
73 | [key]: await this._objPlugin[key].getValue(),
74 | })
75 | objInstanceOfPlugin[key].apply(compiler)
76 | this._objPlugin[key].setRuntime(key, objInstanceOfPlugin[key], compiler)
77 | } else if (
78 | typeof this._objPlugin[key] === 'string' ||
79 | (typeof this._objPlugin[key] === 'object' &&
80 | this._objPlugin[key] instanceof Object)
81 | ) {
82 | objInstanceOfPlugin[key] = new webpack.DefinePlugin({
83 | [key]: this._objPlugin[key],
84 | })
85 | objInstanceOfPlugin[key].apply(compiler)
86 | continue
87 | }
88 | }
89 | }
90 |
91 | static RuntimeUpdateValue(pluginFn, options) {
92 | return new RuntimeUpdateValue(pluginFn, options)
93 | }
94 | }
95 |
96 | module.exports = { WebpackCustomizeDefinePlugin }
97 |
--------------------------------------------------------------------------------
/config/.eslintrc-auto-import.json:
--------------------------------------------------------------------------------
1 | {
2 | "globals": {
3 | "BrowserRouter": true,
4 | "Link": true,
5 | "NavLink": true,
6 | "Navigate": true,
7 | "Outlet": true,
8 | "React": true,
9 | "Route": true,
10 | "RouterProvider": true,
11 | "Routes": true,
12 | "StrictMode": true,
13 | "Suspense": true,
14 | "componentDidCatch": true,
15 | "createBrowserRouter": true,
16 | "createContext": true,
17 | "createGlobalStyle": true,
18 | "createRef": true,
19 | "createRoot": true,
20 | "forwardRef": true,
21 | "generatePath": true,
22 | "keyframes": true,
23 | "lazy": true,
24 | "memo": true,
25 | "rgba": true,
26 | "startTransition": true,
27 | "styled": true,
28 | "useCallback": true,
29 | "useContext": true,
30 | "useDebugValue": true,
31 | "useDeferredValue": true,
32 | "useEffect": true,
33 | "useHref": true,
34 | "useId": true,
35 | "useImperativeHandle": true,
36 | "useInRouterContext": true,
37 | "useInsertionEffect": true,
38 | "useLayoutEffect": true,
39 | "useLinkClickHandler": true,
40 | "useLocation": true,
41 | "useMatches": true,
42 | "useMemo": true,
43 | "useNavigate": true,
44 | "useNavigationType": true,
45 | "useOutlet": true,
46 | "useOutletContext": true,
47 | "useParams": true,
48 | "useReducer": true,
49 | "useRef": true,
50 | "useResolvedPath": true,
51 | "useRoute": true,
52 | "useRoutes": true,
53 | "useSearchParams": true,
54 | "useState": true,
55 | "useSyncExternalStore": true,
56 | "useTransition": true,
57 | "BotInfo": true,
58 | "DeviceInfo": true,
59 | "generateSentenceCase": true,
60 | "generateTitleCase": true,
61 | "getCookie": true,
62 | "getCustomSlug": true,
63 | "getSlug": true,
64 | "getSlugWithoutDash": true,
65 | "getUnsignedLetters": true,
66 | "setCookie": true,
67 | "setLinkAlternateTag": true,
68 | "setLinkAmphtmlTag": true,
69 | "setLinkAuthorTag": true,
70 | "setLinkCanonicalTag": true,
71 | "setLinkNextTag": true,
72 | "setLinkPrevTag": true,
73 | "setLinkTwitterTitleTag": true,
74 | "setMetaAuthorTag": true,
75 | "setMetaDescriptionTag": true,
76 | "setMetaGeoPositionTag": true,
77 | "setMetaGeoRegionTag": true,
78 | "setMetaGoogleBotTag": true,
79 | "setMetaGoogleSiteVerificationTag": true,
80 | "setMetaICBMTag": true,
81 | "setMetaKeywordsTag": true,
82 | "setMetaOgDescriptionTag": true,
83 | "setMetaOgImageTag": true,
84 | "setMetaOgSiteNameTag": true,
85 | "setMetaOgTitleTag": true,
86 | "setMetaOgTypeTag": true,
87 | "setMetaOgUrlTag": true,
88 | "setMetaRobotsTag": true,
89 | "setMetaTwitterCardTag": true,
90 | "setMetaTwitterDescriptionTag": true,
91 | "setMetaTwitterImageTag": true,
92 | "setMetaViewportTag": true,
93 | "setSeoTag": true,
94 | "setTitleTag": true,
95 | "useSentenceCase": true,
96 | "useSlug": true,
97 | "useSlugWithoutDash": true,
98 | "useTitleCase": true,
99 | "useUnsignedLetters": true,
100 | "LocaleInfo": true,
101 | "getLocale": true,
102 | "useLocaleInfo": true,
103 | "EnvironmentInfo": true,
104 | "deleteCookie": true,
105 | "ProxyAPI": true,
106 | "decode": true,
107 | "encode": true,
108 | "getAPIStore": true,
109 | "hashCode": true
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "exclude": [
3 | "node_modules",
4 | "dist",
5 | "package.json",
6 | "package-lock.json",
7 | "yarn-lock.json"
8 | ],
9 | "files": [
10 | "config/auto-imports.d.ts",
11 | "config/types/ImportMeta.d.ts",
12 | "src/static.d.ts"
13 | ],
14 | "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.jsx", "src/**/*.tsx"],
15 | "compilerOptions": {
16 | "useDefineForClassFields": true,
17 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
18 | // NOTE - Set what module will be built for project (es, commonjs) (what is compile way will be chosen for import / export syntax)
19 | // https://www.typescriptlang.org/tsconfig#module
20 | // https://stackoverflow.com/questions/41993811/understanding-target-and-module-in-tsconfig
21 | "module": "ESNext",
22 |
23 | // NOTE - Set what target ECMAScript target version (you can easy to think that the target option is used to setup for what compile way for script syntax that exclude import and export)
24 | // https://www.typescriptlang.org/tsconfig#target
25 | // https://stackoverflow.com/questions/39493003/typescript-compile-options-module-vs-target
26 | "target": "ESNext",
27 |
28 | // NOTE - Set way to system try to find module
29 | // https://www.typescriptlang.org/tsconfig#moduleResolution
30 | // https://www.typescriptlang.org/tsconfig#moduleResolution
31 | // https://www.codementor.io/@elliotaplant/understanding-javascript-module-resolution-systems-with-dinosaurs-il2oqro6e
32 | "moduleResolution": "Node",
33 |
34 | // NOTE - Base path of project setup with this tsconfig
35 | "baseUrl": "src",
36 |
37 | // NOTE - Setup resolve alias path for project (use case is for auto complete sugestion)
38 | "paths": {
39 | "@/*": ["../*"],
40 | "assets/*": ["assets/*"],
41 | "app/*": ["app/*"],
42 | "hooks/*": ["hooks/*"],
43 | "pages/*": ["pages/*"],
44 | "components/*": ["components/*"],
45 | "store/*": ["store/*"],
46 | "utils/*": ["utils/*"]
47 | },
48 |
49 | // NOTE - Tell typescript compile just only check type
50 | // https://www.typescriptlang.org/tsconfig#noEmit
51 | // https://stackoverflow.com/questions/55002137/typescript-noemit-use-case
52 | "noEmit": true,
53 |
54 | // NOTE - This option allow us to use .tsx in project
55 | // https://www.typescriptlang.org/tsconfig#jsx
56 | // https://stackoverflow.com/questions/62859458/what-is-the-use-of-jsx-property-in-tsconfig-json
57 | // "jsx": "preserve",
58 | // "jsx": "preserve",
59 | "jsx": "react",
60 |
61 | // NOTE - Check for auto import
62 | // "checkJs": true,
63 |
64 | // NOTE - Allow JavaScript files to be imported inside your project
65 | // https://www.typescriptlang.org/tsconfig#allowJs
66 | "allowJs": true,
67 |
68 | // NOTE - Setup strict mode for project (eslint also use this config to figure out error)
69 | // https://www.typescriptlang.org/tsconfig#strict
70 | // https://dev.to/jsdev/strict-mode-typescript-j8p
71 | "strict": false,
72 | // "noImplicitAny": false,
73 |
74 | // NOTE - This option will skip type checking of declaration files if enable
75 | // https://www.typescriptlang.org/tsconfig#skipLibCheck
76 | "skipLibCheck": true,
77 | "forceConsistentCasingInFileNames": true,
78 | "resolveJsonModule": true,
79 |
80 | // NOTE - With flag esModuleInterop we can import CommonJS modules in compliance with es6 modules spec
81 | // https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file
82 | "esModuleInterop": true,
83 |
84 | // NOTE - Allow you write (import React from "react";) instead of (import * as React from "react";)
85 | // https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports
86 | "allowSyntheticDefaultImports": true,
87 | "importHelpers": true,
88 | "sourceMap": true,
89 | "isolatedModules": true
90 | // "types": ["webpack-env", "react"]
91 | },
92 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
93 | }
94 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/cannabis.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
70 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ['./src/**/*.{js,jsx,ts,tsx}'],
3 | // prefix: 'gj-',
4 | theme: {
5 | screens: {
6 | 375: '375px',
7 | 390: '390px',
8 | 425: '425px',
9 | 480: '480px',
10 | 640: '640px',
11 | 740: '740px',
12 | 768: '768px',
13 | 992: '992px',
14 | 1024: '1024px',
15 | 1200: '1200px',
16 | 1366: '1366px',
17 | }, // screens
18 |
19 | colors: {
20 | primary: {
21 | 300: '#B34600',
22 | 200: '#D95500',
23 | 70: '#FF8332',
24 | 40: '#FFC198',
25 | 10: '#FFEFE5',
26 | DEFAULT: '#FF6400',
27 | },
28 | white: '#FFFFFF',
29 | borderElement: '#D1D1D6',
30 | gray: {
31 | 80: '#1C1C1E',
32 | 60: '#3A3A3C',
33 | 40: '#636366',
34 | 30: '#AEAEB2',
35 | 20: '#D1D1D6',
36 | 10: '#F2F2F7',
37 | },
38 | yellow: {
39 | 50: '#FFE680',
40 | 10: '#FFF0B3',
41 | DEFAULT: '#FFD326',
42 | },
43 | green: {
44 | 50: '#30DA5B',
45 | 10: '#CEFDD5',
46 | DEFAULT: '#20B845',
47 | },
48 | red: {
49 | 50: '#FF6961',
50 | 10: '#FFAAA6',
51 | DEFAULT: '#D70015',
52 | },
53 | purple: {
54 | 50: '#DA8EFF',
55 | 10: '#E6CDFD',
56 | DEFAULT: '#8943AB',
57 | },
58 | blue: '#3872DD',
59 | }, // colors
60 |
61 | fontSize: {
62 | 10: ['10px', { lineHeight: '1.5' }],
63 | 12: ['12px', { lineHeight: '1.5' }],
64 | 14: ['14px', { lineHeight: '1.5' }],
65 | 16: ['16px', { lineHeight: '1.5' }],
66 | 18: ['18px', { lineHeight: '29px' }],
67 | 20: ['20px', { lineHeight: '1.5' }],
68 | 22: ['22px', { lineHeight: '36px' }],
69 | 24: ['24px', { lineHeight: '1.5' }],
70 | 28: ['28px', { lineHeight: '45px' }],
71 | 32: ['32px', { lineHeight: '52px' }],
72 | 34: ['34px', { lineHeight: '1.5' }],
73 | 36: ['36px', { lineHeight: '1.5' }],
74 | 40: ['40px', { lineHeight: '1.5' }],
75 | 42: ['42px', { lineHeight: '1.5' }],
76 | 48: ['48px', { lineHeight: '1.5' }],
77 | }, // fontSize
78 |
79 | borderRadius: {
80 | 4: '4px',
81 | 8: '8px',
82 | 10: '10px',
83 | 12: '12px',
84 | 16: '16px',
85 | 20: '20px',
86 | 27: '27px',
87 | round: '50%',
88 | }, // borderRadius
89 |
90 | boxShadow: {
91 | '02030': '0px 20px 30px rgba(0, 0, 0, 0.1)',
92 | 2420: '2px 4px 20px rgba(0, 0, 0, 0.2)',
93 | }, // boxShadow
94 |
95 | spacing: {
96 | 0: '0px',
97 | 2: '2px',
98 | 4: '4px',
99 | 6: '6px',
100 | 8: '8px',
101 | 10: '10px',
102 | 12: '12px',
103 | 14: '14px',
104 | 16: '16px',
105 | 18: '18px',
106 | 20: '20px',
107 | 22: '22px',
108 | 24: '24px',
109 | 26: '26px',
110 | 28: '28px',
111 | 30: '30px',
112 | 32: '32px',
113 | 34: '34px',
114 | 36: '36px',
115 | 38: '38px',
116 | 40: '40px',
117 | 42: '42px',
118 | 44: '44px',
119 | 46: '46px',
120 | 48: '48px',
121 | 50: '50px',
122 | 52: '52px',
123 | 54: '54px',
124 | 56: '56px',
125 | 58: '58px',
126 | 60: '60px',
127 | 62: '62px',
128 | 64: '64px',
129 | 66: '66px',
130 | 68: '68px',
131 | 70: '70px',
132 | 72: '72px',
133 | 74: '74px',
134 | 76: '76px',
135 | 78: '78px',
136 | 80: '80px',
137 | }, // spacing
138 | fontWeight: {
139 | regular: 400,
140 | semibold: 600,
141 | bold: 700,
142 | normal: 'normal',
143 | },
144 | fontFamily: {
145 | 'nunito-sans': ['Nunito Sans', 'Roboto', 'Helvetica Neue', 'sans-serif'],
146 |
147 | 'svn-poppins': ['SVN-Poppins', 'Roboto', 'Helvetica Neue', 'sans-serif'],
148 |
149 | fas: 'Fontawesome 6 Pro',
150 | }, // fontFamily
151 |
152 | fontStyle: {
153 | normal: 'normal',
154 | italic: 'italic',
155 | }, // fontStyle
156 |
157 | extend: {
158 | lineHeight: {
159 | 29: '29px',
160 | 36: '36px',
161 | 45: '45px',
162 | 52: '52px',
163 | },
164 | margin: {
165 | 8: '8px',
166 | 16: '16px',
167 | },
168 | flexBasis: {
169 | 45: '45%',
170 | },
171 | },
172 | },
173 | plugins: [],
174 | }
175 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/onion-green.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
90 |
--------------------------------------------------------------------------------
/config/webpack.production.config.js:
--------------------------------------------------------------------------------
1 | const { DefinePlugin } = require('webpack')
2 | const glob = require('glob')
3 | const TerserPlugin = require('terser-webpack-plugin')
4 | const HtmlWebpackPlugin = require('html-webpack-plugin')
5 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
6 | const { PurgeCSSPlugin } = require('purgecss-webpack-plugin')
7 |
8 | module.exports = (async () => {
9 | const { ENV_OBJ_WITH_JSON_STRINGIFY_VALUE } = await import('./env/env.mjs')
10 |
11 | return {
12 | mode: 'production',
13 | output: {
14 | publicPath: '/',
15 | ...(process.env.ESM
16 | ? {
17 | module: true,
18 | environment: {
19 | dynamicImport: true,
20 | },
21 | }
22 | : {}),
23 | },
24 | ...(process.env.ESM
25 | ? {
26 | // externalsType: 'module',
27 | externals: {
28 | react: 'module https://esm.sh/react@18.2.0',
29 | 'react-dom': 'module https://esm.sh/react-dom@18.2.0',
30 | 'react-router-dom': 'module https://esm.sh/react-router-dom@6.6.2',
31 | 'styled-components':
32 | 'module https://esm.sh/styled-components@5.3.6',
33 | polished: 'module https://esm.sh/polished@4.2.2',
34 | },
35 | }
36 | : {}),
37 | module: {
38 | rules: [
39 | {
40 | test: /\.(js|jsx|ts|tsx)$/,
41 | exclude: /node_modules|dist/,
42 | use: {
43 | loader: 'babel-loader',
44 | options: {
45 | presets: [
46 | [
47 | '@babel/preset-env',
48 | {
49 | bugfixes: true,
50 | useBuiltIns: 'entry',
51 | corejs: 3,
52 | },
53 | ],
54 | '@babel/preset-react',
55 | '@babel/preset-typescript',
56 | ],
57 | plugins: [
58 | ['@babel/plugin-transform-class-properties', { loose: false }],
59 | ],
60 | },
61 | },
62 | },
63 | ],
64 | },
65 | plugins: [
66 | new PurgeCSSPlugin({
67 | paths: ['./index.production.html'].concat(
68 | glob.sync(`./src/**/*`, { nodir: true })
69 | ),
70 | }),
71 | new HtmlWebpackPlugin({
72 | title: 'webpack project for react',
73 | template: 'index.production.html',
74 | inject: 'body',
75 | templateParameters: {
76 | env: process.env.ENV,
77 | ioHost: JSON.stringify(process.env.IO_HOST),
78 | },
79 | scriptLoading: process.env.ESM ? 'module' : 'defer',
80 | minify: {
81 | collapseWhitespace: true,
82 | removeComments: true,
83 | removeRedundantAttributes: true,
84 | removeScriptTypeAttributes: true,
85 | removeStyleLinkTypeAttributes: true,
86 | useShortDoctype: true,
87 | },
88 | }),
89 | new DefinePlugin({
90 | 'import.meta.env': ENV_OBJ_WITH_JSON_STRINGIFY_VALUE,
91 | }),
92 | ],
93 | stats: {
94 | assetsSort: '!size',
95 | children: false,
96 | usedExports: false,
97 | modules: false,
98 | entrypoints: false,
99 | excludeAssets: [/\.*\.map/],
100 | },
101 | cache: {
102 | type: 'filesystem',
103 | allowCollectingMemory: true,
104 | memoryCacheUnaffected: true,
105 | compression: 'gzip',
106 | },
107 | performance: {
108 | maxEntrypointSize: 512000,
109 | maxAssetSize: 512000,
110 | hints: false,
111 | },
112 | optimization: {
113 | moduleIds: 'deterministic',
114 | runtimeChunk: 'single',
115 | splitChunks: {
116 | chunks: 'all',
117 | minSize: 5000,
118 | maxSize: 100000,
119 |
120 | cacheGroups: {
121 | styles: {
122 | type: 'css/mini-extract',
123 | filename: '[contenthash:8].css',
124 | priority: 100,
125 | minSize: 1000,
126 | maxSize: 50000,
127 | minSizeReduction: 50000,
128 | enforce: true,
129 | },
130 | vendor: {
131 | chunks: 'all',
132 | test: /[\\/]node_modules[\\/]/,
133 | filename: '[chunkhash:8].js',
134 | enforce: true,
135 | reuseExistingChunk: true,
136 | },
137 | utils: {
138 | chunks: 'all',
139 | test: /[\\/]utils[\\/]/,
140 | filename: '[chunkhash:8].js',
141 | reuseExistingChunk: true,
142 | minSize: 10000,
143 | maxSize: 100000,
144 | },
145 | app: {
146 | chunks: 'all',
147 | test: /[\\/]app[\\/]/,
148 | filename: '[chunkhash:8].js',
149 | reuseExistingChunk: true,
150 | minSize: 10000,
151 | maxSize: 100000,
152 | },
153 | store: {
154 | chunks: 'all',
155 | test: /[\\/]store[\\/]/,
156 | filename: '[chunkhash:8].js',
157 | reuseExistingChunk: true,
158 | minSize: 10000,
159 | maxSize: 100000,
160 | },
161 | hooks: {
162 | chunks: 'all',
163 | test: /[\\/]hooks[\\/]/,
164 | filename: '[chunkhash:8].js',
165 | reuseExistingChunk: true,
166 | minSize: 10000,
167 | maxSize: 100000,
168 | },
169 | },
170 | },
171 |
172 | minimize: true,
173 | minimizer: [
174 | new TerserPlugin({
175 | parallel: 4,
176 | terserOptions: {
177 | format: {
178 | comments: false, // It will drop all the console.log statements from the final production build
179 | },
180 | compress: {
181 | // drop_console: true, // It will stop showing any console.log statement in dev tools. Make it false if you want to see consoles in production mode.
182 | },
183 | },
184 | extractComments: false,
185 | }),
186 | // new ESBuildMinifyPlugin({
187 | // target: 'es2015',
188 | // }),
189 | new CssMinimizerPlugin({
190 | exclude: /node_modules/,
191 | parallel: 4,
192 |
193 | minify: [
194 | // CssMinimizerPlugin.esbuildMinify,
195 | CssMinimizerPlugin.cssnanoMinify,
196 | CssMinimizerPlugin.cssoMinify,
197 | CssMinimizerPlugin.cleanCssMinify,
198 | ],
199 | }),
200 | ],
201 | }, // optimization
202 | target: process.env.ESM ? 'web' : 'browserslist',
203 | ...(process.env.ESM
204 | ? {
205 | experiments: {
206 | outputModule: true,
207 | },
208 | }
209 | : {
210 | experiments: {
211 | cacheUnaffected: true,
212 | },
213 | }),
214 | }
215 | })()
216 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/money.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
105 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/bug.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
110 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const fs = require('fs')
3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin')
4 | const CopyPlugin = require('copy-webpack-plugin')
5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
6 |
7 | const PROJECT_PATH = __dirname.replace(/\\/g, '/')
8 | const resolve =
9 | resolveTsconfigPathsToAlias(path.resolve(PROJECT_PATH, 'tsconfig.json')) || {}
10 |
11 | module.exports = async (env, arg) => {
12 | const WebpackConfigWithMode = await require(getWebpackConfigFilePathWithMode(
13 | arg.mode
14 | ))
15 |
16 | if (!WebpackConfigWithMode) return
17 |
18 | return {
19 | mode: WebpackConfigWithMode.mode || arg.mode || 'production',
20 | context: path.resolve(__dirname, '.'),
21 | entry: {
22 | app: {
23 | import: '/src/index.tsx',
24 | },
25 | ...(WebpackConfigWithMode.entry || {}),
26 | },
27 | output: {
28 | pathinfo: false,
29 | globalObject: 'window',
30 | filename: '[contenthash:8].js',
31 | path: path.resolve(__dirname, 'dist'),
32 | ...(WebpackConfigWithMode.output || {}),
33 | },
34 | externalsType: WebpackConfigWithMode.externalsType || 'global',
35 | externals: WebpackConfigWithMode.externals || {},
36 | resolve: {
37 | preferRelative: true,
38 | alias: {
39 | ...resolve.alias,
40 | ...(WebpackConfigWithMode.resolve?.alias ?? {}),
41 | },
42 | extensions: ['.ts', '.js', '.tsx', '.jsx'],
43 | modules: [
44 | 'node_modules',
45 | path.resolve(__dirname, './node_modules'),
46 | ...resolve.modules,
47 | ],
48 | },
49 | devtool: WebpackConfigWithMode.devtool || false,
50 | devServer: WebpackConfigWithMode.devServer || {},
51 | module: {
52 | rules: [
53 | {
54 | test: /\.((c|sa|sc)ss)$/i,
55 | use: [
56 | {
57 | // NOTE - We should use option 1 because if we use 'style-loader' then the import .css will be replace by of sfc vue compiler
58 | // NOTE - Option 2
59 | // loader: 'style-loader',
60 |
61 | // NOTE - Option 1
62 | loader: MiniCssExtractPlugin.loader,
63 | },
64 | {
65 | loader: 'css-loader',
66 | options: { url: false },
67 | },
68 | {
69 | loader: 'postcss-loader',
70 | options: {
71 | postcssOptions: {
72 | plugins: [
73 | 'postcss-preset-env',
74 | 'postcss-simple-vars',
75 | 'tailwindcss/nesting',
76 | 'autoprefixer',
77 | require('tailwindcss')(
78 | PROJECT_PATH + '/tailwind.config.js'
79 | ),
80 | ],
81 | },
82 | },
83 | },
84 | ],
85 | },
86 | // NOTE - This config to resolve asset's paths
87 | {
88 | test: /\.(png|jpe?g|gif|webm|mp4|svg|ico|tff|eot|otf|woff|woff2)$/,
89 | type: 'asset/resource',
90 | generator: {
91 | emit: false,
92 | // filename: '[hash][ext][query]',
93 | },
94 | exclude: [/node_modules/],
95 | },
96 | ...(WebpackConfigWithMode?.module?.rules ?? []),
97 | ],
98 | unsafeCache: true,
99 | noParse: /[\\/]src\/assets\/static[\\/]|libs[\\/]socket.io.min.js/,
100 | },
101 | plugins: [
102 | new CleanWebpackPlugin(),
103 | new CopyPlugin({
104 | patterns: [
105 | {
106 | from: './src/assets/static',
107 | filter: (resourcePath) => {
108 | if (
109 | arg.mode === 'production' &&
110 | resourcePath.indexOf('images/development') !== -1
111 | ) {
112 | return false
113 | }
114 |
115 | return true
116 | },
117 | },
118 | ],
119 | }),
120 | new MiniCssExtractPlugin({
121 | filename:
122 | arg.mode === 'development' ? '[id].css' : '[id].[contenthash:8].css',
123 | chunkFilename:
124 | arg.mode === 'development' ? '[id].css' : '[id].[contenthash:8].css',
125 | ignoreOrder: false,
126 | experimentalUseImportModule: true,
127 | }),
128 | require('unplugin-auto-import/webpack')({
129 | // targets to transform
130 | include: [
131 | /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
132 | /\.md$/, // .md
133 | ],
134 | imports: [
135 | // presets
136 | 'react',
137 | {
138 | react: [
139 | ['*', 'React'],
140 | 'Suspense',
141 | 'componentDidCatch',
142 | 'StrictMode',
143 | 'createContext',
144 | ],
145 | },
146 | {
147 | 'react-dom/client': ['createRoot'],
148 | },
149 | 'react-router-dom',
150 | {
151 | 'react-router-dom': [
152 | 'createBrowserRouter',
153 | 'RouterProvider',
154 | 'BrowserRouter',
155 | 'useMatches',
156 | 'generatePath',
157 | ],
158 | },
159 | {
160 | 'app/router/context/InfoContext': ['useRoute'],
161 | 'utils/StringHelper.ts': [
162 | 'getSlug',
163 | 'getSlugWithoutDash',
164 | 'getUnsignedLetters',
165 | 'getCustomSlug',
166 | 'generateTitleCase',
167 | 'generateSentenceCase',
168 | 'getLocale',
169 | 'encode',
170 | 'decode',
171 | 'hashCode',
172 | ],
173 | 'hooks/useStringHelper.ts': [
174 | 'useSlug',
175 | 'useSlugWithoutDash',
176 | 'useUnsignedLetters',
177 | 'useTitleCase',
178 | 'useSentenceCase',
179 | ],
180 | 'utils/CookieHelper.ts': ['getCookie', 'setCookie', 'deleteCookie'],
181 | },
182 | {
183 | 'styled-components': [
184 | ['default', 'styled'],
185 | 'createGlobalStyle',
186 | 'keyframes',
187 | ],
188 | },
189 | {
190 | polished: ['rgba'],
191 | },
192 | ],
193 | dts: PROJECT_PATH + '/config/auto-imports.d.ts',
194 | eslintrc: {
195 | enabled: true,
196 | filepath: PROJECT_PATH + '/config/.eslintrc-auto-import.json',
197 | },
198 | }),
199 | ...(WebpackConfigWithMode.plugins || []),
200 | ],
201 | stats: WebpackConfigWithMode.stats || 'detailed',
202 | cache: WebpackConfigWithMode.cache || true,
203 | performance: WebpackConfigWithMode.performance || {},
204 | optimization: WebpackConfigWithMode.optimization || {},
205 | experiments: WebpackConfigWithMode.experiments || {},
206 | target: WebpackConfigWithMode.target || 'web',
207 | node: WebpackConfigWithMode.node || {},
208 | }
209 | }
210 |
211 | /**
212 | * Libs inline support for webpack config
213 | */
214 | const getWebpackConfigFilePathWithMode = (mode) => {
215 | if (!mode) return
216 |
217 | return mode === 'development'
218 | ? './config/webpack.development.config.js'
219 | : './config/webpack.production.config'
220 | } // getWebpackConfigFilePathWithMode(mode?: 'development' | 'production')
221 |
222 | function resolveTsconfigPathsToAlias(tsconfigPath = './tsconfig.json') {
223 | // const tsconfig = require(tsconfigPath)
224 | // const { paths, baseUrl } = tsconfig.compilerOptions
225 | // NOTE - Get json content without comment line (ignore error JSON parse some string have unexpected symbol)
226 | // https://stackoverflow.com/questions/40685262/read-json-file-ignoring-custom-comments
227 | const tsconfig = JSON.parse(
228 | fs
229 | .readFileSync(tsconfigPath)
230 | ?.toString()
231 | .replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) =>
232 | g ? '' : m
233 | )
234 | )
235 | const { paths, baseUrl } = tsconfig.compilerOptions
236 |
237 | const modules = [path.resolve(__dirname, baseUrl)]
238 |
239 | const alias = Object.fromEntries(
240 | Object.entries(paths)
241 | .filter(([, pathValues]) => pathValues.length > 0)
242 | .map(([pathKey, pathValues]) => {
243 | const key = pathKey.replace('/*', '')
244 | const value = path.resolve(
245 | __dirname,
246 | baseUrl,
247 | pathValues[0].replace(/[\/|\*]+(?:$)/g, '')
248 | )
249 | modules.push(value)
250 | return [key, value]
251 | })
252 | )
253 |
254 | return {
255 | alias: {
256 | src: path.resolve(__dirname, baseUrl),
257 | ...alias,
258 | },
259 | modules,
260 | }
261 | } // resolveTsconfigPathsToAlias()
262 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/onion-purple.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
108 |
--------------------------------------------------------------------------------
/config/auto-imports.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /* prettier-ignore */
3 | // @ts-nocheck
4 | // noinspection JSUnusedGlobalSymbols
5 | // Generated by unplugin-auto-import
6 | export {}
7 | declare global {
8 | const BotInfo: typeof import('store/ServerStore.ts')['BotInfo']
9 | const BrowserRouter: typeof import('react-router-dom')['BrowserRouter']
10 | const DeviceInfo: typeof import('store/ServerStore.ts')['DeviceInfo']
11 | const EnvironmentInfo: typeof import('store/ServerStore.ts')['EnvironmentInfo']
12 | const Link: typeof import('react-router-dom')['Link']
13 | const LocaleInfo: typeof import('store/ServerStore.ts')['LocaleInfo']
14 | const NavLink: typeof import('react-router-dom')['NavLink']
15 | const Navigate: typeof import('react-router-dom')['Navigate']
16 | const Outlet: typeof import('react-router-dom')['Outlet']
17 | const ProxyAPI: typeof import('utils/ProxyAPIHelper/index.ts')['ProxyAPI']
18 | const React: typeof import('react')
19 | const Route: typeof import('react-router-dom')['Route']
20 | const RouterProvider: typeof import('react-router-dom')['RouterProvider']
21 | const Routes: typeof import('react-router-dom')['Routes']
22 | const StrictMode: typeof import('react')['StrictMode']
23 | const Suspense: typeof import('react')['Suspense']
24 | const componentDidCatch: typeof import('react')['componentDidCatch']
25 | const createBrowserRouter: typeof import('react-router-dom')['createBrowserRouter']
26 | const createContext: typeof import('react')['createContext']
27 | const createGlobalStyle: typeof import('styled-components')['createGlobalStyle']
28 | const createRef: typeof import('react')['createRef']
29 | const createRoot: typeof import('react-dom/client')['createRoot']
30 | const decode: typeof import('utils/StringHelper.ts')['decode']
31 | const deleteCookie: typeof import('utils/CookieHelper.ts')['deleteCookie']
32 | const encode: typeof import('utils/StringHelper.ts')['encode']
33 | const forwardRef: typeof import('react')['forwardRef']
34 | const generatePath: typeof import('react-router-dom')['generatePath']
35 | const generateSentenceCase: typeof import('utils/StringHelper.ts')['generateSentenceCase']
36 | const generateTitleCase: typeof import('utils/StringHelper.ts')['generateTitleCase']
37 | const getAPIStore: typeof import('store/APIStore.ts')['getAPIStore']
38 | const getCookie: typeof import('utils/CookieHelper.ts')['getCookie']
39 | const getCustomSlug: typeof import('utils/StringHelper.ts')['getCustomSlug']
40 | const getLocale: typeof import('utils/StringHelper.ts')['getLocale']
41 | const getSlug: typeof import('utils/StringHelper.ts')['getSlug']
42 | const getSlugWithoutDash: typeof import('utils/StringHelper.ts')['getSlugWithoutDash']
43 | const getUnsignedLetters: typeof import('utils/StringHelper.ts')['getUnsignedLetters']
44 | const hashCode: typeof import('utils/StringHelper.ts')['hashCode']
45 | const keyframes: typeof import('styled-components')['keyframes']
46 | const lazy: typeof import('react')['lazy']
47 | const memo: typeof import('react')['memo']
48 | const rgba: typeof import('polished')['rgba']
49 | const setCookie: typeof import('utils/CookieHelper.ts')['setCookie']
50 | const setLinkAlternateTag: typeof import('utils/SeoHelper/index.ts')['setLinkAlternateTag']
51 | const setLinkAmphtmlTag: typeof import('utils/SeoHelper/index.ts')['setLinkAmphtmlTag']
52 | const setLinkAuthorTag: typeof import('utils/SeoHelper/index.ts')['setLinkAuthorTag']
53 | const setLinkCanonicalTag: typeof import('utils/SeoHelper/index.ts')['setLinkCanonicalTag']
54 | const setLinkNextTag: typeof import('utils/SeoHelper/index.ts')['setLinkNextTag']
55 | const setLinkPrevTag: typeof import('utils/SeoHelper/index.ts')['setLinkPrevTag']
56 | const setLinkTwitterTitleTag: typeof import('utils/SeoHelper/index.ts')['setLinkTwitterTitleTag']
57 | const setMetaAuthorTag: typeof import('utils/SeoHelper/index.ts')['setMetaAuthorTag']
58 | const setMetaDescriptionTag: typeof import('utils/SeoHelper/index.ts')['setMetaDescriptionTag']
59 | const setMetaGeoPositionTag: typeof import('utils/SeoHelper/index.ts')['setMetaGeoPositionTag']
60 | const setMetaGeoRegionTag: typeof import('utils/SeoHelper/index.ts')['setMetaGeoRegionTag']
61 | const setMetaGoogleBotTag: typeof import('utils/SeoHelper/index.ts')['setMetaGoogleBotTag']
62 | const setMetaGoogleSiteVerificationTag: typeof import('utils/SeoHelper/index.ts')['setMetaGoogleSiteVerificationTag']
63 | const setMetaICBMTag: typeof import('utils/SeoHelper/index.ts')['setMetaICBMTag']
64 | const setMetaKeywordsTag: typeof import('utils/SeoHelper/index.ts')['setMetaKeywordsTag']
65 | const setMetaOgDescriptionTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgDescriptionTag']
66 | const setMetaOgImageTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgImageTag']
67 | const setMetaOgSiteNameTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgSiteNameTag']
68 | const setMetaOgTitleTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgTitleTag']
69 | const setMetaOgTypeTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgTypeTag']
70 | const setMetaOgUrlTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgUrlTag']
71 | const setMetaRobotsTag: typeof import('utils/SeoHelper/index.ts')['setMetaRobotsTag']
72 | const setMetaTwitterCardTag: typeof import('utils/SeoHelper/index.ts')['setMetaTwitterCardTag']
73 | const setMetaTwitterDescriptionTag: typeof import('utils/SeoHelper/index.ts')['setMetaTwitterDescriptionTag']
74 | const setMetaTwitterImageTag: typeof import('utils/SeoHelper/index.ts')['setMetaTwitterImageTag']
75 | const setMetaViewportTag: typeof import('utils/SeoHelper/index.ts')['setMetaViewportTag']
76 | const setSeoTag: typeof import('utils/SeoHelper/index.ts')['setSeoTag']
77 | const setTitleTag: typeof import('utils/SeoHelper/index.ts')['setTitleTag']
78 | const startTransition: typeof import('react')['startTransition']
79 | const styled: typeof import('styled-components')['default']
80 | const useCallback: typeof import('react')['useCallback']
81 | const useContext: typeof import('react')['useContext']
82 | const useDebugValue: typeof import('react')['useDebugValue']
83 | const useDeferredValue: typeof import('react')['useDeferredValue']
84 | const useEffect: typeof import('react')['useEffect']
85 | const useHref: typeof import('react-router-dom')['useHref']
86 | const useId: typeof import('react')['useId']
87 | const useImperativeHandle: typeof import('react')['useImperativeHandle']
88 | const useInRouterContext: typeof import('react-router-dom')['useInRouterContext']
89 | const useInsertionEffect: typeof import('react')['useInsertionEffect']
90 | const useLayoutEffect: typeof import('react')['useLayoutEffect']
91 | const useLinkClickHandler: typeof import('react-router-dom')['useLinkClickHandler']
92 | const useLocaleInfo: typeof import('app/router/context/LocaleInfoContext')['useLocaleInfo']
93 | const useLocation: typeof import('react-router-dom')['useLocation']
94 | const useMatches: typeof import('react-router-dom')['useMatches']
95 | const useMemo: typeof import('react')['useMemo']
96 | const useNavigate: typeof import('react-router-dom')['useNavigate']
97 | const useNavigationType: typeof import('react-router-dom')['useNavigationType']
98 | const useOutlet: typeof import('react-router-dom')['useOutlet']
99 | const useOutletContext: typeof import('react-router-dom')['useOutletContext']
100 | const useParams: typeof import('react-router-dom')['useParams']
101 | const useReducer: typeof import('react')['useReducer']
102 | const useRef: typeof import('react')['useRef']
103 | const useResolvedPath: typeof import('react-router-dom')['useResolvedPath']
104 | const useRoute: typeof import('app/router/context/InfoContext')['useRoute']
105 | const useRoutes: typeof import('react-router-dom')['useRoutes']
106 | const useSearchParams: typeof import('react-router-dom')['useSearchParams']
107 | const useSentenceCase: typeof import('hooks/useStringHelper.ts')['useSentenceCase']
108 | const useSlug: typeof import('hooks/useStringHelper.ts')['useSlug']
109 | const useSlugWithoutDash: typeof import('hooks/useStringHelper.ts')['useSlugWithoutDash']
110 | const useState: typeof import('react')['useState']
111 | const useSyncExternalStore: typeof import('react')['useSyncExternalStore']
112 | const useTitleCase: typeof import('hooks/useStringHelper.ts')['useTitleCase']
113 | const useTransition: typeof import('react')['useTransition']
114 | const useUnsignedLetters: typeof import('hooks/useStringHelper.ts')['useUnsignedLetters']
115 | }
116 |
--------------------------------------------------------------------------------
/src/assets/static/images/development/svg/medicines.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
118 |
--------------------------------------------------------------------------------
/config/webpack.development.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const fs = require('fs')
3 | const webpack = require('webpack')
4 | const HtmlWebpackPlugin = require('html-webpack-plugin')
5 | const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
6 | const {
7 | WebpackCustomizeDefinePlugin,
8 | } = require('./utils/WebpackCustomizeDefinePlugin.js')
9 | const { IPV4_ADDRESS } = require('./utils/NetworkGenerator.js')
10 | const { getPort, findFreePort } = require('./utils/PortHandler/index.js')
11 |
12 | // NOTE - Setup process.env for address and host
13 | if (process.env) {
14 | process.env.LOCAL_ADDRESS = 'localhost'
15 | process.env.IPV4_ADDRESS = IPV4_ADDRESS || process.env.LOCAL_ADDRESS
16 | process.env.LOCAL_HOST = `localhost:${process.env.PORT || 3000}`
17 | process.env.IPV4_HOST = `${process.env.IPV4_ADDRESS}:${
18 | process.env.PORT || 3000
19 | }`
20 | process.env.IO_HOST = `${process.env.IPV4_ADDRESS}:${
21 | process.env.IO_PORT || 3030
22 | }`
23 | }
24 | // End setup process.env for address and host
25 |
26 | const SocketInitial = require('./utils/SocketHandler.js')
27 | let _socket = null
28 |
29 | const WebpackDevelopmentConfiguration = async () => {
30 | const PROJECT_PATH = __dirname.replace(/\\/g, '/')
31 | const WEBPACK_DEV_SERVER_PORT = await findFreePort(3000)
32 | const SOCKET_IO_PORT = getPort('SOCKET_IO_PORT')
33 |
34 | // NOTE - Setup process.env for address and host
35 | if (process.env) {
36 | process.env.LOCAL_ADDRESS = 'localhost'
37 | process.env.IPV4_ADDRESS = IPV4_ADDRESS || process.env.LOCAL_ADDRESS
38 | process.env.LOCAL_HOST = `localhost:${WEBPACK_DEV_SERVER_PORT}`
39 | process.env.IPV4_HOST = `${process.env.IPV4_ADDRESS}:${WEBPACK_DEV_SERVER_PORT}`
40 | process.env.IO_HOST = `${process.env.IPV4_ADDRESS}:${SOCKET_IO_PORT}`
41 | }
42 | // end setup
43 |
44 | const port = WEBPACK_DEV_SERVER_PORT
45 |
46 | await initENVHandler()
47 |
48 | return {
49 | mode: 'development',
50 | port,
51 | entry: {},
52 | output: {
53 | publicPath: '/',
54 | environment: {
55 | dynamicImport: true,
56 | },
57 | // module: true,
58 | // library: { type: 'module' },
59 | },
60 | // devtool: 'inline-source-map', // NOTE - BAD Performance, GOOD debugging
61 | devtool: 'eval-source-map', // NOTE - BAD Performance, GOOD debugging
62 | // devtool: 'eval-cheap-module-source-map', // NOTE - SLOW Performance, GOOD debugging
63 | // devtool: 'eval', // NOTE - GOOD Performance, BAD debugging
64 | // devtool: 'eval-cheap-source-map',
65 | devServer: {
66 | compress: true,
67 | port,
68 | static: './dist',
69 | watchFiles: ['src/**/*', 'config/templates/index.*.html'],
70 | hot: true,
71 | liveReload: false,
72 | host: process.env.PROJECT_IPV4_HOST,
73 | client: {
74 | overlay: false,
75 | logging: 'warn', // Want to set this to 'warn' or 'error'
76 | }, // NOTE - Use overlay of react refresh plugin
77 | historyApiFallback: true,
78 | },
79 | module: {
80 | rules: [
81 | // NOTE - Option 2
82 | // {
83 | // test: /.(jsx|tsx|js|ts)$/,
84 | // exclude: /(node_modules)/,
85 | // use: {
86 | // loader: 'swc-loader',
87 | // options: {
88 | // jsc: {
89 | // parser: {
90 | // syntax: 'typescript',
91 | // tsx: true,
92 | // decorators: false,
93 | // dynamicImport: true,
94 | // },
95 | // target: 'esnext',
96 | // },
97 | // },
98 | // },
99 | // },
100 | // NOTE - Option 1 (popular)
101 | {
102 | test: /\.(jsx|tsx|js|ts)$/,
103 | use: {
104 | loader: 'esbuild-loader',
105 | options: {
106 | loader: 'tsx',
107 | target: 'esnext',
108 | },
109 | },
110 | exclude: /node_modules|dist/,
111 | },
112 | {
113 | test: /libs[\\/]socket.io.min.js/,
114 | type: 'asset/resource',
115 | generator: {
116 | filename: '[name][ext]',
117 | },
118 | },
119 | ],
120 | },
121 | plugins: [
122 | new HtmlWebpackPlugin({
123 | title: 'webpack project for vue',
124 | // template: './config/templates/index.development.pacman-loading.html',
125 | template: './config/templates/index.development.image-loading.html',
126 | inject: 'body',
127 | templateParameters: {
128 | env: process.env.ENV,
129 | ioHost: JSON.stringify(process.env.IO_HOST),
130 | },
131 | // scriptLoading: 'module',
132 | }),
133 | RecompileLoadingScreenInitial,
134 | new ReactRefreshPlugin(),
135 | // { esModule: true, overlay: true }
136 | new WebpackCustomizeDefinePlugin({
137 | 'import.meta.env': WebpackCustomizeDefinePlugin.RuntimeUpdateValue(
138 | () => {
139 | let objEnvDefault = null
140 |
141 | return new Promise((resolve) => {
142 | let result = null
143 | try {
144 | result = fs.readFileSync(`${PROJECT_PATH}/env/env.json`)
145 | result = result ? JSON.parse(result) : {}
146 | } catch (err) {
147 | console.log(
148 | '=============\nError Message:\nRead env.json file process is wrong!\nIf you need setup env, make sure you have run create-dts package script\n============='
149 | )
150 | }
151 |
152 | objEnvDefault = {
153 | PORT: JSON.stringify(process.env.PORT),
154 | IO_PORT: JSON.stringify(process.env.IO_PORT),
155 | LOCAL_ADDRESS: JSON.stringify(process.env.LOCAL_ADDRESS),
156 | LOCAL_HOST: JSON.stringify(process.env.LOCAL_HOST),
157 | IPV4_ADDRESS: JSON.stringify(process.env.IPV4_ADDRESS),
158 | IPV4_HOST: JSON.stringify(process.env.IPV4_HOST),
159 | IO_HOST: JSON.stringify(process.env.IO_HOST),
160 | }
161 |
162 | result = {
163 | ...result,
164 | ...objEnvDefault,
165 | }
166 |
167 | resolve(result)
168 | })
169 | },
170 | {
171 | fileDependencies: path.resolve(__dirname, './env/.env'),
172 | }
173 | ),
174 | }),
175 | new webpack.ProgressPlugin({
176 | // NOTE - https://webpack.js.org/plugins/progress-plugin/#usage
177 | percentBy: 'entries',
178 | handler: (() => {
179 | // NOTE - At the first time, system will compile 3 process instead 1
180 | let totalProcess = 3
181 | let tmpTotalPercentagePerTotalProcess = 0
182 | let tmpTotalPercentage = 0
183 | let totalPercentage = 0
184 |
185 | return function (percentage) {
186 | if (!_socket) {
187 | return
188 | }
189 |
190 | if (percentage === 0)
191 | tmpTotalPercentagePerTotalProcess = totalPercentage
192 |
193 | tmpTotalPercentage =
194 | tmpTotalPercentagePerTotalProcess < 100
195 | ? tmpTotalPercentagePerTotalProcess +
196 | Math.ceil(percentage * 100) / totalProcess
197 | : Math.ceil(percentage * 100)
198 |
199 | totalPercentage =
200 | tmpTotalPercentage > totalPercentage || tmpTotalPercentage === 0
201 | ? tmpTotalPercentage
202 | : totalPercentage + 0.5
203 |
204 | _socket.emit('updateProgressPercentage', totalPercentage)
205 | }
206 | })(),
207 | }),
208 | ].filter(Boolean),
209 |
210 | stats: {
211 | preset: 'errors-only',
212 | all: false,
213 | },
214 |
215 | cache: {
216 | // NOTE - Type memory
217 | type: 'memory',
218 | cacheUnaffected: true,
219 | },
220 |
221 | optimization: {
222 | runtimeChunk: false,
223 | removeAvailableModules: false,
224 | removeEmptyChunks: false,
225 | splitChunks: false,
226 | sideEffects: false,
227 | providedExports: false,
228 | },
229 | // NOTE - refer to: https://github.com/webpack/webpack/issues/12102
230 | experiments: {
231 | lazyCompilation: {
232 | imports: true,
233 | entries: true,
234 | test: (module) =>
235 | !/[\\/](node_modules|src\/(utils|config|assets))[\\/]/.test(
236 | module.nameForCondition()
237 | ),
238 | },
239 | layers: true,
240 | cacheUnaffected: true,
241 | },
242 | }
243 | }
244 |
245 | class RecompileLoadingScreen {
246 | _socketEmitTurnOnLoadingScreenTimeout = null
247 | _socketEmitTurnOffLoadingScreenTimeout = null
248 | _isFinishFirstCompiling = false
249 |
250 | constructor() {
251 | this._setupSocketConnection()
252 | }
253 |
254 | async _setupSocketConnection() {
255 | const self = this
256 | await SocketInitial.then(function (data) {
257 | _socket = data?.socket
258 | data?.setupCallback?.(self._setupSocketReconnection.bind(self))
259 | })
260 | }
261 |
262 | _setupSocketReconnection(data) {
263 | if (!data || !this._isFinishFirstCompiling) return
264 | _socket = data?.socket
265 | }
266 |
267 | _stopTimeoutTurnOnProcessing() {
268 | clearTimeout(this._socketEmitTurnOffLoadingScreenTimeout)
269 | this._socketEmitTurnOffLoadingScreenTimeout = null
270 | } // _stopTimeoutTurnOnProcessing()
271 |
272 | _setTimeoutTurnOnProcessingWithDuration(duration) {
273 | if (!duration) {
274 | _socket.emit('turnOnLoadingScreen')
275 | } else {
276 | const self = this
277 | self._socketEmitTurnOnLoadingScreenTimeout = setTimeout(function () {
278 | _socket.emit('turnOnLoadingScreen')
279 | clearTimeout(self._socketEmitTurnOnLoadingScreenTimeout)
280 | }, duration)
281 | }
282 | } // _setTimeoutTurnOnProcessingWithDuration()
283 |
284 | _stopTimeoutTurnOffProcessing() {
285 | clearTimeout(this._socketEmitTurnOffLoadingScreenTimeout)
286 | this._socketEmitTurnOffLoadingScreenTimeout = null
287 | } // _stopTimeoutTurnOffProcessing()
288 |
289 | _setTimeoutTurnOffProcessingWithDuration(duration) {
290 | if (!duration) {
291 | _socket.emit('turnOffLoadingScreen')
292 | } else {
293 | const self = this
294 | self._socketEmitTurnOffLoadingScreenTimeout = setTimeout(function () {
295 | _socket.emit('turnOffLoadingScreen')
296 | clearTimeout(self._socketEmitTurnOffLoadingScreenTimeout)
297 | }, duration)
298 | }
299 | } // _setTimeoutTurnOffProcessingWithDuration()
300 |
301 | apply(compiler) {
302 | const self = this
303 | compiler.hooks.watchRun.tap('RecompileLoadingScreen', () => {
304 | if (!self._isFinishFirstCompiling || !_socket) return
305 |
306 | if (self._socketEmitTurnOnLoadingScreenTimeout) {
307 | self._stopTimeoutTurnOnProcessing()
308 | }
309 |
310 | if (self._socketEmitTurnOffLoadingScreenTimeout) {
311 | self._stopTimeoutTurnOffProcessing()
312 | }
313 |
314 | self._setTimeoutTurnOnProcessingWithDuration()
315 | }) // compiler.hooks.watchRun
316 |
317 | compiler.hooks.done.tap('RecompileLoadingScreen', () => {
318 | if (!self._isFinishFirstCompiling || !_socket) {
319 | self._isFinishFirstCompiling = true
320 | return
321 | }
322 |
323 | if (self._socketEmitTurnOnLoadingScreenTimeout) {
324 | self._stopTimeoutTurnOnProcessing()
325 | }
326 |
327 | if (self._socketEmitTurnOffLoadingScreenTimeout) {
328 | self._stopTimeoutTurnOffProcessing()
329 | }
330 |
331 | self._setTimeoutTurnOffProcessingWithDuration(70)
332 | }) // compiler.hooks.done
333 | }
334 | }
335 |
336 | const RecompileLoadingScreenInitial = new RecompileLoadingScreen()
337 |
338 | const initENVHandler = async () => {
339 | await import('./types/dts-generator.mjs').then(async (data) => {
340 | if (!data) return
341 |
342 | return await data.promiseENVWriteFileSync.then(function () {
343 | const chokidar = require('chokidar')
344 | const { exec } = require('child_process')
345 |
346 | const envWatcher = chokidar.watch('./env/env*.mjs', {
347 | ignored: /$^/,
348 | persistent: true,
349 | }) // /$^/ is match nothing
350 |
351 | envWatcher.on('change', function () {
352 | exec('node ./config/types/dts-generator.mjs', () => {})
353 |
354 | RecompileLoadingScreenInitial._setTimeoutTurnOnProcessingWithDuration(
355 | 10
356 | )
357 | })
358 |
359 | const serverPuppeteerSSRWatcher = chokidar.watch(
360 | ['./server/utils/**/*.ts', './server/puppeteer-ssr/**/*.ts'],
361 | {
362 | ignored: /$^/,
363 | persistent: true,
364 | }
365 | ) // /$^/ is match nothing
366 |
367 | serverPuppeteerSSRWatcher.on('change', function () {
368 | RecompileLoadingScreenInitial._setTimeoutTurnOnProcessingWithDuration()
369 | let totalDuration = 1
370 | const interval = setInterval(() => {
371 | const percentage = Math.ceil((totalDuration * 100) / 8000)
372 | _socket?.emit(
373 | 'updateProgressPercentage',
374 | percentage > 30 ? percentage : 30 + percentage
375 | )
376 |
377 | if (totalDuration >= 8000) {
378 | clearInterval(interval)
379 | _socket?.emit('hardReload')
380 | return
381 | }
382 |
383 | totalDuration += 1
384 | })
385 | })
386 | })
387 | })
388 | } // initENVHandler()
389 |
390 | module.exports = WebpackDevelopmentConfiguration()
391 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Table of Contents
2 |
3 | 1. [Install](#install)
4 | 2. [Introduction](#introduction)
5 |
6 |
22 | 23 | Welcome to {import.meta.env.GENERAL_GREETING} 24 |
25 |
26 | Page has been open for {count} seconds.
27 |
Install
7 | 8 | ##### Expect Node 18.x or higher 9 | 10 | Clone source with SSH url: 11 | 12 | ```bash 13 | git clone git@github.com:anhchangvt1994/webpack-project--template-react-ts.git 14 | ``` 15 | 16 | Install: 17 | 18 | ```bash 19 | cd webpack-project--template-react-ts 20 | ``` 21 | 22 | If use npm 23 | 24 | ```bash 25 | npm install 26 | ``` 27 | 28 | If use yarn 1.x 29 | 30 | ```bash 31 | yarn install 32 | ``` 33 | 34 |Introduction
35 | 36 | This project is an advanced structure and configuration of scaffolded Webpack + React + Typescript project. 37 | 38 | ### Table of structure's benefit information that you must use 39 | 40 | - [env](#env) - emvironment directory 41 | - [src](#src) - include assets and coding of project 42 | - [tailwind.config.cjs](#tailwincss) 43 | - [webpack.config.js](#webpack.config.js) - unplugin-auto-import configuration 44 | - [webpack.production.config.js](#webpack.production.config.js) - optimization splitchunks configuration, External configuration 45 | 46 |env
47 | 48 | ```bash 49 | ├── env/ 50 | │ ├── env.[prefix].mjs 51 | │ ├── env-register.mjs 52 | │ └── 53 | └── 54 | ``` 55 | 56 | **env** directory contains environment variable files used to manage environment variable by using .mjs file. You will define environment variables in .mjs file instead of .env file. 57 | 58 | ##### Why use it ? 59 | 60 | 1. I think defining environment variables in javascript file will similar with JS developer and better for managing than .env file. 61 | 62 | Compare them 63 | 64 | ```javascript 65 | // env.router.mjs 66 | export default { 67 | prefix: 'router', 68 | data: { 69 | home: { 70 | path: '/', 71 | id: 'HomePage', 72 | }, 73 | }, 74 | } 75 | ``` 76 | 77 | ```.env 78 | # .env 79 | ROUTER_HOME_PATH=/ 80 | ROUTER_HOME_ID=HomePage 81 | ``` 82 | 83 | 2. Think that you can define any type (not only string like .env) when define env in javascript file. 84 | 85 | Imagine that you need to define a payment code validation array 86 | 87 | ```javascript 88 | // env.router.mjs 89 | export default { 90 | prefix: 'payment', 91 | data: { 92 | valid_code: [0, 1, 2, 3], 93 | }, 94 | } 95 | ``` 96 | 97 | ```.env 98 | # .env 99 | PAYMENT_VALID_CODE=[0,1,2,3] #wrong 100 | PAYMENT_VALID_CODE="[0,1,2,3]" #right (you must stringify it) 101 | ``` 102 | 103 | 3. The hot benefit of this advanced structure bring out for Environment Variables is the **ImportMeta.d.ts** generating automation. With this ability, the code editor will auto suggestion available env for you. 104 | 105 | You have a large env difination and have to open file, cop and paste variable key when want to use it. Forget it !!! 106 | 107 | ##### How to use it ? 108 | 109 | Imagine that you need create a new env for an api title (prefix) to store all of api endpoint string 110 | 111 | 1. Create an **env.api.mjs** file and finish that 112 | 113 | ```javascript 114 | // env.api.mjs 115 | export default { 116 | prefix: 'api', 117 | data: { 118 | user: { 119 | info: '/api/user/info', 120 | edit: '/api/user/edit', 121 | }, 122 | product_list: '/api/product', 123 | }, 124 | } 125 | ``` 126 | 127 | 2. Open **env-register.mjs** and regist it 128 | 129 | ```javascript 130 | // env-register.mjs 131 | import ENV_API from './env.api.mjs' 132 | 133 | export default [ENV_API] 134 | ``` 135 | 136 | Tada! Done! you're so cool 137 | 138 |src
139 | 140 | ```bash 141 | ├── src/ 142 | │ ├── App.ts 143 | │ ├── App.vue 144 | │ ├── assets/... 145 | │ ├── pages/... 146 | │ ├── components/... 147 | │ ├── config/... 148 | │ └── utils/... 149 | └── 150 | ``` 151 | 152 | The **src directory** contains the resource's assets and logic of your codes like: 153 | 154 | | file / directory | Description | 155 | | :--------------: | ------------------------------------------------------------------------------------------------------------------------------------------------- | 156 | | **App.ts** | contains initialization code of vue | 157 | | **App.vue** | contains default layout code of vue | 158 | | **assets/** | contains asset files**styles**: assets > styles > main.scss
**images**: assets > static > images > logo.svg | 159 | | **pages/** | contains files of pages layout (ex: HomePage.vue) | 160 | | **components/** | contains files of component
**global**: components > [GlobalComponentName].tsx
**page**: components > HomePage > ProductSection.tsx | 161 | | **config/** | contains files of libs or plugins configuration
**react-router-dom**: config > router > index.ts
**redux**: config > store > index.ts | 162 | | **utils/** | contains files of your customization like
**React Hooks, Libs, Plugins** | 163 | 164 | ##### Tip: 165 | 166 | 1. If your code editor has TSServer, the **paths** options of **tsconfig.json** will provide a list of alias for your code editor. That will make you happy with auto alias suggestion when you're typing. 167 | 168 |  169 | 170 | ```javascript 171 | // Normal way you must 172 | import './assets/styles/...' 173 | 174 | // tsconfig with paths options 175 | import 'assets/styles/...' 176 | ``` 177 | 178 | In this case, that looks like the same, except **" ./ "**. But when you move **index.ts** to another location (ex: move it into **pages/**), the path with **" ./ "** will wrong and the path with alias still right. 179 | 180 | 2. You will see that the **images/** directory placed in **static/** directory. Because in this project the **static/** is set for copying instead of asset url handling. 181 | 182 | Normal case in React project, you can handle asset files with some solutions 183 | 184 | ```jsx 185 | // 1. import and use it 186 | import Logo from 'assets/images/logo.svg' 187 | 188 | return
}){kind=logo}
192 | ```
193 |
194 | In case use **publicDir**, you just easy set static files like a string
195 |
196 | ```html
197 |
198 |
199 | ```
200 |
201 | tailwind.config.cjs
202 | 203 | All of your tailwind config for your project 204 | [tailwind config docs](https://tailwindcss.com/docs/configuration) 205 | 206 |webpack.config.js
207 | 208 | ##### unplugin-auto-import configuration 209 | 210 | ##### Why use it ? 211 | 212 | In the normal, think that if you want to use **useState** in **react** you have to: 213 | 214 | ```javascript 215 | import { useState } from 'react' 216 | 217 | const [something, setSomething] = ref(value) 218 | ``` 219 | 220 | But if you configed auto-import before, you just do like code below. And don't worry about suggestion or wrong linting. 221 | 222 | ```javascript 223 | const [something, setSomething] = ref(value) 224 | ``` 225 | 226 | ##### How to use it ? 227 | 228 | I configed the auto-import into **webpack.config.js**, the syntax of configuration is like this 229 | 230 | ```javascript 231 | { 232 | plugins: [ 233 | require('unplugin-auto-import/webpack')({ 234 | // targets to transform 235 | include: [ 236 | /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx 237 | /\.md$/, // .md 238 | ], 239 | imports: [ 240 | // presets 241 | 'react', 242 | { 243 | react: [ 244 | ['*', 'React'], 245 | 'Suspense', 246 | 'componentDidCatch', 247 | 'StrictMode', 248 | 'createContext', 249 | ], 250 | }, 251 | { 252 | 'react-dom/client': ['createRoot'], 253 | }, 254 | { 255 | 'styled-components': [ 256 | ['default', 'styled'], 257 | 'createGlobalStyle', 258 | 'keyframes', 259 | ], 260 | }, 261 | { 262 | polished: ['rgba'], 263 | }, 264 | ], 265 | dts: './config/auto-imports.d.ts', 266 | eslintrc: { 267 | enabled: true, 268 | filepath: './config/.eslintrc-auto-import.json', 269 | }, 270 | }) 271 | ], 272 | } 273 | ``` 274 | 275 | | Options | Description | 276 | | :----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 277 | | **include** | Is list of file extension that will be applied the auto-import | 278 | | **imports** | Set what dependencies and values will be valid to auto-import, unplugin-auto-import available some popular libs like: vue, react, solid ... [see more](https://github.com/antfu/unplugin-auto-import/tree/main/src/presets)Another hand, you can custom some of new your auto-import by using [advanced configuration](https://github.com/antfu/unplugin-auto-import#configuration) | 279 | | **dts** | Where you want to place **auto-imports.d.ts** file, this file will support for auto suggestion ability | 280 | | **eslintrc** | Where you want to place **.eslintrc-auto-import.json** file, this file will support for linting validation | 281 | 282 |
webpack.production.config.js
283 | 284 | ##### NormalSplitChunks 285 | 286 | This configuration used to support for splitting chunks of files. This solution help to reduce the file's sizes in loading processes by loading multiple files with smaller sizes. 287 | 288 | ##### Why use it ? 289 | 290 | Reduce file's sizes, can enhance loading resource performance. 291 | 292 | Note: Don't use this solution for all cases, because the large amount of file be loaded in the bad internet connection will make the loading resource process be slower and can be broken. 293 | 294 | ##### How to use it ? 295 | 296 | I configed the NormalSplitChunks into **webpack.production.config.js**, the syntax of configuration is like this 297 | 298 | ```javaScript 299 | cacheGroups: { 300 | styles: { 301 | type: 'css/mini-extract', 302 | priority: 100, 303 | minSize: 1000, 304 | maxSize: 50000, 305 | minSizeReduction: 50000, 306 | }, 307 | vendor: { 308 | chunks: 'all', 309 | test: /[\\/]node_modules[\\/]/, 310 | filename: '[chunkhash:8].js', 311 | enforce: true, 312 | reuseExistingChunk: true, 313 | }, 314 | utils: { 315 | chunks: 'all', 316 | test: /[\\/]utils[\\/]/, 317 | filename: '[chunkhash:8].js', 318 | reuseExistingChunk: true, 319 | minSize: 10000, 320 | maxSize: 100000, 321 | }, 322 | config: { 323 | chunks: 'all', 324 | test: /[\\/]config[\\/]/, 325 | filename: '[chunkhash:8].js', 326 | reuseExistingChunk: true, 327 | minSize: 10000, 328 | maxSize: 100000, 329 | }, 330 | }, 331 | ``` 332 | 333 | In this case, I configed to split any files in node_modules, utils and config directories. About pages and components directories you can use **dynamic import** to manual handle split-chunks. 334 | 335 | You can search more about splitchunks of webpack in [here](https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks) 336 | NOTE: The **webpack.development.config.js** is the same, but instead config minSize and maxSize, I configed `enforce:true` for all of them. 337 | 338 | ##### ESM External in CDN 339 | 340 | This configuration is an optional, you can read or ignore it. 341 | The **ESM External CDN** is a solution used to replace some node_module dependencies by the corresponding ESM module in a CDN hosting. 342 | 343 | Imagine that you have a code like this 344 | 345 | ```javascript 346 | import { useState } from 'react' 347 | ``` 348 | 349 | The 'react' is a node_module dependency, you can see that infor in package.json. 350 | 351 |  352 | 353 | After the build tool compiles the file include the import dependencies syntax, the system will print dependency's logic code into owner file or split it into another chunk if you have configed split-chunks for that dependency. But when you define external for that dependency, the system will replace it with the synchronize insert script syntax like split-chunks case, but different about where src="from". In **ESM External CDN** case the src will from CDN hosting. 354 | 355 | The configuration syntax like this 356 | 357 | ```javascript 358 | 359 | // [key is dependency name]: value is esm cdn url (in this case I use https://esm.sh/) 360 | externals: { 361 | react: 'module https://esm.sh/react@18.2.0', 362 | 'react-dom': 'module https://esm.sh/react-dom@18.2.0', 363 | 'styled-components': 'module https://esm.sh/styled-components@5.3.6', 364 | polished: 'module https://esm.sh/polished@4.2.2', 365 | }, 366 | 367 | ``` 368 | 369 | You can use below command line to try 370 | 371 | ```bash 372 | npm run build:esm 373 | ``` 374 | -------------------------------------------------------------------------------- /config/templates/index.development.image-loading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
154 |
178 | <% } %>
179 | <% if(env==='development' ) { %>
180 |
341 | <% } %>
342 |
343 |
344 |
345 |
--------------------------------------------------------------------------------
/config/templates/index.development.pacman-loading.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
155 |
176 |
177 |
156 | 
157 | 
158 | 
159 | 
160 | 
161 |
162 |
163 |
164 |
157 |
158 |
159 |
160 |
161 |
165 |
174 |
175 |
167 |
173 |
168 |
172 |
169 | 
170 |
171 |
170 |
479 |
525 | <% } %>
526 | <% if(env==='development' ) { %>
527 |
631 | <% } %>
632 |
633 |
634 |
635 |
--------------------------------------------------------------------------------
480 |
523 |
524 |
481 |
482 |
513 |
514 |
515 |
483 |
484 |
485 |
486 | 
487 |
488 |
487 |
489 | 
490 |
491 |
490 |
492 | 
493 |
494 |
493 |
495 | 
496 |
497 |
496 |
498 | 
499 |
500 |
499 |
501 | 
502 |
503 |
502 |
504 | 
505 |
506 |
505 |
507 | 
508 |
509 |
508 |
510 | 
511 |
512 |
511 |
516 |
520 |
521 |
522 |