r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Migrate to webpack 5

Browse Source
This commit is contained in:
Eduard Kuzmenko 2022-03-25 12:42:39 +02:00
parent a584ca6653
commit 9a552762b9
10 changed files with 10519 additions and 28114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38386
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

86
package.json
View File

@ -20,64 +20,62 @@
"author": "",
"license": "GPL-3.0-only",
"dependencies": {
"@types/crypto-js": "^4.1.1",
"crypto-js": "^4.1.1",
"webpack-dev-server": "^3.11.2"
"webpack-dev-server": "^4.7.4"
},
"devDependencies": {
"@babel/cli": "^7.13.16",
"@babel/core": "^7.14.2",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-typescript": "^7.13.0",
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.8",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-transform-typescript": "^7.16.8",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.14.2",
"@babel/preset-env": "^7.16.11",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-typescript": "^7.13.0",
"@babel/preset-typescript": "^7.16.7",
"@cryptography/aes": "^0.1.1",
"@cryptography/sha1": "^0.2.0",
"@cryptography/sha256": "^0.2.0",
"@peculiar/webcrypto": "^1.1.7",
"@peculiar/webcrypto": "^1.3.2",
"@types/big-integer": "^0.0.31",
"@types/chrome": "0.0.139",
"@types/jest": "^26.0.23",
"@types/serviceworker-webpack-plugin": "^1.0.2",
"autoprefixer": "^9.8.6",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"@types/chrome": "0.0.180",
"@types/jest": "^27.4.1",
"@types/serviceworker-webpack-plugin": "^1.0.3",
"autoprefixer": "^10.4.4",
"babel-jest": "^27.5.1",
"babel-loader": "^8.2.4",
"babel-preset-es2015": "^6.24.1",
"big-integer": "^1.6.51",
"compression": "^1.7.4",
"css-loader": "^3.6.0",
"dotenv-webpack": "^7.0.3",
"express": "^4.17.1",
"fast-png": "^5.0.4",
"css-loader": "^6.7.1",
"cssnano": "^5.1.5",
"dotenv-webpack": "^7.1.0",
"express": "^4.17.3",
"fast-png": "^6.1.0",
"handlebars": "^4.7.7",
"handlebars-loader": "^1.7.1",
"html-webpack-plugin": "^4.5.2",
"ifdef-loader": "^2.3.0",
"jest": "^26.6.3",
"media-query-plugin": "^1.4.0",
"mini-css-extract-plugin": "^0.9.0",
"npm": "^7.12.1",
"on-build-webpack": "^0.1.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"pako": "^2.0.3",
"postcss": "^8.2.10",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"qr-code-styling": "^1.3.4",
"sass": "^1.32.13",
"sass-loader": "^8.0.2",
"serviceworker-webpack-plugin": "^1.0.1",
"style-loader": "^1.3.0",
"html-webpack-plugin": "^5.5.0",
"ifdef-loader": "^2.3.2",
"jest": "^27.5.1",
"media-query-plugin": "^1.5.0",
"mini-css-extract-plugin": "^2.6.0",
"npm": "^8.5.5",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"pako": "^2.0.4",
"postcss-import": "^14.1.0",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.4.3",
"qr-code-styling": "^1.5.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"style-loader": "^3.3.1",
"text-encoding": "^0.7.0",
"ts-jest": "^26.5.6",
"ts-loader": "^8.2.0",
"typescript": "^4.4.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-merge": "^4.2.2",
"webpack-retry-chunk-load-plugin": "^1.5.0",
"ts-jest": "^27.1.4",
"ts-loader": "^9.2.8",
"typescript": "^4.6.3",
"webpack": "^5.70.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.2",
"webpack-merge": "^5.8.0",
"webpack-retry-chunk-load-plugin": "^3.0.0",
"worker-loader": "^3.0.8"
}
}

4
postcss.config.js
View File

@ -1,8 +1,8 @@
module.exports = {
parser: 'sugarss',
// parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
'cssnano': {}
}
}
}

2
src/lib/rlottie/queryableWorker.ts
View File

@ -62,7 +62,7 @@ export default class QueryableWorker extends EventListenerBase<{
this.worker.postMessage({
queryMethod: queryMethod,
queryMethodArguments: args
}, transfer as PostMessageOptions);
}, transfer as Transferable[]);
}
}
}

4
src/scss/partials/_chat.scss
View File

