Add declaration files (.d.ts) into project

package.json

@@ -4,6 +4,7 @@
   "description": "Core components of the extensible media player for the web",
   "main": "./dist/clappr-core.js",
   "module": "./dist/clappr-core.esm.js",
+  "types": "./types/main.d.ts",
   "scripts": {
     "bundle-check": "ANALYZE_BUNDLE=true rollup --config",
     "release": "MINIMIZE=true rollup --config",
@@ -48,6 +49,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^3.0.1",
+    "@types/zepto": "^1.0.34",
     "autoprefixer": "10.4.2",
     "babel-jest": "^26.6.3",
     "clappr-zepto": "0.0.7",
@@ -69,7 +71,8 @@
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-sizes": "^1.0.4",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.5.4"
+    "rollup-plugin-visualizer": "^5.5.4",
+    "typescript": "^5.1.6"
   },
   "config": {
     "commitizen": {

src/base/base_object/base_object.js

@@ -25,13 +25,21 @@ export default class BaseObject extends Events {
    */
   constructor(options={}) {
     super(options)
+
+    /**
+     * the options
+     *
+     * @property _options
+     * @type {Object}
+     */
     this._options = options
+
+    /**
+    * a unique id prefixed with `'o'`, `o1, o232`
+    *
+    * @property uniqueId
+    * @type String
+    */
     this.uniqueId = uniqueId('o')
   }
-  /**
-  * a unique id prefixed with `'o'`, `o1, o232`
-  *
-  * @property uniqueId
-  * @type String
-  */
 }

src/base/container_plugin/container_plugin.js

@@ -15,6 +15,11 @@ export default class ContainerPlugin extends BaseObject {
   constructor(container) {
     super(container.options)
     this.container = container
+
+    /**
+     * @property enabled
+     * @type {boolean}
+     */
     this.enabled = true
     this.bindEvents()
   }

src/base/core_plugin/core_plugin.js

@@ -8,6 +8,11 @@ export default class CorePlugin extends BaseObject {
   constructor(core) {
     super(core.options)
     this.core = core
+
+    /**
+     * @property enabled
+     * @type {boolean}
+     */
     this.enabled = true
     this.bindEvents()
   }

src/base/events/events.js

@@ -9,6 +9,14 @@ const slice = Array.prototype.slice
 
 const eventSplitter = /\s+/
 
+/**
+ * @function eventsApi
+ * @param {Object} obj
+ * @param {string} action
+ * @param {string} name
+ * @param {(string[]|Function)} rest
+ * @returns {boolean}
+ */
 const eventsApi = function(obj, action, name, rest) {
   if (!name) return true
 
@@ -32,6 +40,16 @@ const eventsApi = function(obj, action, name, rest) {
   return true
 }
 
+/**
+ *
+ * @param {Object[]} events
+ * @param {Function} events[].callback
+ * @param {Object} events[].context
+ * @param {Object} events[].ctx
+ * @param {*[]} args
+ * @param {string} klass
+ * @param {string} name
+ */
 const triggerEvents = function(events, args, klass, name) {
   let ev, i = -1
   const l = events.length, a1 = args[0], a2 = args[1], a3 = args[2]
@@ -168,6 +186,10 @@ export default class Events {
     return this
   }
 
+  /**
+   * @static
+   * @param {string} eventName
+   */
   static register(eventName) {
     Events.Custom || (Events.Custom = {})
     let property = typeof eventName === 'string' && eventName.toUpperCase().trim()
@@ -181,6 +203,10 @@ export default class Events {
 
   }
 
+  /**
+   * @static
+   * @returns {*[]}
+   */
   static listAvailableCustomEvents() {
     Events.Custom || (Events.Custom = {})
     return Object.keys(Events.Custom).filter((property) => typeof Events.Custom[property] === 'string')
@@ -199,6 +225,15 @@ export default class Events {
  * this.listenTo(this.core.playback, Events.PLAYBACK_PAUSE, this.callback)
  * ```
  */
+Events.prototype.listenTo = function(obj, name, callback) {
+  const listeningTo = this._listeningTo || (this._listeningTo = {})
+  const id = obj._listenId || (obj._listenId = uniqueId('l'))
+  listeningTo[id] = obj
+  if (!callback && typeof name === 'object') callback = this
+  obj.on(name, callback, this)
+  return this
+}
+
 /**
  * listen to an event once for a given `obj`
  * @method listenToOnce
@@ -211,18 +246,14 @@ export default class Events {
  * this.listenToOnce(this.core.playback, Events.PLAYBACK_PAUSE, this.callback)
  * ```
  */
-const listenMethods = { listenTo: 'on', listenToOnce: 'once' }
-
-Object.keys(listenMethods).forEach(function(method) {
-  Events.prototype[method] = function(obj, name, callback) {
-    const listeningTo = this._listeningTo || (this._listeningTo = {})
-    const id = obj._listenId || (obj._listenId = uniqueId('l'))
-    listeningTo[id] = obj
-    if (!callback && typeof name === 'object') callback = this
-    obj[listenMethods[method]](name, callback, this)
-    return this
-  }
-})
+Events.prototype.listenToOnce = function(obj, name, callback) {
+  const listeningTo = this._listeningTo || (this._listeningTo = {})
+  const id = obj._listenId || (obj._listenId = uniqueId('l'))
+  listeningTo[id] = obj
+  if (!callback && typeof name === 'object') callback = this
+  obj.once(name, callback, this)
+  return this
+}
 
 // PLAYER EVENTS
 /**

src/base/playback/playback.js

@@ -31,14 +31,18 @@ export default class Playback extends UIObject {
     return false
   }
 
+  /**
+   * @property isAdaptive
+   * @return {boolean}
+   */
   get isAdaptive() {
     return false
   }
 
   /**
    * Determine if the playback has ended.
    * @property ended
-   * @type Boolean
+   * @type {boolean}
    */
   get ended() {
     return false
@@ -71,9 +75,21 @@ export default class Playback extends UIObject {
    */
   constructor(options, i18n, playerError) {
     super(options)
+    /**
+     * @property settings
+     * @type {Object}
+     */
     this.settings = {}
+    /**
+     * @property _i18n
+     * @type {string}
+     */
     this._i18n = i18n
     this.playerError = playerError
+    /**
+     * @property _consented
+     * @type {boolean}
+     */
     this._consented = false
   }
 

src/base/styler/styler.js

@@ -5,6 +5,21 @@
 import $ from 'clappr-zepto'
 import template from '../template'
 
+/**
+ * This callback is displayed as part of the Requester class.
+ * @callback Styler_getStypeFor
+ * @param {string} style
+ * @param {Object} options
+ * @param {string} options.baseUrl
+ */
+/**
+ * @typedef StylerType
+ * @type {object}
+ * @property {Styler_getStypeFor} getStyleFor
+ */
+/**
+ * @type {StylerType}
+ */
 const Styler = {
   getStyleFor: function(style, options={ baseUrl: '' }) {
     return $('<style class="clappr-style"></style>').html(template(style.toString())(options))

src/base/template.js

@@ -6,6 +6,16 @@
 
 // By default, Underscore uses ERB-style template delimiters, change the
 // following template settings to use alternative delimiters.
+/**
+ * @typedef SettingsTmplType
+ * @type {object}
+ * @property {RegExp} evaluate
+ * @property {RegExp} interpolate
+ * @property {RegExp} escape
+ */
+/**
+ * @type {SettingsTmplType}
+ */
 var settings = {
   evaluate    : /<%([\s\S]+?)%>/g,
   interpolate : /<%=([\s\S]+?)%>/g,
@@ -15,8 +25,10 @@ var settings = {
 // When customizing `templateSettings`, if you don't want to define an
 // interpolation, evaluation or escaping regex, we need one that is
 // guaranteed not to match.
+/**
+ * @type {RegExp}
+ */
 var noMatch = /(.)^/
-
 // Certain characters need to be escaped so that they can be put into a
 // string literal.
 var escapes = {
@@ -29,6 +41,9 @@ var escapes = {
   '\u2029': 'u2029'
 }
 
+/**
+ * @type {RegExp}
+ */
 var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g
 
 // List of HTML entities for escaping.
@@ -40,6 +55,9 @@ var htmlEntities = {
   '\'': '&#x27;'
 }
 
+/**
+ * @type {RegExp}
+ */
 var entityRe = new RegExp('[&<>"\']', 'g')
 
 var escapeExpr = function(string) {
@@ -51,9 +69,15 @@ var escapeExpr = function(string) {
 
 var counter = 0
 
-// JavaScript micro-templating, similar to John Resig's implementation.
-// Underscore templating handles arbitrary delimiters, preserves whitespace,
-// and correctly escapes quotes within interpolated code.
+/**
+ * JavaScript micro-templating, similar to John Resig's implementation.
+ * Underscore templating handles arbitrary delimiters, preserves whitespace,
+ * and correctly escapes quotes within interpolated code.
+ *
+ * @param {string} text
+ * @param {*=} data
+ * @returns
+ */
 var tmpl = function(text, data) {
   var render
 
@@ -111,6 +135,6 @@ var tmpl = function(text, data) {
 
   return template
 }
-tmpl.settings = settings
 
+tmpl.settings = settings
 export default tmpl

src/base/ui_container_plugin/ui_container_plugin.js

@@ -19,6 +19,10 @@ export default class UIContainerPlugin extends UIObject {
   constructor(container) {
     super(container.options)
     this.container = container
+    /**
+     * @property enabled
+     * @type {boolean}
+     */
     this.enabled = true
     this.bindEvents()
   }

src/base/ui_core_plugin/ui_core_plugin.js

@@ -8,6 +8,10 @@ export default class UICorePlugin extends UIObject {
   constructor(core) {
     super(core.options)
     this.core = core
+    /**
+     * @property enabled
+     * @type boolean
+     */
     this.enabled = true
     this.bindEvents()
     this.render()