search

aurelia-ui-toolkits / carmel-fe

Carmel editor front end application
MIT License
1 stars 1 forks source link

Problems building Carmel front end as a Typescript app #1

Open adriatic opened 7 years ago

adriatic commented 7 years ago

I started with the this Skeleton to ensure that I am using the most current Aurelia components and then stripped it of all that I do not need and added the few initial "parts"" of the demo-kendo - as you can see in the repo.

Issue 1

jspm install results with that darned message that I was never able to resolve

   Installed Forks

                                                    npm:isarray 0.0.1 1.0.0

Issue 2

Running gulp watch is a lot more messy as I really did not do anything with the Javascript files other then changing their extension from .js to .ts. So, I am getting these error messages

λ gulp watch
[22:03:06] Using gulpfile H:\work\aurelia-ui-toolkits\carmel-fe\gulpfile.js
[22:03:06] Starting 'build'...
[22:03:06] Starting 'unbundle'...
[22:03:06] Finished 'unbundle' after 8.24 ms
[22:03:06] Starting 'clean'...
[22:03:06] Finished 'clean' after 39 ms
[22:03:06] Starting 'build-system'...
[22:03:06] Starting 'build-html'...
[22:03:06] Starting 'build-css'...
[22:03:06] Finished 'build-css' after 19 ms
[22:03:06] Finished 'build-html' after 152 ms
src\main.ts(2,24): error TS2307: Cannot find module 'settings'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\main.ts(2,24): error TS2307: Cannot find module 'settings'.
src\main.ts(3,28): error TS2307: Cannot find module 'shared/theme-manager'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\main.ts(3,28): error TS2307: Cannot find module 'shared/theme-manager'.
src\shared\logger.ts(8,25): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(8,25): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(16,7): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(16,7): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(22,18): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(22,18): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(38,5): error TS2346: Supplied parameters do not match any signature of call target.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(38,5): error TS2346: Supplied parameters do not match any signature of call target.
src\shared\logger.ts(42,5): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(42,5): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(43,7): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(43,7): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(86,10): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(86,10): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(93,13): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(93,13): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(96,45): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(96,45): error TS2304: Cannot find name 'kendo'.
src\shared\markdown.ts(15,10): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(15,10): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(16,10): error TS2339: Property 'loader' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(16,10): error TS2339: Property 'loader' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(17,10): error TS2339: Property 'converter' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(17,10): error TS2339: Property 'converter' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(17,26): error TS2304: Cannot find name 'showdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(17,26): error TS2304: Cannot find name 'showdown'.
src\shared\markdown.ts(22,12): error TS2339: Property 'loader' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(22,12): error TS2339: Property 'loader' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(24,14): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(24,14): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(24,39): error TS2339: Property 'converter' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(24,39): error TS2339: Property 'converter' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(25,9): error TS2304: Cannot find name 'PR'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(25,9): error TS2304: Cannot find name 'PR'.
src\shared\markdown.ts(30,14): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(30,14): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(33,12): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(33,12): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
src\shared\theme-manager.ts(18,10): error TS2339: Property 'ea' does not exist on type 'ThemeManager'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(18,10): error TS2339: Property 'ea' does not exist on type 'ThemeManager'.
src\shared\theme-manager.ts(25,22): error TS2339: Property 'ea' does not exist on type 'ThemeManager'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(25,22): error TS2339: Property 'ea' does not exist on type 'ThemeManager'.
src\shared\theme-manager.ts(32,12): error TS2304: Cannot find name 'System'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(32,12): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(36,11): error TS2304: Cannot find name 'kendo'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(36,11): error TS2304: Cannot find name 'kendo'.
src\shared\theme-manager.ts(38,24): error TS2304: Cannot find name 'kendo'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(38,24): error TS2304: Cannot find name 'kendo'.
src\shared\theme-manager.ts(53,12): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(53,12): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(60,12): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(60,12): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(64,9): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(64,9): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(65,7): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(65,7): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(70,12): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(70,12): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(74,5): error TS2304: Cannot find name 'kendo'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(74,5): error TS2304: Cannot find name 'kendo'.
[22:03:10] TypeScript: 32 semantic errors
[22:03:10] TypeScript: emit succeeded (with errors)
[22:03:10] Finished 'build-system' after 3.92 s
[22:03:10] Finished 'build' after 3.98 s
[22:03:10] Starting 'serve'...
[BS] Access URLs:
 ----------------------------
 Local: http://localhost:9000
 ----------------------------
    UI: http://localhost:3001
 ----------------------------
[BS] Serving files from: .
[22:03:11] Finished 'serve' after 928 ms
[22:03:11] Starting 'watch'...
[22:03:11] Finished 'watch' after 37 ms

Would you please fix my code and explain to me what all I missed? I was clearly spoiled by the MOnterey experience, where I stepped into a syntactically correct set of Typescript files as I failed to observe what all you did there.

As an example of what confuses me is the maint.ts file which cannot resolve these imports

import {Settings} from 'settings';
import {ThemeManager} from 'shared/theme-manager';

