appifier.js

'use strict'

/**
 * Sample of use
 *
 * ```js
 * import { path as MediasPath } from './vue/medias/forms'
 * import { content_type as WorksContentType } from './vue/works/forms'
 * appify({
 *   components: {
 *     'medias-path': MediasPath,
 *     'works-content_type': WorksContentType
 *   }
*  })
 * ```
 */

import Vue from 'vue'

/**
 * @param {Object} options
 */
export default function (options = {}) {
  options.id = options.id || 'app'
  options.components = options.components || {}

  appify(options.id, options.components)
}

/**
 * @param {String} id
 * @param {Object} components
 */
const appify = function (id, components = {}) {
  /**
   * @param {String} id
   * @param {Object} components
   * @returns {Vue | CombinedVueInstance<Vue, object, object, object, Record<never, any>>}
   * @private
   */
  let _vue = function (id, components) {
    Object.entries(components).forEach((i) => Vue.component(i[0], i[1]))

    let vue = (id) => new Vue({ el: `#${id}` })

    return vue(id)
  }

  window.addEventListener('DOMContentLoaded', () => _vue(id, components))
}