@ -4,12 +4,14 @@
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
@use "sass:math";
$btn-send-margin: .5rem;
$chat-helper-size: 45px;
$chat-input-box-shadow: 0px 1px 8px 1px rgb(0 0 0 / 18%);
$input-transition-time: .2s;
$input-half-transition-time: #{$input-transition-time / 2};
$input-half-transition-time: math.div($input-transition-time, 2);
$background-transition-time: 0.05s;
$background-transition-total-time: #{$input-transition-time - $background-transition-time};

18
src/scss/partials/_chatBubble.scss
View File

@ -4,6 +4,8 @@
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
@use "sass:math";
$bubble-margin: .25rem;
$bubble-beside-button-width: 38px;
@ -103,8 +105,8 @@ $bubble-beside-button-width: 38px;
left: -50%;
/* top: 0;
bottom: 0; */
top: -#{$bubble-margin / 2};
bottom: -#{$bubble-margin / 2};
top: -#{math.div($bubble-margin, 2)};
bottom: -#{math.div($bubble-margin, 2)};
content: " ";
z-index: -1;
}
@ -112,13 +114,13 @@ $bubble-beside-button-width: 38px;
/* &.is-highlighted, &.is-selected {
&:not(.is-group-last):after {
height: calc(100% + #{$bubble-margin / 2}) !important;
height: calc(100% + #{math.div($bubble-margin, 2)}) !important;
}
& + &:not(.is-group-last) {
&:after {
top: .125rem !important;
height: calc(100% - #{$bubble-margin / 2}) !important;
height: calc(100% - #{math.div($bubble-margin, 2)}) !important;
}
}
} */
@ -126,7 +128,7 @@ $bubble-beside-button-width: 38px;
// ! if turn this on, there will be an empty space
/* &.is-highlighted, &.is-selected {
&.is-group-last:after {
bottom: #{$bubble-margin / 2} !important;
bottom: #{math.div($bubble-margin, 2)} !important;
}
} */
@ -162,7 +164,7 @@ $bubble-beside-button-width: 38px;
&.is-highlighted, &.is-selected {
&:after {
top: calc(#{$bubble-margin / 2} + 30px);
top: calc(#{math.div($bubble-margin, 2)} + 30px);
}
}
}
@ -1547,7 +1549,7 @@ $bubble-beside-button-width: 38px;
&:first-of-type {
.document-selection {
top: -#{$bubble-margin / 2}; // * padding inner + half padding outer
top: -#{math.div($bubble-margin, 2)}; // * padding inner + half padding outer
}
.document-wrapper {
@ -1559,7 +1561,7 @@ $bubble-beside-button-width: 38px;
&:last-of-type {
.document-selection {
bottom: -#{$bubble-margin / 2};
bottom: -#{math.div($bubble-margin, 2)};
}
.document-wrapper {

4
src/scss/partials/_peerTyping.scss
View File

@ -4,6 +4,8 @@
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
@use "sass:math";
.peer-typing {
//display: flex;
margin-right: 4px;
@ -135,7 +137,7 @@
}
$scale-max: 1;
$scale-step: 1 / 6;
$scale-step: math.div(1, 6);
$scale-mid: $scale-max - $scale-step;
$scale-min: $scale-max - ($scale-step * 2);
$opacity-max: 1;

88
webpack.common.js
View File

@ -3,10 +3,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const MediaQueryPlugin = require('media-query-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const postcssPresetEnv = require('postcss-preset-env');
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin');
const fs = require('fs');
const Dotenv = require('dotenv-webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const allowedIPs = ['127.0.0.1'];
const devMode = process.env.NODE_ENV !== 'production';
@ -51,15 +51,21 @@ module.exports = {
reloadAll: true,
}
}, */
'css-loader?url=false',
{
loader: 'css-loader',
options: {
url: false
}
},
devMode ? undefined : MediaQueryPlugin.loader,
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
postcssPresetEnv(),
]
postcssOptions: {
plugins: [
postcssPresetEnv(),
]
}
}
},
{
@ -92,7 +98,10 @@ module.exports = {
extensions: ['.ts', '.js'],
},
entry: './src/index.ts',
entry: {
index: './src/index.ts',
sw: {import: './src/lib/serviceWorker/index.service.ts', filename: 'sw.js'}
},
/* entry: {
index: './src/index.ts',
pluralPolyfill: './src/lib/pluralPolyfill.ts'
@ -103,12 +112,28 @@ module.exports = {
globalObject: 'this',
path: path.resolve(__dirname, 'public'),
filename: '[name].[chunkhash].bundle.js',
chunkFilename: '[name].[chunkhash].chunk.js'
chunkFilename: '[name].[chunkhash].chunk.js',
clean: {
keep(asset) {
if(asset.includes('.xml')
|| asset.includes('version')
|| asset.includes('assets/')
|| asset.includes('changelogs/')
|| asset.includes('.webmanifest')
|| asset.includes('.wasm')
|| asset.includes('rlottie-wasm')
|| asset.includes('Worker.min.js')
|| asset.includes('recorder.min.js')
|| asset.includes('.hbs')) return true;
return false;
}
}
},
devServer: {
contentBase: path.join(__dirname, 'public'),
watchContentBase: true,
// static: {
// directory: path.join(__dirname, 'public')
// },
compress: true,
http2: useLocalNotLocal ? true : (useLocal ? undefined : true),
https: useLocal ? undefined : {
@ -119,12 +144,14 @@ module.exports = {
domain
],
host: useLocalNotLocal ? localIp : (useLocal ? undefined : '0.0.0.0'),
public: useLocal ? undefined : domain,
//host: domain, // '0.0.0.0'
port: useLocal ? undefined : 443,
overlay: true,
before: useLocal ? undefined : function(app, server, compiler) {
app.use((req, res, next) => {
client: {
overlay: true,
progress: true
},
setupMiddlewares: useLocal ? undefined : (middlewares, devServer) => {
middlewares.push((req, res) => {
let IP = '';
if(req.headers['cf-connecting-ip']) {
IP = req.headers['cf-connecting-ip'];
@ -143,33 +170,16 @@ module.exports = {
next();
}
});
return middlewares;
},
sockHost: useLocal ? undefined : domain,
/* public: useLocal ? undefined : domain,
sockHost: useLocal ? undefined : domain, */
},
plugins: [
new Dotenv(),
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, 'src/lib/serviceWorker/index.service.ts'),
filename: 'sw.js',
//excludes: ['**/*'],
includes: [
'**/*.js',
'**/*.css',
'**/*.json',
'**/*.wasm',
'**/*.mp3',
'**/*.svg',
'**/*.tgs',
'**/*.ico',
'**/*.woff',
'**/*.woff2',
'**/*.ttf',
'**/*.webmanifest'
],
}),
new HtmlWebpackPlugin({
filename: `index.html`,
//template: 'public/index_template.html',
@ -225,5 +235,11 @@ module.exports = {
// if not set - nothing will happen and error will be returned to the chunk loader.
//lastResortScript: "window.location.href='/500.html';",
}),
],
devMode ? undefined : new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: true,
generateStatsFile: true
}),
].filter(Boolean),
};

