Skip to content

Commit 0b6ac55

Browse files
sfc-gh-dmatthewsCopilot
sfc-gh-dmatthews
and
Copilot
authored
Release 1.53.0 (#1404)
* Fix TOML blocks * Accept filename in codeblocks * Fix null async import * Release note * New year of release notes * Bump OIDC release note * API updates * Rename component TypeScript types * Rename ccv2 types * Update generate.py * Fix source links for 1.52.0 * Update streamlit.json * Bump embedded apps * What's new * Cheat sheet * Widget identity * Update refcards with new names * Typo Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Typo Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix year --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 2e892e0 commit 0b6ac55

53 files changed

Lines changed: 13880 additions & 292 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/blocks/autofunction.js‎

Lines changed: 80 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ const { publicRuntimeConfig } = getConfig();
1616

1717
import styles from "./autofunction.module.css";
1818
import { getThemedUrl, getThemeFromDOM } from "../../lib/next/ThemeContext";
19+
import languageDisplayNames, {
20+
getPrismLanguage,
21+
} from "../../lib/languageDisplayNames";
1922

2023
const LATEST_VERSION = publicRuntimeConfig.LATEST_VERSION;
2124
const DEFAULT_VERSION = publicRuntimeConfig.DEFAULT_VERSION;
@@ -66,7 +69,7 @@ const Autofunction = ({
6669
});
6770
};
6871

