add typedoc for api doc

.github/workflows/push_demo.yml

@@ -38,6 +38,8 @@ jobs:
         run: npm ci
       - name: Build dist files
         run: npm run build
+      - name: Build api doc
+        run: npm run build-docs-demo
       - name: Fix lib load path
         run: sed -i -e 's:./dist::' demo/demo.js
       - name: Copy lib

.gitignore

@@ -1,3 +1,5 @@
 dist/*
 node_modules/
 demo/malle.js
+docs/
+demo/api/

package.json

@@ -3,7 +3,7 @@
   "version": "2.5.2",
   "description": "Make text elements malleable, without dependencies.",
   "main": "dist/main.js",
-  "typings":  "dist/main.d.ts",
+  "typings": "dist/main.d.ts",
   "repository": "https://github.com/deltablot/malle",
   "author": "Nicolas CARPi @ Deltablot>",
   "license": "MIT",
@@ -15,6 +15,9 @@
   ],
   "scripts": {
     "build": "tsc && cp -v dist/main.js demo/malle.js",
+    "watch-docs": "typedoc --commentStyle All --watch src/main.ts",
+    "build-docs": "typedoc --commentStyle All src/main.ts",
+    "build-docs-demo": "typedoc --commentStyle All --out demo/api src/main.ts",
     "lint": "eslint src",
     "dev-server": "docker run --rm -it --name malle-dev -p 4813:80 -v $(pwd):/usr/share/nginx/html:ro -d nginx:stable-alpine",
     "pre-commit": "npm run lint && npm run test",
@@ -33,6 +36,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "jest": "^27.5.1",
     "ts-jest": "^27.1.3",
+    "typedoc": "^0.25.8",
     "typescript": "^4.0.2"
   }
 }

src/main.ts

@@ -5,6 +5,7 @@
  * https://github.com/deltablot/malle
  */
 
+// The `InputType` will set the `type` attribute of the generated input element.
 export enum InputType {
   Color = 'color',
   Date = 'date',
@@ -18,51 +19,94 @@ export enum InputType {
   Url = 'url',
 }
 
+// List of possible trigger events
 export enum EventType {
+  // A mouse click triggers the event (default)
   Click = 'click',
+  // Trigger malle when the mouse starts hovering the element
   Mouseenter = 'mouseenter',
+  // Trigger malle when the mouse stops hovering the element
   Mouseover = 'mouseover',
 }
 
+// List of possible action that can be defined at different moments
 export enum Action {
+  // Submit the form
   Submit = 'submit',
+  // Cancel change and revert to initial element
   Cancel = 'cancel',
+  // Do nothing
   Ignore = 'ignore',
 }
 
+// Structure for the select element options
 export interface SelectOptions {
+  // Value of the option.
   value?: string;
+  // Displayed text of the option.
   text?: string;
+  // Is this option selected?
   selected?: boolean;
 }
 
+// Configuration object for the Malle class.
 export interface Options {
+  // Function to execute after all the other events.
   after?(original: HTMLElement, event:Event, value: string): boolean;
+  /**
+   * This function will be called before anything else is done, once the trigger event has been fired.
+   * If it returns something else than `true`, the edition will be canceled.
+   */
   before?(original: HTMLElement, event:Event): boolean;
+  // The text displayed on Cancel button.
   cancel?: string;
+  // The classes added to Cancel button.
   cancelClasses?: Array<string>;
+  // The classes added to the form element.
   formClasses?: Array<string>;
+  // The classes added to the input element.
   inputClasses?: Array<string>,
+  // Enabling debug mode will produce verbose output in the console.
   debug?: boolean;
+  // This is where you define the type of event that will trigger malle.
   event?: EventType;
+  // Should the newly created input grab focus?
   inputType?: InputType;
+  // This is the user function that is called on submit.
   focus?: boolean;
+  // Define the type of the input element.
   fun(value: string, original: HTMLElement, event:Event, input: HTMLInputElement|HTMLSelectElement): Promise<string>;
+  // Start listening immediatly or not.
   listenNow?: boolean;
+  // HTML selector to target malleable elements on the page.
   listenOn?: string;
+  // What Action should be taken when focus of the input is lost.
   onBlur?: Action;
+  // This function runs right after the form is created.
   onEdit?(original: HTMLElement, event:Event, input: HTMLInputElement|HTMLSelectElement): boolean | Promise<boolean>;
+  // What Action should be taken when the Enter key is pressed?
   onEnter?: Action;
+  // What Action should be taken when the Escape key is pressed?
   onEscape?: Action;
+  // A text that is shown on empty input.
   placeholder?: string;
+  // Do nothing if new value is the same as the old value.
   requireDiff?: boolean;
+  // Use innerHTML instead of innerText (only use if the return value is trusted HTML).
   returnedValueIsTrustedHtml?: boolean;
+  // An array of options for InputType.Select. Can also be a Promise and fetched asynchronously.
   selectOptions?: Array<SelectOptions> | Promise<Array<SelectOptions>>;
+  // What is the name of the key to use to lookup the values in the selectOptions array?
   selectOptionsValueKey?: string;
+  // What is the name of the key to use to lookup the option text in the selectOptions array?
   selectOptionsTextKey?: string;
+  // The text on the Submit button.
   submit?: string;
+  // The classes added to the submit button.
   submitClasses?: Array<string>;
+  // The text added on hover of the malleable element. Uses the `title` attribute.
   tooltip?: string;
+  // Allow setting a different value than the current element content.
   inputValue?: string;
 }
 
@@ -84,9 +128,7 @@ export class Malle {
     this.innerFun = this.opt.returnedValueIsTrustedHtml ? 'innerHTML' : 'innerText';
   }
 
-  /**
-   * Assign defaults to options
-   */
+  // Assign defaults to options
   normalizeOptions(options: Options): Options {
     const defaultOptions = {
       after: undefined,
@@ -100,7 +142,6 @@ export class Malle {
       focus: true,
       fun: () => new Error('No user function defined!'),
       inputType: InputType.Text,
-      // don't listen for events on instanciation unless requested
       listenNow: false,
       listenOn: '[data-malleable="true"]',
       onBlur: Action.Submit,