Removes memory heap bloat by improving DOM and JQUI datacache clearing when swapping WI in the editor, and all other 'reloadEditor' calls via slashcommands etc. Results in a slight delay depending on entries visible via pagination (about 2s for 50 visible entries), but I added a pleasant fade transition to make it feel organic.

b55de85243bdae4e1202f3642b077712ba957f33

RossAscends <124905043+RossAscends@users.noreply.github.com>

Parents: 96fb85457f211eb2b1c2d564840c9da57c975d95

public/scripts/world-info.js+108 -14 Viewed

 import { Fuse } from '../lib.js';
 import { saveSettings, substituteParams, getRequestHeaders, chat_metadata, this_chid, characters, saveCharacterDebounced, menu_type, eventSource, event_types, getExtensionPromptByName, saveMetadata, getCurrentChatId, extension_prompt_roles } from '../script.js';
 import { download, debounce, delay, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, getCharaFilename, getSortableDelay, escapeRegex, PAGINATION_TEMPLATE, navigation_option, waitUntilCondition, isTrueBoolean, setValueByPath, flashHighlight, select2ModifyOptions, getSelect2OptionId, dynamicSelect2DataViaAjax, highlightRegex, select2ChoiceClickSubscribe, isFalseBoolean, getSanitizedFilename, checkOverwriteExistingData, getStringHash, parseStringArray, cancelDebounce, findChar, onlyUnique, equalsIgnoreCaseAndAccents } from './utils.js';
 import { extension_settings, getContext } from './extensions.js';
 import { NOTE_MODULE_NAME, metadata_keys, shouldWIAddPrompt } from './authors-note.js';
 import { isMobile } from './RossAscends-mods.js';

  */
 export async function showWorldEditor(name) {
     if (!name) {
         await hideWorldEditor();
         return;
+    }
     const wiData = await loadWorldInfo(name);
     await displayWorldEntries(name, wiData);
+}
 /**

@@ -1815,8 +1815,8 @@ export async function updateWorldInfoList() {
1815	1815	}
1816	1816	}
1817	1817
1818	1818	async function hideWorldEditor() {
1819	1819	await displayWorldEntries(null, null);
1820	1820	}
1821	1821
1822	1822	function getWIElement(name) {

     worldEntryKeyOptionsCache.sort((a, b) => b.count - a.count || a.text.localeCompare(b.text));
+}
 -function displayWorldEntries(name, data, navigation = navigation_option.none, flashOnNav = true) {
 +function clearEntryList() {
 -    updateEditor = (navigation, flashOnNav = true) => displayWorldEntries(name, data, navigation, flashOnNav);
 +    console.time('clearEntryList');
 +    const $list = $('#world_popup_entries_list');
++
++
 +    if (!$list.children().length) {
 +        console.warn('List already empty, skipping cleanup.');
 +        console.timeEnd('clearEntryList');
 +        return;
 +    }
++
 +    // Step 1: Clean all <option> elements within <select>
 +    console.warn(`Before cleaning: ${$list.find('option').length} options in list`);
 +    $list.find('option').each(function () {
 +        const $option = $(this);
 +        $option.off();
 +        $.cleanData([$option[0]]);
 +        $option.remove();
 +    });
 +    console.warn(`Post-clean: ${$list.find('option').length} options in list`);
++
 +    // Step 2: Clean all <select> elements
 +    console.warn(`Before cleaning: ${$list.find('select').length} selects in list`);
 +    $list.find('select').each(function () {
 +        const $select = $(this);
 +        // Remove Select2-related data and container if present
 +        if ($select.hasClass('select2-hidden-accessible')) {
 +            try {
 +                $select.select2('destroy');
 +            } catch (e) {
 +                console.warn('Select2 destroy failed:', e);
 +            }
 +        }
 +        const $container = $select.parent();
 +        if ($container.length) {
 +            $container.find('*').off();
 +            $.cleanData($container.find('*').get());
 +            $container.remove();
 +        } else {
 +            console.warn('container not found');
 +            console.warn($select.parent().html());
 +        }
 +        // Destroy Select2 if applicable
++
 +        $select.off();
 +        $.cleanData([$select[0]]);
++
 +    });
 +    console.warn(`Post-clean: ${$list.find('select').length} selects in list`);
++
 +    // Step 3: Clean <div>, <span>, <input>
 +    console.warn(`Before cleaning: ${$list.find('div, span, input').length} divs, spans, inputs in list`);
 +    $list.find('div, span, input').each(function () {
 +        const $elem = $(this);
 +        $elem.off();
 +        $.cleanData([$elem[0]]);
 +        $elem.remove();
 +    });
 +    console.warn(`Post-clean: ${$list.find('div, span, input').length} divs, spans, inputs in list`);
++
 +    // Destroy Sortable
 +    console.warn(`Before cleaning: ${$list.sortable('instance') ? 1 : 0} sortable instance in list`);
 +    if ($list.sortable('instance')) {
 +        $list.sortable('destroy');
 +    }
 +    console.warn(`Post-cleaning: ${$list.sortable('instance') ? 1 : 0} sortable instance in list`);
++
 +    let totalElementsOfanyKindLeftInList = $list.children().length;
++
 +    // Final cleanup
 +    if (totalElementsOfanyKindLeftInList !== 0) {
 +        console.time('empty');
 +        console.warn(`Before .empty(): ${totalElementsOfanyKindLeftInList} elements left in list`);
 +        $list.empty();
 +        totalElementsOfanyKindLeftInList = $list.children().length;
 +        console.warn(`After .empty(): ${totalElementsOfanyKindLeftInList} elements left in list`);
 +        console.timeEnd('empty');
 +    } else {
 +        console.warn('Entry List is already totally empty, no need to call .empty()');
 +    }
++
 +    console.timeEnd('clearEntryList');
 +}
++
 +async function displayWorldEntries(name, data, navigation = navigation_option.none, flashOnNav = true) {
 +    updateEditor = async (navigation, flashOnNav = true) => await displayWorldEntries(name, data, navigation, flashOnNav);
     const worldEntriesList = $('#world_popup_entries_list');
     // We save costly performance by removing all events before emptying. Because we know there are no relevant event handlers reacting on removing elements
     // This prevents jQuery from actually going through all registered events on the controls for each entry when removing it
     //worldEntriesList.find('*').off();
 -    worldEntriesList.empty().show();
 +    worldEntriesList.css({ 'opacity': 0, 'transition': 'opacity 250ms ease-in-out' });
 +    await delay(250);
 +    clearEntryList(); // Use enhanced cleanup
 +    worldEntriesList.show();
     if (!data || !('entries' in data)) {
         $('#world_popup_new').off('click').on('click', nullWorldInfo);

         callback: async function (/** @type {object[]} */ page) {
             // We save costly performance by removing all events before emptying. Because we know there are no relevant event handlers reacting on removing elements
             // This prevents jQuery from actually going through all registered events on the controls for each entry when removing it
             //worldEntriesList.find('*').off();
             worldEntriesList.emptyclearEntryList();
 +            //worldEntriesList.empty();
             const keywordHeaders = await renderTemplateAsync('worldInfoKeywordHeaders');
             const blocksPromises = page.map(async (entry) => await getWorldEntry(name, data, entry)).filter(x => x);

@@ -2173,7 +2261,7 @@ function displayWorldEntries(name, data, navigation = navigation_option.none, fl
2173	2261	if (selectedIndex !== -1) {
2174	2262	$('#world_editor_select').val(selectedIndex).trigger('change');
2175	2263	} else {
2176	2264	await hideWorldEditor();
2177	2265	}
2178	2266	}
2179	2267	});

             await saveWorldInfo(name, data);
         },
     });
++
 +    worldEntriesList.css('opacity', '1');
 +    //remove inline CSS on the list
 +    worldEntriesList.removeAttr('style');
++
++
     //$("#world_popup_entries_list").disableSelection();
+}

     if (selectedIndex !== -1) {
         $('#world_editor_select').val(selectedIndex).trigger('change');
     } else {
         await hideWorldEditor();
+    }
     return true;

         const selectedIndex = String($('#world_editor_select').find(':selected').val());
         if (selectedIndex === '') {
             await hideWorldEditor();
         } else {
             const worldName = world_names[selectedIndex];
             showWorldEditor(worldName);