[feat] Add v2 cookiecutter support

Author: sfc-gh-bnisco

.github/replay-files/v2/template.json

@@ -3,9 +3,9 @@
     "author_name": "John Smith",
     "author_email": "[email protected]",
     "project_name": "Streamlit Component X",
-    "package_name": "streamlit-component-x",
-    "import_name": "streamlit_component_x",
-    "description": "Streamlit component that v2 component template",
+    "package_name": "streamlit-custom-component",
+    "import_name": "my_component",
+    "description": "Streamlit component that allows you to do X",
     "open_source_license": "MIT license",
     "framework": "React + Typescript"
   }

cookiecutter/v1/{{ cookiecutter.package_name }}/e2e/test_template.py

@@ -1,14 +1,13 @@
 from pathlib import Path
 
 import pytest
-
-from playwright.sync_api import Page, expect
-
 from e2e_utils import StreamlitRunner
+from playwright.sync_api import Page, expect
 
 ROOT_DIRECTORY = Path(__file__).parent.parent.absolute()
 BASIC_EXAMPLE_FILE = ROOT_DIRECTORY / "my_component" / "example.py"
 
+
 @pytest.fixture(autouse=True, scope="module")
 def streamlit_app():
     with StreamlitRunner(BASIC_EXAMPLE_FILE) as runner:
@@ -23,15 +22,11 @@ def go_to_app(page: Page, streamlit_app: StreamlitRunner):
 
 
 def test_should_render_template(page: Page):
-    frame_0 = page.frame_locator(
-        'iframe[title="my_component\\.my_component"]'
-    ).nth(0)
-    frame_1 = page.frame_locator(
-        'iframe[title="my_component\\.my_component"]'
-    ).nth(1)
+    frame_0 = page.frame_locator('iframe[title="my_component\\.my_component"]').nth(0)
+    frame_1 = page.frame_locator('iframe[title="my_component\\.my_component"]').nth(1)
 
-    st_markdown_0 = page.get_by_role('paragraph').nth(0)
-    st_markdown_1 = page.get_by_role('paragraph').nth(1)
+    st_markdown_0 = page.get_by_role("paragraph").nth(0)
+    st_markdown_1 = page.get_by_role("paragraph").nth(1)
 
     expect(st_markdown_0).to_contain_text("You've clicked 0 times!")
 
@@ -66,7 +61,7 @@ def test_should_change_iframe_height(page: Page):
     locator = page.locator('iframe[title="my_component\\.my_component"]').nth(1)
 
     page.wait_for_timeout(1000)
-    init_frame_height = locator.bounding_box()['height']
+    init_frame_height = locator.bounding_box()["height"]
     assert init_frame_height != 0
 
     page.get_by_label("Enter a name").click()
@@ -77,13 +72,13 @@ def test_should_change_iframe_height(page: Page):
     expect(frame.get_by_text("Streamlit Streamlit Streamlit")).to_be_visible()
 
     page.wait_for_timeout(1000)
-    frame_height = locator.bounding_box()['height']
+    frame_height = locator.bounding_box()["height"]
     assert frame_height > init_frame_height
 
     page.set_viewport_size({"width": 150, "height": 150})
 
     expect(frame.get_by_text("Streamlit Streamlit Streamlit")).not_to_be_in_viewport()
 
     page.wait_for_timeout(1000)
-    frame_height_after_viewport_change = locator.bounding_box()['height']
+    frame_height_after_viewport_change = locator.bounding_box()["height"]
     assert frame_height_after_viewport_change > frame_height

cookiecutter/v2/README.md

@@ -0,0 +1,18 @@
+# Streamlit template for CookieCutter
+
+Template for creating a streamlit component
+
+## Usage
+
+### Run Cookiecutter via uvx
+
+```
+uvx cookiecutter https://github.com/streamlit/component-template.git --directory=cookiecutter/v2
+```
+
+Follow the prompts to generate your project.
+
+More info:
+
+- Cookiecutter: `https://pypi.org/project/cookiecutter/`
+- uv tools: `https://docs.astral.sh/uv/guides/tools/`

cookiecutter/v2/cookiecutter.json

@@ -0,0 +1,20 @@
+{
+  "author_name": "John Smith",
+  "author_email": "[email protected]",
+  "project_name": "Streamlit Component X",
+  "package_name": "{{ cookiecutter.project_name.lower().replace(' ', '-') }}",
+  "import_name": "{{ cookiecutter.package_name.lower().replace('-', '_') }}",
+  "description": "Streamlit component that allows you to do X",
+  "open_source_license": [
+    "MIT license",
+    "BSD license",
+    "ISC license",
+    "Apache Software License 2.0",
+    "GNU General Public License v3",
+    "Not open source"
+  ],
+  "framework": [
+    "React + Typescript",
+    "Pure Typescript"
+  ]
+}

