From 4fefebff233791a92879f44b3a5474ab2f4590b6 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Wed, 13 Aug 2025 10:15:34 +0200 Subject: [PATCH 1/4] WIP Add a logTree helper function --- packages/js-toolkit/helpers/index.ts | 1 + packages/js-toolkit/helpers/logTree.ts | 42 ++++++++++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 packages/js-toolkit/helpers/logTree.ts diff --git a/packages/js-toolkit/helpers/index.ts b/packages/js-toolkit/helpers/index.ts index 4afe180b1..999373334 100644 --- a/packages/js-toolkit/helpers/index.ts +++ b/packages/js-toolkit/helpers/index.ts @@ -7,3 +7,4 @@ export * from './importOnMediaQuery.js'; export * from './importWhenIdle.js'; export * from './importWhenPrefersMotion.js'; export * from './importWhenVisible.js'; +export * from './logTree.js'; diff --git a/packages/js-toolkit/helpers/logTree.ts b/packages/js-toolkit/helpers/logTree.ts new file mode 100644 index 000000000..2fec88101 --- /dev/null +++ b/packages/js-toolkit/helpers/logTree.ts @@ -0,0 +1,42 @@ +import type { Base } from '../Base/Base.js'; +/** + * Log children. + */ +function logChildren(instance: Base | Promise) { + if (instance instanceof Promise) { + let resolvedInstance: Base; + instance.then((r) => { + resolvedInstance = r; + }); + console.log( + 'This is an async component instance which has not yet been resolved or mounted.', + 'This is an async component. It is not yet resolved or mounted.', + 'You can try to access its instance with the following `maybeLoadInstance` getter.', + 'You can also call the global $logTree function again.', + ); + console.log({ + get maybeLoadInstance() { + return resolvedInstance; + }, + }); + return; + } + + console.groupCollapsed(instance.$id); + + console.log(instance); + for (const [name, children] of Object.entries(instance.$children)) { + console.groupCollapsed(name, `(${children.length})`); + for (const child of children) { + logChildren(child); + } + console.groupEnd(); + } + console.groupEnd(); +} + +export function logTree(instance: Base) { + console.log('————————————————————————————————'); + logChildren(instance); + console.log('————————————————————————————————'); +} From d8f3b7ccf74298f3b686cf3207476d70a78563c4 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Wed, 13 Aug 2025 15:02:15 +0200 Subject: [PATCH 2/4] Update demo --- packages/demo/src/js/app.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/demo/src/js/app.ts b/packages/demo/src/js/app.ts index e53c7ca80..3d21f6598 100644 --- a/packages/demo/src/js/app.ts +++ b/packages/demo/src/js/app.ts @@ -10,6 +10,7 @@ import { BaseConfig, withDrag, withName, + logTree, } from '@studiometa/js-toolkit'; import { matrix } from '@studiometa/js-toolkit/utils'; import ScrollToDemo from './components/ScrollToDemo.js'; @@ -126,15 +127,6 @@ class App extends Base { importOnInteraction(() => import('./components/Cursor.js'), document.documentElement, [ 'mousemove', ]), - Draggable: (app) => - importWhenVisible( - async () => { - const { Draggable } = await import('@studiometa/ui'); - return Draggable; - }, - 'Draggable', - app, - ), Skew: (app) => importWhenVisible(() => import('./components/Skew.js'), 'Skew', app), '[data-src]': (app) => importWhenVisible(() => import('./components/Lazyload.js'), '[data-src]', app), @@ -165,6 +157,7 @@ class App extends Base { */ mounted() { this.$log('Mounted 🎉'); + globalThis.$logTree = () => logTree(this); } onModalOpen(...args) { From 27108053621242b9aee6ca20754ec8c3d23b63f6 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Fri, 29 Aug 2025 12:31:36 +0200 Subject: [PATCH 3/4] Add automatic log of application tree in dev mode --- packages/js-toolkit/helpers/createApp.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/js-toolkit/helpers/createApp.ts b/packages/js-toolkit/helpers/createApp.ts index dc855448e..88ba00faa 100644 --- a/packages/js-toolkit/helpers/createApp.ts +++ b/packages/js-toolkit/helpers/createApp.ts @@ -3,7 +3,8 @@ import type { Features } from '../Base/features.js'; import { getInstances } from '../Base/index.js'; import { features } from '../Base/features.js'; import { useMutation } from '../services/index.js'; -import { isBoolean, isObject, isString } from '../utils/index.js'; +import { isBoolean, isObject, isString, isDev } from '../utils/index.js'; +import { logTree } from './logTree.js'; export type CreateAppOptions = Partial & { root?: HTMLElement; @@ -64,6 +65,9 @@ export function createApp, T extends BaseProps = async function init() { app = new App(root) as S & Base; await app.$mount(); + if (isDev) { + logTree(app); + } return app; } From 1b4f75de1e2bab69c2c9b0c8595de4a817023e30 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Fri, 29 Aug 2025 12:31:45 +0200 Subject: [PATCH 4/4] Update demo --- packages/demo/src/js/app.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/demo/src/js/app.ts b/packages/demo/src/js/app.ts index 3d21f6598..7eff2e3b4 100644 --- a/packages/demo/src/js/app.ts +++ b/packages/demo/src/js/app.ts @@ -12,7 +12,6 @@ import { withName, logTree, } from '@studiometa/js-toolkit'; -import { matrix } from '@studiometa/js-toolkit/utils'; import ScrollToDemo from './components/ScrollToDemo.js'; import Parallax from './components/Parallax.js'; import ResponsiveOptions from './components/ResponsiveOptions.js';