"""CLI for creating custom components.""" from __future__ import annotations import os import re import subprocess import sys from collections import namedtuple from contextlib import contextmanager from pathlib import Path from typing import Optional, Tuple import httpx import tomlkit import typer from tomlkit.exceptions import TOMLKitError from reflex import constants from reflex.config import get_config from reflex.constants import CustomComponents from reflex.utils import console from reflex.utils.pyi_generator import PyiGenerator config = get_config() custom_components_cli = typer.Typer() POST_CUSTOM_COMPONENTS_GALLERY_ENDPOINT = ( f"{config.cp_backend_url}/custom-components/gallery" ) GET_CUSTOM_COMPONENTS_GALLERY_BY_NAME_ENDPOINT = ( f"{config.cp_backend_url}/custom-components/gallery" ) POST_CUSTOM_COMPONENTS_GALLERY_TIMEOUT = 15 @contextmanager def set_directory(working_directory: str): """Context manager that sets the working directory. Args: working_directory: The working directory to change to. Yields: Yield to the caller to perform operations in the working directory. """ current_directory = os.getcwd() try: os.chdir(working_directory) yield finally: os.chdir(current_directory) def _create_package_config(module_name: str, package_name: str): """Create a package config pyproject.toml file. Args: module_name: The name of the module. package_name: The name of the package typically constructed with `reflex-` prefix and a meaningful library name. """ from reflex.compiler import templates with open(CustomComponents.PYPROJECT_TOML, "w") as f: f.write( templates.CUSTOM_COMPONENTS_PYPROJECT_TOML.render( module_name=module_name, package_name=package_name ) ) def _get_package_config(exit_on_fail: bool = True) -> dict: """Get the package configuration from the pyproject.toml file. Args: exit_on_fail: Whether to exit if the pyproject.toml file is not found. Returns: The package configuration. Raises: Exit: If the pyproject.toml file is not found. """ try: with open(CustomComponents.PYPROJECT_TOML, "rb") as f: return dict(tomlkit.load(f)) except (OSError, TOMLKitError) as ex: console.error(f"Unable to read from pyproject.toml due to {ex}") if exit_on_fail: raise typer.Exit(code=1) from ex raise def _create_readme(module_name: str, package_name: str): """Create a package README file. Args: module_name: The name of the module. package_name: The name of the python package to be published. """ from reflex.compiler import templates with open(CustomComponents.PACKAGE_README, "w") as f: f.write( templates.CUSTOM_COMPONENTS_README.render( module_name=module_name, package_name=package_name, ) ) def _write_source_and_init_py( custom_component_src_dir: str, component_class_name: str, module_name: str, ): """Write the source code and init file from templates for the custom component. Args: custom_component_src_dir: The name of the custom component source directory. component_class_name: The name of the component class. module_name: The name of the module. """ from reflex.compiler import templates with open( os.path.join( custom_component_src_dir, f"{module_name}.py", ), "w", ) as f: f.write( templates.CUSTOM_COMPONENTS_SOURCE.render( component_class_name=component_class_name, module_name=module_name ) ) with open( os.path.join( custom_component_src_dir, CustomComponents.INIT_FILE, ), "w", ) as f: f.write(templates.CUSTOM_COMPONENTS_INIT_FILE.render(module_name=module_name)) def _populate_demo_app(name_variants: NameVariants): """Populate the demo app that imports the custom components. Args: name_variants: the tuple including various names such as package name, class name needed for the project. """ from reflex import constants from reflex.compiler import templates from reflex.reflex import _init demo_app_dir = name_variants.demo_app_dir demo_app_name = name_variants.demo_app_name console.info(f"Creating app for testing: {demo_app_dir}") os.makedirs(demo_app_dir) with set_directory(demo_app_dir): # We start with the blank template as basis. _init(name=demo_app_name, template=constants.Templates.DEFAULT) # Then overwrite the app source file with the one we want for testing custom components. # This source file is rendered using jinja template file. with open(f"{demo_app_name}/{demo_app_name}.py", "w") as f: f.write( templates.CUSTOM_COMPONENTS_DEMO_APP.render( custom_component_module_dir=name_variants.custom_component_module_dir, module_name=name_variants.module_name, ) ) # Append the custom component package to the requirements.txt file. with open(f"{constants.RequirementsTxt.FILE}", "a") as f: f.write(f"{name_variants.package_name}\n") def _get_default_library_name_parts() -> list[str]: """Get the default library name. Based on the current directory name, remove any non-alphanumeric characters. Raises: Exit: If the current directory name is not suitable for python projects, and we cannot find a valid library name based off it. Returns: The parts of default library name. """ current_dir_name = os.getcwd().split(os.path.sep)[-1] cleaned_dir_name = re.sub("[^0-9a-zA-Z-_]+", "", current_dir_name).lower() parts = [part for part in re.split("-|_", cleaned_dir_name) if part] if parts and parts[0] == constants.Reflex.MODULE_NAME: # If the directory name already starts with "reflex", remove it from the parts. parts = parts[1:] # If no parts left, cannot find a valid library name, exit. if not parts: # The folder likely has a name not suitable for python paths. console.error( f"Based on current directory name {current_dir_name}, the library name is {constants.Reflex.MODULE_NAME}. This package already exists. Please use --library-name to specify a different name." ) raise typer.Exit(code=1) if not parts: # The folder likely has a name not suitable for python paths. console.error( f"Could not find a valid library name based on the current directory: got {current_dir_name}." ) raise typer.Exit(code=1) return parts NameVariants = namedtuple( "NameVariants", [ "library_name", "component_class_name", "package_name", "module_name", "custom_component_module_dir", "demo_app_dir", "demo_app_name", ], ) def _validate_library_name(library_name: str | None) -> NameVariants: """Validate the library name. Args: library_name: The name of the library if picked otherwise None. Raises: Exit: If the library name is not suitable for python projects. Returns: A tuple containing the various names such as package name, class name, etc., needed for the project. """ if library_name is not None and not re.match( r"^[a-zA-Z-]+[a-zA-Z0-9-]*$", library_name ): console.error( f"Please use only alphanumeric characters or dashes: got {library_name}" ) raise typer.Exit(code=1) # If not specified, use the current directory name to form the module name. name_parts = ( [part.lower() for part in library_name.split("-")] if library_name else _get_default_library_name_parts() ) if not library_name: library_name = "-".join(name_parts) # Component class name is the camel case. component_class_name = "".join([part.capitalize() for part in name_parts]) console.debug(f"Component class name: {component_class_name}") # Package name is commonly kebab case. package_name = f"reflex-{library_name}" console.debug(f"Package name: {package_name}") # Module name is the snake case. module_name = "_".join(name_parts) custom_component_module_dir = f"reflex_{module_name}" console.debug(f"Custom component source directory: {custom_component_module_dir}") # Use the same name for the directory and the app. demo_app_dir = demo_app_name = f"{module_name}_demo" console.debug(f"Demo app directory: {demo_app_dir}") return NameVariants( library_name=library_name, component_class_name=component_class_name, package_name=package_name, module_name=module_name, custom_component_module_dir=custom_component_module_dir, demo_app_dir=demo_app_dir, demo_app_name=demo_app_name, ) def _populate_custom_component_project(name_variants: NameVariants): """Populate the custom component source directory. This includes the pyproject.toml, README.md, and the code template for the custom component. Args: name_variants: the tuple including various names such as package name, class name needed for the project. """ console.info( f"Populating pyproject.toml with package name: {name_variants.package_name}" ) # write pyproject.toml, README.md, etc. _create_package_config( module_name=name_variants.library_name, package_name=name_variants.package_name ) _create_readme( module_name=name_variants.library_name, package_name=name_variants.package_name ) console.info( f"Initializing the component directory: {CustomComponents.SRC_DIR}/{name_variants.custom_component_module_dir}" ) os.makedirs(CustomComponents.SRC_DIR) with set_directory(CustomComponents.SRC_DIR): os.makedirs(name_variants.custom_component_module_dir) _write_source_and_init_py( custom_component_src_dir=name_variants.custom_component_module_dir, component_class_name=name_variants.component_class_name, module_name=name_variants.module_name, ) @custom_components_cli.command(name="init") def init( library_name: Optional[str] = typer.Option( None, help="The name of your library. On PyPI, package will be published as `reflex-{library-name}`.", ), install: bool = typer.Option( True, help="Whether to install package from this local custom component in editable mode.", ), loglevel: constants.LogLevel = typer.Option( config.loglevel, help="The log level to use." ), ): """Initialize a custom component. Args: library_name: The name of the library. install: Whether to install package from this local custom component in editable mode. loglevel: The log level to use. Raises: Exit: If the pyproject.toml already exists. """ from reflex.utils import exec, prerequisites console.set_log_level(loglevel) if os.path.exists(CustomComponents.PYPROJECT_TOML): console.error(f"A {CustomComponents.PYPROJECT_TOML} already exists. Aborting.") typer.Exit(code=1) # Show system info. exec.output_system_info() # Check the name follows the convention if picked. name_variants = _validate_library_name(library_name) console.rule(f"[bold]Initializing {name_variants.package_name} project") _populate_custom_component_project(name_variants) _populate_demo_app(name_variants) # Initialize the .gitignore. prerequisites.initialize_gitignore( gitignore_file=CustomComponents.FILE, files_to_ignore=CustomComponents.DEFAULTS ) if install: package_name = name_variants.package_name console.rule(f"[bold]Installing {package_name} in editable mode.") if _pip_install_on_demand(package_name=".", install_args=["-e"]): console.info(f"Package {package_name} installed!") else: raise typer.Exit(code=1) console.print("[bold]Custom component initialized successfully!") console.rule("[bold]Project Summary") console.print( f"[ {CustomComponents.PACKAGE_README} ]: Package description. Please add usage examples." ) console.print( f"[ {CustomComponents.PYPROJECT_TOML} ]: Project configuration file. Please fill in details such as your name, email, homepage URL." ) console.print( f"[ {CustomComponents.SRC_DIR}/ ]: Custom component code template. Start by editing it with your component implementation." ) console.print( f"[ {name_variants.demo_app_dir}/ ]: Demo App. Add more code to this app and test." ) def _pip_install_on_demand( package_name: str, install_args: list[str] | None = None, ) -> bool: """Install a package on demand. Args: package_name: The name of the package. install_args: The additional arguments for the pip install command. Returns: True if the package is installed successfully, False otherwise. """ install_args = install_args or [] install_cmds = [ sys.executable, "-m", "pip", "install", *install_args, package_name, ] console.debug(f"Install package: {' '.join(install_cmds)}") return _run_commands_in_subprocess(install_cmds) def _run_commands_in_subprocess(cmds: list[str]) -> bool: """Run commands in a subprocess. Args: cmds: The commands to run. Returns: True if the command runs successfully, False otherwise. """ console.debug(f"Running command: {' '.join(cmds)}") try: result = subprocess.run(cmds, capture_output=True, text=True, check=True) console.debug(result.stdout) return True except subprocess.CalledProcessError as cpe: console.error(cpe.stdout) console.error(cpe.stderr) return False def _make_pyi_files(): """Create pyi files for the custom component.""" package_name = _get_package_config()["project"]["name"] for dir, _, _ in os.walk(f"./{package_name}"): if "__pycache__" in dir: continue PyiGenerator().scan_all([dir]) def _run_build(): """Run the build command. Raises: Exit: If the build fails. """ console.print("Building custom component...") _make_pyi_files() cmds = [sys.executable, "-m", "build", "."] if _run_commands_in_subprocess(cmds): console.info("Custom component built successfully!") else: raise typer.Exit(code=1) @custom_components_cli.command(name="build") def build( loglevel: constants.LogLevel = typer.Option( config.loglevel, help="The log level to use." ), ): """Build a custom component. Must be run from the project root directory where the pyproject.toml is. Args: loglevel: The log level to use. """ console.set_log_level(loglevel) _run_build() def _validate_repository_name(repository: str | None) -> str: """Validate the repository name. Args: repository: The name of the repository. Returns: The name of the repository. Raises: Exit: If the repository name is not supported. """ if repository is None: return "pypi" elif repository not in CustomComponents.REPO_URLS: console.error( f"Unsupported repository name. Allow {CustomComponents.REPO_URLS.keys()}, got {repository}" ) raise typer.Exit(code=1) return repository def _validate_credentials( username: str | None, password: str | None, token: str | None ) -> tuple[str, str]: """Validate the credentials. Args: username: The username to use for authentication on python package repository. password: The password to use for authentication on python package repository. token: The token to use for authentication on python package repository. Raises: Exit: If the appropriate combination of credentials is not provided. Returns: The username and password. """ if token is not None: if username is not None or password is not None: console.error("Cannot use token and username/password at the same time.") raise typer.Exit(code=1) username = "__token__" password = token elif username is None or password is None: console.error( "Must provide both username and password for authentication if not using a token." ) raise typer.Exit(code=1) return username, password def _get_version_to_publish() -> str: """Get the version to publish from the pyproject.toml. Returns: The version to publish. """ return _get_package_config()["project"]["version"] def _ensure_dist_dir(version_to_publish: str, build: bool): """Ensure the distribution directory and the expected files exist. Args: version_to_publish: The version to be published. build: Whether to build the package first. Raises: Exit: If the distribution directory does not exist, or the expected files are not found. """ dist_dir = Path(CustomComponents.DIST_DIR) if build: # Need to check if the files here are for the version to be published. if dist_dir.exists(): # Check if the distribution files are for the version to be published. needs_rebuild = False for suffix in CustomComponents.DISTRIBUTION_FILE_SUFFIXES: if not list(dist_dir.glob(f"*{version_to_publish}*{suffix}")): console.debug( f"Expected distribution file with suffix {suffix} for version {version_to_publish} not found in directory {dist_dir.name}" ) needs_rebuild = True break else: needs_rebuild = True if not needs_rebuild: needs_rebuild = ( console.ask( "Distribution files for the version to be published already exist. Do you want to rebuild?", choices=["y", "n"], default="n", ) == "y" ) if needs_rebuild: _run_build() # Check if the distribution directory exists. if not dist_dir.exists(): console.error(f"Directory {dist_dir.name} does not exist. Please build first.") raise typer.Exit(code=1) # Check if the distribution directory is indeed a directory. if not dist_dir.is_dir(): console.error( f"{dist_dir.name} is not a directory. If this is a file you added, move it and rebuild." ) raise typer.Exit(code=1) # Check if the distribution files exist. for suffix in CustomComponents.DISTRIBUTION_FILE_SUFFIXES: if not list(dist_dir.glob(f"*{suffix}")): console.error( f"Expected distribution file with suffix {suffix} in directory {dist_dir.name}" ) raise typer.Exit(code=1) @custom_components_cli.command(name="publish") def publish( repository: Optional[str] = typer.Option( None, "-r", "--repository", help="The name of the repository. Defaults to pypi. Only supports pypi and testpypi (Test PyPI) for now.", ), token: Optional[str] = typer.Option( None, "-t", "--token", help="The API token to use for authentication on python package repository. If token is provided, no username/password should be provided at the same time", ), username: Optional[str] = typer.Option( None, "-u", "--username", help="The username to use for authentication on python package repository. Username and password must both be provided.", ), password: Optional[str] = typer.Option( None, "-p", "--password", help="The password to use for authentication on python package repository. Username and password must both be provided.", ), build: bool = typer.Option( True, help="Whether to build the package before publishing. If the package is already built, set this to False.", ), share: bool = typer.Option( True, help="Whether to prompt to share more details on the published package. Only applicable when published to PyPI. Defaults to True.", ), validate_project_info: bool = typer.Option( True, help="Whether to interactively validate the project information in the pyproject.toml file.", ), loglevel: constants.LogLevel = typer.Option( config.loglevel, help="The log level to use." ), ): """Publish a custom component. Must be run from the project root directory where the pyproject.toml is. Args: repository: The name of the Python package repository, such pypi, testpypi. token: The token to use for authentication on python package repository. If token is provided, no username/password should be provided at the same time. username: The username to use for authentication on python package repository. password: The password to use for authentication on python package repository. build: Whether to build the distribution files. Defaults to True. share: Whether to prompt to share more details on the published package. Defaults to True. validate_project_info: whether to interactively validate the project information in the pyproject.toml file. Defaults to True. loglevel: The log level to use. Raises: Exit: If arguments provided are not correct or the publish fails. """ console.set_log_level(loglevel) # Validate the repository name. repository = _validate_repository_name(repository) console.print(f"Publishing custom component to {repository}...") # Validate the credentials. username, password = _validate_credentials(username, password, token) # Get the version to publish from the pyproject.toml. version_to_publish = _get_version_to_publish() # Validate the distribution directory. _ensure_dist_dir(version_to_publish=version_to_publish, build=build) if validate_project_info and ( console.ask( "Would you like to interactively review the package information?", choices=["y", "n"], default="y", ) == "y" ): _validate_project_info() publish_cmds = [ sys.executable, "-m", "twine", "upload", "--repository-url", CustomComponents.REPO_URLS[repository], "--username", username, "--password", password, "--non-interactive", f"{CustomComponents.DIST_DIR}/*{version_to_publish}*", ] if _run_commands_in_subprocess(publish_cmds): console.info("Custom component published successfully!") else: raise typer.Exit(1) # Only prompt to share more details on the published package if it is published to PyPI. if repository != "pypi" or not share: return # Ask user to share more details on the published package. if ( console.ask( "Would you like to include your published component on our gallery?", choices=["y", "n"], default="y", ) == "n" ): console.print( "If you decide to do this later, you can run `reflex component share` command. Thank you!" ) return _collect_details_for_gallery() def _process_entered_list(input: str | None) -> list | None: """Process the user entered comma separated list into a list if applicable. Args: input: the user entered comma separated list Returns: The list of items or None. """ return [t.strip() for t in (input or "").split(",") if t if input] or None def _validate_project_info(): """Validate the project information in the pyproject.toml file. Raises: Exit: If the pyproject.toml file is ill-formed. """ pyproject_toml = _get_package_config() try: project = pyproject_toml.get("project", {}) if not project: console.error("The project section not found in pyproject.toml") raise typer.Exit(code=1) console.print( f'Double check the information before publishing: {project["name"]} version {project["version"]}' ) except KeyError as ke: console.error(f"The pyproject.toml is possibly ill-formed due to {ke}") raise typer.Exit(code=1) from ke console.print("Update or enter to keep the current information.") project["description"] = console.ask( "short description", default=project.get("description", "") ) # PyPI only shows the first author. author = project.get("authors", [{}])[0] author["name"] = console.ask(f"Author Name", default=author.get("name", "")) author["email"] = console.ask(f"Author Email", default=author.get("email", "")) console.print(f'Current keywords are: {project.get("keywords") or []}') keyword_action = console.ask( "Keep, replace or append?", choices=["k", "r", "a"], default="k" ) new_keywords = [] if keyword_action == "r": new_keywords = ( _process_entered_list( console.ask("Enter new set of keywords separated by commas") ) or [] ) project["keywords"] = new_keywords elif keyword_action == "a": new_keywords = ( _process_entered_list( console.ask("Enter new set of keywords separated by commas") ) or [] ) project["keywords"] = project.get("keywords", []) + new_keywords if not project.get("urls"): project["urls"] = {} project["urls"]["homepage"] = console.ask( "homepage URL", default=project["urls"].get("homepage", "") ) project["urls"]["source"] = console.ask( "source code URL", default=project["urls"].get("source", "") ) pyproject_toml["project"] = project try: with open(CustomComponents.PYPROJECT_TOML, "w") as f: tomlkit.dump(pyproject_toml, f) except (OSError, TOMLKitError) as ex: console.error(f"Unable to write to pyproject.toml due to {ex}") raise typer.Exit(code=1) from ex def _collect_details_for_gallery(): """Helper to collect details on the custom component to be included in the gallery. Raises: Exit: If pyproject.toml file is ill-formed or the request to the backend services fails. """ from reflex.reflex import _login console.rule("[bold]Authentication with Reflex Services") console.print("First let's log in to Reflex backend services.") access_token = _login() console.rule("[bold]Custom Component Information") params = {} package_name = None try: package_name = _get_package_config(exit_on_fail=False)["project"]["name"] except (TOMLKitError, KeyError) as ex: console.debug( f"Unable to read from pyproject.toml in current directory due to {ex}" ) package_name = console.ask("[ Published python package name ]") console.print(f"[ Custom component package name ] : {package_name}") params["package_name"] = package_name # Check the backend services if the user is allowed to update information of this package is already shared. try: console.debug( f"Checking if user has permission to upsert information for {package_name} by POST." ) # Send a POST request to achieve two things at once: # 1. Check if the package is already shared by the user. If not, the backend will return 403. # 2. If this package is not shared before, this request records the package name in the backend. response = httpx.post( POST_CUSTOM_COMPONENTS_GALLERY_ENDPOINT, headers={"Authorization": f"Bearer {access_token}"}, data=params, ) if response.status_code == httpx.codes.FORBIDDEN: console.error( f"{package_name} is owned by another user. Unable to update the information for it." ) raise typer.Exit(code=1) response.raise_for_status() except httpx.HTTPError as he: console.error(f"Unable to complete request due to {he}.") raise typer.Exit(code=1) from he files = [] if (image_file_and_extension := _get_file_from_prompt_in_loop()) is not None: files.append( ("files", (image_file_and_extension[1], image_file_and_extension[0])) ) demo_url = None while True: demo_url = ( console.ask( "[ Full URL of deployed demo app, e.g. `https://my-app.reflex.run` ] (enter to skip)" ) or None ) if _validate_url_with_protocol_prefix(demo_url): break if demo_url: params["demo_url"] = demo_url # Now send the post request to Reflex backend services. try: console.debug(f"Sending custom component data: {params}") response = httpx.post( POST_CUSTOM_COMPONENTS_GALLERY_ENDPOINT, headers={"Authorization": f"Bearer {access_token}"}, data=params, files=files, timeout=POST_CUSTOM_COMPONENTS_GALLERY_TIMEOUT, ) response.raise_for_status() except httpx.HTTPError as he: console.error(f"Unable to complete request due to {he}.") raise typer.Exit(code=1) from he console.info("Custom component information successfully shared!") def _validate_url_with_protocol_prefix(url: str | None) -> bool: """Validate the URL with protocol prefix. Empty string is acceptable. Args: url: the URL string to check. Returns: Whether the entered URL is acceptable. """ return not url or (url.startswith("http://") or url.startswith("https://")) def _get_file_from_prompt_in_loop() -> Tuple[bytes, str] | None: image_file = file_extension = None while image_file is None: image_filepath = console.ask( f"Upload a preview image of your demo app (enter to skip)" ) if not image_filepath: break file_extension = image_filepath.split(".")[-1] try: with open(image_filepath, "rb") as f: image_file = f.read() return image_file, file_extension except OSError as ose: console.error(f"Unable to read the {file_extension} file due to {ose}") raise typer.Exit(code=1) from ose console.debug(f"File extension detected: {file_extension}") return None @custom_components_cli.command(name="share") def share_more_detail( loglevel: constants.LogLevel = typer.Option( config.loglevel, help="The log level to use." ), ): """Collect more details on the published package for gallery. Args: loglevel: The log level to use. """ console.set_log_level(loglevel) _collect_details_for_gallery()