Skip to content

Update Svelte integration guide for Svelte 5 and runes#1659

Draft
sequba wants to merge 1 commit intofeature/hf-122-framework-integration-guidesfrom
claude/review-svelte-integration-guide-6gybV
Draft

Update Svelte integration guide for Svelte 5 and runes#1659
sequba wants to merge 1 commit intofeature/hf-122-framework-integration-guidesfrom
claude/review-svelte-integration-guide-6gybV

Conversation

@sequba
Copy link
Copy Markdown
Contributor

@sequba sequba commented Apr 20, 2026

Context

The Svelte integration guide was written for Svelte 4 and needs to be updated to reflect Svelte 5's new runes-based reactivity system. The changes modernize the code examples and clarify best practices for using HyperFormula with current Svelte versions.

Changes

  • Target Svelte 5 (runes mode): Updated all code examples to use the $state rune for reactive variables instead of plain let declarations
  • Event handler syntax: Changed from on:click to onclick to match Svelte 5 conventions
  • Type annotations: Added TypeScript support with proper imports (import type) and inline type annotations using $state<Type>()
  • SSR guidance: Clarified the SvelteKit SSR section with better explanation of why onMount is necessary and corrected the async cleanup pattern (separate onDestroy instead of returning cleanup from async onMount)
  • Reactivity explanations: Added detailed notes about when to use $state (for values that drive UI updates) vs. plain const (for references that never change, like the HyperFormula instance)
  • Best practices: Documented that table cell expressions don't need reactivity since they read static data, and explained how to handle mutations if needed

How did you test your changes?

Documentation review — verified that all code examples follow Svelte 5 patterns and are syntactically correct. The changes are purely documentation updates with no runtime code modifications.

Types of changes

  • Change to the documentation

Checklist:

  • I have reviewed the guidelines about Contributing to HyperFormula and I confirm that my code follows the code style of this project.
  • My changes require a documentation update.

https://claude.ai/code/session_0123ZjQT79obK9A6DXCwaKUW

- Switch to Svelte 5 runes: $state for reactive values, onclick for
  event handlers.
- Fix SSR snippet: onMount's async callback cannot return a cleanup
  function synchronously, so the engine was never destroyed. Move
  teardown to a separate onDestroy.
- Use $state around hf in the SSR snippet so disabled={!hf} updates
  when the engine finishes mounting.
- Add TypeScript (lang="ts") for parity with the React and Vue guides,
  with a note for JS users.
- Clarify that the SSR warning is about duplicated work per render,
  not an unconditional crash.
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 20, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.18%. Comparing base (d6a316c) to head (7c77f50).

Additional details and impacted files

Impacted file tree graph

@@                             Coverage Diff                              @@
##           feature/hf-122-framework-integration-guides    #1659   +/-   ##
============================================================================
  Coverage                                        97.18%   97.18%           
============================================================================
  Files                                              174      174           
  Lines                                            15086    15086           
  Branches                                          3223     3223           
============================================================================
  Hits                                             14662    14662           
  Misses                                             424      424           
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 20, 2026

Performance comparison of head (7c77f50) vs base (d6a316c)

                                     testName |   base |   head | change
------------------------------------------------------------------------
                                      Sheet A | 487.59 | 487.07 | -0.11%
                                      Sheet B | 157.14 | 155.78 | -0.87%
                                      Sheet T | 139.25 | 140.09 | +0.60%
                                Column ranges |  471.1 | 473.29 | +0.46%
Sheet A:  change value, add/remove row/column |  15.54 |  15.18 | -2.32%
 Sheet B: change value, add/remove row/column | 132.81 | 131.66 | -0.87%
                   Column ranges - add column | 142.34 | 146.85 | +3.17%
                Column ranges - without batch |  433.5 | 443.18 | +2.23%
                        Column ranges - batch | 112.13 | 111.68 | -0.40%

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants