Fix headless

package.json

@@ -38,7 +38,6 @@
     "prettier": "^1.18.2",
     "sass": "^1.42.1",
     "sinon": "^7.5.0",
-    "string-replace-loader": "^2.2.0",
     "vuepress": "^1.8.2",
     "whatwg-fetch": "^3.6.2"
   },

src/domain_abstract/ui/InputColor.js

@@ -3,8 +3,8 @@ import { isUndefined } from 'underscore';
 import ColorPicker from 'utils/ColorPicker';
 import Input from './Input';
 
-const $ = Backbone.$;
+const { $ } = Backbone;
-ColorPicker($);
+$ && ColorPicker($);
 
 export default Input.extend({
   template() {

src/editor/index.js

@@ -101,13 +101,13 @@
  *
  * @module Editor
  */
-import $ from 'cash-dom';
 import defaults from './config/config';
 import EditorModel from './model/Editor';
 import EditorView from './view/EditorView';
 import html from 'utils/html';
 
-export default (config = {}) => {
+export default (config = {}, opts = {}) => {
+  const { $ } = opts;
   const c = {
     ...defaults,
     ...config

src/editor/model/Editor.js

@@ -7,13 +7,15 @@ import {
   keys,
   bindAll
 } from 'underscore';
-import $ from 'cash-dom';
 import Backbone from 'backbone';
 import Extender from 'utils/extender';
 import { getModel, hasWin } from 'utils/mixins';
 import Selected from './Selected';
 
+const cash = hasWin() ? require('cash-dom') : null;
+const $ = (cash && cash.default) || cash;
 Backbone.$ = $;
+
 const deps = [
   require('utils'),
   require('i18n'),
@@ -39,7 +41,6 @@ const deps = [
   require('block_manager')
 ];
 
-const { Collection } = Backbone;
 let timedInterval;
 let updateItr;
 

src/index.js

@@ -1,13 +1,15 @@
-import $ from 'cash-dom';
 import Editor from './editor';
 import { isElement, isFunction } from 'underscore';
 import polyfills from 'utils/polyfills';
 import PluginManager from './plugin_manager';
+import { hasWin } from 'utils/mixins';
 
 polyfills();
 
 const plugins = new PluginManager();
 const editors = [];
+const cash = hasWin() ? require('cash-dom') : null;
+const $ = (cash && cash.default) || cash;
 const defaultConfig = {
   // If true renders editor on init
   autorender: 1,
@@ -27,7 +29,7 @@ export default {
   plugins,
 
   // Will be replaced on build
-  version: '<# VERSION #>',
+  version: __GJS_VERSION__,
 
   /**
    * Initialize the editor with passed options
@@ -52,7 +54,7 @@ export default {
     config = { ...defaultConfig, ...config, grapesjs: this };
     config.el =
       !headless && (isElement(els) ? els : document.querySelector(els));
-    const editor = new Editor(config).init();
+    const editor = new Editor(config, { $ }).init();
     const em = editor.getModel();
 
     // Load plugins

test/setup.js

@@ -1,8 +1,6 @@
 import 'whatwg-fetch';
 import _ from 'underscore';
-import Backbone from 'backbone';
 import sinon from 'sinon';
-import grapesjs from './../src';
 
 const localStorage = {
   getItem(key) {
@@ -16,9 +14,9 @@ const localStorage = {
   }
 };
 
-global.Backbone = Backbone;
 global._ = _;
 global.sinon = sinon;
-global.grapesjs = grapesjs;
+global.__GJS_VERSION__ = '';
-global.$ = Backbone.$;
+global.grapesjs = require('./../src').default;
+global.$ = global.grapesjs.$;
 global.localStorage = localStorage;

test/specs/commands/index.js

@@ -1,7 +1,5 @@
 import Backbone from 'backbone';
 import Commands from 'commands';
-import Models from './model/CommandModels';
-import CommandAbstract from './view/CommandAbstract';
 
 describe('Commands', () => {
   describe('Main', () => {

test/specs/dom_components/model/Component.js

@@ -1,5 +1,4 @@
 import Backbone from 'backbone';
-import DomComponents from 'dom_components';
 import Component from 'dom_components/model/Component';
 import ComponentImage from 'dom_components/model/ComponentImage';
 import ComponentText from 'dom_components/model/ComponentText';

test/specs/style_manager/view/PropertyColorView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import PropertyColorView from 'style_manager/view/PropertyColorView';
 import Property from 'style_manager/model/Property';
 import Component from 'dom_components/model/Component';

test/specs/style_manager/view/PropertyIntegerView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import PropertyIntegerView from 'style_manager/view/PropertyIntegerView';
 import PropertyInteger from 'style_manager/model/PropertyInteger';
 import Component from 'dom_components/model/Component';

test/specs/style_manager/view/PropertyRadioView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import PropertyRadioView from 'style_manager/view/PropertyRadioView';
 import Property from 'style_manager/model/Property';
 import Component from 'dom_components/model/Component';

test/specs/style_manager/view/PropertySelectView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import PropertySelectView from 'style_manager/view/PropertySelectView';
 import Property from 'style_manager/model/PropertyRadio';
 import Editor from 'editor/model/Editor';

test/specs/style_manager/view/PropertyView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import PropertyView from 'style_manager/view/PropertyView';
 import Property from 'style_manager/model/Property';
 import Editor from 'editor/model/Editor';

test/specs/utils/Sorter.js

@@ -1,6 +1,5 @@
 import Backbone from 'backbone';
 import Sorter from '../../../src/utils/Sorter.js';
-import ComponentView from 'dom_components/view/ComponentView';
 import ComponentTextView from 'dom_components/view/ComponentTextView';
 import Component from 'dom_components/model/Component';
 const $ = Backbone.$;

webpack.config.js

@@ -1,4 +1,5 @@
 import path from 'path';
+import webpack from 'webpack';
 import pkg from './package.json';
 
 const rootDir = path.resolve(__dirname);
@@ -16,14 +17,8 @@ export default ({ config }) => ({
   },
   module: {
     rules: [
-      {
+      // Disable AMD in vendors
-        test: /\/index\.js$/,
+      { test: /\.js$/, parser: { amd: false } },
-        loader: 'string-replace-loader',
-        query: {
-          search: '<# VERSION #>',
-          replace: pkg.version
-        }
-      },
       ...config.module.rules,
     ],
   },
@@ -35,4 +30,8 @@ export default ({ config }) => ({
       underscore: `${rootDir}/node_modules/underscore`,
     }
   },
+  plugins: [
+    new webpack.DefinePlugin({ __GJS_VERSION__: `'${pkg.version}'` }),
+    ...config.plugins,
+  ]
 });