custom importer in node_modules/aurelia-kendoui-bridge/importer-callbacks.js

importer-callbacks.js

'use strict';

const logger = require('aurelia-logging').getLogger('aurelia-kendoui-bridge importer');

module.exports = class {

  static inject() { return ['package', 'project', 'ui', 'fs']; };

  constructor(pkg, project, ui, fs) {
    this.package = pkg;
    this.project = project;
    this.ui = ui;
    this.fs = fs;
  }

  applies() {
    return true;
  }

  execute() {
    return this.askWrappers()
    .then(() => this.askKendoScriptTag())
    .then(() => {
      return {
        patches: [
          { 'op': 'replace', 'path': '/build/loader/plugins/0/stub', 'value': false}
        ],
        dependencies: [{
          name: 'aurelia-kendoui-bridge',
          path: '../node_modules/aurelia-kendoui-bridge/dist/amd',
          main: 'index',
          resources: this.resources
        }],
        tutorial: [
          'We highly recommend you to read the following document: https://aurelia-ui-toolkits.gitbooks.io/kendoui-bridge-docs/content/what_you_need_to_know.html'
        ]
      };
    });
  }

  askKendoScriptTag() {
    let options = [{
      displayName: 'Kendo pro',
      description: 'Yes, add jQuery and Kendo PRO to my index.html file'
    }, {
      displayName: 'Kendo core',
      description: 'Yes, add jQuery and Kendo CORE to my index.html file'
    }, {
      displayName: 'No',
      description: 'No, do not modify my index.html file'
    }];

    return this.ui.question('Would you like to load jQuery and Kendo through index.html?', options)
    .then(answer => {
      if (answer.displayName !== 'No') {
        return this.getIndexHTML()
        .then(indexHTML => {

          let file;

          if (answer.displayName === 'Kendo pro') {
            file = 'kendo.all.min.js';
          } else if (answer.displayName === 'Kendo core') {
            file = 'kendo.ui.core.min.js';
          }

          indexHTML = this.appendToHead(indexHTML, '<script src="https://kendo.cdn.telerik.com/2016.3.1028/js/kendo.jquery.min.js"></script>');
          indexHTML = this.appendToHead(indexHTML, `<script src="https://kendo.cdn.telerik.com/2016.3.1028/js/${file}"></script>`);
          indexHTML = this.appendToHead(indexHTML, '<link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css">');

          return this.writeIndexHTML(indexHTML);
        });
      }
    });
  }

  getIndexHTML() {
    let indexPath = this.fs.join(this.project.directory, 'index.html');
    return this.fs.readFile(indexPath);
  }

  writeIndexHTML(indexHTML) {
    let indexPath = this.fs.join(this.project.directory, 'index.html');
    return this.fs.writeFile(indexPath, indexHTML);
  }

  appendToHead(indexHTML, tag) {
    return indexHTML.replace(/<\/head>/, `  ${tag}\r\n</head>`);
  }

  askWrappers() {
    let wrappers = [
      'autocomplete',
      'barcode',
      'button',
      'buttongroup',
      'calendar',
      'chart',
      'colorpalette',
      'colorpicker',
      'combobox',
      'contextmenu',
      'datepicker',
      'datetimepicker',
      'diagram',
      'draggable',
      'drop-target',
      'dropdownlist',
      'editor',
      'filter-menu',
      'flatcolorpicker',
      'gantt',
      'gauges',
      'grid',
      'listview',
      'map',
      'maskedtextbox',
      'menu',
      'multiselect',
      'notification',
      'numerictextbox',
      'panelbar',
      'pdf',
      'pivotgrid',
      'popup',
      'progressbar',
      'qrcode',
      'rangeslider',
      'responsivepanel',
      'scheduler',
      'scrollview',
      'slider',
      'sortable',
      'splitter',
      'spreadsheet',
      'switch',
      'tabstrip',
      'timepicker',
      'toolbar',
      'tooltip',
      'treelist',
      'treeview',
      'upload',
      'validator',
      'window'
    ];

    let options = wrappers.map(wrapper => { return { displayName: wrapper } });

    return this.ui.multiselect('Which wrappers would you like to include in the bundle?', options)
      .then(answer => {
        let chosenWrappers = answer.map(x => x.displayName);
        this.resources = chosenWrappers.map(x => `${x}/**/*.{html,js}`);
      });
  }

  get name() {
    return 'Metadata Strategy';
  }
};