From b47de3a2c092b4784dd477ea75e34f66638e9e1a Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Sat, 8 Mar 2025 17:27:20 +0800 Subject: [PATCH 1/4] Refactor dataTable plugin Decouple dataTable from Vue by using MutationObserver instead of relying on Vue Directives to process dynamically loaded content. --- packages/core/src/plugins/dataTable.ts | 77 +++++++++++++++++++++----- 1 file changed, 64 insertions(+), 13 deletions(-) diff --git a/packages/core/src/plugins/dataTable.ts b/packages/core/src/plugins/dataTable.ts index 8ba1cbdb34..d1768be05d 100644 --- a/packages/core/src/plugins/dataTable.ts +++ b/packages/core/src/plugins/dataTable.ts @@ -27,20 +27,72 @@ const initScript = ` return options; } - Vue.directive('datatable', { - inserted: function(el, binding) { - const options = binding.value || {}; - const tableOptions = getTableOptions(el); - $(el).DataTable({ ...tableOptions, ...options }); - } - }); + function initializeTables(tables) { + if (!tables || tables.length === 0) return; + tables.forEach(table => { + const options = getTableOptions(table); + $(table).DataTable(options); + $(table).addClass('dt-processed'); + }); + } - document.addEventListener('DOMContentLoaded', function() { - $('table.sortable-table, table.searchable-table, table.sortable-searchable-table').each(function() { - const options = getTableOptions(this); - $(this).DataTable(options); + function setupTableObserver() { + const observer = new MutationObserver((mutations) => { + let newTables = []; + + mutations.forEach(mutation => { + if (mutation.addedNodes.length) { + mutation.addedNodes.forEach(node => { + + if (node.nodeType === 1 && node.tagName === 'TABLE' && + !$(node).hasClass('dt-processed') && + ($(node).hasClass('sortable-table') || + $(node).hasClass('searchable-table') || + $(node).hasClass('sortable-searchable-table'))) { + newTables.push(node); + } + + if (node.nodeType === 1 && node.querySelectorAll) { + const tablesInNode = node.querySelectorAll( + 'table.sortable-table:not(.dt-processed), ' + + 'table.searchable-table:not(.dt-processed), ' + + 'table.sortable-searchable-table:not(.dt-processed)'); + if (tablesInNode.length) { + newTables = [...newTables, ...tablesInNode]; + } + } + }); + } + }); + + if (newTables.length > 0) { + initializeTables(newTables); + } }); + + // Start observing the entire document for changes + observer.observe(document.body, { + childList: true, + subtree: true + }); + + return observer; + } + + document.addEventListener('DOMContentLoaded', function() { + // Process any existing tables + const existingTables = document.querySelectorAll( + 'table.sortable-table:not(.dt-processed), ' + + 'table.searchable-table:not(.dt-processed), ' + + 'table.sortable-searchable-table:not(.dt-processed)' + ); + if (existingTables.length > 0) { + initializeTables(existingTables); + } + + setupTableObserver(); }); + `; @@ -77,8 +129,7 @@ export = { const $renderedTable = $(renderedTable); $renderedTable.find('table') .addClass(tableClass) - .attr('id', `datatable-${index}`) - .attr('v-datatable', ''); + .attr('id', `datatable-${index}`); $node.replaceWith($renderedTable); }); From 44de52422d479ef7c1c66945383e63fb229d9bf2 Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Sat, 8 Mar 2025 19:41:58 +0800 Subject: [PATCH 2/4] Update span wrapping table causing hydration issue --- .../cli/test/functional/test_site_table_plugin/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/cli/test/functional/test_site_table_plugin/index.md b/packages/cli/test/functional/test_site_table_plugin/index.md index fe07550f1d..1602c4c4ee 100644 --- a/packages/cli/test/functional/test_site_table_plugin/index.md +++ b/packages/cli/test/functional/test_site_table_plugin/index.md @@ -48,14 +48,14 @@ Test sortable with searchable --- Test table can be included - + --- Test table can be included in a panel - + @@ -65,7 +65,7 @@ Test table can be included in a modal trigger - + From 6ae21da6e773685a7bea94fd17e0cf1ceeb3eae6 Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Sat, 8 Mar 2025 22:06:00 +0800 Subject: [PATCH 3/4] Update test snapshot files for dataTable --- .../expected/index.html | 356 ++++++++++-------- .../expected/index.page-vue-render.js | 22 +- 2 files changed, 206 insertions(+), 172 deletions(-) diff --git a/packages/cli/test/functional/test_site_table_plugin/expected/index.html b/packages/cli/test/functional/test_site_table_plugin/expected/index.html index 75e6cc85cd..4881760c4e 100644 --- a/packages/cli/test/functional/test_site_table_plugin/expected/index.html +++ b/packages/cli/test/functional/test_site_table_plugin/expected/index.html @@ -31,7 +31,7 @@

Welcome to MarkBind - +
@@ -80,7 +80,7 @@

Welcome to MarkBind -

Name
 +
@@ -129,7 +129,7 @@

Welcome to MarkBind -

Name
+
@@ -177,105 +177,101 @@

Welcome to MarkBind -

Name
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
- - -

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
+
+

Test table can be included in a panel

-

-

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
-
-
-

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
+
+

Test table can be included in a modal

@@ -283,53 +279,51 @@

Welcome to MarkBindtrigger

-

-

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
-
-
-

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
+
+
@@ -368,20 +362,72 @@

Welcome to MarkBind Date: Sat, 8 Mar 2025 22:16:54 +0800 Subject: [PATCH 4/4] Update dataTable unit test Remove v-dataTable as Vue directive is no longer used. --- packages/core/test/unit/plugins/default/dataTable.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/test/unit/plugins/default/dataTable.test.ts b/packages/core/test/unit/plugins/default/dataTable.test.ts index 49164aa971..5abe366417 100644 --- a/packages/core/test/unit/plugins/default/dataTable.test.ts +++ b/packages/core/test/unit/plugins/default/dataTable.test.ts @@ -39,7 +39,6 @@ test('postRender should add appropriate classes and attributes to m-table elemen $('table').each((index, el) => { expect($(el).attr('class')).toEqual(expectedClasses[index]); expect($(el).attr('id')).toEqual(`datatable-${index}`); - expect($(el).attr('v-datatable')).toBeDefined(); }); });