@mzebley/mark-down-angular 1.2.1 → 1.2.3

package/README.md

@@ -1,5 +1,6 @@
 # mark↓ Angular Adapter
-*(published as `@mzebley/mark-down-angular`)*
+
+_(published as `@mzebley/mark-down-angular`)_
 
 Angular bindings for the [mark↓ core runtime](../core/README.md). This package wraps `SnippetClient` with Angular-friendly providers, services, and components so you can render Markdown snippets safely inside your application. For background on the monorepo, see the [root README](../../README.md).
 
@@ -29,14 +30,14 @@ You will also need a manifest generated by the [CLI](../cli/README.md).
 Provide a shared `SnippetClient` from your root bootstrap call or feature module:
 
 ```ts
-import { bootstrapApplication } from '@angular/platform-browser';
-import { provideSnippetClient } from '@mzebley/mark-down/angular';
+import { bootstrapApplication } from "@angular/platform-browser";
+import { provideSnippetClient } from "@mzebley/mark-down/angular";
 
 bootstrapApplication(AppComponent, {
   providers: [
     ...provideSnippetClient({
-      manifest: '/assets/content/snippets/manifest.json',
-      base: '/assets/content/snippets',
+      manifest: "/assets/content/snippets/manifest.json",
+      base: "/assets/content/snippets",
     }),
   ],
 });
@@ -46,12 +47,12 @@ bootstrapApplication(AppComponent, {
 
 ### Angular compatibility
 
-| Angular version | Status |
-| ---------------- | ------ |
-| 17.x             | ✅ Supported |
-| 18.x             | ✅ Supported |
-| 19.x             | ✅ Supported |
-| 20.x             | ✅ Supported |
+| Angular version | Status       |
+| --------------- | ------------ |
+| 17.x            | ✅ Supported |
+| 18.x            | ✅ Supported |
+| 19.x            | ✅ Supported |
+| 20.x            | ✅ Supported |
 
 The package declares peer dependency ranges `>=17 <21` so projects running any currently supported Angular major release can install without `--legacy-peer-deps`.
 
@@ -60,11 +61,11 @@ The package declares peer dependency ranges `>=17 <21` so projects running any c
 Inject `MarkdownSnippetService` into components or services to access Observables for snippets:
 
 ```ts
