Aurelia 2 support

[MaximBalaganskiy]

I'm submitting a Feature request

Are there plans to upgrade to Aurelia 2?

[ghiscoding]

I have yet to even try Aurelia 2 and I have no clue what needs to be done to upgrade my lib to support Au2. What would be great is that someone creates a PR with the required changes or at least explain what needs to be done to migrate a plugin to Au2.

[ghiscoding]

@MaximBalaganskiy
Today is the day, Aurelia-Slickgrid v7.0 now requries Aurelia 2.
Again a big thanks for the help to migrate to Au2, it would not have been possible with your help 🤝 🥇

I also published all the Wikis to a new Documentation website by using GitBook (kinda got the idea from Aurelia Docs actually)

However, I still have to update all the demos, I guess I'll delete most of them and keep only WebPack since I guess RequireJS is out the door with Au2, I wish that Aurelia 2 would have better Vite support in the future.

[MaximBalaganskiy]

@ghiscoding Nice! Appreciate your effort! Au2 future is getting brighter with this plugin :)

[ghiscoding]

@MaximBalaganskiy
hey I'm actually having a problem with the live demo website on GitHub, I change the base path to empty string but it still fill in the base href="/" which is wrong on GitHub and it needs to be base href="", isnt't that what the basePath supposed to do?

It's getting late and I'll check that a bit more tomorrow but for now, I have to manually change it into my gh-pages branch and the remove the slash manually. I would hope to fix the automatic code published without the slash in the future

[MaximBalaganskiy]

Try "."

[ghiscoding]

didn't work either, same result. I'll post a comment on discourse

oh wait, I think it might be with basePath: './' instead...nope again same result :(

[MaximBalaganskiy]

try specifuying the subfolder where github puts it, i think I've done that before with mdc lib.
Like basePath: '/aurelia-slickgrid'

[ghiscoding]

this sux if we now have to do that, it was working fine in Au1

[MaximBalaganskiy]

Did you try switching to hash urls?
useUrlFragmentHash: true.

This definitely works for MDC au2 bridge

RouterConfiguration.customize({ useUrlFragmentHash: true, useHref: false })

[ghiscoding]

nope still the same result with a slash and I tried your suggestion with /aurelia-slickgrid and it still breaks the website, it really has be an empty string it seems

[MaximBalaganskiy]

I have this in html tempalte file

<base href="">

[ghiscoding]

that didn't work for me but maybe I was something different in my webpack config that keeps adding the slash

[MaximBalaganskiy]

Have a look at my demo app, may be something can be picked https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/tree/v2/packages/app

[ghiscoding]

ahhh I found the issue, in my index.html, there a static base href defined, when even though I thought that it was added by WebPack, that wasn't the case...oops

[ghiscoding]

so you also have a base href defined in yours but you set it to empty. another thing that is different is that you are using index.ejs and I used to have that in my previous Au1 but you converted it to index.html in the Au2 PR so I taught ejs were no longer working... anyway, I can take another tomorrow, at least I got it working :)

I guess that's the default template that the new Au2 CLI produces, I'll convert it back to .ejs then

Thanks for the help

EDIT

yup that worked fine after converting it back to index.ejs and using base url set in webpack config

[ghiscoding]

