diff --git a/package.json b/package.json index 3ac43db..2338fef 100755 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react": "^4.3.0", "@angular/common": "^12.2.5", "@angular/core": "^12.2.5", - "@apollo/client": "^3.4.10", + "@apollo/client": "^3.4.11", "@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed", "@popperjs/core": "^2.10.1", "aos": "^2.3.4", @@ -45,6 +45,7 @@ "bootbox": "^5.5.2", "bootstrap": "^5.1.1", "brace-expansion": "^2.0.1", + "charming": "^3.0.2", "font-awesome": "^4.7.0", "graphql": "^15.5.3", "hammerjs": "^2.0.8", @@ -65,6 +66,7 @@ "rxjs": "^7.3.0", "select2": "^4.0.13", "setimmediate": "^1.0.5", + "vanilla-calendar": "^1.0.30", "youtube-embed": "^1.0.0" }, "devDependencies": { @@ -72,12 +74,12 @@ "@babel/core": "^7.15.5", "@babel/eslint-parser": "^7.15.4", "@babel/plugin-proposal-class-properties": "^7.14.5", - "@babel/plugin-proposal-object-rest-spread": "^7.14.7", + "@babel/plugin-proposal-object-rest-spread": "^7.15.6", "@babel/plugin-syntax-jsx": "^7.14.5", "@babel/plugin-syntax-top-level-await": "^7.14.5", "@babel/plugin-transform-react-jsx": "^7.14.9", "@babel/plugin-transform-runtime": "^7.15.0", - "@babel/preset-env": "^7.15.4", + "@babel/preset-env": "^7.15.6", "@babel/preset-react": "^7.14.5", "@babel/runtime": "^7.15.4", "@googlemaps/markerclustererplus": "*", @@ -89,7 +91,7 @@ "animate.css": "^4.1.1", "ansi-html": "^0.0.7", "ansi-html-community": "^0.0.8", - "ansi-regex": "^6.0.0", + "ansi-regex": "^6.0.1", "autoprefixer": "^10.3.4", "babel-loader": "^8.2.2", "classnames": "^2.3.1", @@ -121,7 +123,7 @@ "img-optimize-loader": "^1.0.7", "js-yaml": "^4.1.0", "loglevel": "^1.7.1", - "mini-css-extract-plugin": "^2.2.2", + "mini-css-extract-plugin": "^2.3.0", "msw": "^0.35.0", "node-fetch": "^3.0.0", "object-assign": "^4.1.1", @@ -146,20 +148,22 @@ "sass-loader": "^12.1.0", "scheduler": "^0.20.2", "shallowequal": "^1.1.0", - "strip-ansi": "^7.0.0", + "strip-ansi": "^7.0.1", "style-loader": "^3.2.1", "sucrase": "^3.20.1", "svg-url-loader": "^7.1.1", "symbol-observable": "^4.0.0", - "terser-webpack-plugin": "^5.2.3", - "ts-invariant": "^0.9.1", + "terser-webpack-plugin": "^5.2.4", + "ts-invariant": "^0.9.3", + "ts-loader": "^9.2.5", "tslib": "^2.3.1", + "typescript": "^4.4.3", "url": "^0.11.0", "url-loader": "^4.1.1", - "webpack": "^5.52.0", + "webpack": "^5.52.1", "webpack-bundle-analyzer": "^4.4.2", "webpack-cli": "^4.8.0", - "webpack-dev-server": "^4.1.1", + "webpack-dev-server": "^4.2.0", "webpack-manifest-plugin": "^4.0.2", "webpack-merge": "^5.8.0", "yarn": "^1.22.11", diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..8415c58 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "sourceMap": true + } +} diff --git a/webpack.config.js b/webpack.config.js index dec82f6..7570785 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,10 +6,9 @@ const conf = common.configuration; const webpack = require('webpack'); const { - merge + merge, } = require('webpack-merge'); - const fs = require('fs'); const path = require('path'); @@ -43,11 +42,11 @@ let plugins = [ 'react-dom': 'ReactDOM', /*$: 'jquery', jQuery: 'jquery',*/ - }), + }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(NODE_ENV), - }, + }, UINAME: JSON.stringify(UIInfo.name), UIVERSION: UIVERSION, UIAUTHOR: JSON.stringify(UIInfo.author), @@ -56,119 +55,119 @@ let plugins = [ GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']), SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`), BASE_HREF: JSON.stringify(''), - }), + }), new webpack.LoaderOptionsPlugin({ minimize: COMPRESS, debug: !COMPRESS, - }), + }), new MiniCssExtractPlugin({ filename: 'css/[name].css', //allChunks: true, - }), + }), ]; if (COMPRESS) { - plugins.push(require('autoprefixer')); + plugins.push(require('autoprefixer')); - /*plugins.push( - new ImageSpritePlugin({ - exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/, - commentOrigin: false, - compress: COMPRESS, - extensions: ['png'], - indent: '', - log: true, - //outputPath: path.join(__dirname, conf.APPDIR, conf.DIST), - outputFilename: 'img/sprite-[hash].png', - padding: 0, - }), - );*/ + /*plugins.push( + new ImageSpritePlugin({ + exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/, + commentOrigin: false, + compress: COMPRESS, + extensions: ['png'], + indent: '', + log: true, + //outputPath: path.join(__dirname, conf.APPDIR, conf.DIST), + outputFilename: 'img/sprite-[hash].png', + padding: 0, + }), + );*/ } const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html'); if (fs.existsSync(indexPath)) { - plugins.push( - new HtmlWebpackPlugin({ - publicPath: '', - template: path.join(conf.APPDIR, conf.SRC, 'index.html'), - templateParameters: { - NODE_ENV: NODE_ENV, - GRAPHQL_URL: conf['GRAPHQL_URL'], - STATIC_URL: conf['STATIC_URL'], - REACT_SCRIPTS: NODE_ENV === 'production' ? - '' : '', + plugins.push( + new HtmlWebpackPlugin({ + publicPath: '', + template: path.join(conf.APPDIR, conf.SRC, 'index.html'), + templateParameters: { + NODE_ENV: NODE_ENV, + GRAPHQL_URL: conf['GRAPHQL_URL'], + STATIC_URL: conf['STATIC_URL'], + REACT_SCRIPTS: NODE_ENV === 'production' ? + '' : '', }, - xhtml: true, + xhtml: true, }), - ); + ); } const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'); if (fs.existsSync(faviconPath)) { - plugins.push( - new FaviconsWebpackPlugin({ - title: 'Webpack App', - logo: faviconPath, - prefix: '/icons/', - emitStats: false, - persistentCache: true, - inject: false, - statsFilename: path.join( - conf.APPDIR, - conf.DIST, - 'icons', - 'iconstats.json', - ), - icons: { - android: true, - appleIcon: true, - appleStartup: true, - coast: true, - favicons: true, - firefox: true, - opengraph: true, - twitter: true, - yandex: true, - windows: true, + plugins.push( + new FaviconsWebpackPlugin({ + title: 'Webpack App', + logo: faviconPath, + prefix: '/icons/', + emitStats: false, + persistentCache: true, + inject: false, + statsFilename: path.join( + conf.APPDIR, + conf.DIST, + 'icons', + 'iconstats.json', + ), + icons: { + android: true, + appleIcon: true, + appleStartup: true, + coast: true, + favicons: true, + firefox: true, + opengraph: true, + twitter: true, + yandex: true, + windows: true, }, }), - ); + ); } // add themes favicons common.themes.forEach((theme) => { const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png'); if (fs.existsSync(faviconPath)) { - plugins.push( - new FaviconsWebpackPlugin({ - title: 'Webpack App', - logo: faviconPath, - prefix: '/' + theme + '-icons/', - emitStats: false, - persistentCache: true, - inject: false, - statsFilename: path.join( - conf.APPDIR, - conf.DIST, - theme + '-icons', - 'iconstats.json', - ), - icons: { - android: true, - appleIcon: true, - appleStartup: true, - coast: true, - favicons: true, - firefox: true, - opengraph: true, - twitter: true, - yandex: true, - windows: true, + plugins.push( + new FaviconsWebpackPlugin({ + title: 'Webpack App', + logo: faviconPath, + prefix: '/' + theme + '-icons/', + emitStats: false, + persistentCache: true, + inject: false, + statsFilename: path.join( + conf.APPDIR, + conf.DIST, + theme + '-icons', + 'iconstats.json', + ), + icons: { + android: true, + appleIcon: true, + appleStartup: true, + coast: true, + favicons: true, + firefox: true, + opengraph: true, + twitter: true, + yandex: true, + windows: true, }, }), - ); + ); } -}); + }); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') .BundleAnalyzerPlugin; @@ -176,14 +175,14 @@ plugins.push( new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false, - }), + }), ); const cfg = merge(common.webpack, { mode: NODE_ENV, cache: { type: 'filesystem', - }, + }, recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'), optimization: { //removeAvailableModules: false, @@ -191,7 +190,7 @@ const cfg = merge(common.webpack, { splitChunks: { name: 'vendor', minChunks: 2, - }, + }, concatenateModules: true, //ModuleConcatenationPlugin minimizer: [ new TerserPlugin({ @@ -204,7 +203,7 @@ const cfg = merge(common.webpack, { // sections only apply transformations that are ecma 5 safe // https://github.com/facebook/create-react-app/pull/4234 ecma: 8, - }, + }, compress: { ecma: 6, warnings: false, @@ -213,7 +212,7 @@ const cfg = merge(common.webpack, { // Pending further investigation: // https://github.com/mishoo/UglifyJS2/issues/2011 comparisons: false, - }, + }, keep_fnames: true, keep_classnames: true, @@ -222,19 +221,19 @@ const cfg = merge(common.webpack, { keep_fnames: true, keep_classnames: true, reserved: ['$', 'jQuery', 'jquery'], - }, + }, output: { ecma: 5, comments: false, // Turned on because emoji and regex is not minified properly using default // https://github.com/facebook/create-react-app/issues/2488 ascii_only: true, - }, - }, + }, + }, // Use multi-process parallel running to improve the build speed // Default number of concurrent runs: os.cpus().length - 1 parallel: true, - }), + }), new CssMinimizerPlugin({ parallel: true, minimizerOptions: [{ @@ -242,8 +241,8 @@ const cfg = merge(common.webpack, { 'default', { discardComments: { - removeAll: true - }, + removeAll: true, + }, zindex: true, cssDeclarationSorter: true, reduceIdents: false, @@ -253,25 +252,26 @@ const cfg = merge(common.webpack, { discardUnused: true, discardOverridden: true, discardDuplicates: true, - }, + }, ], - }, ], + },], minify: [ CssMinimizerPlugin.cssnanoMinify, //CssMinimizerPlugin.cleanCssMinify, - ] - }), + ], + }), ], - }, + }, output: { publicPath: path.join(conf.APPDIR, conf.DIST) + '/', path: path.join(__dirname, conf.APPDIR, conf.DIST) + '/', filename: path.join('js', '[name].js'), - }, + }, module: { - rules: [{ + rules: [ + { test: /\.tsx?$/, loader: 'ts-loader' }, { test: /\.jsx?$/, //exclude: /node_modules/, use: { @@ -285,51 +285,51 @@ const cfg = merge(common.webpack, { plugins: [ '@babel/plugin-proposal-class-properties', ], - }, + }, ], //Preset used for env setup plugins: [ - ['@babel/transform-react-jsx'] + ['@babel/transform-react-jsx'], ], cacheDirectory: true, cacheCompression: true, - }, - }, - }, + }, + }, + }, { test: /\.s?css$/, use: [{ loader: MiniCssExtractPlugin.loader, options: { - publicPath: "../", - }, - }, + publicPath: '../', + }, + }, { loader: 'css-loader', options: { - sourceMap: true - }, - }, + sourceMap: true, + }, + }, /*{ loader: 'resolve-url-loader', },*/ { loader: 'sass-loader', options: { - sourceMap: true - }, - }, + sourceMap: true, + }, + }, ], - }, + }, { test: /fontawesome([^.]+).(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/, - type: "asset/resource", - }, + type: 'asset/resource', + }, { test: /\.(ttf|otf|eot|woff(2)?)$/, - type: "asset/resource", - }, { + type: 'asset/resource', + }, { test: /\.(png|webp|jpg|jpeg|gif|svg)$/, - type: "javascript/auto", + type: 'javascript/auto', use: [ { loader: 'img-optimize-loader', @@ -345,33 +345,33 @@ const cfg = merge(common.webpack, { // loseless compression for png optipng: { optimizationLevel: 4, - }, + }, // lossy compression for png. This will generate smaller file than optipng. pngquant: { quality: [0.2, 0.8], - }, + }, // Compression for svg. svgo: true, // Compression for gif. gifsicle: { optimizationLevel: 3, - }, + }, // Compression for jpg. mozjpeg: { progressive: true, quality: 60, - }, - }, + }, + }, inline: { limit: 1, - }, - }, - }, ], - }, ], - }, + }, + }, + },], + },], + }, plugins: plugins, -}); + }); console.log(cfg); module.exports = cfg; diff --git a/webpack.config.serve.js b/webpack.config.serve.js index 7fdd3f9..5a2d023 100644 --- a/webpack.config.serve.js +++ b/webpack.config.serve.js @@ -10,7 +10,7 @@ const fs = require('fs'); //const autoprefixer = require('autoprefixer'); const webpack = require('webpack'); const { - merge + merge, } = require('webpack-merge'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); @@ -38,7 +38,7 @@ const plugins = [ 'react-dom': 'ReactDOM', /*$: 'jquery', jQuery: 'jquery',*/ - }), + }), new webpack.DefinePlugin({ UINAME: JSON.stringify(UIInfo.name), UIVERSION: UIVERSION, @@ -50,37 +50,37 @@ const plugins = [ BASE_HREF: JSON.stringify( `http${conf['HTTPS'] ? 's' : ''}://${IP}:${PORT}`, ), - }), + }), //new webpack.HotModuleReplacementPlugin(), new MiniCssExtractPlugin(), ]; const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html'); if (fs.existsSync(indexPath)) { - plugins.push( - new HtmlWebpackPlugin({ - publicPath: '', - template: path.join(conf.APPDIR, conf.SRC, 'index.html'), - templateParameters: { - NODE_ENV: NODE_ENV, - GRAPHQL_URL: conf['GRAPHQL_URL'], - STATIC_URL: conf['STATIC_URL'], - REACT_SCRIPTS: NODE_ENV === 'production' ? - '' : '', + plugins.push( + new HtmlWebpackPlugin({ + publicPath: '', + template: path.join(conf.APPDIR, conf.SRC, 'index.html'), + templateParameters: { + NODE_ENV: NODE_ENV, + GRAPHQL_URL: conf['GRAPHQL_URL'], + STATIC_URL: conf['STATIC_URL'], + REACT_SCRIPTS: NODE_ENV === 'production' ? + '' : '', }, }), - ); + ); } const config = merge(common.webpack, { mode: 'development', entry: { - /*hot: [ - 'react-hot-loader/patch', - 'webpack-dev-server/?https://' + conf.HOSTNAME + ':' + conf.PORT, - 'webpack/hot/only-dev-server', - ],*/ + /*hot: [ + 'react-hot-loader/patch', + 'webpack-dev-server/?https://' + conf.HOSTNAME + ':' + conf.PORT, + 'webpack/hot/only-dev-server', + ],*/ }, output: { @@ -90,16 +90,17 @@ const config = merge(common.webpack, { publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${ conf.PORT }/`, - }, + }, module: { - rules: [{ + rules: [ + { test: /\.tsx?$/, loader: 'ts-loader' }, { test: /\.jsx?$/, //exclude: /node_modules/, use: { loader: '@sucrase/webpack-loader', //'babel-loader', options: { - transforms: ['jsx'] + transforms: ['jsx'], /*presets: [ '@babel/preset-env', '@babel/react', @@ -116,36 +117,36 @@ const config = merge(common.webpack, { ], cacheDirectory: true, cacheCompression: true,*/ - }, - }, - }, + }, + }, + }, { test: /\.s?css$/, use: [{ loader: 'style-loader', //MiniCssExtractPlugin.loader, - }, + }, { loader: 'css-loader', options: { sourceMap: true, - }, - }, + }, + }, { loader: 'sass-loader', options: { sourceMap: true, - }, - }, ], - }, + }, + },], + }, { test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, type: 'asset/resource', - }, + }, { test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/, type: 'asset/resource', - }, ], - }, + },], + }, plugins: plugins, devServer: { @@ -161,8 +162,8 @@ const config = merge(common.webpack, { 'Access-Control-Allow-Origin': '*', 'Referrer-Policy': 'unsafe-url', 'service-worker-allowed': '/', - }, - }, -}); + }, + }, + }); module.exports = config;