webpack support

[karthickthangasamy]

I cloned the skeleton-esnext-webpack and configured for aurelia-syncfusion-bridge and committed here which works fine. But I need to load all the aurelia-syncfusion-bridge source instead of loading one by one like this. I am looking for includeSubModules in @easy-webpack

plugins: [
    new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: 'aurelia-syncfusion-bridge' }
      ]
    })
  ],

[Thanood]

@karthickthangasamy I found that the easiest way to accomplish this is to .useAll() and copy the complete block of error messages into an editor. Then edit it in a way that the file only contains the missing packages. Should be doable with a few regex replaces in a good editor.

What you get this way is a list of the things you would put into resources (in the form of a json array, of course). If you can confirm that this is enough for the application using syncfusion-bridge, then copy this array into syncfusion-bridge resources itself. Then any application using the bridge should be able to build and run.

This works for the materialize bridge, I got this output the way I descripbed above: https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/package.json#L139-L186

The downside is (when I got this right) that you lose the opportunity to bundle only the parts you need. But I'm not sure if that is the case.

About includeSubModules: not sure but I think they removed that in favor of resources.

[karthickthangasamy]

@Thanood Yes, while using .useAll() I am getting aurelia-syncfusion-bridge source for all the components are not found like the below snippet.

Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/grid/grid'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/grid/column'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/chart/chart'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/chart/series'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/map/map'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/map/layer'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/treemap/treemap'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/treemap/level'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/rangenavigator/rangenavigator'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/rangenavigator/rangeseries'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/diagram/diagram'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/sparkline/sparkline'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/symbolpalette/symbolpalette'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/overview/overview'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/bulletgraph/bulletgraph'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/bulletgraph/qualitativerange'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/circulargauge/circulargauge'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/lineargauge/lineargauge'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/digitalgauge/digitalgauge'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/splitter/splitter'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/datepicker/datepicker'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/gantt/gantt'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/treegrid/treegrid'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/treegrid/treegridcolumn'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/colorpicker/colorpicker'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/dialog/dialog'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/scroller/scroller'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/barcode/barcode'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/pdfviewer/pdfviewer'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/numerictextbox/numerictextbox'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/currencytextbox/currencytextbox'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/percentagetextbox/percentagetextbox'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/timepicker/timepicker'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/toolbar/toolbar'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/menu/menu'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/maskedit/maskedit'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/treeview/treeview'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/kanban/kanban'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/kanban/kanbancolumn'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/ribbon/ribbon'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/spreadsheet/spreadsheet'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/spreadsheet/sheet'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/rating/rating'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/listbox/listbox'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/listview/listview'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/navigationdrawer/navigationdrawer'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/rotator/rotator'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/rte/rte'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/dropdownlist/dropdownlist'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/autocomplete/autocomplete'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/radialmenu/radialmenu'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/radialmenu/item'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/radialslider/radialslider'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/tile/tile'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/accordion/accordion'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/tab/tab'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/checkbox/checkbox'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/radiobutton/radiobutton'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/togglebutton/togglebutton'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/splitbutton/splitbutton'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/groupbutton/groupbutton'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/datetimepicker/datetimepicker'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/progressbar/progressbar'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/tagcloud/tagcloud'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/slider/slider'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/fileexplorer/fileexplorer'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/pivotgrid/pivotgrid'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/pivotchart/pivotchart'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/pivotgauge/pivotgauge'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/pivotschemadesigner/pivotschemadesigner'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/waitingpopup/waitingpopup'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/reportviewer/reportviewer'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/schedule/schedule'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/schedule/scheduleresource'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/uploadbox/uploadbox'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/tooltip/tooltip'.(…)
Uncaught (in promise) Error: Cannot find module './aurelia-syncfusion-bridge/common/template'.(…)

But while including these packages in package.json file of wepback-skeleton repo here, I can able to resolve these issues. Instead of including all these set of lines in Aurelia build resources, I am looking for loading all the resources like includeSubModules which avoid confusions and too lengthy references .

Is there any some other way to achieve this.?

[Thanood]

