A few more files refactored to ES modules

HISTORY.md

@@ -4,8 +4,8 @@ https://github.com/josdejong/jsoneditor
 
 ## not yet published, version 7.0.0
 
+- Converted a large part of the code to ES6, put Babel transpiler in place.
 - Dropped support for bower, removed the `dist` folder from the git repository.
-- Converted the code into ES6, put Babel transpiler in place.
 - Fixed #586: caret position lost when switching browser tabs.
 
 

gulpfile.js

@@ -1,40 +1,40 @@
-var fs = require('fs')
-var path = require('path')
-var gulp = require('gulp')
-var log = require('fancy-log')
-var format = require('date-format')
-var concatCss = require('gulp-concat-css')
-var minifyCSS = require('gulp-clean-css')
-var sass = require('gulp-sass')
-var mkdirp = require('mkdirp')
-var webpack = require('webpack')
-var uglify = require('uglify-js')
-
-var NAME = 'jsoneditor'
-var NAME_MINIMALIST = 'jsoneditor-minimalist'
-var ENTRY = './src/js/JSONEditor.js'
-var HEADER = './src/js/header.js'
-var IMAGE = './src/scss/img/jsoneditor-icons.svg'
-var DOCS = './src/docs/*'
-var DIST = path.join(__dirname, 'dist')
+const fs = require('fs')
+const path = require('path')
+const gulp = require('gulp')
+const log = require('fancy-log')
+const format = require('date-format')
+const concatCss = require('gulp-concat-css')
+const minifyCSS = require('gulp-clean-css')
+const sass = require('gulp-sass')
+const mkdirp = require('mkdirp')
+const webpack = require('webpack')
+const uglify = require('uglify-js')
+
+const NAME = 'jsoneditor'
+const NAME_MINIMALIST = 'jsoneditor-minimalist'
+const ENTRY = './src/js/JSONEditor.js'
+const HEADER = './src/js/header.js'
+const IMAGE = './src/scss/img/jsoneditor-icons.svg'
+const DOCS = './src/docs/*'
+const DIST = path.join(__dirname, 'dist')
 
 // generate banner with today's date and correct version
 function createBanner () {
-  var today = format.asString('yyyy-MM-dd', new Date()) // today, formatted as yyyy-MM-dd
-  var version = require('./package.json').version // math.js version
+  const today = format.asString('yyyy-MM-dd', new Date()) // today, formatted as yyyy-MM-dd
+  const version = require('./package.json').version // math.js version
 
   return String(fs.readFileSync(HEADER))
     .replace('@@date', today)
     .replace('@@version', version)
 }
 
