Upgrade deps, build scripts, config, & lint for player-model branch

.github/workflows/cd.yml

@@ -9,18 +9,12 @@ jobs:
     container:
       image: python:2.7.18-buster
 
-    strategy:
-      matrix:
-        node-version: [14.x]
-
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: Install Yarn
-        run: npm install -g yarn
+          node-version-file: '.nvmrc'
       - name: "[Setup] Install dependencies"
         run: yarn
       - name: "[Test] Run all tests"

.github/workflows/ci.yml

@@ -6,20 +6,14 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-20.04
-    container:
-      image: python:2.7.18-buster
-
-    strategy:
-      matrix:
-        node-version: [14.x]
+    runs-on: ubuntu-22.04
 
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version-file: '.nvmrc'
       - name: Install Yarn
         run: npm install -g yarn
       - name: "[Setup] Install dependencies"

.nvmrc

@@ -0,0 +1 @@
+18.18.0

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.21.1
+FROM node:18.18.0
 WORKDIR /sdk
 COPY package.json .
 RUN yarn

build/config/page-sdk-es6.config.js

@@ -1,9 +1,9 @@
 const webpack = require('webpack');
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const { CheckerPlugin } = require('awesome-typescript-loader');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 const env = process.env.ENV || "production";
 const buildOrigin = process.env.BUILD_ORIGIN || "localhost";
