From 030d3ca9601f28a788998d88f7975c1180e190f2 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Wed, 10 Nov 2021 22:07:59 +0100
Subject: [PATCH] feat: support multiple query languages in the transform modal
 (WIP)

---
 README.md                                     |  12 +-
 package-lock.json                             |  14 ++
 package.json                                  |   1 +
 src/lib/components/JSONEditor.svelte          |  16 ++
 src/lib/components/modals/TransformModal.scss |  14 +-
 .../components/modals/TransformModal.svelte   |  42 ++--
 .../components/modals/TransformWizard.svelte  |   2 +-
 .../components/modes/codemode/CodeMode.svelte |  12 ++
 .../components/modes/treemode/TreeMode.svelte |  13 ++
 src/lib/config.js                             |   1 +
 src/lib/index.js                              |   2 +
 .../plugins/query/jmespathQueryLanguage.js    | 198 ++++++++++++++++++
 .../query/jmespathQueryLanguage.test.js       |  67 ++++++
 .../query/lodashQueryLanguage.js}             |  43 +++-
 src/lib/types.js                              |  25 +++
 src/routes/development.svelte                 |  23 +-
 16 files changed, 453 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/plugins/query/jmespathQueryLanguage.js
 create mode 100644 src/lib/plugins/query/jmespathQueryLanguage.test.js
 rename src/lib/{logic/jsCreateQuery.js => plugins/query/lodashQueryLanguage.js} (55%)

diff --git a/README.md b/README.md
index f652569b..68b943a3 100644
--- a/README.md
+++ b/README.md
@@ -93,9 +93,9 @@ Or one-way binding:
     }
   }
 
