@jqhtml/core 2.3.4 → 2.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/component.d.ts +20 -0
- package/dist/component.d.ts.map +1 -1
- package/dist/debug-entry.d.ts +3 -31
- package/dist/debug-entry.d.ts.map +1 -1
- package/dist/index.cjs +91 -422
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +92 -420
- package/dist/index.js.map +1 -1
- package/dist/jqhtml-core.esm.js +93 -421
- package/dist/jqhtml-core.esm.js.map +1 -1
- package/dist/jqhtml-debug.esm.js +1 -383
- package/dist/jqhtml-debug.esm.js.map +1 -1
- package/package.json +1 -1
- package/dist/debug-overlay.d.ts +0 -61
- package/dist/debug-overlay.d.ts.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -883,7 +883,7 @@ function devWarn(message) {
|
|
|
883
883
|
console.warn(`[JQHTML Dev Warning] ${message}`);
|
|
884
884
|
}
|
|
885
885
|
// Get global jqhtml object
|
|
886
|
-
function getJqhtml
|
|
886
|
+
function getJqhtml() {
|
|
887
887
|
if (typeof window !== 'undefined' && window.jqhtml) {
|
|
888
888
|
return window.jqhtml;
|
|
889
889
|
}
|
|
@@ -896,7 +896,7 @@ function getJqhtml$1() {
|
|
|
896
896
|
}
|
|
897
897
|
// Visual flash effect
|
|
898
898
|
function flashComponent(component, eventType) {
|
|
899
|
-
const jqhtml = getJqhtml
|
|
899
|
+
const jqhtml = getJqhtml();
|
|
900
900
|
if (!jqhtml?.debug?.flashComponents)
|
|
901
901
|
return;
|
|
902
902
|
const duration = jqhtml.debug.flashDuration || 500;
|
|
@@ -918,7 +918,7 @@ function flashComponent(component, eventType) {
|
|
|
918
918
|
}
|
|
919
919
|
// Log lifecycle event
|
|
920
920
|
function logLifecycle(component, phase, status) {
|
|
921
|
-
const jqhtml = getJqhtml
|
|
921
|
+
const jqhtml = getJqhtml();
|
|
922
922
|
if (!jqhtml?.debug)
|
|
923
923
|
return;
|
|
924
924
|
const shouldLog = jqhtml.debug.logFullLifecycle ||
|
|
@@ -964,7 +964,7 @@ function logLifecycle(component, phase, status) {
|
|
|
964
964
|
}
|
|
965
965
|
// Apply delays based on lifecycle phase
|
|
966
966
|
function applyDebugDelay(phase) {
|
|
967
|
-
const jqhtml = getJqhtml
|
|
967
|
+
const jqhtml = getJqhtml();
|
|
968
968
|
if (!jqhtml?.debug)
|
|
969
969
|
return;
|
|
970
970
|
let delayMs = 0;
|
|
@@ -985,14 +985,14 @@ function applyDebugDelay(phase) {
|
|
|
985
985
|
}
|
|
986
986
|
// Log instruction processing
|
|
987
987
|
function logInstruction(type, data) {
|
|
988
|
-
const jqhtml = getJqhtml
|
|
988
|
+
const jqhtml = getJqhtml();
|
|
989
989
|
if (!jqhtml?.debug?.logInstructionProcessing)
|
|
990
990
|
return;
|
|
991
991
|
console.log(`[JQHTML Instruction] ${type}:`, data);
|
|
992
992
|
}
|
|
993
993
|
// Log data changes
|
|
994
994
|
function logDataChange(component, property, oldValue, newValue) {
|
|
995
|
-
const jqhtml = getJqhtml
|
|
995
|
+
const jqhtml = getJqhtml();
|
|
996
996
|
if (!jqhtml?.debug?.traceDataFlow)
|
|
997
997
|
return;
|
|
998
998
|
console.log(`[JQHTML Data] ${component.constructor.name}#${component._cid}.data.${property}:`, { old: oldValue, new: newValue });
|
|
@@ -1005,7 +1005,7 @@ function updateComponentTree() {
|
|
|
1005
1005
|
}
|
|
1006
1006
|
// Router dispatch logging
|
|
1007
1007
|
function logDispatch(url, route, params, verbose = false) {
|
|
1008
|
-
const jqhtml = getJqhtml
|
|
1008
|
+
const jqhtml = getJqhtml();
|
|
1009
1009
|
if (!jqhtml?.debug)
|
|
1010
1010
|
return;
|
|
1011
1011
|
const shouldLog = jqhtml.debug.logDispatch || jqhtml.debug.logDispatchVerbose;
|
|
@@ -1027,12 +1027,12 @@ function logDispatch(url, route, params, verbose = false) {
|
|
|
1027
1027
|
}
|
|
1028
1028
|
// Check if sequential processing is enabled
|
|
1029
1029
|
function isSequentialProcessing() {
|
|
1030
|
-
const jqhtml = getJqhtml
|
|
1030
|
+
const jqhtml = getJqhtml();
|
|
1031
1031
|
return jqhtml?.debug?.sequentialProcessing || false;
|
|
1032
1032
|
}
|
|
1033
1033
|
// Error handling with break on error
|
|
1034
1034
|
function handleComponentError(component, phase, error) {
|
|
1035
|
-
const jqhtml = getJqhtml
|
|
1035
|
+
const jqhtml = getJqhtml();
|
|
1036
1036
|
console.error(`[JQHTML Error] ${component.constructor.name}#${component._cid} failed in ${phase}:`, error);
|
|
1037
1037
|
if (jqhtml?.debug?.breakOnError) {
|
|
1038
1038
|
debugger; // This will pause execution in dev tools
|
|
@@ -1060,6 +1060,9 @@ function handleComponentError(component, phase, error) {
|
|
|
1060
1060
|
* - Scoped IDs using _cid pattern
|
|
1061
1061
|
* - Event emission and CSS class hierarchy
|
|
1062
1062
|
*/
|
|
1063
|
+
// WeakMap storage for protected lifecycle method implementations (Option 2)
|
|
1064
|
+
// See docs/internal/lifecycle-method-protection.md for design details
|
|
1065
|
+
const lifecycle_impls = new WeakMap();
|
|
1063
1066
|
class Jqhtml_Component {
|
|
1064
1067
|
constructor(element, args = {}) {
|
|
1065
1068
|
this._ready_state = 0; // 0=created, 1=init, 2=loaded, 3=rendered, 4=ready
|
|
@@ -1080,6 +1083,7 @@ class Jqhtml_Component {
|
|
|
1080
1083
|
this.__initial_data_snapshot = null; // Snapshot of this.data after on_create() for restoration before on_load()
|
|
1081
1084
|
this.__data_frozen = false; // Track if this.data is currently frozen
|
|
1082
1085
|
this.next_reload_force_refresh = null; // State machine for reload()/refresh() debounce precedence
|
|
1086
|
+
this.__lifecycle_authorized = false; // Flag for lifecycle method protection
|
|
1083
1087
|
this._cid = this._generate_cid();
|
|
1084
1088
|
this._lifecycle_manager = LifecycleManager.get_instance();
|
|
1085
1089
|
// Create or wrap element
|
|
@@ -1193,6 +1197,63 @@ class Jqhtml_Component {
|
|
|
1193
1197
|
this.state = {};
|
|
1194
1198
|
this._log_lifecycle('construct', 'complete');
|
|
1195
1199
|
}
|
|
1200
|
+
/**
|
|
1201
|
+
* Protect lifecycle methods from manual invocation
|
|
1202
|
+
* Stores original implementations in WeakMap, replaces with guarded wrappers
|
|
1203
|
+
* @private
|
|
1204
|
+
*/
|
|
1205
|
+
_protect_lifecycle_methods() {
|
|
1206
|
+
const methods = {
|
|
1207
|
+
on_create: 'Called automatically during creation.',
|
|
1208
|
+
on_render: 'Use render() to trigger a re-render.',
|
|
1209
|
+
on_load: 'Use reload() to refresh data.',
|
|
1210
|
+
on_ready: 'Called automatically when ready.',
|
|
1211
|
+
on_stop: 'Use stop() to stop the component.'
|
|
1212
|
+
};
|
|
1213
|
+
const impls = {};
|
|
1214
|
+
const self = this;
|
|
1215
|
+
for (const [name, help] of Object.entries(methods)) {
|
|
1216
|
+
const original = this[name];
|
|
1217
|
+
// Skip if using base class default (empty method)
|
|
1218
|
+
if (original === Jqhtml_Component.prototype[name])
|
|
1219
|
+
continue;
|
|
1220
|
+
impls[name] = original;
|
|
1221
|
+
// Create wrapper with same function name (for stack traces)
|
|
1222
|
+
this[name] = {
|
|
1223
|
+
[name](...args) {
|
|
1224
|
+
if (!self.__lifecycle_authorized) {
|
|
1225
|
+
throw new Error(`[JQHTML] ${name}() cannot be called manually. ${help}\n` +
|
|
1226
|
+
`Component: ${self.component_name()} (_cid: ${self._cid})`);
|
|
1227
|
+
}
|
|
1228
|
+
return lifecycle_impls.get(self)[name].apply(self, args);
|
|
1229
|
+
}
|
|
1230
|
+
}[name];
|
|
1231
|
+
}
|
|
1232
|
+
lifecycle_impls.set(this, impls);
|
|
1233
|
+
}
|
|
1234
|
+
/**
|
|
1235
|
+
* Call a lifecycle method with authorization (async)
|
|
1236
|
+
* Framework calls this to invoke lifecycle methods, bypassing the protection wrapper.
|
|
1237
|
+
* The flag is set momentarily for the wrapper check, then reset BEFORE user code runs.
|
|
1238
|
+
* This ensures any nested lifecycle calls from user code will fail the flag check.
|
|
1239
|
+
* @private
|
|
1240
|
+
*/
|
|
1241
|
+
async _call_lifecycle(name, context) {
|
|
1242
|
+
// Get the original implementation (bypasses wrapper entirely)
|
|
1243
|
+
const impl = lifecycle_impls.get(this)?.[name] || this[name];
|
|
1244
|
+
// Call original directly - no flag needed since we bypass the wrapper
|
|
1245
|
+
return await impl.call(context || this);
|
|
1246
|
+
}
|
|
1247
|
+
/**
|
|
1248
|
+
* Call a lifecycle method with authorization (sync version for sync methods like on_stop)
|
|
1249
|
+
* @private
|
|
1250
|
+
*/
|
|
1251
|
+
_call_lifecycle_sync(name) {
|
|
1252
|
+
// Get the original implementation (bypasses wrapper entirely)
|
|
1253
|
+
const impl = lifecycle_impls.get(this)?.[name] || this[name];
|
|
1254
|
+
// Call original directly - no flag needed since we bypass the wrapper
|
|
1255
|
+
return impl.call(this);
|
|
1256
|
+
}
|
|
1196
1257
|
/**
|
|
1197
1258
|
* Boot - Start the full component lifecycle
|
|
1198
1259
|
* Called immediately after construction by instruction processor
|
|
@@ -1206,6 +1267,8 @@ class Jqhtml_Component {
|
|
|
1206
1267
|
if (this._booted)
|
|
1207
1268
|
return;
|
|
1208
1269
|
this._booted = true;
|
|
1270
|
+
// Protect lifecycle methods from manual invocation (must happen after subclass constructor)
|
|
1271
|
+
this._protect_lifecycle_methods();
|
|
1209
1272
|
await this._lifecycle_manager.boot_component(this);
|
|
1210
1273
|
}
|
|
1211
1274
|
// -------------------------------------------------------------------------
|
|
@@ -1416,9 +1479,9 @@ class Jqhtml_Component {
|
|
|
1416
1479
|
// Don't update ready state here - let phases complete in order
|
|
1417
1480
|
this._update_debug_attrs();
|
|
1418
1481
|
this._log_lifecycle('render', 'complete');
|
|
1419
|
-
// Call on_render() immediately after render completes
|
|
1482
|
+
// Call on_render() with authorization (sync) immediately after render completes
|
|
1420
1483
|
// This ensures event handlers are always re-attached after DOM updates
|
|
1421
|
-
const renderResult = this.on_render
|
|
1484
|
+
const renderResult = this._call_lifecycle_sync('on_render');
|
|
1422
1485
|
if (renderResult && typeof renderResult.then === 'function') {
|
|
1423
1486
|
console.warn(`[JQHTML] Component "${this.component_name()}" returned a Promise from on_render(). ` +
|
|
1424
1487
|
`on_render() must be synchronous code. Remove 'async' from the function declaration.`);
|
|
@@ -1483,8 +1546,8 @@ class Jqhtml_Component {
|
|
|
1483
1546
|
if (this._render_count !== render_id) {
|
|
1484
1547
|
return; // Stale render, don't call on_ready
|
|
1485
1548
|
}
|
|
1486
|
-
// Call on_ready hook
|
|
1487
|
-
await this.on_ready
|
|
1549
|
+
// Call on_ready hook with authorization
|
|
1550
|
+
await this._call_lifecycle('on_ready');
|
|
1488
1551
|
// Trigger ready event
|
|
1489
1552
|
await this.trigger('ready');
|
|
1490
1553
|
})();
|
|
@@ -1504,8 +1567,8 @@ class Jqhtml_Component {
|
|
|
1504
1567
|
if (this._stopped || this._ready_state >= 1)
|
|
1505
1568
|
return;
|
|
1506
1569
|
this._log_lifecycle('create', 'start');
|
|
1507
|
-
// Call on_create() and validate it's synchronous
|
|
1508
|
-
const result = this.on_create
|
|
1570
|
+
// Call on_create() with authorization and validate it's synchronous
|
|
1571
|
+
const result = await this._call_lifecycle('on_create');
|
|
1509
1572
|
if (result && typeof result.then === 'function') {
|
|
1510
1573
|
console.warn(`[JQHTML] Component "${this.component_name()}" returned a Promise from on_create(). ` +
|
|
1511
1574
|
`on_create() must be synchronous code. Remove 'async' from the function declaration.`);
|
|
@@ -1620,8 +1683,8 @@ class Jqhtml_Component {
|
|
|
1620
1683
|
if (window.jqhtml?.debug?.verbose) {
|
|
1621
1684
|
console.log(`[Cache] Component ${this._cid} (${this.component_name()}) has non-serializable args - load deduplication and caching disabled`, { uncacheable_property });
|
|
1622
1685
|
}
|
|
1623
|
-
// Execute on_load() without deduplication or caching
|
|
1624
|
-
await this.on_load
|
|
1686
|
+
// Execute on_load() with authorization, without deduplication or caching
|
|
1687
|
+
await this._call_lifecycle('on_load');
|
|
1625
1688
|
this.__data_frozen = true;
|
|
1626
1689
|
return;
|
|
1627
1690
|
}
|
|
@@ -1730,7 +1793,7 @@ class Jqhtml_Component {
|
|
|
1730
1793
|
// - Should errors reset state machine flags (next_reload_force_refresh)?
|
|
1731
1794
|
// - Should partial data be preserved or rolled back?
|
|
1732
1795
|
// - Should followers be notified differently based on error type?
|
|
1733
|
-
await this.on_load
|
|
1796
|
+
await this._call_lifecycle('on_load', restricted_this);
|
|
1734
1797
|
}
|
|
1735
1798
|
catch (error) {
|
|
1736
1799
|
// Handle error and notify coordinator
|
|
@@ -1802,7 +1865,7 @@ class Jqhtml_Component {
|
|
|
1802
1865
|
this._log_lifecycle('ready', 'start');
|
|
1803
1866
|
// Wait for all children to reach ready state (bottom-up execution)
|
|
1804
1867
|
await this._wait_for_children_ready();
|
|
1805
|
-
await this.on_ready
|
|
1868
|
+
await this._call_lifecycle('on_ready');
|
|
1806
1869
|
this._ready_state = 4;
|
|
1807
1870
|
this._update_debug_attrs();
|
|
1808
1871
|
this._log_lifecycle('ready', 'complete');
|
|
@@ -2018,7 +2081,7 @@ class Jqhtml_Component {
|
|
|
2018
2081
|
this.data = JSON.parse(JSON.stringify(this.__initial_data_snapshot));
|
|
2019
2082
|
}
|
|
2020
2083
|
try {
|
|
2021
|
-
await this.on_load
|
|
2084
|
+
await this._call_lifecycle('on_load');
|
|
2022
2085
|
}
|
|
2023
2086
|
finally {
|
|
2024
2087
|
// Freeze this.data after on_load() completes
|
|
@@ -2094,7 +2157,7 @@ class Jqhtml_Component {
|
|
|
2094
2157
|
// STEP 3.5 & 4: Wait for children and call on_ready (only if we rendered)
|
|
2095
2158
|
if (rendered_from_cache || should_render) {
|
|
2096
2159
|
await this._wait_for_children_ready();
|
|
2097
|
-
await this.on_ready
|
|
2160
|
+
await this._call_lifecycle('on_ready');
|
|
2098
2161
|
}
|
|
2099
2162
|
this._log_lifecycle('reload', 'complete');
|
|
2100
2163
|
}
|
|
@@ -2128,16 +2191,14 @@ class Jqhtml_Component {
|
|
|
2128
2191
|
this.$.addClass('_Component_Stopped');
|
|
2129
2192
|
// Unregister from lifecycle manager
|
|
2130
2193
|
this._lifecycle_manager.unregister_component(this);
|
|
2131
|
-
// Call user's on_stop() hook
|
|
2132
|
-
const stopResult = this.on_stop
|
|
2194
|
+
// Call user's on_stop() hook with authorization (sync)
|
|
2195
|
+
const stopResult = this._call_lifecycle_sync('on_stop');
|
|
2133
2196
|
if (stopResult && typeof stopResult.then === 'function') {
|
|
2134
2197
|
console.warn(`[JQHTML] Component "${this.component_name()}" returned a Promise from on_stop(). ` +
|
|
2135
2198
|
`on_stop() must be synchronous code. Remove 'async' from the function declaration.`);
|
|
2136
2199
|
}
|
|
2137
|
-
// Fire registered
|
|
2138
|
-
this.trigger('
|
|
2139
|
-
// Trigger jQuery destroy event
|
|
2140
|
-
this.$.trigger('destroy');
|
|
2200
|
+
// Fire registered stop callbacks
|
|
2201
|
+
this.trigger('stop');
|
|
2141
2202
|
// Remove from DOM parent's children
|
|
2142
2203
|
if (this._dom_parent) {
|
|
2143
2204
|
this._dom_parent._dom_children.delete(this);
|
|
@@ -3095,388 +3156,6 @@ function hydrateElement($element, jQ) {
|
|
|
3095
3156
|
}
|
|
3096
3157
|
}
|
|
3097
3158
|
|
|
3098
|
-
/**
|
|
3099
|
-
* JQHTML Debug Overlay
|
|
3100
|
-
*
|
|
3101
|
-
* Independent debug controls using pure jQuery DOM manipulation.
|
|
3102
|
-
* Does NOT use JQHTML components so it works even when components are broken.
|
|
3103
|
-
*/
|
|
3104
|
-
// Get global jQuery
|
|
3105
|
-
function getJQuery() {
|
|
3106
|
-
if (typeof window !== 'undefined' && window.$) {
|
|
3107
|
-
return window.$;
|
|
3108
|
-
}
|
|
3109
|
-
if (typeof window !== 'undefined' && window.jQuery) {
|
|
3110
|
-
return window.jQuery;
|
|
3111
|
-
}
|
|
3112
|
-
throw new Error('FATAL: jQuery is not defined. jQuery must be loaded before using JQHTML. ' +
|
|
3113
|
-
'Add <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> before loading JQHTML.');
|
|
3114
|
-
}
|
|
3115
|
-
// Get global jqhtml object
|
|
3116
|
-
function getJqhtml() {
|
|
3117
|
-
if (typeof window !== 'undefined' && window.jqhtml) {
|
|
3118
|
-
return window.jqhtml;
|
|
3119
|
-
}
|
|
3120
|
-
if (typeof globalThis !== 'undefined' && globalThis.jqhtml) {
|
|
3121
|
-
return globalThis.jqhtml;
|
|
3122
|
-
}
|
|
3123
|
-
throw new Error('FATAL: window.jqhtml is not defined. The JQHTML runtime must be loaded before using JQHTML components. ' +
|
|
3124
|
-
'Ensure @jqhtml/core is imported and initialized before attempting to use debug features.');
|
|
3125
|
-
}
|
|
3126
|
-
class DebugOverlay {
|
|
3127
|
-
constructor(options = {}) {
|
|
3128
|
-
this.$container = null;
|
|
3129
|
-
this.$statusIndicator = null;
|
|
3130
|
-
this.$ = getJQuery();
|
|
3131
|
-
if (!this.$) {
|
|
3132
|
-
throw new Error('jQuery is required for DebugOverlay');
|
|
3133
|
-
}
|
|
3134
|
-
this.options = {
|
|
3135
|
-
position: 'bottom',
|
|
3136
|
-
theme: 'dark',
|
|
3137
|
-
compact: false,
|
|
3138
|
-
showStatus: true,
|
|
3139
|
-
autoHide: false,
|
|
3140
|
-
...options
|
|
3141
|
-
};
|
|
3142
|
-
}
|
|
3143
|
-
/**
|
|
3144
|
-
* Static method to show debug overlay (singleton pattern)
|
|
3145
|
-
*/
|
|
3146
|
-
static show(options) {
|
|
3147
|
-
if (!DebugOverlay.instance) {
|
|
3148
|
-
DebugOverlay.instance = new DebugOverlay(options);
|
|
3149
|
-
}
|
|
3150
|
-
DebugOverlay.instance.display();
|
|
3151
|
-
return DebugOverlay.instance;
|
|
3152
|
-
}
|
|
3153
|
-
/**
|
|
3154
|
-
* Static method to hide debug overlay
|
|
3155
|
-
*/
|
|
3156
|
-
static hide() {
|
|
3157
|
-
if (DebugOverlay.instance) {
|
|
3158
|
-
DebugOverlay.instance.hide();
|
|
3159
|
-
}
|
|
3160
|
-
}
|
|
3161
|
-
/**
|
|
3162
|
-
* Static method to toggle debug overlay visibility
|
|
3163
|
-
*/
|
|
3164
|
-
static toggle() {
|
|
3165
|
-
if (DebugOverlay.instance && DebugOverlay.instance.$container) {
|
|
3166
|
-
if (DebugOverlay.instance.$container.is(':visible')) {
|
|
3167
|
-
DebugOverlay.hide();
|
|
3168
|
-
}
|
|
3169
|
-
else {
|
|
3170
|
-
DebugOverlay.instance.display();
|
|
3171
|
-
}
|
|
3172
|
-
}
|
|
3173
|
-
else {
|
|
3174
|
-
DebugOverlay.show();
|
|
3175
|
-
}
|
|
3176
|
-
}
|
|
3177
|
-
/**
|
|
3178
|
-
* Static method to destroy debug overlay
|
|
3179
|
-
*/
|
|
3180
|
-
static destroy() {
|
|
3181
|
-
if (DebugOverlay.instance) {
|
|
3182
|
-
DebugOverlay.instance.destroy();
|
|
3183
|
-
DebugOverlay.instance = null;
|
|
3184
|
-
}
|
|
3185
|
-
}
|
|
3186
|
-
/**
|
|
3187
|
-
* Display the debug overlay
|
|
3188
|
-
*/
|
|
3189
|
-
display() {
|
|
3190
|
-
if (this.$container) {
|
|
3191
|
-
this.$container.show();
|
|
3192
|
-
return;
|
|
3193
|
-
}
|
|
3194
|
-
this.createOverlay();
|
|
3195
|
-
if (this.options.showStatus) {
|
|
3196
|
-
this.createStatusIndicator();
|
|
3197
|
-
}
|
|
3198
|
-
}
|
|
3199
|
-
/**
|
|
3200
|
-
* Hide the debug overlay
|
|
3201
|
-
*/
|
|
3202
|
-
hide() {
|
|
3203
|
-
if (this.$container) {
|
|
3204
|
-
this.$container.hide();
|
|
3205
|
-
}
|
|
3206
|
-
if (this.$statusIndicator) {
|
|
3207
|
-
this.$statusIndicator.hide();
|
|
3208
|
-
}
|
|
3209
|
-
}
|
|
3210
|
-
/**
|
|
3211
|
-
* Remove the debug overlay completely
|
|
3212
|
-
*/
|
|
3213
|
-
destroy() {
|
|
3214
|
-
if (this.$container) {
|
|
3215
|
-
this.$container.remove();
|
|
3216
|
-
this.$container = null;
|
|
3217
|
-
}
|
|
3218
|
-
if (this.$statusIndicator) {
|
|
3219
|
-
this.$statusIndicator.remove();
|
|
3220
|
-
this.$statusIndicator = null;
|
|
3221
|
-
}
|
|
3222
|
-
}
|
|
3223
|
-
/**
|
|
3224
|
-
* Update the status indicator
|
|
3225
|
-
*/
|
|
3226
|
-
updateStatus(mode) {
|
|
3227
|
-
if (!this.$statusIndicator)
|
|
3228
|
-
return;
|
|
3229
|
-
this.$statusIndicator.text('Debug: ' + mode);
|
|
3230
|
-
this.$statusIndicator.attr('class', 'jqhtml-debug-status' + (mode !== 'Off' ? ' active' : ''));
|
|
3231
|
-
}
|
|
3232
|
-
createOverlay() {
|
|
3233
|
-
// Add styles first
|
|
3234
|
-
this.addStyles();
|
|
3235
|
-
// Create container using jQuery
|
|
3236
|
-
this.$container = this.$('<div>')
|
|
3237
|
-
.addClass(`jqhtml-debug-overlay ${this.options.theme} ${this.options.position}`);
|
|
3238
|
-
// Create content structure
|
|
3239
|
-
const $content = this.$('<div>').addClass('jqhtml-debug-content');
|
|
3240
|
-
const $controls = this.$('<div>').addClass('jqhtml-debug-controls');
|
|
3241
|
-
// Add title
|
|
3242
|
-
const $title = this.$('<span>')
|
|
3243
|
-
.addClass('jqhtml-debug-title')
|
|
3244
|
-
.html('<strong>🐛 JQHTML Debug:</strong>');
|
|
3245
|
-
$controls.append($title);
|
|
3246
|
-
// Create buttons
|
|
3247
|
-
const buttons = [
|
|
3248
|
-
{ text: 'Slow Motion + Flash', action: 'enableSlowMotionDebug', class: 'success' },
|
|
3249
|
-
{ text: 'Basic Debug', action: 'enableBasicDebug', class: '' },
|
|
3250
|
-
{ text: 'Full Debug', action: 'enableFullDebug', class: '' },
|
|
3251
|
-
{ text: 'Sequential', action: 'enableSequentialMode', class: '' },
|
|
3252
|
-
{ text: 'Clear Debug', action: 'clearAllDebug', class: 'danger' },
|
|
3253
|
-
{ text: 'Settings', action: 'showDebugInfo', class: '' }
|
|
3254
|
-
];
|
|
3255
|
-
buttons.forEach(btn => {
|
|
3256
|
-
const $button = this.$('<button>')
|
|
3257
|
-
.text(btn.text)
|
|
3258
|
-
.addClass('jqhtml-debug-btn' + (btn.class ? ` ${btn.class}` : ''))
|
|
3259
|
-
.on('click', () => this.executeAction(btn.action));
|
|
3260
|
-
$controls.append($button);
|
|
3261
|
-
});
|
|
3262
|
-
// Add minimize/close button
|
|
3263
|
-
const $toggleBtn = this.$('<button>')
|
|
3264
|
-
.text(this.options.compact ? '▼' : '▲')
|
|
3265
|
-
.addClass('jqhtml-debug-toggle')
|
|
3266
|
-
.on('click', () => this.toggle());
|
|
3267
|
-
$controls.append($toggleBtn);
|
|
3268
|
-
// Assemble and add to page
|
|
3269
|
-
$content.append($controls);
|
|
3270
|
-
this.$container.append($content);
|
|
3271
|
-
this.$('body').append(this.$container);
|
|
3272
|
-
}
|
|
3273
|
-
createStatusIndicator() {
|
|
3274
|
-
this.$statusIndicator = this.$('<div>')
|
|
3275
|
-
.addClass('jqhtml-debug-status')
|
|
3276
|
-
.text('Debug: Off')
|
|
3277
|
-
.css({
|
|
3278
|
-
position: 'fixed',
|
|
3279
|
-
top: '10px',
|
|
3280
|
-
right: '10px',
|
|
3281
|
-
background: '#2c3e50',
|
|
3282
|
-
color: 'white',
|
|
3283
|
-
padding: '5px 10px',
|
|
3284
|
-
borderRadius: '4px',
|
|
3285
|
-
fontSize: '0.75rem',
|
|
3286
|
-
zIndex: '10001',
|
|
3287
|
-
opacity: '0.8',
|
|
3288
|
-
fontFamily: 'monospace'
|
|
3289
|
-
});
|
|
3290
|
-
this.$('body').append(this.$statusIndicator);
|
|
3291
|
-
}
|
|
3292
|
-
addStyles() {
|
|
3293
|
-
// Check if styles already exist
|
|
3294
|
-
if (this.$('#jqhtml-debug-styles').length > 0)
|
|
3295
|
-
return;
|
|
3296
|
-
// Create and inject CSS using jQuery - concatenated strings for better minification
|
|
3297
|
-
const $style = this.$('<style>')
|
|
3298
|
-
.attr('id', 'jqhtml-debug-styles')
|
|
3299
|
-
.text('.jqhtml-debug-overlay {' +
|
|
3300
|
-
'position: fixed;' +
|
|
3301
|
-
'left: 0;' +
|
|
3302
|
-
'right: 0;' +
|
|
3303
|
-
'z-index: 10000;' +
|
|
3304
|
-
'font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;' +
|
|
3305
|
-
'font-size: 0.8rem;' +
|
|
3306
|
-
'box-shadow: 0 2px 10px rgba(0,0,0,0.2);' +
|
|
3307
|
-
'}' +
|
|
3308
|
-
'.jqhtml-debug-overlay.top {' +
|
|
3309
|
-
'top: 0;' +
|
|
3310
|
-
'}' +
|
|
3311
|
-
'.jqhtml-debug-overlay.bottom {' +
|
|
3312
|
-
'bottom: 0;' +
|
|
3313
|
-
'}' +
|
|
3314
|
-
'.jqhtml-debug-overlay.dark {' +
|
|
3315
|
-
'background: #34495e;' +
|
|
3316
|
-
'color: #ecf0f1;' +
|
|
3317
|
-
'}' +
|
|
3318
|
-
'.jqhtml-debug-overlay.light {' +
|
|
3319
|
-
'background: #f8f9fa;' +
|
|
3320
|
-
'color: #333;' +
|
|
3321
|
-
'border-bottom: 1px solid #dee2e6;' +
|
|
3322
|
-
'}' +
|
|
3323
|
-
'.jqhtml-debug-content {' +
|
|
3324
|
-
'padding: 0.5rem 1rem;' +
|
|
3325
|
-
'}' +
|
|
3326
|
-
'.jqhtml-debug-controls {' +
|
|
3327
|
-
'display: flex;' +
|
|
3328
|
-
'flex-wrap: wrap;' +
|
|
3329
|
-
'gap: 8px;' +
|
|
3330
|
-
'align-items: center;' +
|
|
3331
|
-
'}' +
|
|
3332
|
-
'.jqhtml-debug-title {' +
|
|
3333
|
-
'margin-right: 10px;' +
|
|
3334
|
-
'font-weight: bold;' +
|
|
3335
|
-
'}' +
|
|
3336
|
-
'.jqhtml-debug-btn {' +
|
|
3337
|
-
'padding: 4px 8px;' +
|
|
3338
|
-
'border: none;' +
|
|
3339
|
-
'border-radius: 3px;' +
|
|
3340
|
-
'background: #3498db;' +
|
|
3341
|
-
'color: white;' +
|
|
3342
|
-
'cursor: pointer;' +
|
|
3343
|
-
'font-size: 0.75rem;' +
|
|
3344
|
-
'transition: background 0.2s;' +
|
|
3345
|
-
'}' +
|
|
3346
|
-
'.jqhtml-debug-btn:hover {' +
|
|
3347
|
-
'background: #2980b9;' +
|
|
3348
|
-
'}' +
|
|
3349
|
-
'.jqhtml-debug-btn.success {' +
|
|
3350
|
-
'background: #27ae60;' +
|
|
3351
|
-
'}' +
|
|
3352
|
-
'.jqhtml-debug-btn.success:hover {' +
|
|
3353
|
-
'background: #229954;' +
|
|
3354
|
-
'}' +
|
|
3355
|
-
'.jqhtml-debug-btn.danger {' +
|
|
3356
|
-
'background: #e74c3c;' +
|
|
3357
|
-
'}' +
|
|
3358
|
-
'.jqhtml-debug-btn.danger:hover {' +
|
|
3359
|
-
'background: #c0392b;' +
|
|
3360
|
-
'}' +
|
|
3361
|
-
'.jqhtml-debug-toggle {' +
|
|
3362
|
-
'padding: 4px 8px;' +
|
|
3363
|
-
'border: none;' +
|
|
3364
|
-
'border-radius: 3px;' +
|
|
3365
|
-
'background: #7f8c8d;' +
|
|
3366
|
-
'color: white;' +
|
|
3367
|
-
'cursor: pointer;' +
|
|
3368
|
-
'font-size: 0.75rem;' +
|
|
3369
|
-
'margin-left: auto;' +
|
|
3370
|
-
'}' +
|
|
3371
|
-
'.jqhtml-debug-toggle:hover {' +
|
|
3372
|
-
'background: #6c7b7d;' +
|
|
3373
|
-
'}' +
|
|
3374
|
-
'.jqhtml-debug-status.active {' +
|
|
3375
|
-
'background: #27ae60 !important;' +
|
|
3376
|
-
'}' +
|
|
3377
|
-
'@media (max-width: 768px) {' +
|
|
3378
|
-
'.jqhtml-debug-controls {' +
|
|
3379
|
-
'flex-direction: column;' +
|
|
3380
|
-
'align-items: flex-start;' +
|
|
3381
|
-
'}' +
|
|
3382
|
-
'.jqhtml-debug-title {' +
|
|
3383
|
-
'margin-bottom: 5px;' +
|
|
3384
|
-
'}' +
|
|
3385
|
-
'}');
|
|
3386
|
-
this.$('head').append($style);
|
|
3387
|
-
}
|
|
3388
|
-
toggle() {
|
|
3389
|
-
// Toggle between compact and full view
|
|
3390
|
-
this.options.compact = !this.options.compact;
|
|
3391
|
-
const $toggleBtn = this.$container.find('.jqhtml-debug-toggle');
|
|
3392
|
-
$toggleBtn.text(this.options.compact ? '▼' : '▲');
|
|
3393
|
-
const $buttons = this.$container.find('.jqhtml-debug-btn');
|
|
3394
|
-
if (this.options.compact) {
|
|
3395
|
-
$buttons.hide();
|
|
3396
|
-
}
|
|
3397
|
-
else {
|
|
3398
|
-
$buttons.show();
|
|
3399
|
-
}
|
|
3400
|
-
}
|
|
3401
|
-
executeAction(action) {
|
|
3402
|
-
const jqhtml = getJqhtml();
|
|
3403
|
-
if (!jqhtml) {
|
|
3404
|
-
console.warn('JQHTML not available - make sure it\'s loaded and exposed globally');
|
|
3405
|
-
return;
|
|
3406
|
-
}
|
|
3407
|
-
switch (action) {
|
|
3408
|
-
case 'enableSlowMotionDebug':
|
|
3409
|
-
jqhtml.setDebugSettings({
|
|
3410
|
-
logFullLifecycle: true,
|
|
3411
|
-
sequentialProcessing: true,
|
|
3412
|
-
delayAfterComponent: 150,
|
|
3413
|
-
delayAfterRender: 200,
|
|
3414
|
-
delayAfterRerender: 250,
|
|
3415
|
-
flashComponents: true,
|
|
3416
|
-
flashDuration: 800,
|
|
3417
|
-
flashColors: {
|
|
3418
|
-
create: '#3498db',
|
|
3419
|
-
render: '#27ae60',
|
|
3420
|
-
ready: '#9b59b6'
|
|
3421
|
-
},
|
|
3422
|
-
profilePerformance: true,
|
|
3423
|
-
highlightSlowRenders: 30,
|
|
3424
|
-
logDispatch: true
|
|
3425
|
-
});
|
|
3426
|
-
this.updateStatus('Slow Motion');
|
|
3427
|
-
console.log('🐛 Slow Motion Debug Mode Enabled');
|
|
3428
|
-
break;
|
|
3429
|
-
case 'enableBasicDebug':
|
|
3430
|
-
jqhtml.enableDebugMode('basic');
|
|
3431
|
-
this.updateStatus('Basic');
|
|
3432
|
-
console.log('🐛 Basic Debug Mode Enabled');
|
|
3433
|
-
break;
|
|
3434
|
-
case 'enableFullDebug':
|
|
3435
|
-
jqhtml.enableDebugMode('full');
|
|
3436
|
-
this.updateStatus('Full');
|
|
3437
|
-
console.log('🐛 Full Debug Mode Enabled');
|
|
3438
|
-
break;
|
|
3439
|
-
case 'enableSequentialMode':
|
|
3440
|
-
jqhtml.setDebugSettings({
|
|
3441
|
-
logCreationReady: true,
|
|
3442
|
-
sequentialProcessing: true,
|
|
3443
|
-
flashComponents: true,
|
|
3444
|
-
profilePerformance: true
|
|
3445
|
-
});
|
|
3446
|
-
this.updateStatus('Sequential');
|
|
3447
|
-
console.log('🐛 Sequential Processing Mode Enabled');
|
|
3448
|
-
break;
|
|
3449
|
-
case 'clearAllDebug':
|
|
3450
|
-
jqhtml.clearDebugSettings();
|
|
3451
|
-
this.updateStatus('Off');
|
|
3452
|
-
console.log('🐛 All Debug Modes Disabled');
|
|
3453
|
-
break;
|
|
3454
|
-
case 'showDebugInfo':
|
|
3455
|
-
const settings = JSON.stringify(jqhtml.debug, null, 2);
|
|
3456
|
-
console.log('🐛 Current Debug Settings:', settings);
|
|
3457
|
-
alert('Debug settings logged to console:\n\n' + (Object.keys(jqhtml.debug).length > 0 ? settings : 'No debug settings active'));
|
|
3458
|
-
break;
|
|
3459
|
-
}
|
|
3460
|
-
}
|
|
3461
|
-
}
|
|
3462
|
-
DebugOverlay.instance = null;
|
|
3463
|
-
// Simplified global convenience functions that use static methods
|
|
3464
|
-
function showDebugOverlay(options) {
|
|
3465
|
-
return DebugOverlay.show(options);
|
|
3466
|
-
}
|
|
3467
|
-
function hideDebugOverlay() {
|
|
3468
|
-
DebugOverlay.hide();
|
|
3469
|
-
}
|
|
3470
|
-
// Auto-initialize if debug query parameter is present
|
|
3471
|
-
if (typeof window !== 'undefined') {
|
|
3472
|
-
const urlParams = new URLSearchParams(window.location.search);
|
|
3473
|
-
if (urlParams.get('debug') === 'true' || urlParams.get('jqhtml-debug') === 'true') {
|
|
3474
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
3475
|
-
DebugOverlay.show();
|
|
3476
|
-
});
|
|
3477
|
-
}
|
|
3478
|
-
}
|
|
3479
|
-
|
|
3480
3159
|
/**
|
|
3481
3160
|
* JQHTML v2 jQuery Plugin
|
|
3482
3161
|
*
|
|
@@ -4375,7 +4054,7 @@ function init(jQuery) {
|
|
|
4375
4054
|
}
|
|
4376
4055
|
}
|
|
4377
4056
|
// Version - will be replaced during build with actual version from package.json
|
|
4378
|
-
const version = '2.3.
|
|
4057
|
+
const version = '2.3.6';
|
|
4379
4058
|
// Default export with all functionality
|
|
4380
4059
|
const jqhtml = {
|
|
4381
4060
|
// Core
|
|
@@ -4399,6 +4078,8 @@ const jqhtml = {
|
|
|
4399
4078
|
escape_html,
|
|
4400
4079
|
// Version property - internal
|
|
4401
4080
|
__version: version,
|
|
4081
|
+
// state facts
|
|
4082
|
+
tombstone: 'pepperoni and cheese',
|
|
4402
4083
|
// Debug settings
|
|
4403
4084
|
debug: {
|
|
4404
4085
|
enabled: false,
|
|
@@ -4425,15 +4106,6 @@ const jqhtml = {
|
|
|
4425
4106
|
clearDebugSettings() {
|
|
4426
4107
|
this.debug = {};
|
|
4427
4108
|
},
|
|
4428
|
-
// Debug overlay methods
|
|
4429
|
-
showDebugOverlay(options) {
|
|
4430
|
-
return DebugOverlay.show(options);
|
|
4431
|
-
},
|
|
4432
|
-
hideDebugOverlay() {
|
|
4433
|
-
return DebugOverlay.hide();
|
|
4434
|
-
},
|
|
4435
|
-
// Export DebugOverlay class for direct access
|
|
4436
|
-
DebugOverlay,
|
|
4437
4109
|
// Install globals function
|
|
4438
4110
|
installGlobals() {
|
|
4439
4111
|
if (typeof window !== 'undefined') {
|
|
@@ -4487,7 +4159,6 @@ if (typeof window !== 'undefined' && !window.jqhtml) {
|
|
|
4487
4159
|
}
|
|
4488
4160
|
}
|
|
4489
4161
|
|
|
4490
|
-
exports.DebugOverlay = DebugOverlay;
|
|
4491
4162
|
exports.Jqhtml_Component = Jqhtml_Component;
|
|
4492
4163
|
exports.Jqhtml_LifecycleManager = LifecycleManager;
|
|
4493
4164
|
exports.Jqhtml_Local_Storage = Jqhtml_Local_Storage;
|
|
@@ -4507,7 +4178,6 @@ exports.get_template = get_template;
|
|
|
4507
4178
|
exports.get_template_by_class = get_template_by_class;
|
|
4508
4179
|
exports.handleComponentError = handleComponentError;
|
|
4509
4180
|
exports.has_component = has_component;
|
|
4510
|
-
exports.hideDebugOverlay = hideDebugOverlay;
|
|
4511
4181
|
exports.init = init;
|
|
4512
4182
|
exports.init_jquery_plugin = init_jquery_plugin;
|
|
4513
4183
|
exports.isSequentialProcessing = isSequentialProcessing;
|
|
@@ -4520,6 +4190,5 @@ exports.process_instructions = process_instructions;
|
|
|
4520
4190
|
exports.register_component = register_component;
|
|
4521
4191
|
exports.register_template = register_template;
|
|
4522
4192
|
exports.render_template = render_template;
|
|
4523
|
-
exports.showDebugOverlay = showDebugOverlay;
|
|
4524
4193
|
exports.version = version;
|
|
4525
4194
|
//# sourceMappingURL=index.cjs.map
|