Merge pull request #15 from ericleib/dev/standalone

Migration to standalone components

Author: ericleib

README.md

@@ -3,18 +3,18 @@
 
 # ngx-remark
 
-**ngx-remark** is a library that allows to render Markdown with custom Angular components and templates.
+**ngx-remark** is a lightweight library that renders Markdown using **native Angular components and templates**.
 
-Most libraries for rendering Markdown in Angular first transform the Markdown to HTML and then use the `innerHTML` attribute to render the HTML. The problem of this approach is that there is no way to use Angular components or directives in any part of the generated HTML.
+Most Markdown libraries for Angular convert the source to HTML and then bind it with `[innerHTML]`. The problem with this approach is that the resulting HTML lives outside Angular's component tree — you cannot use Angular components, directives, pipes, or dependency injection inside it.
 
-In contrast, this library uses [Remark](https://remark.js.org/) to parse the Markdown into an abstract syntax tree (AST) and then uses Angular to render the AST as HTML. The `<remark>` component renders all standard Markdown elements with default built-in templates, but it also allows to override the templates for any element.
+**ngx-remark** takes a different route. It uses [Remark](https://remark.js.org/) to parse Markdown into an AST, then renders that tree with real Angular templates. The `<remark>` component ships with clean default templates for every standard Markdown element, but **you can override any of them** with your own components.
 
 Typical use cases include:
 
-- Displaying code blocks with a custom code editor.
-- Displaying custom tooltips over certain elements.
-- Allowing custom actions with buttons or links.
-- Integration with Angular features, like the [`Router`](#router-integration).
+- Rendering code blocks with a full-featured editor (e.g. Monaco, CodeMirror)
+- Adding interactive tooltips, popovers, or badges on specific elements
+- Turning links or buttons into Angular-powered actions (routing, modals, etc.)
+- Deep integration with Angular features like the [`Router`](#router-integration), forms, or signals
 
 ## Demo
 
@@ -32,7 +32,7 @@ npm install ngx-remark remark
 
 ## Importing the library
 
-Import the `RemarkModule` in your standalone component or module:
+Import `RemarkModule` in your standalone component or module:
 
 ```typescript
 import { RemarkModule } from 'ngx-remark';
@@ -45,6 +45,8 @@ import { RemarkModule } from 'ngx-remark';
 export class App { }
 ```
 
+Note: `RemarkModule` is a bundle of `RemarkComponent`, `RemarkNodeComponent` and `RemarkTemplateDirective`. You may also import these components individually, but in most cases you will need the three of them together.
+
 ## Usage
 
 Use the `<remark>` component to render Markdown:

projects/demo/src/app/app.component.ts

@@ -37,7 +37,7 @@ export class AppComponent {
       if(state.mathExpressions) {
         processor = processor.use(remarkMath);
       }
-      return {processor, ...state}
+      return {processor, ...state};
     })
   )
 }

projects/lib/karma.conf.js

@@ -10,14 +10,15 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      
+
     ],
     client: {
       jasmine: {
         // you can add configuration options for Jasmine here
         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
+        random: false
       },
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },

projects/lib/package.json

@@ -1,14 +1,14 @@
 {
   "name": "ngx-remark",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": {
     "name": "Eric Leibenguth",
     "email": "eric.leibenguth@gmail.com",
     "url": "https://github.com/ericleib",
     "github": "ericleib",
     "twitter": "EricLeibenguth"
   },
-  "description": "Angular component for rendering custom markdown using Remark",
+  "description": "Lightweight Angular component for rendering Markdown using Remark",
   "keywords": [
     "angular",
     "remark",

projects/lib/src/plugins/heading.component.ts

@@ -2,9 +2,21 @@
  * Public API Surface of lib
  */
 
-export * from './remark.module';
-export * from './remark.component';
-export * from './remark-template.directive';
-export * from './remark-node.component';
+import { RemarkComponent } from './remark.component';
+import { RemarkNodeComponent } from './remark-node.component';
+import { RemarkTemplateDirective } from './remark-template.directive';
+
+export {
+  RemarkComponent,
+  RemarkNodeComponent,
+  RemarkTemplateDirective
+};
+
+export const RemarkModule = [
+  RemarkComponent,
+  RemarkNodeComponent,
+  RemarkTemplateDirective,
+] as const;
+
 export * from './remark-templates.service';
 export * from './plugins';

projects/lib/src/public-api.ts

@@ -1,11 +1,12 @@
 
-<!-- 
+<!--
   For each child, display its custom template or default one.
   Tracking by index means that DOM elements are reused even when the node type and content is different.
   Changes should still be reflected because of the @Input() node binding.
  -->
+@let templates = templateService.templates();
 @for (child of children(); track $index) {
-  <ng-container *ngTemplateOutlet="templates()[child.type] ?? defaultTpl; context: { $implicit: child , parent: node()}">
+  <ng-container *ngTemplateOutlet="templates[child.type] ?? defaultTpl; context: { $implicit: child , parent: node()}">
   </ng-container>
 }
 

projects/lib/src/remark-node.component.html

@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RemarkNodeComponent } from './remark-node.component';
 import { RemarkTemplatesService } from './remark-templates.service';
 import { RemarkComponent } from './remark.component';
-import { RemarkTemplateDirective } from './remark-template.directive';
 import { Root } from 'mdast';
 
 function getNode(text: string, heading = 0) {
@@ -18,46 +17,41 @@ function getNode(text: string, heading = 0) {
   } as Root;
 }
 
