standalone editor component (#1502)

Author: DenysVuika

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "printWidth": 150
 }

README.md

@@ -15,15 +15,38 @@ that powers [VS Code](https://github.com/Microsoft/vscode).
 npm install @ngstack/code-editor
 ```
 
-## Integrating with Angular CLI project
+## Integrating with Standalone Angular Project
+
+Update the `app.config.ts` file to provide the code editor configuration:
+
+```ts
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideAnimationsAsync(),
+    
+    // Configure Code Editor
+    provideCodeEditor({
+      // editorVersion: '0.46.0',
+      // use local Monaco installation
+      baseUrl: 'assets/monaco',
+      // use local Typings Worker
+      typingsWorkerUrl: 'assets/workers/typings-worker.js'
+    })
+  ]
+};
+```
+
+## Integrating with Modules-based Angular Project
 
 Import `CodeEditorModule` into your main application module:
 
 ```ts
-import { CodeEditorModule } from '@ngstack/code-editor';
+import { provideCodeEditor } from '@ngstack/code-editor';
 
 @NgModule({
-  imports: [CodeEditorModule.forRoot()]
+  providers: [provideCodeEditor()]
 })
 export class AppModule {}
 ```
@@ -34,9 +57,11 @@ If not provided, the component is always going to use the `latest` version.
 > For a full list of Monaco versions and changes, please refer to the official [CHANGELOG.md](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md) file
 
 ```ts
