From c89e123228f9194c72867dedb52291f757ae588b Mon Sep 17 00:00:00 2001
From: Titouan Mathis <titouan@studiometa.fr>
Date: Fri, 15 Jul 2022 13:07:15 +0200
Subject: [PATCH 1/9] Add a `getDirectChildren` helper

It should be used when working with nested components to easily filter
direct children from nested ones.
---
 .../js-toolkit/helpers/getDirectChildren.js   | 26 +++++++++++
 packages/js-toolkit/helpers/index.js          |  1 +
 .../tests/helpers/getDirectChildren.spec.js   | 45 +++++++++++++++++++
 3 files changed, 72 insertions(+)
 create mode 100644 packages/js-toolkit/helpers/getDirectChildren.js
 create mode 100644 packages/tests/helpers/getDirectChildren.spec.js

diff --git a/packages/js-toolkit/helpers/getDirectChildren.js b/packages/js-toolkit/helpers/getDirectChildren.js
new file mode 100644
index 00000000..d1dc46f6
--- /dev/null
+++ b/packages/js-toolkit/helpers/getDirectChildren.js
@@ -0,0 +1,26 @@
+/**
+ * Get direct children from a parent when working with nested components.
+ *
+ * @template {Base} T
+ * @param   {Base} parentInstance
+ * @param   {string} parentName
+ * @param   {string} childrenName
+ * @returns {Array<T>}
+ */
+export default function getDirectChildren(parentInstance, parentName, childrenName) {
+  if (!parentInstance.$children[childrenName]) {
+    return [];
+  }
+
+  if (!parentInstance.$children[parentName]) {
+    return parentInstance.$children[childrenName];
+  }
+
+  return parentInstance.$children[childrenName].filter((child) =>
+    parentInstance.$children[parentName].every((nestedParent) =>
+      nestedParent.$children[childrenName]
+        ? !nestedParent.$children[childrenName].includes(child)
+        : true
+    )
+  );
+}
diff --git a/packages/js-toolkit/helpers/index.js b/packages/js-toolkit/helpers/index.js
index 90b3f428..258fad27 100644
--- a/packages/js-toolkit/helpers/index.js
+++ b/packages/js-toolkit/helpers/index.js
@@ -1,4 +1,5 @@
 export { default as createApp } from './createApp.js';
+export { default as getDirectChildren } from './getDirectChildren.js';
 export { default as getInstanceFromElement } from './getInstanceFromElement.js';
 export { default as importOnInteraction } from './importOnInteraction.js';
 export { default as importWhenIdle } from './importWhenIdle.js';
diff --git a/packages/tests/helpers/getDirectChildren.spec.js b/packages/tests/helpers/getDirectChildren.spec.js
new file mode 100644
index 00000000..6eacdb2c
--- /dev/null
+++ b/packages/tests/helpers/getDirectChildren.spec.js
@@ -0,0 +1,45 @@
+import { Base, getDirectChildren, getInstanceFromElement } from '@studiometa/js-toolkit';
+
+describe('The `getDirectChildren` helper function', () => {
+  class Child extends Base {
+    static config = {
+      name: 'Child',
+    };
+  }
+
+  class Parent extends Base {
+    static config = {
+      name: 'Parent',
+      components: {
+        Child,
+        Parent,
+      },
+    };
+  }
+
+  const div = document.createElement('div');
+  div.innerHTML = `
+    <div data-component="Parent">
+      <div data-component="Child" id="first-child"></div>
+      <div data-component="Parent">
+        <div data-component="Child" id="grand-child"></div>
+      </div>
+    </div>
+  `;
+  const firstChild = div.querySelector('#first-child');
+  const grandChild = div.querySelector('#grand-child');
+
+  const parent = new Parent(div.firstElementChild);
+  parent.$mount();
+
+  const directChildren = getDirectChildren(parent, 'Parent', 'Child');
+
+  it('should return first-child components', () => {
+    expect(directChildren).toHaveLength(1);
+    expect(directChildren).toEqual([getInstanceFromElement(firstChild, Child)]);
+  });
+
+  it('should not return grand-child components', () => {
+    expect(getDirectChildren(parent, 'Parent', 'Child')).not.toContain(grandChild);
+  });
+});

