Aurelia CLI

[karthickthangasamy]

I tried to configure aurelia-syncfusion-bridge with Aurelia-CLI. But the "ej.*." config from here is unable to load into vendors.bundle. Is there any way to configure this config.js path mapping.

[aurelia.json]

          {
            "name": "common",
            "path": "../node_modules/syncfusion-javascript/Scripts/ej/common/",
            "deps":[
              "jquery", "jquery-easing"
            ]
          },
          {
            "name": "ej.*.min",
            "path": "../node_modules/syncfusion-javascript/Scripts/ej/web/",
            "main": "ej.*.min"
          },
          {
            "name": "datavisualization",
            "path": "../node_modules/syncfusion-javascript/Scripts/ej/datavisualization/"
          },
          {
            "name": "aurelia-syncfusion-bridge",
            "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd",
            "main": "index"
          }

[JeroenVinke]

Aurelia-CLI uses RequireJS which does not support the more complex path mappings such as ej.*.min. For the aurelia-kendoui-bridge we have decided to remove all kendo.x.min.js import statements from the bridge, which means that the user becomes responsible for loading syncfusion controls. It allows users to choose how they want to load syncfusion. They could for example use a CDN to load syncfusion from index.html. If they would like to use a module loader, then they can configure their module loader (jspm/webpack/requirejs) to load syncfusion controls, and then they can add 'import ej.button.min' statements to the view-models where they want to use the <ej-button> wrapper.

From the perspective of installation the steps to install the bridge got separated from the steps to installed syncfusion. In the kendo installation manual we have a section for installing kendo and one for installing the bridge: .

This is a major breaking change, although in order to support all module loaders it is a necessary change to make. Also see this gitbook.

[karthickthangasamy]

@JeroenVinke Okay, I will check those changes.

I hope, we can achieve with adding common prefix string with all import statement in bridge source like the below.

import 'syncfusion-javascript/ej.button.min';
import 'syncfusion-javascript/datavisualization/ej.chart.min';

In the config.js file we can replace these configurations from here with below.

"syncfusion-javascript/*": "vendors/*"

We can use aurelia-syncfusion-bridge with Aurelia-CLI with below configuration.

{
   "name": "syncfusion-javascript",
   "path": "../node_modules/syncfusion-javascript/Scripts/ej/",
   "deps":[
       "jquery", "jquery-easing"
   ]
},

Since, the ej.web.all.min.js file is about 10MB, which is too large to load for application startup.

Could you please share your suggestions. ?

[adriatic]

Leaving the final answer to @JeroenVinke (since you addressed him), the only way to solve this issue is NOT to load the the whole widget library at the application startup - and leave the decision what to load to the application developer. Only the developer knows which controls the app will use and at what time will these be needed.

