@clerk/clerk-react - npm Package Compare versions

Comparing version 0.1.1-3 to 0.1.1-4

dist/clerk-react.cjs.development.js

@@ -34,2 +34,17 @@ 'use strict';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 var browser = typeof window !== 'undefined';
@@ -126,2 +141,6 @@ var isomorphicClerk = null;
         guaranteedLoaded: false,
+        openSignIn: this.clerk.openSignIn.bind(this.clerk),
+        closeSignIn: this.clerk.closeSignIn.bind(this.clerk),
+        openSignUp: this.clerk.openSignUp.bind(this.clerk),
+        closeSignUp: this.clerk.closeSignUp.bind(this.clerk),
         mountSignIn: this.clerk.mountSignIn.bind(this.clerk),
@@ -215,5 +234,4 @@ unmountSignIn: this.clerk.unmountSignIn.bind(this.clerk),
   });
-}; // Use PureComponent to prevent unnecessary rerendering
+};
 
-
 var Portal = /*#__PURE__*/function (_React$PureComponent2) {
@@ -233,3 +251,3 @@ _inheritsLoose(Portal, _React$PureComponent2);
   _proto2.componentDidMount = function componentDidMount() {
-    if (this.portalRef.current && this.props.mount) {
+    if (this.portalRef.current) {
       this.props.mount(this.portalRef.current, this.props.props);
@@ -240,3 +258,3 @@ }
   _proto2.componentWillUnmount = function componentWillUnmount() {
-    if (this.portalRef.current && this.props.unmount) {
+    if (this.portalRef.current) {
       this.props.unmount(this.portalRef.current);
@@ -255,7 +273,24 @@ }
 
-var SignIn = /*#__PURE__*/withClerk(function (props) {
-  var _props$clerk = props.clerk,
-      mountSignIn = _props$clerk.mountSignIn,
-      unmountSignIn = _props$clerk.unmountSignIn;
+var Modal = function Modal(_ref3) {
+  var open = _ref3.open,
+      close = _ref3.close,
+      props = _ref3.props;
+  React.useEffect(function () {
+    open(props);
+    return function () {
+      close();
+    };
+  });
+  return null;
+};
 
+var SignIn = /*#__PURE__*/withClerk(function (_ref4) {
+  var clerk = _ref4.clerk,
+      props = _objectWithoutPropertiesLoose(_ref4, ["clerk"]);
+
+  var mountSignIn = clerk.mountSignIn,
+      unmountSignIn = clerk.unmountSignIn,
+      openSignIn = clerk.openSignIn,
+      closeSignIn = clerk.closeSignIn;
+
   if (props.mode && props.mode === 'mounted') {
@@ -268,11 +303,18 @@ return React__default.createElement(Portal, {
   } else {
-    console.warn('Modal sign in not implemented yet.');
-    return null;
+    return React__default.createElement(Modal, {
+      open: openSignIn,
+      close: closeSignIn,
+      props: props
+    });
   }
 }, 'SignIn');
-var SignUp = /*#__PURE__*/withClerk(function (props) {
-  var _props$clerk2 = props.clerk,
-      mountSignUp = _props$clerk2.mountSignUp,
-      unmountSignUp = _props$clerk2.unmountSignUp;
+var SignUp = /*#__PURE__*/withClerk(function (_ref5) {
+  var clerk = _ref5.clerk,
+      props = _objectWithoutPropertiesLoose(_ref5, ["clerk"]);
 
+  var mountSignUp = clerk.mountSignUp,
+      unmountSignUp = clerk.unmountSignUp,
+      openSignUp = clerk.openSignUp,
+      closeSignUp = clerk.closeSignUp;
+
   if (props.mode && props.mode === 'mounted') {
@@ -285,10 +327,15 @@ return React__default.createElement(Portal, {
   } else {
-    console.warn('Modal sign up not implemented yet.');
-    return null;
+    return React__default.createElement(Modal, {
+      open: openSignUp,
+      close: closeSignUp,
+      props: props
+    });
   }
 }, 'SignUp');
-var UserProfile = /*#__PURE__*/withClerk(function (props) {
-  var _props$clerk3 = props.clerk,
-      mountUserProfile = _props$clerk3.mountUserProfile,
-      unmountUserProfile = _props$clerk3.unmountUserProfile;
+var UserProfile = /*#__PURE__*/withClerk(function (_ref6) {
+  var clerk = _ref6.clerk,
+      props = _objectWithoutPropertiesLoose(_ref6, ["clerk"]);
+
+  var mountUserProfile = clerk.mountUserProfile,
+      unmountUserProfile = clerk.unmountUserProfile;
   return React__default.createElement(Portal, {
@@ -300,6 +347,8 @@ mount: mountUserProfile,
 }, 'UserProfile');
-var UserButton = /*#__PURE__*/withClerk(function (props) {
-  var _props$clerk4 = props.clerk,
-      mountUserButton = _props$clerk4.mountUserButton,
-      unmountUserButton = _props$clerk4.unmountUserButton;
+var UserButton = /*#__PURE__*/withClerk(function (_ref7) {
+  var clerk = _ref7.clerk,
+      props = _objectWithoutPropertiesLoose(_ref7, ["clerk"]);
+
+  var mountUserButton = clerk.mountUserButton,
+      unmountUserButton = clerk.unmountUserButton;
   return React__default.createElement(Portal, {
@@ -311,16 +360,16 @@ mount: mountUserButton,
 }, 'UserButton');
-var SignedIn = /*#__PURE__*/withClerk(function (_ref3) {
-  var children = _ref3.children,
-      clerk = _ref3.clerk;
+var SignedIn = /*#__PURE__*/withClerk(function (_ref8) {
+  var children = _ref8.children,
+      clerk = _ref8.clerk;
   var user = clerk.user;
   return user ? React__default.createElement(React__default.Fragment, null, children) : null;
 }, 'SignedIn');
-var SignedOut = /*#__PURE__*/withClerk(function (_ref4) {
-  var children = _ref4.children,
-      clerk = _ref4.clerk;
+var SignedOut = /*#__PURE__*/withClerk(function (_ref9) {
+  var children = _ref9.children,
+      clerk = _ref9.clerk;
   var user = clerk.user;
   return user ? null : React__default.createElement(React__default.Fragment, null, children);
 }, 'SignedOut');
-var SessionLoaded = /*#__PURE__*/withClerk(function (_ref5) {
-  var children = _ref5.children;
+var SessionLoaded = /*#__PURE__*/withClerk(function (_ref10) {
+  var children = _ref10.children;
   return React__default.createElement(React__default.Fragment, null, children);
@@ -343,2 +392,4 @@ }, 'SessionLoaded');
 
+    this.preopenSignIn = null;
+    this.preopenSignUp = null;
     this.premountSignInNodes = new Map();
@@ -349,2 +400,34 @@ this.premountSignUpNodes = new Map();
 
+    this.openSignIn = function (props) {
+      if (_this3.clerkjs && _this3.componentsReady) {
+        _this3.clerkjs.openSignIn(props);
+      } else {
+        _this3.preopenSignIn = props;
+      }
+    };
+
+    this.closeSignIn = function () {
+      if (_this3.clerkjs && _this3.componentsReady) {
+        _this3.clerkjs.closeSignIn();
+      } else {
+        _this3.preopenSignIn = null;
+      }
+    };
+
+    this.openSignUp = function (props) {
+      if (_this3.clerkjs && _this3.componentsReady) {
+        _this3.clerkjs.openSignUp(props);
+      } else {
+        _this3.preopenSignUp = props;
+      }
+    };
+
+    this.closeSignUp = function () {
+      if (_this3.clerkjs && _this3.componentsReady) {
+        _this3.clerkjs.closeSignUp();
+      } else {
+        _this3.preopenSignUp = null;
+      }
+    };
+
     this.mountSignIn = function (node, props) {
@@ -503,2 +586,10 @@ if (_this3.clerkjs && _this3.componentsReady) {
       return Promise.resolve(clerkjs.onComponentsReady).then(function () {
+        if (_this5.preopenSignIn !== null) {
+          clerkjs.openSignIn(_this5.preopenSignIn);
+        }
+
+        if (_this5.preopenSignUp !== null) {
+          clerkjs.openSignUp(_this5.preopenSignUp);
+        }
+
         _this5.premountSignInNodes.forEach(function (props, node) {
@@ -505,0 +596,0 @@ clerkjs.mountSignIn(node, props);

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

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function s(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}var o="undefined"!=typeof window,i=null,u=t.createContext({});u.displayName="ClerkContext";var l=function(e){function n(n){var t;if((t=e.call(this,n)||this).listener=function(e){var n=e.userSession;t.setState({session:e.session,userSession:n,user:n?n.user:null})},n.clerk)t.clerk=n.clerk;else if(i)t.clerk=i;else{if(o)throw new Error("ClerkContext is being used in a browser context but loadClerk hasn't been called.");t.clerk=null}return t.state=t.clerk?{session:t.clerk.session,userSession:t.clerk.userSession,user:t.clerk.userSession?t.clerk.userSession.user:null}:{session:null,userSession:null,user:null},t}s(n,e);var r=n.prototype;return r.debug=function(){for(var e,n=arguments.length,t=new Array(n),r=0;r<n;r++)t[r]=arguments[r];(e=console).log.apply(e,[this.props.byClerkJS?" CLERK: ":"CLIENT:"].concat(t))},r.componentDidMount=function(){this.clerk&&this.clerk.addListener(this.listener)},r.defaultInitialUser=function(e){var n=e.userSessions.find((function(e){return"active"===e.status}));return n?n.user:null},r.render=function(){var e=this.state,n=e.session,r=e.user,s=e.userSession;return this.clerk?t.createElement(u.Provider,{value:{guaranteedLoaded:!1,mountSignIn:this.clerk.mountSignIn.bind(this.clerk),unmountSignIn:this.clerk.unmountSignIn.bind(this.clerk),mountSignUp:this.clerk.mountSignUp.bind(this.clerk),unmountSignUp:this.clerk.unmountSignUp.bind(this.clerk),mountUserButton:this.clerk.mountUserButton.bind(this.clerk),unmountUserButton:this.clerk.unmountUserButton.bind(this.clerk),mountUserProfile:this.clerk.mountUserProfile.bind(this.clerk),unmountUserProfile:this.clerk.unmountUserProfile.bind(this.clerk),setUserSession:this.clerk.setUserSession.bind(this.clerk),session:n,user:r,userSession:s}},this.clerk instanceof g&&this.clerk.ssrData&&t.createElement("script",{type:"application/json","data-clerk":this.clerk.ssrKey,dangerouslySetInnerHTML:{__html:this.clerk.ssrData}}),t.createElement(t.Fragment,{key:this.state.userSession?this.state.userSession.id:"no-usrses"},this.props.children)):this.props.children},n}(t.PureComponent),c=function(e,s){e.displayName=s=s||e.displayName||e.name||"Component";var o=function(s){var o=n.useContext(u);return o.guaranteedLoaded?t.createElement(e,Object.assign({},s,{clerk:o})):o.session?t.createElement(u.Provider,{value:r({},o,{guaranteedLoaded:!0})},t.createElement(e,Object.assign({},s,{clerk:o}))):null};return o.displayName="withClerk("+s+")",o},a=function(e){function n(){var n;return(n=e.apply(this,arguments)||this).portalRef=t.createRef(),n}s(n,e);var r=n.prototype;return r.componentDidMount=function(){this.portalRef.current&&this.props.mount&&this.props.mount(this.portalRef.current,this.props.props)},r.componentWillUnmount=function(){this.portalRef.current&&this.props.unmount&&this.props.unmount(this.portalRef.current)},r.render=function(){return t.createElement("div",{ref:this.portalRef})},n}(t.PureComponent),d=c((function(e){var n=e.clerk;return e.mode&&"mounted"===e.mode?t.createElement(a,{mount:n.mountSignIn,unmount:n.unmountSignIn,props:e}):(console.warn("Modal sign in not implemented yet."),null)}),"SignIn"),p=c((function(e){var n=e.clerk;return e.mode&&"mounted"===e.mode?t.createElement(a,{mount:n.mountSignUp,unmount:n.unmountSignUp,props:e}):(console.warn("Modal sign up not implemented yet."),null)}),"SignUp"),m=c((function(e){var n=e.clerk;return t.createElement(a,{mount:n.mountUserProfile,unmount:n.unmountUserProfile,props:e})}),"UserProfile"),h=c((function(e){var n=e.clerk;return t.createElement(a,{mount:n.mountUserButton,unmount:n.unmountUserButton,props:e})}),"UserButton"),f=c((function(e){return e.clerk.user?t.createElement(t.Fragment,null,e.children):null}),"SignedIn"),k=c((function(e){return e.clerk.user?null:t.createElement(t.Fragment,null,e.children)}),"SignedOut"),S=c((function(e){return t.createElement(t.Fragment,null,e.children)}),"SessionLoaded"),g=function(){function e(e,n){var t=this;if(this.listeners=[],this.clerkjs=null,this.componentsReady=!1,this.ssrKey=null,this.ssrData=null,this.session=null,this.userSession=null,this.setUserSession=function(){},this.premountSignInNodes=new Map,this.premountSignUpNodes=new Map,this.premountUserProfileNodes=new Map,this.premountUserButtonNodes=new Map,this.mountSignIn=function(e,n){t.clerkjs&&t.componentsReady?t.clerkjs.mountSignIn(e,n):t.premountSignInNodes.set(e,n)},this.unmountSignIn=function(e){t.clerkjs&&t.componentsReady?t.clerkjs.unmountSignIn(e):t.premountSignInNodes.delete(e)},this.mountSignUp=function(e,n){t.clerkjs&&t.componentsReady?t.clerkjs.mountSignUp(e,n):t.premountSignUpNodes.set(e,n)},this.unmountSignUp=function(e){t.clerkjs&&t.componentsReady?t.clerkjs.unmountSignUp(e):t.premountSignUpNodes.delete(e)},this.mountUserProfile=function(e,n){t.clerkjs&&t.componentsReady?t.clerkjs.mountUserProfile(e,n):t.premountUserProfileNodes.set(e,n)},this.unmountUserProfile=function(e){t.clerkjs&&t.componentsReady?t.clerkjs.unmountUserProfile(e):t.premountUserProfileNodes.delete(e)},this.mountUserButton=function(e,n){t.clerkjs&&t.componentsReady?t.clerkjs.mountUserButton(e,n):t.premountUserButtonNodes.set(e,n)},this.unmountUserButton=function(e){t.clerkjs&&t.componentsReady?t.clerkjs.unmountUserButton(e):t.premountUserButtonNodes.delete(e)},this.provider=e,this.options=r({patchFetch:!0,baseUrl:"https://js.clerk.dev",ssrKey:null},n),this.ssrKey=this.options.ssrKey,"undefined"==typeof window)this.mode="server";else{if(this.mode="browser",this.ssrKey){var s=document.querySelector('script[data-clerk="'+this.ssrKey+'"]');if(s){this.ssrData=s.innerHTML;var o=JSON.parse(this.ssrData);this.session=o.session,this.userSession=o.userSession}}if(window.Clerk)window.Clerk.init(),this.setClerkJS(window.Clerk);else{var i=document.querySelector('script[src="'+this.getScriptUrl()+'"]')||this.injectScript();i.addEventListener("load",(function(){if(!window.Clerk)throw new Error("Clerk: IsomorphicClerk failed to find window.Clerk");window.Clerk.init(),t.setClerkJS(window.Clerk)})),i.addEventListener("error",(function(e){throw console.error(e),new Error("Clerk: Failed to load Clerk")}))}}}var n=e.prototype;return n.addListener=function(e){this.listeners.push(e)},n.loadFromServer=function(e){if("browser"===this.mode)throw new Error("loadFromServer cannot be called in a browser context.");if(null===this.ssrKey)throw new Error("loadFromServer cannot be called because `ssrKey` is null.  Please pass `ssrKey` in the `options` argument of IsomorphicClerk.");this.session={},this.userSession={user:{}},this.session={},this.userSession=null,this.ssrData=JSON.stringify({session:this.session,userSession:this.userSession,token:e})},n.setClerkJS=function(e){try{var n=this;return n.clerkjs=e,n.userSession=e.userSession,n.session=e.session,n.setUserSession=e.setUserSession.bind(n.clerkjs),n.addListener=e.addListener.bind(n.clerkjs),n.listeners.forEach((function(n){e.addListener(n)})),Promise.resolve(e.onComponentsReady).then((function(){n.premountSignInNodes.forEach((function(n,t){e.mountSignIn(t,n)})),n.premountSignUpNodes.forEach((function(n,t){e.mountSignUp(t,n)})),n.premountUserProfileNodes.forEach((function(n,t){e.mountUserProfile(t,n)})),n.componentsReady=!0}))}catch(e){return Promise.reject(e)}},n.getScriptUrl=function(){return this.options.baseUrl+"/v1/clerk.js"},n.injectScript=function(){var e=document.createElement("script");if(e.src=this.getScriptUrl(),e.setAttribute("data-provider",this.provider),e.setAttribute("crossorigin","anonymous"),e.async=!0,!document.body)throw new Error("Clerk requires a <body> element.");return document.body.appendChild(e),e},e}();exports.ClerkContext=l,exports.SessionLoaded=S,exports.SignIn=d,exports.SignUp=p,exports.SignedIn=f,exports.SignedOut=k,exports.UserButton=h,exports.UserProfile=m,exports.WithClerk=function(e){var n=e.children;return t.createElement(u.Consumer,null,(function(e){if("function"==typeof n)return e.guaranteedLoaded?n(e):e.session?t.createElement(u.Provider,{value:r({},e,{guaranteedLoaded:!0})},n(e)):null;throw new Error("Child of WithClerk must be a function.")}))},exports.isClerkAPIError=function(e){return"clerkError"in e},exports.loadClerk=function(e,n){i=new g(e,r({},n,{ssrKey:"CLERK_IDENTITY_DATA"}))},exports.loadSessionFromToken=function(e){if(null===i)throw new Error("You must call loadClerk before loadSessionFromToken.");i.loadFromServer&&i.loadFromServer(e)},exports.useClerk=function(){var e=n.useContext(u);if(e.guaranteedLoaded)return e;throw new Error("Clerk: You're calling useClerk() before there's a guarantee the session has been loaded. Call useClerk() from a child of <SignedIn>, <SignedOut>, or <SessionLoaded>, or use the withClerk() HOC.")},exports.withClerk=c;
+"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 s(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function o(e,n){if(null==e)return{};var r,t,s={},o=Object.keys(e);for(t=0;t<o.length;t++)n.indexOf(r=o[t])>=0||(s[r]=e[r]);return s}var i="undefined"!=typeof window,u=null,l=r.createContext({});l.displayName="ClerkContext";var c=function(e){function n(n){var r;if((r=e.call(this,n)||this).listener=function(e){var n=e.userSession;r.setState({session:e.session,userSession:n,user:n?n.user:null})},n.clerk)r.clerk=n.clerk;else if(u)r.clerk=u;else{if(i)throw new Error("ClerkContext is being used in a browser context but loadClerk hasn't been called.");r.clerk=null}return r.state=r.clerk?{session:r.clerk.session,userSession:r.clerk.userSession,user:r.clerk.userSession?r.clerk.userSession.user:null}:{session:null,userSession:null,user:null},r}s(n,e);var t=n.prototype;return t.debug=function(){for(var e,n=arguments.length,r=new Array(n),t=0;t<n;t++)r[t]=arguments[t];(e=console).log.apply(e,[this.props.byClerkJS?" CLERK: ":"CLIENT:"].concat(r))},t.componentDidMount=function(){this.clerk&&this.clerk.addListener(this.listener)},t.defaultInitialUser=function(e){var n=e.userSessions.find((function(e){return"active"===e.status}));return n?n.user:null},t.render=function(){var e=this.state,n=e.session,t=e.user,s=e.userSession;return this.clerk?r.createElement(l.Provider,{value:{guaranteedLoaded:!1,openSignIn:this.clerk.openSignIn.bind(this.clerk),closeSignIn:this.clerk.closeSignIn.bind(this.clerk),openSignUp:this.clerk.openSignUp.bind(this.clerk),closeSignUp:this.clerk.closeSignUp.bind(this.clerk),mountSignIn:this.clerk.mountSignIn.bind(this.clerk),unmountSignIn:this.clerk.unmountSignIn.bind(this.clerk),mountSignUp:this.clerk.mountSignUp.bind(this.clerk),unmountSignUp:this.clerk.unmountSignUp.bind(this.clerk),mountUserButton:this.clerk.mountUserButton.bind(this.clerk),unmountUserButton:this.clerk.unmountUserButton.bind(this.clerk),mountUserProfile:this.clerk.mountUserProfile.bind(this.clerk),unmountUserProfile:this.clerk.unmountUserProfile.bind(this.clerk),setUserSession:this.clerk.setUserSession.bind(this.clerk),session:n,user:t,userSession:s}},this.clerk instanceof y&&this.clerk.ssrData&&r.createElement("script",{type:"application/json","data-clerk":this.clerk.ssrKey,dangerouslySetInnerHTML:{__html:this.clerk.ssrData}}),r.createElement(r.Fragment,{key:this.state.userSession?this.state.userSession.id:"no-usrses"},this.props.children)):this.props.children},n}(r.PureComponent),a=function(e,s){e.displayName=s=s||e.displayName||e.name||"Component";var o=function(s){var o=n.useContext(l);return o.guaranteedLoaded?r.createElement(e,Object.assign({},s,{clerk:o})):o.session?r.createElement(l.Provider,{value:t({},o,{guaranteedLoaded:!0})},r.createElement(e,Object.assign({},s,{clerk:o}))):null};return o.displayName="withClerk("+s+")",o},p=function(e){function n(){var n;return(n=e.apply(this,arguments)||this).portalRef=r.createRef(),n}s(n,e);var t=n.prototype;return t.componentDidMount=function(){this.portalRef.current&&this.props.mount(this.portalRef.current,this.props.props)},t.componentWillUnmount=function(){this.portalRef.current&&this.props.unmount(this.portalRef.current)},t.render=function(){return r.createElement("div",{ref:this.portalRef})},n}(r.PureComponent),d=function(e){var r=e.open,t=e.close,s=e.props;return n.useEffect((function(){return r(s),function(){t()}})),null},h=a((function(e){var n=e.clerk,t=o(e,["clerk"]),s=n.openSignIn,i=n.closeSignIn;return t.mode&&"mounted"===t.mode?r.createElement(p,{mount:n.mountSignIn,unmount:n.unmountSignIn,props:t}):r.createElement(d,{open:s,close:i,props:t})}),"SignIn"),m=a((function(e){var n=e.clerk,t=o(e,["clerk"]),s=n.openSignUp,i=n.closeSignUp;return t.mode&&"mounted"===t.mode?r.createElement(p,{mount:n.mountSignUp,unmount:n.unmountSignUp,props:t}):r.createElement(d,{open:s,close:i,props:t})}),"SignUp"),f=a((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(p,{mount:n.mountUserProfile,unmount:n.unmountUserProfile,props:t})}),"UserProfile"),k=a((function(e){var n=e.clerk,t=o(e,["clerk"]);return r.createElement(p,{mount:n.mountUserButton,unmount:n.unmountUserButton,props:t})}),"UserButton"),S=a((function(e){return e.clerk.user?r.createElement(r.Fragment,null,e.children):null}),"SignedIn"),g=a((function(e){return e.clerk.user?null:r.createElement(r.Fragment,null,e.children)}),"SignedOut"),U=a((function(e){return r.createElement(r.Fragment,null,e.children)}),"SessionLoaded"),y=function(){function e(e,n){var r=this;if(this.listeners=[],this.clerkjs=null,this.componentsReady=!1,this.ssrKey=null,this.ssrData=null,this.session=null,this.userSession=null,this.setUserSession=function(){},this.preopenSignIn=null,this.preopenSignUp=null,this.premountSignInNodes=new Map,this.premountSignUpNodes=new Map,this.premountUserProfileNodes=new Map,this.premountUserButtonNodes=new Map,this.openSignIn=function(e){r.clerkjs&&r.componentsReady?r.clerkjs.openSignIn(e):r.preopenSignIn=e},this.closeSignIn=function(){r.clerkjs&&r.componentsReady?r.clerkjs.closeSignIn():r.preopenSignIn=null},this.openSignUp=function(e){r.clerkjs&&r.componentsReady?r.clerkjs.openSignUp(e):r.preopenSignUp=e},this.closeSignUp=function(){r.clerkjs&&r.componentsReady?r.clerkjs.closeSignUp():r.preopenSignUp=null},this.mountSignIn=function(e,n){r.clerkjs&&r.componentsReady?r.clerkjs.mountSignIn(e,n):r.premountSignInNodes.set(e,n)},this.unmountSignIn=function(e){r.clerkjs&&r.componentsReady?r.clerkjs.unmountSignIn(e):r.premountSignInNodes.delete(e)},this.mountSignUp=function(e,n){r.clerkjs&&r.componentsReady?r.clerkjs.mountSignUp(e,n):r.premountSignUpNodes.set(e,n)},this.unmountSignUp=function(e){r.clerkjs&&r.componentsReady?r.clerkjs.unmountSignUp(e):r.premountSignUpNodes.delete(e)},this.mountUserProfile=function(e,n){r.clerkjs&&r.componentsReady?r.clerkjs.mountUserProfile(e,n):r.premountUserProfileNodes.set(e,n)},this.unmountUserProfile=function(e){r.clerkjs&&r.componentsReady?r.clerkjs.unmountUserProfile(e):r.premountUserProfileNodes.delete(e)},this.mountUserButton=function(e,n){r.clerkjs&&r.componentsReady?r.clerkjs.mountUserButton(e,n):r.premountUserButtonNodes.set(e,n)},this.unmountUserButton=function(e){r.clerkjs&&r.componentsReady?r.clerkjs.unmountUserButton(e):r.premountUserButtonNodes.delete(e)},this.provider=e,this.options=t({patchFetch:!0,baseUrl:"https://js.clerk.dev",ssrKey:null},n),this.ssrKey=this.options.ssrKey,"undefined"==typeof window)this.mode="server";else{if(this.mode="browser",this.ssrKey){var s=document.querySelector('script[data-clerk="'+this.ssrKey+'"]');if(s){this.ssrData=s.innerHTML;var o=JSON.parse(this.ssrData);this.session=o.session,this.userSession=o.userSession}}if(window.Clerk)window.Clerk.init(),this.setClerkJS(window.Clerk);else{var i=document.querySelector('script[src="'+this.getScriptUrl()+'"]')||this.injectScript();i.addEventListener("load",(function(){if(!window.Clerk)throw new Error("Clerk: IsomorphicClerk failed to find window.Clerk");window.Clerk.init(),r.setClerkJS(window.Clerk)})),i.addEventListener("error",(function(e){throw console.error(e),new Error("Clerk: Failed to load Clerk")}))}}}var n=e.prototype;return n.addListener=function(e){this.listeners.push(e)},n.loadFromServer=function(e){if("browser"===this.mode)throw new Error("loadFromServer cannot be called in a browser context.");if(null===this.ssrKey)throw new Error("loadFromServer cannot be called because `ssrKey` is null.  Please pass `ssrKey` in the `options` argument of IsomorphicClerk.");this.session={},this.userSession={user:{}},this.session={},this.userSession=null,this.ssrData=JSON.stringify({session:this.session,userSession:this.userSession,token:e})},n.setClerkJS=function(e){try{var n=this;return n.clerkjs=e,n.userSession=e.userSession,n.session=e.session,n.setUserSession=e.setUserSession.bind(n.clerkjs),n.addListener=e.addListener.bind(n.clerkjs),n.listeners.forEach((function(n){e.addListener(n)})),Promise.resolve(e.onComponentsReady).then((function(){null!==n.preopenSignIn&&e.openSignIn(n.preopenSignIn),null!==n.preopenSignUp&&e.openSignUp(n.preopenSignUp),n.premountSignInNodes.forEach((function(n,r){e.mountSignIn(r,n)})),n.premountSignUpNodes.forEach((function(n,r){e.mountSignUp(r,n)})),n.premountUserProfileNodes.forEach((function(n,r){e.mountUserProfile(r,n)})),n.componentsReady=!0}))}catch(e){return Promise.reject(e)}},n.getScriptUrl=function(){return this.options.baseUrl+"/v1/clerk.js"},n.injectScript=function(){var e=document.createElement("script");if(e.src=this.getScriptUrl(),e.setAttribute("data-provider",this.provider),e.setAttribute("crossorigin","anonymous"),e.async=!0,!document.body)throw new Error("Clerk requires a <body> element.");return document.body.appendChild(e),e},e}();exports.ClerkContext=c,exports.SessionLoaded=U,exports.SignIn=h,exports.SignUp=m,exports.SignedIn=S,exports.SignedOut=g,exports.UserButton=k,exports.UserProfile=f,exports.WithClerk=function(e){var n=e.children;return r.createElement(l.Consumer,null,(function(e){if("function"==typeof n)return e.guaranteedLoaded?n(e):e.session?r.createElement(l.Provider,{value:t({},e,{guaranteedLoaded:!0})},n(e)):null;throw new Error("Child of WithClerk must be a function.")}))},exports.isClerkAPIError=function(e){return"clerkError"in e},exports.loadClerk=function(e,n){u=new y(e,t({},n,{ssrKey:"CLERK_IDENTITY_DATA"}))},exports.loadSessionFromToken=function(e){if(null===u)throw new Error("You must call loadClerk before loadSessionFromToken.");u.loadFromServer&&u.loadFromServer(e)},exports.useClerk=function(){var e=n.useContext(l);if(e.guaranteedLoaded)return e;throw new Error("Clerk: You're calling useClerk() before there's a guarantee the session has been loaded. Call useClerk() from a child of <SignedIn>, <SignedOut>, or <SessionLoaded>, or use the withClerk() HOC.")},exports.withClerk=a;
 //# sourceMappingURL=clerk-react.cjs.production.min.js.map

dist/clerk-react.esm.js

@@ -1,2 +0,2 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 
@@ -27,2 +27,17 @@ function _extends() {
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 var browser = typeof window !== 'undefined';
@@ -119,2 +134,6 @@ var isomorphicClerk = null;
         guaranteedLoaded: false,
+        openSignIn: this.clerk.openSignIn.bind(this.clerk),
+        closeSignIn: this.clerk.closeSignIn.bind(this.clerk),
+        openSignUp: this.clerk.openSignUp.bind(this.clerk),
+        closeSignUp: this.clerk.closeSignUp.bind(this.clerk),
         mountSignIn: this.clerk.mountSignIn.bind(this.clerk),
@@ -208,5 +227,4 @@ unmountSignIn: this.clerk.unmountSignIn.bind(this.clerk),
   });
-}; // Use PureComponent to prevent unnecessary rerendering
+};
 
-
 var Portal = /*#__PURE__*/function (_React$PureComponent2) {
@@ -226,3 +244,3 @@ _inheritsLoose(Portal, _React$PureComponent2);
   _proto2.componentDidMount = function componentDidMount() {
-    if (this.portalRef.current && this.props.mount) {
+    if (this.portalRef.current) {
       this.props.mount(this.portalRef.current, this.props.props);
@@ -233,3 +251,3 @@ }
   _proto2.componentWillUnmount = function componentWillUnmount() {
-    if (this.portalRef.current && this.props.unmount) {
+    if (this.portalRef.current) {
       this.props.unmount(this.portalRef.current);
@@ -248,7 +266,24 @@ }
 
-var SignIn = /*#__PURE__*/withClerk(function (props) {
-  var _props$clerk = props.clerk,
-      mountSignIn = _props$clerk.mountSignIn,
-      unmountSignIn = _props$clerk.unmountSignIn;
+var Modal = function Modal(_ref3) {
+  var open = _ref3.open,
+      close = _ref3.close,
+      props = _ref3.props;
+  useEffect(function () {
+    open(props);
+    return function () {
+      close();
+    };
+  });
+  return null;
+};
 
+var SignIn = /*#__PURE__*/withClerk(function (_ref4) {
+  var clerk = _ref4.clerk,
+      props = _objectWithoutPropertiesLoose(_ref4, ["clerk"]);
+
+  var mountSignIn = clerk.mountSignIn,
+      unmountSignIn = clerk.unmountSignIn,
+      openSignIn = clerk.openSignIn,
+      closeSignIn = clerk.closeSignIn;
+
   if (props.mode && props.mode === 'mounted') {
@@ -261,11 +296,18 @@ return React.createElement(Portal, {
   } else {
-    console.warn('Modal sign in not implemented yet.');
-    return null;
+    return React.createElement(Modal, {
+      open: openSignIn,
+      close: closeSignIn,
+      props: props
+    });
   }
 }, 'SignIn');
-var SignUp = /*#__PURE__*/withClerk(function (props) {
-  var _props$clerk2 = props.clerk,
-      mountSignUp = _props$clerk2.mountSignUp,
-      unmountSignUp = _props$clerk2.unmountSignUp;
+var SignUp = /*#__PURE__*/withClerk(function (_ref5) {
+  var clerk = _ref5.clerk,
+      props = _objectWithoutPropertiesLoose(_ref5, ["clerk"]);
 
+  var mountSignUp = clerk.mountSignUp,
+      unmountSignUp = clerk.unmountSignUp,
+      openSignUp = clerk.openSignUp,
+      closeSignUp = clerk.closeSignUp;
+
   if (props.mode && props.mode === 'mounted') {
@@ -278,10 +320,15 @@ return React.createElement(Portal, {
   } else {
-    console.warn('Modal sign up not implemented yet.');
-    return null;
+    return React.createElement(Modal, {
+      open: openSignUp,
+      close: closeSignUp,
+      props: props
+    });
   }
 }, 'SignUp');
-var UserProfile = /*#__PURE__*/withClerk(function (props) {
-  var _props$clerk3 = props.clerk,
-      mountUserProfile = _props$clerk3.mountUserProfile,
-      unmountUserProfile = _props$clerk3.unmountUserProfile;
+var UserProfile = /*#__PURE__*/withClerk(function (_ref6) {
+  var clerk = _ref6.clerk,
+      props = _objectWithoutPropertiesLoose(_ref6, ["clerk"]);
+
+  var mountUserProfile = clerk.mountUserProfile,
+      unmountUserProfile = clerk.unmountUserProfile;
   return React.createElement(Portal, {
@@ -293,6 +340,8 @@ mount: mountUserProfile,
 }, 'UserProfile');
-var UserButton = /*#__PURE__*/withClerk(function (props) {
-  var _props$clerk4 = props.clerk,
-      mountUserButton = _props$clerk4.mountUserButton,
-      unmountUserButton = _props$clerk4.unmountUserButton;
+var UserButton = /*#__PURE__*/withClerk(function (_ref7) {
+  var clerk = _ref7.clerk,
+      props = _objectWithoutPropertiesLoose(_ref7, ["clerk"]);
+
+  var mountUserButton = clerk.mountUserButton,
+      unmountUserButton = clerk.unmountUserButton;
   return React.createElement(Portal, {
@@ -304,16 +353,16 @@ mount: mountUserButton,
 }, 'UserButton');
-var SignedIn = /*#__PURE__*/withClerk(function (_ref3) {
-  var children = _ref3.children,
-      clerk = _ref3.clerk;
+var SignedIn = /*#__PURE__*/withClerk(function (_ref8) {
+  var children = _ref8.children,
+      clerk = _ref8.clerk;
   var user = clerk.user;
   return user ? React.createElement(React.Fragment, null, children) : null;
 }, 'SignedIn');
-var SignedOut = /*#__PURE__*/withClerk(function (_ref4) {
-  var children = _ref4.children,
-      clerk = _ref4.clerk;
+var SignedOut = /*#__PURE__*/withClerk(function (_ref9) {
+  var children = _ref9.children,
+      clerk = _ref9.clerk;
   var user = clerk.user;
   return user ? null : React.createElement(React.Fragment, null, children);
 }, 'SignedOut');
-var SessionLoaded = /*#__PURE__*/withClerk(function (_ref5) {
-  var children = _ref5.children;
+var SessionLoaded = /*#__PURE__*/withClerk(function (_ref10) {
+  var children = _ref10.children;
   return React.createElement(React.Fragment, null, children);
@@ -336,2 +385,4 @@ }, 'SessionLoaded');
 
+    this.preopenSignIn = null;
+    this.preopenSignUp = null;
     this.premountSignInNodes = new Map();
@@ -342,2 +393,34 @@ this.premountSignUpNodes = new Map();
 
+    this.openSignIn = function (props) {
+      if (_this3.clerkjs && _this3.componentsReady) {
+        _this3.clerkjs.openSignIn(props);
+      } else {
+        _this3.preopenSignIn = props;
+      }
+    };
+
+    this.closeSignIn = function () {
+      if (_this3.clerkjs && _this3.componentsReady) {
+        _this3.clerkjs.closeSignIn();
+      } else {
+        _this3.preopenSignIn = null;
+      }
+    };
+
+    this.openSignUp = function (props) {
+      if (_this3.clerkjs && _this3.componentsReady) {
+        _this3.clerkjs.openSignUp(props);
+      } else {
+        _this3.preopenSignUp = props;
+      }
+    };
+
+    this.closeSignUp = function () {
+      if (_this3.clerkjs && _this3.componentsReady) {
+        _this3.clerkjs.closeSignUp();
+      } else {
+        _this3.preopenSignUp = null;
+      }
+    };
+
     this.mountSignIn = function (node, props) {
@@ -496,2 +579,10 @@ if (_this3.clerkjs && _this3.componentsReady) {
       return Promise.resolve(clerkjs.onComponentsReady).then(function () {
+        if (_this5.preopenSignIn !== null) {
+          clerkjs.openSignIn(_this5.preopenSignIn);
+        }
+
+        if (_this5.preopenSignUp !== null) {
+          clerkjs.openSignUp(_this5.preopenSignUp);
+        }
+
         _this5.premountSignInNodes.forEach(function (props, node) {
@@ -498,0 +589,0 @@ clerkjs.mountSignIn(node, props);

dist/index.d.ts

@@ -15,2 +15,6 @@ import React from 'react';
     guaranteedLoaded: boolean;
+    openSignIn: (props: SignInProps) => void;
+    closeSignIn: () => void;
+    openSignUp: (props: SignUpProps) => void;
+    closeSignUp: () => void;
     mountSignIn: (node: HTMLDivElement, props: SignInProps) => void;
@@ -17,0 +21,0 @@ unmountSignIn: (node: HTMLDivElement) => void;

dist/types.d.ts

@@ -32,2 +32,6 @@ declare type AllNonNullable<T> = {
     guaranteedLoaded: boolean;
+    openSignIn: (props: SignInProps) => void;
+    closeSignIn: () => void;
+    openSignUp: (props: SignUpProps) => void;
+    closeSignUp: () => void;
     mountSignIn: (node: HTMLDivElement, props: SignInProps) => void;
@@ -62,6 +66,11 @@ unmountSignIn: (node: HTMLDivElement) => void;
 export interface MountProps {
-    mount?: (node: HTMLDivElement, props: any) => void;
-    unmount?: (node: HTMLDivElement) => void;
+    mount: (node: HTMLDivElement, props: any) => void;
+    unmount: (node: HTMLDivElement) => void;
     props?: any;
 }
+export interface ModalProps {
+    open: (props: any) => void;
+    close: () => void;
+    props?: any;
+}
 export interface IsomorphicClerkOptions {
@@ -86,2 +95,6 @@ patchFetch: boolean;
     userSession: UserSessionResource | null;
+    openSignIn: (props: SignInProps) => void;
+    closeSignIn: () => void;
+    openSignUp: (props: SignUpProps) => void;
+    closeSignUp: () => void;
     mountSignIn: (node: HTMLDivElement, props: SignInProps) => void;
@@ -88,0 +101,0 @@ unmountSignIn: (node: HTMLDivElement) => void;

package.json

 {
-  "version": "0.1.1-3",
+  "version": "0.1.1-4",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

src/types.ts

@@ -36,2 +36,6 @@ type AllNonNullable<T> = { [P in keyof T]: NonNullable<T[P]> };
   guaranteedLoaded: boolean;
+  openSignIn: (props: SignInProps) => void;
+  closeSignIn: () => void;
+  openSignUp: (props: SignUpProps) => void;
+  closeSignUp: () => void;
   mountSignIn: (node: HTMLDivElement, props: SignInProps) => void;
@@ -70,7 +74,13 @@ unmountSignIn: (node: HTMLDivElement) => void;
 export interface MountProps {
-  mount?: (node: HTMLDivElement, props: any) => void;
-  unmount?: (node: HTMLDivElement) => void;
+  mount: (node: HTMLDivElement, props: any) => void;
+  unmount: (node: HTMLDivElement) => void;
   props?: any;
 }
 
+export interface ModalProps {
+  open: (props: any) => void;
+  close: () => void;
+  props?: any;
+}
+
 export interface IsomorphicClerkOptions {
@@ -99,2 +109,6 @@ patchFetch: boolean;
   userSession: UserSessionResource | null;
+  openSignIn: (props: SignInProps) => void;
+  closeSignIn: () => void;
+  openSignUp: (props: SignUpProps) => void;
+  closeSignUp: () => void;
   mountSignIn: (node: HTMLDivElement, props: SignInProps) => void;
@@ -101,0 +115,0 @@ unmountSignIn: (node: HTMLDivElement) => void;

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

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

187426

increased by9.98%

Lines of code

2354

increased by11.25%

No dependency changes