From 04693b08b6e68fb82c269c46b76572ef37fc637a Mon Sep 17 00:00:00 2001
From: Titouan Mathis <titouan@studiometa.fr>
Date: Fri, 15 Jul 2022 14:26:10 +0200
Subject: [PATCH 2/9] Add a `isDirectChild` helper function

---
 .../js-toolkit/helpers/getDirectChildren.js   | 19 ++++-
 packages/js-toolkit/helpers/index.js          |  2 +-
 .../tests/helpers/getDirectChildren.spec.js   | 79 ++++++++++++-------
 3 files changed, 68 insertions(+), 32 deletions(-)

diff --git a/packages/js-toolkit/helpers/getDirectChildren.js b/packages/js-toolkit/helpers/getDirectChildren.js
index d1dc46f6..4ba5a192 100644
--- a/packages/js-toolkit/helpers/getDirectChildren.js
+++ b/packages/js-toolkit/helpers/getDirectChildren.js
@@ -1,3 +1,7 @@
+/**
+ * @typedef {import('../Base/index.js').default} Base
+ */
+
 /**
  * Get direct children from a parent when working with nested components.
  *
@@ -7,7 +11,7 @@
  * @param   {string} childrenName
  * @returns {Array<T>}
  */
-export default function getDirectChildren(parentInstance, parentName, childrenName) {
+export function getDirectChildren(parentInstance, parentName, childrenName) {
   if (!parentInstance.$children[childrenName]) {
     return [];
   }
@@ -24,3 +28,16 @@ export default function getDirectChildren(parentInstance, parentName, childrenNa
     )
   );
 }
+
+/**
+ * Test if a component instance is a direct child from the given component.
+ *
+ * @param   {Base}    parentInstance
+ * @param   {string}  parentName
+ * @param   {Base}    childInstance
+ * @param   {string}  childrenName
+ * @returns {boolean}
+ */
+export function isDirectChild(parentInstance, parentName, childInstance, childrenName) {
+  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);
+}
diff --git a/packages/js-toolkit/helpers/index.js b/packages/js-toolkit/helpers/index.js
index 258fad27..3b83ac1a 100644
--- a/packages/js-toolkit/helpers/index.js
+++ b/packages/js-toolkit/helpers/index.js
@@ -1,5 +1,5 @@
 export { default as createApp } from './createApp.js';
-export { default as getDirectChildren } from './getDirectChildren.js';
+export * from './getDirectChildren.js';
 export { default as getInstanceFromElement } from './getInstanceFromElement.js';
 export { default as importOnInteraction } from './importOnInteraction.js';
 export { default as importWhenIdle } from './importWhenIdle.js';
diff --git a/packages/tests/helpers/getDirectChildren.spec.js b/packages/tests/helpers/getDirectChildren.spec.js
index 6eacdb2c..8c4282a2 100644
--- a/packages/tests/helpers/getDirectChildren.spec.js
+++ b/packages/tests/helpers/getDirectChildren.spec.js
@@ -1,39 +1,44 @@
-import { Base, getDirectChildren, getInstanceFromElement } from '@studiometa/js-toolkit';
+import {
+  Base,
+  getDirectChildren,
+  getInstanceFromElement,
+  isDirectChild,
+} from '@studiometa/js-toolkit';
 