-  function handleChange(updatedContent) {
+  function handleChange(updatedContent, previousContent, patchResult) {
     // content is an object { json: JSON } | { text: string }
-    console.log('onChange: ', updatedContent)
+    console.log('onChange: ', updatedContent, previousContent, patchResult)
     content = updatedContent
   }
 </script>
@@ -134,9 +134,9 @@ Browser example loading the ES module:
         target: document.getElementById('jsoneditor'),
         props: {
           content,
-          onChange: (updatedContent) => {
+          onChange: (updatedContent, previousContent, patchResult) => {
             // content is an object { json: JSON } | { text: string }
-            console.log('onChange', updatedContent)
+            console.log('onChange', updatedContent, previousContent, patchResult)
             content = updatedContent
           }
         }
@@ -174,9 +174,9 @@ const editor = new JSONEditor({
   target: document.getElementById('jsoneditor'),
   props: {
     content,
-    onChange: (updatedContent) => {
+    onChange: (updatedContent, previousContent, patchResult) => {
       // content is an object { json: JSON } | { text: string }
-      console.log('onChange', updatedContent)
+      console.log('onChange', updatedContent, previousContent, patchResult)
     }
   }
 })
diff --git a/package-lock.json b/package-lock.json
index 9e6d3a6e..9dca16c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "debug": "^4.3.2",
         "diff-sequences": "^27.0.6",
         "immutable-json-patch": "^1.1.2",
+        "jmespath": "0.15.0",
         "json-source-map": "^0.6.1",
         "jsonrepair": "^2.2.1",
         "lodash-es": "^4.17.21",
@@ -3470,6 +3471,14 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/jmespath": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz",
+      "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8457,6 +8466,11 @@
         "supports-color": "^7.0.0"
       }
     },
+    "jmespath": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz",
+      "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index 8322587c..efa95c17 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "debug": "^4.3.2",
     "diff-sequences": "^27.0.6",
     "immutable-json-patch": "^1.1.2",
+    "jmespath": "^0.15.0",
     "json-source-map": "^0.6.1",
     "jsonrepair": "^2.2.1",
     "lodash-es": "^4.17.21",
diff --git a/src/lib/components/JSONEditor.svelte b/src/lib/components/JSONEditor.svelte
index 3352a177..100b92ed 100644
--- a/src/lib/components/JSONEditor.svelte
+++ b/src/lib/components/JSONEditor.svelte
@@ -10,6 +10,7 @@
   import AbsolutePopup from './modals/popup/AbsolutePopup.svelte'
   import CodeMode from './modes/codemode/CodeMode.svelte'
   import TreeMode from './modes/treemode/TreeMode.svelte'
+  import { lodashQueryLanguage } from '$lib/plugins/query/lodashQueryLanguage'
 
   // TODO: document how to enable debugging in the readme: localStorage.debug="jsoneditor:*", then reload
   const debug = createDebug('jsoneditor:Main')
@@ -31,6 +32,15 @@
   export let navigationBar = true
   export let validator = null
 
+  /** @type {QueryLanguage[]} */
+  export let queryLanguages
+
+  /** @type {string} */
+  export let queryLanguageId
+
+  /** @type {(queryLanguageId: string) => void} */
+  export let onChangeQueryLanguage
+
   /** @type {((content: Content, previousContent: Content, patchResult: JSONPatchResult | null) => void) | null} */
   export let onChange = null
 
@@ -281,6 +291,9 @@
             {mainMenuBar}
             {navigationBar}
             {validator}
+            {queryLanguages}
+            {queryLanguageId}
+            {onChangeQueryLanguage}
             onChange={handleChangeText}
             onSwitchToTreeMode={handleSwitchToTreeMode}
             {onError}
@@ -298,6 +311,9 @@
             {mainMenuBar}
             {navigationBar}
             {validator}
+            {queryLanguages}
+            {queryLanguageId}
+            {onChangeQueryLanguage}
             {onError}
             onChange={handleChange}
             onRequestRepair={handleRequestRepair}
diff --git a/src/lib/components/modals/TransformModal.scss b/src/lib/components/modals/TransformModal.scss
index a71c67d4..6c110b35 100644
--- a/src/lib/components/modals/TransformModal.scss
+++ b/src/lib/components/modals/TransformModal.scss
@@ -5,7 +5,19 @@
   .description {
     color: $dark-gray;
 
-    code {
+    :global(p) {
+      margin: $padding 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    :global(code) {
       background: $background-gray;
       font-family: $font-family-mono;
       font-size: $font-size-mono;
diff --git a/src/lib/components/modals/TransformModal.svelte b/src/lib/components/modals/TransformModal.svelte
index f4f1000f..704d5ca3 100644
--- a/src/lib/components/modals/TransformModal.svelte
+++ b/src/lib/components/modals/TransformModal.svelte
@@ -3,7 +3,6 @@
 <script>
   import { uniqueId } from '../../utils/uniqueId.js'
   import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'
-  import * as _ from 'lodash-es'
   import { debounce, isEmpty } from 'lodash-es'
   import { getContext } from 'svelte'
   import Icon from 'svelte-awesome'
@@ -18,12 +17,25 @@
   export let id = 'transform-modal-' + uniqueId()
   export let json
   export let selectedPath = []
+
+  /** @type {QueryLanguage[]} */
+  export let queryLanguages
+
+  /** @type {string} */
+  export let queryLanguageId
+
+  /** @type {(queryLanguageId: string) => void} */
+  export let onChangeQueryLanguage // TODO: implement a dropdown to change the selected query language
+
   export let onTransform
   export let indentation = 2
 
   $: selectedJson = getIn(json, selectedPath)
 
-  const DEFAULT_QUERY = 'function query (data) {\n  return data\n}'
+  function getSelectedQueryLanguage() {
+    // TODO: log a console warning when the queryLanguage is not found
+    return queryLanguages.find((item) => item.id === queryLanguageId) || queryLanguages[0]
+  }
 
   const { close } = getContext('simple-modal')
 
@@ -31,7 +43,7 @@
 
   const state = transformModalState[stateId] || {}
 
-  let query = state.query || DEFAULT_QUERY
+  let query = state.query || getSelectedQueryLanguage().createQuery(json, {})
   let previewHasError = false
   let preview = ''
 
@@ -45,15 +57,6 @@
   let sortDirection = state.sortDirection || null
   let pickFields = state.pickFields || null
 
-  function evalTransform(json, query) {
-    // FIXME: replace unsafe new Function with a JS based query language
-    //  As long as we don't persist or fetch queries, there is no security risk.
-    // TODO: only import the most relevant subset of lodash instead of the full library?
-    // eslint-disable-next-line no-new-func
-    const queryFn = new Function('_', `'use strict'; return (${query})`)(_)
-    return queryFn(json)
-  }
-
   function updateQuery(newQuery) {
     // console.log('updated query by wizard', newQuery)
     query = newQuery
@@ -61,7 +64,7 @@
 
   function previewTransform(json, query) {
     try {
-      const jsonTransformed = evalTransform(json, query)
+      const jsonTransformed = getSelectedQueryLanguage().executeQuery(json, query)
 
       preview = truncate(JSON.stringify(jsonTransformed, null, indentation), MAX_PREVIEW_CHARACTERS)
       previewHasError = false
@@ -79,7 +82,7 @@
 
   function handleTransform() {
     try {
-      const jsonTransformed = evalTransform(selectedJson, query)
+      const jsonTransformed = getSelectedQueryLanguage().executeQuery(selectedJson, query)
 
       onTransform([
         {
@@ -127,13 +130,7 @@
   <Header title="Transform" />
   <div class="contents">
     <div class="description">
-      Enter a JavaScript function to filter, sort, or transform the data.
-    </div>
-    <div class="description">
-      You can use <a href="https://lodash.com" target="_blank" rel="noopener noreferrer">Lodash</a>
-      functions like <code>_.map</code>, <code>_.filter</code>,
-      <code>_.orderBy</code>, <code>_.sortBy</code>, <code>_.groupBy</code>,
-      <code>_.pick</code>, <code>_.uniq</code>, <code>_.get</code>, etcetera.
+      {@html getSelectedQueryLanguage().description}
     </div>
 
     <div class="label">Path</div>
@@ -162,6 +159,7 @@
           bind:pickFields
           json={selectedJson}
           onQuery={updateQuery}
+          createQuery={getSelectedQueryLanguage().createQuery}
         />
       {:else}
         (Only available for arrays, not for objects)
@@ -169,7 +167,7 @@
     {/if}
 
     <div class="label">Query</div>
-    <textarea class="query" bind:value={query} />
+    <textarea class="query" spellcheck="false" bind:value={query} />
 
     <div class="label">Preview</div>
     <textarea class="preview" class:error={previewHasError} bind:value={preview} readonly />
diff --git a/src/lib/components/modals/TransformWizard.svelte b/src/lib/components/modals/TransformWizard.svelte
index 8444ce16..28d7ffd3 100644
--- a/src/lib/components/modals/TransformWizard.svelte
+++ b/src/lib/components/modals/TransformWizard.svelte
@@ -4,11 +4,11 @@
   import Select from 'svelte-select'
   import { getNestedPaths } from '../../utils/arrayUtils.js'
   import { stringifyPath } from '../../utils/pathUtils.js'
-  import { createQuery } from '../../logic/jsCreateQuery.js'
   import { isEmpty, isEqual } from 'lodash-es'
 
   export let json
   export let onQuery
+  export let createQuery
 
   // fields
   export let filterField
diff --git a/src/lib/components/modes/codemode/CodeMode.svelte b/src/lib/components/modes/codemode/CodeMode.svelte
index c9741cfd..d2f1c9c2 100644
--- a/src/lib/components/modes/codemode/CodeMode.svelte
+++ b/src/lib/components/modes/codemode/CodeMode.svelte
@@ -38,6 +38,15 @@
   /** @type {((text: string, previousText: string) => void) | null} */
   export let onChange = null
 
+  /** @type {QueryLanguage[]} */
+  export let queryLanguages
+
+  /** @type {string} */
+  export let queryLanguageId
+
+  /** @type {(queryLanguageId: string) => void} */
+  export let onChangeQueryLanguage
+
   export let onSwitchToTreeMode = () => {}
   export let onError
   export let onFocus = () => {}
@@ -273,6 +282,9 @@
           json: json,
           selectedPath,
           indentation,
+          queryLanguages,
+          queryLanguageId,
+          onChangeQueryLanguage,
           onTransform: onTransform
             ? (operations) => {
                 onTransform({
diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
index 948a09e3..9847d092 100644
--- a/src/lib/components/modes/treemode/TreeMode.svelte
+++ b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -114,6 +114,16 @@
   export let mainMenuBar = true
   export let navigationBar = true
   export let validator = null
+
+  /** @type {QueryLanguage[]} */
+  export let queryLanguages
+
+  /** @type {string} */
+  export let queryLanguageId
+
+  /** @type {(queryLanguageId: string) => void} */
+  export let onChangeQueryLanguage
+
   export let visible = true
   export let indentation = 2
   export let onError
@@ -1148,6 +1158,9 @@
         json: json,
         selectedPath,
         indentation,
+        queryLanguages,
+        queryLanguageId,
+        onChangeQueryLanguage,
         onTransform: onTransform
           ? (operations) => {
               onTransform({
diff --git a/src/lib/config.js b/src/lib/config.js
index e9cd89cf..a7c333cb 100644
--- a/src/lib/config.js
+++ b/src/lib/config.js
@@ -8,6 +8,7 @@ export const viteOptimizeDeps = [
   'classnames',
   'debug',
   'diff-sequences',
+  'jmespath', // TODO: double check whether jmespath dep is necessary here
   'json-source-map',
   'natural-compare-lite'
 ]
diff --git a/src/lib/index.js b/src/lib/index.js
index c2f25c9c..09c82647 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -6,6 +6,8 @@ export const JSONEditor = _JSONEditor
 
 // plugins
 export { createAjvValidator } from './plugins/createAjvValidator.js'
+export { lodashQueryLanguage } from './plugins/query/lodashQueryLanguage.js'
+export { jmespathQueryLanguage } from './plugins/query/jmespathQueryLanguage.js'
 
 // utils
 export const SortModal = _SortModal
diff --git a/src/lib/plugins/query/jmespathQueryLanguage.js b/src/lib/plugins/query/jmespathQueryLanguage.js
new file mode 100644
index 00000000..39042d93
--- /dev/null
+++ b/src/lib/plugins/query/jmespathQueryLanguage.js
@@ -0,0 +1,198 @@
+import jmespath from 'jmespath'
+import { getIn } from 'immutable-json-patch'
+
+const description = `
+<p>
+  Enter a <a href="https://jmespath.org" target="_blank" rel="noopener noreferrer">JMESPath</a> query 
+  to filter, sort, or transform the JSON data.
+</p>
+<p>
+ To learn JMESPath, go to <a href="https://jmespath.org/tutorial.html" target="_blank" rel="noopener noreferrer">the interactive tutorial</a>.
+</p>
+`
+
+/** @type {QueryLanguage} */
+export const jmespathQueryLanguage = {
+  id: 'jmespath',
+  name: 'JMESPath',
+  description: description,
+  createQuery,
+  executeQuery
+}
+
+/**
+ * Build a JMESPath query based on query options coming from the wizard
+ * @param {JSON} json   The JSON document for which to build the query.
+ *                      Used for context information like determining
+ *                      the type of values (string or number)
+ * @param {QueryLanguageOptions} queryOptions
+ * @return {string} Returns a query (as string)
+ */
+export function createQuery(json, queryOptions) {
+  const { sort, filter, projection } = queryOptions
+  let query = ''
+
+  if (filter) {
+    const examplePath = filter.field !== '@' ? ['0'].concat(parsePath('.' + filter.field)) : ['0']
+    const exampleValue = getIn(json, examplePath)
+    const value1 = typeof exampleValue === 'string' ? filter.value : parseString(filter.value)
+
+    query +=
+      '[? ' + filter.field + ' ' + filter.relation + ' ' + '`' + JSON.stringify(value1) + '`' + ']'
+  } else {
+    query += Array.isArray(json) ? '[*]' : '@'
+  }
+
+  if (sort) {
+    if (sort.direction === 'desc') {
+      query += ' | reverse(sort_by(@, &' + sort.field + '))'
+    } else {
+      query += ' | sort_by(@, &' + sort.field + ')'
+    }
+  }
+
+  if (projection) {
+    if (query[query.length - 1] !== ']') {
+      query += ' | [*]'
+    }
+
+    if (projection.fields.length === 1) {
+      query += '.' + projection.fields[0]
+    } else if (projection.fields.length > 1) {
+      query +=
+        '.{' +
+        projection.fields
+          .map((value) => {
+            const parts = value.split('.')
+            const last = parts[parts.length - 1]
+            return last + ': ' + value
+          })
+          .join(', ') +
+        '}'
+    } else {
+      // values.length === 0
+      // ignore
+    }
+  }
+
+  return query
+}
+
+/**
+ * Execute a JMESPath query
+ * @param {JSON} json
+ * @param {string} query
+ * @return {JSON} Returns the transformed JSON
+ */
+export function executeQuery(json, query) {
+  return jmespath.search(json, query)
+}
+
+// TODO: move parsePath to pathUtils.js?
+/**
+ * Parse a JSON path like '.items[3].name' into an array
+ * @param {string} jsonPath
+ * @return {Array}
+ */
+export function parsePath(jsonPath) {
+  const path = []
+  let i = 0
+
+  function parseProperty() {
+    let prop = ''
+    while (jsonPath[i] !== undefined && /[\w$]/.test(jsonPath[i])) {
+      prop += jsonPath[i]
+      i++
+    }
+
+    if (prop === '') {
+      throw new Error('Invalid JSON path: property name expected at index ' + i)
+    }
+
+    return prop
+  }
+
+  function parseIndex(end) {
+    let name = ''
+    while (jsonPath[i] !== undefined && jsonPath[i] !== end) {
+      name += jsonPath[i]
+      i++
+    }
+
+    if (jsonPath[i] !== end) {
+      throw new Error('Invalid JSON path: unexpected end, character ' + end + ' expected')
+    }
+
+    return name
+  }
+
+  while (jsonPath[i] !== undefined) {
+    if (jsonPath[i] === '.') {
+      i++
+      path.push(parseProperty())
+    } else if (jsonPath[i] === '[') {
+      i++
+
+      if (jsonPath[i] === "'" || jsonPath[i] === '"') {
+        const end = jsonPath[i]
+        i++
+
+        path.push(parseIndex(end))
+
+        if (jsonPath[i] !== end) {
+          throw new Error("Invalid JSON path: closing quote ' expected at index " + i)
+        }
+        i++
+      } else {
+        let index = parseIndex(']').trim()
+        if (index.length === 0) {
+          throw new Error('Invalid JSON path: array value expected at index ' + i)
+        }
+        // Coerce numeric indices to numbers, but ignore star
+        index = index === '*' ? index : JSON.parse(index)
+        path.push(index)
+      }
+
+      if (jsonPath[i] !== ']') {
+        throw new Error('Invalid JSON path: closing bracket ] expected at index ' + i)
+      }
+      i++
+    } else {
+      throw new Error('Invalid JSON path: unexpected character "' + jsonPath[i] + '" at index ' + i)
+    }
+  }
+
+  return path
+}
+
+/**
+ * Cast contents of a string to the correct type.
+ * This can be a string, a number, a boolean, etc
+ * @param {String} str
+ * @return {*} castedStr
+ * @private
+ */
+export function parseString(str) {
+  if (str === '') {
+    return ''
+  }
+
+  const lower = str.toLowerCase()
+  if (lower === 'null') {
+    return null
+  }
+  if (lower === 'true') {
+    return true
+  }
+  if (lower === 'false') {
+    return false
+  }
+
+  const num = Number(str) // will nicely fail with '123ab'
+  const numFloat = parseFloat(str) // will nicely fail with '  '
+  if (!isNaN(num) && !isNaN(numFloat)) {
+    return num
+  }
+
+  return str
+}
diff --git a/src/lib/plugins/query/jmespathQueryLanguage.test.js b/src/lib/plugins/query/jmespathQueryLanguage.test.js
new file mode 100644
index 00000000..47860794
--- /dev/null
+++ b/src/lib/plugins/query/jmespathQueryLanguage.test.js
@@ -0,0 +1,67 @@
+import assert from 'assert'
+import { parsePath, parseString } from './jmespathQueryLanguage.js'
+
+describe('jmespathQueryLanguage', () => {
+  describe('jsonPath', () => {
+    it('should parse a json path', () => {
+      assert.deepStrictEqual(parsePath(''), [])
+      assert.deepStrictEqual(parsePath('.foo'), ['foo'])
+      assert.deepStrictEqual(parsePath('.foo.bar'), ['foo', 'bar'])
+      assert.deepStrictEqual(parsePath('.foo[2]'), ['foo', 2])
+      assert.deepStrictEqual(parsePath('.foo[2].bar'), ['foo', 2, 'bar'])
+      assert.deepStrictEqual(parsePath('.foo["prop with spaces"]'), ['foo', 'prop with spaces'])
+      assert.deepStrictEqual(
+        parsePath(".foo['prop with single quotes as outputted by ajv library']"),
+        ['foo', 'prop with single quotes as outputted by ajv library']
+      )
+      assert.deepStrictEqual(parsePath('.foo["prop with . dot"]'), ['foo', 'prop with . dot'])
+      assert.deepStrictEqual(parsePath('.foo["prop with ] character"]'), [
+        'foo',
+        'prop with ] character'
+      ])
+      assert.deepStrictEqual(parsePath('.foo[*].bar'), ['foo', '*', 'bar'])
+      assert.deepStrictEqual(parsePath('[2]'), [2])
+    })
+
+    it('should throw an exception in case of an invalid path', () => {
+      assert.throws(() => {
+        parsePath('.')
+      }, /Invalid JSON path: property name expected at index 1/)
+      assert.throws(() => {
+        parsePath('[')
+      }, /Invalid JSON path: unexpected end, character ] expected/)
+      assert.throws(() => {
+        parsePath('[]')
+      }, /Invalid JSON path: array value expected at index 1/)
+      assert.throws(() => {
+        parsePath('.foo[  ]')
+      }, /Invalid JSON path: array value expected at index 7/)
+      assert.throws(() => {
+        parsePath('.[]')
+      }, /Invalid JSON path: property name expected at index 1/)
+      assert.throws(() => {
+        parsePath('["23]')
+      }, /Invalid JSON path: unexpected end, character " expected/)
+      assert.throws(() => {
+        parsePath('.foo bar')
+      }, /Invalid JSON path: unexpected character " " at index 4/)
+    })
+  })
+
+  it('should parse a string', () => {
+    assert.strictEqual(parseString('foo'), 'foo')
+    assert.strictEqual(parseString('234foo'), '234foo')
+    assert.strictEqual(parseString('  234'), 234)
+    assert.strictEqual(parseString('234  '), 234)
+    assert.strictEqual(parseString('2.3'), 2.3)
+    assert.strictEqual(parseString('null'), null)
+    assert.strictEqual(parseString('true'), true)
+    assert.strictEqual(parseString('false'), false)
+    assert.strictEqual(parseString('+1'), 1)
+    assert.strictEqual(parseString(' '), ' ')
+    assert.strictEqual(parseString(''), '')
+    assert.strictEqual(parseString('"foo"'), '"foo"')
+    assert.strictEqual(parseString('"2"'), '"2"')
+    assert.strictEqual(parseString("'foo'"), "'foo'")
+  })
+})
diff --git a/src/lib/logic/jsCreateQuery.js b/src/lib/plugins/query/lodashQueryLanguage.js
similarity index 55%
rename from src/lib/logic/jsCreateQuery.js
rename to src/lib/plugins/query/lodashQueryLanguage.js
index a7197238..f8327992 100644
--- a/src/lib/logic/jsCreateQuery.js
+++ b/src/lib/plugins/query/lodashQueryLanguage.js
@@ -1,6 +1,33 @@
+import * as _ from 'lodash-es'
 import { isEmpty, last } from 'lodash-es'
 
-export function createQuery(json, queryOptions) {
+const description = `
+<p>
+  Enter a JavaScript function to filter, sort, or transform the data.
+</p>
+<p>
+  You can use <a href="https://lodash.com" target="_blank" rel="noopener noreferrer">Lodash</a>
+  functions like <code>_.map</code>, <code>_.filter</code>,
+  <code>_.orderBy</code>, <code>_.sortBy</code>, <code>_.groupBy</code>,
+  <code>_.pick</code>, <code>_.uniq</code>, <code>_.get</code>, etcetera.
+</p>
+`
+
+/** @type {QueryLanguage} */
+export const lodashQueryLanguage = {
+  id: 'lodash',
+  name: 'Lodash',
+  description,
+  createQuery,
+  executeQuery
+}
+
+/**
+ * @param {JSON} json
+ * @param {QueryLanguageOptions} queryOptions
+ * @returns {string}
+ */
+function createQuery(json, queryOptions) {
   const { filter, sort, projection } = queryOptions
   const queryParts = []
 
@@ -42,3 +69,17 @@ export function createQuery(json, queryOptions) {
 
   return `function query (data) {\n${queryParts.join('')}}`
 }
+
+/**
+ * @param {JSON} json
+ * @param {string} query
+ * @returns {JSON}
+ */
+function executeQuery(json, query) {
+  // FIXME: replace unsafe new Function with a JS based query language
+  //  As long as we don't persist or fetch queries, there is no security risk.
+  // TODO: only import the most relevant subset of lodash instead of the full library?
+  // eslint-disable-next-line no-new-func
+  const queryFn = new Function('_', `'use strict'; return (${query})`)(_)
+  return queryFn(json)
+}
diff --git a/src/lib/types.js b/src/lib/types.js
index 6146b55e..89f04892 100644
--- a/src/lib/types.js
+++ b/src/lib/types.js
@@ -174,3 +174,28 @@
  * @typedef {{start: number, end: number}} Section
  *  Start included, end excluded
  */
+
+/**
+ * @typedef {Object} QueryLanguage
+ * @property {string} id     A unique identifier
+ * @property {string} name   Short, human readable name
+ * @property {string} description
+ * @property {(json: JSON, queryOptions: QueryLanguageOptions) => string} createQuery
+ * @property {(json: JSON, query: string) => JSON} executeQuery
+ */
+
+/**
+ * @typedef {Object} QueryLanguageOptions
+ * @property {{
+ *   field: string,
+ *   relation: '==' | '!=' | '<' | '<=' | '>' | '>=',
+ *   value: string
+ * }} filter
+ * @property {{
+ *   field: string,
+ *   direction: 'asc' | 'desc'
+ * }} sort
+ * @property {{
+ *   fields: string[]
+ * }} projection
+ */
diff --git a/src/routes/development.svelte b/src/routes/development.svelte
index 43deb913..a4f7c151 100644
--- a/src/routes/development.svelte
+++ b/src/routes/development.svelte
@@ -4,9 +4,10 @@
 </script>
 
 <script lang="ts">
-  import { createAjvValidator, JSONEditor } from '$lib'
+  import { createAjvValidator, JSONEditor, jmespathQueryLanguage, lodashQueryLanguage } from '$lib'
   import { useLocalStorage } from '$lib/utils/localStorageUtils.js'
   import { range } from 'lodash-es'
+  import Select from 'svelte-select'
 
   let content = {
     text: undefined,
@@ -55,6 +56,8 @@
   }
 
   const validator = createAjvValidator(schema)
+  const queryLanguages = [lodashQueryLanguage, jmespathQueryLanguage]
+  let queryLanguageId = queryLanguages[0].value
 
   let text = undefined
 
@@ -89,6 +92,11 @@
   function onChangeMode(mode) {
     console.log('onChangeMode', mode)
   }
+
+  function onChangeQueryLanguage(id) {
+    // TODO implement
+    console.log('onChangeQueryLanguage', id)
+  }
 </script>
 
 <svelte:head>
@@ -117,6 +125,13 @@
       <input type="checkbox" bind:checked={$readOnly} /> Read-only
     </label>
   </p>
+  <p>
+    Query language: <select bind:value={queryLanguageId}>
+      {#each queryLanguages as queryLanguage}
+        <option value={queryLanguage.id}>{queryLanguage.name}</option>
+      {/each}
+    </select>
+  </p>
   <p>
     <button
       on:click={() => {
@@ -235,6 +250,9 @@
             readOnly={$readOnly}
             {indentation}
             validator={$validate ? validator : undefined}
+            {queryLanguages}
+            {queryLanguageId}
+            {onChangeQueryLanguage}
             {onRenderMenu}
             onChange={onChangeTree}
             {onChangeMode}
@@ -270,6 +288,9 @@
             readOnly={$readOnly}
             {indentation}
             validator={$validate ? validator : undefined}
+            {queryLanguages}
+            {queryLanguageId}
+            {onChangeQueryLanguage}
             {onRenderMenu}
             onChange={onChangeCode}
             {onChangeMode}