@clerk/clerk-react - npm Package Compare versions

Comparing version 3.4.5 to 4.0.0-next.0

dist/components/uiComponents.d.ts

@@ -8,2 +8,3 @@ /// <reference types="react" />
         signUpUrl?: string | undefined;
+        appearance?: import("@clerk/types").Theme | undefined;
     } & import("@clerk/types").RedirectOptions & {
@@ -19,2 +20,3 @@ clerk: import("@clerk/types").LoadedClerk;
         signInUrl?: string | undefined;
+        appearance?: import("@clerk/types").Theme | undefined;
     } & import("@clerk/types").RedirectOptions & {
@@ -21,0 +23,0 @@ clerk: import("@clerk/types").LoadedClerk;

dist/components/uiComponents.js

@@ -34,2 +34,7 @@ "use strict";
     }
+    componentDidUpdate(prevProps) {
+        if (prevProps.props.appearance !== this.props.props.appearance) {
+            this.props.updateProps({ node: this.portalRef.current, props: this.props.props });
+        }
+    }
     componentDidMount() {
@@ -51,16 +56,16 @@ if (this.portalRef.current) {
     var { clerk } = _a, props = tslib_1.__rest(_a, ["clerk"]);
-    return (react_1.default.createElement(Portal, { mount: clerk.mountSignIn, unmount: clerk.unmountSignIn, props: props }));
+    return (react_1.default.createElement(Portal, { mount: clerk.mountSignIn, unmount: clerk.unmountSignIn, updateProps: clerk.__unstable__updateProps, props: props }));
 }, 'SignIn');
 exports.SignUp = (0, withClerk_1.withClerk)((_a) => {
     var { clerk } = _a, props = tslib_1.__rest(_a, ["clerk"]);
-    return (react_1.default.createElement(Portal, { mount: clerk.mountSignUp, unmount: clerk.unmountSignUp, props: props }));
+    return (react_1.default.createElement(Portal, { mount: clerk.mountSignUp, unmount: clerk.unmountSignUp, updateProps: clerk.__unstable__updateProps, props: props }));
 }, 'SignUp');
 exports.UserProfile = (0, withClerk_1.withClerk)((_a) => {
     var { clerk } = _a, props = tslib_1.__rest(_a, ["clerk"]);
-    return (react_1.default.createElement(Portal, { mount: clerk.mountUserProfile, unmount: clerk.unmountUserProfile, props: props }));
+    return (react_1.default.createElement(Portal, { mount: clerk.mountUserProfile, unmount: clerk.unmountUserProfile, updateProps: clerk.__unstable__updateProps, props: props }));
 }, 'UserProfile');
 exports.UserButton = (0, withClerk_1.withClerk)((_a) => {
     var { clerk } = _a, props = tslib_1.__rest(_a, ["clerk"]);
-    return (react_1.default.createElement(Portal, { mount: clerk.mountUserButton, unmount: clerk.unmountUserButton, props: props }));
+    return (react_1.default.createElement(Portal, { mount: clerk.mountUserButton, unmount: clerk.unmountUserButton, updateProps: clerk.__unstable__updateProps, props: props }));
 }, 'UserButton');
 //# sourceMappingURL=uiComponents.js.map

dist/contexts/ClerkContextProvider.js

@@ -24,6 +24,6 @@ "use strict";
     });
-    const derivedState = deriveState(clerkLoaded, state, initialState);
     react_1.default.useEffect(() => {
         return clerk.addListener(e => setState(Object.assign({}, e)));
     }, []);
+    const derivedState = deriveState(clerkLoaded, state, initialState);
     const clerkCtx = react_1.default.useMemo(() => ({ value: clerk }), [clerkLoaded]);
@@ -63,2 +63,5 @@ const clientCtx = react_1.default.useMemo(() => ({ value: state.client }), [state.client]);
     react_1.default.useEffect(() => {
+        isomorphicClerk.__unstable__updateProps({ appearance: options.options.appearance });
+    }, [options.options.appearance]);
+    react_1.default.useEffect(() => {
         isomorphicClerk.addOnLoaded(() => setLoaded(true));
@@ -65,0 +68,0 @@ }, []);

dist/info.d.ts

 /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export declare const LIB_VERSION = "3.4.5";
+export declare const LIB_VERSION = "4.0.0-next.0";
 export declare const LIB_NAME = "@clerk/clerk-react";
 //# sourceMappingURL=info.d.ts.map

dist/info.js

@@ -5,4 +5,4 @@ "use strict";
 /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-exports.LIB_VERSION = '3.4.5';
+exports.LIB_VERSION = '4.0.0-next.0';
 exports.LIB_NAME = '@clerk/clerk-react';
 //# sourceMappingURL=info.js.map

dist/isomorphicClerk.d.ts

@@ -20,2 +20,3 @@ import type { ActiveSessionResource, AuthenticateWithMetamaskParams, ClientResource, CreateOrganizationParams, HandleMagicLinkVerificationParams, HandleOAuthCallbackParams, OrganizationMembershipResource, OrganizationResource, RedirectOptions, Resources, SetActiveParams, SignInProps, SignOut, SignUpProps, UserButtonProps, UserProfileProps, UserResource } from '@clerk/types';
     private preopenSignUp?;
+    private preopenUserProfile?;
     private premountSignInNodes;
@@ -41,2 +42,3 @@ private premountSignUpNodes;
     get __unstable__environment(): any;
