Fix/clerk frontend version pins

README.md

@@ -31,13 +31,15 @@ def index() -> rx.Component:
     return clerk.clerk_provider(
         rx.container(
             clerk.clerk_loaded(
-                clerk.signed_in(
+                clerk.show(
                     clerk.sign_on(
                         rx.button("Sign out"),
                     ),
+                    when="signed-in",
                 ),
-                clerk.signed_out(
+                clerk.show(
                     rx.button("Sign in"),
+                    when="signed-out",
                 ),
             ),
         ),
@@ -47,6 +49,8 @@ def index() -> rx.Component:
     )
 ```
 
+The package pins a compatible Clerk frontend set by default (`@clerk/react@6.6.0`, `@clerk/ui@1.9.0`, ClerkJS `6.10.0`). Apps that need another compatible set can call `clerk.configure_clerk_frontend_versions(...)` before creating Clerk components.
+
 ## Contributing
 
 Feel free to open issues or make PRs.
@@ -69,4 +73,4 @@ I use [Taskfile](https://taskfile.dev/) (similar to `makefile`) to make common t
 
 ## TODO:
 
-- How should the `condition` and `fallback` props be defined on `Protect`? They are supposed to be `Javascript` and `JSX` respectively, but are just `str` for now... Is `Javascript` `rx.Script`? And `JSX` `rx.Component`?
+- Add migration notes for deprecated wrappers removed in the next major release.

clerk_api_demo/clerk_api_demo/clerk_api_demo.py

@@ -85,8 +85,8 @@ def demo_page_header_and_description() -> rx.Component:
             rx.link(rx.code("reflex"), href="https://reflex.dev"),
             "components that wrap Clerk react components (",
             rx.link(
-                rx.code("@clerk/clerk-react"),
-                href="https://www.npmjs.com/package/@clerk/clerk-react",
+                rx.code("@clerk/react"),
+                href="https://www.npmjs.com/package/@clerk/react",
             ),
             ") and interact with the Clerk backend API.",
             size="4",
@@ -192,13 +192,15 @@ def getting_started() -> rx.Component:
                 def index() -> rx.Component:
                     return clerk.clerk_provider(
                         clerk.clerk_loaded(
-                            clerk.signed_in(
+                            clerk.show(
                                 clerk.sign_on(
                                     rx.button("Sign out"),
                                 ),
+                                when="signed-in",
                             ),
-                            clerk.signed_out(
+                            clerk.show(
                                 rx.button("Sign in"),
+                                when="signed-out",
                             ),
                         ),
                         publishable_key=os.environ["CLERK_PUBLISHABLE_KEY"],
@@ -439,19 +441,21 @@ def clerk_loaded_demo() -> rx.Component:
         rx.vstack(
             rx.text("You'll only see content below if you are signed in"),
             rx.divider(),
-            clerk.signed_in(
+            clerk.show(
                 rx.text("You are signed in.", data_testid="you_are_signed_in"),
                 clerk.sign_out_button(rx.button("Sign out", width="100%")),
+                when="signed-in",
             ),
         )
     )
     signed_out_area = rx.card(
         rx.vstack(
             rx.text("You'll only see content below if you are signed out"),
             rx.divider(),
-            clerk.signed_out(
+            clerk.show(
                 rx.text("You are signed out.", data_testid="you_are_signed_out"),
                 clerk.sign_in_button(rx.button("Sign in", width="100%")),
+                when="signed-out",
             ),
         )
     )
@@ -477,7 +481,7 @@ def clerk_loaded_demo() -> rx.Component:
     return demo_card(
         "Clerk loaded and signed in/out areas",
         rx.markdown(
-            "Demo of `clerk_loaded`, `clerk_loading`, and `signed_in`, `signed_out` components."
+            "Demo of `clerk_loaded`, `clerk_loading`, and `show` components."
         ),
         demo,
     )
@@ -496,18 +500,20 @@ def links_to_demo_pages() -> rx.Component:
 
             But, you can also create your own with more customization.""")
         ),
-        clerk.signed_out(
+        clerk.show(
             rx.grid(
                 rx.link(rx.button("Go to sign up page", width="100%"), href="/sign-up"),
                 rx.link(rx.button("Go to sign in page", width="100%"), href="/sign-in"),
                 width="100%",
                 columns="2",
                 spacing="3",
-            )
+            ),
+            when="signed-out",
         ),
-        clerk.signed_in(
+        clerk.show(
             rx.text("Sign out to see links to default sign-in and sign-up pages."),
             clerk.sign_out_button(rx.button("Sign out", width="100%")),
+            when="signed-in",
         ),
     )
     return demo_card(
@@ -531,7 +537,7 @@ def user_info_demo() -> rx.Component:
             Test credentials will not have a name or image by default.
             """)
         ),
-        clerk.signed_in(
+        clerk.show(
             rx.hstack(
                 rx.card(
                     rx.data_list.root(
@@ -548,9 +554,10 @@ def user_info_demo() -> rx.Component:
                 width="100%",
                 justify="center",
                 spacing="5",
-            )
+            ),
+            when="signed-in",
         ),
-        clerk.signed_out(rx.text("Sign in to see user information.")),
+        clerk.show(rx.text("Sign in to see user information."), when="signed-out"),
     )
 
     return demo_card(
@@ -629,10 +636,11 @@ def demo_header() -> rx.Component:
                 data_list_item("password", rx.code("test-clerk-password")),
             ),
             rx.hstack(
-                clerk.signed_in(
-                    clerk.sign_out_button(rx.button("Sign out", data_testid="sign_out"))
+                clerk.show(
+                    clerk.sign_out_button(rx.button("Sign out", data_testid="sign_out")),
+                    when="signed-in",
                 ),
-                clerk.signed_out(
+                clerk.show(
                     rx.hstack(
                         clerk.sign_in_button(
                             rx.button("Sign in", data_testid="sign_in")
@@ -641,6 +649,7 @@ def demo_header() -> rx.Component:
                             rx.button("Sign up", data_testid="sign_up")
                         ),
                     ),
+                    when="signed-out",
                 ),
             ),
         ),

custom_components/reflex_clerk_api/__init__.py

@@ -1,6 +1,21 @@
-__version__ = "1.2.4"
+__version__ = "1.3.0"
 
 from .authentication_components import sign_in, sign_up
+from .base import (
+    CLERK_JS_VERSION,
+    CLERK_REACT_LIBRARY,
+    CLERK_REACT_VERSION,
+    CLERK_UI_LIBRARY,
+    CLERK_UI_VERSION,
+    DEFAULT_CLERK_FRONTEND_VERSIONS,
+    ClerkFrontendVersions,
+    configure_clerk_frontend_versions,
+    get_clerk_frontend_versions,
+    get_clerk_react_library,
+    get_clerk_ui_library,
+    reset_clerk_frontend_versions,
+)
+from .billing_components import pricing_table
 from .clerk_provider import (
     ClerkState,
     ClerkUser,
@@ -13,10 +28,14 @@
 from .control_components import (
     clerk_loaded,
     clerk_loading,
-    protect,
     redirect_to_user_profile,
-    signed_in,
-    signed_out,
+    show,
+)
+from .organization_components import (
+    create_organization,
+    organization_list,
+    organization_profile,
+    organization_switcher,
 )
 from .pages import add_sign_in_page, add_sign_up_page
 from .unstyled_components import (
@@ -28,6 +47,13 @@
 from .user_components import user_button, user_profile
 
 __all__ = [
+    "CLERK_JS_VERSION",
+    "CLERK_REACT_LIBRARY",
+    "CLERK_REACT_VERSION",
+    "CLERK_UI_LIBRARY",
+    "CLERK_UI_VERSION",
+    "DEFAULT_CLERK_FRONTEND_VERSIONS",
+    "ClerkFrontendVersions",
     "ClerkState",
     "ClerkUser",
     "SignInButton",
@@ -36,17 +62,25 @@
     "clerk_loaded",
     "clerk_loading",
     "clerk_provider",
+    "configure_clerk_frontend_versions",
+    "create_organization",
+    "get_clerk_frontend_versions",
+    "get_clerk_react_library",
+    "get_clerk_ui_library",
     "on_load",
-    "protect",
+    "organization_list",
+    "organization_profile",
+    "organization_switcher",
+    "pricing_table",
     "redirect_to_user_profile",
     "register_on_auth_change_handler",
+    "reset_clerk_frontend_versions",
+    "show",
     "sign_in",
     "sign_in_button",
     "sign_out_button",
     "sign_up",
     "sign_up_button",
-    "signed_in",
-    "signed_out",
     "update_user_phone_number",
     "user_button",
     "user_profile",