IMPR: Add ts-loader

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",
+    "terser-webpack-plugin": "^5.2.4",
-    "ts-invariant": "^0.9.1",
+    "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",

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "sourceMap": true
+  }
+}

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');
 
@@ -242,7 +241,7 @@ const cfg = merge(common.webpack, {
                         'default',
                         {
                             discardComments: {
-                                removeAll: true
+                                removeAll: true,
                               },
                             zindex: true,
                             cssDeclarationSorter: true,
@@ -259,7 +258,7 @@ const cfg = merge(common.webpack, {
                 minify: [
                     CssMinimizerPlugin.cssnanoMinify,
                     //CssMinimizerPlugin.cleanCssMinify,
-                ]
+                ],
               }),
         ],
       },
@@ -271,7 +270,8 @@ const cfg = merge(common.webpack, {
       },
 
     module: {
-        rules: [{
+        rules: [
+        { test: /\.tsx?$/, loader: 'ts-loader' }, {
             test: /\.jsx?$/,
             //exclude: /node_modules/,
             use: {
@@ -288,7 +288,7 @@ const cfg = merge(common.webpack, {
                           },
                     ], //Preset used for env setup
                     plugins: [
-                        ['@babel/transform-react-jsx']
+                        ['@babel/transform-react-jsx'],
                     ],
                     cacheDirectory: true,
                     cacheCompression: true,
@@ -300,13 +300,13 @@ const cfg = merge(common.webpack, {
             use: [{
                     loader: MiniCssExtractPlugin.loader,
                     options: {
-                        publicPath: "../",
+                        publicPath: '../',
                       },
                   },
                 {
                     loader: 'css-loader',
                     options: {
-                        sourceMap: true
+                        sourceMap: true,
                       },
                   },
                 /*{
@@ -315,21 +315,21 @@ const cfg = merge(common.webpack, {
                 {
                     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',

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');
@@ -93,13 +93,14 @@ const config = merge(common.webpack, {
       },
 
     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',