migrate to webpack

This commit is contained in:
kandrusyak
2022-06-17 16:56:30 +03:00
parent eeaabeebf3
commit 0da68ddd63
15 changed files with 10492 additions and 1791 deletions

View File

@@ -1,26 +0,0 @@
# Mosaic React
React landing page template designed by Cruip.
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run dev
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://vitejs.dev/guide/).
## Support notes
We are shipping our templates with a very basic React configuration to let you quickly get into the development process, but we don't discourage you from using any other configuration or framework built on the top of React. So, please note that any request dealing with React (e.g. extra features, customisations, et cetera) is to be considered out of the support scope.
For more information about what support covers, please see our (FAQs)[https://cruip.com/faq/].

View File

@@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body class="font-inter antialiased bg-slate-100 text-slate-600">
<noscript>You need to enable JavaScript to run this app.</noscript>
<script>
if (localStorage.getItem('sidebar-expanded') == 'true') {
document.querySelector('body').classList.add('sidebar-expanded');
} else {
document.querySelector('body').classList.remove('sidebar-expanded');
}
</script>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

11897
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -2,34 +2,60 @@
"name": "mosaic-react", "name": "mosaic-react",
"version": "0.1.0", "version": "0.1.0",
"scripts": { "scripts": {
"dev": "vite", "dev": "webpack-dev-server",
"build": "vite build", "build": "webpack"
"preview": "vite preview",
"postinstall": "node './src/bufferFix/BufferFix'"
}, },
"dependencies": { "dependencies": {
"@liskhq/lisk-client": "^5.2.2", "@liskhq/lisk-client": "^5.2.2",
"@liskhq/lisk-passphrase": "^3.1.1",
"@tailwindcss/forms": "^0.4.0", "@tailwindcss/forms": "^0.4.0",
"autoprefixer": "^10.4.5",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"chart.js": "^3.5.0", "chart.js": "^3.5.0",
"chartjs-adapter-moment": "^1.0.0", "chartjs-adapter-moment": "^1.0.0",
"crypto-browserify": "^3.12.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"mobx": "^6.6.0", "mobx": "^6.6.0",
"mobx-react-lite": "^3.4.0", "mobx-react-lite": "^3.4.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"node-libs-browser": "^2.2.1", "net": "^1.0.2",
"os-browserify": "^0.3.0",
"path-browserify": "^1.0.1",
"postcss-loader": "^7.0.0",
"process": "^0.11.10",
"querystring-es3": "^0.2.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-flatpickr": "^3.10.7", "react-flatpickr": "^3.10.7",
"react-router-dom": "^6.2.1", "react-router-dom": "^6.2.1",
"react-transition-group": "^4.4.1" "react-transition-group": "^4.4.1",
"stream-browserify": "^3.0.0",
"url": "^0.11.0",
"util": "^0.12.4"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-react": "^1.0.7", "@babel/core": "^7.18.5",
"autoprefixer": "^10.4.2", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"html-loader": "^3.1.2",
"postcss": "^8.4.5", "postcss": "^8.4.5",
"sass": "^1.49.0", "sass": "^1.52.3",
"sass-loader": "^13.0.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.18", "tailwindcss": "^3.0.18",
"vite": "^2.7.2" "webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.2"
},
"babel": {
"presets": [
"@babel/env",
"@babel/react"
]
},
"browser": {
"fs": false
} }
} }

View File

@@ -1,7 +1,7 @@
import tailwind from 'tailwindcss' const tailwind = require('tailwindcss')
import autoprefixer from 'autoprefixer' const autoprefixer = require('autoprefixer')
import tailwindConfig from './src/css/tailwind.config.js' const tailwindConfig = require('./src/tailwind.config.js')
export default { module.exports = {
plugins: [tailwind(tailwindConfig), autoprefixer], plugins: [tailwind(tailwindConfig), autoprefixer],
} }

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

11
public/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

View File

@@ -1,18 +0,0 @@
const fs = require('fs');
const buffer = '../../node_modules/node-libs-browser/node_modules/buffer/index.js';
const fix = "./readBigUInt64BE.js";
fs.readFile(buffer, (bufferErr, bufferCode) => {
if (bufferErr) throw bufferErr;
fs.readFile(fix, (fixErr, fixCode) => {
if (fixErr) throw fixErr;
fs.writeFile(buffer, bufferCode + fixCode, 'utf8', (err) => {
if (err) throw err;
console.log('Successfully added readBigUInt64BE to Buffer.');
})
});
});

View File

