Builder-vite: Replace .at() call with [] in codegen

[Chudesnov]

Unblocks loading Storybook instances built with Vite on devices locked to pre-2022 browser versions.

Closes #29030

What I did

Replaced usage of an API potentially unavailable in legacy browsers (Array.prototype.at) with a functionally equivalent alternative ([]). This should allow running Storybook in browsers that support ES Modules (script type="module") but don't have the Array.prototype.at method.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Open Storybook in your browser without Array.prototype.at support but with ES modules support (e.g. iOS Safari 15.3)
3. Access any story

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.4 MB	77.4 MB	119 B	1.54	0%
initSize	162 MB	162 MB	44.7 kB	-0.24	0%
diffSize	84.9 MB	85 MB	44.6 kB	-0.28	0.1%
buildSize	7.57 MB	7.57 MB	-36 B	0.56	0%
buildSbAddonsSize	1.66 MB	1.66 MB	0 B	0.65	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.34 MB	2.34 MB	0 B	0.58	0%
buildSbPreviewSize	352 kB	352 kB	0 B	0.42	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.55 MB	4.55 MB	0 B	0.65	0%
buildPreviewSize	3.02 MB	3.02 MB	-36 B	-0.17	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	6.1s	24.2s	18.1s	1.74	🔺74.6%
generateTime	19.1s	19.6s	524ms	-0.8	2.7%
initTime	15.3s	15.6s	267ms	-1.2	1.7%
buildTime	11s	10.2s	-796ms	-1.34	🔰-7.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.9s	6.1s	-814ms	-1.08	-13.3%
devManagerResponsive	4.5s	3.8s	-633ms	-1.21	-16.3%
devManagerHeaderVisible	903ms	725ms	-178ms	-0.71	-24.6%
devManagerIndexVisible	948ms	753ms	-195ms	-0.79	-25.9%
devStoryVisibleUncached	1.4s	1.4s	72ms	0.49	4.9%
devStoryVisible	946ms	762ms	-184ms	-0.72	-24.1%
devAutodocsVisible	870ms	655ms	-215ms	-0.71	-32.8%
devMDXVisible	764ms	708ms	-56ms	-0.09	-7.9%
buildManagerHeaderVisible	849ms	645ms	-204ms	-1.35	🔰-31.6%
buildManagerIndexVisible	932ms	678ms	-254ms	-1.11	-37.5%
buildStoryVisible	933ms	677ms	-256ms	-1.63	🔰-37.8%
buildAutodocsVisible	726ms	633ms	-93ms	-0.8	-14.7%
buildMDXVisible	723ms	634ms	-89ms	-0.61	-14%

Greptile Summary

This pull request replaces the use of Array.prototype.at() with standard array indexing in the Vite builder's code generation script, improving compatibility with older browsers.

• Modified code/builders/builder-vite/src/codegen-modern-iframe-script.ts to use standard array indexing instead of .at()
• Addresses issue [Bug]: Storybook Vite Builder injected runtime uses .at() method, breaking compatibility with older browsers. #29030 by ensuring compatibility with pre-2022 browser versions, particularly iOS Safari <15.4
• Improves Storybook's accessibility on older devices without compromising functionality
• Minimal change with significant impact on browser compatibility for Vite-built Storybook instances

[greptile-apps]

LGTM

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}