@MaximBalaganskiy
Hey to bother you again, so I'm trying to upgrade the demo and keep only the WebPack demo but it's not going so well. I'm getting problem loading the Aurelia-Slickgrid plugin at all. The project is working fine as standalone but when trying to load it externally, some of the DI aren't getting loaded. Would you have clue or pointer of what the problem might be? Is it my demo conversion (I didn't use the CLI, I just tried to convert by hand), or is it something else? I've opened a PR in the demo project here and below is a video of what the DI currently loads. I'm a little unfamiliar with the new plugin approach in Au2

[MaximBalaganskiy]

The project installs

[MaximBalaganskiy]

sorry, wrong branch

[ghiscoding]

I might have released v7 a little too early, oh well... I was thinking about possibly using pnpm workspaces in the future to properly
separate the lib from the demo and, that might be a good time to work on that.

[MaximBalaganskiy]

I think you're not building the plugin correctly.
It either has to be a webpack build, as CLI scaffolds it, or you need to bend over your back with gulp (as I did, and regret it now).

You cannot just tsc everything and copy html, not with AU2.
The reason being, html now is compiled into a html.js file, and imported into the VM file.
This is all done by a webpack plugin. Like I said, you can do it manually with some gulp scripts but I would not recommend that

[MaximBalaganskiy]

The way I had it in my initial conversion branch is the right way to do it.

[ghiscoding]

hmm I reverted some code in this commit because all the Types were missing, does that previous include the code you were expecting then? It still seems like tsc build though

[MaximBalaganskiy]

It was in the very first branch where I basically started a new plugin with CLI.
Later I switched to updating your branch

[MaximBalaganskiy]

Also, a hint, add this file to your projects to avoid TS html errors
https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/v2/packages/app/src/resource.d.ts

[MaximBalaganskiy]

Here is that very first branch https://github.com/MaximBalaganskiy/aurelia-slickgrid/tree/au2
It uses webpack to build the plugin

[ghiscoding]

ok great that's helpful, I think I'll definitely have to go with the pnpm workspace to make sure it all works correctly. Thanks a lot for all these infos

[MaximBalaganskiy]

Not sure about pnpm, normal npm works just fine with workspaces. But that's really unrelated. The main issue is the build script of the plugin

[ghiscoding]

Not sure about pnpm, normal npm works just fine with workspaces. But that's really unrelated. The main issue is the build script of the plugin

So I went ahead and started migrating to pnpm workspaces (I've opened a new PR), the reason is mostly because when using the workspace:, it uses the build folder (dist) and the real project package.json with its main with all exports, types and everything. It's pretty much like if we were doing an npm install with dist install and all but instead, it's all happening locally without having to publish anything... So it's really good to test plugin build and such, with that approach I got further but it's not quite there yet. I'm having some issues with the WebPack plugin build and I also tried running similar build with esbuild and the result is quite similar but not exactly the same.

with WebPack I'm getting this error Error: IAurelia

with esbuild I'm getting this error Error: IDirtyChecker

The next step I've done was to look at cloning the old commit you've referenced and trying it out, which is this commit and you said it works, but that's not entirely true, it does work running it from the src/index but it doesn't work if you run the build and change the dev-app/main.ts with the code shown below.

- import * as Plugin from "../src/index";
+ import * as Plugin from "../dist/index"; // use build from dist

Aurelia
  .register(I18nConfiguration, Plugin, RouterConfiguration.customize({ useHref: false }), Example19DetailView, Example19Preload)
  .register(DecimalValueConverter, StringifyValueConverter, DateFormatValueConverter)
  .app(MyApp)
  .start();

with this I'm getting the exact same error as above with my code that is up to date, I'm getting Error: IAurelia and I don't really what to do to go further. The stack trace is coming from Aurelia, so there 0 info to help. You can try it yourself from your old commit and see for yourself. Any more suggestions on what else to do so that I can get over this error? In Aurelia 1, we had to use different code when we were publishing the plugin on npm vs when we were using a plugin locally (use.feature vs use.plugin). I think in Aurelia 2 they removed these 2 approaches but I really wonder if there's isn't something similar causing the issue shown above

[MaximBalaganskiy]

This seems to have something to do with duplicate Aurelia imports.
Not sure how to correctly generate mjs modules with webpack.
Spent the whole day playing with vite and advanced to a point where slickgrid does not want to create an instance
because container is not in the DOM.

[MaximBalaganskiy]

Managed to get it working but.... had to switch to vite

[MaximBalaganskiy]

If you give me permission to this branch I can push my current working code.
On the other hand, you can use approach from AU2 MDC library with gulp.
Not sure what's better to be honest

[MaximBalaganskiy]

Another option is to build with tsc and enable aurelia loader for the plugin in the consumer app. Currently node modules are excluded from html rule, you'll need to add an exception for the plugin folder

[ghiscoding]

Hi there, I added you as contributor so you should have access now (I don't know how else to give branch access).

I do like Vite, so if we need Vite to get it working that's totally fine with me but is it just for creating/building the Plugin or does the end user also need Vite? I thought Au2 didn't support Vite yet? I stopped using WebPack and switched to Vite in my other projects

On the other hand, you can use approach from AU2 MDC library with gulp.

I'm not sure I want to go back to Gulp really, I dropped that long time ago when npm scripts became more popular. What did you use it for anyway? I'll take a look after work to your Gulp usage

Another option is to build with tsc and enable aurelia loader for the plugin in the consumer app. Currently node modules are excluded from html rule, you'll need to add an exception for the plugin folder

Is that again for the Plugin build only or for the end user?

I really don't know what to do, so all the help you can give me is more than appreciated. I'd really like to finish this before Christmas :D

[MaximBalaganskiy]

I'll push the vite option then. The consumer can keep using webpack, that'll work.

[ghiscoding]

I've reopened the issue since it's not fixed yet and you can reference it in your upcoming PR.

Hey so I just saw that Sayan posted his own small datagrid on Aurelia discourse and taking a look at his build scripts, it looks like he's using TypeScript build directly with extra HTML/CSS files and that's about it, he's doesn't have any extra build scripts using WebPack or anything else.

From his package.json, I see these scripts

"build:ts": "tsc",
"build:other": "cpx ./src/**/*.{html,css} ./dist",
"build": "run-p build:ts build:other",

I think 1 difference that I saw is that he's not using plugin directly but he has a createConfiguration function in his configuration.ts file.

Going back to using pure TypeScript would be easier, but a Vite build would work too. As long as I'm getting it to work, that's the ultimate goal I guess :D but it's helpful to look at how a core team member does it. Perhaps it's just my folders and files that is different and should be adjusted?

[MaximBalaganskiy]

Simple compilation works, but requires a loader configuration in a consumer app. There's no way around this - au2 compiles html into js

[ghiscoding]

ah yeah looking at Sayan's lib on unpkg, he does have html files in the dist folder but I agree with you that having the html compiled in the JS file is better. However the only html file in here is aurelia-slickgrid.html, I don't have html anywhere else since all the html in Slickgrid-Universal is dealt with native JavaScript.

[MaximBalaganskiy]

In this simple.case we can just add a template in vm file

[ghiscoding]

Yeah so can we just use code like this?

@customElement({
    name: 'app-loader',
    template: '<p>Loading...</p>'
})

will that code be native without requiring an html loader?

[MaximBalaganskiy]

Yes