Adding KendoUI bridge to the skeleton-esnext-webpack

[adriatic]

@niieani

In order to simplify this exercise, I will start with a small subset of the overal problem. This is not only to make it easier for you, but even more importantly to help me ensure that I present you with a consistent picture of my issues with webpack

---

To start

here are the steps needed to add the KendoUI autocomplete component to skeleton-esnext application

Once the standard build and run commands

npm install
jspm install
gulp watch

are successfully executed, I would typically to the following:

jspm install css jquery, kendo-ui aurelia-kendoui- bridge

which would result with the following changes in package.json (this belongs to the successfully converted skeleton-esnext-kendo-core project using the free kendoui-core sdk from github:kendo-labs/bower-kendo-ui@^2016.2.630.

Task 1

How to achieve the same with skeleton-esnext-webpack - which is at the moment a unmodified copy of the original?

---

[adriatic]

Now, assuming that you can add these kendo-needed modules (css jquery, kendo-ui aurelia-kendoui- bridge) to skeleton-esnext-webpack the next set of changes is rather simple:

Note that I actually made all the changes that follow below, to simplify this work for you - and that I was not able to run this modified app for obvious reasons :-)

Step 1.

add

  <require from="kendo-ui/styles/kendo.common.min.css!"></require>
  <require from="kendo-ui/styles/kendo.bootstrap.min.css!"></require>

to the app.html to get:

Step 2

remove all unneeded parts of of a standard skeleton (welcome, users, child-router etc) leaving the app.js to be

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
       { route: ['', 'k-autocomplete'],  name: 'k-button',     moduleId: 'kendoui/autocomplete/k-autocomplete',  nav: true, title: 'KendoUI autocomplete' }
    ]);

    this.router = router;
  }
}

Step 3

add the autocomplete component

Warning

I did not properly modify the main.js code - as I do not know how "morph" the jspm version below

import 'bootstrap';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', (kendo) => kendo.core());

  aurelia.start().then(() => aurelia.setRoot());
}

If you have problems with these last three steps (which I cannot verify for completeness as the app cannot be run until you get the app to be linked with the KendoUI bridge, please let me know.

[niieani]

Why add the ! at the end of the requires: <require from="kendo-ui/styles/kendo.common.min.css!"></require> ?

[adriatic]

I am not sure whether this is still needed or not - it used to be the signal to use "css": "github:systemjs/plugin-css@^0.1.23" instead of whatever else would load css files without that ! character.

I did not want to remove it - as this may have been the culprit for troubles with webpack

[niieani]

That ! marker was used by SystemJS, having it might break things in Webpack actually.

[adriatic]

Thanks for this warning - I have no desire to leave any SystemJS leftovers in the webpack context and this is a golden opportunity for me to learn all such traps.

I also realized another detail that I did not mention to you - which is also SystemJS specific:

In order for the app using the KendoUI bridge to function properly, I had to manually add these two entries in the config.js file, which as you know is the file that jspm creates (while processing the package.json) as the definition of the app configuration for SystemJS loader.

As far as I know there was no better way to pass this information to SystemJS - and that always bugs me as the config.js should really not be edited.

Now this same information needs to be stored somewhere in the webpack case (I apologize for not being better prepared to "talk webpack" as I keep stalling to learn more about it once I get some indication that it is actually usable in the areas I care about)

[adriatic]

Hi @niieani It seems that our collaboration on this issue ceased - so I may not have clearly stated my expectations

1. I describe the relevant details of a typical Aurelia app that uses KendoUI bridge, built with SystemJS (this is what I think I did so far)
2. @nieeani converts this setup to be built with webpack

At that point, I will extend the know-how obtained from you to all other cases (different bridges, different platforms etc). If I fail in any of these additional cases, I will have a solid base of already discussed details to make a (hopefully simple) incremental jump to the final solution.

Can you do this for me?