feat: enhance browser translation with dynamic translation hook #198

snomiao · 2025-07-26T17:49:13Z

Summary

Add useDynamicTranslate hook for experimental browser translation using Chrome's new Translator API
Implement toggle-able translation with visual indicators (🌐/🔄 emojis)
Apply dynamic translation to node descriptions and version changelogs in NodeDetails component
Convert i18n hook from TypeScript to TSX for React component support
Update dependencies to support new translation features

Test plan

Verify dynamic translation toggle works in Chrome 138+ browsers
Test that translation icons appear correctly in node descriptions
Confirm translation state persists across page reloads via localStorage
Validate fallback behavior in browsers without Translator API support
Test translation functionality with various languages

🤖 Generated with Claude Code

vercel · 2025-07-26T17:49:17Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
registry-web	Ready	Preview	Comment	Oct 26, 2025 8:06am

Copilot

Pull Request Overview

This PR introduces experimental browser translation capabilities using Chrome's new Translator API, allowing dynamic translation of node descriptions and version changelogs with toggle functionality and visual indicators.

Key changes:

Added useDynamicTranslate hook for experimental browser translation with Chrome's Translator API
Converted i18n hook from TypeScript to TSX to support React component rendering
Applied dynamic translation to NodeDetails component with toggle switcher and emoji indicators

Reviewed Changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 9 comments.

File	Description
src/hooks/i18n/index.tsx	New TSX file implementing dynamic translation hook and enhanced i18n functionality
src/hooks/i18n/index.ts	Removed original TypeScript i18n implementation
package.json	Added dependencies for translation features (hot-memo, react-use, use-async)
components/nodes/NodeDetails.tsx	Integrated dynamic translation for node descriptions and changelogs

src/hooks/i18n/index.tsx

Copilot · 2025-07-26T17:50:21Z

src/hooks/i18n/index.tsx