69-
const highlightWithPrism = () => {
72+
const highlightWithPrism = async () => {
7073
if (isHighlighted) {
7174
return;
7275
}
@@ -78,28 +81,79 @@ const Autofunction = ({
7881
blockRef.current.getElementsByTagName("pre"),
7982
);
8083

81-
// Important: keep this in sync with components/block/code.js
84+
// Collect unique languages and transform pre elements
85+
const languagesNeeded = new Set();
86+
const ignoredClasses = new Set([
87+
"code",
88+
"literal-block",
89+
"last",
90+
"doctest-block",
91+
]);
92+
93+
// languageDisplayNames imported from ../../lib/languageDisplayNames
8294
pres.forEach((ele) => {
83-
// Detect language based on pre element class
84-
const isLiteralBlock = ele.classList.contains("literal-block");
85-
const language = isLiteralBlock ? "bash" : "python";
86-
const displayLanguage = isLiteralBlock ? "BASH" : "PYTHON";
95+
// Extract language from class list (e.g., "code toml literal-block" -> "toml")
96+
let language = "python"; // default
97+
98+
for (const cls of ele.classList) {
99+
if (!ignoredClasses.has(cls) && cls in languageDisplayNames) {
100+
language = cls;
101+
break;
102+
}
103+
}
104+
105+
// Map to Prism component name
106+
const prismLanguage = getPrismLanguage(language);
107+
languagesNeeded.add(prismLanguage);
108+
109+
// Check for filename from CSS class (set by stcode.py directive)
110+
// Filename is base64-encoded in a class like "stfilename-LnN0cmVhbWxpdC9zZWNyZXRzLnRvbWw"
111+
let filename = null;
112+
for (const cls of ele.classList) {
113+
if (cls.startsWith("stfilename-")) {
114+
const encoded = cls.substring(11); // Remove "stfilename-" prefix
115+
// Add padding back for base64 decode
116+
const padded = encoded + "=".repeat((4 - (encoded.length % 4)) % 4);
117+
try {
118+
// URL-safe base64 decode
119+
filename = atob(padded.replace(/-/g, "+").replace(/_/g, "/"));
120+
} catch (e) {
121+
console.error("Failed to decode filename:", e);
122+
}
123+
break;
124+
}
125+
}
126+
const displayLanguage =
127+
languageDisplayNames[language] || language.toUpperCase();
128+
129+
// Show language only if no filename (matching code.js behavior)
130+
const showLanguage = !filename;
87131

88132
const codeText = ele.innerHTML;
89133
const preTag = ele.cloneNode(true);
90134
const codeWrap = document.createElement("div");
91135
codeWrap.setAttribute("class", styles.CodeBlockContainer);
92136

93-
// Create language header
137+
// Create header with language and/or filename
94138
const header = document.createElement("div");
95139
header.setAttribute("class", `${styles.Header} code-block-header`);
96-
const langSpan = document.createElement("span");
97-
langSpan.setAttribute("class", styles.Language);
98-
langSpan.textContent = displayLanguage;
99-
header.appendChild(langSpan);
140+
141+
if (showLanguage) {
142+
const langSpan = document.createElement("span");
143+
langSpan.setAttribute("class", styles.Language);
144+
langSpan.textContent = displayLanguage;
145+
header.appendChild(langSpan);
146+
}
147+
148+
if (filename) {
149+
const filenameSpan = document.createElement("span");
150+
filenameSpan.setAttribute("class", styles.Filename);
151+
filenameSpan.textContent = filename;
152+
header.appendChild(filenameSpan);
153+
}
100154

101155
const codeTag = document.createElement("code");
102-
codeTag.setAttribute("class", `language-${language}`);
156+
codeTag.setAttribute("class", `language-${prismLanguage}`);
103157
preTag.classList.add("line-numbers");
104158
codeTag.innerHTML = codeText;
105159
preTag.textContent = null;
@@ -110,6 +164,20 @@ const Autofunction = ({
110164
ele.replaceWith(codeWrap);
111165
});
112166

167+
// Dynamically import all needed Prism language modules
168+
for (const lang of languagesNeeded) {
169+
try {
170+
await import(`prismjs/components/prism-${lang}`);
171+
} catch (error) {
172+
console.error(`Prism doesn't support this language: ${lang}`);
173+
}
174+
}
175+
176+
// Guard against component unmounting during async imports
177+
if (!blockRef.current) {
178+
return;
179+
}
180+
113181
Prism.highlightAllUnder(blockRef.current);
114182

115183
setIsHighlighted(true);

‎components/blocks/autofunction.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@
3131
@apply uppercase tracking-wider leading-none;
3232
}
3333

34+
/* Keep in sync with components/blocks/code.module.css */
35+
.Filename {
36+
@apply font-mono tracking-wider leading-none;
37+
}
38+
3439
/* Keep in sync with components/blocks/code.module.css */
3540
.CodeBlockContainer pre {
3641
@apply p-6 text-white font-medium relative leading-relaxed;

‎components/blocks/code.js‎

Lines changed: 8 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -68,49 +68,13 @@ const TryMeButton = ({ code }) => {
6868
);
6969
};
7070

71+
import languageDisplayNames, {
72+
getPrismLanguage,
73+
} from "../../lib/languageDisplayNames";
74+
7175
// Initialize the cache for imported languages.
7276
const languageImports = new Map();
7377

74-
// Map language identifiers to display-friendly names
75-
const languageDisplayNames = {
76-
python: "Python",
77-
javascript: "JavaScript",
78-
js: "JavaScript",
79-
typescript: "TypeScript",
80-
ts: "TypeScript",
81-
// Rename Bash to Terminal since Windows doesn't use Bash, and most of the commands we
82-
// mark as Bash here would actually work in any terminal.
83-
bash: "Terminal",
84-
sh: "Sh",
85-
shell: "Shell",
86-
json: "JSON",
87-
yaml: "YAML",
88-
yml: "YAML",
89-
html: "HTML",
90-
css: "CSS",
91-
sql: "SQL",
92-
toml: "TOML",
93-
markdown: "Markdown",
94-
md: "Markdown",
95-
jsx: "JSX",
96-
tsx: "TSX",
97-
go: "Go",
98-
rust: "Rust",
99-
ruby: "Ruby",
100-
java: "Java",
101-
c: "C",
102-
cpp: "C++",
103-
csharp: "C#",
104-
php: "PHP",
105-
swift: "Swift",
106-
kotlin: "Kotlin",
107-
scala: "Scala",
108-
r: "R",
109-
docker: "Docker",
110-
dockerfile: "Dockerfile",
111-
none: "",
112-
};
113-
11478
const Code = ({
11579
code,
11680
children,
@@ -133,16 +97,13 @@ const Code = ({
13397
// Classname usually is `language-python`, `language-javascript`, `language-bash`, etc.
13498
let importLanguage = children?.props?.className?.substring(9);
13599

136-
// If no language, default to Phython
100+
// If no language, default to Python
137101
if (importLanguage === undefined || importLanguage === "undefined") {
138102
importLanguage = "python";
139103
}
140-
// Default `sh` language to `bash` for Prism import, since we use `sh` throughout our codebase but it's not a proper Prism import
141-
else if (importLanguage === "sh") {
142-
importLanguage = "bash";
143-
} else if (importLanguage === "js") {
144-
importLanguage = "javascript";
145-
}
104+
105+
// Map to Prism component name (some differ, e.g., sh -> bash)
106+
importLanguage = getPrismLanguage(importLanguage);
146107

147108
highlightElement(
148109
importLanguage,

‎content/develop/api-reference/_index.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2470,7 +2470,7 @@ my_component()
24702470

24712471
</RefCard>
24722472

2473-
<RefCard href="/develop/api-reference/custom-components/st.components.v2.types.bidicomponentcallable">
2473+
<RefCard href="/develop/api-reference/custom-components/st.components.v2.types.componentrenderer">
24742474

24752475
<h4>Mount</h4>
24762476

@@ -2498,50 +2498,50 @@ npm i @streamlit/component-v2-lib
24982498

24992499
</RefCard>
25002500

2501-
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-component">
2501+
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-frontendrenderer">
25022502

2503-
<h4>Component</h4>
2503+
<h4>FrontendRenderer</h4>
25042504

25052505
Type alias for the component function.
25062506

25072507
```typescript
2508-
import { Component } from "@streamlit/component-v2-lib";
2508+
import { FrontendRenderer } from "@streamlit/component-v2-lib";
25092509
```
25102510

25112511
</RefCard>
25122512

2513-
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-componentargs">
2513+
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-frontendrendererargs">
25142514

2515-
<h4>ComponentArgs</h4>
2515+
<h4>FrontendRendererArgs</h4>
25162516

25172517
Type alias for the component arguments.
25182518

25192519
```typescript
2520-
import { ComponentArgs } from "@streamlit/component-v2-lib";
2520+
import { FrontendRendererArgs } from "@streamlit/component-v2-lib";
25212521
```
25222522

25232523
</RefCard>
25242524

2525-
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-componentstate">
2525+
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-frontendstate">
25262526

2527-
<h4>ComponentState</h4>
2527+
<h4>FrontendState</h4>
25282528

25292529
Type alias for the component state.
25302530

25312531
```typescript
2532-
import { ComponentState } from "@streamlit/component-v2-lib";
2532+
import { FrontendState } from "@streamlit/component-v2-lib";
25332533
```
25342534

25352535
</RefCard>
25362536

2537-
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-optionalcomponentcleanupfunction" size="two-third">
2537+
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-cleanupfunction" size="two-third">
25382538

2539-
<h4>OptionalComponentCleanupFunction</h4>
2539+
<h4>CleanupFunction</h4>
25402540

25412541
Type alias for the component cleanup function.
25422542

25432543
```typescript
2544-
import { OptionalComponentCleanupFunction } from "@streamlit/component-v2-lib";
2544+
import { CleanupFunction } from "@streamlit/component-v2-lib";
25452545
```
25462546

25472547
</RefCard>

‎content/develop/api-reference/connections/connections-baseconnection.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@ This page only contains information on the `st.connections.BaseConnection` class
1414
<Autofunction function="streamlit.connections.BaseConnection" oldName="streamlit.connections.ExperimentalBaseConnection" />
1515

1616
<Autofunction function="streamlit.connections.BaseConnection.reset" oldName="streamlit.connections.ExperimentalBaseConnection.reset" />
17+
18+
<Autofunction function="streamlit.connections.BaseConnection.close" />
19+
20+
<Autofunction function="streamlit.connections.BaseConnection.scope" />

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ my_component()
3131

3232
</RefCard>
3333

34-
<RefCard href="/develop/api-reference/custom-components/st.components.v2.types.bidicomponentcallable">
34+
<RefCard href="/develop/api-reference/custom-components/st.components.v2.types.componentrenderer">
3535

3636
<h4>Mount</h4>
3737

@@ -65,50 +65,50 @@ npm i @streamlit/component-v2-lib
6565

6666
</RefCard>
6767

68-
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-component">
68+
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-frontendrenderer">
6969

70-
<h4>Component</h4>
70+
<h4>FrontendRenderer</h4>
7171

7272
Type alias for the component function.
7373

7474
```typescript
75-
import { Component } from "@streamlit/component-v2-lib";
75+
import { FrontendRenderer } from "@streamlit/component-v2-lib";
7676
```
7777

7878
</RefCard>
7979

80-
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-componentargs">
80+
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-frontendrendererargs">
8181

82-
<h4>ComponentArgs</h4>
82+
<h4>FrontendRendererArgs</h4>
8383

8484
Type alias for the component arguments.
8585

8686
```typescript
87-
import { ComponentArgs } from "@streamlit/component-v2-lib";
87+
import { FrontendRendererArgs } from "@streamlit/component-v2-lib";
8888
```
8989

9090
</RefCard>
9191

92-
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-componentstate">
92+
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-frontendstate">
9393

94-
<h4>ComponentState</h4>
94+
<h4>FrontendState</h4>
9595

9696
Type alias for the component state.
9797

9898
```typescript
99-
import { ComponentState } from "@streamlit/component-v2-lib";
99+
import { FrontendState } from "@streamlit/component-v2-lib";
100100
```
101101

102102
</RefCard>
103103

104-
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-optionalcomponentcleanupfunction" size="two-third">
104+
<RefCard href="/develop/api-reference/custom-components/component-v2-lib-cleanupfunction" size="two-third">
105105

106-
<h4>OptionalComponentCleanupFunction</h4>
106+
<h4>CleanupFunction</h4>
107107

108108
Type alias for the component cleanup function.
109109

110110
```typescript
111-
import { OptionalComponentCleanupFunction } from "@streamlit/component-v2-lib";
111+
import { CleanupFunction } from "@streamlit/component-v2-lib";
112112
```
113113

114114
</RefCard>

content/develop/api-reference/custom-components/bidicomponentcallable.md renamed to content/develop/api-reference/custom-components/componentrenderer.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2-
title: BidiComponentCallable
3-
slug: /develop/api-reference/custom-components/st.components.v2.types.bidicomponentcallable
2+
title: ComponentRenderer
3+
slug: /develop/api-reference/custom-components/st.components.v2.types.componentrenderer
44
description: Python interface for mounting Streamlit v2 custom components, enabling seamless data exchange with custom UI.
55
keywords: bidicomponentcallable, bidirectional, custom components v2, interface, component mounting, streamlit api, component state, data exchange
66
---
77

8-
<Autofunction function="BidiComponentCallable" />
8+
<Autofunction function="ComponentRenderer" oldName="BidiComponentCallable" />
99

1010
<Autofunction function="BidiComponentResult" />

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
---
2-
title: ComponentState
3-
slug: /develop/api-reference/custom-components/component-v2-lib-optionalcomponentcleanupfunction
2+
title: CleanupFunction
3+
slug: /develop/api-reference/custom-components/component-v2-lib-cleanupfunction
44
description: TypeScript type alias for custom components v2 state management, enabling type-safe state persistence and data flow between component renders and user interactions.
55
keywords: componentstate, typescript, custom components v2, state management, component state, state persistence, frontend interface, component-v2-lib, type safety, data flow
66
---
77

8-
<Autofunction function="@streamlit/component-v2-lib/OptionalComponentCleanupFunction" />
9-
10-
<Autofunction function="@streamlit/component-v2-lib/ComponentCleanupFunction" />
8+
<Autofunction function="@streamlit/component-v2-lib/CleanupFunction" oldName="@streamlit/component-v2-lib/ComponentCleanupFunction" />

0 commit comments

Comments
 (0)