[Feature] withKeepUnmounted decorator

[antoine4livre]

🔗 Linked issue

#192

❓ 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

Try in the playground

import { Base, withKeepUnmounted } from '@studiometa/js-toolkit';

export default class UnmountedComponent extends withKeepUnmounted(Base) {
  static config = {
    name: 'UnmountedComponent',
    log: true,
  };

  mounted() {
    this.$log('Enabled and mounted.');
  }
}

import { Base, createApp } from '@studiometa/js-toolkit';
import UnmountedComponent from './UnmountedComponent.js';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      UnmountedComponent,
    },
    refs: ['btn'],
  };

  onBtnClick() {
    // Set the enabled option to `true` will mount the component
    this.$children.UnmountedComponent[0].$options.enabled = true;
  }
}

createApp(App);

📝 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
withKeepUnmounted	282 B	+282 B (+100.00%) 🔺
DECORATORS	6.37 kB	+98 B (+1.56%) 🔺
FRAMEWORK	11.58 kB	+101 B (+0.88%) 🔺
ALL	16.48 kB	+112 B (+0.68%) 🔺

Unchanged

@studiometa/js-toolkit

Name	Size	Diff
addClass	226 B	-
addStyle	238 B	-
animate	2.71 kB	-
Base	7.16 kB	-
boundingRectToCircle	154 B	-
clamp	67 B	-
clamp01	87 B	-
collideCircleCircle	99 B	-
collideCircleRect	159 B	-
collidePointCircle	112 B	-
collidePointRect	103 B	-
collideRectRect	99 B	-
createApp	380 B	-
createEaseInOut	116 B	-
createEaseOut	71 B	-
createRange	90 B	-
damp	78 B	-
debounce	92 B	-
domScheduler	296 B	-
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	178 B	-
getComponentResolver	138 B	-
getDirectChildren	183 B	-
getInstanceFromElement	90 B	-
getOffsetSizes	159 B	-
hasWindow	62 B	-
HELPERS	1.29 kB	-
historyPush	499 B	-
historyReplace	503 B	-
importOnInteraction	454 B	-
importOnMediaQuery	236 B	-
importWhenIdle	223 B	-
importWhenPrefersMotion	275 B	-
importWhenVisible	472 B	-
inertiaFinalValue	142 B	-
isArray	70 B	-
isBoolean	78 B	-
isDefined	86 B	-
isDev	72 B	-
isDirectChild	212 B	-
isEmpty	207 B	-
isEmptyString	93 B	-
isFunction	72 B	-
isNull	72 B	-
isNumber	84 B	-
isObject	105 B	-
isString	86 B	-
keyCodes	100 B	-
lerp	57 B	-
map	71 B	-
matrix	106 B	-
mean	91 B	-
memoize	189 B	-
nextFrame	162 B	-
nextMicrotask	111 B	-
nextTick	134 B	-
noop	39 B	-
noopValue	49 B	-
objectToURLSearchParams	302 B	-
Queue	226 B	-
randomInt	80 B	-
randomItem	232 B	-
removeClass	222 B	-
removeStyle	238 B	-
round	56 B	-
saveActiveElement	56 B	-
scrollTo	1.91 kB	-
SERVICES	3.21 kB	-
SmartQueue	411 B	-
startsWith	87 B	-
throttle	101 B	-
toggleClass	225 B	-
transform	321 B	-
transition	916 B	-
trapFocus	366 B	-
tween	1.34 kB	-
untrapFocus	45 B	-
useDrag	1.61 kB	-
useKey	630 B	-
useLoad	373 B	-
usePointer	841 B	-
useRaf	682 B	-
useResize	692 B	-
useScheduler	290 B	-
useScroll	800 B	-
useService	254 B	-
UTILS	6.67 kB	-
wait	79 B	-
withBreakpointManager	1.1 kB	-
withBreakpointObserver	1.29 kB	-
withDrag	1.76 kB	-
withExtraConfig	135 B	-
withFreezedOptions	140 B	-
withIntersectionObserver	285 B	-
withLeadingCharacters	88 B	-
withLeadingSlash	107 B	-
withMountOnMediaQuery	338 B	-
withMountWhenInView	331 B	-
withMountWhenPrefersMotion	370 B	-
withName	81 B	-
withoutLeadingCharacters	86 B	-
withoutLeadingCharactersRecursive	124 B	-
withoutLeadingSlash	93 B	-
withoutTrailingCharacters	98 B	-
withoutTrailingCharactersRecursive	129 B	-
withoutTrailingSlash	103 B	-
withRelativePointer	997 B	-
withResponsiveOptions	1.89 kB	-
withScrolledInView	1.88 kB	-
withTrailingCharacters	96 B	-
withTrailingSlash	120 B	-

[antoine4livre]

@titouanmathis I need help to improve my tests...

They work if they are launched separately but not during the CI...

✅ npm run test -- withKeepUnmounted
🔴 nom run test

[titouanmathis]

suggestion: Return the needed values instead of passing a callback

async function initApp(options?) {
  const div = h('div');
  // ...
  
  const app = await createApp(App, div);

  return { app, div };
}

it('should work', async () => {
  const { app } = await initApp();
  expect(app.$isMounted).toBe(true);
});

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (ca62b28) to head (d5e7f37).
Report is 317 commits behind head on develop.

Additional details and impacted files

@@            Coverage Diff            @@
##           develop      #433   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          126       127    +1     
  Lines         4012      4057   +45     
=========================================
+ Hits          4012      4057   +45     

Flag	Coverage Δ
unittests	100.00% <100.00%> (ø)

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.

[titouanmathis]

This will be addressed more globally by #565, closing for now.