Make jQuery optional

[samclarke]

Now that IE < 9 has been dropped the jQuery requirement could also be made optional. SCEditor would still hook into jQuery if it's loaded as it does now but it would also allow using SCE without jQuery.

I've tried to make a complete list of the bits that are currently used by SCE:

$(selector)
$(html)
.find()
.is() .closest()
.parents()
.on() .off()
.css()
.keypress()
.val()
.each()
.contents()
.children()
.contains()
.camelCase()
.isArray()
.attr() .removeAttr()
.addClass() .removeClass() .toggleClass() .hasClass()
.extend()
.trim()
.data() - Used the same as attr('data-' + name)
.merge()
.isEmptyObject()
.height()
.width()
.first()
.isFunction()

Nearly all of which have native equivalents now meaning jQuery should be able to be replaced with a minimal wrapper. The main ones without a native equivalents are $.extend and the class manipulation methods (IE 9 doesn't support classList annoyingly) which isn't too bad.

If any one has any thoughts about this either for or against please add them.

[live627]

$.extend and classList already have polyfills. I use

https://www.npmjs.com/package/xtend
https://www.npmjs.com/package/domtokenlist-shim

[TwinFuture]

Please remove the requirement for jqeury. The only reason I am using the jquery plugin is for this editor. I actually want to strip jquery out of it myself but would require some time to study the code. I'm not a fan of plugins here plugins there.. People are ramming plugins into something that requires one line of code. I understand back when this was in its baby stages jquery was all the noise. Now the noise needs to be removed. Please do!

[brunoais]

@TwinFuture SCE uses jQuery quite extensively. There are still quite some bugs that jQuery seamlessly solves that SCE depends on.
Why don't you use one of those much lighter packages (I'm not remembering their names) that provide the same interface but a much lighter code in both processing and size.
Have you tried any of those?

[samclarke]

@brunoais are you thinking of Zepto? Not actually sure if SCE is compatible with it but might be if you define the jQuery variable.

[brunoais]

I don't have time now to update, make sure it is working and then try zepto but yeah, I was thinking a lib like that one.

[martec]

appear that Zepto not will increase performance
mybb/mybb2#264 (comment)

[samclarke]

I've been thinking about this and I think if this is going to be done it should be done as part of v2 as it would be slightly backwards incompatible. There are a few methods that currently return jQuery objects which would have to return plain DOM nodes.

So I'm going to create a test branch to try it out and see if it's worth it or not.

[samclarke]

So far I've managed to remove jQuery from everything other than the plugins (0598d76).

Size wise it's a little smaller when just uglified and about the same size when uglified and gzipped. I suspect removing jQuery from the plugins might increase the size a little bit but not much.

So it looks like removing jQuery as a dependency is doable but it'll need a lot of manual testing. Switching to ES6 modules might help a little as it allows splitting the code up without increasing size which should make it easier to make the code more unit test friendly.

Backwards incompatible changes

• The nodechanged event now stores newNode and oldNode in the detail property
• The valuechanged event now stores rawValue in the detail property
• getContentAreaContainer() now returns a plain DOM element
• getBody() now returns a DOM node
• dom.parseHTML() now returns a fragment
• The caller argument for command exec and txtExec functions is now a HTMLDivElement

[samclarke]

I've removed jQuerty from the BBCode and XHTML plugins in the remove-jquery branch to see how that affects things. The file sizes for SCEditor with the BBCode plugin are:

• Previous release: 70.5kb (23.9kb gzipped)
• V2 with jQuery: 67.9kb (23.8kb gzipped)
• V2 without jQuery: 68.4kb (24.1kb gzipped)

So file size wise removing jQuery shouldn't negatively affect jQuery users.

Backwards incompatible changes

• elementToBbcode() now takes a DOM node
• Removed deprecated jQuery.fn.sceditorBBCodePlugin() method
• Removed deprecated $.sceditorBBCodePlugin variable
• The first element parameter to the BBCode format: function is now a plain DOM node
• The second jQuery param to XHTML conv: function is no longer supplied

The BBCode format one is quite bad but should be able to create a backwards compatibility script to create the old behaviour. Something like:

var bbcodes = $.sceditor.bbcode.bbcodes;
Object.keys(bbcodes).forEach(function (key) {
    var oldFormat = bbcodes[key].format;

    if (typeof oldFormat === 'function') {
        bbcodes[key].format = function (element, content) {
            oldFormat(jQuery(element), content);
        };
    } 
});

I think this is worth doing despite the backward incompatibles as most of them can be fixed with a backwards compatibility script and it removes the jQuery dependency which is larger than the whole editor! If any one has any thoughts on this please add them.