If I understood correctly, I don't think it's possible. The resources array was introduced because webpack cannot know which resources you'd like to add.

That's why I proposed to do that in the bridge itself so your users don't have to.

These entries are treated as "external modules". That also was not possible with includeSubmodules - you could load the bridge but it wouldn't load the files it imports itself (defined by config-builder). I agree that this would be a great idea for an @easy-webpack module but I didn't see any.

[Thanood]

To provide some further detail:

The resources loaded are essentially defined at runtime, when config-builder is called with .useButton().useTreeGrid() etc. There is no way webpack would know them at build time (apart from parsing main.js and knowing every possible way to include globalResources), so these have to be declared somewhere.

In a perfect world it works like this:

• user decides he wants Splitter, TreeGrid and ListView from SyncFusion
• user installs SyncFusion bridge and initializes these options in main.js
• user creates a resources array with:

"aurelia-syncfusion-bridge/listview/listview",
"aurelia-syncfusion-bridge/treegrid/treegrid",
"aurelia-syncfusion-bridge/treegrid/treegridcolumn",
"aurelia-syncfusion-bridge/splitter/splitter"

• webpack only bundles these components and keeps the resulting bundle small

Regarding "There is no way webpack would know them at build time", consider this:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-syncfusion-bridge', plugin => {
      plugin.useButton();
      if (userIsAdmin) {
        plugin.useFileExplorer();
      } else {
        plugin.useListView();
      }
    });

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

Of course you would need to include both FileExplorer and ListView and this is a simple example. I could even write this part server-side (for maximum security or something like that) or add more if other conditions are met.

So there really is no way for webpack to know what you really want to include in the app bundle. :smile:

[adriatic]

In a perfect world it works like this:

The good news are that the perfect world is almost here: we have new release of KendoUI bridge almost ready and this bridge leaves the complete control of which widgets to use to the application that uses the bridge. More specifically, the bridge itself does not have any references to underlying toolkit widgets, As soon as we finish the related documentation, Syncfusion team will be offered to follow this new architecture as well.

Note that as a consequence of this "transformation", webpack does not need to be told anything about plugin's references and we verified that we could build an aurelia app using this bridge and webpack as loader.

[Thanood]

Wow, that's great news, @adriatic!

[karthickthangasamy]

@adriatic Is there any update for webpack documentation?

[adriatic]

@karthickthangasamy - I believe that you will need to upgrade Aurelia Syncfusion bridge as described in this document in order to be able to is Webpack as the module loader.

[karthickthangasamy]

@adriatic I believe, while removing the import ej.<control-name>.min from the Aurelia components source we need to load the Syncfusion Widgets source by application startup which is approximately 10MB file.

Instead, could you please check this skeleton source here.?

I resolved the plugin source using the modules like this. I hope @Thanood comment above is helpful.

[don-bluelinegrid]

@karthickthangasamy @adriatic

What is the status of this?

I've just tried to follow the installation instructions in the aurelia-syncfusion-bridge docs, and they are essentially useless for a webpack setup.

I then read through the comments above, and this seems like an unworkable situation for developer use. I've already spent more than an hour trying to add entries to the package.json "resources" section, to then find new errors appear.

We should not have to go through a labor-intensive installation procedure of including granular resource dependencies. I was hoping to try out this bridge to syncfusion to use the grid for inclusion in a new commercial project. I'm now moving on to something else, but will monitor this issue to see if it gets resolved.

Thanks, Don

[don-bluelinegrid]

As an example, even after adding the syncfusion-bridge/grid/grid reference to the "resources" section, I then see this error in the webpack build:

ERROR in ./~/aurelia-syncfusion-bridge/dist/commonjs/grid/grid.js Module not found: Error: Can't resolve 'ej.grid.min' in '/Users/donpeterkofsky/Documents/gc-2-dev/node_modules/aurelia-syncfusion-bridge/dist/commonjs/grid' @ ./~/aurelia-syncfusion-bridge/dist/commonjs/grid/grid.js 12:0-22 @ ./src ^\.\/.*$ @ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js @ multi aurelia

It's not reasonable to expect developers to decipher the references between the various modules like this.

