[Feature] Improve DX

packages/demo/src/js/app.ts

@@ -10,8 +10,8 @@ import {
   BaseConfig,
   withDrag,
   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';
@@ -126,15 +126,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 +156,7 @@ class App extends Base {
    */
   mounted() {
     this.$log('Mounted 🎉');
+    globalThis.$logTree = () => logTree(this);
   }
 
   onModalOpen(...args) {

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<Features> & {
   root?: HTMLElement;
@@ -64,6 +65,9 @@ export function createApp<S extends BaseConstructor<Base>, T extends BaseProps =
   async function init() {
     app = new App(root) as S & Base<T>;
     await app.$mount();
+    if (isDev) {
+      logTree(app);
+    }
     return app;
   }
 

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';

packages/js-toolkit/helpers/logTree.ts

@@ -0,0 +1,42 @@
+import type { Base } from '../Base/Base.js';
+/**
+ * Log children.
+ */
+function logChildren(instance: Base | Promise<Base>) {
+  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('————————————————————————————————');
+}