react-kofi-overlay 0.1.0 → 0.1.1

package/dist/bundle.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-kofi-overlay",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React component for accepting donations though Ko-fi without leaving your website",
   "main": "dist/bundle.js",
   "types": "dist/index.d.ts",
@@ -25,9 +25,10 @@
     "@types/react": "^18.2.45",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.8.1",
-    "mini-css-extract-plugin": "^2.7.6",
     "node-sass": "^9.0.0",
-    "sass-loader": "^13.3.2",
+    "sass-loader": "^13.3.3",
+    "style-loader": "^3.3.3",
+    "terser-webpack-plugin": "^5.3.10",
     "typescript": "^5.3.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"

package/webpack.config.js

@@ -1,8 +1,9 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = {
   entry: './src/index.tsx',
-  mode: 'none',
+  mode: 'production',
   module: {
     rules: [
       {
@@ -20,22 +21,55 @@ module.exports = {
         },
       },
       {
-        test: /\.scss$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+        test: /\.s[ac]ss$/i,
+        use: [
+          // Creates `style` nodes from JS strings
+          'style-loader',
+          // Translates CSS into CommonJS
+          'css-loader',
+          // Compiles Sass to CSS
+          'sass-loader',
+        ],
       },
     ],
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
   },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {
+            // preserve "use client" directive (inserted below w/ BannerPlugin)
+            // https://github.com/terser/terser?tab=readme-ov-file#compress-options
+            directives: false
+          }
+        }
+      }),
+    ],
+  },
   output: {
     filename: 'bundle.js',
     path: __dirname + '/dist',
     libraryTarget: 'umd',
     library: 'KofiDonate',
     umdNamedDefine: true,
+    globalObject: 'this'
   },
-  plugins: [new MiniCssExtractPlugin()],
+  plugins: [
+    // Inject a "use client" at the top of the bundle so frameworks like
+    // Next.js see it as a boundary between client and server.
+    // This feels a little hacky so hopefully this can be improved with better
+    // webpack support in the future.
+    new webpack.BannerPlugin({
+      // https://webpack.js.org/plugins/banner-plugin/#options
+      banner: "'use client';",
+      raw: true,
+      include: [/\.(ts|tsx|js)$/]
+    }),
+  ],
   externals: {
     react: 'react',
     'react-dom': 'react-dom',

package/dist/main.css

@@ -1,84 +0,0 @@
-@keyframes kF0g9az8fVG6kOqOMufc {
-  from {
-    translate: 0 200%;
-    opacity: 0; }
-  to {
-    translate: 0;
-    opacity: 1; } }
-
-.QSEpZEcKR0JDQr2RBSst {
-  display: inline-block;
-  background-color: #29abe0;
-  color: white;
-  padding: 0.5em 1em;
-  border-radius: 2em;
-  font-weight: bold; }
-  .QSEpZEcKR0JDQr2RBSst:hover {
-    background-color: #3eb3e3; }
-  .QSEpZEcKR0JDQr2RBSst:active {
-    background-color: #259aca; }
-
-.OUfEeoWEwJM1UiF9qYa6 {
-  position: fixed;
-  z-index: 100;
-  width: calc(min(320px, 100%));
-  height: calc(min(580px, 95%));
-  bottom: 0;
-  right: 2em;
-  animation: kF0g9az8fVG6kOqOMufc 1s forwards ease-in-out;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
-  .OUfEeoWEwJM1UiF9qYa6 iframe {
-    width: 100%;
-    height: 100%;
-    border: 0;
-    border-radius: 1em 1em 0 0;
-    background-color: white; }
-  .OUfEeoWEwJM1UiF9qYa6 .IBUCc6fCjyxRl3Ek8DQA {
-    position: absolute;
-    right: 0;
-    top: 0;
-    background-color: white;
-    border-color: #ddd;
-    border-width: 1px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    aspect-ratio: 1;
-    translate: 33% -33%;
-    border-radius: 100%;
-    line-height: 0; }
-    .OUfEeoWEwJM1UiF9qYa6 .IBUCc6fCjyxRl3Ek8DQA:hover {
-      background-color: #e6e6e6; }
-    .OUfEeoWEwJM1UiF9qYa6 .IBUCc6fCjyxRl3Ek8DQA:active {
-      background-color: #cccccc; }
-  .OUfEeoWEwJM1UiF9qYa6 .XH4Q6flr1ggDa4pjIu7O {
-    color: gray;
-    width: 1.5rem;
-    height: 1.5rem; }
-  .OUfEeoWEwJM1UiF9qYa6 .efoQ9WoiKsTaNnaKB03U {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background-color: white;
-    text-align: center;
-    padding: 0.75rem;
-    font-size: 0.9rem;
-    border-top: 1px solid #ddd;
-    font-weight: 600;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
-    .OUfEeoWEwJM1UiF9qYa6 .efoQ9WoiKsTaNnaKB03U a {
-      color: black;
-      text-shadow: none;
-      text-decoration: none; }
-      .OUfEeoWEwJM1UiF9qYa6 .efoQ9WoiKsTaNnaKB03U a:hover {
-        color: #29abe0; }
-  @media (max-width: 480px) {
-    .OUfEeoWEwJM1UiF9qYa6 {
-      right: 0;
-      width: 100%;
-      height: 100%; }
-      .OUfEeoWEwJM1UiF9qYa6 iframe {
-        border-radius: 0; }
-      .OUfEeoWEwJM1UiF9qYa6 .IBUCc6fCjyxRl3Ek8DQA {
-        translate: initial;
-        margin: 0.5rem; } }
-