+    __unstable__updateProps: (props: any) => any;
     /**
@@ -52,2 +54,4 @@ * `setActive` can be used to set the active session and/or organization.
     closeSignIn: () => void;
+    openUserProfile: (props?: UserProfileProps | undefined) => void;
+    closeUserProfile: () => void;
     openSignUp: (props?: SignUpProps | undefined) => void;
@@ -54,0 +58,0 @@ closeSignUp: () => void;

dist/isomorphicClerk.js

@@ -12,2 +12,3 @@ "use strict";
         this.preopenSignUp = null;
+        this.preopenUserProfile = null;
         this.premountSignInNodes = new Map();
@@ -39,2 +40,5 @@ this.premountSignUpNodes = new Map();
             }
+            if (this.preopenUserProfile !== null) {
+                clerkjs.openUserProfile(this.preopenUserProfile);
+            }
             this.premountSignInNodes.forEach((props, node) => {
@@ -56,2 +60,10 @@ clerkjs.mountSignIn(node, props);
         };
+        this.__unstable__updateProps = (props) => {
+            if (this.clerkjs) {
+                this.clerkjs.__unstable__updateProps(props);
+            }
+            else {
+                return undefined;
+            }
+        };
         /**
@@ -90,2 +102,18 @@ * `setActive` can be used to set the active session and/or organization.
         };
+        this.openUserProfile = (props) => {
+            if (this.clerkjs && tslib_1.__classPrivateFieldGet(this, _IsomorphicClerk_loaded, "f")) {
+                this.clerkjs.openUserProfile(props);
+            }
+            else {
+                this.preopenUserProfile = props;
+            }
+        };
+        this.closeUserProfile = () => {
+            if (this.clerkjs && tslib_1.__classPrivateFieldGet(this, _IsomorphicClerk_loaded, "f")) {
+                this.clerkjs.closeUserProfile();
+            }
+            else {
+                this.preopenUserProfile = null;
+            }
+        };
         this.openSignUp = (props) => {
@@ -92,0 +120,0 @@ if (this.clerkjs && tslib_1.__classPrivateFieldGet(this, _IsomorphicClerk_loaded, "f")) {

dist/types.d.ts

@@ -20,2 +20,3 @@ /// <reference types="react" />
     unmount: (node: HTMLDivElement) => void;
+    updateProps: (props: any) => void;
     props?: any;
@@ -22,0 +23,0 @@ }

package.json

 {
   "name": "@clerk/clerk-react",
-  "version": "3.4.5",
+  "version": "4.0.0-next.0",
   "license": "MIT",
@@ -31,3 +31,3 @@ "description": "Clerk.dev React library",
   "dependencies": {
-    "@clerk/types": "^2.19.1",
+    "@clerk/types": "^3.0.0-next.0",
     "swr": "^1.3.0",
@@ -68,7 +68,7 @@ "tslib": "^2.3.1"
   },
+  "homepage": "https://clerk.dev/",
   "bugs": {
     "url": "https://github.com/clerkinc/javascript/issues"
   },
-  "homepage": "https://clerk.dev/",
-  "gitHead": "87f283047898f84b0b13f55952e356e6a10736ac"
+  "gitHead": "4b5e38c14eb6ded7c4de1dd11ed196130e49bf3f"
 }

src/info.ts

 /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '3.4.5';
+export const LIB_VERSION = '4.0.0-next.0';
 export const LIB_NAME = '@clerk/clerk-react';

src/isomorphicClerk.ts

@@ -52,2 +52,3 @@ import type {
   private preopenSignUp?: null | SignUpProps = null;
+  private preopenUserProfile?: null | UserProfileProps = null;
   private premountSignInNodes = new Map<HTMLDivElement, SignInProps>();
@@ -182,2 +183,6 @@ private premountSignUpNodes = new Map<HTMLDivElement, SignUpProps>();
 
+    if (this.preopenUserProfile !== null) {
+      clerkjs.openUserProfile(this.preopenUserProfile);
+    }
+
     this.premountSignInNodes.forEach((props: SignInProps, node: HTMLDivElement) => {
@@ -252,2 +257,10 @@ clerkjs.mountSignIn(node, props);
 
+  __unstable__updateProps = (props: any): any => {
+    if (this.clerkjs) {
+      (this.clerkjs as any).__unstable__updateProps(props);
+    } else {
+      return undefined;
+    }
+  };
+
   /**
@@ -290,2 +303,18 @@ * `setActive` can be used to set the active session and/or organization.
 
+  openUserProfile = (props?: UserProfileProps): void => {
+    if (this.clerkjs && this.#loaded) {
+      this.clerkjs.openUserProfile(props);
+    } else {
+      this.preopenUserProfile = props;
+    }
+  };
+
+  closeUserProfile = (): void => {
+    if (this.clerkjs && this.#loaded) {
+      this.clerkjs.closeUserProfile();
+    } else {
+      this.preopenUserProfile = null;
+    }
+  };
+
   openSignUp = (props?: SignUpProps): void => {
@@ -292,0 +321,0 @@ if (this.clerkjs && this.#loaded) {

src/types.ts

@@ -21,2 +21,3 @@ import type { Clerk, ClerkOptions, ClientResource, LoadedClerk, RedirectOptions, UserResource } from '@clerk/types';
   unmount: (node: HTMLDivElement) => void;
+  updateProps: (props: any) => void;
   props?: any;
@@ -23,0 +24,0 @@ }

New alerts

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

Worsened metrics

Total package byte prevSize

261390

decreased by-2.08%

Number of package files

238

decreased by-7.75%

Lines of code

4606

decreased by-0.58%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@clerk/types@3.65.4(transitive)

• + Addedcsstype@3.1.1(transitive)

• - Removed@clerk/types@2.21.0(transitive)

• Updated@clerk/types@^3.0.0-next.0