2
webpack.dev.js
View File

@ -1,7 +1,7 @@
process.env.NODE_ENV = 'development';
const webpack = require('webpack');
const merge = require('webpack-merge');
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');

39
webpack.prod.js
View File

@ -1,16 +1,11 @@
process.env.NODE_ENV = 'production';
const path = require('path');
const merge = require('webpack-merge');
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
//const CompressionPlugin = require("compression-webpack-plugin");
const WebpackOnBuildPlugin = require('on-build-webpack');
//const TerserJSPlugin = require('terser-webpack-plugin');
//const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const fs = require('fs');
const buildDir = __dirname + '/public/';
module.exports = merge(common, {
mode: 'production',
@ -57,37 +52,5 @@ module.exports = merge(common, {
minRatio: 0.8,
deleteOriginalAssets: false,
}), */
new WebpackOnBuildPlugin(function(stats) {
const newlyCreatedAssets = stats.compilation.assets;
const unlinked = [];
fs.readdir(path.resolve(buildDir), (err, files) => {
files.forEach(file => {
//console.log('to unlink 1:', file);
if(file.includes('.xml')
|| file.includes('.webmanifest')
|| file.includes('.wasm')
|| file.includes('rlottie-wasm')
|| file.includes('Worker.min.js')
|| file.includes('recorder.min.js')
|| file.includes('.hbs')) return;
let p = path.resolve(buildDir + file);
if(!newlyCreatedAssets[file] && ['.gz', '.js', '.ts', '.map', '.css', '.txt'].find(ext => file.endsWith(ext)) !== undefined) {
//console.log('to unlink 2:', file);
fs.unlinkSync(p);
unlinked.push(file);
}
});
if(unlinked.length > 0) {
console.log('Removed old assets: ', unlinked);
}
});
})
]
});