-import { Component, inject } from '@angular/core';
-import { MarkdownSnippetService } from '@mzebley/mark-down/angular';
+import { Component, inject } from "@angular/core";
+import { MarkdownSnippetService } from "@mzebley/mark-down/angular";
 
 @Component({
-  selector: 'docs-hero',
+  selector: "docs-hero",
   template: `
     <ng-container *ngIf="hero$ | async as hero">
       <h1>{{ hero.title }}</h1>
@@ -74,7 +75,7 @@ import { MarkdownSnippetService } from '@mzebley/mark-down/angular';
 })
 export class DocsHeroComponent {
   private readonly snippets = inject(MarkdownSnippetService);
-  readonly hero$ = this.snippets.get('getting-started-welcome');
+  readonly hero$ = this.snippets.get("getting-started-welcome");
 }
 ```
 
@@ -85,7 +86,10 @@ The service mirrors the core client APIs (`get`, `listAll`, `listByType`, `listB
 Render snippets declaratively with the bundled standalone component:
 
 ```html
-<snippet-view [slug]="'components-button'" (loaded)="onSnippetLoaded($event)"></snippet-view>
+<snippet-view
+  [slug]="'components-button'"
+  (loaded)="onSnippetLoaded($event)"
+></snippet-view>
 ```
 
 Features:
@@ -100,16 +104,17 @@ Features:
 When running in Angular Universal, supply a server-compatible fetch implementation:
 
 ```ts
-import fetch from 'node-fetch';
+import fetch from "node-fetch";
 
 provideSnippetClient({
-  manifest: () => import('../snippets-index.json'),
-  fetch: (url) => fetch(url).then((response) => {
-    if (!response.ok) {
-      throw new Error(`Request failed with status ${response.status}`);
-    }
-    return response;
-  }),
+  manifest: () => import("../snippets-index.json"),
+  fetch: (url) =>
+    fetch(url).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Request failed with status ${response.status}`);
+      }
+      return response;
+    }),
 });
 ```
 

package/dist/index.cjs

@@ -84,6 +84,9 @@ var SnippetViewComponent = class {
         if (!snippet) {
           return null;
         }
+        if (typeof window === "undefined") {
+          return this.sanitizer.bypassSecurityTrustHtml(snippet.html);
+        }
         const sanitized = import_dompurify.default.sanitize(snippet.html);
         return this.sanitizer.bypassSecurityTrustHtml(sanitized);
       })

package/dist/index.js

@@ -59,6 +59,9 @@ var SnippetViewComponent = class {
         if (!snippet) {
           return null;
         }
+        if (typeof window === "undefined") {
+          return this.sanitizer.bypassSecurityTrustHtml(snippet.html);
+        }
         const sanitized = DOMPurify.sanitize(snippet.html);
         return this.sanitizer.bypassSecurityTrustHtml(sanitized);
       })

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@mzebley/mark-down-angular",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "mark↓ Angular Adapter",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -20,9 +23,12 @@
     "build": "tsup src/index.ts --dts --format esm,cjs"
   },
   "dependencies": {
-    "@mzebley/mark-down": "^1.2.1",
+    "@mzebley/mark-down": "^1.2.2",
     "dompurify": "^3.0.9"
   },
+  "devDependencies": {
+    "@angular/platform-browser": ">=17 <21"
+  },
   "peerDependencies": {
     "@angular/common": ">=17 <21",
     "@angular/core": ">=17 <21",

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from "@mzebley/mark-down/angular";
-export * from "./token";
-export * from "./snippet.service";
-export * from "./snippet-view.component";

package/src/snippet-view.component.ts

@@ -1,61 +0,0 @@
-import { CommonModule } from "@angular/common";
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  inject
-} from "@angular/core";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
-import { BehaviorSubject, Observable, of } from "rxjs";
-import { catchError, map, shareReplay, switchMap, tap } from "rxjs/operators";
-import type { Snippet } from "@mzebley/mark-down";
-import { SnippetService } from "./snippet.service";
-import DOMPurify from "dompurify";
-
-@Component({
-  selector: "snippet-view",
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <ng-container *ngIf="content$ | async as html; else loading">
-      <div class="mark-down-snippet" [innerHTML]="html"></div>
-    </ng-container>
-    <ng-template #loading>
-      <div class="mark-down-snippet--loading">Loading snippet…</div>
-    </ng-template>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class SnippetViewComponent implements OnChanges {
-  private readonly slug$ = new BehaviorSubject<string | null>(null);
-  private readonly sanitizer = inject(DomSanitizer);
-  private readonly snippets = inject(SnippetService);
-
-  @Input() slug?: string;
-  @Output() readonly loaded = new EventEmitter<Snippet | undefined>();
-
-  private readonly snippet$: Observable<Snippet | null> = this.slug$.pipe(
-    switchMap((slug) =>
-      slug ? this.snippets.get(slug).pipe(catchError(() => of(null))) : of(null)
-    ),
-    tap((snippet) => this.loaded.emit(snippet ?? undefined)),
-    shareReplay({ bufferSize: 1, refCount: true })
-  );
-
-  readonly content$: Observable<SafeHtml | null> = this.snippet$.pipe(
-    map((snippet) => {
-      if (!snippet) {
-        return null;
-      }
-      const sanitized = DOMPurify.sanitize(snippet.html);
-      return this.sanitizer.bypassSecurityTrustHtml(sanitized);
-    })
-  );
-
-  ngOnChanges(): void {
-    this.slug$.next(this.slug ?? null);
-  }
-}

package/src/snippet.service.ts

@@ -1 +0,0 @@
-export { MarkdownSnippetService as SnippetService } from "@mzebley/mark-down/angular";

package/src/token.ts

@@ -1,14 +0,0 @@
-import type { Provider } from "@angular/core";
-import {
-  SNIPPET_CLIENT,
-  SNIPPET_CLIENT_OPTIONS,
-  provideSnippetClient,
-  type SnippetClientOptions
-} from "@mzebley/mark-down/angular";
-
-export const MARK_DOWN_CLIENT = SNIPPET_CLIENT;
-export const MARK_DOWN_OPTIONS = SNIPPET_CLIENT_OPTIONS;
-
-export function provideMarkDown(options: SnippetClientOptions): Provider[] {
-  return provideSnippetClient(options);
-}

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "baseUrl": ".",
-    "paths": {
-      "@mzebley/mark-down": ["../core/src/index.ts"],
-      "@mzebley/mark-down/angular": ["../core/src/angular/index.ts"],
-      "@mzebley/mark-down/browser": ["../core/src/browser.ts"],
-      "@mzebley/mark-down/slug": ["../core/src/slug.ts"]
-    }
-  },
-  "include": ["src/**/*"]
-}