-class RemarkNodeComponentInit extends RemarkNodeComponent {
-  ngOnInit() {}
-  ngOnChanges() {}
-}
-
 describe('RemarkNodeComponent', () => {
-  let component: RemarkNodeComponentInit;
-  let fixture: ComponentFixture<RemarkNodeComponentInit>;
+  let component: RemarkNodeComponent;
+  let fixture: ComponentFixture<RemarkNodeComponent>;
 
   beforeEach(() => {
     // Create testing module
     TestBed.configureTestingModule({
-      declarations: [RemarkComponent, RemarkNodeComponentInit, RemarkTemplateDirective],
+      imports: [RemarkComponent, RemarkNodeComponent],
       providers: [RemarkTemplatesService]
     });
 
     // Create an instance of RemarkComponent, to access an instance of the TemplateService
     const parentFixture = TestBed.createComponent(RemarkComponent);
-    parentFixture.componentRef.setInput('markdown', '# Hello')
+    parentFixture.componentRef.setInput('markdown', '# Hello');
     parentFixture.detectChanges();
-    
-    // Create an instance of RemarkNodeComponentInit for testing
-    spyOn(RemarkNodeComponentInit.prototype, 'ngOnInit' as any);
-    spyOn(RemarkNodeComponentInit.prototype, 'ngOnChanges' as any);
-    fixture = TestBed.createComponent(RemarkNodeComponentInit);
+
+    // Create an instance of RemarkNodeComponent for testing
+    spyOn(RemarkNodeComponent.prototype, 'ngOnInit');
+    spyOn(RemarkNodeComponent.prototype, 'ngOnChanges');
+    fixture = TestBed.createComponent(RemarkNodeComponent);
     component = fixture.componentInstance;
     component.templateService = parentFixture.componentInstance.remarkTemplatesService;
   });
 
   describe('with paragraph', () => {
 
-    beforeEach(() => {        
+    beforeEach(() => {
       fixture.componentRef.setInput('remarkNode', getNode('Hello'));
       fixture.detectChanges();
     });
 
     it('should create', () => {
       expect(component).toBeTruthy();
-      expect(RemarkNodeComponentInit.prototype.ngOnInit).toHaveBeenCalledTimes(2);    // one for root and one for paragraph
-      expect(RemarkNodeComponentInit.prototype.ngOnChanges).toHaveBeenCalledTimes(2); // one for root and one for paragraph
+      expect(RemarkNodeComponent.prototype.ngOnInit).toHaveBeenCalledTimes(2);    // one for root and one for paragraph
+      expect(RemarkNodeComponent.prototype.ngOnChanges).toHaveBeenCalledTimes(2); // one for root and one for paragraph
     });
 
     it('should render paragraph', () => {
@@ -69,8 +63,8 @@ describe('RemarkNodeComponent', () => {
       const el = fixture.nativeElement.querySelector('p');
       fixture.componentRef.setInput('remarkNode', getNode('World'));
       fixture.detectChanges();
-      expect(RemarkNodeComponentInit.prototype.ngOnInit).toHaveBeenCalledTimes(2);    // one for root and one for paragraph initially
-      expect(RemarkNodeComponentInit.prototype.ngOnChanges).toHaveBeenCalledTimes(4); // then new root and new paragraph
+      expect(RemarkNodeComponent.prototype.ngOnInit).toHaveBeenCalledTimes(2);    // one for root and one for paragraph initially
+      expect(RemarkNodeComponent.prototype.ngOnChanges).toHaveBeenCalledTimes(4); // then new root and new paragraph
       expect(fixture.nativeElement.querySelector('p')?.textContent).toContain('World');
       expect(fixture.nativeElement.querySelector('p')).toBe(el); // The element should be reused
     });
@@ -79,8 +73,8 @@ describe('RemarkNodeComponent', () => {
       const el = fixture.nativeElement.querySelector('p');
       fixture.componentRef.setInput('remarkNode', getNode('World', 2));
       fixture.detectChanges();
-      expect(RemarkNodeComponentInit.prototype.ngOnInit).toHaveBeenCalledTimes(3);    // one for root and one for paragraph initially, then the new heading
-      expect(RemarkNodeComponentInit.prototype.ngOnChanges).toHaveBeenCalledTimes(4); // then new root and new paragraph
+      expect(RemarkNodeComponent.prototype.ngOnInit).toHaveBeenCalledTimes(3);    // one for root and one for paragraph initially, then the new heading
+      expect(RemarkNodeComponent.prototype.ngOnChanges).toHaveBeenCalledTimes(4); // then new root and new paragraph
       expect(fixture.nativeElement.querySelector('h2')?.textContent).toContain('World');
       expect(fixture.nativeElement.querySelector('p')).toBeFalsy();
       expect(fixture.nativeElement.querySelector('h2')).not.toBe(el);

projects/lib/src/remark-node.component.spec.ts

@@ -1,22 +1,22 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
 import { Node, Parent } from "mdast";
 import { RemarkTemplatesService } from "./remark-templates.service";
 
 @Component({
   selector: "remark-node, [remarkNode]",
   templateUrl: "./remark-node.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false
+  imports: [NgTemplateOutlet]
 })
 export class RemarkNodeComponent {
   templateService = inject(RemarkTemplatesService);
 
   readonly node = input.required<Node>({ alias: "remarkNode" });
 
-  readonly children = computed(() => (this.node() as Parent).children)
-
-  get templates() {
-    return this.templateService.templates;
-  }
+  readonly children = computed(() => (this.node() as Parent).children);
 
+  // Note: implemented solely for the purpose of tests (to use spyOn)
+  ngOnInit() {}
+  ngOnChanges() {}
 }

projects/lib/src/remark-node.component.ts

@@ -2,7 +2,6 @@ import { Directive, TemplateRef, inject, input } from "@angular/core";
 
 @Directive({
   selector: "[remarkTemplate]",
-  standalone: false
 })
 export class RemarkTemplateDirective {
   readonly template = inject<TemplateRef<any>>(TemplateRef);