as well as all other error messages shown above 👎

adriatic commented 7 years ago

Summary: Still left with 7 errors that would be better addressed by @JeroenVinke

This is the result of gulp watch on the app just checked in

[16:49:50] Finished 'build-html' after 206 ms
src\components\index.ts(1,21): error TS2307: Cannot find module 'https://aurelia-ui-toolkits.github.io/aurelia-kendoui-samples/samples.json!'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\index.ts(1,21): error TS2307: Cannot find module 'https://aurelia-ui-toolkits.github.io/aurelia-kendoui-samples/samples.json!'.
src\components\index.ts(20,11): error TS2345: Argument of type '{ name: any; route: any; moduleId: string; title: any; sample: any; category: any; }' is not assignable to parameter of type '{ name: string; route: string; redirect: string; }'.
  Object literal may only specify known properties, and 'moduleId' does not exist in type '{ name: string; route: string; redirect: string; }'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\index.ts(20,11): error TS2345: Argument of type '{ name: any; route: any; moduleId: string; title: any; sample: any; category: any; }' is not assignable to parameter of type '{ name: string; route: string; redirect: string; }'.
  Object literal may only specify known properties, and 'moduleId' does not exist in type '{ name: string; route: string; redirect: string; }'.
src\components\index.ts(37,10): error TS2339: Property 'router' does not exist on type 'Index'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\index.ts(37,10): error TS2339: Property 'router' does not exist on type 'Index'.
src\components\menu.ts(18,22): error TS2304: Cannot find name 'samples'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\menu.ts(18,22): error TS2304: Cannot find name 'samples'.
src\components\menu.ts(48,10): error TS2339: Property 'options' does not exist on type 'Menu'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\menu.ts(48,10): error TS2339: Property 'options' does not exist on type 'Menu'.
src\components\menu.ts(50,14): error TS2339: Property 'toggle' does not exist on type 'Menu'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\menu.ts(50,14): error TS2339: Property 'toggle' does not exist on type 'Menu'.
src\components\sample-runner.ts(6,26): error TS2307: Cannot find module 'aurelia-http-client'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\sample-runner.ts(6,26): error TS2307: Cannot find module 'aurelia-http-client'.
[16:49:52] TypeScript: 7 semantic errors

Objective

Render the subset of the demo-kendo UI, indicated below

image Image 1

Issues

1

Why this does not work in Typescript app and this works in Javascript app?

2

Because of failing to understand 1 above, I did not do any needed "massage" on that index.ts file. I would like to get this whole UI rendered by processing the information from 'https://aurelia-ui-toolkits.github.io/aurelia-kendoui-samples/samples.json!'; - and then I will modify that to fetch this equivalent information from here

@JeroenVinke - can you do this for me?

adriatic commented 7 years ago

Feedback on Jeroen's intervention

After I merged Jeroen's PR - I see this

image Image 1

indicating that Jeroen did not have the time to deal with all "pledges" I made, which would result with this screenshot instead (note that I deleted some of the top level menu entries, leaving just four). This UI will perfectly support the navigation to a specific aurelia component and its specific sample with just three (most often just two) clicks: select the component from the (multilevel) toolbar on the top and the sample from the sidebar which is defined by the component selection.

image Image 2

This task is further defined here and should be conducted at that place.

Thanood commented 7 years ago

I guess you know that already but there are no kendo styles applied to <nav-bar>. Is it possible that the bridge is not initialized successfully? No errors, though.

adriatic commented 7 years ago

I think that your diagnosis is correct (you can always check the needed behavior here, by running the demo-kendo app.

Menu is implemented as an Aurelia custom element, which is "consumed" by nav-bar custom element (they are linked here. Style is initially set to KendoUI default theme here and style changes are handled by the theme-manager.

My problems (wich made me ask for Jeroen's help) were in the area of importing files and modules in Typescript, so rather than trying all possible combinations, I hoped he will make the theme switching functional. As it is now, he just fixed my own syntax errors, without fixing my logical errors and adding the missing code.

Thanood commented 7 years ago

That one was easy. 😄 app.html only required nav-bar.html (as opposed to nav-bar) which led to the template loading but not its view-model. It's the view-model where kendo is initialized.

Thanood commented 7 years ago

image

adriatic commented 7 years ago

Totally awesome

Thanood commented 7 years ago

I did some more fixes, samples now load correctly but I had to "fix" samples.categories by declaring samples as any. No idea how to do that in the .d.ts file.

Also the layout is broken now. I'll take that on later.

image

Thanood commented 7 years ago

I've fixed the layout but I'm a little unsure because the original bridge doesn't have the problem. I also noticed that sample-runner is empty and provided the code necessary to build the sidebar on the left.

In theory this is very close to the UI posted in @adriatic's comment above but I'd like to do some further polish. Also currently, the routes don't behave correctly, f.i. the selected menu item stays active when changing routes.

Thanood commented 7 years ago

carmel

😃

JeroenVinke commented 7 years ago

👏