@kupola/kupola 2.0.0-beta.6 → 2.0.0-beta.8

package/packages/core/package.json

@@ -3,214 +3,214 @@
   "version": "2.0.0-alpha.1",
   "description": "Kupola core reactivity engine — Signal, computed, effect, batch, template, SSR, components.",
   "type": "module",
-  "main": "dist/core.cjs.js",
+  "main": "dist/core.cjs",
   "module": "dist/core.esm.js",
   "types": "dist/types/core.d.ts",
   "exports": {
     ".": {
       "import": "./dist/core.esm.js",
-      "require": "./dist/core.cjs.js",
+      "require": "./dist/core.cjs",
       "types": "./dist/types/core.d.ts"
     },
     "./server": {
       "import": "./dist/kupola-core-server.esm.js",
-      "require": "./dist/kupola-core-server.cjs.js"
+      "require": "./dist/kupola-core-server.cjs"
     },
     "./directives": {
       "import": "./dist/kupola-core-directives.esm.js",
-      "require": "./dist/kupola-core-directives.cjs.js"
+      "require": "./dist/kupola-core-directives.cjs"
     },
     "./components/modal": {
       "import": "./dist/kupola-core-modal.esm.js",
-      "require": "./dist/kupola-core-modal.cjs.js"
+      "require": "./dist/kupola-core-modal.cjs"
     },
     "./components/dropdown": {
       "import": "./dist/kupola-core-dropdown.esm.js",
-      "require": "./dist/kupola-core-dropdown.cjs.js"
+      "require": "./dist/kupola-core-dropdown.cjs"
     },
     "./components/drawer": {
       "import": "./dist/kupola-core-drawer.esm.js",
-      "require": "./dist/kupola-core-drawer.cjs.js"
+      "require": "./dist/kupola-core-drawer.cjs"
     },
     "./components/collapse": {
       "import": "./dist/kupola-core-collapse.esm.js",
-      "require": "./dist/kupola-core-collapse.cjs.js"
+      "require": "./dist/kupola-core-collapse.cjs"
     },
     "./components/tabs": {
       "import": "./dist/kupola-core-tabs.esm.js",
-      "require": "./dist/kupola-core-tabs.cjs.js"
+      "require": "./dist/kupola-core-tabs.cjs"
     },
     "./components/select": {
       "import": "./dist/kupola-core-select.esm.js",
-      "require": "./dist/kupola-core-select.cjs.js"
+      "require": "./dist/kupola-core-select.cjs"
     },
     "./components/pagination": {
       "import": "./dist/kupola-core-pagination.esm.js",
-      "require": "./dist/kupola-core-pagination.cjs.js"
+      "require": "./dist/kupola-core-pagination.cjs"
     },
     "./components/datepicker": {
       "import": "./dist/kupola-core-datepicker.esm.js",
-      "require": "./dist/kupola-core-datepicker.cjs.js"
+      "require": "./dist/kupola-core-datepicker.cjs"
     },
     "./components/dialog": {
       "import": "./dist/kupola-core-dialog.esm.js",
-      "require": "./dist/kupola-core-dialog.cjs.js"
+      "require": "./dist/kupola-core-dialog.cjs"
     },
     "./components/notification": {
       "import": "./dist/kupola-core-notification.esm.js",
-      "require": "./dist/kupola-core-notification.cjs.js"
+      "require": "./dist/kupola-core-notification.cjs"
     },
     "./components/tooltip": {
       "import": "./dist/kupola-core-tooltip.esm.js",
-      "require": "./dist/kupola-core-tooltip.cjs.js"
+      "require": "./dist/kupola-core-tooltip.cjs"
     },
     "./components/alert": {
       "import": "./dist/kupola-core-alert.esm.js",
-      "require": "./dist/kupola-core-alert.cjs.js"
+      "require": "./dist/kupola-core-alert.cjs"
     },
     "./components/switch": {
       "import": "./dist/kupola-core-switch.esm.js",
-      "require": "./dist/kupola-core-switch.cjs.js"
+      "require": "./dist/kupola-core-switch.cjs"
     },
     "./components/progress": {
       "import": "./dist/kupola-core-progress.esm.js",
-      "require": "./dist/kupola-core-progress.cjs.js"
+      "require": "./dist/kupola-core-progress.cjs"
     },
     "./components/tag": {
       "import": "./dist/kupola-core-tag.esm.js",
-      "require": "./dist/kupola-core-tag.cjs.js"
+      "require": "./dist/kupola-core-tag.cjs"
     },
     "./components/badge": {
       "import": "./dist/kupola-core-badge.esm.js",
-      "require": "./dist/kupola-core-badge.cjs.js"
+      "require": "./dist/kupola-core-badge.cjs"
     },
     "./components/divider": {
       "import": "./dist/kupola-core-divider.esm.js",
-      "require": "./dist/kupola-core-divider.cjs.js"
+      "require": "./dist/kupola-core-divider.cjs"
     },
     "./components/skeleton": {
       "import": "./dist/kupola-core-skeleton.esm.js",
-      "require": "./dist/kupola-core-skeleton.cjs.js"
+      "require": "./dist/kupola-core-skeleton.cjs"
     },
     "./components/spin": {
       "import": "./dist/kupola-core-spin.esm.js",
-      "require": "./dist/kupola-core-spin.cjs.js"
+      "require": "./dist/kupola-core-spin.cjs"
     },
     "./components/empty": {
       "import": "./dist/kupola-core-empty.esm.js",
-      "require": "./dist/kupola-core-empty.cjs.js"
+      "require": "./dist/kupola-core-empty.cjs"
     },
     "./components/timeline": {
       "import": "./dist/kupola-core-timeline.esm.js",
-      "require": "./dist/kupola-core-timeline.cjs.js"
+      "require": "./dist/kupola-core-timeline.cjs"
     },
     "./components/kbd": {
       "import": "./dist/kupola-core-kbd.esm.js",
-      "require": "./dist/kupola-core-kbd.cjs.js"
+      "require": "./dist/kupola-core-kbd.cjs"
     },
     "./components/countdown": {
       "import": "./dist/kupola-core-countdown.esm.js",
-      "require": "./dist/kupola-core-countdown.cjs.js"
+      "require": "./dist/kupola-core-countdown.cjs"
     },
     "./components/breadcrumb": {
       "import": "./dist/kupola-core-breadcrumb.esm.js",
-      "require": "./dist/kupola-core-breadcrumb.cjs.js"
+      "require": "./dist/kupola-core-breadcrumb.cjs"
     },
     "./components/checkbox": {
       "import": "./dist/kupola-core-checkbox.esm.js",
-      "require": "./dist/kupola-core-checkbox.cjs.js"
+      "require": "./dist/kupola-core-checkbox.cjs"
     },
     "./components/radio": {
       "import": "./dist/kupola-core-radio.esm.js",
-      "require": "./dist/kupola-core-radio.cjs.js"
+      "require": "./dist/kupola-core-radio.cjs"
     },
     "./components/input": {
       "import": "./dist/kupola-core-input.esm.js",
-      "require": "./dist/kupola-core-input.cjs.js"
+      "require": "./dist/kupola-core-input.cjs"
     },
     "./components/avatar": {
       "import": "./dist/kupola-core-avatar.esm.js",
-      "require": "./dist/kupola-core-avatar.cjs.js"
+      "require": "./dist/kupola-core-avatar.cjs"
     },
     "./components/slider": {
       "import": "./dist/kupola-core-slider.esm.js",
-      "require": "./dist/kupola-core-slider.cjs.js"
+      "require": "./dist/kupola-core-slider.cjs"
     },
     "./components/numberinput": {
       "import": "./dist/kupola-core-numberinput.esm.js",
-      "require": "./dist/kupola-core-numberinput.cjs.js"
+      "require": "./dist/kupola-core-numberinput.cjs"
     },
     "./components/textarea": {
       "import": "./dist/kupola-core-textarea.esm.js",
-      "require": "./dist/kupola-core-textarea.cjs.js"
+      "require": "./dist/kupola-core-textarea.cjs"
     },
     "./components/statcard": {
       "import": "./dist/kupola-core-statcard.esm.js",
-      "require": "./dist/kupola-core-statcard.cjs.js"
+      "require": "./dist/kupola-core-statcard.cjs"
     },
     "./components/timepicker": {
       "import": "./dist/kupola-core-timepicker.esm.js",
-      "require": "./dist/kupola-core-timepicker.cjs.js"
+      "require": "./dist/kupola-core-timepicker.cjs"
     },
     "./components/carousel": {
       "import": "./dist/kupola-core-carousel.esm.js",
-      "require": "./dist/kupola-core-carousel.cjs.js"
+      "require": "./dist/kupola-core-carousel.cjs"
     },
     "./components/tree": {
       "import": "./dist/kupola-core-tree.esm.js",
-      "require": "./dist/kupola-core-tree.cjs.js"
+      "require": "./dist/kupola-core-tree.cjs"
     },
     "./components/menu": {
       "import": "./dist/kupola-core-menu.esm.js",
-      "require": "./dist/kupola-core-menu.cjs.js"
+      "require": "./dist/kupola-core-menu.cjs"
     },
     "./components/fileupload": {
       "import": "./dist/kupola-core-fileupload.esm.js",
-      "require": "./dist/kupola-core-fileupload.cjs.js"
+      "require": "./dist/kupola-core-fileupload.cjs"
     },
     "./components/dynamictags": {
       "import": "./dist/kupola-core-dynamictags.esm.js",
-      "require": "./dist/kupola-core-dynamictags.cjs.js"
+      "require": "./dist/kupola-core-dynamictags.cjs"
     },
     "./components/imagepreview": {
       "import": "./dist/kupola-core-imagepreview.esm.js",
-      "require": "./dist/kupola-core-imagepreview.cjs.js"
+      "require": "./dist/kupola-core-imagepreview.cjs"
     },
     "./components/colorpicker": {
       "import": "./dist/kupola-core-colorpicker.esm.js",
-      "require": "./dist/kupola-core-colorpicker.cjs.js"
+      "require": "./dist/kupola-core-colorpicker.cjs"
     },
     "./components/virtuallist": {
       "import": "./dist/kupola-core-virtuallist.esm.js",
-      "require": "./dist/kupola-core-virtuallist.cjs.js"
+      "require": "./dist/kupola-core-virtuallist.cjs"
     },
     "./components/icons": {
       "import": "./dist/kupola-core-icons.esm.js",
-      "require": "./dist/kupola-core-icons.cjs.js"
+      "require": "./dist/kupola-core-icons.cjs"
     },
     "./components/message": {
       "import": "./dist/kupola-core-message.esm.js",
-      "require": "./dist/kupola-core-message.cjs.js"
+      "require": "./dist/kupola-core-message.cjs"
     },
     "./components/heatmap": {
       "import": "./dist/kupola-core-heatmap.esm.js",
-      "require": "./dist/kupola-core-heatmap.cjs.js"
+      "require": "./dist/kupola-core-heatmap.cjs"
     },
     "./components/calendar": {
       "import": "./dist/kupola-core-calendar.esm.js",
-      "require": "./dist/kupola-core-calendar.cjs.js"
+      "require": "./dist/kupola-core-calendar.cjs"
     },
     "./components/validation": {
       "import": "./dist/kupola-core-validation.esm.js",
-      "require": "./dist/kupola-core-validation.cjs.js"
+      "require": "./dist/kupola-core-validation.cjs"
     },
     "./components/form": {
       "import": "./dist/kupola-core-form.esm.js",
-      "require": "./dist/kupola-core-form.cjs.js"
+      "require": "./dist/kupola-core-form.cjs"
     },
     "./components/table": {
       "import": "./dist/kupola-core-table.esm.js",
-      "require": "./dist/kupola-core-table.cjs.js"
+      "require": "./dist/kupola-core-table.cjs"
     }
   },
   "files": [

package/packages/core/src/devtools.js

@@ -0,0 +1,303 @@
+// SPDX-License-Identifier: MIT
+/**
+ * @kupola/core — DevTools: Signal reactivity profiler.
+ *
+ * Provides performance profiling for the Kupola reactivity system.
+ * Tracks signal reads, writes, effect runs, and computed recomputes.
+ *
+ * Usage:
+ * ```js
+ * import { enableProfiler, getProfileReport, resetProfiler } from '@kupola/kupola/devtools';
+ *
+ * enableProfiler();
+ * // ... run your app ...
+ * const report = getProfileReport();
+ * console.table(report.signals);
+ * console.table(report.effects);
+ * resetProfiler();
+ * ```
+ *
+ * @module devtools
+ */
+
+// ── Profiler state ──────────────────────────────────────────────────────────
+
+let _enabled = false;
+let _startTime = 0;
+
+/** @type {Map<number, {reads: number, writes: number, triggers: number, label: string}>} */
+const _signalStats = new Map();
+
+/** @type {Map<number, {runs: number, totalTime: number, maxTime: number, label: string}>} */
+const _effectStats = new Map();
+
+/** @type {Map<number, {recomputes: number, totalTime: number, maxTime: number, label: string}>} */
+const _computedStats = new Map();
+
+let _nextSignalId = 0;
+let _nextEffectId = 0;
+let _nextComputedId = 0;
+
+/** @type {number} Total trigger count across all signals. */
+let _totalTriggers = 0;
+
+/** @type {number} Total effect runs. */
+let _totalEffectRuns = 0;
+
+/** @type {number} Total computed recomputes. */
+let _totalComputedRecomputes = 0;
+
+// ── Signal ID registry ──────────────────────────────────────────────────────
+
+/** @type {WeakMap<Object, number>} Maps signal/computed/effect instances to IDs. */
+const _idMap = new WeakMap();
+
+function getOrCreateId(obj, counter) {
+  if (!_idMap.has(obj)) {
+    _idMap.set(obj, counter);
+    return counter;
+  }
+  return _idMap.get(obj);
+}
+
+// ── Public API ──────────────────────────────────────────────────────────────
+
+/**
+ * Enable the reactivity profiler. Call this before running your application
+ * to start collecting performance data.
+ *
+ * @param {Object} [options]
+ * @param {boolean} [options.console=false]  Log events to console in real-time
+ */
+export function enableProfiler(options = {}) {
+  _enabled = true;
+  _startTime = performance.now();
+  _signalStats.clear();
+  _effectStats.clear();
+  _computedStats.clear();
+  _nextSignalId = 0;
+  _nextEffectId = 0;
+  _nextComputedId = 0;
+  _totalTriggers = 0;
+  _totalEffectRuns = 0;
+  _totalComputedRecomputes = 0;
+  if (options.console) {
+    console.log('[Kupola Profiler] Enabled');
+  }
+}
+
+/**
+ * Disable the profiler and stop collecting data.
+ */
+export function disableProfiler() {
+  _enabled = false;
+}
+
+/**
+ * Reset all profiler data. Call between profiling sessions.
+ */
+export function resetProfiler() {
+  _enabled = false;
+  _startTime = 0;
+  _signalStats.clear();
+  _effectStats.clear();
+  _computedStats.clear();
+  _totalTriggers = 0;
+  _totalEffectRuns = 0;
+  _totalComputedRecomputes = 0;
+}
+
+/**
+ * Check if profiler is enabled.
+ * @returns {boolean}
+ */
+export function isProfilerEnabled() {
+  return _enabled;
+}
+
+// ── Tracking functions (called by signal/effect/computed internals) ──────────
+
+/**
+ * Record a signal write (set .value).
+ * @param {Object} sig  The Signal instance
+ * @param {string} [label]  Optional label for the signal
+ */
+export function profileSignalWrite(sig, label) {
+  if (!_enabled) {return;}
+  const id = getOrCreateId(sig, _nextSignalId);
+  if (!_signalStats.has(id)) {
+    _signalStats.set(id, { reads: 0, writes: 0, triggers: 0, label: label || `signal#${id}` });
+    if (id >= _nextSignalId) {_nextSignalId = id + 1;}
+  }
+  const stats = _signalStats.get(id);
+  stats.writes++;
+}
+
+/**
+ * Record a signal read (get .value inside effect).
+ * @param {Object} sig  The Signal instance
+ * @param {string} [label]  Optional label
+ */
+export function profileSignalRead(sig, label) {
+  if (!_enabled) {return;}
+  const id = getOrCreateId(sig, _nextSignalId);
+  if (!_signalStats.has(id)) {
+    _signalStats.set(id, { reads: 0, writes: 0, triggers: 0, label: label || `signal#${id}` });
+    if (id >= _nextSignalId) {_nextSignalId = id + 1;}
+  }
+  _signalStats.get(id).reads++;
+}
+
+/**
+ * Record a trigger (signal notifying subscribers).
+ * @param {Object} sig  The Signal instance
+ * @param {number} subscriberCount  Number of subscribers notified
+ */
+export function profileTrigger(sig, subscriberCount) {
+  if (!_enabled) {return;}
+  const id = getOrCreateId(sig, _nextSignalId);
+  if (_signalStats.has(id)) {
+    _signalStats.get(id).triggers += subscriberCount;
+  }
+  _totalTriggers += subscriberCount;
+}
+
+/**
+ * Record an effect execution with timing.
+ * @param {Object} eff  The EffectRecord
+ * @param {Function} fn  The effect function to run
+ * @param {string} [label]  Optional label
+ * @returns {*} The return value of fn
+ */
+export function profileEffectRun(eff, fn, label) {
+  if (!_enabled) {
+    return fn();
+  }
+  const id = getOrCreateId(eff, _nextEffectId);
+  if (!_effectStats.has(id)) {
+    _effectStats.set(id, { runs: 0, totalTime: 0, maxTime: 0, label: label || `effect#${id}` });
+    if (id >= _nextEffectId) {_nextEffectId = id + 1;}
+  }
+  const stats = _effectStats.get(id);
+  const t0 = performance.now();
+  const result = fn();
+  const elapsed = performance.now() - t0;
+  stats.runs++;
+  stats.totalTime += elapsed;
+  if (elapsed > stats.maxTime) {stats.maxTime = elapsed;}
+  _totalEffectRuns++;
+  return result;
+}
+
+/**
+ * Record a computed recomputation with timing.
+ * @param {Object} comp  The computed instance
+ * @param {Function} fn  The compute function
+ * @param {string} [label]  Optional label
+ * @returns {*} The computed result
+ */
+export function profileComputedRun(comp, fn, label) {
+  if (!_enabled) {
+    return fn();
+  }
+  const id = getOrCreateId(comp, _nextComputedId);
+  if (!_computedStats.has(id)) {
+    _computedStats.set(id, { recomputes: 0, totalTime: 0, maxTime: 0, label: label || `computed#${id}` });
+    if (id >= _nextComputedId) {_nextComputedId = id + 1;}
+  }
+  const stats = _computedStats.get(id);
+  const t0 = performance.now();
+  const result = fn();
+  const elapsed = performance.now() - t0;
+  stats.recomputes++;
+  stats.totalTime += elapsed;
+  if (elapsed > stats.maxTime) {stats.maxTime = elapsed;}
+  _totalComputedRecomputes++;
+  return result;
+}
+
+// ── Report generation ───────────────────────────────────────────────────────
+
+/**
+ * Generate a profiling report.
+ *
+ * @returns {{
+ *   duration: number,
+ *   totalTriggers: number,
+ *   totalEffectRuns: number,
+ *   totalComputedRecomputes: number,
+ *   signals: Array<{label: string, reads: number, writes: number, triggers: number}>,
+ *   effects: Array<{label: string, runs: number, totalTime: string, maxTime: string, avgTime: string}>,
+ *   computeds: Array<{label: string, recomputes: number, totalTime: string, maxTime: string, avgTime: string}>,
+ * }}
+ */
+export function getProfileReport() {
+  const duration = _startTime > 0 ? performance.now() - _startTime : 0;
+
+  const signals = [];
+  for (const [, s] of _signalStats) {
+    signals.push({ label: s.label, reads: s.reads, writes: s.writes, triggers: s.triggers });
+  }
+
+  const effects = [];
+  for (const [, s] of _effectStats) {
+    const avg = s.runs > 0 ? s.totalTime / s.runs : 0;
+    effects.push({
+      label: s.label,
+      runs: s.runs,
+      totalTime: s.totalTime.toFixed(2) + 'ms',
+      maxTime: s.maxTime.toFixed(3) + 'ms',
+      avgTime: avg.toFixed(3) + 'ms',
+    });
+  }
+
+  const computeds = [];
+  for (const [, s] of _computedStats) {
+    const avg = s.recomputes > 0 ? s.totalTime / s.recomputes : 0;
+    computeds.push({
+      label: s.label,
+      recomputes: s.recomputes,
+      totalTime: s.totalTime.toFixed(2) + 'ms',
+      maxTime: s.maxTime.toFixed(3) + 'ms',
+      avgTime: avg.toFixed(3) + 'ms',
+    });
+  }
+
+  return {
+    duration: Math.round(duration),
+    totalTriggers: _totalTriggers,
+    totalEffectRuns: _totalEffectRuns,
+    totalComputedRecomputes: _totalComputedRecomputes,
+    signals,
+    effects,
+    computeds,
+  };
+}
+
+/**
+ * Print a human-readable profiling summary to the console.
+ */
+export function printProfileReport() {
+  const report = getProfileReport();
+  console.log('═══════════════════════════════════════════════════════');
+  console.log('  Kupola Reactivity Profile Report');
+  console.log('═══════════════════════════════════════════════════════');
+  console.log(`  Duration:            ${report.duration}ms`);
+  console.log(`  Total triggers:      ${report.totalTriggers}`);
+  console.log(`  Total effect runs:   ${report.totalEffectRuns}`);
+  console.log(`  Total recomputes:    ${report.totalComputedRecomputes}`);
+  console.log('───────────────────────────────────────────────────────');
+  if (report.signals.length > 0) {
+    console.log('  Signals:');
+    console.table(report.signals);
+  }
+  if (report.effects.length > 0) {
+    console.log('  Effects:');
+    console.table(report.effects);
+  }
+  if (report.computeds.length > 0) {
+    console.log('  Computeds:');
+    console.table(report.computeds);
+  }
+  console.log('═══════════════════════════════════════════════════════');
+}

package/packages/core/src/effect.js

@@ -9,6 +9,7 @@
  */
 
 import { pushEffect, popEffect } from './signal.js';
+import { isProfilerEnabled, profileEffectRun } from './devtools.js';
 
 /**
  * @typedef {Object} EffectRecord
@@ -70,7 +71,11 @@ function runEffect(eff) {
 
   pushEffect(eff);
   try {
-    eff._fn();
+    if (isProfilerEnabled()) {
+      profileEffectRun(eff, eff._fn);
+    } else {
+      eff._fn();
+    }
   } finally {
     popEffect();
   }

package/packages/core/src/index.js

@@ -43,3 +43,9 @@ export { setLocale, getLocale, t, addMessages } from './i18n.js';
 
 // ── Error Boundary ───────────────────────────────────────────────────────────
 export { ErrorBoundary } from './errors.js';
+
+// ── DevTools (profiler) ──────────────────────────────────────────────────────
+export { enableProfiler, disableProfiler, resetProfiler, getProfileReport, printProfileReport } from './devtools.js';
+
+// ── Lazy Load ────────────────────────────────────────────────────────────────
+export { lazyComponent, preloadComponent } from './lazy.js';