[adriatic]

@don-bluelinegrid aurelia syncfusion bridge is created and maintained by Syncfusion's development team led by @karthickthangasamy. @JeroenVinke, @Thanood and myself (members of the Aurelia UI-Toolkits team) act as advisers to Syncfusion - they stated their interest in using our "bridge infrastructure" developed in the course of building our two products (KendoUI and Materialize bridge).

At the time Aurelia added the support needed to use Webpack as the alternative module loader / binder, we encountered all the problems you are seeing and reporting now. The solution is the new KendoUI bridge which addresses the relative lack of Webpack features (when compared with SystemJS loader).

At the same time, I explained this situation and our solution to Syncfusion's management. I hope that @karthickthangasamy will use this opportunity to communicate your experience to them as well.

[don-bluelinegrid]

@adriatic

Thank you very much for your response.

Yes, I am beginning to understand the relationship between the various teams.

The solution is the new KendoUI bridge which addresses the relative lack of Webpack features (when compared with SystemJS loader).

For my project, I specifically need a smart grid at the moment, and so with that, KendoUI is not exactly "the solution", because unlike with SyncFusion the Grid in KendoUI is only available with a paid Enterprise license.

I've spent 2-3 days looking into all of the available grid components for Aurelia, and they each have their advantages and disadvantages from what I can see. At the current moment, it does not look like there is a mature, fully-functional grid component available for Aurelia as an open-source component.

Regards, Don

[adriatic]

For my project, I specifically need a smart grid at the moment, and so with that, KendoUI is not exactly "the solution", because unlike with SyncFusion the Grid in KendoUI is only available with a paid Enterprise license.

We (Aurelia-UI-Toolkits team) are a bunch of guys who are interested solely in advancing the Aurelia framework adoption. We have no real relationship nor influence on Telerik or Syncfusion, so the affordability of KendoUI grid is not something we could address. Based on the number of KendoUI bridge downloads (17,000+) we made a good decision to "bring" KendoUI SDK to Aurelia community.

[adriatic]

At the current moment, it does not look like there is a mature, fully-functional grid component available for Aurelia as an open-source component.

Only partially true - you could use Syncfusion with SystemJS module loader just fine.

[don-bluelinegrid]

@adriatic

Yes, I think we understand each other.

To be more precise, I could have said:

At the current moment, it does not look like there is a mature, fully-functional grid component available for Aurelia as an open-source component with Webpack support.

[adriatic]

@don-bluelinegrid - you seem to be a "my kind of a person", yes 😏

[adriatic]

To completely clear any miscommunication let me add that my intent with

The solution is the new KendoUI bridge which addresses the relative lack of Webpack features (when compared with SystemJS loader).

was to indicate the technical solution - not necessarily the same as business solution.

[AlainBaslter]

@don-bluelinegrid it sounds like we are in a very similar situation. I also need advanced grid capabilities that takes plays nice with Aurelia for an application . I looked around for a long time and this aspect was holding up development. I could wait no longer so I went with agGrid when it was in the early stages. Apparently a decent grid is a tall order to have open source. I built my prototype using agGrid and then they went commercial. This solution is the only thing I found to fall back on. I have a different set of constraints. I have to use requirejs and I am using TypeScript. So far this is working out for me. Syncfusion's licensing terms and component count is a better proposition than Kendo UI in my opinion so I am sticking to it. This team pulled off quite a feat in finding a solution to marry the Syncfusion components to Aurelia's binding. It appears more and more demands of different package managers and loaders are being asked of them. It is a small team with limited bandwidth to meet all the demands. They had to start somewhere. What is there today is not ideal for all the different scenarios but the true value is in the genious of the bridge formula. As of yesterday I had success one components I need in an Aurelia CLI generated app (requirejs). It was not straight forward and there are some bits that are not pretty but I have no choice than to plod along sorting out all the configuration issues and getting the rest of the components I need in that bundle. Necessity is the mother of invention. I suggest you give it another shot and focus on the components you need for starters. My 2 cents.

[karthickthangasamy]

aurelia-syncfusion-bridge@0.5.0 released with webpack support.