cookiecutter/v2/hooks/post_gen_project.py

@@ -0,0 +1,14 @@
+import shutil
+from pathlib import Path
+
+project_dir = Path("{{ cookiecutter.import_name }}").absolute()
+
+framework = "{{ cookiecutter.framework }}"
+if framework == "React + Typescript":
+    shutil.move(str(project_dir / "frontend-react"), str(project_dir / "frontend"))
+    shutil.rmtree(str(project_dir / "frontend-reactless"))
+elif framework == "Pure Typescript":
+    shutil.move(str(project_dir / "frontend-reactless"), str(project_dir / "frontend"))
+    shutil.rmtree(str(project_dir / "frontend-react"))
+else:
+    raise Exception(f"Unsupported option: {framework!r}")

cookiecutter/v2/{{ cookiecutter.package_name }}/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2018-2021 Streamlit Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

cookiecutter/v2/{{ cookiecutter.package_name }}/MANIFEST.in

@@ -0,0 +1,2 @@
+recursive-include {{ cookiecutter.import_name }}/frontend/build *
+include pyproject.toml

cookiecutter/v2/{{ cookiecutter.package_name }}/README.md

@@ -0,0 +1,21 @@
+# {{ cookiecutter.package_name }}
+
+{{ cookiecutter.description }}
+
+## Installation instructions
+
+```sh
+pip install {{ cookiecutter.package_name }}
+```
+
+## Usage instructions
+
+```python
+import streamlit as st
+
+from {{ cookiecutter.import_name }} import {{ cookiecutter.import_name }}
+
+value = {{ cookiecutter.import_name }}()
+
+st.write(value)
+```

cookiecutter/v2/{{ cookiecutter.package_name }}/example.py

@@ -0,0 +1,28 @@
+import streamlit as st
+from {{ cookiecutter.import_name }} import {{ cookiecutter.import_name }}
+
+# Add some test code to play with the component while it's in development.
+# During development, we can run this just as we would any other Streamlit
+# app: `$ streamlit run {{ cookiecutter.import_name }}/example.py`
+
+st.subheader("Component with constant args")
+
+# Create an instance of our component with a constant `name` arg, and
+# print its output value.
+result = {{ cookiecutter.import_name }}("World")
+st.markdown("You've clicked %s times!" % int(result["num_clicks"]))
+
+st.markdown("---")
+st.subheader("Component with variable args")
+
+# Create a second instance of our component whose `name` arg will vary
+# based on a text_input widget.
+#
+# We use the special "key" argument to assign a fixed identity to this
+# component instance. By default, when a component's arguments change,
+# it is considered a new instance and will be re-mounted on the frontend
+# and lose its current state. In this case, we want to vary the component's
+# "name" argument without having it get recreated.
+name_input = st.text_input("Enter a name", value="Streamlit")
+result = {{ cookiecutter.import_name }}(name_input, key="foo")
+st.markdown("You've clicked %s times!" % int(result["num_clicks"]))

cookiecutter/v2/{{ cookiecutter.package_name }}/pyproject.toml

@@ -0,0 +1,41 @@
+[build-system]
+requires = ["setuptools>=61.0", "wheel"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "{{ cookiecutter.package_name }}"
+version = "0.0.1"
+description = "{{ cookiecutter.description }}"
+readme = "README.md"
+requires-python = ">=3.10"
+authors = [
+  { name = "{{ cookiecutter.author_name }}", email = "{{ cookiecutter.author_email }}" },
+]
+# TODO: Restore this
+# dependencies = ["streamlit >= 1.51"]
+
+[project.optional-dependencies]
+devel = [
+  "wheel",
+  "pytest==7.4.0",
+  "playwright==1.48.0",
+  "requests==2.31.0",
+  "pytest-playwright-snapshot==1.0",
+  "pytest-rerunfailures==12.0",
+]
+
+[project.license]
+file = "LICENSE"
+
+[tool.setuptools.packages.find]
+include = ["{{ cookiecutter.import_name }}*"]
+
+[tool.setuptools]
+include-package-data = true
+
+[tool.setuptools.package-data]
+{{ cookiecutter.import_name }} = ["frontend/build/**/*", "pyproject.toml"]
+
+[[tool.streamlit.component.components]]
+name = "{{ cookiecutter.import_name }}"
+asset_dir = "{{ cookiecutter.import_name }}/frontend/build"