Skip to content

[Bugfix] Fix AbstractSliderChild crash with js-toolkit >= 3.4.3#506

Open
antoine4livre wants to merge 4 commits into
mainfrom
bugfix/AbstractSliderChild-crash
Open

[Bugfix] Fix AbstractSliderChild crash with js-toolkit >= 3.4.3#506
antoine4livre wants to merge 4 commits into
mainfrom
bugfix/AbstractSliderChild-crash

Conversation

@antoine4livre

@antoine4livre antoine4livre commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🔗 Linked issue

#505

❓ Type of change

  • 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Problem

AbstractSliderChild.mounted() calls this.$parent.$on("index", this) which throws TypeError: Cannot read properties of null (reading '$on') with @studiometa/js-toolkit >= 3.4.3.

In js-toolkit 3.4.3, $parent changed from a property assigned during mounting to a dynamic getter that looks up registered instances at runtime. This getter can return null when a child's mounted() runs before the parent Slider is fully resolved in the instance registry.

Any page using SliderBtn, SliderCount, SliderDots, or SliderProgress crashes on mount.

Changes

Commit 1 — Fix Slider child components

  • Replace this.$parent with a slider getter using this.$closest('Slider') in AbstractSliderChild and all subclasses (SliderBtn, SliderDots, SliderProgress)
  • Defer $on subscription in mounted() with nextFrame to ensure the parent Slider is registered before the child looks it up
  • Add null guards throughout
  • Bump @studiometa/js-toolkit to ^3.5.0 (required for $closest support)

Commit 2 — Fix AccordionItem

  • Replace this.$parent with this.$closest('Accordion') in AccordionItem.mounted(), consistent with the js-toolkit 3.5.0 deprecation of $parent

Out of scope

  • Frame.ts: this.$root.$update() — deprecated but does not crash. Replacing with this.$update() would change behavior (only updates the Frame subtree instead of the entire app). Needs a separate discussion.
  • $children (22 usages across 11 files) — deprecated in favor of $query() but still functional. Migration should be handled in a dedicated ticket.

📝 Checklist

  • I have linked an issue or discussion.
  • I have added tests (if possible).
  • I have updated the documentation accordingly.
  • I have updated the changelog.

antoine4livre and others added 2 commits June 29, 2026 17:40
Replace `$parent` with `$closest('Slider')` in all Slider child
components to fix TypeError when `$parent` returns null during mount.
Defer `$on` subscription in `mounted()` with `nextFrame` to ensure
the parent Slider is registered before the child looks it up.

Bump @studiometa/js-toolkit to ^3.5.0 for `$closest` support.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
Migrate AccordionItem to use `$closest('Accordion')` instead of
the deprecated `$parent` property, consistent with js-toolkit 3.5.0
deprecation of `$parent` in favor of `$closest()`.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
Co-Authored-By: Claude Opus 4.6 <[email protected]>
@antoine4livre antoine4livre force-pushed the bugfix/AbstractSliderChild-crash branch from a970187 to bd8a1d5 Compare June 29, 2026 15:49
@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown

Export Size

@studiometa/ui

Name Size Diff
SliderCount 682 B +32 B (+4.92%) 🔺
AbstractSliderChild 626 B +26 B (+4.33%) 🔺
SliderProgress 1 kB +40 B (+4.16%) 🔺
SliderBtn 847 B +30 B (+3.67%) 🔺
SliderDots 1.89 kB +30 B (+1.61%) 🔺
Accordion 1.77 kB -2 B (-0.11%) 🔽
AccordionItem 1.66 kB -88 B (-5.03%) 🔽
Unchanged

@studiometa/ui

Name Size Diff
AbstractFrameTrigger 1.74 kB -
AbstractPrefetch 366 B -
AbstractScrollAnimation 3.66 kB -
Action 1.11 kB -
AnchorNav 3.85 kB -
AnchorNavLink 3.74 kB -
AnchorNavTarget 125 B -
AnchorScrollTo 2.53 kB -
animationScrollWithEase 763 B -
CircularMarquee 550 B -
Cursor 650 B -
DataBind 697 B -
DataComputed 856 B -
DataEffect 837 B -
DataModel 780 B -
Draggable 1.64 kB -
Fetch 2.34 kB -
Figure 1.72 kB -
FigureShopify 1.98 kB -
FigureTwicpics 2.26 kB -
FigureVideo 1.87 kB -
FigureVideoTwicpics 2.44 kB -
Frame 3.47 kB -
FrameAnchor 1.84 kB -
FrameForm 1.92 kB -
FrameLoader 1.45 kB -
FrameTarget 1.75 kB -
FrameTriggerLoader 1.46 kB -
Hoverable 953 B -
LargeText 713 B -
LazyInclude 322 B -
Menu 2.33 kB -
MenuBtn 140 B -
MenuList 1.9 kB -
Modal 1.99 kB -
ModalWithTransition 2.09 kB -
Panel 2.38 kB -
PrefetchWhenOver 408 B -
PrefetchWhenVisible 417 B -
ScrollAnimation 3.79 kB -
ScrollAnimationChild 3.91 kB -
ScrollAnimationChildWithEase 4.51 kB -
ScrollAnimationParent 3.98 kB -
ScrollAnimationTarget 3.85 kB -
ScrollAnimationTimeline 3.92 kB -
ScrollAnimationWithEase 4.39 kB -
ScrollReveal 1.63 kB -
Sentinel 129 B -
Slider 2.3 kB -
SliderDrag 269 B -
SliderItem 998 B -
Sticky 771 B -
Tabs 1.38 kB -
Target 86 B -
Transition 1.41 kB -
withDeprecation 166 B -
withScrollAnimationDebug 2.04 kB -
withTransition 1.39 kB -

@codecov

codecov Bot commented Jun 29, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 13.63636% with 19 lines in your changes missing coverage. Please review.
✅ Project coverage is 73.61%. Comparing base (72920df) to head (92daf15).

Files with missing lines Patch % Lines
packages/ui/Slider/AbstractSliderChild.ts 0.00% 7 Missing and 2 partials ⚠️
packages/ui/Slider/SliderBtn.ts 0.00% 5 Missing and 2 partials ⚠️
packages/ui/Slider/SliderProgress.ts 0.00% 1 Missing and 1 partial ⚠️
packages/ui/Slider/SliderDots.ts 0.00% 1 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff              @@
##               main     #506      +/-   ##
============================================
- Coverage     73.82%   73.61%   -0.22%     
  Complexity      145      145              
============================================
  Files            93       93              
  Lines          2663     2672       +9     
  Branches        445      449       +4     
============================================
+ Hits           1966     1967       +1     
- Misses          608      612       +4     
- Partials         89       93       +4     
Flag Coverage Δ
unittests 73.61% <13.63%> (-0.22%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
packages/ui/Accordion/AccordionItem.ts 100.00% <100.00%> (ø)
packages/ui/Slider/SliderDots.ts 9.09% <0.00%> (ø)
packages/ui/Slider/SliderProgress.ts 12.50% <0.00%> (-1.79%) ⬇️
packages/ui/Slider/SliderBtn.ts 5.00% <0.00%> (-0.27%) ⬇️
packages/ui/Slider/AbstractSliderChild.ts 4.34% <0.00%> (-1.54%) ⬇️
🚀 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.

Trigger an initial `update()` call right after subscribing to the
Slider's `index` event in `nextFrame`, so children like SliderDots
correctly reflect the active slide on mount.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
*/
update(index: number) {
if (this.$options.contain && !this.$parent.$options.contain) {
if (!this.slider) return;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer destructuring slider as a constant to avoid repeated lookups.

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

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants