[feat] Add v2 template-reactless cookiecutter support (#114)

### TL;DR

Added support for Pure TypeScript components without React in the v2 component template.

### What changed?

- Added a new template variant for v2 components that uses Pure TypeScript instead of React
- Created a new replay file for the reactless template
- Updated the cookiecutter template to conditionally include React or Pure TypeScript based on framework choice
- Updated installation instructions to use `uv pip install` instead of `pip install`
- Added detailed build instructions for packaging components as wheels

Author: sfc-gh-bnisco

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

@@ -0,0 +1,12 @@
+{
+  "cookiecutter": {
+    "author_name": "John Smith",
+    "author_email": "[email protected]",
+    "project_name": "Streamlit Component X",
+    "package_name": "streamlit-custom-component",
+    "import_name": "my_component",
+    "description": "Streamlit component that allows you to do X",
+    "open_source_license": "MIT license",
+    "framework": "Pure Typescript"
+  }
+}

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

@@ -5,7 +5,7 @@
 ## Installation instructions
 
 ```sh
-pip install {{ cookiecutter.package_name }}
+uv pip install {{ cookiecutter.package_name }}
 ```
 
 ## Usage instructions
@@ -19,3 +19,31 @@ value = {{ cookiecutter.import_name }}()
 
 st.write(value)
 ```
+
+## Build a wheel
+
+To package this component for distribution:
+
+1. Build the frontend assets (from `{{ cookiecutter.import_name }}/frontend`):
+
+   ```sh
+   npm i
+   npm run build
+   ```
+
+2. Build the Python wheel using UV (from the project root with `pyproject.toml`):
+   ```sh
+   uv run --with build python -m build --wheel
+   ```
+
+This will create a `dist/` directory containing your wheel. The wheel includes the compiled frontend from `{{ cookiecutter.import_name }}/frontend/build`.
+
+### Requirements
+
+- Python >= 3.10
+- Node.js >= 24 (LTS)
+
+### Expected output
+
+- `dist/{{ cookiecutter.package_name|replace('-', '_') }}-0.0.1-py3-none-any.whl`
+- If you run `uv run --with build python -m build` (without `--wheel`), you’ll also get an sdist: `dist/{{ cookiecutter.package_name }}-0.0.1.tar.gz`

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

@@ -0,0 +1,84 @@
+from pathlib import Path
+
+import pytest
+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:
+        yield runner
+
+
+@pytest.fixture(autouse=True, scope="function")
+def go_to_app(page: Page, streamlit_app: StreamlitRunner):
+    page.goto(streamlit_app.server_url)
+    # Wait for app to load
+    page.get_by_role("img", name="Running...").is_hidden()
+
+
+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)
+
+    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!")
+
+    frame_0.get_by_role("button", name="Click me!").click()
+
+    expect(st_markdown_0).to_contain_text("You've clicked 1 times!")
+    expect(st_markdown_1).to_contain_text("You've clicked 0 times!")
+
+    frame_1.get_by_role("button", name="Click me!").click()
+    frame_1.get_by_role("button", name="Click me!").click()
+
+    expect(st_markdown_0).to_contain_text("You've clicked 1 times!")
+    expect(st_markdown_1).to_contain_text("You've clicked 2 times!")
+
+    page.get_by_label("Enter a name").click()
+    page.get_by_label("Enter a name").fill("World")
+    page.get_by_label("Enter a name").press("Enter")
+
+    expect(frame_1.get_by_text("Hello, World!")).to_be_visible()
+
+    frame_1.get_by_role("button", name="Click me!").click()
+
+    expect(st_markdown_0).to_contain_text("You've clicked 1 times!")
+    expect(st_markdown_1).to_contain_text("You've clicked 3 times!")
+
+
+def test_should_change_iframe_height(page: Page):
+    frame = page.frame_locator('iframe[title="my_component\\.my_component"]').nth(1)
+
+    expect(frame.get_by_text("Hello, Streamlit!")).to_be_visible()
+
+    locator = page.locator('iframe[title="my_component\\.my_component"]').nth(1)
+
+    page.wait_for_timeout(1000)
+    init_frame_height = locator.bounding_box()["height"]
+    assert init_frame_height != 0
+
+    page.get_by_label("Enter a name").click()
+
+    page.get_by_label("Enter a name").fill(35 * "Streamlit ")
+    page.get_by_label("Enter a name").press("Enter")
+
+    expect(frame.get_by_text("Streamlit Streamlit Streamlit")).to_be_visible()
+
+    page.wait_for_timeout(1000)
+    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"]
+    assert frame_height_after_viewport_change > frame_height

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

@@ -8,9 +8,7 @@ version = "0.0.1"
 description = "{{ cookiecutter.description }}"
 readme = "README.md"
 requires-python = ">=3.10"
-authors = [
-  { name = "{{ cookiecutter.author_name }}", email = "{{ cookiecutter.author_email }}" },
-]
+authors = [{ name = "{{ cookiecutter.author_name }}", email = "{{ cookiecutter.author_email }}" }]
 # TODO: Restore this
 # dependencies = ["streamlit >= 1.51"]
 

cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/__init__.py

@@ -1,14 +1,20 @@
-from typing import TYPE_CHECKING
-
 import streamlit as st
 
-if TYPE_CHECKING:
-    from streamlit.components.v2.bidi_component import BidiComponentResult
-
 out = st.components.v2.component(
     "{{ cookiecutter.package_name }}.{{ cookiecutter.import_name }}",
     js="index-*.js",
+    {%- if cookiecutter.framework == "React + Typescript" %}
     html='<div class="react-root"></div>',
+    {%- else %}
+    html="""
+        <div class="component-root">
+            <span>
+                <h1></h1>
+                <button>Click me!</button>
+            </span>
+        </div>
+    """,
+    {%- endif %}
 )
 
 

cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/src/index.ts

@@ -8,10 +8,48 @@ export type ComponentData = {
   name: string;
 };
 
-const Root: Component<ComponentState, ComponentData> = (args) => {
-  // TODO:
-};
+// Handle the possibility of multiple instances of the component to keep track
+// of any long-running state for each component instance.
+const instances: WeakMap<ComponentArgs["parentElement"], { numClicks: number }> = new WeakMap();
+
+const MyComponent: Component<ComponentState, ComponentData> = (args) => {
+  const { parentElement, data, setStateValue } = args;
+
+  const rootElement = parentElement.querySelector(".component-root");
+  if (!rootElement) {
+    throw new Error("Unexpected: root element not found");
+  }
+
+  // Set dynamic content
+  const heading = rootElement.querySelector("h1");
+  if (heading) {
+    heading.textContent = `Hello, ${data.name}!`;
+  }
 
-export default Root;
+  // Wire up interactions on existing DOM from Python-provided HTML
+  const button = rootElement.querySelector<HTMLButtonElement>("button");
+  if (!button) {
+    throw new Error("Unexpected: button element not found");
+  }
 
+  const handleClick = () => {
+    const numClicks = (instances.get(parentElement)?.numClicks || 0) + 1;
+    instances.set(parentElement, { numClicks });
+    setStateValue("num_clicks", numClicks);
+  };
+
+  // Set up event listener for the button when the component is first
+  // initialized
+  if (!instances.has(parentElement)) {
+    button.addEventListener("click", handleClick);
+    instances.set(parentElement, { numClicks: 0 });
+  }
+
+  // Cleanup
+  return () => {
+    button.removeEventListener("click", handleClick);
+    instances.delete(parentElement);
+  };
+};
 
+export default MyComponent;

dev.py

@@ -356,6 +356,24 @@ class CookiecutterVariant(typing.NamedTuple):
         repo_directory=THIS_DIRECTORY / "templates" / "v1" / "template-reactless",
         cookiecutter_dir=THIS_DIRECTORY / "cookiecutter" / "v1",
     ),
+    CookiecutterVariant(
+        replay_file=THIS_DIRECTORY
+        / ".github"
+        / "replay-files"
+        / "v2"
+        / "template.json",
+        repo_directory=THIS_DIRECTORY / "templates" / "v2" / "template",
+        cookiecutter_dir=THIS_DIRECTORY / "cookiecutter" / "v2",
+    ),
+    CookiecutterVariant(
+        replay_file=THIS_DIRECTORY
+        / ".github"
+        / "replay-files"
+        / "v2"
+        / "template-reactless.json",
+        repo_directory=THIS_DIRECTORY / "templates" / "v2" / "template-reactless",
+        cookiecutter_dir=THIS_DIRECTORY / "cookiecutter" / "v2",
+    ),
 ]
 
 

templates/v2/template-reactless/LICENSE

@@ -0,0 +1 @@
+YOUR LICENSE HERE

templates/v2/template-reactless/MANIFEST.in

@@ -0,0 +1,2 @@
+recursive-include my_component/frontend/build *
+include pyproject.toml

templates/v2/template-reactless/README.md

@@ -0,0 +1,49 @@
+# streamlit-custom-component
+
+Streamlit component that allows you to do X
+
+## Installation instructions
+
+```sh
+uv pip install streamlit-custom-component
+```
+
+## Usage instructions
+
+```python
+import streamlit as st
+
+from my_component import my_component
+
+value = my_component()
+
+st.write(value)
+```
+
+## Build a wheel
+
+To package this component for distribution:
+
+1. Build the frontend assets (from `my_component/frontend`):
+
+   ```sh
+   npm i
+   npm run build
+   ```
+
+2. Build the Python wheel using UV (from the project root with `pyproject.toml`):
+   ```sh
+   uv run --with build python -m build --wheel
+   ```
+
+This will create a `dist/` directory containing your wheel. The wheel includes the compiled frontend from `my_component/frontend/build`.
+
+### Requirements
+
+- Python >= 3.10
+- Node.js >= 24 (LTS)
+
+### Expected output
+
+- `dist/streamlit_custom_component-0.0.1-py3-none-any.whl`
+- If you run `uv run --with build python -m build` (without `--wheel`), you’ll also get an sdist: `dist/streamlit-custom-component-0.0.1.tar.gz`