Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the dependencies #27

Merged
merged 1 commit into from
Mar 16, 2021
Merged

Update the dependencies #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ cd examples/<example-folder>
npm install
npm link monaco-promql
npm start
# Then modify manually the monaco-promql import :/ "monaco-promql" -> "monaco-promql/lib"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that would be great actually to take some time to implement the issue #10. It would simplify a lot this process.
And this is something already done in codemirror-promql. So we can just (almost) copy and past what is there.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checking the repo I'm still not sure how you make npm link work, is it using build.sh and then cd lib && npm link ?

Moreover it seems that you are using a slightly outdated version of your project in your example normal ? 0.11.0 instead of 0.12.0

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh no for the development I'm using a vanilla that doesn't require /depend of any TS framework.

It's in the /app folder actually. So no need of creating a link a so on.

Copy link
Contributor Author

@celian-garcia celian-garcia Mar 16, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah ... in that particular case I wanted to make sure that my examples was always working :/ so I need to npm link it because it is not released. And I think that even if I create a vanilla example which don't need npm link, I'll still want to make this check everytime on other examples.

I will try what I said, if at least I can get rid of the final ugly manual step, it's acceptable to me.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well also you can said, since you are independ of a TS framework, then for sure it will work with Angular or with React.
Integration can be a bit tricky for some cases for sure, but as long as you don't depend of any lib from Angular / React and so you don't depend on a TS framework, then integration is defacto possible.

That's why you are creating a lib, and you won't test every possible framework. It's a good things to show how to integrate it. But your lib shouldn't be driven by how Angular is working. That's why it's a bit better to have a vanilla app instead to ease the development of the lib.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I spent so much time to make it work with Angular that I just wanted to provide more support than "hey look the config is that, by the way it is a nightmare to integrate, wish you all the best !"

Generally speaking I agree with you though. For example, react example was much easier and would be okay to even be removed or not as maintained as Angular example.

```

## Roadmap
Expand Down
98 changes: 42 additions & 56 deletions docs/angular_integration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,80 +4,66 @@ Add the these dependencies to your ``package.json`` :
- [prometheus-community/monaco-promql](https://github.com/prometheus-community/monaco-promql)

```bash
npm install ngx-monaco-editor --save
npm install @monaco-editor/loader --save
npm install monaco-promql --save
```

Add the glob to assets in your ``angular.json`` configuration file.
> **Disclaimer**
> I didn't manage to make a good plug-and-play integration for Angular.
> It is a bit a mess but so far it works, modify as you wish and propose enhancements !
```json
{
"projects": {
"my-project": {
"architect": {
"build": {
"options": {
"assets": [
{ "glob": "**/*", "input": "./node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" }
]
}
}
}
}
}
}
```

Integrate the language into the configuration of the angular module.
- Copy the homemade monaco module from the [angular example](./../examples/angular-promql/src/app/monaco).
- Mind the version of monaco-editor in the [MonacoLoaderService](./../examples/angular-promql/src/app/monaco/monaco-loader.service.ts).
It should be the same as the one in your [package.json](./../examples/angular-promql/package.json).
- Initialize monaco from your main angular module.

```typescript
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { MonacoEditorModule } from 'ngx-monaco-editor';
import { APP_INITIALIZER, NgModule } from '@angular/core';

import { promLanguageDefinition } from 'monaco-promql';
import { NgxMonacoEditorConfig } from 'ngx-monaco-editor';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

export function onMonacoLoad(): void {
// Register the PromQL language from the library
const languageId = promLanguageDefinition.id;
monaco.languages.register(promLanguageDefinition);
monaco.languages.onLanguage(languageId, () => {
promLanguageDefinition.loader().then((mod) => {
monaco.languages.setMonarchTokensProvider(languageId, mod.language);
monaco.languages.setLanguageConfiguration(languageId, mod.languageConfiguration);
monaco.languages.registerCompletionItemProvider(languageId, mod.completionItemProvider);
});
});
}
import { FormsModule } from '@angular/forms';
import { MonacoStoreService } from './monaco/monaco-store.service';
import { MonacoLoaderService } from './monaco/monaco-loader.service';
import { MonacoModule } from './monaco/monaco.module';

const monacoConfig: NgxMonacoEditorConfig = {
baseUrl: 'assets', // configure base path for monaco editor default: './assets'
defaultOptions: {scrollBeyondLastLine: false}, // pass default options to be used
onMonacoLoad
};
function initializeMonaco(loader: MonacoLoaderService, store: MonacoStoreService): () => Promise<void> {
return () => {
return loader.initialize().then(monaco => {
loader.registerPromQLLanguage(monaco);
store.monacoInstance = monaco;
});
};
}

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
MonacoEditorModule.forRoot(monacoConfig)
],
providers: [],
bootstrap: [AppComponent]
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
MonacoModule
],
providers: [
{
provide: APP_INITIALIZER,
multi: true,
deps: [MonacoLoaderService, MonacoStoreService],
useFactory: initializeMonaco
}
],
bootstrap: [AppComponent]
})
export class AppModule {
}
```

Implements now the editor as simply as using the ``ngx-monaco-editor`` component.
- Implements now the editor as simply as using the ``app-monaco-editor`` component.

```html
<ngx-monaco-editor [options]="{ theme: 'vs-dark', language: 'promql' }"
[(ngModel)]="sum(http_request_total)"></ngx-monaco-editor>
<app-monaco-editor [(ngModel)]="'sum(http_request_total)'"></app-monaco-editor>
```
1 change: 0 additions & 1 deletion examples/angular-promql/angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
Expand Down
Loading