-describe('The `getDirectChildren` helper function', () => {
-  class Child extends Base {
-    static config = {
-      name: 'Child',
-    };
-  }
-
-  class Parent extends Base {
-    static config = {
-      name: 'Parent',
-      components: {
-        Child,
-        Parent,
-      },
-    };
-  }
-
-  const div = document.createElement('div');
-  div.innerHTML = `
+class Child extends Base {
+  static config = {
+    name: 'Child',
+  };
+}
+
+class Parent extends Base {
+  static config = {
+    name: 'Parent',
+    components: {
+      Child,
+      Parent,
+    },
+  };
+}
+
+const div = document.createElement('div');
+div.innerHTML = `
+  <div data-component="Parent">
+    <div data-component="Child" id="first-child"></div>
     <div data-component="Parent">
-      <div data-component="Child" id="first-child"></div>
-      <div data-component="Parent">
-        <div data-component="Child" id="grand-child"></div>
-      </div>
+      <div data-component="Child" id="grand-child"></div>
     </div>
-  `;
-  const firstChild = div.querySelector('#first-child');
-  const grandChild = div.querySelector('#grand-child');
+  </div>
+`;
+const firstChild = div.querySelector('#first-child');
+const grandChild = div.querySelector('#grand-child');
 
-  const parent = new Parent(div.firstElementChild);
-  parent.$mount();
+const parent = new Parent(div.firstElementChild);
+parent.$mount();
 
-  const directChildren = getDirectChildren(parent, 'Parent', 'Child');
+const directChildren = getDirectChildren(parent, 'Parent', 'Child');
 
+describe('The `getDirectChildren` helper function', () => {
   it('should return first-child components', () => {
     expect(directChildren).toHaveLength(1);
     expect(directChildren).toEqual([getInstanceFromElement(firstChild, Child)]);
@@ -43,3 +48,17 @@ describe('The `getDirectChildren` helper function', () => {
     expect(getDirectChildren(parent, 'Parent', 'Child')).not.toContain(grandChild);
   });
 });
+
+describe('The `isDirectChild` helper function', () => {
+  it('should return true when a component is a direct child', () => {
+    expect(
+      isDirectChild(parent, 'Parent', getInstanceFromElement(firstChild, Child), 'Child')
+    ).toBe(true);
+  });
+
+  it('should return false when a component is a grand child', () => {
+    expect(
+      isDirectChild(parent, 'Parent', getInstanceFromElement(grandChild, Child), 'Child')
+    ).toBe(false);
+  });
+});

From d45a31ef48b15f33a156279b2bab6517a3521fda Mon Sep 17 00:00:00 2001
From: Titouan Mathis <titouan@studiometa.fr>
Date: Fri, 15 Jul 2022 14:27:00 +0200
Subject: [PATCH 3/9] Fix tests

---
 packages/tests/__snapshots__/index.spec.js.snap     |  2 ++
 .../tests/helpers/__snapshots__/index.spec.js.snap  | 13 +++++++++++++
 packages/tests/helpers/index.spec.js                |  4 +---
 3 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 packages/tests/helpers/__snapshots__/index.spec.js.snap

diff --git a/packages/tests/__snapshots__/index.spec.js.snap b/packages/tests/__snapshots__/index.spec.js.snap
index dea45d04..c2c39629 100644
--- a/packages/tests/__snapshots__/index.spec.js.snap
+++ b/packages/tests/__snapshots__/index.spec.js.snap
@@ -4,10 +4,12 @@ exports[`The package exports should export helpers and the Base class 1`] = `
 Array [
   "Base",
   "createApp",
+  "getDirectChildren",
   "getInstanceFromElement",
   "importOnInteraction",
   "importWhenIdle",
   "importWhenVisible",
+  "isDirectChild",
   "useDrag",
   "useKey",
   "useLoad",
diff --git a/packages/tests/helpers/__snapshots__/index.spec.js.snap b/packages/tests/helpers/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000..539b97be
--- /dev/null
+++ b/packages/tests/helpers/__snapshots__/index.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`helpers exports 1`] = `
+Array [
+  "createApp",
+  "getDirectChildren",
+  "getInstanceFromElement",
+  "importOnInteraction",
+  "importWhenIdle",
+  "importWhenVisible",
+  "isDirectChild",
+]
+`;
diff --git a/packages/tests/helpers/index.spec.js b/packages/tests/helpers/index.spec.js
index 61e5ea8f..507f1aa1 100644
--- a/packages/tests/helpers/index.spec.js
+++ b/packages/tests/helpers/index.spec.js
@@ -1,7 +1,5 @@
 import * as helpers from '@studiometa/js-toolkit/helpers';
-import getFilenamesInFolder from '../__utils__/getFilenamesInFolder.js';
 
 test('helpers exports', () => {
-  const names = getFilenamesInFolder('../../js-toolkit/helpers/', import.meta.url).filter(key => key !== 'utils');
-  expect(Object.keys(helpers)).toEqual(names);
+  expect(Object.keys(helpers)).toMatchSnapshot();
 });

From d7b0c272c9d5ddc74263290a94cfb217e922c499 Mon Sep 17 00:00:00 2001
From: Titouan Mathis <titouan@studiometa.fr>
Date: Fri, 15 Jul 2022 16:07:53 +0200
Subject: [PATCH 4/9] Add test cases

---
 .../js-toolkit/helpers/getDirectChildren.js   | 25 +++++++++++--------
 .../tests/helpers/getDirectChildren.spec.js   | 19 ++++++++++++++
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/packages/js-toolkit/helpers/getDirectChildren.js b/packages/js-toolkit/helpers/getDirectChildren.js
index 4ba5a192..d611e8f8 100644
--- a/packages/js-toolkit/helpers/getDirectChildren.js
+++ b/packages/js-toolkit/helpers/getDirectChildren.js
@@ -1,3 +1,5 @@
+import { isArray } from '../utils/index.js';
+
 /**
  * @typedef {import('../Base/index.js').default} Base
  */
@@ -12,21 +14,24 @@
  * @returns {Array<T>}
  */
 export function getDirectChildren(parentInstance, parentName, childrenName) {
-  if (!parentInstance.$children[childrenName]) {
+  const children = parentInstance.$children[childrenName];
+  const nestedParents = parentInstance.$children[parentName];
+
+  if (!isArray(children)) {
     return [];
   }
 
-  if (!parentInstance.$children[parentName]) {
-    return parentInstance.$children[childrenName];
+  if (!isArray(nestedParents) || nestedParents.length <= 0) {
+    return children;
   }
 
-  return parentInstance.$children[childrenName].filter((child) =>
-    parentInstance.$children[parentName].every((nestedParent) =>
-      nestedParent.$children[childrenName]
-        ? !nestedParent.$children[childrenName].includes(child)
-        : true
-    )
-  );
+  return children.filter((child) => {
+    return nestedParents.every((nestedParent) => {
+      const nestedChildren = nestedParent.$children[childrenName];
+      /* istanbul ignore next */
+      return isArray(nestedChildren) ? !nestedChildren.includes(child) : true;
+    });
+  });
 }
 
 /**
diff --git a/packages/tests/helpers/getDirectChildren.spec.js b/packages/tests/helpers/getDirectChildren.spec.js
index 8c4282a2..ea746c96 100644
--- a/packages/tests/helpers/getDirectChildren.spec.js
+++ b/packages/tests/helpers/getDirectChildren.spec.js
@@ -16,6 +16,7 @@ class Parent extends Base {
     name: 'Parent',
     components: {
       Child,
+      OtherChild: Child,
       Parent,
     },
   };
@@ -39,6 +40,11 @@ parent.$mount();
 const directChildren = getDirectChildren(parent, 'Parent', 'Child');
 
 describe('The `getDirectChildren` helper function', () => {
+  it('should return an empty array if no children components where found', () => {
+    expect(getDirectChildren(parent, 'Parent', 'OtherChild')).toEqual([]);
+    expect(getDirectChildren(parent, 'Parent', 'UndefinedChild')).toEqual([]);
+  });
+
   it('should return first-child components', () => {
     expect(directChildren).toHaveLength(1);
     expect(directChildren).toEqual([getInstanceFromElement(firstChild, Child)]);
@@ -47,6 +53,19 @@ describe('The `getDirectChildren` helper function', () => {
   it('should not return grand-child components', () => {
     expect(getDirectChildren(parent, 'Parent', 'Child')).not.toContain(grandChild);
   });
+
+  it('should return all children if there is no nested parent', () => {
+    const el = document.createElement('div');
+    el.innerHTML = `
+      <div data-component="Parent">
+        <div data-component="Child"></div>
+        <div data-component="Child"></div>
+      </div>
+    `;
+    const instance = new Parent(el.firstElementChild);
+    instance.$mount();
+    expect(getDirectChildren(instance, 'Parent', 'Child')).toHaveLength(2);
+  });
 });
 
 describe('The `isDirectChild` helper function', () => {

From b9eeccfed50197c6501b42621fc0861391c4430e Mon Sep 17 00:00:00 2001
From: Titouan Mathis <titouan@studiometa.fr>
Date: Fri, 15 Jul 2022 17:51:52 +0200
Subject: [PATCH 5/9] Add doc

---
 packages/docs/.vitepress/config.js            |  2 +
 .../docs/api/helpers/getDirectChildren.md     | 43 +++++++++++++++++++
 .../api/helpers/getInstanceFromElement.md     |  2 +-
 packages/docs/api/helpers/isDirectChild.md    | 39 +++++++++++++++++
 4 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/api/helpers/getDirectChildren.md
 create mode 100644 packages/docs/api/helpers/isDirectChild.md

diff --git a/packages/docs/.vitepress/config.js b/packages/docs/.vitepress/config.js
index d0c901fc..a35896f8 100644
--- a/packages/docs/.vitepress/config.js
+++ b/packages/docs/.vitepress/config.js
@@ -198,10 +198,12 @@ function getDecoratorsSidebar() {
 function getHelpersSidebar() {
   return [
     { text: 'createApp', link: '/api/helpers/createApp.html' },
+    { text: 'getDirectChildren', link: '/api/helpers/getDirectChildren.html' },
     { text: 'getInstanceFromElement', link: '/api/helpers/getInstanceFromElement.html' },
     { text: 'importOnInteraction', link: '/api/helpers/importOnInteraction.html' },
     { text: 'importWhenIdle', link: '/api/helpers/importWhenIdle.html' },
     { text: 'importWhenVisible', link: '/api/helpers/importWhenVisible.html' },
+    { text: 'isDirectChild', link: '/api/helpers/isDirectChild.html' },
   ];
 }
 
diff --git a/packages/docs/api/helpers/getDirectChildren.md b/packages/docs/api/helpers/getDirectChildren.md
new file mode 100644
index 00000000..ab335919
--- /dev/null
+++ b/packages/docs/api/helpers/getDirectChildren.md
@@ -0,0 +1,43 @@
+# getDirectChildren
+
+Use the `getDirectChildren` function to get a list components which are direct descendants of the given parent instance. This function is helpful when working with nested components which declare themselves as children.
+
+:::tip
+If you need to only check if an instance is a direct descendant of another instance, prefer the [`isDirectChild` helper function](/api/helpers/isDirectChild.md) which will return a `boolean` directly.
+:::
+
+## Usage
+
+```js {1,9,16}
+import { Base, getDirectChildren } from '@studiometa/js-toolkit';
+import Child from './Child.js';
+
+class Parent extends Base {
+  static config = {
+    name: 'Parent',
+    components: {
+      Child,
+      Parent, // Useful for recursive components only
+    },
+  };
+
+  onChildClick(index, event) {
+    const childInstance = this.$children.Child[index];
+    const directChildren = getDirectChildren(this, 'Parent', 'Child');
+
+    if (directChildren.includes(childInstance)) {
+      event.preventDefault();
+    }
+  }
+}
+```
+
+**Parameters**
+
+- `parentInstance` (`Base`): the target element
+- `parentName` (`string`): the name of the recursive parent as specified in the `config.components` object.
+- `childrenName` (`string`): the name of the children components as specified in the `config.components` object.
+
+**Return value**
+
+- `Base[]`: a list of the direct child components corresponding to the given `childrenName`
diff --git a/packages/docs/api/helpers/getInstanceFromElement.md b/packages/docs/api/helpers/getInstanceFromElement.md
index fa28528c..01c795fa 100644
--- a/packages/docs/api/helpers/getInstanceFromElement.md
+++ b/packages/docs/api/helpers/getInstanceFromElement.md
@@ -14,7 +14,7 @@ const componentInstance = getInstanceFromElement(document.body, Component);
 **Parameters**
 
 - `element` (`HTMLElement`): the target element
-- `BaseConstructor`: (`BaseConstructor`): the class (constructor) of the component to look for
+- `BaseConstructor` (`BaseConstructor`): the class (constructor) of the component to look for
 
 **Return value**
 
diff --git a/packages/docs/api/helpers/isDirectChild.md b/packages/docs/api/helpers/isDirectChild.md
new file mode 100644
index 00000000..0a592f61
--- /dev/null
+++ b/packages/docs/api/helpers/isDirectChild.md
@@ -0,0 +1,39 @@
+# isDirectChild
+
+Use the `isDirectChild` function to test if a child component instance is a direct descendant of the given parent instance. This function is helpful when working with nested components which declare themselves as children.
+
+## Usage
+
+```js {1,9,16}
+import { Base, isDirectChild } from '@studiometa/js-toolkit';
+import Child from './Child.js';
+
+class Parent extends Base {
+  static config = {
+    name: 'Parent',
+    components: {
+      Child,
+      Parent, // Useful for recursive components only
+    },
+  };
+
+  onChildClick(index, event) {
+    const childInstance = this.$children.Child[index];
+
+    if (isDirectChild(this, 'Parent', childInstance, 'Child')) {
+      event.preventDefault();
+    }
+  }
+}
+```
+
+**Parameters**
+
+- `parentInstance` (`Base`): the parent instance.
+- `parentName` (`string`): the name of the recursive parent as specified in the `config.components` object.
+- `childInstance` (`Base`): the child instance.
+- `childName` (`string`): the name of the child component as specified in the `config.components` object.
+
+**Return value**
+
+- `boolean`: `true` if the given child instance is a direct descendant of the given parent instance.

From 18befff05443f2e49a01293ab79d20c331751b1a Mon Sep 17 00:00:00 2001
From: Titouan Mathis <titouan@studiometa.fr>
Date: Sun, 17 Jul 2022 17:42:25 +0200
Subject: [PATCH 6/9] Refactor `isDirectChild` params order

It is more logical and natural to keep the same order of arguments for
both `isDirectChild` and `getDirectChildren`.
---
 packages/docs/api/helpers/isDirectChild.md       | 4 ++--
 packages/js-toolkit/helpers/getDirectChildren.js | 4 ++--
 packages/tests/helpers/getDirectChildren.spec.js | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docs/api/helpers/isDirectChild.md b/packages/docs/api/helpers/isDirectChild.md
index 0a592f61..9ecb8f18 100644
--- a/packages/docs/api/helpers/isDirectChild.md
+++ b/packages/docs/api/helpers/isDirectChild.md
@@ -20,7 +20,7 @@ class Parent extends Base {
   onChildClick(index, event) {
     const childInstance = this.$children.Child[index];
 
-    if (isDirectChild(this, 'Parent', childInstance, 'Child')) {
+    if (isDirectChild(this, 'Parent', 'Child', childInstance)) {
       event.preventDefault();
     }
   }
@@ -31,8 +31,8 @@ class Parent extends Base {
 
 - `parentInstance` (`Base`): the parent instance.
 - `parentName` (`string`): the name of the recursive parent as specified in the `config.components` object.
-- `childInstance` (`Base`): the child instance.
 - `childName` (`string`): the name of the child component as specified in the `config.components` object.
+- `childInstance` (`Base`): the child instance.
 
 **Return value**
 
diff --git a/packages/js-toolkit/helpers/getDirectChildren.js b/packages/js-toolkit/helpers/getDirectChildren.js
index d611e8f8..3329ebda 100644
--- a/packages/js-toolkit/helpers/getDirectChildren.js
+++ b/packages/js-toolkit/helpers/getDirectChildren.js
@@ -39,10 +39,10 @@ export function getDirectChildren(parentInstance, parentName, childrenName) {
  *
  * @param   {Base}    parentInstance
  * @param   {string}  parentName
- * @param   {Base}    childInstance
  * @param   {string}  childrenName
+ * @param   {Base}    childInstance
  * @returns {boolean}
  */
-export function isDirectChild(parentInstance, parentName, childInstance, childrenName) {
+export function isDirectChild(parentInstance, parentName, childrenName, childInstance) {
   return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);
 }
diff --git a/packages/tests/helpers/getDirectChildren.spec.js b/packages/tests/helpers/getDirectChildren.spec.js
index ea746c96..91b5b7f5 100644
--- a/packages/tests/helpers/getDirectChildren.spec.js
+++ b/packages/tests/helpers/getDirectChildren.spec.js
@@ -71,13 +71,13 @@ describe('The `getDirectChildren` helper function', () => {
 describe('The `isDirectChild` helper function', () => {
   it('should return true when a component is a direct child', () => {
     expect(
-      isDirectChild(parent, 'Parent', getInstanceFromElement(firstChild, Child), 'Child')
+      isDirectChild(parent, 'Parent', 'Child', getInstanceFromElement(firstChild, Child))
     ).toBe(true);
   });
 
   it('should return false when a component is a grand child', () => {
     expect(
-      isDirectChild(parent, 'Parent', getInstanceFromElement(grandChild, Child), 'Child')
+      isDirectChild(parent, 'Parent', 'Child', getInstanceFromElement(grandChild, Child))
     ).toBe(false);
   });
 });

From f266873993d97d6c0a62de62f9e7824455292d91 Mon Sep 17 00:00:00 2001
From: Titouan Mathis <titouan@studiometa.fr>
Date: Mon, 18 Jul 2022 10:16:07 +0200
Subject: [PATCH 7/9] Update doc

---
 README.md                          | 6 +++---
 packages/docs/.vitepress/config.js | 4 ++--
 packages/docs/index.md             | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 71fb364d..7a3506dc 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 [![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/js-toolkit?style=flat-square)](https://david-dm.org/studiometa/js-toolkit)
 ![Codecov](https://img.shields.io/codecov/c/github/studiometa/js-toolkit?style=flat-square)
 
-> A set of useful little bits of JavaScript to boost your project! 🚀
+> A JavaScript data-attributes driven micro-framework shipped with plenty of useful utility functions to boost your project.
 
 ## Installation
 
@@ -15,9 +15,9 @@ Install the latest version via NPM:
 npm install @studiometa/js-toolkit
 ```
 
-## Documentation
+## What is it?
 
-This project contains a JavaScript micro-framework and its utility functions whose main objectives are:
+This project is a JavaScript micro-framework (along with its utility functions) whose main objectives are:
 
 - Enforcing best-practice and consistency between projects
 - Using elements from the DOM easily
diff --git a/packages/docs/.vitepress/config.js b/packages/docs/.vitepress/config.js
index a35896f8..6843040f 100644
--- a/packages/docs/.vitepress/config.js
+++ b/packages/docs/.vitepress/config.js
@@ -7,8 +7,8 @@ const pkg = JSON.parse(
 
 export default defineConfig({
   lang: 'en-US',
-  title: 'JS Toolkit',
-  description: 'A set of useful little bits of JavaScript to boost your project! 🚀',
+  title: 'A JavaScript data-attributes driven micro-framework',
+  description: 'The JS Toolkit by Studio Meta is a JavaScript data-attributes driven micro-framework shipped with plenty of useful utility functions to boost your project.',
   lastUpdated: true,
   head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/logo.png' }]],
   themeConfig: {
diff --git a/packages/docs/index.md b/packages/docs/index.md
index 6b5e2749..ab9fd54d 100644
--- a/packages/docs/index.md
+++ b/packages/docs/index.md
@@ -1,6 +1,8 @@
 ---
 layout: home
 sidebar: false
+title: A data-attributes driven micro-framework
+description: The JS Toolkit by Studio Meta is a JavaScript data-attributes driven micro-framework shipped with plenty of useful utility functions to boost your project.
 hero:
   name: JS Toolkit
   text: A data-attributes driven micro framework

From c51f580bef9c8c01b1317e2ebf50f990b6f25471 Mon Sep 17 00:00:00 2001
From: Titouan Mathis <titouan@studiometa.fr>
Date: Mon, 18 Jul 2022 10:22:36 +0200
Subject: [PATCH 8/9] Revert "Change build target to ES2022"

This reverts commit fa4ebd6150c834e2fbe0efabae56b8d9a93ff95a.
---
 .github/workflows/tests.yml | 4 ++--
 scripts/build.js            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 949c9d8a..61a2c98b 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -68,5 +68,5 @@ jobs:
       - uses: antfu/export-size-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          build_script: npm run build-for-export-size
-          paths: ./dist
+          build_script: node ./scripts/add-utils-export.js
+          paths: packages/js-toolkit
diff --git a/scripts/build.js b/scripts/build.js
index c0241ee4..d3520312 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -12,7 +12,7 @@ const defaultOptions = {
   entryPoints,
   write: true,
   outdir,
-  target: 'es2022',
+  target: 'es2019',
 };
 
 /**

From 38ee3d7a90e8ceb3f5d7cb4b0945639c3d90df6f Mon Sep 17 00:00:00 2001
From: Titouan Mathis <titouan@studiometa.fr>
Date: Mon, 18 Jul 2022 10:40:47 +0200
Subject: [PATCH 9/9] Bump version number

---
 package-lock.json                | 12 ++++++------
 package.json                     |  2 +-
 packages/demo/package.json       |  2 +-
 packages/docs/package.json       |  2 +-
 packages/js-toolkit/package.json |  2 +-
 packages/tests/package.json      |  2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e1873d37..1adafe57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@studiometa/js-toolkit-workspace",
-      "version": "2.3.0",
+      "version": "2.4.0",
       "workspaces": [
         "packages/*"
       ],
@@ -22444,7 +22444,7 @@
     },
     "packages/demo": {
       "name": "@studiometa/js-toolkit-demo",
-      "version": "2.3.0",
+      "version": "2.4.0",
       "dependencies": {
         "@studiometa/eslint-config": "^3.0.1",
         "@studiometa/stylelint-config": "^2.0.0",
@@ -22461,7 +22461,7 @@
     },
     "packages/docs": {
       "name": "@studiometa/js-toolkit-docs",
-      "version": "2.3.0",
+      "version": "2.4.0",
       "dependencies": {
         "@bytebase/vue-kbar": "^0.1.7",
         "@studiometa/tailwind-config": "^1.1.0",
@@ -22471,7 +22471,7 @@
     },
     "packages/js-toolkit": {
       "name": "@studiometa/js-toolkit",
-      "version": "2.3.0",
+      "version": "2.4.0",
       "license": "MIT",
       "dependencies": {
         "@motionone/easing": "^10.9.0",
@@ -22489,7 +22489,7 @@
     },
     "packages/tests": {
       "name": "@studiometa/js-toolkit-tests",
-      "version": "2.3.0",
+      "version": "2.4.0",
       "dependencies": {
         "@jest/globals": "^28.1.1",
         "babel-jest": "^28.1.1",
diff --git a/package.json b/package.json
index 680bf783..7c80323f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 4191cae2..1de1b2b3 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": true,
   "type": "commonjs",
   "scripts": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 0657fb17..2d2565b3 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-docs",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "private": true,
   "scripts": {
diff --git a/packages/js-toolkit/package.json b/packages/js-toolkit/package.json
index 4b2c6e63..357e902a 100644
--- a/packages/js-toolkit/package.json
+++ b/packages/js-toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
diff --git a/packages/tests/package.json b/packages/tests/package.json
index fd1c3283..55a3256b 100644
--- a/packages/tests/package.json
+++ b/packages/tests/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-tests",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": true,
   "type": "module",
   "scripts": {