@clerk/clerk-react - npm Package Compare versions

Comparing version 1.13.0 to 1.13.1-staging.0

dist/clerk-react.cjs.development.js

@@ -44,2 +44,8 @@ 'use strict';
 
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -64,3 +70,3 @@ if (source == null) return {};
 
-var version = "1.13.0";
+var version = "1.13.1-staging.0";
 
@@ -871,27 +877,62 @@ var FAILED_TO_LOAD_ERROR = 'Clerk: Failed to load Clerk';
 
-var Portal = /*#__PURE__*/React__default.memo(function (_ref) {
-  var props = _ref.props,
-      mount = _ref.mount,
-      unmount = _ref.unmount;
-  var portalRef = React__default.createRef();
-  React.useEffect(function () {
-    if (portalRef.current) {
-      mount(portalRef.current, props);
+// lifecycle props to be invoked correctly. Replacing the class component with a
+// functional component wrapped with a React.memo is not identical to the original
+// class implementation due to React intricacies such as the useEffect’s cleanup
+// seems to run AFTER unmount, while componentWillUnmount runs BEFORE.
+// More information can be found at https://clerkinc.slack.com/archives/C015S0BGH8R/p1624891993016300
+// The function Portal implementation is commented out for future reference.
+// const Portal = React.memo(({ props, mount, unmount }: MountProps) => {
+//   const portalRef = React.createRef<HTMLDivElement>();
+//   useEffect(() => {
+//     if (portalRef.current) {
+//       mount(portalRef.current, props);
+//     }
+//     return () => {
+//       if (portalRef.current) {
+//         unmount(portalRef.current);
+//       }
+//     };
+//   }, []);
+//   return <div ref={portalRef} />;
+// });
+// Portal.displayName = 'ClerkPortal';
+
+var Portal = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(Portal, _React$PureComponent);
+
+  function Portal() {
+    var _this;
+
+    _this = _React$PureComponent.apply(this, arguments) || this;
+    _this.portalRef = React__default.createRef();
+    return _this;
+  }
+
+  var _proto = Portal.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.portalRef.current) {
+      this.props.mount(this.portalRef.current, this.props.props);
     }
+  };
 
-    return function () {
-      if (portalRef.current) {
-        unmount(portalRef.current);
-      }
-    };
-  }, []);
-  return React__default.createElement("div", {
-    ref: portalRef
-  });
-});
-Portal.displayName = 'ClerkPortal';
-var SignIn = /*#__PURE__*/withClerk(function (_ref2) {
-  var clerk = _ref2.clerk,
-      props = _objectWithoutPropertiesLoose(_ref2, ["clerk"]);
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.portalRef.current) {
+      this.props.unmount(this.portalRef.current);
+    }
+  };
 
