[Feature] Add support for auto-updating components on DOM change

[titouanmathis]

🔗 Linked issue

#562

❓ 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

Auto-trigger the $update() method of each existing instances if their subtree changes.

• Test performance
• Test if $update() can be triggered on attribute change as well (i.e. change in the data-component attribute)

Notes

dom has changed
  if mutation target (attribute,added,removed) in instance
    instance.$update

instance.$update
  [ ] instance.__children.unregisterAll() --> terminate all components whose DOM node has been removed or whose data-component attribute has been changed
  [x] instance.__children.registerAll()

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

[github-actions]

Export Size

@studiometa/js-toolkit

Name	Size	Diff
Base	8.04 kB	+567 B (+7.59%) 🔺
BASE	8.08 kB	+543 B (+7.20%) 🔺
FRAMEWORK	12.51 kB	+195 B (+1.58%) 🔺
ALL	17.64 kB	+254 B (+1.46%) 🔺
HELPERS	1.64 kB	-780 B (-32.18%) 🔽
createApp	454 B	-819 B (-64.34%) 🔽

Unchanged

@studiometa/js-toolkit

Name	Size	Diff
AbstractService	478 B	-
addClass	226 B	-
addStyle	238 B	-
animate	2.93 kB	-
boundingRectToCircle	154 B	-
cache	133 B	-
camelCase	401 B	-
clamp	67 B	-
clamp01	87 B	-
collideCircleCircle	99 B	-
collideCircleRect	159 B	-
collidePointCircle	112 B	-
collidePointRect	103 B	-
collideRectRect	99 B	-
createEaseInOut	116 B	-
createEaseOut	71 B	-
createElement	526 B	-
createRange	90 B	-
damp	78 B	-
dashCase	376 B	-
debounce	92 B	-
DECORATORS	6.83 kB	-
domScheduler	296 B	-
DragService	1.84 kB	-
ease	435 B	-
easeInCirc	68 B	-
easeInCubic	59 B	-
easeInExpo	80 B	-
easeInOutCirc	141 B	-
easeInOutCubic	130 B	-
easeInOutExpo	134 B	-
easeInOutQuad	128 B	-
easeInOutQuart	133 B	-
easeInOutQuint	152 B	-
easeInOutSine	151 B	-
easeInQuad	63 B	-
easeInQuart	61 B	-
easeInQuint	62 B	-
easeInSine	77 B	-
easeLinear	49 B	-
easeOutCirc	115 B	-
easeOutCubic	103 B	-
easeOutExpo	112 B	-
easeOutQuad	103 B	-
easeOutQuart	100 B	-
easeOutQuint	103 B	-
easeOutSine	121 B	-
endsWith	88 B	-
getAncestorWhere	91 B	-
getAncestorWhereUntil	119 B	-
getClosestParent	173 B	-
getComponentResolver	138 B	-
getDirectChildren	194 B	-
getInstanceFromElement	90 B	-
getInstances	146 B	-
getOffsetSizes	159 B	-
hasWindow	62 B	-
historyPush	499 B	-
historyReplace	503 B	-
importOnInteraction	894 B	-
importOnMediaQuery	236 B	-
importWhenIdle	223 B	-
importWhenPrefersMotion	275 B	-
importWhenVisible	916 B	-
inertiaFinalValue	142 B	-
isArray	70 B	-
isBoolean	78 B	-
isDefined	86 B	-
isDev	72 B	-
isDirectChild	206 B	-
isEmpty	207 B	-
isEmptyString	93 B	-
isFunction	72 B	-
isNull	72 B	-
isNumber	84 B	-
isObject	105 B	-
isString	86 B	-
keyCodes	97 B	-
KeyService	810 B	-
lerp	57 B	-
loadElement	169 B	-
loadIframe	189 B	-
loadImage	188 B	-
loadLink	186 B	-
loadScript	197 B	-
LoadService	540 B	-
lowerCase	60 B	-
map	71 B	-
matrix	106 B	-
mean	91 B	-
memo	100 B	-
memoize	189 B	-
MutationService	779 B	-
nextFrame	162 B	-
nextMicrotask	111 B	-
nextTick	134 B	-
noop	39 B	-
noopValue	49 B	-
objectToURLSearchParams	302 B	-
pascalCase	377 B	-
PointerService	1.02 kB	-
Queue	226 B	-
RafService	865 B	-
randomInt	80 B	-
randomItem	232 B	-
removeClass	222 B	-
removeStyle	238 B	-
ResizeService	934 B	-
round	56 B	-
saveActiveElement	56 B	-
ScrollService	972 B	-
scrollTo	2.14 kB	-
SERVICES	3.68 kB	-
SmartQueue	411 B	-
snakeCase	378 B	-
startsWith	87 B	-
throttle	101 B	-
toggleClass	225 B	-
transform	321 B	-
transition	916 B	-
trapFocus	363 B	-
tween	1.56 kB	-
untrapFocus	45 B	-
upperCase	54 B	-
useDrag	1.87 kB	-
useKey	825 B	-
useLoad	555 B	-
useMutation	818 B	-
usePointer	1.05 kB	-
useRaf	877 B	-
useResize	955 B	-
useScheduler	290 B	-
useScroll	993 B	-
UTILS	7.48 kB	-
wait	79 B	-
withBreakpointManager	1.38 kB	-
withBreakpointObserver	1.56 kB	-
withDrag	1.99 kB	-
withExtraConfig	135 B	-
withFreezedOptions	140 B	-
withIntersectionObserver	260 B	-
withLeadingCharacters	88 B	-
withLeadingSlash	107 B	-
withMountOnMediaQuery	322 B	-
withMountWhenInView	286 B	-
withMountWhenPrefersMotion	355 B	-
withMutation	936 B	-
withName	81 B	-
withoutLeadingCharacters	86 B	-
withoutLeadingCharactersRecursive	124 B	-
withoutLeadingSlash	93 B	-
withoutTrailingCharacters	98 B	-
withoutTrailingCharactersRecursive	129 B	-
withoutTrailingSlash	103 B	-
withRelativePointer	1.17 kB	-
withResponsiveOptions	2.22 kB	-
withScrolledInView	1.86 kB	-
withTrailingCharacters	96 B	-
withTrailingSlash	120 B	-

[codecov]

Codecov Report

Attention: Patch coverage is 88.09524% with 5 lines in your changes missing coverage. Please review.

Project coverage is 98.85%. Comparing base (274647b) to head (acce904).
Report is 4 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/js-toolkit/Base/Base.ts	88.09%	5 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #565      +/-   ##
===========================================
- Coverage    98.97%   98.85%   -0.12%     
===========================================
  Files          122      122              
  Lines         4178     4203      +25     
  Branches      1137     1147      +10     
===========================================
+ Hits          4135     4155      +20     
- Misses          43       48       +5     

Flag	Coverage Δ
unittests	98.85% <88.09%> (-0.12%)	⬇️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.