[AIT-230] Fix generator functions returning empty in Sandpack environment

[matt423]

Description

Fixes an issue where generator functions (e.g., tasks.keys(), tasks.entries()) returned empty results when running examples in the Sandpack environment.

Related issue: AIT-230

Review App

Root Cause

The Sandpack bundler was transpiling ES6+ iterator/generator syntax to older JavaScript that didn't work correctly with the Ably SDK's custom iterators. This was caused by:

• Using an outdated TypeScript version (^4.0.0)
• No explicit tsconfig.json being passed to Sandpack, resulting in default (older) transpilation settings

Changes

1. ExamplesRenderer.tsx: Inject the shared examples/tsconfig.json into Sandpack:

   • Imports examples/tsconfig.json directly to maintain a single source of truth
   • Injects compilerOptions (with target: 'ES2020', lib: ['ES2020', 'DOM', 'DOM.Iterable']) as a hidden file
   • Updated TypeScript devDependency from ^4.0.0 to ^5.0.0

2. liveobjects-live-map example: Removed Array.from() workarounds, now using direct iterator syntax:

   • for (const [taskId] of tasks.entries()) instead of for (const [taskId] of Array.from(tasks.entries()))

Checklist

• Commits have been rebased.
• Linting has been run against the changed file(s).
• The PR adheres to the writing style guide and contribution guide.

Summary by CodeRabbit

• Chores

  • Upgraded TypeScript from version 4.0.0 to 5.0.0
  • Enhanced code example rendering with TypeScript configuration support

• Refactor

  • Optimized internal iteration logic in example tasks

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto 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.

Walkthrough

The pull request addresses a Sandpack environment compatibility issue by simplifying code in the liveobjects example to remove unnecessary Array.from() conversions, adding TypeScript configuration to the Sandpack environment, and upgrading the TypeScript dependency from version 4 to 5 to improve type checking and bundling behavior.

Changes

Cohort / File(s)	Summary
LiveMap Example Code Simplification examples/liveobjects-live-map/javascript/src/script.ts	Removed unnecessary Array.from() wrapping around .entries() calls in two locations: renderAllTasks and addEventListenersToButtons. Maintains identical iteration behavior while reducing overhead.
Sandpack TypeScript Configuration & Dependencies src/components/Examples/ExamplesRenderer.tsx	Added SANDPACK_TSCONFIG constant with TypeScript configuration and injected it as a hidden /tsconfig.json into Sandpack files. Upgraded TypeScript dev dependency from ^4.0.0 to ^5.0.0 for improved type checking and bundling in the Sandpack environment.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A rabbit's hop through TypeScript's land,
Where Sandpack bundles, now all grand,
Array.from() calls we cast away,
TypeScript five makes types more gay!
The entries flow, unburdened, free—
Config config, a harmony! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main objective of this PR: fixing generator functions returning empty in Sandpack environments by updating TypeScript configuration and removing workarounds.
Linked Issues check	✅ Passed	The PR addresses AIT-230 by updating Sandpack's TypeScript configuration to ES2020 and removing Array.from() workarounds, enabling proper iterator/generator transpilation.
Out of Scope Changes check	✅ Passed	All changes directly support the AIT-230 objective: TypeScript configuration upgrade in ExamplesRenderer.tsx and iterator syntax fixes in the liveobjects example.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

---

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

[matt423]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/Examples/ExamplesRenderer.tsx`:
- Around line 108-116: The current files prop unconditionally injects
'/tsconfig.json' which overwrites example-provided configs; change the
construction of the files object in ExamplesRenderer (where languageFiles and
SANDPACK_TSCONFIG are composed) to only add '/tsconfig.json' when it is not
already present on languageFiles (e.g., check
Object.prototype.hasOwnProperty.call(languageFiles, '/tsconfig.json') or
'/tsconfig.json' in Object.keys(languageFiles) before spreading), leaving the
rest of the files and customSetup (including devDependencies: { typescript:
'^5.0.0' }) unchanged.

[kennethkalmer]

Nice one @matt423