@@ -1,101 +0,0 @@
Buffer.prototype.readBigUInt64BE = defineBigIntMethod(function readBigUInt64BE (offset = 0) {
validateNumber(offset, 'offset')
const first = this[offset]
const last = this[offset + 7]
if (first === undefined || last === undefined) {
boundsError(offset, this.length - 8)
}
const hi = first * 2 ** 24 +
this[++offset] * 2 ** 16 +
this[++offset] * 2 ** 8 +
this[++offset]
const lo = this[++offset] * 2 ** 24 +
this[++offset] * 2 ** 16 +
this[++offset] * 2 ** 8 +
last
return (BigInt(hi) << 32n) + BigInt(lo)
})
Buffer.prototype.writeBigUInt64BE = defineBigIntMethod(function writeBigUInt64BE (value, offset = 0) {
return wrtBigUInt64BE(this, value, offset, 0n, 0xffffffffffffffffn)
})
function wrtBigUInt64BE (buf, value, offset, min, max) {
checkIntBI(value, min, max, buf, offset, 7)
let lo = Number(value & 0xffffffffn)
buf[offset + 7] = lo
lo = lo >> 8
buf[offset + 6] = lo
lo = lo >> 8
buf[offset + 5] = lo
lo = lo >> 8
buf[offset + 4] = lo
let hi = Number(value >> 32n & 0xffffffffn)
buf[offset + 3] = hi
hi = hi >> 8
buf[offset + 2] = hi
hi = hi >> 8
buf[offset + 1] = hi
hi = hi >> 8
buf[offset] = hi
return offset + 8
}
function checkBounds (buf, offset, byteLength) {
validateNumber(offset, 'offset')
if (buf[offset] === undefined || buf[offset + byteLength] === undefined) {
boundsError(offset, buf.length - (byteLength + 1))
}
}
function checkIntBI (value, min, max, buf, offset, byteLength) {
if (value > max || value < min) {
const n = typeof min === 'bigint' ? 'n' : ''
let range
if (byteLength > 3) {
if (min === 0 || min === 0n) {
range = `>= 0${n} and < 2${n} ** ${(byteLength + 1) * 8}${n}`
} else {
range = `>= -(2${n} ** ${(byteLength + 1) * 8 - 1}${n}) and < 2 ** ` +
`${(byteLength + 1) * 8 - 1}${n}`
}
} else {
range = `>= ${min}${n} and <= ${max}${n}`
}
throw new errors.ERR_OUT_OF_RANGE('value', range, value)
}
checkBounds(buf, offset, byteLength)
}
function defineBigIntMethod (fn) {
return typeof BigInt === 'undefined' ? BufferBigIntNotDefined : fn
}
function BufferBigIntNotDefined () {
throw new Error('BigInt not supported')
}
function validateNumber (value, name) {
if (typeof value !== 'number') {
throw new errors.ERR_INVALID_ARG_TYPE(name, 'number', value)
}
}
function boundsError (value, length, type) {
if (Math.floor(value) !== value) {
validateNumber(value, type)
throw new errors.ERR_OUT_OF_RANGE(type || 'offset', 'an integer', value)
}
if (length < 0) {
throw new errors.ERR_BUFFER_OUT_OF_BOUNDS()
}
throw new errors.ERR_OUT_OF_RANGE(type || 'offset',
`>= ${type ? 1 : 0} and <= ${length}`,
value)
}

View File

@@ -3,7 +3,6 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
// Additional styles
@import 'additional-styles/utility-patterns.scss'; @import 'additional-styles/utility-patterns.scss';
@import 'additional-styles/range-slider.scss'; @import 'additional-styles/range-slider.scss';
@import 'additional-styles/toggle-switch.scss'; @import 'additional-styles/toggle-switch.scss';

View File

@@ -1,8 +0,0 @@
const passphrase = require('@liskhq/lisk-passphrase')
function passPhrase () {
return passphrase.Mnemonic.generateMnemonic()
}
console.log(passPhrase())

View File

@@ -2,7 +2,7 @@ import resolveConfig from 'tailwindcss/resolveConfig';
export const tailwindConfig = () => { export const tailwindConfig = () => {
// Tailwind config // Tailwind config
return resolveConfig('./src/css/tailwind.config.js') return resolveConfig('./src/tailwind.config.js')
} }
export const hexToRGB = (h) => { export const hexToRGB = (h) => {

View File

@@ -1,33 +0,0 @@
import { defineConfig } from 'vite'
import postcss from './postcss.config.js'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
define: {
'process.env': process.env
},
css: {
postcss,
},
plugins: [react()],
node: {
fs: 'empty'
},
resolve: {
alias: [
{
find: /^~.+/,
replacement: (val) => {
return val.replace(/^~/, "");
},
},
],
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
}
}
})

91
webpack.config.js Normal file
View File

@@ -0,0 +1,91 @@
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const plugins = [
new HtmlWebpackPlugin({
favicon: './public/favicon.ico',
template: './public/index.html',
}),
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
require('tailwindcss')
];
module.exports = {
entry: './src/main.jsx',
mode: 'development',
devtool: 'eval-source-map',
plugins,
output: {
clean: true,
path: path.resolve(__dirname, 'build'),
assetModuleFilename: 'assets/[hash][ext]',
filename: 'main.[hash:8].js',
},
devServer: {
open: true,
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 'auto',
hot: true,
client: {
progress: true,
},
},
module: {
rules: [
{ test: /\.(html)$/, use: ['html-loader'] },
{
test: /\.m?jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
fallback: {
"path": require.resolve("path-browserify"),
"os": require.resolve("os-browserify/browser"),
"querystring": require.resolve("querystring-es3"),
"crypto": require.resolve("crypto-browserify"),
"util": require.resolve("util/"),
"stream": require.resolve("stream-browserify"),
"url": require.resolve("url/"),
"buffer": require.resolve("buffer/"),
"fs": false
}
},
};