We learned this the hard way (people complaining about the size of load at startup, so my advice is to follow what we did, particularly since we solved all the hard issues and you only need to follow the information presented in this document - written precisely for that reason (to make your follow-up work simpler)

[JeroenVinke]

@karthickthangasamy your solution may work, although I haven't tried such path mapping in aurelia-cli. Not removing import statements does remove the option to load syncfusion from index.html. This is only an issue if there are module loaders that do not load syncfusion well. If for example Webpack can't load syncfusion, then you can't use the bridge with webpack. If the bridge would not be loading syncfusion via import statements, then users could just add <script> tags to their index.html to load what they need (ej.button.min.js etc).

But if you confirm that all module loaders (jspm (systemjs), aurelia-cli (requirejs) and webpack) support syncfusion then you don't have to make the large change of removing all import statements from the wrappers.

[AlainBaslter]

I managed to get ejButton to get bundled along with the vendor-bundle from Aurelia CLI latest. I am no expert at this and sort of inferred what I needed to do to make this happen. Those who know what they are doing might think it is a horrible hack but I went for making it work first then I'll look at making it pretty. I ran into all sorts of configuration issues and managed to resolve them. I can't wait to get the piece I need most ejGrid to get bundled through the same process. If that succeeds I will share what I did and perhaps you folks can help me out with the stinking bits. The goal for me is to bundle a subset of the components in an Aurelia CLI TypeScript generated app which is require js based. I used strictly npm and vanilla Aurelia CLI Typescript. That means I am not building the bridge itself but referencing and bundling the AMD modules its build generates in /dist/amd.

[karthickthangasamy]

@JeroenVinke @adriatic Thanks for the detailed explanation. I look into the all module loading and do the changes.

[AlainBaslter]

On my first try at bundling aurelia syncfusion bridge using Aurelia CLI I did this under the vendor-bundle section...

      {
        "name": "ejButton",
        "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd/button",
        "main": "button"
      },
      {
        "name": "common",
        "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd/common",
        "main": "common"
      },
      {
        "name": "ej.button.min",
        "path": "../node_modules/aurelia-syncfusion-bridge/vendors/scripts/web",
        "main": "ej.button.min"
      },
      {
        "name": "ej.core.min",
        "path": "../node_modules/aurelia-syncfusion-bridge/vendors/scripts/common",
        "main": "ej.core.min"
      },

For ej.core.min I ran into trouble because ej.button.min references it as "./../ej.core.min.js" What I did was to change it to ej.core.min.js I did not like that. Its a hack and I besides am changing vendor code.

Turns out I don't have to do this no more. I found a combination that works and it's...

      {
        "name": "ejButton",
        "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd/button",
        "main": "button"
      },
      {
        "name": "common",
        "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd/common",
        "main": "common"
      },
      {
        "name": "ej.button.min",
        "path": "../node_modules/aurelia-syncfusion-bridge/vendors/scripts/web",
        "main": "ej.button.min"
      },
      {
        "name": "**common**/ej.core.min",
        "path": "../node_modules/aurelia-syncfusion-bridge/vendors/scripts/common",
        "main": "ej.core.min"
      },

Here is my whole vendor-bundle section so far...

  {
    "name": "vendor-bundle.js",
    "prepend": [
      "node_modules/bluebird/js/browser/bluebird.core.js",
      "scripts/require.js"
    ],
    "dependencies": [
      "aurelia-binding",
      "aurelia-bootstrapper",
      "aurelia-dependency-injection",
      "aurelia-event-aggregator",
      "aurelia-framework",
      "aurelia-history",
      "aurelia-history-browser",
      "aurelia-loader",
      "aurelia-loader-default",
      "aurelia-logging",
      "aurelia-logging-console",
      "aurelia-metadata",
      "aurelia-pal",
      "aurelia-pal-browser",
      "aurelia-path",
      "aurelia-polyfills",
      "aurelia-route-recognizer",
      "aurelia-router",
      "aurelia-task-queue",
      "aurelia-templating",
      "aurelia-templating-binding",
      {
        "name": "text",
        "path": "../scripts/text"
      },
      {
        "name": "aurelia-templating-resources",
        "path": "../node_modules/aurelia-templating-resources/dist/amd",
        "main": "aurelia-templating-resources"
      },
      {
        "name": "aurelia-templating-router",
        "path": "../node_modules/aurelia-templating-router/dist/amd",
        "main": "aurelia-templating-router"
      },
      {
        "name": "aurelia-testing",
        "path": "../node_modules/aurelia-testing/dist/amd",
        "main": "aurelia-testing",
        "env": "dev"
      },
      {
        "name": "ejButton",
        "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd/button",
        "main": "button"
      },
      {
        "name": "common",
        "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd/common",
        "main": "common"
      },
      {
        "name": "ej.button.min",
        "path": "../node_modules/aurelia-syncfusion-bridge/vendors/scripts/web",
        "main": "ej.button.min"
      },
      {
        "name": "common/ej.core.min",
        "path": "../node_modules/aurelia-syncfusion-bridge/vendors/scripts/common",
        "main": "ej.core.min"
      },
      "jquery",
       {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "exports": "$",
        "resources": [
          "css/bootstrap.css"
        ]
      },
      {
        "name": "ejCheckBox",
        "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd/checkbox",
        "main": "checkbox"
      },
      {
        "name": "ej.checkbox.min",
        "path": "../node_modules/aurelia-syncfusion-bridge/vendors/scripts/web",
        "main": "ej.checkbox.min"
      },
      {
        "name": "ejRadioButton",
        "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd/radiobutton",
        "main": "radiobutton"
      },
      {
        "name": "ej.radiobutton.min",
        "path": "../node_modules/aurelia-syncfusion-bridge/vendors/scripts/web",
        "main": "ej.radiobutton.min"
      }
    ]
  }

As you can see I have ejButton, ejCheckBox, ejRadioButton all in the bundle at this point and they all work. It loads fast too with au build --env prod (minimized).

I have a lot more controls to go though. I am writing a program to automatically generate the relevant bundle entries for the bridge controls I want for I am not going to do all that manually!

[pbgc]

Any news about this?

[AlainBaslter]

I resorted to letting the plugin load All ejUseAll I think its called. I have not gotten to the aspect of bundling only the pieces I use yet. My application is still somewhat in flux as to what controls I might use or not use. Therefore I have differed the issue of bundling and minimization until I know for sure what I wont be using.

[karthickthangasamy]

@AlainBaslter @pbgc We are working onto provide simplest way to integrate our bridge into Aurelia CLI, with simple configurations to avoid complex path mappings. We are in testing phase, we can expect a release on or before the mid of next week. Until then we appreciate your patience.

[pbgc]

@karthickthangasamy @AlainBaslter Thanks for the update! I will then wait for the new integration and hopefully will test it next week

[AlainBaslter]

@karthickthangasamy this is what I currently do...in config.js

System.config({ defaultJSExtensions: true, transpiler: false, paths: { "": "dist/", "github:": "jspm_packages/github/", "npm:": "jspm_packages/npm/", "common/ej.": "jspm_packages/github/syncfusion/JavaScript-Widgets@14.4.20/scripts/ej/common/ej..js", "datavisualization/ej.": "jspm_packages/github/syncfusion/JavaScript-Widgets@14.4.20/scripts/ej/datavisualization/ej..js", "ej.": "jspm_packages/github/syncfusion/JavaScript-Widgets@14.4.20/scripts/ej/web/ej..js", "syncfusion-javascript/": "jspm_packages/github/syncfusion/JavaScript-Widgets@14.4.20/", "styles/": "styles/" },

I see DataVisualizations I am not using currently but I could. If I dont' then I'd like not to have to put that in.

under map

"syncfusion-javascript": "github:syncfusion/JavaScript-Widgets@14.4.20",
"syncfusion/JavaScript-Widgets": "github:syncfusion/JavaScript-Widgets@14.4.20",

In main.ts I am doing this

.plugin('aurelia-syncfusion-bridge', plugin => plugin.useAll()); // syncfusion bridge

Which is everything and takes a while to load. I know I can use useXXX() although its tricky to know which ones to wire in exactly considering egGrid for example references a horde of other controls.

At this point I have not addressed bundling at all. I know that is coming and is a necessary evil. Any guidance regarding how to configure bundles.js would be great.

After exploring a number of options our mind is set, our product WILL be using wonderful Syncfusion period.

So we'll appreciate a little grease getting there.

Thanks

[pbgc]

@AlainBaslter This issue is related to the integration of the bridge with Aurelia CLI that will use RequireJS and not jspm ....

[AlainBaslter]

That issue up there is old perhaps when I was doing the RequireJS approach. Since then I use jspm and SystemJS as loader. Everything works fine. Its just a little fat because its not bundled and trimmed down to strictly what I use yet. That's the next step for me. I'll share the configuration I use and works to whoever is doing the same approach.

[pbgc]

@AlainBaslter what I was saying is that Aurelia CLI currently only uses RequireJS (with future plans for including webpack), so the new developments on the bridge that karthickthangasamy was talking and will be available (hopefully) next week will be for RequireJS and not SystemJS/jspm. I don't know if it will be easy to use it with jspm

[karthickthangasamy]

@AlainBaslter We are happy for you feedback.

Query: I know I can use useXXX() although its tricky to know which ones to wire in exactly considering egGrid for example references a horde of other controls.

You can get the dependency details from the below link for each widget.

https://help.syncfusion.com/api/js/

For ejGrid : https://help.syncfusion.com/api/js/ejgrid

Query : Any guidance regarding how to configure bundles.js would be great.

We implemented demo-syncfusion catalog application with bundling. Could you please refer this or share a repo to investigate further.?

[AlainBaslter]

@karthickthangasamy That's all good info. I'll be looking into that for sure. In particular the bundling in the demo. I'll put up my jspm/SystemJS based config soon.

[karthickthangasamy]

@AlainBaslter 👍

[AlainBaslter]

@pbgc Yep I got that. I am stuck with jspm/SystemJS because of other constraints.

[karthickthangasamy]

aurelia-syncfusion-bridge@0.5.0 released.

[aurelia.json] mapping to load syncfusion-javascript widgets.

          {
            "name": "syncfusion-javascript",
            "path": "../node_modules/syncfusion-javascript/",
            "main": false
          }

[pbgc]

@karthickthangasamy great! maybe it's better to update http://aurelia-ui-toolkits.github.io/demo-syncfusion/#/installation

[karthickthangasamy]

@pbgc 😄

Yes, I am working on to update the demo-syncfusion . The same is updates in our below production link.

http://aureliajq.syncfusion.com/#/installation

I will let you know, once the demo-syncfusion updated with latest release.

[karthickthangasamy]

@pbgc the demo-syncfusion updated with aurelia-syncfusion-bridge@0.5.0

[pbgc]

@karthickthangasamy I'm looking at demo-syncfusion. But shouldn't the installation instructions be updated also? (http://aureliajq.syncfusion.com/#/installation and http://aurelia-ui-toolkits.github.io/demo-syncfusion/#/installation) ? The installation instructions still refer jspm as the way to install ...

[AlainBaslter]

Oh oh, hun? I got latest yesterday and all I did was... from root npm install jspm install

Then cd into /sample same deal npm install jspm install

Then back one up cd.. gulp watch

And it was all good. Now I did this in the context of this depot here and I have not updated my actual application with 0.5.0 yet. I wanted to make sure its all good before I break the app.

What has/is changing regarding jspm install? Am I in for a nasty surprise coming up soon?

My app is based on Aurelia Skeleton Navigation TypeScript. That's jspm based and not aurelia-cli based.

Is there anything I need to know before I go break things?

[karthickthangasamy]

@pbgc I updated the demo-syncfusion with aurelia-syncfusion-bridge@0.5.0 and I will share the installation instruction with Aurelia-CLI as soon as possible.

[karthickthangasamy]

@AlainBaslter The aurelia-syncfusion-bridge@0.5.0 includes breaking changes to maintain the structure with npm:syncfusion-javascript package. Since, we made the below changes of import our widget source to seamlessly work with Webpack, SystemJS and Aurelia CLI.

• import ej. * .min changed to import syncfusion-javascript/scripts/ej/web/ej. * .min

• import datavisualization/ej. * .min changed to import syncfusion-javascript/scripts/ej /datavisualization/ej. * .min.

In the existing Catalog-app we did path mapping changes alone to integrate the latest release version.

I recommend you to o refer the commit details of config.js

https://github.com/aurelia-ui-toolkits/aurelia-syncfusion-bridge/commit/d1010726013df41b9417aa72f60d83801246d99b#diff-e22b50e740e102c8de5e858dbcd7753d

[pbgc]

@karthickthangasamy sorry for asking again ... but the installation instructions will be updated? They still give the information that you must install the bridge using jspm ...

[karthickthangasamy]

@pbgc I have logged the details here.

CLI-Integration

Could you please follow the steps and let me know if you need any further assistance.?

[pbgc]

@karthickthangasamy perfect! tried and everything went smoothly. thank you! (shouldn't this instructions be linked here http://aurelia-ui-toolkits.github.io/demo-syncfusion/ and here https://help.syncfusion.com/js/aureliajs )

[karthickthangasamy]

@pbgc Happy to hear the application works 😄 . I am working on the documentation for integration and will update both the sections as soon as possible.

[pbgc]

@karthickthangasamy sorry for taking you time ... but can you just tell me why is necessary to make ""stub": false" ins the loader configuration? I cannot find any reference to that property in the aurelia docs....

[karthickthangasamy]

@pbgc The css file will not be loaded into application and throws errors in requirejs like the below.

You can refer the comment here

[pbgc]

@karthickthangasamy I saw that (tried it) but wanted to know why.. I cannot find in the documentation the property "stub" and don't know what it does. thanks!

[karthickthangasamy]

@pbgc Thanks for the notification. I will add some more information for stub property.