Switch Library Type from CommonJs2 => UMD ( (#135)

Co-authored-by: Peter Krieg <pkrieg2@gmail.com>

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [[7.0.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.1)]
+
+- Switched from CommonJS to UMD module
+
+## [[6.4.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.1))]
+
+- Added missing typing
+
+## [[6.4.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.0))]
+
+- Added visible prop
+
 ## [[6.3.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3))]
 
 - Added the (optional) scrolling effect back in as it is declared legal in some countries now.

build/index.d.ts

@@ -4,6 +4,7 @@ import Cookies from "js-cookie";
 export interface CookieConsentProps {
   location?: "top" | "bottom" | "none";
   sameSite?: "strict" | "lax" | "none";
+  visible?: "hidden" | "show" | "byCookieValue";
   cookieSecurity?: boolean;
   style?: object;
   buttonStyle?: object;
@@ -53,4 +54,17 @@ export default class CookieConsent extends React.Component<CookieConsentProps, {
  */
 export function getCookieConsentValue(name?: string): string;
 
+/**
+ * Reset the consent cookie
+ * Remove the cookie on browser in order to allow user to change their consent
+ * @param {*} name optional name of the cookie
+ */
+export function resetCookieConsentValue(name?: string);
+
+/**
+ * Get the legacy cookie name by the regular cookie name
+ * @param {string} name of cookie to get
+ */
+export function getLegacyCookieName(name: string);
+
 export { Cookies };

build/index.js

@@ -1,5 +1,14 @@
 /*! For license information please see index.js.LICENSE.txt */
-!(function () {
+!(function (e, t) {
+  "object" == typeof exports && "object" == typeof module
+    ? (module.exports = t())
+    : "function" == typeof define && define.amd
+    ? define([], t)
+    : "object" == typeof exports
+    ? (exports.ReactCookieConsent = t())
+    : (e.ReactCookieConsent = t());
+})(self, function () {
+  return (function () {
     var e = {
         808: function (e, t, n) {
           var o, r, i;
@@ -171,7 +180,8 @@
           Object.defineProperty(e, "__esModule", { value: !0 });
       });
     var o = {};
-  !(function () {
+    return (
+      (function () {
         "use strict";
         n.r(o),
           n.d(o, {
@@ -179,16 +189,22 @@
               return l();
             },
             OPTIONS: function () {
-          return O;
+              return m;
             },
             SAME_SITE_OPTIONS: function () {
               return g;
             },
+            VISIBLE_OPTIONS: function () {
+              return S;
+            },
             default: function () {
-          return w;
+              return B;
             },
             getCookieConsentValue: function () {
-          return S;
+              return C;
+            },
+            resetCookieConsentValue: function () {
+              return k;
             },
           });
         const e = require("react");
@@ -278,8 +294,8 @@
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
           return e;
         }
-    function m(e) {
-      return (m = Object.setPrototypeOf
+        function O(e) {
+          return (O = Object.setPrototypeOf
             ? Object.getPrototypeOf
             : function (e) {
                 return e.__proto__ || Object.getPrototypeOf(e);
@@ -298,24 +314,29 @@
             e
           );
         }
-    var O = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
+        var m = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
           g = { STRICT: "strict", LAX: "lax", NONE: "none" },
-      S = function () {
-        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : k,
+          S = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" },
+          C = function () {
+            var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j,
               t = l().get(e);
-        return void 0 === t && (t = l().get(C(e))), t;
+            return void 0 === t && (t = l().get(x(e))), t;
           },
-      C = function (e) {
+          k = function () {
+            var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j;
+            l().remove(e);
+          },
+          x = function (e) {
             return "".concat(e, "-legacy");
           },
-      k = "CookieConsent",
-      x = function (e) {
+          j = "CookieConsent",
+          w = function (e) {
             var t = e.condition,
               n = e.wrapper,
               o = e.children;
             return t ? n(o) : o;
           },
-      j = (function (e) {
+          T = (function (e) {
             !(function (e, t) {
               if ("function" != typeof t && null !== t)
                 throw new TypeError("Super expression must either be null or a function");
@@ -336,7 +357,10 @@
                   if ("function" == typeof Proxy) return !0;
                   try {
                     return (
-                  Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})), !0
+                      Boolean.prototype.valueOf.call(
+                        Reflect.construct(Boolean, [], function () {})
+                      ),
+                      !0
                     );
                   } catch (e) {
                     return !1;
@@ -344,9 +368,9 @@
                 })()),
                 function () {
                   var e,
-                t = m(r);
+                    t = O(r);
                   if (i) {
-                var n = m(this).constructor;
+                    var n = O(this).constructor;
                     e = Reflect.construct(t, arguments, n);
                   } else e = t.apply(this, arguments);
                   return y(this, e);
@@ -474,21 +498,26 @@
                       c = this.props.cookieSecurity;
                     void 0 === c && (c = !location || "https:" === location.protocol);
                     var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c });
-                i === g.NONE && l().set(C(e), t, a), l().set(e, t, a);
+                    i === g.NONE && l().set(x(e), t, a), l().set(e, t, a);
                   },
                 },
                 {
                   key: "getCookieValue",
                   value: function () {
                     var e = this.props.cookieName;
-                return S(e);
+                    return C(e);
                   },
                 },
                 {
                   key: "render",
                   value: function () {
                     var e = this;
+                    switch (this.props.visible) {
+                      case S.HIDDEN:
+                        return null;
+                      case S.BY_COOKIE_VALUE:
                         if (!this.state.visible) return null;
+                    }
                     var n = this.props,
                       o = n.location,
                       r = n.style,
@@ -502,57 +531,57 @@
                       b = n.contentClasses,
                       y = n.buttonClasses,
                       v = n.buttonWrapperClasses,
-                  m = n.declineButtonClasses,
+                      O = n.declineButtonClasses,
                       h = n.buttonId,
                       g = n.declineButtonId,
-                  S = n.disableButtonStyles,
-                  C = n.enableDeclineButton,
-                  k = n.flipButtons,
+                      C = n.disableButtonStyles,
+                      k = n.enableDeclineButton,
+                      x = n.flipButtons,
                       j = n.ButtonComponent,
-                  w = n.overlay,
-                  T = n.overlayClasses,
-                  B = n.overlayStyle,
+                      T = n.overlay,
+                      B = n.overlayClasses,
+                      E = n.overlayStyle,
                       P = n.ariaAcceptLabel,
-                  E = n.ariaDeclineLabel,
-                  D = {},
+                      D = n.ariaDeclineLabel,
                       I = {},
-                  N = {},
                       _ = {},
-                  R = {};
+                      N = {},
+                      R = {},
+                      A = {};
                     switch (
                       (a
-                    ? ((D = u({}, r)),
-                      (I = u({}, i)),
+                        ? ((I = u({}, r)),
+                          (_ = u({}, i)),
                           (N = u({}, c)),
-                      (_ = u({}, l)),
-                      (R = u({}, B)))
-                    : ((D = u({}, f(f({}, this.state.style), r))),
-                      (_ = u({}, f(f({}, this.state.contentStyle), l))),
-                      (R = u({}, f(f({}, this.state.overlayStyle), B))),
-                      S
-                        ? ((I = u({}, i)), (N = u({}, c)))
-                        : ((I = u({}, f(f({}, this.state.buttonStyle), i))),
+                          (R = u({}, l)),
+                          (A = u({}, E)))
+                        : ((I = u({}, f(f({}, this.state.style), r))),
+                          (R = u({}, f(f({}, this.state.contentStyle), l))),
+                          (A = u({}, f(f({}, this.state.overlayStyle), E))),
+                          C
+                            ? ((_ = u({}, i)), (N = u({}, c)))
+                            : ((_ = u({}, f(f({}, this.state.buttonStyle), i))),
                               (N = u({}, f(f({}, this.state.declineButtonStyle), c))))),
                       o)
                     ) {
-                  case O.TOP:
-                    D.top = "0";
+                      case m.TOP:
+                        I.top = "0";
                         break;
-                  case O.BOTTOM:
-                    D.bottom = "0";
+                      case m.BOTTOM:
+                        I.bottom = "0";
                     }
-                var A = [];
+                    var L = [];
                     return (
-                  C &&
-                    A.push(
+                      k &&
+                        L.push(
                           t().createElement(
                             j,
                             {
                               key: "declineButton",
                               style: N,
-                          className: m,
+                              className: O,
                               id: g,
-                          "aria-label": E,
+                              "aria-label": D,
                               onClick: function () {
                                 e.decline();
                               },
@@ -560,12 +589,12 @@
                             p
                           )
                         ),
-                  A.push(
+                      L.push(
                         t().createElement(
                           j,
                           {
                             key: "acceptButton",
-                        style: I,
+                            style: _,
                             className: y,
                             id: h,
                             "aria-label": P,
@@ -576,23 +605,23 @@
                           s
                         )
                       ),
-                  k && A.reverse(),
+                      x && L.reverse(),
                       t().createElement(
-                    x,
+                        w,
                         {
-                      condition: w,
+                          condition: T,
                           wrapper: function (e) {
-                        return t().createElement("div", { style: R, className: T }, e);
+                            return t().createElement("div", { style: A, className: B }, e);
                           },
                         },
                         t().createElement(
                           "div",
-                      { className: "".concat(d), style: D },
-                      t().createElement("div", { style: _, className: b }, this.props.children),
+                          { className: "".concat(d), style: I },
+                          t().createElement("div", { style: R, className: b }, this.props.children),
                           t().createElement(
                             "div",
                             { className: "".concat(v) },
-                        A.map(function (e) {
+                            L.map(function (e) {
                               return e;
                             })
                           )
@@ -605,10 +634,15 @@
               a
             );
           })(e.Component);
-    (j.propTypes = {
+        (T.propTypes = {
           location: i().oneOf(
-        Object.keys(O).map(function (e) {
-          return O[e];
+            Object.keys(m).map(function (e) {
+              return m[e];
+            })
+          ),
+          visible: i().oneOf(
+            Object.keys(S).map(function (e) {
+              return S[e];
             })
           ),
           sameSite: i().oneOf(
@@ -655,14 +689,15 @@
           acceptOnScroll: i().bool,
           acceptOnScrollPercentage: i().number,
         }),
-      (j.defaultProps = {
+          (T.defaultProps = {
             disableStyles: !1,
             hideOnAccept: !0,
             hideOnDecline: !0,
-        location: O.BOTTOM,
+            location: m.BOTTOM,
+            visible: S.BY_COOKIE_VALUE,
             onAccept: function () {},
             onDecline: function () {},
-        cookieName: k,
+            cookieName: j,
             cookieValue: !0,
             declineCookieValue: !1,
             setDeclineCookie: !0,
@@ -715,7 +750,9 @@
             acceptOnScroll: !1,
             acceptOnScrollPercentage: 25,
           });
-    const w = j;
+        const B = T;
       })(),
-    (module.exports = o);
+      o
+    );
   })();
+});

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "react-cookie-consent",
-  "version": "6.3.0",
+  "version": "7.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "6.3.0",
+      "version": "7.0.0",
       "license": "MIT",
       "dependencies": {
         "js-cookie": "^2.2.1",

package.json

@@ -4,7 +4,7 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "6.3.0",
+  "version": "7.0.0",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/index.d.ts

@@ -4,6 +4,7 @@ import Cookies from "js-cookie";
 export interface CookieConsentProps {
   location?: "top" | "bottom" | "none";
   sameSite?: "strict" | "lax" | "none";
+  visible?: "hidden" | "show" | "byCookieValue";
   cookieSecurity?: boolean;
   style?: object;
   buttonStyle?: object;
@@ -53,4 +54,17 @@ export default class CookieConsent extends React.Component<CookieConsentProps, {
  */
 export function getCookieConsentValue(name?: string): string;
 
+/**
+ * Reset the consent cookie
+ * Remove the cookie on browser in order to allow user to change their consent
+ * @param {*} name optional name of the cookie
+ */
+export function resetCookieConsentValue(name?: string);
+
+/**
+ * Get the legacy cookie name by the regular cookie name
+ * @param {string} name of cookie to get
+ */
+export function getLegacyCookieName(name: string);
+
 export { Cookies };

webpack.config.js

@@ -6,7 +6,10 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, "build"),
     filename: "index.js",
-    libraryTarget: "commonjs2", // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
+    library: {
+      name: "ReactCookieConsent",
+      type: "umd",
+    },
     environment: {
       arrowFunction: false, // the generated runtime-code should not use arrow functions
     },
@@ -16,7 +19,7 @@ module.exports = {
       {
         test: /\.js$/,
         include: path.resolve(__dirname, "src"),
-        exclude: /(node_modules|bower_components|build)/,
+        exclude: /(node_modules|build)/,
         use: {
           loader: "babel-loader",
           options: {