@@ -18,21 +18,18 @@ const sdkVersion = process.env.npm_package_config_sdkVersion;
 
 async function getWebpackPlugins() {
   const plugins = [
-    new CheckerPlugin(),
-      new webpack.optimize.ModuleConcatenationPlugin(),
-      new ExtractTextPlugin("OneSignalSDKStyles.css"),
-      new webpack.DefinePlugin({
-        __BUILD_TYPE__: JSON.stringify(env),
-        __BUILD_ORIGIN__: JSON.stringify(buildOrigin),
-        __API_TYPE__: JSON.stringify(apiEnv),
-        __API_ORIGIN__: JSON.stringify(apiOrigin),
-        __IS_HTTPS__: isHttps === "true",
-        __NO_DEV_PORT__: noDevPort === "true",
-        __TEST__: !!tests,
-        __VERSION__: sdkVersion,
-        __LOGGING__: env === "development",
-        "process.env.NODE_ENV": JSON.stringify(nodeEnv),
-      })
+    new webpack.DefinePlugin({
+      __BUILD_TYPE__: JSON.stringify(env),
+      __BUILD_ORIGIN__: JSON.stringify(buildOrigin),
+      __API_TYPE__: JSON.stringify(apiEnv),
+      __API_ORIGIN__: JSON.stringify(apiOrigin),
+      __IS_HTTPS__: isHttps === "true",
+      __NO_DEV_PORT__: noDevPort === "true",
+      __TEST__: !!tests,
+      __VERSION__: sdkVersion,
+      __LOGGING__: env === "development",
+      "process.env.NODE_ENV": JSON.stringify(nodeEnv),
+    })
   ];
   if (!!process.env.ANALYZE) {
     const sizeAnalysisReportPath = path.resolve(path.join('build', 'size-analysis.html'));
@@ -79,12 +76,11 @@ async function generateWebpackConfig() {
       path: path.resolve('build/bundles'),
       filename: '[name]'
     },
-    mode: process.env.ENV === "production" ? "production" : "development",
+    mode: env === "production" ? "production" : "development",
     optimization: {
       minimizer: [
-        new UglifyJsPlugin({
-          sourceMap: true,
-          uglifyOptions: {
+        new TerserPlugin({
+          terserOptions: {
             sourceMap: true,
             compress: {
               drop_console: false,
@@ -101,14 +97,14 @@ async function generateWebpackConfig() {
                 'PushNotSupportedError',
                 'PushPermissionNotGrantedError',
                 'SdkInitError',
-                'TimeoutError'
-              ]
+                'TimeoutError',
+              ],
             } : false,
             output: {
-              comments: false
-            }
-          }
-        })
+              comments: false,
+            },
+          },
+        }),
       ]
     },
     module: {
@@ -118,36 +114,13 @@ async function generateWebpackConfig() {
           exclude: /node_modules/,
           use: [
             {
-              loader: 'awesome-typescript-loader',
+              loader: 'ts-loader',
               options: {
-                configFileName: "build/config/tsconfig.es6.json"
+                configFile: "build/config/tsconfig.es6.json"
               }
             },
           ]
         },
-        {
-          test: /\.scss$/,
-          use: ExtractTextPlugin.extract({
-            use: [
-              {
-                loader: 'css-loader',
-                options: {
-                  sourceMap: true,
-                  minimize: true
-                }
-              },
-              {
-                loader: 'postcss-loader',
-                options: {
-                  plugins: function() {
-                    return [require('autoprefixer')];
-                  }
-                }
-              },
-              'sass-loader'
-            ]
-          })
-        }
       ]
     },
     resolve: {

build/config/sdk.config.js

@@ -1,12 +1,12 @@
 const webpack = require('webpack');
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const { CheckerPlugin } = require('awesome-typescript-loader');
 const dir = require('node-dir');
 const md5file = require('md5-file');
 const crypto = require('crypto');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 const env = process.env.ENV || "production";
 const buildOrigin = process.env.BUILD_ORIGIN || "localhost";
@@ -55,9 +55,7 @@ async function getStylesheetsHash() {
 
 async function getWebpackPlugins() {
   const plugins = [
-    new CheckerPlugin(),
-      new webpack.optimize.ModuleConcatenationPlugin(),
-      new ExtractTextPlugin("OneSignalSDKStyles.css"),
+      new MiniCssExtractPlugin({ filename: 'OneSignalSDKStyles.css' }),
       new webpack.DefinePlugin({
         __BUILD_TYPE__: JSON.stringify(env),
         __BUILD_ORIGIN__: JSON.stringify(buildOrigin),
@@ -112,7 +110,7 @@ async function generateWebpackConfig() {
     target: 'web',
     entry: {
       'OneSignalSDK.js': path.resolve('build/ts-to-es6/src/entries/sdk.js'),
-      'OneSignalSDKStyles.css': path.resolve('src/entries/stylesheet.scss')
+      'OneSignalSDKStyles.js': path.resolve('src/entries/stylesheet.js'),
     },
     output: {
       path: path.resolve('build/bundles'),
@@ -121,9 +119,8 @@ async function generateWebpackConfig() {
     mode: process.env.ENV === "production" ? "production" : "development",
     optimization: {
       minimizer: [
-        new UglifyJsPlugin({
-          sourceMap: true,
-          uglifyOptions: {
+        new TerserPlugin({
+          terserOptions: {
             sourceMap: true,
             compress: {
               drop_console: false,
@@ -148,7 +145,8 @@ async function generateWebpackConfig() {
               comments: false
             }
           }
-        })
+        }),
+        ...(env === 'production' ? [new CssMinimizerPlugin()] : []),
       ]
     },
     module: {
@@ -158,35 +156,35 @@ async function generateWebpackConfig() {
           exclude: /node_modules/,
           use: [
             {
-              loader: 'awesome-typescript-loader',
+              loader: 'ts-loader',
               options: {
-                configFileName: "build/config/tsconfig.es5.json"
+                configFile: "build/config/tsconfig.es5.json"
               }
             },
           ]
         },
         {
           test: /\.scss$/,
-          use: ExtractTextPlugin.extract({
-            use: [
-              {
-                loader: 'css-loader',
-                options: {
-                  sourceMap: true,
-                  minimize: true
-                }
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true,
               },
-              {
-                loader: 'postcss-loader',
-                options: {
-                  plugins: function() {
-                    return [require('autoprefixer')];
-                  }
-                }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  plugins: [
+                    require('autoprefixer'),
+                  ],
+                },
               },
-              'sass-loader'
-            ]
-          })
+            },
+            'sass-loader',
+          ],
         }
       ]
     },

build/config/serviceworker.config.js

@@ -1,8 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const { CheckerPlugin } = require('awesome-typescript-loader');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const env = process.env.ENV || "production";
 const buildOrigin = process.env.BUILD_ORIGIN || "localhost";
@@ -15,10 +14,8 @@ const noDevPort = process.env.NO_DEV_PORT;
 const tests = process.env.TESTS;
 const sdkVersion = process.env.npm_package_config_sdkVersion;
 
-async function getWebpackPlugins() {
+function getWebpackPlugins() {
   const plugins = [
-    new CheckerPlugin(),
-    new webpack.optimize.ModuleConcatenationPlugin(),
     new webpack.DefinePlugin({
       __BUILD_TYPE__: JSON.stringify(env),
       __BUILD_ORIGIN__: JSON.stringify(buildOrigin),
@@ -80,9 +77,8 @@ async function generateWebpackConfig() {
     mode: isProdBuild ? "production" : "development",
     optimization: {
        minimizer: [
-        new UglifyJsPlugin({
-          sourceMap: true,
-          uglifyOptions: {
+        new TerserPlugin({
+          terserOptions: {
             sourceMap: true,
             compress: {
               drop_console: false,
@@ -116,9 +112,9 @@ async function generateWebpackConfig() {
           exclude: /node_modules/,
           use: [
             {
-              loader: "awesome-typescript-loader",
+              loader: "ts-loader",
               options: {
-                configFileName: "build/config/tsconfig.es6.json"
+                configFile: "build/config/tsconfig.es6.json"
               }
             },
           ]
@@ -134,8 +130,8 @@ async function generateWebpackConfig() {
       ]
     },
     devtool: "source-map",
-    plugins: await getWebpackPlugins(),
+    plugins: getWebpackPlugins(),
   }
 }
 
-module.exports = generateWebpackConfig();
+module.exports = generateWebpackConfig();

build/config/tsconfig.es5.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "importHelpers": false,
-    "module": "ES5",
+    "module": "commonjs",
     "noEmitHelpers": false,
     "outDir": "../bundles",
     "sourceRoot": "../..",
@@ -12,4 +12,3 @@
     "mapRoot": "build/ts-to-es6"
   }
 }
-