Remove jQuery and fix some methods

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>GrapesJS</title>
     <link rel="stylesheet" href="dist/css/grapes.min.css">
-    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <!-- script src="node_modules/jquery/dist/jquery.min.js"></script -->
     <script src="dist/grapes.min.js"></script>
 
   </head>

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "backbone": "^1.3.3",
     "backbone-undo": "^0.2.5",
+    "cash-dom": "^1.3.5",
     "codemirror": "^5.21.0",
     "codemirror-formatting": "^1.0.0",
     "font-awesome": "^4.7.0",

src/domain_abstract/ui/InputColor.js

@@ -1,6 +1,7 @@
 var Backbone = require('backbone');
 var Input = require('./Input');
 var Spectrum = require('spectrum-colorpicker');
+const $ = Backbone.$;
 
 module.exports = Input.extend({
 
@@ -55,6 +56,7 @@ module.exports = Input.extend({
     if (!this.colorEl) {
       const self = this;
       var model = this.model;
+
       var colorEl = $('<div>', {class: this.colorCls});
       var cpStyle = colorEl.get(0).style;
       var elToAppend = this.target && this.target.config ? this.target.config.el : '';

src/editor/model/Editor.js

@@ -18,10 +18,10 @@ require('block_manager'),
 require('trait_manager'),
 ];
 
-var Backbone = require('backbone');
-var UndoManager = require('backbone-undo');
-var key = require('keymaster');
-var timedInterval;
+const Backbone = require('backbone');
+const UndoManager = require('backbone-undo');
+const key = require('keymaster');
+let timedInterval;
 
 if (!Backbone.$) {
   Backbone.$ = $;

src/grapesjs/index.js

@@ -4,9 +4,12 @@ module.exports = (() => {
   const defaultConfig = require('./config/config');
   const Editor = require('editor');
   const PluginManager = require('plugin_manager');
+  const cash = require('cash-dom');
   const plugins = new PluginManager();
   const editors = [];
 
+  require('utils/cashAdds')(cash);
+
   return {
 
     // Will be replaced on build
@@ -36,10 +39,12 @@ module.exports = (() => {
      */
     init(config = {}) {
       const els = config.container;
+      let $ = $ || '';
 
       // Make a missing $ more verbose
-      if (isUndefined($)) {
-        throw 'jQuery not found';
+      if (!$) {
+        $ = cash;
+        window.$ = $;
       }
 
       if (!els) {

src/style_manager/view/PropertyRadioView.js

@@ -18,7 +18,7 @@ module.exports = require('./PropertyView').extend({
     const prop = model.get('property');
     const options = model.get('list') || model.get('options') || [];
 
-    if (!this.$input) {
+    if (!this.input) {
       if(options && options.length) {
         let inputStr = '';
 
@@ -31,31 +31,33 @@ module.exports = require('./PropertyView').extend({
             <div class="${ppfx}radio-item">
               <input type="radio" class="${pfx}radio" id="${id}" name="${prop}" value="${el.value}"/>
               <label class="${cl || itemCls}" ${titleAttr} for="${id}">${cl ? '' : labelTxt}</label>
-            </div>`;
+            </div>
+          `;
         });
 
-        this.$inputEl = $(inputStr);
-        this.input = this.$inputEl.get(0);
-        this.$el.find(`#${pfx}input-holder`).html(this.$inputEl);
-        this.$input = this.$inputEl.find(`input[name="${prop}"]`);
+        const inputHld = this.el.querySelector(`#${pfx}input-holder`);
+        inputHld.innerHTML = `<div>${inputStr}</div>`;
+        this.input = inputHld.firstChild;
       }
     }
   },
-
+  /*
   getInputValue() {
     return this.$input ? this.$el.find('input:checked').val() : '';
   },
+*/
+  getInputValue() {
+    const input = this.getInputEl();
+    const inputIn = input ? input.querySelector('input:checked') : '';
+    return inputIn ? inputIn.value : '';
+  },
 
   setValue(value) {
     const model = this.model;
-    var v = model.get('value') || model.getDefaultValue();
-
-    if (value) {
-      v  = value;
-    }
-
-    if(this.$input)
-      this.$input.filter(`[value="${v}"]`).prop('checked', true);
+    let val = value || model.get('value') || model.getDefaultValue();
+    const input = this.getInputEl();
+    const inputIn = input ? input.querySelector(`[value="${val}"]`) : '';
+    inputIn && (inputIn.checked = true);
   },
 
 });

src/utils/cashAdds.js

@@ -0,0 +1,9 @@
+module.exports = ($) => {
+  $.fn.hide = function() {
+    return this.css('display', 'none');
+  }
+
+  $.fn.show = function() {
+    return this.css('display', 'block');
+  }
+}

webpack.config.js

@@ -24,14 +24,6 @@ module.exports = {
       library: 'grapesjs',
       libraryTarget: 'umd',
   },
-  externals: {
-    jquery: {
-      commonjs2: 'jquery',
-      commonjs: 'jquery',
-      amd: 'jquery',
-      root: 'jQuery'
-    }
-  },
   plugins: plugins,
   module: {
     loaders: [{