Working eslint rules

demo/demo.html

@@ -15,18 +15,18 @@
   <script type="module" src="../dist/medblocks.js"></script>
   <script src="../node_modules/axios/dist/axios.min.js"></script>
   <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      let form = document.getElementById('form1')
-      let input = document.getElementById('input1')
+    document.addEventListener('DOMContentLoaded', () => {
+      const form = document.getElementById('form1')
+      const input = document.getElementById('input1')
       input.addEventListener('mb-input', (e) => {
         console.log(e.target.data)
       })
       form.hermes = axios.create({ baseURL: 'https://hermes-2-kbsdxvq3bq-el.a.run.app/v1' })
-      form.addEventListener('mb-submit', function (e) {
+      form.addEventListener('mb-submit', (e) => {
         e.preventDefault()
         console.log(e.detail)
       })
-      let form2 = document.getElementById('form2')
+      const form2 = document.getElementById('form2')
       form2.hermes = axios.create({ baseURL: 'https://hermes-2-kbsdxvq3bq-el.a.run.app/v1' })
       // form2.addEventListener('mb-input', (e) => {
       //   const data = e.target.data

demo/fhir_registration.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css" />
   <script type="module" src="../dist/medblocks.js"></script>
   <script>
-    document.addEventListener("DOMContentLoaded", function () {
+    document.addEventListener("DOMContentLoaded", () => {
       document.body.classList.remove("is-hidden")
     });
   </script>
@@ -66,14 +66,14 @@ <h1 class="title">Patient registration</h1>
   </section>
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script>
-    let form = document.getElementById('form')
-    let fhirServer = axios.create({
-      baseURL: "https://medblocks4covid.aidbox.app/",
-      auth: {
-        username: 'basic',
-        password: 'secret'
-      }
-    })
+    const form = document.getElementById('form')
+    const fhirServer = axios.create({
+  baseURL: "https://medblocks4covid.aidbox.app/",
+  auth: {
+    username: 'basic',
+    password: 'secret'
+  }
+})
     form.addEventListener('mb-load', async () => {
       const r = await fhirServer.get('/Patient/c8b0f871-98ed-4a5b-a977-cfa5bf0417f7')
       const imported = form.import(r.data)

demo/index.html

@@ -16,7 +16,7 @@
   </head>
 
   <script>
-    document.addEventListener('DOMContentLoaded', function () {
+    document.addEventListener('DOMContentLoaded', () => {
       console.log('onload');
       const form = document.getElementById("form1");
       form.addEventListener("mb-submit", (e) => {

medblocks.ts

@@ -2,8 +2,6 @@
 // window.customElements.define('example-comp', ExampleComp);
 import { registerIcons } from './src/internal/icons';
 
-registerIcons();
-
 import './src/medblocks/form/form';
 import './src/medblocks/form/fhirForm';
 
@@ -34,3 +32,5 @@ import './src/medblocks/repeat/repeatableHeadless';
 
 import './src/medblocks/suggestionWrapper';
 import './src/medblocks/hide';
+
+registerIcons();

package.json

@@ -80,15 +80,17 @@
     "rules": {
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": [
-        "error"
+        "warn"
       ],
       "import/no-unresolved": "off",
       "import/extensions": [
-        "error",
-        "always",
+        "off",
         {
           "ignorePackages": true
         }
+      ],
+      "import/order": [
+        "warn"
       ]
     }
   },

shoelace.ts

@@ -1,7 +1,6 @@
-import "@shoelace-style/shoelace"
+import { setBasePath } from "@shoelace-style/shoelace"
 import "./styles"
 
-import { setBasePath } from "@shoelace-style/shoelace"
 
 setBasePath(
     "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.50/dist/"

src/extension/transform.ts

@@ -300,8 +300,8 @@ const transformations: { [rmType: string]: TransformFunction } = {
 };
 
 export default (leaf: ProcessedTree) => {
-  if (leaf['inContext']) {
-    return transformations['context'](leaf);
+  if (leaf.inContext) {
+    return transformations.context(leaf);
   }
   const fn = transformations[leaf.rmType];
   if (fn) {

src/internal/decorators.ts

@@ -43,18 +43,17 @@ export function event(eventName?: string) {
 // EventEmitter to use with the @event decorator
 export class EventEmitter<T> {
   constructor(private target: HTMLElement, private eventName: string) {}
+
   emit(eventOptions?: CustomEventInit) {
     const event = new CustomEvent<T>(
       this.eventName,
-      Object.assign(
-        {
-          bubbles: true,
+      ({
+        bubbles: true,
           cancelable: true,
           composed: true,
-          detail: {}
-        },
-        eventOptions
-      )
+          detail: {},
+        ...eventOptions
+      })
     );
     this.target.dispatchEvent(event);
     return event;

src/internal/icons.ts

@@ -39,9 +39,9 @@ export function registerIcons() {
     resolver: (name: keyof typeof icons) => {
       if (icons[name]) {
         return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
-      } else {
+      } 
         return '';
-      }
+
     },
   };
 

src/medblocks/EhrElement.ts

@@ -3,37 +3,43 @@ import { event, EventEmitter, watch } from '../internal/decorators';
 import MedblockForm from './form/form';
 
 export type Variant = 'small' | 'text' | 'normal';
-/**This is an abstract base class to extend other elements from
+/** This is an abstract base class to extend other elements from
  * @fires mb-input - Dispatched when the input changes
  * @fires mb-dependency - Dispatched if dependencies are needed from an external or parent source
  * @fires mb-connect - Dispatched when the component connects
  * @fires mb-disconnect - Dispatched when the component disconnects
  */
 export default abstract class EhrElement extends LitElement {
-  /**Path of the data element. Use the VSCode extension to get the appropriate paths */
+  /** Path of the data element. Use the VSCode extension to get the appropriate paths */
   @property({ type: String, reflect: true }) path: string;
-  /**Optional label for the element */
+
+  /** Optional label for the element */
   @property({ type: String, reflect: true }) label?: string;
-  /**The prefix of the path to repeat for repeatable elements. Eg: For path "path1/path2:i/path3/path4:0" where you want to repeat on i - "path1/path2" would be the repeat prefix */
+
+  /** The prefix of the path to repeat for repeatable elements. Eg: For path "path1/path2:i/path3/path4:0" where you want to repeat on i - "path1/path2" would be the repeat prefix */
   @property({ type: String, reflect: true }) repeatprefix?: string;
-  /**The suffix of the path to repeat for repeatable elements. Eg: For path "path1/path2:i/path3/path4:0" where you want to repeat on i - "path3/path4:0" would be the repeat suffix */
+
+  /** The suffix of the path to repeat for repeatable elements. Eg: For path "path1/path2:i/path3/path4:0" where you want to repeat on i - "path3/path4:0" would be the repeat suffix */
   @property({ type: String, reflect: true }) repeatsuffix?: string;
-  /**Display variant. 'normal' by default. 'small' renders everything more compactly, 'text' displays everything in its textual representation. */
+
+  /** Display variant. 'normal' by default. 'small' renders everything more compactly, 'text' displays everything in its textual representation. */
   @property({ type: String, reflect: true }) variant: Variant = 'normal';
 
   mbForm: MedblockForm;
-  /**Data of the element. Setting this will emit an input event automatically. */
+
+  /** Data of the element. Setting this will emit an input event automatically. */
   abstract data: any;
 
   isMbElement: boolean = true;
-  /**An internal representation of type to handle serializing */
+
+  /** An internal representation of type to handle serializing */
   @property({ type: String, reflect: true })
   datatype?: string;
 
-  /**Event Emitter for mb-input */
+  /** Event Emitter for mb-input */
   @event('mb-input') _mbInput: EventEmitter<any>;
 
-  /**Function to validate the element during form submit */
+  /** Function to validate the element during form submit */
   reportValidity(): boolean {
     return true;
   }
@@ -75,7 +81,7 @@ export default abstract class EhrElement extends LitElement {
 
   _label() {
     if (this.label) return html`<p style="font-weight: 600;">${this.label}</p>`;
-    return;
+
   }
 
   // @watch('data')

src/medblocks/boolean/checkbox.ts

@@ -6,15 +6,19 @@ import EhrElement from '../EhrElement';
 @customElement('mb-checkbox')
 export default class MbCheckBox extends EhrElement {
   @property({ type: Boolean }) data: boolean | undefined = undefined;
+
   @property({ type: Boolean, reflect: true }) disabled: boolean = false;
+
   @property({ type: Boolean, reflect: true }) required: boolean = false;
+
   @property({ type: String, reflect: true }) id: string = 'checkbox';
 
   _handleChange(e: CustomEvent) {
     const checkbox = e.target as SlCheckbox;
-    this.data = checkbox.checked ? true : false;
+    this.data = !!checkbox.checked;
     this._mbInput.emit();
   }
+
   reportValidity() {
     const checked = this.shadowRoot!.querySelector('sl-checkbox') as any;
     return checked.reportValidity();

src/medblocks/codedtext/CodedTextElement.ts

@@ -23,10 +23,13 @@ export class CodedTextElement extends EhrElement {
     return '';
   }
 
-  /**Data of CodedText */
+  /** Data of CodedText */
   @property({ type: Object }) data: CodedText | string | undefined | any;
-  /**Terminology of preference. Eg: SNOMED-CT, LOINC, local (for openEHR) */
+
+  /** Terminology of preference. Eg: SNOMED-CT, LOINC, local (for openEHR) */
   @property({ type: String }) terminology: string = 'local';
+
   @property({ type: String }) value: string = '';
+
   @event('mb-input') _mbInput: EventEmitter<CodedText>;
 }

src/medblocks/codedtext/abstractSearch.ts

@@ -3,16 +3,15 @@ import SlInput from '@shoelace-style/shoelace/dist/components/input/input';
 import { until } from 'lit-html/directives/until.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { AxiosInstance } from 'axios';
+import SlMenuItem from '@shoelace-style/shoelace/dist/components/menu-item/menu-item';
 import { CodedTextElement } from './CodedTextElement';
 import MbFilter from './filter';
 import SlDropdown from './dropdown';
-import { AxiosInstance } from 'axios';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 
-import './dropdown';
 import '@shoelace-style/shoelace/dist/components/spinner/spinner';
 import '@shoelace-style/shoelace/dist/components/menu/menu';
-import '@shoelace-style/shoelace/dist/components/menu-item/menu-item';
 import '@shoelace-style/shoelace/dist/components/icon/icon';
 import '@shoelace-style/shoelace/dist/components/tag/tag';
 import '@shoelace-style/shoelace/dist/components/icon-button/icon-button';
@@ -21,7 +20,6 @@ import '@shoelace-style/shoelace/dist/components/menu-label/menu-label';
 import '@shoelace-style/shoelace/dist/components/skeleton/skeleton';
 
 import { hermesPlugin, SearchOptions, SearchResult } from './searchFunctions';
-import SlMenuItem from '@shoelace-style/shoelace/dist/components/menu-item/menu-item';
 
 export default abstract class MbSearchAbstract extends CodedTextElement {
   /** @ignore */
@@ -173,7 +171,7 @@ export default abstract class MbSearchAbstract extends CodedTextElement {
     return dependencyEvent.detail.value;
   }
 
-  /**Function to get results from an external source */
+  /** Function to get results from an external source */
   async getResults(): Promise<{
     result: TemplateResult[];
     error?: string;
@@ -425,10 +423,8 @@ export default abstract class MbSearchAbstract extends CodedTextElement {
   }
 
   get _hasValue() {
-    return (this?.data?.value && this?.data?.code) ||
-      (typeof this.data === 'string' && this.data !== '')
-      ? true
-      : false;
+    return !!((this?.data?.value && this?.data?.code) ||
+      (typeof this.data === 'string' && this.data !== ''));
   }
 
   get _display() {

src/medblocks/codedtext/buttons-multiple.ts

@@ -12,9 +12,13 @@ import { property } from 'lit-element';
 @customElement('mb-buttons-multiple')
 export default class CodedTextButtons extends CodedTextElement {
   @property({ type: Boolean, reflect: true }) required: boolean = false;
+
   @property({ type: Boolean, reflect: true }) disabled: boolean = false;
+
   @property({ type: Boolean, reflect: true }) multiple: boolean = true;
+
   @property({ type: String, reflect: true }) id: string='buttons-multiple';
+
   /** @ignore */
   static styles = css`
     .buttons {
@@ -47,6 +51,7 @@ export default class CodedTextButtons extends CodedTextElement {
     observer.observe(this, { childList: true });
     this._handleChildChange();
   }
+
   _handleChildChange() {
     this._options = [
       ...(this.querySelectorAll('mb-option') as NodeListOf<MbOption>),

src/medblocks/codedtext/buttons.ts

@@ -12,8 +12,11 @@ import { property } from 'lit-element';
 @customElement('mb-buttons')
 export default class CodedTextButtons extends CodedTextElement {
   @property({ type: Boolean, reflect: true }) required: boolean = false;
+
   @property({ type: Boolean, reflect: true }) disabled: boolean = false;
+
   @property({ type: String, reflect: true }) id: string ='buttons';
+
   /** @ignore */
   static styles = css`
     .buttons {
@@ -44,6 +47,7 @@ export default class CodedTextButtons extends CodedTextElement {
     observer.observe(this, { childList: true });
     this._handleChildChange();
   }
+
   _handleChildChange() {
     this._options = [
       ...(this.querySelectorAll('mb-option') as NodeListOf<MbOption>),
@@ -106,7 +110,7 @@ export default class CodedTextButtons extends CodedTextElement {
           )}
         </div>
         <input
-          value=${this.data?.code || ''}
+          .value=${this.data?.code || ''}
           style="transform:scale(0.025);position:absolute;top:40px;opacity:0.1"
           name="input"
           ?required=${this.required}

src/medblocks/codedtext/dropdown.ts

@@ -66,10 +66,10 @@ export default class MbDropDown extends SlDropdown {
       if (event.key === 'ArrowUp' && lastMenuItem) {
         menu?.setCurrentItem(lastMenuItem);
         lastMenuItem.focus();
-        return;
+
       }
     }
-    return;
+
     // Other keys bring focus to the menu and initiate type-to-select behavior
   }
 }

src/medblocks/codedtext/filter.ts

@@ -3,6 +3,8 @@ import { customElement, LitElement, property } from 'lit-element';
 @customElement('mb-filter')
 export default class MbFilter extends LitElement {
   @property({ type: String, reflect: true }) label: string;
+
   @property({ type: String, reflect: true }) value: string;
+
   @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 }

src/medblocks/codedtext/option.ts

@@ -3,8 +3,11 @@ import { customElement, LitElement, property } from 'lit-element';
 @customElement('mb-option')
 export default class MbOption extends LitElement {
   @property({ type: String, reflect: true }) value: string;
+
   @property({ type: String, reflect: true }) label: string;
+
   @property({ type: Number, reflect: true }) ordinal: number;
+
   @property({ type: String, reflect: true }) type: string;
 
 }