-var bannerPlugin = new webpack.BannerPlugin({
+const bannerPlugin = new webpack.BannerPlugin({
   banner: createBanner(),
   entryOnly: true,
   raw: true
 })
 
-var webpackConfigModule = {
+const webpackConfigModule = {
   rules: [
     {
       test: /\.m?js$/,
@@ -47,7 +47,7 @@ var webpackConfigModule = {
 }
 
 // create a single instance of the compiler to allow caching
-var compiler = webpack({
+const compiler = webpack({
   entry: ENTRY,
   output: {
     library: 'JSONEditor',
@@ -69,7 +69,7 @@ var compiler = webpack({
 })
 
 // create a single instance of the compiler to allow caching
-var compilerMinimalist = webpack({
+const compilerMinimalist = webpack({
   entry: ENTRY,
   output: {
     library: 'JSONEditor',
@@ -92,8 +92,8 @@ var compilerMinimalist = webpack({
 })
 
 function minify (name) {
-  var code = String(fs.readFileSync(DIST + '/' + name + '.js'))
-  var result = uglify.minify(code, {
+  const code = String(fs.readFileSync(DIST + '/' + name + '.js'))
+  const result = uglify.minify(code, {
     sourceMap: {
       url: name + '.map'
     },
@@ -107,8 +107,8 @@ function minify (name) {
     throw result.error
   }
 
-  var fileMin = DIST + '/' + name + '.min.js'
-  var fileMap = DIST + '/' + name + '.map'
+  const fileMin = DIST + '/' + name + '.min.js'
+  const fileMap = DIST + '/' + name + '.map'
 
   fs.writeFileSync(fileMin, result.code)
   fs.writeFileSync(fileMap, result.map)

index.js

@@ -1 +1 @@
-module.exports = require('./src/js/JSONEditor').default
+module.exports = require('./src/js/JSONEditor')

src/js/JSONEditor.js

@@ -2,11 +2,10 @@
 
 const ace = require('./ace') // may be undefined in case of minimalist bundle
 const VanillaPicker = require('./vanilla-picker') // may be undefined in case of minimalist bundle
-
-const treeModeMixins = require('./treemode').treeModeMixins
-const textModeMixins = require('./textmode').textModeMixins
-const previewModeMixins = require('./previewmode').previewModeMixins
-const util = require('./util')
+const { treeModeMixins } = require('./treemode')
+const { textModeMixins } = require('./textmode')
+const { previewModeMixins } = require('./previewmode')
+const { clear, extend, getInternetExplorerVersion, parse } = require('./util')
 const { tryRequireAjv } = require('./tryRequireAjv')
 
 const Ajv = tryRequireAjv()
@@ -97,7 +96,7 @@ function JSONEditor (container, options, json) {
   }
 
   // check for unsupported browser (IE8 and older)
-  const ieVersion = util.getInternetExplorerVersion()
+  const ieVersion = getInternetExplorerVersion()
   if (ieVersion !== -1 && ieVersion < 9) {
     throw new Error('Unsupported browser, IE9 or newer required. ' +
         'Please install the newest version of your browser.')
@@ -220,7 +219,7 @@ JSONEditor.prototype.get = function () {
  * @param {String | undefined} jsonText
  */
 JSONEditor.prototype.setText = function (jsonText) {
-  this.json = util.parse(jsonText)
+  this.json = parse(jsonText)
 }
 
 /**
@@ -263,7 +262,7 @@ JSONEditor.prototype.setMode = function (mode) {
   }
 
   const container = this.container
-  const options = util.extend({}, this.options)
+  const options = extend({}, this.options)
   const oldMode = options.mode
   let data
   let name
@@ -277,8 +276,8 @@ JSONEditor.prototype.setMode = function (mode) {
       data = this[asText ? 'getText' : 'get']() // get text or json
 
       this.destroy()
-      util.clear(this)
-      util.extend(this, config.mixin)
+      clear(this)
+      extend(this, config.mixin)
       this.create(container, options)
 
       this.setName(name)
@@ -428,7 +427,7 @@ JSONEditor.prototype.refresh = () => {
 JSONEditor.registerMode = mode => {
   let i, prop
 
-  if (util.isArray(mode)) {
+  if (Array.isArray(mode)) {
     // multiple modes
     for (i = 0; i < mode.length; i++) {
       JSONEditor.registerMode(mode[i])

src/js/ModeSwitcher.js

@@ -1,7 +1,7 @@
 'use strict'
 
-const ContextMenu = require('./ContextMenu').ContextMenu
-const translate = require('./i18n').translate
+import { ContextMenu } from './ContextMenu'
+import { translate } from './i18n'
 
 /**
  * Create a select box to be used in the editor menu's, which allows to switch mode
@@ -11,7 +11,7 @@ const translate = require('./i18n').translate
  * @param {function(mode: string)} onSwitch  Callback invoked on switch
  * @constructor
  */
-function ModeSwitcher (container, modes, current, onSwitch) {
+export function ModeSwitcher (container, modes, current, onSwitch) {
   // available modes
   const availableModes = {
     code: {
@@ -119,5 +119,3 @@ ModeSwitcher.prototype.destroy = function () {
   }
   this.dom = null
 }
-
-module.exports = ModeSwitcher