+  _proto.render = function render() {
+    return React__default.createElement("div", {
+      ref: this.portalRef
+    });
+  };
+
+  return Portal;
+}(React__default.PureComponent);
+
+var SignIn = /*#__PURE__*/withClerk(function (_ref) {
+  var clerk = _ref.clerk,
+      props = _objectWithoutPropertiesLoose(_ref, ["clerk"]);
+
   return React__default.createElement(Portal, {
@@ -903,5 +944,5 @@ mount: clerk.mountSignIn,
 }, 'SignIn');
-var SignUp = /*#__PURE__*/withClerk(function (_ref3) {
-  var clerk = _ref3.clerk,
-      props = _objectWithoutPropertiesLoose(_ref3, ["clerk"]);
+var SignUp = /*#__PURE__*/withClerk(function (_ref2) {
+  var clerk = _ref2.clerk,
+      props = _objectWithoutPropertiesLoose(_ref2, ["clerk"]);
 
@@ -914,5 +955,5 @@ return React__default.createElement(Portal, {
 }, 'SignUp');
-var UserProfile = /*#__PURE__*/withClerk(function (_ref4) {
-  var clerk = _ref4.clerk,
-      props = _objectWithoutPropertiesLoose(_ref4, ["clerk"]);
+var UserProfile = /*#__PURE__*/withClerk(function (_ref3) {
+  var clerk = _ref3.clerk,
+      props = _objectWithoutPropertiesLoose(_ref3, ["clerk"]);
 
@@ -925,5 +966,5 @@ return React__default.createElement(Portal, {
 }, 'UserProfile');
-var UserButton = /*#__PURE__*/withClerk(function (_ref5) {
-  var clerk = _ref5.clerk,
-      props = _objectWithoutPropertiesLoose(_ref5, ["clerk"]);
+var UserButton = /*#__PURE__*/withClerk(function (_ref4) {
+  var clerk = _ref4.clerk,
+      props = _objectWithoutPropertiesLoose(_ref4, ["clerk"]);
 
@@ -930,0 +971,0 @@ return React__default.createElement(Portal, {

dist/clerk-react.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),r=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function o(e,n){if(null==e)return{};var r,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n.indexOf(r=i[t])>=0||(o[r]=e[r]);return o}function i(){return"undefined"!=typeof window}var u=new Map;function s(e,n,t){var o=function(o){return function(e,n,t){void 0===t&&(t=1),r.useEffect((function(){var r=u.get(e)||0;if(r==t)throw new Error(n);return u.set(e,r+1),function(){u.set(e,(u.get(e)||1)-1)}}),[])}(n,t),r.createElement(e,Object.assign({},o))};return o.displayName="withMaxAllowedInstancesGuard("+(e.displayName||e.name||n||"Component")+")",o}var l=function(){function e(e,n,r){var t=this,o=this,u=this,s=this;void 0===n&&(n={}),this.clerkjs=null,this.preopenSignIn=null,this.preopenSignUp=null,this.premountSignInNodes=new Map,this.premountSignUpNodes=new Map,this.premountUserProfileNodes=new Map,this.premountUserButtonNodes=new Map,this.premountMethodCalls=new Map,this._loaded=!1,this.ssrData=null,this.hydrateClerkJS=function(e){try{if(!e)throw new Error("Failed to hydrate latest Clerk JS");return o.clerkjs=e,o.premountMethodCalls.forEach((function(e){return e()})),null!==o.preopenSignIn&&e.openSignIn(o.preopenSignIn),null!==o.preopenSignUp&&e.openSignUp(o.preopenSignUp),o.premountSignInNodes.forEach((function(n,r){e.mountSignIn(r,n)})),o.premountSignUpNodes.forEach((function(n,r){e.mountSignUp(r,n)})),o.premountUserProfileNodes.forEach((function(n,r){e.mountUserProfile(r,n)})),o.premountUserButtonNodes.forEach((function(n,r){e.mountUserButton(r,n)})),o._loaded=!0,Promise.resolve(o.clerkjs)}catch(e){return Promise.reject(e)}},this.setSession=function(e,n){return t.clerkjs?t.clerkjs.setSession(e,n):Promise.reject()},this.openSignIn=function(e){t.clerkjs&&t._loaded?t.clerkjs.openSignIn(e):t.preopenSignIn=e},this.closeSignIn=function(){t.clerkjs&&t._loaded?t.clerkjs.closeSignIn():t.preopenSignIn=null},this.openSignUp=function(e){t.clerkjs&&t._loaded?t.clerkjs.openSignUp(e):t.preopenSignUp=e},this.closeSignUp=function(){t.clerkjs&&t._loaded?t.clerkjs.closeSignUp():t.preopenSignUp=null},this.mountSignIn=function(e,n){t.clerkjs&&t._loaded?t.clerkjs.mountSignIn(e,n):t.premountSignInNodes.set(e,n)},this.unmountSignIn=function(e){t.clerkjs&&t._loaded?t.clerkjs.unmountSignIn(e):t.premountSignInNodes.delete(e)},this.mountSignUp=function(e,n){t.clerkjs&&t._loaded?t.clerkjs.mountSignUp(e,n):t.premountSignUpNodes.set(e,n)},this.unmountSignUp=function(e){t.clerkjs&&t._loaded?t.clerkjs.unmountSignUp(e):t.premountSignUpNodes.delete(e)},this.mountUserProfile=function(e,n){t.clerkjs&&t._loaded?t.clerkjs.mountUserProfile(e,n):t.premountUserProfileNodes.set(e,n)},this.unmountUserProfile=function(e){t.clerkjs&&t._loaded?t.clerkjs.unmountUserProfile(e):t.premountUserProfileNodes.delete(e)},this.mountUserButton=function(e,n){t.clerkjs&&t._loaded?t.clerkjs.mountUserButton(e,n):t.premountUserButtonNodes.set(e,n)},this.unmountUserButton=function(e){t.clerkjs&&t._loaded?t.clerkjs.unmountUserButton(e):t.premountUserButtonNodes.delete(e)},this.addListener=function(e){var n=function(){var n;return null===(n=t.clerkjs)||void 0===n?void 0:n.addListener(e)};t.clerkjs?n():t.premountMethodCalls.set("addListener",n)},this.loadFromServer=function(e){"browser"===t.mode&&t.throwError("loadFromServer cannot be called in a browser context."),t.ssrData=JSON.stringify({client:t.client,session:t.session,token:e})},this.navigate=function(e){var n=function(){var n;return null===(n=t.clerkjs)||void 0===n?void 0:n.navigate(e)};t.clerkjs&&t._loaded?n():t.premountMethodCalls.set("navigate",n)},this.redirectToSignIn=function(){var e=function(){var e;return null===(e=t.clerkjs)||void 0===e?void 0:e.redirectToSignIn()};t.clerkjs&&t._loaded?e():t.premountMethodCalls.set("redirectToSignIn",e)},this.redirectToSignUp=function(){var e=function(){var e;return null===(e=t.clerkjs)||void 0===e?void 0:e.redirectToSignUp()};t.clerkjs&&t._loaded?e():t.premountMethodCalls.set("redirectToSignUp",e)},this.redirectToUserProfile=function(){var e=function(){var e;return null===(e=t.clerkjs)||void 0===e?void 0:e.redirectToUserProfile()};t.clerkjs&&t._loaded?e():t.premountMethodCalls.set("redirectToUserProfile",e)},this.signOut=function(e){try{var n=function(){var n;return null===(n=u.clerkjs)||void 0===n?void 0:n.signOut(e)};return u.clerkjs&&u._loaded?Promise.resolve(n()):(u.premountMethodCalls.set("signOut",n),Promise.resolve())}catch(e){return Promise.reject(e)}},this.signOutOne=function(e){try{var n=function(){var n;return null===(n=s.clerkjs)||void 0===n?void 0:n.signOutOne(e)};return s.clerkjs&&s._loaded?Promise.resolve(n()):(s.premountMethodCalls.set("signOutOne",n),Promise.resolve())}catch(e){return Promise.reject(e)}},this.frontendApi=e,this.options=n,this.ClerkConstructor=r,this.mode=i()?"browser":"server"}var n,r=e.prototype;return r.loadClerkJS=function(){var e,n,r=this;return this.frontendApi?this.ClerkConstructor?(window.Clerk=new this.ClerkConstructor(this.frontendApi),window.Clerk.load(this.options).then((function(){return r.hydrateClerkJS(window.Clerk)})).catch((function(e){return r.throwError(e.message||e)}))):(e=this.frontendApi,n=this.options.scriptUrl,new Promise((function(r,t){window.Clerk&&r(null),e||t("Clerk: Missing provider");var o=document.createElement("script"),i=function(e,n){if(n)return n;var r=function(e){return e.endsWith(".lclstage.dev")||e.endsWith(".stgstage.dev")||e.endsWith(".clerkstage.dev")}(e)?"staging":parseInt("1.13.0".split(".")[0],10);return"https://"+e+"/npm/@clerk/clerk-js@"+r+"/dist/clerk.browser.js"}(e,n);o.setAttribute("data-clerk-frontend-api",e),o.setAttribute("crossorigin","anonymous"),o.async=!0,document.body||t("Clerk: Missing <body> element."),o.addEventListener("load",(function(){return r(o)})),o.addEventListener("error",(function(){return t("Clerk: Failed to load Clerk")})),o.src=i,document.body.appendChild(o)}))).then((function(){if(window.Clerk)return window.Clerk.load(r.options);throw new Error("Failed to download latest Clerk JS")})).then((function(){return r.hydrateClerkJS(window.Clerk)})).catch((function(e){return r.throwError(e.message||e)})):(this.throwError("Clerk: You must add the frontendApi prop to your <ClerkProvider>"),Promise.resolve())},r.throwError=function(e){return console.error(e),Promise.resolve()},(n=[{key:"client",get:function(){return this.clerkjs?this.clerkjs.client:void 0}},{key:"session",get:function(){return this.clerkjs?this.clerkjs.session:void 0}},{key:"user",get:function(){return this.clerkjs?this.clerkjs.user:void 0}},{key:"environment",get:function(){return this.clerkjs?this.clerkjs.environment:void 0}}])&&function(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}(e.prototype,n),e}();function a(e){if(!e)throw new Error("Clerk: You must wrap your application in a <ClerkProvider> component.")}function c(e,n){if(!e)throw new Error(function(e){return"Clerk: You're calling "+e+" before there's a guarantee the client has been loaded. Call "+e+" from a child of <SignedIn>, <SignedOut>, or <ClerkLoaded>, or use the withClerk() HOC."}(n))}function d(e,n){if(!e)throw new Error(function(e){return"Clerk: You're calling "+e+" before there's a guarantee there's an active user. Call "+e+" from a child of <SignedIn> or use the withUser() HOC."}(n))}var f=Object.freeze({noGuarantees:Object.freeze({guaranteedLoaded:!1,guaranteedUser:!1}),guaranteedLoaded:Object.freeze({guaranteedLoaded:!0,guaranteedUser:!1}),guaranteedAll:Object.freeze({guaranteedLoaded:!0,guaranteedUser:!0})}),p=r.createContext(void 0);p.displayName="StructureContext";var m=r.createContext(void 0);m.displayName="IsomorphicClerkContext";var v=function(e,t){e.displayName=t=t||e.displayName||e.name||"Component";var o=function(t){var o=n.useContext(p),u=n.useContext(m);if(!i())return null;a(o),a(u);var s=u.value;return s?o.guaranteedLoaded?r.createElement(e,Object.assign({},t,{clerk:s})):s.client?r.createElement(p.Provider,{value:f.guaranteedLoaded},r.createElement(e,Object.assign({},t,{clerk:s}))):null:null};return o.displayName="withClerk("+t+")",o},g=r.createContext(void 0);g.displayName="ClientContext";var h=r.createContext(void 0);h.displayName="SessionContext";var k=r.createContext(void 0);function C(){var e=n.useContext(k);return a(e),e}k.displayName="UserContext";var S=function(e,t){e.displayName=t=t||e.displayName||e.name||"Component";var o=function(t){var o=n.useContext(p),u=n.useContext(k);if(!i())return null;a(o),a(u);var s=u.value;return o.guaranteedUser&&s?r.createElement(e,Object.assign({},t,{user:s})):s?r.createElement(p.Provider,{value:f.guaranteedAll},r.createElement(e,Object.assign({},t,{user:s}))):null};return o.displayName="withUser("+t+")",o};function U(e){var n=e.children,o=e.clerkLoaded,i=e.isomorphicClerk,u=r.useState({client:i.client,session:i.session,user:i.user}),s=u[0],l=u[1];r.useEffect((function(){return i.addListener((function(e){return l(t({},e))}))}),[]);var a=s.client,c=s.session,d=s.user,f=r.useMemo((function(){return{value:i}}),[o]),p=r.useMemo((function(){return{value:a}}),[a]),v=r.useMemo((function(){return{value:c}}),[c]),C=r.useMemo((function(){return{value:d}}),[d]);return r.createElement(m.Provider,{value:f},r.createElement(g.Provider,{value:p},r.createElement(h.Provider,{value:v},r.createElement(k.Provider,{value:C},r.createElement(r.Fragment,{key:c?c.id:"no-users"},n)))))}function j(e){var t=n.useMemo((function(){var n=e.frontendApi,r=void 0===n?"":n,t=e.Clerk,i=o(e,["frontendApi","Clerk"]);return new l(r,i,t)}),[]),i=n.useState(!1),u=i[0],s=i[1];return n.useEffect((function(){t.loadClerkJS().then((function(){return s(!0)}))}),[]),r.createElement(p.Provider,{value:f.noGuarantees},t instanceof l&&t.ssrData&&r.createElement("script",{type:"application/json","data-clerk":"SSR",dangerouslySetInnerHTML:{__html:t.ssrData}}),r.createElement(U,{isomorphicClerk:t,clerkLoaded:u},e.children))}var w=s(j,"ClerkProvider","Clerk: You've added multiple <ClerkProvider> components in your React component tree. Wrap your components in a single <ClerkProvider>."),E=r.memo((function(e){var t=e.props,o=e.mount,i=e.unmount,u=r.createRef();return n.useEffect((function(){return u.current&&o(u.current,t),function(){u.current&&i(u.current)}}),[]),r.createElement("div",{ref:u})}));E.displayName="ClerkPortal";var y=v((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(E,{mount:n.mountSignIn,unmount:n.unmountSignIn,props:t})}),"SignIn"),x=v((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(E,{mount:n.mountSignUp,unmount:n.unmountSignUp,props:t})}),"SignUp"),P=v((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(E,{mount:n.mountUserProfile,unmount:n.unmountUserProfile,props:t})}),"UserProfile"),I=v((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(E,{mount:n.mountUserButton,unmount:n.unmountUserButton,props:t})}),"UserButton"),b=S((function(e){return r.createElement(r.Fragment,null,e.children)}),"SignedIn"),O=v((function(e){var n=e.children;return null===C().value?r.createElement(r.Fragment,null,n):null}),"SignedOut"),N=v((function(e){return r.createElement(r.Fragment,null,e.children)}),"ClerkLoaded"),L=v((function(e){var n=e.clerk,t=n.client,o=n.environment,i=n.session,u=t.activeSessions&&t.activeSessions.length>0;return r.useEffect((function(){null===i&&u&&o?n.navigate(o.displayConfig.afterSignOutOneUrl):n.redirectToSignIn()}),[]),null}),"RedirectToSignIn"),M=v((function(e){var n=e.clerk;return r.useEffect((function(){n.redirectToSignUp()}),[]),null}),"RedirectToSignUp"),_=v((function(e){var n=e.clerk;return r.useEffect((function(){n.redirectToUserProfile()}),[]),null}),"redirectToUserProfile");exports.ClerkLoaded=N,exports.ClerkProvider=w,exports.RedirectToSignIn=L,exports.RedirectToSignUp=M,exports.RedirectToUserProfile=_,exports.SignIn=y,exports.SignUp=x,exports.SignedIn=b,exports.SignedOut=O,exports.UserButton=I,exports.UserProfile=P,exports.WithClerk=function(e){var n=e.children;return r.createElement(p.Consumer,null,(function(e){return r.createElement(m.Consumer,null,(function(t){if("function"!=typeof n)throw new Error("Clerk: Child of WithClerk must be a function.");a(e),a(t);var o=t.value;return o?e.guaranteedLoaded?n(o):o.client?r.createElement(p.Provider,{value:f.guaranteedLoaded},n(o)):null:null}))}))},exports.WithUser=function(e){var n=e.children;return r.createElement(p.Consumer,null,(function(e){return r.createElement(k.Consumer,null,(function(t){if("function"!=typeof n)throw new Error("Clerk: Child of WithClerk must be a function.");a(e),a(t);var o=t.value;return e.guaranteedUser&&o?n(o):o?r.createElement(p.Provider,{value:f.guaranteedAll},n(o)):null}))}))},exports.useClerk=function(){var e=n.useContext(p),r=n.useContext(m);return a(e),a(r),c(e.guaranteedLoaded,"useClerk()"),c(r.value,"useClerk()"),r.value},exports.useSession=function(){var e=n.useContext(p),t=r.useContext(h);return a(t),a(e),d(e.guaranteedUser,"useSession()"),t.value},exports.useSessionList=function(){var e=n.useContext(p),t=r.useContext(g);return a(t),a(e),c(e.guaranteedLoaded,"useSessionList()"),t.value.sessions},exports.useSignIn=function(){var e=n.useContext(p),t=r.useContext(g);return a(t),a(e),c(e.guaranteedLoaded,"useSignIn()"),t.value.signIn},exports.useSignUp=function(){var e=n.useContext(p),t=r.useContext(g);return a(t),a(e),c(e.guaranteedLoaded,"useSignUp()"),t.value.signUp},exports.useUser=function(){var e=n.useContext(p);a(e),d(e.guaranteedUser,"useUser()");var r=C();return d(r.value,"useUser()"),r.value},exports.withClerk=v,exports.withUser=S;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),r=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function o(e,n){if(null==e)return{};var r,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n.indexOf(r=i[t])>=0||(o[r]=e[r]);return o}function i(){return"undefined"!=typeof window}var u=new Map;function s(e,n,t){var o=function(o){return function(e,n,t){void 0===t&&(t=1),r.useEffect((function(){var r=u.get(e)||0;if(r==t)throw new Error(n);return u.set(e,r+1),function(){u.set(e,(u.get(e)||1)-1)}}),[])}(n,t),r.createElement(e,Object.assign({},o))};return o.displayName="withMaxAllowedInstancesGuard("+(e.displayName||e.name||n||"Component")+")",o}var l=function(){function e(e,n,r){var t=this,o=this,u=this,s=this;void 0===n&&(n={}),this.clerkjs=null,this.preopenSignIn=null,this.preopenSignUp=null,this.premountSignInNodes=new Map,this.premountSignUpNodes=new Map,this.premountUserProfileNodes=new Map,this.premountUserButtonNodes=new Map,this.premountMethodCalls=new Map,this._loaded=!1,this.ssrData=null,this.hydrateClerkJS=function(e){try{if(!e)throw new Error("Failed to hydrate latest Clerk JS");return o.clerkjs=e,o.premountMethodCalls.forEach((function(e){return e()})),null!==o.preopenSignIn&&e.openSignIn(o.preopenSignIn),null!==o.preopenSignUp&&e.openSignUp(o.preopenSignUp),o.premountSignInNodes.forEach((function(n,r){e.mountSignIn(r,n)})),o.premountSignUpNodes.forEach((function(n,r){e.mountSignUp(r,n)})),o.premountUserProfileNodes.forEach((function(n,r){e.mountUserProfile(r,n)})),o.premountUserButtonNodes.forEach((function(n,r){e.mountUserButton(r,n)})),o._loaded=!0,Promise.resolve(o.clerkjs)}catch(e){return Promise.reject(e)}},this.setSession=function(e,n){return t.clerkjs?t.clerkjs.setSession(e,n):Promise.reject()},this.openSignIn=function(e){t.clerkjs&&t._loaded?t.clerkjs.openSignIn(e):t.preopenSignIn=e},this.closeSignIn=function(){t.clerkjs&&t._loaded?t.clerkjs.closeSignIn():t.preopenSignIn=null},this.openSignUp=function(e){t.clerkjs&&t._loaded?t.clerkjs.openSignUp(e):t.preopenSignUp=e},this.closeSignUp=function(){t.clerkjs&&t._loaded?t.clerkjs.closeSignUp():t.preopenSignUp=null},this.mountSignIn=function(e,n){t.clerkjs&&t._loaded?t.clerkjs.mountSignIn(e,n):t.premountSignInNodes.set(e,n)},this.unmountSignIn=function(e){t.clerkjs&&t._loaded?t.clerkjs.unmountSignIn(e):t.premountSignInNodes.delete(e)},this.mountSignUp=function(e,n){t.clerkjs&&t._loaded?t.clerkjs.mountSignUp(e,n):t.premountSignUpNodes.set(e,n)},this.unmountSignUp=function(e){t.clerkjs&&t._loaded?t.clerkjs.unmountSignUp(e):t.premountSignUpNodes.delete(e)},this.mountUserProfile=function(e,n){t.clerkjs&&t._loaded?t.clerkjs.mountUserProfile(e,n):t.premountUserProfileNodes.set(e,n)},this.unmountUserProfile=function(e){t.clerkjs&&t._loaded?t.clerkjs.unmountUserProfile(e):t.premountUserProfileNodes.delete(e)},this.mountUserButton=function(e,n){t.clerkjs&&t._loaded?t.clerkjs.mountUserButton(e,n):t.premountUserButtonNodes.set(e,n)},this.unmountUserButton=function(e){t.clerkjs&&t._loaded?t.clerkjs.unmountUserButton(e):t.premountUserButtonNodes.delete(e)},this.addListener=function(e){var n=function(){var n;return null===(n=t.clerkjs)||void 0===n?void 0:n.addListener(e)};t.clerkjs?n():t.premountMethodCalls.set("addListener",n)},this.loadFromServer=function(e){"browser"===t.mode&&t.throwError("loadFromServer cannot be called in a browser context."),t.ssrData=JSON.stringify({client:t.client,session:t.session,token:e})},this.navigate=function(e){var n=function(){var n;return null===(n=t.clerkjs)||void 0===n?void 0:n.navigate(e)};t.clerkjs&&t._loaded?n():t.premountMethodCalls.set("navigate",n)},this.redirectToSignIn=function(){var e=function(){var e;return null===(e=t.clerkjs)||void 0===e?void 0:e.redirectToSignIn()};t.clerkjs&&t._loaded?e():t.premountMethodCalls.set("redirectToSignIn",e)},this.redirectToSignUp=function(){var e=function(){var e;return null===(e=t.clerkjs)||void 0===e?void 0:e.redirectToSignUp()};t.clerkjs&&t._loaded?e():t.premountMethodCalls.set("redirectToSignUp",e)},this.redirectToUserProfile=function(){var e=function(){var e;return null===(e=t.clerkjs)||void 0===e?void 0:e.redirectToUserProfile()};t.clerkjs&&t._loaded?e():t.premountMethodCalls.set("redirectToUserProfile",e)},this.signOut=function(e){try{var n=function(){var n;return null===(n=u.clerkjs)||void 0===n?void 0:n.signOut(e)};return u.clerkjs&&u._loaded?Promise.resolve(n()):(u.premountMethodCalls.set("signOut",n),Promise.resolve())}catch(e){return Promise.reject(e)}},this.signOutOne=function(e){try{var n=function(){var n;return null===(n=s.clerkjs)||void 0===n?void 0:n.signOutOne(e)};return s.clerkjs&&s._loaded?Promise.resolve(n()):(s.premountMethodCalls.set("signOutOne",n),Promise.resolve())}catch(e){return Promise.reject(e)}},this.frontendApi=e,this.options=n,this.ClerkConstructor=r,this.mode=i()?"browser":"server"}var n,r=e.prototype;return r.loadClerkJS=function(){var e,n,r=this;return this.frontendApi?this.ClerkConstructor?(window.Clerk=new this.ClerkConstructor(this.frontendApi),window.Clerk.load(this.options).then((function(){return r.hydrateClerkJS(window.Clerk)})).catch((function(e){return r.throwError(e.message||e)}))):(e=this.frontendApi,n=this.options.scriptUrl,new Promise((function(r,t){window.Clerk&&r(null),e||t("Clerk: Missing provider");var o=document.createElement("script"),i=function(e,n){if(n)return n;var r=function(e){return e.endsWith(".lclstage.dev")||e.endsWith(".stgstage.dev")||e.endsWith(".clerkstage.dev")}(e)?"staging":parseInt("1.13.1-staging.0".split(".")[0],10);return"https://"+e+"/npm/@clerk/clerk-js@"+r+"/dist/clerk.browser.js"}(e,n);o.setAttribute("data-clerk-frontend-api",e),o.setAttribute("crossorigin","anonymous"),o.async=!0,document.body||t("Clerk: Missing <body> element."),o.addEventListener("load",(function(){return r(o)})),o.addEventListener("error",(function(){return t("Clerk: Failed to load Clerk")})),o.src=i,document.body.appendChild(o)}))).then((function(){if(window.Clerk)return window.Clerk.load(r.options);throw new Error("Failed to download latest Clerk JS")})).then((function(){return r.hydrateClerkJS(window.Clerk)})).catch((function(e){return r.throwError(e.message||e)})):(this.throwError("Clerk: You must add the frontendApi prop to your <ClerkProvider>"),Promise.resolve())},r.throwError=function(e){return console.error(e),Promise.resolve()},(n=[{key:"client",get:function(){return this.clerkjs?this.clerkjs.client:void 0}},{key:"session",get:function(){return this.clerkjs?this.clerkjs.session:void 0}},{key:"user",get:function(){return this.clerkjs?this.clerkjs.user:void 0}},{key:"environment",get:function(){return this.clerkjs?this.clerkjs.environment:void 0}}])&&function(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}(e.prototype,n),e}();function a(e){if(!e)throw new Error("Clerk: You must wrap your application in a <ClerkProvider> component.")}function c(e,n){if(!e)throw new Error(function(e){return"Clerk: You're calling "+e+" before there's a guarantee the client has been loaded. Call "+e+" from a child of <SignedIn>, <SignedOut>, or <ClerkLoaded>, or use the withClerk() HOC."}(n))}function d(e,n){if(!e)throw new Error(function(e){return"Clerk: You're calling "+e+" before there's a guarantee there's an active user. Call "+e+" from a child of <SignedIn> or use the withUser() HOC."}(n))}var p=Object.freeze({noGuarantees:Object.freeze({guaranteedLoaded:!1,guaranteedUser:!1}),guaranteedLoaded:Object.freeze({guaranteedLoaded:!0,guaranteedUser:!1}),guaranteedAll:Object.freeze({guaranteedLoaded:!0,guaranteedUser:!0})}),f=r.createContext(void 0);f.displayName="StructureContext";var m=r.createContext(void 0);m.displayName="IsomorphicClerkContext";var v=function(e,t){e.displayName=t=t||e.displayName||e.name||"Component";var o=function(t){var o=n.useContext(f),u=n.useContext(m);if(!i())return null;a(o),a(u);var s=u.value;return s?o.guaranteedLoaded?r.createElement(e,Object.assign({},t,{clerk:s})):s.client?r.createElement(f.Provider,{value:p.guaranteedLoaded},r.createElement(e,Object.assign({},t,{clerk:s}))):null:null};return o.displayName="withClerk("+t+")",o},h=r.createContext(void 0);h.displayName="ClientContext";var g=r.createContext(void 0);g.displayName="SessionContext";var k=r.createContext(void 0);function C(){var e=n.useContext(k);return a(e),e}k.displayName="UserContext";var S=function(e,t){e.displayName=t=t||e.displayName||e.name||"Component";var o=function(t){var o=n.useContext(f),u=n.useContext(k);if(!i())return null;a(o),a(u);var s=u.value;return o.guaranteedUser&&s?r.createElement(e,Object.assign({},t,{user:s})):s?r.createElement(f.Provider,{value:p.guaranteedAll},r.createElement(e,Object.assign({},t,{user:s}))):null};return o.displayName="withUser("+t+")",o};function U(e){var n=e.children,o=e.clerkLoaded,i=e.isomorphicClerk,u=r.useState({client:i.client,session:i.session,user:i.user}),s=u[0],l=u[1];r.useEffect((function(){return i.addListener((function(e){return l(t({},e))}))}),[]);var a=s.client,c=s.session,d=s.user,p=r.useMemo((function(){return{value:i}}),[o]),f=r.useMemo((function(){return{value:a}}),[a]),v=r.useMemo((function(){return{value:c}}),[c]),C=r.useMemo((function(){return{value:d}}),[d]);return r.createElement(m.Provider,{value:p},r.createElement(h.Provider,{value:f},r.createElement(g.Provider,{value:v},r.createElement(k.Provider,{value:C},r.createElement(r.Fragment,{key:c?c.id:"no-users"},n)))))}function j(e){var t=n.useMemo((function(){var n=e.frontendApi,r=void 0===n?"":n,t=e.Clerk,i=o(e,["frontendApi","Clerk"]);return new l(r,i,t)}),[]),i=n.useState(!1),u=i[0],s=i[1];return n.useEffect((function(){t.loadClerkJS().then((function(){return s(!0)}))}),[]),r.createElement(f.Provider,{value:p.noGuarantees},t instanceof l&&t.ssrData&&r.createElement("script",{type:"application/json","data-clerk":"SSR",dangerouslySetInnerHTML:{__html:t.ssrData}}),r.createElement(U,{isomorphicClerk:t,clerkLoaded:u},e.children))}var w=s(j,"ClerkProvider","Clerk: You've added multiple <ClerkProvider> components in your React component tree. Wrap your components in a single <ClerkProvider>."),y=function(e){var n,t;function o(){var n;return(n=e.apply(this,arguments)||this).portalRef=r.createRef(),n}t=e,(n=o).prototype=Object.create(t.prototype),n.prototype.constructor=n,n.__proto__=t;var i=o.prototype;return i.componentDidMount=function(){this.portalRef.current&&this.props.mount(this.portalRef.current,this.props.props)},i.componentWillUnmount=function(){this.portalRef.current&&this.props.unmount(this.portalRef.current)},i.render=function(){return r.createElement("div",{ref:this.portalRef})},o}(r.PureComponent),E=v((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(y,{mount:n.mountSignIn,unmount:n.unmountSignIn,props:t})}),"SignIn"),x=v((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(y,{mount:n.mountSignUp,unmount:n.unmountSignUp,props:t})}),"SignUp"),P=v((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(y,{mount:n.mountUserProfile,unmount:n.unmountUserProfile,props:t})}),"UserProfile"),I=v((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(y,{mount:n.mountUserButton,unmount:n.unmountUserButton,props:t})}),"UserButton"),b=S((function(e){return r.createElement(r.Fragment,null,e.children)}),"SignedIn"),O=v((function(e){var n=e.children;return null===C().value?r.createElement(r.Fragment,null,n):null}),"SignedOut"),N=v((function(e){return r.createElement(r.Fragment,null,e.children)}),"ClerkLoaded"),_=v((function(e){var n=e.clerk,t=n.client,o=n.environment,i=n.session,u=t.activeSessions&&t.activeSessions.length>0;return r.useEffect((function(){null===i&&u&&o?n.navigate(o.displayConfig.afterSignOutOneUrl):n.redirectToSignIn()}),[]),null}),"RedirectToSignIn"),L=v((function(e){var n=e.clerk;return r.useEffect((function(){n.redirectToSignUp()}),[]),null}),"RedirectToSignUp"),M=v((function(e){var n=e.clerk;return r.useEffect((function(){n.redirectToUserProfile()}),[]),null}),"redirectToUserProfile");exports.ClerkLoaded=N,exports.ClerkProvider=w,exports.RedirectToSignIn=_,exports.RedirectToSignUp=L,exports.RedirectToUserProfile=M,exports.SignIn=E,exports.SignUp=x,exports.SignedIn=b,exports.SignedOut=O,exports.UserButton=I,exports.UserProfile=P,exports.WithClerk=function(e){var n=e.children;return r.createElement(f.Consumer,null,(function(e){return r.createElement(m.Consumer,null,(function(t){if("function"!=typeof n)throw new Error("Clerk: Child of WithClerk must be a function.");a(e),a(t);var o=t.value;return o?e.guaranteedLoaded?n(o):o.client?r.createElement(f.Provider,{value:p.guaranteedLoaded},n(o)):null:null}))}))},exports.WithUser=function(e){var n=e.children;return r.createElement(f.Consumer,null,(function(e){return r.createElement(k.Consumer,null,(function(t){if("function"!=typeof n)throw new Error("Clerk: Child of WithClerk must be a function.");a(e),a(t);var o=t.value;return e.guaranteedUser&&o?n(o):o?r.createElement(f.Provider,{value:p.guaranteedAll},n(o)):null}))}))},exports.useClerk=function(){var e=n.useContext(f),r=n.useContext(m);return a(e),a(r),c(e.guaranteedLoaded,"useClerk()"),c(r.value,"useClerk()"),r.value},exports.useSession=function(){var e=n.useContext(f),t=r.useContext(g);return a(t),a(e),d(e.guaranteedUser,"useSession()"),t.value},exports.useSessionList=function(){var e=n.useContext(f),t=r.useContext(h);return a(t),a(e),c(e.guaranteedLoaded,"useSessionList()"),t.value.sessions},exports.useSignIn=function(){var e=n.useContext(f),t=r.useContext(h);return a(t),a(e),c(e.guaranteedLoaded,"useSignIn()"),t.value.signIn},exports.useSignUp=function(){var e=n.useContext(f),t=r.useContext(h);return a(t),a(e),c(e.guaranteedLoaded,"useSignUp()"),t.value.signUp},exports.useUser=function(){var e=n.useContext(f);a(e),d(e.guaranteedUser,"useUser()");var r=C();return d(r.value,"useUser()"),r.value},exports.withClerk=v,exports.withUser=S;
 //# sourceMappingURL=clerk-react.cjs.production.min.js.map

dist/clerk-react.esm.js

@@ -37,2 +37,8 @@ import React, { useContext, useMemo, useState, useEffect } from 'react';
 
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -57,3 +63,3 @@ if (source == null) return {};
 
-var version = "1.13.0";
+var version = "1.13.1-staging.0";
 
@@ -868,27 +874,62 @@ var FAILED_TO_LOAD_ERROR = 'Clerk: Failed to load Clerk';
 
-var Portal = /*#__PURE__*/React.memo(function (_ref) {
-  var props = _ref.props,
-      mount = _ref.mount,
-      unmount = _ref.unmount;
-  var portalRef = React.createRef();
-  useEffect(function () {
-    if (portalRef.current) {
-      mount(portalRef.current, props);
+// lifecycle props to be invoked correctly. Replacing the class component with a
+// functional component wrapped with a React.memo is not identical to the original
+// class implementation due to React intricacies such as the useEffect’s cleanup
+// seems to run AFTER unmount, while componentWillUnmount runs BEFORE.
+// More information can be found at https://clerkinc.slack.com/archives/C015S0BGH8R/p1624891993016300
+// The function Portal implementation is commented out for future reference.
+// const Portal = React.memo(({ props, mount, unmount }: MountProps) => {
+//   const portalRef = React.createRef<HTMLDivElement>();
+//   useEffect(() => {
+//     if (portalRef.current) {
+//       mount(portalRef.current, props);
+//     }
+//     return () => {
+//       if (portalRef.current) {
+//         unmount(portalRef.current);
+//       }
+//     };
+//   }, []);
+//   return <div ref={portalRef} />;
+// });
+// Portal.displayName = 'ClerkPortal';
+
+var Portal = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(Portal, _React$PureComponent);
+
+  function Portal() {
+    var _this;
+
+    _this = _React$PureComponent.apply(this, arguments) || this;
+    _this.portalRef = React.createRef();
+    return _this;
+  }
+
+  var _proto = Portal.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.portalRef.current) {
+      this.props.mount(this.portalRef.current, this.props.props);
     }
+  };
 
-    return function () {
-      if (portalRef.current) {
-        unmount(portalRef.current);
-      }
-    };
-  }, []);
-  return React.createElement("div", {
-    ref: portalRef
-  });
-});
-Portal.displayName = 'ClerkPortal';
-var SignIn = /*#__PURE__*/withClerk(function (_ref2) {
-  var clerk = _ref2.clerk,
-      props = _objectWithoutPropertiesLoose(_ref2, ["clerk"]);
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.portalRef.current) {
+      this.props.unmount(this.portalRef.current);
+    }
+  };
 
+  _proto.render = function render() {
+    return React.createElement("div", {
+      ref: this.portalRef
+    });
+  };
+
+  return Portal;
+}(React.PureComponent);
+
+var SignIn = /*#__PURE__*/withClerk(function (_ref) {
+  var clerk = _ref.clerk,
+      props = _objectWithoutPropertiesLoose(_ref, ["clerk"]);
+
   return React.createElement(Portal, {
@@ -900,5 +941,5 @@ mount: clerk.mountSignIn,
 }, 'SignIn');
-var SignUp = /*#__PURE__*/withClerk(function (_ref3) {
-  var clerk = _ref3.clerk,
-      props = _objectWithoutPropertiesLoose(_ref3, ["clerk"]);
+var SignUp = /*#__PURE__*/withClerk(function (_ref2) {
+  var clerk = _ref2.clerk,
+      props = _objectWithoutPropertiesLoose(_ref2, ["clerk"]);
 
@@ -911,5 +952,5 @@ return React.createElement(Portal, {
 }, 'SignUp');
-var UserProfile = /*#__PURE__*/withClerk(function (_ref4) {
-  var clerk = _ref4.clerk,
-      props = _objectWithoutPropertiesLoose(_ref4, ["clerk"]);
+var UserProfile = /*#__PURE__*/withClerk(function (_ref3) {
+  var clerk = _ref3.clerk,
+      props = _objectWithoutPropertiesLoose(_ref3, ["clerk"]);
 
@@ -922,5 +963,5 @@ return React.createElement(Portal, {
 }, 'UserProfile');
-var UserButton = /*#__PURE__*/withClerk(function (_ref5) {
-  var clerk = _ref5.clerk,
-      props = _objectWithoutPropertiesLoose(_ref5, ["clerk"]);
+var UserButton = /*#__PURE__*/withClerk(function (_ref4) {
+  var clerk = _ref4.clerk,
+      props = _objectWithoutPropertiesLoose(_ref4, ["clerk"]);
 
@@ -927,0 +968,0 @@ return React.createElement(Portal, {

package.json

 {
   "name": "@clerk/clerk-react",
-  "version": "1.13.0",
+  "version": "1.13.1-staging.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Clerk.dev React library",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

253970

increased by2.74%

Lines of code

2059

increased by3.31%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes