Documentation v1.1.0

Preview Purchase

Overview

All of our products does notcontain any jQuery within the core layout and components. However, the below listed plugins require, which is the main reason for jQuery's inclusion.
After jQuery and above jQuery plugins removal, some pages might not function as expected and throw $ is not definedreference errors. However, the core layout and components function as expected without any issue.

Remove jQuery

Locate the package.jsonfile within the tools folder: /theme/html/tools/and remove below dependencies under dependenciesnode:
"dependencies": {
    "jquery": "3.6.0",
    "jquery.repeater": "^1.2.1",
    "jstree": "^3.3.11",
    "select2": "^4.1.0-rc.0",
    "flot": "^4.2.2",
    "bootstrap-select": "^1.13.18",
    "bootstrap-multiselectsplitter": "^1.0.4",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-maxlength": "^1.10.1",
    "datatables.net": "^1.12.1",
    "datatables.net-bs5": "^1.12.1",
    "datatables.net-buttons": "^2.2.3",
    "datatables.net-buttons-bs5": "^2.2.3",
    "datatables.net-colreorder": "^1.5.6",
    "datatables.net-colreorder-bs5": "^1.5.6",
    "datatables.net-datetime": "^1.1.2",
    "datatables.net-fixedcolumns": "^4.1.0",
    "datatables.net-fixedcolumns-bs5": "^4.1.0",
    "datatables.net-fixedheader": "^3.2.3",
    "datatables.net-fixedheader-bs5": "^3.2.3",
    "datatables.net-plugins": "^1.11.5",
    "datatables.net-responsive": "^2.3.0",
    "datatables.net-responsive-bs5": "^2.3.0",
    "datatables.net-rowgroup": "^1.2.0",
    "datatables.net-rowgroup-bs5": "^1.2.0",
    "datatables.net-rowreorder": "^1.2.8",
    "datatables.net-rowreorder-bs5": "^1.2.8",
    "datatables.net-scroller": "^2.0.6",
    "datatables.net-scroller-bs5": "^2.0.6",
    "datatables.net-select": "^1.4.0",
    "datatables.net-select-bs5": "^1.4.0",
}

Gulp Config

Locate the gulp config file within the tools folder: /theme/html/tools/gulp.config.jsand remove below dependencies one by one:
const gulpConfig = {
    build: {
        plugins: {
            global: {
                src: {
                    mandatory: {
                        jquery: {
                            scripts: ["{$config.path.node_modules}/jquery/dist/jquery.js"],
                        }
                    }
                }
            },
            optional: {
                select2: {
                    styles: [
                        "{$config.path.node_modules}/select2/dist/css/select2.css",
                    ],
                    scripts: [
                        "{$config.path.node_modules}/select2/dist/js/select2.full.js",
                        "{$config.path.common_src}/js/vendors/plugins/select2.init.js",
                    ],
                },
                "bootstrap-maxlength": {
                    "scripts": [
                        "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                    ]
                },
                daterangepicker: {
                    styles: [
                        "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css",
                    ],
                    scripts: [
                        "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js",
                    ],
                },
                inputmask: {
                    scripts: [
                        "{$config.path.node_modules}/inputmask/dist/bindings/inputmask.binding.js"
                    ]
                },
                "bootstrap-multiselectsplitter": {
                    scripts: [
                        "{$config.path.node_modules}/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.js",
                    ],
                },
                toastr: {
                    styles: ["{$config.path.common_src}/plugins/toastr/build/toastr.css"],
                    scripts: ["{$config.path.common_src}/plugins/toastr/build/toastr.min.js"],
                },
            }
        },
        custom: {
            "datatables.net": {
                src: {
                    styles: [
                        "{$config.path.node_modules}/datatables.net-bs5/css/dataTables.bootstrap5.css",
                        "{$config.path.node_modules}/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-select-bs5/css/select.bootstrap5.min.css",
                        "{$config.path.node_modules}/datatables.net-datetime/dist/dataTables.dateTime.min.css",
                    ],
                    scripts: [
                        "{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
                        "{$config.path.node_modules}/datatables.net-bs5/js/dataTables.bootstrap5.js",
                        "{$config.path.common_src}/js/vendors/plugins/datatables.init.js",
                        "{$config.path.node_modules}/jszip/dist/jszip.min.js",
                        "{$config.path.node_modules}/pdfmake/build/pdfmake.min.js",
                        "{$config.path.node_modules}/pdfmake/build/vfs_fonts.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.min.js",
                        "{$config.path.node_modules}/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/buttons.flash.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
                        "{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",
                        "{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.min.js",
                        "{$config.path.node_modules}/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
                        "{$config.path.node_modules}/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
                        "{$config.path.node_modules}/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.min.js",
                        "{$config.path.node_modules}/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
                        "{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
                        "{$config.path.node_modules}/datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
                        "{$config.path.node_modules}/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.min.js",
                        "{$config.path.node_modules}/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-select/js/dataTables.select.min.js",
                        "{$config.path.node_modules}/datatables.net-select-bs5/js/dataTables.bootstrap5.js",
                        "{$config.path.node_modules}/datatables.net-datetime/dist/dataTables.dateTime.min.js",
                        "{$config.path.node_modules}/datatables.net-plugins/features/conditionalPaging/dataTables.conditionalPaging.js",
                    ]
                },
                dist: {
                    styles: "{$config.dist}/plugins/custom/datatables/datatables.bundle.css",
                    scripts: "{$config.dist}/plugins/custom/datatables/datatables.bundle.js",
                }
            },
            flot: {
                src: {
                    scripts: [
                        "{$config.path.node_modules}/flot/dist/es5/jquery.flot.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.resize.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.categories.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.pie.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.stack.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.crosshair.js",
                        "{$config.path.node_modules}/flot/source/jquery.flot.axislabels.js"
                    ]
                },
                dist: {
                    scripts: "{$config.dist}/plugins/custom/flotcharts/flotcharts.bundle.js"
                }
            },
            jstree: {
                src: {
                    styles: [
                        "{$config.path.node_modules}/jstree/dist/themes/default/style.css"
                    ],
                    scripts: [
                        "{$config.path.node_modules}/jstree/dist/jstree.js"
                    ],
                    images: [
                        "{$config.path.common_src}/media/plugins/jstree/32px.png",
                        "{$config.path.node_modules}/jstree/dist/themes/default/throbber.gif"
                    ]
                },
                dist: {
                    styles: "{$config.dist}/plugins/custom/jstree/jstree.bundle.css",
                    scripts: "{$config.dist}/plugins/custom/jstree/jstree.bundle.js",
                    images: "{$config.dist}/plugins/custom/jstree/images/jstree"
                }
            },
            formrepeater: {
                src: {
                    scripts: [
                        "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                        "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                        "{$config.path.node_modules}/jquery.repeater/src/repeater.js"
                    ]
                },
                dist: {
                    scripts: "{$config.dist}/plugins/custom/formrepeater/formrepeater.bundle.js",
                }
            },
            "bootstrap-select": {
                src: {
                    styles: [
                        "{$config.path.node_modules}/bootstrap-select/dist/css/bootstrap-select.css",
                    ],
                    scripts: [
                        "{$config.path.node_modules}/bootstrap-select/dist/js/bootstrap-select.min.js",
                    ]
                },
                dist: {
                    styles: "{$config.dist}/plugins/custom/bootstrap-select/bootstrap-select.bundle.css",
                    scripts: "{$config.dist}/plugins/custom/bootstrap-select/bootstrap-select.bundle.js",
                }
            }
        }
    }
}

Webpack Config

  1. Locate the webpack javascript plugins config file within the tools folder: /theme/html/tools/webpack/plugins/plugins.jsand remove below dependencies one by one:
    window.jQuery = window.$ = require('jquery');
    require('bootstrap-daterangepicker/daterangepicker.js');
    require('bootstrap-maxlength/src/bootstrap-maxlength.js');
    require('@/src/plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js');
    require('select2/dist/js/select2.full.min.js');
    require('inputmask/dist/bindings/inputmask.binding.js');
    require('@/src/js/vendors/plugins/select2.init.js');
    window.toastr = require('@/src/plugins/toastr/build/toastr.min.js');
    window.sessionTimeout = require('@/src/plugins/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js');
    require('@/src/plugins/jquery-idletimer/idle-timer.min.js');
    }
    
  2. Locate the webpack plugins sass config file within the tools folder: /theme/html/tools/webpack/plugins/plugins.scssand remove below dependencies one by one:
    @import "~select2/src/scss/core.scss";
    @import "~bootstrap-daterangepicker/daterangepicker.css";
    @import "~@/src/plugins/toastr/build/toastr.css";
    
  3. Locate the webpack main config file within the tools folder: /theme/html/tools/webpack.config.jsand remove below datatables plugin dependencies completely under importExtraPluginsfunction:
    // datatables
    files: {
        'plugins/custom/datatables/datatables.bundle.js': [
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/datatables.net-bs5/js/dataTables.bootstrap5.js",
            "../src/js/vendors/plugins/datatables.init.js",
            "node_modules/jszip/dist/jszip.min.js",
            "node_modules/pdfmake/build/pdfmake.min.js",
            "node_modules/pdfmake/build/vfs_fonts.js",
            "node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
            "node_modules/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
            "node_modules/datatables.net-buttons/js/buttons.colVis.js",
            "node_modules/datatables.net-buttons/js/buttons.flash.js",
            "node_modules/datatables.net-buttons/js/buttons.html5.js",
            "node_modules/datatables.net-buttons/js/buttons.print.js",
            "node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js",
            "node_modules/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.js",
            "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
            "node_modules/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.js",
            "node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
            "node_modules/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.js",
            "node_modules/datatables.net-responsive/js/dataTables.responsive.min.js",
            "node_modules/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
            "node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
            "node_modules/datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js",
            "node_modules/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
            "node_modules/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.js",
            "node_modules/datatables.net-scroller/js/dataTables.scroller.min.js",
            "node_modules/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js",
            "node_modules/datatables.net-select/js/dataTables.select.min.js",
            "node_modules/datatables.net-select-bs5/js/dataTables.bootstrap5.js",
            "node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.js",
        ],
        'plugins/custom/datatables/pdfmake.min.js.map': [
            'node_modules/pdfmake/build/pdfmake.min.js.map',
        ],
        'plugins/custom/datatables/datatables.bundle.css': [
            "node_modules/datatables.net-bs5/css/dataTables.bootstrap5.css",
            "node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css",
            "node_modules/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css",
            "node_modules/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css",
            "node_modules/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css",
            "node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
            "node_modules/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css",
            "node_modules/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css",
            "node_modules/datatables.net-select-bs5/css/select.bootstrap5.min.css",
            "node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.css",
        ]
    }
    
  4. Remove following dependencies folders in /theme/html/tools/webpack/plugins/customfolder:
    • floatchart
    • formrepeater
    • jstree
  5. Remove following plugins js and css includes from the HTML templates:
    • assets/plugins/custom/datatables/datatables.bundle.css
    • assets/plugins/custom/datatables/datatables.bundle.js

Rebuild

Remove theme/html/tools/node_modulesfolder and theme/html/tools/yarn.lockin file the tools folder and reinstall packages and build the assets with Gulp  or Webpack.
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now