@es-joy/jsoe 0.2.0 → 0.4.0

package/src/utils/dialogs.js

@@ -1,7 +1,12 @@
 /* eslint-disable promise/avoid-new */
-import {jml, nbsp} from '../../vendor/jamilih/dist/jml-es.js';
+import {jml, nbsp, body} from '../vendor-imports.js';
 import {$e} from './templateUtils.js';
 
+/**
+ * @typedef {{[key: string]: string}} Locale
+ */
+
+/** @type {Locale} */
 const localeStrings = {
   submit: 'Submit',
   cancel: 'Cancel',
@@ -10,19 +15,39 @@ const localeStrings = {
 
 // Todo: i18nize
 const dialogs = {
+  /** @type {Locale} */
+  localeStrings: {},
+  /**
+   * @param {Locale} [locale={}]
+   * @returns {void}
+   */
   setLocale (locale = {}) {
     this.localeStrings = {...localeStrings, ...locale};
   },
+
+  /**
+   * @typedef {object} MakeDialogArgs
+   * @property {import('jamilih').JamilihAttributes} [atts={}]
+   * @property {import('jamilih').JamilihChildren} [children=[]]
+   * @property {import('jamilih').EventHandler} [close]
+   * @property {boolean} [remove=true]
+   */
+  /**
+   * @param {MakeDialogArgs} cfg
+   * @returns {HTMLDialogElement}
+   */
   makeDialog ({atts = {}, children = [], close, remove = true} = {}) {
     if (close) {
       if (!atts.$on) {
         atts.$on = {};
       }
-      if (!atts.$on.close) {
+      if (!('close' in atts.$on)) {
         atts.$on.close = close;
       }
     }
-    const dialog = jml('dialog', atts, children, document.body);
+    const dialog = /** @type {HTMLDialogElement} */ (
+      jml('dialog', atts, children, body)
+    );
     dialog.showModal();
     if (remove) {
       dialog.addEventListener('close', () => {
@@ -31,35 +56,37 @@ const dialogs = {
     }
     return dialog;
   },
-  makeSubmitDialog ({submit, submitClass = 'submit', ...args}) {
-    const dialog = this.makeCancelDialog(args);
-    $e(dialog, `button.${args.cancelClass || 'cancel'}`).before(
-      jml('button', {
-        class: submitClass,
-        $on: {
-          click (e) {
-            submit.call(this, {e, dialog});
-          }
-        }
-      }, [this.localeStrings.submit]),
-      nbsp.repeat(2)
-    );
-    return dialog;
-  },
+  /**
+   * @typedef {object} MakeCancelArgs
+   * @property {(
+   *   info: {e: Event, dialog: HTMLDialogElement}
+   * ) => boolean} cancel
+   * @property {string} cancelClass
+   * @property {string} submitClass
+   * @property {...MakeDialogArgs} args
+   */
+  /**
+   * @param {MakeCancelArgs} cfg
+   * @returns {HTMLDialogElement}
+   */
   makeCancelDialog ({
-    submit, // Don't pass this on to `args` if present
     cancel,
     cancelClass = 'cancel', submitClass = 'submit',
     ...args
   }) {
-    const dialog = this.makeDialog(args);
+    const dialog = this.makeDialog(/** @type {MakeDialogArgs} */ (args));
     jml('div', {class: submitClass}, [
       ['br'], ['br'],
       ['button', {class: cancelClass, $on: {
         click (e) {
-          e.preventDefault();
+          e?.preventDefault();
           if (cancel) {
-            if (cancel.call(this, {e, dialog}) === false) {
+            if (
+              cancel.call(
+                // eslint-disable-next-line object-shorthand -- Needed for TS
+                this, {e: /** @type {Event} */ (e), dialog}
+              ) === false
+            ) {
               return;
             }
           }
@@ -69,13 +96,45 @@ const dialogs = {
     ], dialog);
     return dialog;
   },
+  /**
+   * @param {object} cfg
+   * @param {(info: {e: Event, dialog: HTMLDialogElement}) => void} cfg.submit
+   * @param {string} [cfg.submitClass="submit"]
+   * @param {MakeCancelArgs} [cfg.args]
+   * @returns {HTMLDialogElement}
+   */
+  makeSubmitDialog ({submit, submitClass = 'submit', ...args}) {
+    const dialog = this.makeCancelDialog(/** @type {MakeCancelArgs} */ (args));
+    $e(dialog, `button.${/** @type {MakeCancelArgs} */ (
+      args
+    ).cancelClass || 'cancel'}`)?.before(
+      jml('button', {
+        class: submitClass,
+        $on: {
+          click (e) {
+            // eslint-disable-next-line object-shorthand -- Needed for TS
+            submit.call(this, {e: /** @type {Event} */ (e), dialog});
+          }
+        }
+      }, [this.localeStrings.submit]),
+      nbsp.repeat(2)
+    );
+    return dialog;
+  },
+  /**
+   * @param {string|{
+   *   submitClass?: string,
+   *   message: string|import('jamilih').JamilihArray
+   * }} message
+   * @returns {Promise<void>}
+   */
   alert (message) {
     message = typeof message === 'string' ? {message} : message;
     const {submitClass = 'submit'} = message;
-    ({message} = message);
+    const {message: outputMessage} = message;
     return new Promise((resolve, _reject) => {
-      const dialog = jml('dialog', [
-        message,
+      const dialog = /** @type {HTMLDialogElement} */ (jml('dialog', [
+        /** @type {string|import('jamilih').JamilihArray} */ (outputMessage),
         ['br'], ['br'],
         ['div', {class: submitClass}, [
           ['button', {$on: {click () {
@@ -83,14 +142,24 @@ const dialogs = {
             resolve();
           }}}, [this.localeStrings.ok]]
         ]]
-      ], document.body);
+      ], body));
       dialog.showModal();
     });
   },
+  /**
+   * @param {object} cfg
+   * @param {import('jamilih').JamilihAttributes} [cfg.atts={}]
+   * @param {string|{message: string}} cfg.message
+   * @param {string} [cfg.submitClass="submit"]
+   */
   confirm ({atts = {}, message, submitClass = 'submit'}) {
     ({message} = typeof message === 'string' ? {message} : message);
-    return new Promise((resolve, reject) => {
-      const dialog = jml('dialog', atts, [
+    return new Promise((
+      /** @type {(value?: any) => void} */
+      resolve,
+      reject
+    ) => {
+      const dialog = /** @type {HTMLDialogElement} */ (jml('dialog', atts, [
         message,
         ['br'], ['br'],
         ['div', {class: submitClass}, [
@@ -104,7 +173,7 @@ const dialogs = {
             reject(new Error('cancelled'));
           }}}, [this.localeStrings.cancel]]
         ]]
-      ], document.body);
+      ], body));
       dialog.showModal();
     });
   }

package/src/utils/jsonPointer.js

@@ -39,6 +39,10 @@ const getJSONPointerParts = (path) => {
   );
 };
 
+/**
+ * @typedef {any} ArbitraryObject
+ */
+
 /**
  * @param {ArbitraryObject} obj
  * @param {string} pathPart

package/src/utils/templateUtils.js

@@ -6,7 +6,7 @@ const U = {nbsp, upArrow, downArrow};
 
 /**
  * @param {string} sel
- * @returns {Element}
+ * @returns {Element|null}
  */
 const $ = (sel) => document.querySelector(sel);
 
@@ -19,11 +19,14 @@ const $$ = (sel) => [...document.querySelectorAll(sel)];
 /**
  * @param {Element|string} el
  * @param {string} descendentsSel
- * @returns {Element}
+ * @returns {HTMLElement|null}
  */
 const $e = (el, descendentsSel) => {
-  el = typeof el === 'string' ? $(el) : el;
-  return el.querySelector(descendentsSel);
+  const elem = typeof el === 'string' ? $(el) : el;
+  if (!elem) {
+    return null;
+  }
+  return elem.querySelector(descendentsSel);
 };
 
 /**
@@ -32,8 +35,11 @@ const $e = (el, descendentsSel) => {
  * @returns {Element[]}
  */
 const $$e = (el, descendentsSel) => {
-  el = typeof el === 'string' ? $(el) : el;
-  return [...el.querySelectorAll(descendentsSel)];
+  const elem = typeof el === 'string' ? $(el) : el;
+  if (!elem) {
+    return [];
+  }
+  return [...elem.querySelectorAll(descendentsSel)];
 };
 
 /**
@@ -41,9 +47,12 @@ const $$e = (el, descendentsSel) => {
  * @returns {void}
  */
 const removeChildren = (node) => {
-  node = typeof node === 'string' ? $(node) : node;
-  while (node.hasChildNodes()) {
-    node.lastChild.remove();
+  const nde = typeof node === 'string' ? $(node) : node;
+  if (!nde) {
+    throw new Error('Node not found!');
+  }
+  while (nde.hasChildNodes()) {
+    nde.lastChild?.remove();
   }
 };
 
@@ -76,14 +85,20 @@ const filterChildElements = (el, selectors) => {
     });
     return matchingChildElements;
   };
-  el = typeof el === 'string' ? $(el) : el;
-  let filtered = [el];
+  const elem = typeof el === 'string' ? $(el) : el;
+  if (!elem) {
+    throw new Error('Element not found!');
+  }
+  let filtered = [elem];
   selectors = Array.isArray(selectors) ? selectors : [selectors];
   selectors.forEach((sel) => {
     filtered = filtered.reduce((els, childElement) => {
+      if (!childElement) {
+        return els;
+      }
       els.push(...getMatchingChildrenForElement(childElement, sel));
       return els;
-    }, []);
+    }, /** @type {Element[]} */ ([]));
   });
   return filtered;
 };

package/src/vendor-imports.js

@@ -0,0 +1,8 @@
+export {jml, body, nbsp} from 'jamilih';
+// export {jml, body, nbsp} from '../node_modules/jamilih/dist/jml-es.js';
+
+export {
+  getJSONType,
+  Typeson, unescapeKeyPathComponent, structuredCloningThrowing
+} from 'typeson-registry';
+// } from '../node_modules/typeson-registry/dist/index.js';

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": ["es2022", "DOM"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "strict": true,
+    "target": "es6",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.js", "typings/sceditor.d.ts"],
+  "exclude": ["node_modules", "src/deepEqual.js", "src/formats/schemaOnly.js", "src/formats/schemaAndArbitrary.js"]
+}

package/typings/sceditor.d.ts

@@ -0,0 +1,20 @@
+type sceditorOptions = {
+  width: string,
+  height: string,
+  autoUpdate: boolean,
+  resizeMaxHeight: number,
+  resizeMaxWidth: number,
+  plugins: string,
+  emoticonsRoot: string,
+  style: string
+}
+type sceditorInstance = {
+  val: (val?: string) => string|void
+}
+
+declare interface SCEditor {
+  instance: ((textarea: HTMLTextAreaElement) => sceditorInstance),
+  create: (textarea: HTMLTextAreaElement, opts: sceditorOptions) => void
+}
+
+declare var sceditor: SCEditor;