jtlt 0.3.0 → 0.4.0

package/demo/codemirror.js

@@ -0,0 +1,94 @@
+import {javascript} from '@codemirror/lang-javascript';
+import {EditorView, basicSetup} from 'codemirror';
+import {xml} from '@codemirror/lang-xml';
+import {json} from '@codemirror/lang-json';
+
+/**
+ * @typedef {HTMLTextAreaElement & {
+ *   $setValue: (insert: string) => void,
+ *   $getValue: () => string
+ * }} EnhancedTextArea
+ */
+
+/** @type {Map<HTMLTextAreaElement, EditorView>} */
+const textareaToViewMap = new Map();
+
+/**
+ * @param {HTMLTextAreaElement} textarea
+ * @param {any} extensions
+ * @param {(content: string) => void} inputHandler
+ * @returns {EditorView}
+ */
+export function editorFromTextArea (textarea, extensions, inputHandler) {
+  /** @type {EditorView} */
+  let view = /** @type {EditorView} */ (textareaToViewMap.get(textarea));
+
+  /**
+   * @param {string} [val]
+   */
+  const createView = (val) => {
+    view = new EditorView({
+      doc: val ?? textarea.value,
+      extensions: [
+        basicSetup,
+        EditorView.updateListener.of((viewUpdate) => {
+          // Check if the document content has changed
+          if (viewUpdate.docChanged) {
+            const newContent = viewUpdate.state.doc.toString();
+            inputHandler(newContent);
+            // You can perform actions here based on the new content
+          }
+        }),
+        ...(extensions.javascript ? [javascript(extensions.javascript)] : []),
+        ...(extensions.xml ? [xml(extensions.xml)] : []),
+        ...(extensions.json ? [json()] : [])
+      ]
+    });
+
+    textareaToViewMap.set(textarea, view);
+    textarea.parentNode?.insertBefore(view.dom, textarea);
+    textarea.style.display = 'none';
+  };
+
+  if (textarea.previousElementSibling?.matches('.cm-editor')) {
+    const prevLang = /** @type {HTMLElement} */ (
+      textarea.previousElementSibling.querySelector('.cm-content')
+    ).dataset.language;
+    if (prevLang && prevLang in extensions) {
+      // console.log('same language');
+      return view;
+    }
+
+    const val = /** @type {EnhancedTextArea} */ (textarea).$getValue();
+    textarea.previousElementSibling.remove();
+    view.destroy();
+    createView(val);
+    // console.log('different language');
+  } else {
+    createView();
+    // console.log('new setup');
+  }
+
+  /** @type {EnhancedTextArea} */
+  (textarea).$setValue = (insert) => {
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert
+      }
+    });
+  };
+
+  /** @type {EnhancedTextArea} */
+  (textarea).$getValue = () => {
+    return view.state.doc.toString();
+  };
+
+  if (textarea.form) {
+    textarea.form.addEventListener('submit', () => {
+      textarea.value = view.state.doc.toString();
+    });
+  }
+  return view;
+}

package/demo/index.css

