Feature/custom components v2

components/blocks/autofunction.js

@@ -159,15 +159,19 @@ const Autofunction = ({
   let headerTitle;
   let body;
   let isClass;
+  let isInterface;
   let isAttributeDict;
+  let isTypeAlias;
   let methods = [];
   let properties = [];
 
   if (streamlitFunction in docstrings || oldStreamlitFunction in docstrings) {
     functionObject =
       docstrings[streamlitFunction] ?? docstrings[oldStreamlitFunction];
-    isClass = functionObject.is_class;
+    isClass = functionObject.is_class ?? false;
+    isInterface = functionObject.is_interface ?? false;
     isAttributeDict = functionObject.is_attribute_dict ?? false;
+    isTypeAlias = functionObject.type === "type_alias";
     if (
       functionObject.description !== undefined &&
       functionObject.description
@@ -222,9 +226,15 @@ const Autofunction = ({
   if (hideHeader !== undefined && hideHeader) {
     header = "";
   } else {
-    const name = functionObject.signature
-      ? `${functionObject.signature}`.split("(")[0].replace("streamlit", "st")
-      : "";
+    const name =
+      isInterface || isTypeAlias
+        ? functionObject.name
+        : functionObject.signature
+          ? `${functionObject.signature}`
+              .split("(")[0]
+              .replace("streamlit", "st")
+          : "";
+    console.log("NAME:", name);
     headerTitle = isAttributeDict ? (
       <H3 className={styles.Title}>
         <a
@@ -351,10 +361,10 @@ const Autofunction = ({
     // When "Parameters" are included in a class docstring, they are actually
     // "Properties." Using "Properties" in the docstring does not result in
     // individually parsed properties; using "Parameters" is a workaround.
-    if (isClass) {
-      propertiesRows.push(row);
-    } else {
+    if (!isClass || isInterface) {
       args.push(row);
+    } else {
+      propertiesRows.push(row);
     }
   }
 
@@ -364,7 +374,9 @@ const Autofunction = ({
     const row = {};
     const method = methods[index];
     const slicedSlug = slug.slice().join("/");
-    const hrefName = `${functionObject.name}.${method.name}`
+    const hrefName = (
+      isTypeAlias ? method.name : `${functionObject.name}.${method.name}`
+    )
       .toLowerCase()
       .replace("streamlit", "st")
       .replace(/[.,\/#!$%\^&\*;:{}=\-`~()]/g, "");
@@ -462,7 +474,11 @@ const Autofunction = ({
           : {
               title: (
                 <>
-                  {isClass ? "Class description" : "Function signature"}
+                  {isTypeAlias
+                    ? "(TypeScript) Type alias description"
+                    : isClass
+                      ? "Class description"
+                      : "Function signature"}
                   <a
                     className={styles.Title.a}
                     href={functionObject.source}
@@ -481,12 +497,27 @@ const Autofunction = ({
               content: `<p class='code'> ${functionObject.signature}</p> `,
             }
       }
-      body={args.length ? { title: "Parameters" } : null}
+      body={
+        args.length
+          ? {
+              title:
+                isTypeAlias && !isInterface
+                  ? "Properties"
+                  : isTypeAlias
+                    ? "Arguments"
+                    : "Parameters",
+            }
+          : null
+      }
       bodyRows={args.length ? args : null}
       foot={[
-        methods.length ? { title: "Methods" } : null,
+        methods.length
+          ? { title: isTypeAlias ? "Functions" : "Methods" }
+          : null,
         returns.length ? { title: "Returns" } : null,
-        propertiesRows.length ? { title: "Attributes" } : null,
+        propertiesRows.length
+          ? { title: isTypeAlias ? "Properties" : "Attributes" }
+          : null,
       ].filter((section) => section !== null)}
       footRows={[
         methods.length ? methodRows : null,

content/develop/api-reference/_index.md

@@ -2424,6 +2424,82 @@ st.write(user_info)
 
 <br />
 
+#### V2 custom components
+
+<TileContainer>
+
+<RefCard href="/develop/api-reference/custom-components/st.components.v2.component">
+
+<h4>Register</h4>
+
+Register a custom component.
+
+```python
+my_component = st.components.v2.component(
+    html=HTML,
+    js=JS
+)
+my_component()
+```
+
+</RefCard>
+
+<RefCard href="/develop/api-reference/custom-components/st.components.v2.types.bidicomponentcallable">
+
+<h4>Mount</h4>
+
+Mount a custom component.
+
+```python
+my_component = st.components.v2.component(
+    html=HTML,
+    js=JS
+)
+my_component()
+```
+
+</RefCard>
+
+<RefCard href="/develop/api-reference/custom-components/component-v2-lib-component">
+
+<h4>Component</h4>
+
+Type alias for the component function.
+
+```typescript
+import { Component } from "@streamlit/component-v2-lib";
+```
+
+</RefCard>
+
+<RefCard href="/develop/api-reference/custom-components/component-v2-lib-componentargs">
+
+<h4>ComponentArgs</h4>
+
+Type alias for the component arguments.
+
+```typescript
+import { ComponentArgs } from "@streamlit/component-v2-lib";
+```
+
+</RefCard>
+
+<RefCard href="/develop/api-reference/custom-components/component-v2-lib-componentstate">
+
+<h4>ComponentState</h4>
+
+Type alias for the component state.
+
+```typescript
+import { ComponentState } from "@streamlit/component-v2-lib";
+```
+
+</RefCard>
+
+</TileContainer>
+
+#### V1 custom components
+
 <TileContainer>
 
 <RefCard href="/develop/api-reference/custom-components/st.components.v1.declare_component">

content/develop/api-reference/custom-components/_index.md

@@ -2,11 +2,97 @@
 title: Custom components
 slug: /develop/api-reference/custom-components
 description: Use Streamlit's custom components to create and integrate custom UI elements in your app.
-keywords: custom components, declare_component, html, iframe, frontend, react, javascript, custom ui, components v1
+keywords: custom components, declare_component, html, iframe, frontend, react, javascript, custom ui, components v1, components v2
 ---
 
 # Custom components
 
+Streamlit custom components allow you to create and integrate custom UI elements that extend beyond Streamlit's built-in widgets. There are two versions available: V2 components offer a modern, streamlined approach with TypeScript support, while V1 components use iframe isolation for custom elements built with HTML and JavaScript.
+
+## V2 custom components
+
+### Backend (Python)
+
+<TileContainer>
+
+<RefCard href="/develop/api-reference/custom-components/st.components.v2.component">
+
+<h4>Register</h4>
+
+Register a custom component.
+
+```python
+my_component = st.components.v2.component(
+    html=HTML,
+    js=JS
+)
+my_component()
+```
+
+</RefCard>
+
+<RefCard href="/develop/api-reference/custom-components/st.components.v2.types.bidicomponentcallable">
+
+<h4>Mount</h4>
+
+Mount a custom component.
+
+```python
+my_component = st.components.v2.component(
+    html=HTML,
+    js=JS
+)
+my_component()
+```
+
+</RefCard>
+
+</TileContainer>
+
+### Frontend (TypeScript)
+
+<TileContainer>
+
+<RefCard href="/develop/api-reference/custom-components/component-v2-lib-component">
+
+<h4>Component</h4>
+
+Type alias for the component function.
+
+```typescript
+import { Component } from "@streamlit/component-v2-lib";
+```
+
+</RefCard>
+
+<RefCard href="/develop/api-reference/custom-components/component-v2-lib-componentargs">
+
+<h4>ComponentArgs</h4>
+
+Type alias for the component arguments.
+
+```typescript
+import { ComponentArgs } from "@streamlit/component-v2-lib";
+```
+
+</RefCard>
+
+<RefCard href="/develop/api-reference/custom-components/component-v2-lib-componentstate">
+
+<h4>ComponentState</h4>
+
+Type alias for the component state.
+
+```typescript
+import { ComponentState } from "@streamlit/component-v2-lib";
+```
+
+</RefCard>
+
+</TileContainer>
+
+## V1 custom components
+
 <TileContainer>
 
 <RefCard href="/develop/api-reference/custom-components/st.components.v1.declare_component">

content/develop/api-reference/custom-components/bidicomponentcallable.md

@@ -0,0 +1,10 @@
+---
+title: BidiComponentCallable
+slug: /develop/api-reference/custom-components/st.components.v2.types.bidicomponentcallable
+description: Python interface for mounting Streamlit v2 custom components, enabling seamless data exchange with custom UI.
+keywords: bidicomponentcallable, bidirectional, custom components v2, interface, component mounting, streamlit api, component state, data exchange
+---
+
+<Autofunction function="BidiComponentCallable" />
+
+<Autofunction function="BidiComponentResult" />

content/develop/api-reference/custom-components/component.md

@@ -0,0 +1,8 @@
+---
+title: st.components.v2.component
+slug: /develop/api-reference/custom-components/st.components.v2.component
+description: st.components.v2.component registers a v2 custom component, enabling seamless integration of custom UI elements in Streamlit applications.
+keywords: st.components.v2.component, custom components v2, register component, html, css, javascript, streamlit component, custom ui, component creation, frontend integration
+---
+
+<Autofunction function="streamlit.components.v2.component" />

content/develop/api-reference/custom-components/ts.component-v2-lib.md

@@ -0,0 +1,26 @@
+---
+title: Component
+slug: /develop/api-reference/custom-components/component-v2-lib
+description: Import TypeScript type aliases from an npm-published package.
+keywords: component, typescript, custom components v2, type alias, frontend, streamlit component library, component-v2-lib, type safety, javascript frameworks, react
+---
+
+## `@streamlit/component-v2-lib`
+
+The [`@streamlit/component-v2-lib`](https://www.npmjs.com/package/@streamlit/component-v2-lib) package provides TypeScript type definitions and utilities for building Streamlit custom components using the v2 API.
+
+### Installation
+
+Install the package from npm:
+
+```bash
+npm i @streamlit/component-v2-lib
+```
+
+### Package Information
+
+- **Package name**: `@streamlit/component-v2-lib`
+- **Registry**: [npm](https://www.npmjs.com/package/@streamlit/component-v2-lib)
+- **Purpose**: TypeScript type aliases and utilities for custom components v2
+
+This package enables type-safe development when creating custom Streamlit components with modern JavaScript frameworks.

content/develop/api-reference/custom-components/ts.component.md

@@ -0,0 +1,8 @@
+---
+title: Component
+slug: /develop/api-reference/custom-components/component-v2-lib-component
+description: TypeScript type alias for custom components v2 frontend functions, enabling streamlined component development with type safety and modern JavaScript frameworks.
+keywords: component, typescript, custom components v2, type alias, frontend, streamlit component library, component-v2-lib, type safety, javascript frameworks, react
+---
+
+<Autofunction function="@streamlit/component-v2-lib/Component" />

content/develop/api-reference/custom-components/ts.component_args.md

@@ -0,0 +1,11 @@
+---
+title: ComponentArgs
+slug: /develop/api-reference/custom-components/component-v2-lib-componentargs
+description: TypeScript type alias for custom components v2 arguments, providing type-safe access to component properties, state management, and trigger functions for frontend interactions.
+keywords: componentargs, typescript, custom components v2, component arguments, state management, setStateValue, setTriggerValue, frontend interface, component-v2-lib, type safety
+---
+
+<Autofunction function="@streamlit/component-v2-lib/ComponentArgs" />
+
+<Autofunction function="@streamlit/component-v2-lib/ComponentArgs.setStateValue" />
+<Autofunction function="@streamlit/component-v2-lib/ComponentArgs.setTriggerValue" />

content/develop/api-reference/custom-components/ts.component_cleanup_function.md

@@ -0,0 +1,10 @@
+---
+title: ComponentState
+slug: /develop/api-reference/custom-components/component-v2-lib-optionalcomponentcleanupfunction
+description: TypeScript type alias for custom components v2 state management, enabling type-safe state persistence and data flow between component renders and user interactions.
+keywords: componentstate, typescript, custom components v2, state management, component state, state persistence, frontend interface, component-v2-lib, type safety, data flow
+---
+
+<Autofunction function="@streamlit/component-v2-lib/OptionalComponentCleanupFunction" />
+
+<Autofunction function="@streamlit/component-v2-lib/ComponentCleanupFunction" />

content/develop/api-reference/custom-components/ts.component_state.md

@@ -0,0 +1,8 @@
+---
+title: ComponentState
+slug: /develop/api-reference/custom-components/component-v2-lib-componentstate
+description: TypeScript type alias for custom components v2 state management, enabling type-safe state persistence and data flow between component renders and user interactions.
+keywords: componentstate, typescript, custom components v2, state management, component state, state persistence, frontend interface, component-v2-lib, type safety, data flow
+---
+
+<Autofunction function="@streamlit/component-v2-lib/ComponentState" />