@bikdotai/bik-widgets 1.0.0

package/webpack.config.js

@@ -0,0 +1,239 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin');
+const CssoWebpackPlugin = require('csso-webpack-plugin').default;
+
+const widgetEntries = {
+  centrallyAligned: path.join(
+    __dirname,
+    'src/widgets/CentrallyAlignedPopup/index.tsx',
+  ),
+  bottomDrawer: path.join(__dirname, 'src/widgets/BottomDrawer/index.tsx'),
+  singleButtonRedirection: path.join(
+    __dirname,
+    'src/widgets/SingleButtonRedirection/index.tsx',
+  ),
+  webStories: path.join(__dirname, 'src/widgets/WebStories/index.tsx'),
+  stw: path.join(__dirname, 'src/widgets/STW/index.tsx'),
+  directReward: path.join(__dirname, 'src/widgets/DirectReward/index.tsx'),
+  scratchCard: path.join(__dirname, 'src/widgets/ScratchCard/index.tsx'),
+  captivateBanner: path.join(
+    __dirname,
+    'src/widgets/CaptivateBanner/index.tsx',
+  ),
+  shopifyForm: path.join(__dirname, 'src/widgets/ShopifyForm/index.tsx'),
+};
+
+const mainEntry = {
+  main: path.join(__dirname, 'src/index.tsx'),
+};
+
+function renderEntries(env) {
+  if (env.stage === 'dev') return mainEntry;
+  else if (env.stage === 'widgets') return widgetEntries;
+  else return {};
+}
+
+const bucketUrl = env => {
+  if (env.infra === 'staging') return 'bik-widget-mfe';
+  else return 'bik-assets';
+};
+
+const getSourceMapUrl = env => {
+  if (env.stage === 'mfe') {
+    return `https://${bucketUrl(env)}.storage.googleapis.com/bap/mfe/`;
+  }
+  return `https://${bucketUrl(env)}.storage.googleapis.com/bap/source-map/`;
+};
+
+const getPublicPath = env => {
+  if (env.infra === 'production' && env.stage === 'widgets') {
+    return 'https://bikapi.bikayi.app/assets/bap/';
+  } else if (env.infra === 'staging' && env.stage === 'widgets') {
+    return 'https://api.staging.bik.ai/bik-widgets/bap/';
+  } else {
+    return 'auto';
+  }
+};
+
+const devPlugins = [
+  new HtmlWebpackPlugin({
+    template: path.join(__dirname, 'src', 'index.html'),
+  }),
+  new CleanWebpackPlugin({
+    protectWebpackAssets: false,
+    cleanAfterEveryBuildPatterns: ['*.LICENSE.txt', '*/*.LICENSE.txt'],
+  }),
+];
+
+module.exports = env => {
+  const sourceMapPlugin = [
+    new SourceMapDevToolPlugin({
+      filename: '[file].map',
+      publicPath: getSourceMapUrl(env),
+    }),
+  ];
+  function decidePlugins(env) {
+    const cssOptimizationPlugins =
+      env && (env.infra === 'production' || env.infra === 'staging')
+        ? [
+            new CssoWebpackPlugin({
+              pluginOutputPostfix: 'min',
+              restructure: true,
+              forceMediaMerge: true,
+              comments: false,
+              usage: {
+                blacklist: {
+                  // Remove unused keyframes and other rules
+                  keyframes: false,
+                  'counter-style': false,
+                  supports: false,
+                  document: false,
+                  page: false,
+                  viewport: false,
+                },
+              },
+            }),
+          ]
+        : [];
+
+    if (env.infra === 'production') {
+      if (env.stage === 'mfe') {
+        return [
+          ...devPlugins,
+          ...sourceMapPlugin,
+          ...cssOptimizationPlugins,
+        ];
+      } else {
+        return [...devPlugins, ...sourceMapPlugin, ...cssOptimizationPlugins];
+      }
+    } else {
+      if (env.stage === 'mfe' || env.stage === 'dev') {
+        return [
+          ...devPlugins,
+          ...sourceMapPlugin,
+          ...cssOptimizationPlugins,
+        ];
+      } else {
+        return [...devPlugins, ...sourceMapPlugin, ...cssOptimizationPlugins];
+      }
+    }
+  }
+
+  return {
+    entry: renderEntries(env),
+    output: {
+      path: path.resolve(
+        __dirname,
+        env.stage === 'widgets' ? 'dist' : 'dist-mfe',
+      ),
+      filename: '[name].js',
+      chunkFilename: 'chunks/[name].[chunkhash].js',
+      publicPath: getPublicPath(env),
+      assetModuleFilename: '[name].[chunkhash][ext]',
+    },
+    mode: process.env.NODE_ENV || 'development',
+    devServer: {
+      static: { directory: path.join(__dirname, 'src') },
+      historyApiFallback: true,
+      port: 4000,
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js'],
+      alias: {
+        react: 'preact/compat',
+        'react-dom': 'preact/compat',
+        utilities: path.resolve(__dirname, 'src/utilities'),
+        components: path.resolve(__dirname, 'src/components'),
+        widgets: path.resolve(__dirname, 'src/widgets'),
+        assets: path.resolve(__dirname, 'src/assets'),
+        hooks: path.resolve(__dirname, 'src/hooks'),
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx|ts|tsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/preset-env',
+                '@babel/preset-react',
+                '@babel/preset-typescript',
+              ],
+            },
+          },
+        },
+        {
+          test: /\.(css|scss)$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options:
+                env && (env.infra === 'production' || env.infra === 'staging')
+                  ? {
+                      // Production optimizations
+                      importLoaders: 2, // Updated for postcss-loader
+                      modules: {
+                        localIdentName: '[hash:base64:8]', // Shorter class names
+                      },
+                      // Remove source maps for smaller size
+                      sourceMap: false,
+                    }
+                  : {
+                      // Development settings
+                      sourceMap: true,
+                      modules: {
+                        localIdentName: '[name]__[local]__[hash:base64:5]',
+                      },
+                      importLoaders: 2,
+                    },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                sourceMap:
+                  env && env.infra !== 'production' && env.infra !== 'staging',
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(jpg|jpeg|png|gif|mp3)$/,
+          use: ['file-loader'],
+        },
+        {
+          test: /\.svg$/,
+          use: [
+            {
+              loader: '@svgr/webpack',
+              options: { dimensions: false },
+            },
+          ],
+        },
+      ],
+    },
+    plugins: decidePlugins(env),
+    optimization: {
+      chunkIds: 'named',
+      splitChunks: {
+        cacheGroups: {
+          firebase: {
+            test: /[\\/]node_modules[\\/](@firebase|firebase)[\\/]/,
+            name: 'firebase',
+            chunks: 'all',
+          },
+          vendor: {
+            test: /[\\/]node_modules[\\/](?!((lottie-web)|(@bikdotai\/bik-chat))\/).*/,
+            name: 'vendor',
+            chunks: 'all',
+          },
+        },
+      },
+    },
+  };
+};