+    // 3. not avaliable in china
+    //
+    const [available, availableState] = useAsyncData(async () => {
+        const Translator = globalThis.Translator as any


Using any type defeats TypeScript's type safety. Consider defining a proper interface for the Translator API or using a more specific type assertion.

Suggested change

const Translator = globalThis.Translator as any

const Translator = globalThis.Translator as TranslatorAPI

Copilot · 2025-07-26T17:50:21Z

src/hooks/i18n/index.tsx

+            aria-label="translate"
+            onClick={() => {
+                setEnabled((e) => !e)
+            }}


The Switcher component lacks proper accessibility attributes. It should include tabIndex={0} and onKeyDown handler to support keyboard navigation, and a more descriptive aria-label.

Suggested change

aria-label="translate"

onClick={() => {

setEnabled((e) => !e)

}}

aria-label={enabled ? "Disable translation" : "Enable translation"}

tabIndex={0}

onClick={() => {

setEnabled((e) => !e)

}}

onKeyDown={(event) => {

if (event.key === "Enter" || event.key === " ") {

setEnabled((e) => !e)

}

}}

github-actions · 2025-07-26T17:51:21Z

🎨 Chromatic Visual Testing Results

Resource	URL
🔍 Build Results	Chromatic Build
📚 Storybook	View Storybook

Check the visual changes and approve or request changes as needed.

github-actions · 2025-08-12T14:30:52Z

🎨 Chromatic Visual Testing Results

Resource	URL
🔍 Build Results	Chromatic Build
📚 Storybook	View Storybook

Check the visual changes and approve or request changes as needed.

- Add missing key handler with experimental Translator API integration - Translate node descriptions using t() function for internationalization - Format code improvements for better readability 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

- Add useDynamicTranslate hook for experimental browser translation - Implement toggle-able translation with visual indicators (🌐/🔄) - Apply dynamic translation to node descriptions and version changelogs - Convert i18n hook from TypeScript to TSX for React component support - Update dependencies to support new translation features 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

Co-authored-by: Copilot <[email protected]>

- Remove unused imports (hot-memo, react-icons, forEach) - Fix typos in comments (broswer -> browser, avaliable -> available) - Simplify JSX return structure in dt function - Improve code readability

Copilot

Pull Request Overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 4 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-02T12:14:52Z

src/hooks/i18n/index.tsx

+            role="img"
+            aria-label="translate"
+            onClick={() => {
+                setEnabled(!enabled) // toggle the translation statey


There's a typo in the comment: 'statey' should be 'state'.

Suggested change

setEnabled(!enabled) // toggle the translation statey

setEnabled(!enabled) // toggle the translation state

Copilot · 2025-10-02T12:14:53Z

src/hooks/i18n/index.tsx

+        if (typeof globalThis.Translator === 'undefined') return
+
+        // Create a translator instance
+        const Translator = globalThis.Translator as any
+        const translator = await Translator.create({
+            sourceLanguage: 'en',
+            targetLanguage: lng,
+        }).catch(() => null)
+        if (!translator) return


The Translator API availability check and instance creation logic is duplicated between the missingKeyHandler and useDynamicTranslate hook. Consider extracting this into a shared utility function to reduce code duplication.

Copilot · 2025-10-02T12:14:53Z

src/hooks/i18n/index.tsx

+        // Create a translator instance
+        const Translator = globalThis.Translator as any
+        const translator = await Translator.create({
+            sourceLanguage: 'en',
+            targetLanguage: lng,
+        }).catch(() => null)
+        if (!translator) return
+
+        // Translate the key
+        let tr = ''
+        for await (const chunk of translator.translateStreaming(key)) {
+            tr += chunk


Using any type for the Translator API reduces type safety. Consider creating a proper TypeScript interface for the Translator API or using a more specific type declaration.

Suggested change

// Create a translator instance

const Translator = globalThis.Translator as any

const translator = await Translator.create({

sourceLanguage: 'en',

targetLanguage: lng,

}).catch(() => null)

if (!translator) return

// Translate the key

let tr = ''

for await (const chunk of translator.translateStreaming(key)) {

tr += chunk

// Define the expected Translator API interface

interface TranslatorInstance {

translateStreaming(text: string): AsyncIterable<string>;

}

interface TranslatorAPI {

create(options: { sourceLanguage: string; targetLanguage: string }): Promise<TranslatorInstance>;

}

// Create a translator instance

const Translator = globalThis.Translator as TranslatorAPI;

const translator = await Translator.create({

sourceLanguage: 'en',

targetLanguage: lng,

}).catch(() => null);

if (!translator) return;

// Translate the key

let tr = '';

for await (const chunk of translator.translateStreaming(key)) {

tr += chunk;

Copilot · 2025-10-02T12:14:53Z

src/hooks/i18n/index.tsx

+    // 3. not available in china
+    //
+    const [available, availableState] = useAsyncData(async () => {
+        const Translator = globalThis.Translator as any


Using any type for the Translator API reduces type safety. Consider creating a proper TypeScript interface for the Translator API or using a more specific type declaration.

- Remove DynamicTranslateSwitcher component - Add dynamic translation checkbox to LanguageSwitcher dropdown - Improve UX by integrating the feature into existing language selection - Only show checkbox when browser translation API is available

- Define TranslatorAPI and TranslatorInstance interfaces - Replace 'any' types with proper type definitions - Add global type declarations for Chrome's experimental API - Improve type safety and developer experience

socket-security · 2025-10-02T14:38:24Z

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report

…adata This PR implements an optional dynamic translation feature using Chrome's built-in Translator API to translate node descriptions and changelogs on-demand. ## Changes - Add `useDynamicTranslate()` hook with browser Translator API integration - Add dynamic translation toggle in language dropdown - Apply `dt()` function to node descriptions and version changelogs - Add "Dynamic Translation" key to all locale files - Add comprehensive documentation in docs/node-metadata-translation.md ## Key Features - Browser-based, local translation (no server costs) - Opt-in via toggle in language dropdown - Only translates user-generated content (descriptions, changelogs) - Falls back gracefully when API unavailable - Works offline after initial model download ## Technical Details - Uses Chrome 138+ experimental Translator API - LocalStorage persistence for user preference - i18next integration with missing key handler - Automatic re-rendering on translation completion ## Limitations - Chrome 138+ only - Not available in all regions - Client-side only (no SSR support) - Requires user to enable manually 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

- Resolved merge conflicts in LanguageSwitcher.tsx, NodeDetails.tsx, package.json - Removed duplicate imports - Fixed TypeScript type error in LanguageSwitcher onClick handler - Regenerated bun.lock after dependency resolution - Renamed src/hooks/i18n/index.ts to index.tsx - Build succeeds without errors 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Resolve conflicts in package.json and locale files by accepting main branch versions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Fixes build error: Module not found: Can't resolve 'use-async' 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

socket-security · 2025-10-25T13:53:19Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	use-async@1.2.0

View full report

🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

Copilot AI review requested due to automatic review settings July 26, 2025 17:49

Copilot AI reviewed Jul 26, 2025

View reviewed changes

vercel bot deployed to Preview July 26, 2025 17:50 View deployment

vercel bot deployed to Preview August 12, 2025 14:31 View deployment

vercel bot had a problem deploying to Preview October 2, 2025 09:44 Failure

snomiao and others added 5 commits October 2, 2025 09:49

Update src/hooks/i18n/index.tsx

0cf7766

Co-authored-by: Copilot <[email protected]>

Update src/hooks/i18n/index.tsx

ec38c55

Co-authored-by: Copilot <[email protected]>

fix: address PR review comments

94fc732

- Remove unused imports (hot-memo, react-icons, forEach) - Fix typos in comments (broswer -> browser, avaliable -> available) - Simplify JSX return structure in dt function - Improve code readability

snomiao force-pushed the sno-node-meta-translation branch from 7ada57e to 94fc732 Compare October 2, 2025 09:52

format: Apply prettier --fix changes

083ef73

vercel bot deployed to Preview October 2, 2025 09:55 View deployment

chore: remove unused hot-memo package

e2ca209

vercel bot deployed to Preview October 2, 2025 09:58 View deployment

snomiao requested a review from Copilot October 2, 2025 12:13

Copilot AI reviewed Oct 2, 2025

View reviewed changes

vercel bot had a problem deploying to Preview October 2, 2025 14:25 Failure

feat: add proper TypeScript types for Translator API

51da17b

- Define TranslatorAPI and TranslatorInstance interfaces - Replace 'any' types with proper type definitions - Add global type declarations for Chrome's experimental API - Improve type safety and developer experience

vercel bot had a problem deploying to Preview October 2, 2025 14:38 Failure

snomiao and others added 3 commits October 17, 2025 00:17

format: Apply prettier --fix changes

82a629b

vercel bot had a problem deploying to Preview October 20, 2025 18:15 Failure

Merge branch 'main' into sno-node-meta-translation

4ed5c8c

Resolve conflicts in package.json and locale files by accepting main branch versions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

vercel bot had a problem deploying to Preview October 25, 2025 13:50 Failure

Add missing use-async dependency

ee46010

Fixes build error: Module not found: Can't resolve 'use-async' 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

vercel bot had a problem deploying to Preview October 25, 2025 13:53 Failure

format: Apply prettier --fix changes

61d680f

vercel bot had a problem deploying to Preview October 25, 2025 13:55 Failure

format: Apply prettier and biome formatting fixes

830b040

🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

vercel bot deployed to Preview October 26, 2025 08:06 View deployment

	const Translator = globalThis.Translator as any
	const Translator = globalThis.Translator as TranslatorAPI

	setEnabled(!enabled) // toggle the translation statey
	setEnabled(!enabled) // toggle the translation state

feat: enhance browser translation with dynamic translation hook #198

Are you sure you want to change the base?

feat: enhance browser translation with dynamic translation hook #198

Uh oh!

Conversation

snomiao commented Jul 26, 2025

Summary

Test plan

Uh oh!

vercel bot commented Jul 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 26, 2025

🎨 Chromatic Visual Testing Results

Uh oh!

github-actions bot commented Aug 12, 2025

🎨 Chromatic Visual Testing Results

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

socket-security bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Jul 26, 2025 •

edited

Loading

socket-security bot commented Oct 2, 2025 •

edited

Loading

socket-security bot commented Oct 25, 2025 •

edited

Loading