Add support for fe_/be_ language prefixes in CodeSnippet by GregHolmes · Pull Request #1060 · ably/ably-ui

GregHolmes · 2026-02-02T13:53:01Z

Centralize SDK prefixes into SDK_PREFIXES constant with derived SDKType
Add 'client' and 'agent' SDK types for dual language code blocks
Refactor stripSdkType() to use SDK_PREFIXES loop instead of hardcoded conditions
Add findCodeElement helper to handle array children (fixes code extraction when pre element has multiple children)
Extract renderLanguageLabel to deduplicate language label JSX
Add showFixedLanguageLabel to display read-only language indicator when code block is controlled by external selector (fixed=true)

These changes support dual language selection in documentation, allowing separate client and agent language selectors for AI Transport guides.

Summary by CodeRabbit

Release Notes

New Features
- Extended SDK support to include frontend and backend options
- Added support for C++, Dart, Objective-C, Android, Flutter, and Jetpack languages
- Improved language detection and rendering logic for code snippets
- Introduced fixed-language labels for enhanced code display

coderabbitai · 2026-02-02T13:53:16Z

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Walkthrough

The CodeSnippet component is extended to support frontend ("fe") and backend ("be") SDK types alongside existing "realtime" and "rest" types. Language detection is enhanced with a new helper function, SDK prefix handling is expanded, and a fixed-language label rendering path is introduced. The languages utility adds new language definitions and a helper function to retrieve language information.

Changes

Cohort / File(s)	Summary
SDK Type Extension & Language Detection `src/core/CodeSnippet.tsx`	Extended SDKType to include "fe" and "be". Introduced findCodeElement helper for robust code element extraction. Reworked language detection with fe\_ and be\_ prefix handling. Added fixed-language label rendering for fe/be types. Adjusted SDK selector visibility to show only for realtime/rest. Extended activeLanguage calculation to support fe/be language key construction with fallback matching.
Language Utilities `src/core/CodeSnippet/languages.ts`	Expanded stripSdkType to handle realtime\, rest\, fe\, and be\ prefixes. Added new language entries: cpp, dart, objc, android, flutter, jetpack. Introduced public function getLanguageInfo(langKey: string) that normalizes keys via stripSdkType and returns corresponding LanguageInfo with fallback default.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A rabbit's joy to see code flow,
Frontend hops and backends grow,
With labels fixed and languages bright,
Fe and be take center stage tonight! 🚀

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description lacks required sections from the template including manual testing steps, reviewer tasks, and merge/deploy checklists.	Add 'How do you manually test this?' section with testing steps, include the merge/deploy and frontend checklists, and optionally add 'Reviewer Tasks' if needed.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding support for fe_/be_ language prefixes in CodeSnippet.
Linked Issues check	✅ Passed	The changes implement frontend/backend language prefix support and fixed language labels to enable dual language selection for documentation combos as required by AIT-108.
Out of Scope Changes check	✅ Passed	All changes are scoped to supporting fe_/be_ language prefixes and dual language selection; no unrelated code modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch ait-108-framework-combos

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

kennethkalmer

These changes support dual language selection in documentation, allowing separate client and agent language selectors for AI Transport guides.

This differs from be_ and fe_, and I think we should put a bit more thought into the names of these values as they will be with us for a long time :)

@GregHolmes is there some more context to help come up with better names?

aralovelace · 2026-02-04T09:52:11Z

src/core/CodeSnippet.tsx


 // Define SDK type
-export type SDKType = "realtime" | "rest" | null;
+export type SDKType = "realtime" | "rest" | "fe" | "be" | null;


do we need to add null here? since its not really a valid SDK type?

aralovelace · 2026-02-04T09:53:10Z

src/core/CodeSnippet/languages.ts

 export const stripSdkType = (lang: string) => {
-  if (lang.startsWith("realtime_") || lang.startsWith("rest_")) {
-    return lang.split("_").slice(1).join("_");
+  const prefixes = ["realtime_", "rest_", "fe_", "be_"];


since we already have SDKType should we use it here than using a prefixes to unify them and just append the '_' in the comparison

GregHolmes · 2026-02-11T17:12:19Z

@kennethkalmer @aralovelace I've made a few changes following your feedback. I realise I need to move this over to the other repository, but is it possible to get the review so far of the changes so the context isn't lost please?

- Add 'fe' and 'be' to SDKType union for frontend/backend code blocks - Update stripSdkType() to handle fe_ and be_ prefixes - Add findCodeElement helper to handle array children (fixes code extraction when pre element has multiple children) - Add showFixedLanguageLabel to display read-only language indicator when code block is controlled by external selector (fixed=true) These changes support dual language selection in documentation, allowing separate client and agent language selectors for AI Transport guides.

Test stripSdkType, getLanguageInfo, and SDK_PREFIXES in languages.ts Test CodeSnippet rendering, SDK selector, and language resolution Update vite config to include test files Update stories with client/agent examples

GregHolmes self-assigned this Feb 2, 2026

matt423 requested a review from a team as a code owner February 2, 2026 14:42

kennethkalmer reviewed Feb 2, 2026

View reviewed changes

aralovelace reviewed Feb 4, 2026

View reviewed changes

GregHolmes requested review from aralovelace and kennethkalmer February 11, 2026 17:10

GregHolmes force-pushed the ait-108-framework-combos branch from 0a0cda2 to 2e6d3b1 Compare February 11, 2026 17:12

GregHolmes mentioned this pull request Feb 12, 2026

feat: Add dual language selector for AI Transport guides ably/docs#3176

Open

GregHolmes added 2 commits February 12, 2026 10:35

Add unit tests for CodeSnippet and language utilities

77588d4

Test stripSdkType, getLanguageInfo, and SDK_PREFIXES in languages.ts Test CodeSnippet rendering, SDK selector, and language resolution Update vite config to include test files Update stories with client/agent examples

GregHolmes force-pushed the ait-108-framework-combos branch from 2e6d3b1 to 77588d4 Compare February 12, 2026 10:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for fe_/be_ language prefixes in CodeSnippet#1060

Add support for fe_/be_ language prefixes in CodeSnippet#1060
GregHolmes wants to merge 2 commits intomainfrom
ait-108-framework-combos

GregHolmes commented Feb 2, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Feb 2, 2026 •

edited

Loading

Review skipped

Uh oh!

kennethkalmer left a comment

Uh oh!

aralovelace Feb 4, 2026

Uh oh!

aralovelace Feb 4, 2026

Uh oh!

GregHolmes commented Feb 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Conversation

GregHolmes commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

kennethkalmer left a comment

Choose a reason for hiding this comment

Uh oh!

aralovelace Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

aralovelace Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

GregHolmes commented Feb 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

GregHolmes commented Feb 2, 2026 •

edited

Loading

coderabbitai bot commented Feb 2, 2026 •

edited

Loading