+import { provideCodeEditor } from '@ngstack/code-editor';
+
 @NgModule({
-  imports: [
-    CodeEditorModule.forRoot({
+  providers: [
+    provideCodeEditor({
       editorVersion: '0.44.0'
     })
   ]
@@ -78,7 +103,7 @@ export class AppComponent {
 ## Input Properties
 
 | Name      | Type      | Default Value | Description                                                    |
-| --------- | --------- | ------------- | -------------------------------------------------------------- |
+|-----------|-----------|---------------|----------------------------------------------------------------|
 | theme     | string    | vs            | Editor theme. Supported values: `vs`, `vs-dark` or `hc-black`. |
 | options   | Object    | {...}         | Editor options.                                                |
 | readOnly  | boolean   | false         | Toggles readonly state of the editor.                          |
@@ -297,11 +322,11 @@ Update the `angular.json` file and append the following asset rule:
 Update the main application module and setup the service to use the custom `baseUrl` when application starts:
 
 ```ts
-import { CodeEditorModule } from '@ngstack/code-editor';
+import { provideCodeEditor } from '@ngstack/code-editor';
 
 @NgModule({
-  imports: [
-    CodeEditorModule.forRoot({
+  providers: [
+    provideCodeEditor({
       baseUrl: 'assets/monaco'
     })
   ]
@@ -324,9 +349,11 @@ Update the `angular.json` file and append the following asset rule:
 Then update the `CodeEditorService` configuration at the application startup:
 
 ```ts
+import { provideCodeEditor } from '@ngstack/code-editor';
+
 @NgModule({
-  imports: [
-    CodeEditorModule.forRoot({
+  providers: [
+    provideCodeEditor({
       typingsWorkerUrl: 'assets/workers/typings-worker.js'
     })
   ]
@@ -338,6 +365,6 @@ export class AppModule {}
 
 To enable Lazy Loading
 use `CodeEditorModule.forRoot()` in the main application,
-and `CodeEditorModule.forChild()` in all lazy-loaded feature modules.
+and `CodeEditorModule` in all lazy-loaded feature modules.
 
 For more details please refer to [Lazy Loading Feature Modules](https://angular.io/guide/lazy-loading-ngmodules)

angular.json

@@ -57,8 +57,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2.41MB",
-                  "maximumError": "2.5MB"
+                  "maximumWarning": "2.8MB",
+                  "maximumError": "3MB"
                 },
                 {
                   "type": "anyComponentStyle",

package-lock.json

@@ -51,6 +51,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "ng-packagr": "^18.1.0",
+    "prettier": "^3.3.3",
     "typescript": "5.5.4"
   }
 }

package.json

@@ -1,23 +1,35 @@
-import { NgModule, ModuleWithProviders, APP_INITIALIZER } from '@angular/core';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule, Provider } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CodeEditorComponent } from './code-editor/code-editor.component';
-import {
-  CodeEditorService,
-  EDITOR_SETTINGS,
-} from './services/code-editor.service';
+import { CodeEditorService, EDITOR_SETTINGS } from './services/code-editor.service';
+import { CodeEditorSettings } from './editor-settings';
 import { TypescriptDefaultsService } from './services/typescript-defaults.service';
 import { JavascriptDefaultsService } from './services/javascript-defaults.service';
-import { CodeEditorSettings } from './editor-settings';
 import { JsonDefaultsService } from './services/json-defaults.service';
 
 export function setupEditorService(service: CodeEditorService) {
-  const result = () => service.loadEditor();
-  return result;
+  return () => service.loadEditor();
 }
 
+export function provideCodeEditor(settings?: CodeEditorSettings): Provider[] {
+  return [
+    { provide: EDITOR_SETTINGS, useValue: settings },
+    CodeEditorService,
+    TypescriptDefaultsService,
+    JavascriptDefaultsService,
+    JsonDefaultsService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: setupEditorService,
+      deps: [CodeEditorService],
+      multi: true,
+    },
+  ];
+}
+
+/** @deprecated use `provideCodeEditor(settings)` instead */
 @NgModule({
-  imports: [CommonModule],
-  declarations: [CodeEditorComponent],
+  imports: [CommonModule, CodeEditorComponent],
   exports: [CodeEditorComponent],
 })
 export class CodeEditorModule {
@@ -29,9 +41,6 @@ export class CodeEditorModule {
       providers: [
         { provide: EDITOR_SETTINGS, useValue: settings },
         CodeEditorService,
-        TypescriptDefaultsService,
-        JavascriptDefaultsService,
-        JsonDefaultsService,
         {
           provide: APP_INITIALIZER,
           useFactory: setupEditorService,
@@ -41,10 +50,4 @@ export class CodeEditorModule {
       ],
     };
   }
-
-  static forChild(): ModuleWithProviders<CodeEditorModule> {
-    return {
-      ngModule: CodeEditorModule,
-    };
-  }
 }

projects/code-editor/src/lib/code-editor.module.spec.ts

@@ -2,9 +2,7 @@ import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 
 import { CodeEditorComponent } from './code-editor.component';
 import { CodeEditorService } from '../services/code-editor.service';
-import { TypescriptDefaultsService } from '../services/typescript-defaults.service';
-import { JavascriptDefaultsService } from '../services/javascript-defaults.service';
-import { CodeEditorModule } from '../code-editor.module';
+import { provideCodeEditor } from '../code-editor.module';
 
 describe('CodeEditorComponent', () => {
   let component: CodeEditorComponent;
@@ -13,12 +11,8 @@ describe('CodeEditorComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [CodeEditorModule.forRoot({ baseUrl: 'assets/monaco' })],
-      providers: [
-        CodeEditorService,
-        TypescriptDefaultsService,
-        JavascriptDefaultsService
-      ]
+      imports: [CodeEditorComponent],
+      providers: [provideCodeEditor({ baseUrl: 'assets/monaco' })]
     });
 
     codeEditorService = TestBed.inject(CodeEditorService);

projects/code-editor/src/lib/code-editor.module.ts

@@ -29,6 +29,7 @@ export interface CodeModelChangedEvent {
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'ngs-code-editor',
+  standalone: true,
   templateUrl: './code-editor.component.html',
   styleUrls: ['./code-editor.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,

projects/code-editor/src/lib/code-editor/code-editor.component.spec.ts

@@ -1,21 +1,24 @@
 import { Component } from '@angular/core';
-import { CodeModel } from '@ngstack/code-editor';
+import { CodeEditorComponent, CodeModel } from '@ngstack/code-editor';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, CodeEditorComponent],
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   file1: CodeModel = {
     language: 'text',
     value: 'left editor',
-    uri: 'left.txt',
+    uri: 'left.txt'
   };
 
   file2: CodeModel = {
     language: 'text',
     value: 'right editor',
-    uri: 'right.txt',
+    uri: 'right.txt'
   };
 }