index.js 2.31 KB
Newer Older
Phil Hughes's avatar
Phil Hughes committed
1
import Vue from 'vue';
2
import { mapActions } from 'vuex';
3
import _ from 'underscore';
Phil Hughes's avatar
Phil Hughes committed
4 5 6 7
import Translate from '~/vue_shared/translate';
import ide from './components/ide.vue';
import store from './stores';
import router from './ide_router';
8
import { parseBoolean } from '../lib/utils/common_utils';
9
import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
Phil Hughes's avatar
Phil Hughes committed
10

11 12
Vue.use(Translate);

13 14 15 16 17 18 19
/**
 * Function that receives the default store and returns an extended one.
 * @callback extendStoreCallback
 * @param {Vuex.Store} store
 * @param {Element} el
 */

20 21 22 23 24
/**
 * Initialize the IDE on the given element.
 *
 * @param {Element} el - The element that will contain the IDE.
 * @param {Object} options - Extra options for the IDE (Used by EE).
25 26
 * @param {Component} options.rootComponent -
 *   Component that overrides the root component.
27
 * @param {extendStoreCallback} options.extendStore -
28
 *   Function that receives the default store and returns an extended one.
29 30
 */
export function initIde(el, options = {}) {
Phil Hughes's avatar
Phil Hughes committed
31 32
  if (!el) return null;

33
  const { rootComponent = ide, extendStore = _.identity } = options;
34

Phil Hughes's avatar
Phil Hughes committed
35 36
  return new Vue({
    el,
37
    store: extendStore(store, el),
Phil Hughes's avatar
Phil Hughes committed
38
    router,
39
    created() {
40
      this.setEmptyStateSvgs({
41 42 43
        emptyStateSvgPath: el.dataset.emptyStateSvgPath,
        noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
        committedStateSvgPath: el.dataset.committedStateSvgPath,
44
        pipelinesEmptyStateSvgPath: el.dataset.pipelinesEmptyStateSvgPath,
Phil Hughes's avatar
Phil Hughes committed
45
        promotionSvgPath: el.dataset.promotionSvgPath,
46
      });
47 48
      this.setLinks({
        ciHelpPagePath: el.dataset.ciHelpPagePath,
Phil Hughes's avatar
Phil Hughes committed
49 50 51
        webIDEHelpPagePath: el.dataset.webIdeHelpPagePath,
      });
      this.setInitialData({
52
        clientsidePreviewEnabled: parseBoolean(el.dataset.clientsidePreviewEnabled),
53 54 55
      });
    },
    methods: {
Phil Hughes's avatar
Phil Hughes committed
56
      ...mapActions(['setEmptyStateSvgs', 'setLinks', 'setInitialData']),
57
    },
Phil Hughes's avatar
Phil Hughes committed
58
    render(createElement) {
59
      return createElement(rootComponent);
Phil Hughes's avatar
Phil Hughes committed
60 61 62 63
    },
  });
}

64 65 66 67 68 69 70 71 72 73 74 75 76 77
/**
 * Start the IDE.
 *
 * @param {Objects} options - Extra options for the IDE (Used by EE).
 */
export function startIde(options) {
  document.addEventListener('DOMContentLoaded', () => {
    const ideElement = document.getElementById('ide');
    if (ideElement) {
      resetServiceWorkersPublicPath();
      initIde(ideElement, options);
    }
  });
}