@@ -0,0 +1,7 @@
+.cm-editor {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+select {
+  min-width: 300px;
+}

package/demo/index.html

@@ -4,28 +4,25 @@
     <meta charset="utf-8" />
     <title>JTLT Demo</title>
     <link rel="icon" href="data:image/png;base64,iVBORw0KGgo=" />
-    <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
+    <link rel="stylesheet" href="index.css" />
     <script type="importmap">
       {
         "imports": {
-          "mocha": "../node_modules/mocha/mocha.js",
-          "chai": "../node_modules/chai/index.js",
-          "simple-get-json": "../node_modules/simple-get-json/dist/index-es.js",
-          "jhtml": "../node_modules/jhtml/src/jhtml-browser.js",
-          "jamilih": "../node_modules/jamilih/dist/jml.mjs",
-          "jsonpath-plus" :"../node_modules/jsonpath-plus/dist/index-browser-esm.js",
-          "xpath2.js": "./xpath2-placeholder.js"
+          "simple-get-json": "./vendor/simple-get-json/dist/index-es.js",
+          "jhtml": "./vendor/jhtml/src/jhtml-browser.js",
+          "jamilih": "./vendor/jamilih/dist/jml.mjs",
+          "jsonpath-plus" :"./vendor/jsonpath-plus/dist/index-browser-esm.js",
+          "xpath2.js": "./xpath2-placeholder.js",
+          "fontoxpath": "../../node_modules/fontoxpath/dist/fontoxpath.esm.js",
+          "xspattern": "../../node_modules/xspattern/dist/xspattern.esm.js",
+          "prsc": "../../node_modules/prsc/dist/prsc.esm.js",
+          "whynot": "../../node_modules/whynot/dist/whynot.esm.js",
+          "./codemirror.js": "./codemirror.esm.js"
         }
       }
     </script>
-    <script src="../node_modules/mocha/mocha.js"></script>
-    <script>
-      /* globals mocha -- Needs ESM */
-      mocha.setup('bdd');
-    </script>
     <script type="module" src="index.js"></script>
   </head>
   <body>
-    <div id="mocha"></div>
   </body>
 </html>

package/demo/index.js

@@ -1,30 +1,210 @@
-/* globals mocha, describe, it -- Should be ESM */
-import {expect} from 'chai';
-
+import {nbsp, jml, body} from 'jamilih';
 import {jtlt} from '../src/index-browser.js';
+import {editorFromTextArea} from './codemirror.js';
+
+/**
+ * @returns {Promise<void>}
+ */
+async function templateProcessor () {
+  await processTemplates();
+}
+/**
+ * @param {string} sel
+ * @returns {HTMLInputElement}
+ */
+const $i = (sel) => {
+  return /** @type {HTMLInputElement} */ (document.querySelector(sel));
+};
+/**
+ * @param {string} sel
+ * @returns {import('./codemirror.js').EnhancedTextArea}
+ */
+const $t = (sel) => {
+  return /** @type {import('./codemirror.js').EnhancedTextArea} */ (
+    document.querySelector(sel)
+  );
+};
+
+/**
+ * @returns {Promise<void>}
+ */
+async function processTemplates () {
+  $t('#output').value = '';
+  const source = $t('#source').$getValue();
+
+  let data;
+  let isJson = false;
+  data = new DOMParser().parseFromString(source, 'text/xml');
+
+  if (data.documentElement.localName === 'parsererror' &&
+    data.documentElement.namespaceURI ===
+      // eslint-disable-next-line sonarjs/no-clear-text-protocols -- Namespace
+      'http://www.mozilla.org/newlayout/xml/parsererror.xml'
+  ) {
+    try {
+      data = JSON.parse(source);
+      editorFromTextArea($t('#source'), {
+        json: {}
+      }, templateProcessor);
+    } catch (err) {
+      $t('#output').value = 'Error parsing source as either XML or JSON\n\n' +
+        new XMLSerializer().serializeToString(data) + '\n\n' +
+      /** @type {Error} */ (err).message;
+      return;
+    }
+    isJson = true;
+  } else {
+    editorFromTextArea($t('#source'), {
+      xml: {}
+    }, templateProcessor);
+  }
+
+  let templates;
+  try {
+    // eslint-disable-next-line no-eval -- Todo: input to jsep?
+    templates = eval($t('#jtltTemplates').$getValue());
+    if (!templates || !templates.length) {
+      throw new Error('Bad templates');
+    }
+  } catch {
+    $t('#output').value =
+      'Error parsing jtlt templates; must be an array of templates.';
+    return;
+  }
 
-describe('jtlt', () => {
-  it('performs a string transformation', async () => {
-    const result = await jtlt({
-      data: new DOMParser().parseFromString(
-        `<div type="questions-answers">
-          <p n="1">Some text</p>
-          <p n="2">More text</p>
-        </div>`,
-        'text/xml'
-      ),
-      engineType: 'xpath',
-      outputType: 'string',
-      templates: [{
-        path: '//*[@type="questions-answers"]/p',
-        template (p) {
-          this.valueOf('@n');
-          this.valueOf('./text()');
+  let result;
+
+  if ($i('#forQuery').checked) {
+    try {
+      result = isJson
+        ? await jtlt({
+          data,
+          engineType: 'jsonpath',
+          outputType: 'string',
+          forQuery: templates
+        })
+        : await jtlt({
+          data,
+          engineType: 'xpath',
+          xpathVersion: 3.1,
+          outputType: 'string',
+          forQuery: templates
+        });
+    } catch (err) {
+      $t('#output').value = 'Error executing jtlt()\n\n' +
+      /** @type {Error} */ (err).message;
+      return;
+    }
+  } else {
+    try {
+      result = isJson
+        ? await jtlt({
+          data,
+          engineType: 'jsonpath',
+          outputType: 'string',
+          templates
+        })
+        : await jtlt({
+          data,
+          engineType: 'xpath',
+          xpathVersion: 3.1,
+          outputType: 'string',
+          templates
+        });
+    } catch (err) {
+      $t('#output').value = 'Error executing jtlt()\n\n' +
+      /** @type {Error} */ (err).message;
+      return;
+    }
+  }
+
+  $t('#output').value = result;
+}
+
+jml('section', [
+  ['select', {$on: {
+    click () {
+      if (/** @type {HTMLSelectElement} */ (this).value === 'xml') {
+        $t('#source').$setValue(`<root></root>`);
+        $t('#jtltTemplates').$setValue($i('#forQuery').checked
+          ? `['//*', function () {
+  this.string('test123');
+}]`
+          : `[
+  ['//*', function () {
+    this.string('test123');
+  }]
+]`);
+      } else if (/** @type {HTMLSelectElement} */ (this).value === 'json') {
+        $t('#source').$setValue(`{
+  "a": 5,
+  "b": {
+    "c": 7
+  }
+}`);
+        $t('#jtltTemplates').$setValue($i('#forQuery').checked
+          ? `['$.b', function (o) {
+  this.string(o.c);
+}]`
+          : `[
+  {
+    path: '$',
+    template () {
+      this.applyTemplates('$.b');
+    }
+  },
+  ['$.b', function (o) {
+    this.string(o.c);
+  }]
+]`);
+      }
+    }
+  }}, [
+    ['option', [
+      '(Populate...)'
+    ]],
+    ['option', {value: 'xml'}, [
+      'XML/XPath example 1'
+    ]],
+    ['option', {value: 'json'}, [
+      'JSON/JSONPath example 1'
+    ]]
+  ]],
+  nbsp.repeat(2),
+  ['label', [
+    ['input', {
+      id: 'forQuery', type: 'checkbox',
+      checked: Boolean(localStorage.getItem('forQuery')),
+      $on: {
+        async click (e) {
+          if (/** @type {HTMLInputElement} */ (e.target).checked) {
+            localStorage.setItem('forQuery', 'true');
+          } else {
+            localStorage.removeItem('forQuery');
+          }
+          await processTemplates();
         }
-      }]
-    });
-    expect(result).to.equal('1Some text2More text');
-  });
-});
+      }
+    }],
+    'Use `forQuery` instead of templates'
+  ]],
+  ['br'], ['br'],
+  ['textarea', {
+    id: 'source',
+    placeholder: 'Put XML or JSON source here...'
+  }],
+
+  ['textarea', {
+    id: 'jtltTemplates',
+    placeholder: 'Put jtlt templates array here...'
+  }],
+
+  ['textarea', {id: 'output', placeholder: 'Loading...'}]
+], body);
 
-mocha.run();
+editorFromTextArea($t('#jtltTemplates'), {
+  javascript: {typescript: true}
+}, templateProcessor);
+editorFromTextArea($t('#source'), {
+  xml: {}
+}, templateProcessor);