@ng-native/components 0.5.0 → 0.7.0

package/dist/markdown.js

@@ -0,0 +1,338 @@
+/**
+ * Markdown, drawn as native views and text.
+ *
+ * Its own entry point because it parses with `marked`, an optional peer dependency an app installs
+ * only when it renders Markdown: the barrel never imports it, so an app that does not is not asked
+ * for it.
+ *
+ * ```ts
+ * import { Markdown } from '@ng-native/components/markdown';
+ * ```
+ */
+import { Component, Injector, computed, inject, input, linkedSignal, output } from '@angular/core';
+import { DeepLinks } from '@ng-native/device';
+import { nativePlatform } from '@ng-native/fabric';
+import { lexer } from 'marked';
+import { Image } from "./image.js";
+import { markdownBlocks, opensOnPress, } from "./markdown-blocks.js";
+import { ScrollView } from "./scroll-view.js";
+import { TemplateSlot } from "./template-slot.js";
+import { Text } from "./text.js";
+import { View } from "./view.js";
+import * as i0 from "@angular/core";
+const ELEMENTS = [
+    ...['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'ul', 'ol', 'li', 'marker'],
+    ...['pre', 'code', 'strong', 'em', 'del', 'a', 'hr', 'img', 'table', 'tr', 'th', 'td'],
+];
+const DEFAULT_CLASSES = Object.fromEntries(ELEMENTS.map((element) => [element, `md-${element}`]));
+/** Every image address in `blocks`, however deep in quotes and lists. */
+function imageSources(blocks, into = new Set()) {
+    for (const block of blocks) {
+        if (block.kind === 'image')
+            into.add(block.src);
+        else if (block.kind === 'blockquote')
+            imageSources(block.children, into);
+        else if (block.kind === 'list') {
+            for (const item of block.items)
+                imageSources(item.children, into);
+        }
+    }
+    return into;
+}
+/**
+ * A Markdown document as `<text>`, `<view>`, `<image>` and `<scroll-view>`: headings, paragraphs,
+ * emphasis, inline code, links, quotes, ordered, unordered and task lists, code blocks, rules,
+ * tables and images.
+ *
+ * `source` is parsed with `marked.lexer`; `tokens` takes tokens lexed already, and wins when both
+ * are set. A paragraph is one `<text>` with a nested `<text>` for each emphasis, code span and
+ * link, so it wraps as one run; an image is lifted out to a block of its own.
+ *
+ * Nothing in the document is interpreted. Raw HTML is drawn as the text it is written as, a link
+ * is followed only to `http`, `https`, `mailto`, `tel` or a relative target, and an image is
+ * loaded only over `http` or `https`; anything else is drawn as its text.
+ *
+ * Each element carries a default class, `md-h1`, `md-p`, `md-a` and so on, styled in light and
+ * dark. `classes` replaces one by its element's name, so a global stylesheet or Tailwind styles it
+ * instead: `{ h1: 'text-3xl font-bold' }`. Put the default back beside your own to keep both.
+ *
+ * A pressed link is `(linkPress)`. An absolute target is then opened with `DeepLinks.open` unless
+ * a handler calls `preventDefault()`; a relative one is only reported, for the app to route.
+ */
+export class Markdown {
+    injector = inject(Injector);
+    /** Which monospace font code is drawn in, as the platform names it. */
+    platform = nativePlatform();
+    /** The Markdown to draw. */
+    source = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
+    /** Tokens `marked.lexer` made already, drawn in place of `source`. */
+    tokens = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tokens" }] : /* istanbul ignore next */ []));
+    /** A class for an element, in place of its default. See the class note. */
+    classes = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** A link was pressed. See the class note. */
+    linkPress = output();
+    blocks = computed(() => markdownBlocks(this.tokens() ?? lexer(this.source() ?? '')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    classOf = computed(() => ({ ...DEFAULT_CLASSES, ...this.classes() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classOf" }] : /* istanbul ignore next */ []));
+    /**
+     * Each image's width over its height, once it has loaded, so it is drawn at the page's width and
+     * its own shape. An image the document no longer has is forgotten when the document changes.
+     */
+    ratios = linkedSignal({ ...(ngDevMode ? { debugName: "ratios" } : /* istanbul ignore next */ {}), source: this.blocks,
+        computation: (blocks, previous) => {
+            const kept = new Map();
+            if (!previous)
+                return kept;
+            const present = imageSources(blocks);
+            for (const [src, ratio] of previous.value)
+                if (present.has(src))
+                    kept.set(src, ratio);
+            return kept;
+        } });
+    classFor(element) {
+        return this.classOf()[element];
+    }
+    sizeImage(src, event) {
+        const source = event.nativeEvent?.source;
+        if (!source)
+            return;
+        const { width, height } = source;
+        if (!(width > 0 && height > 0))
+            return;
+        this.ratios.update((ratios) => new Map(ratios).set(src, width / height));
+    }
+    followLink(link) {
+        let prevented = false;
+        this.linkPress.emit({
+            href: link.href,
+            title: link.title,
+            preventDefault: () => {
+                prevented = true;
+            },
+        });
+        if (!prevented && opensOnPress(link.href))
+            this.injector.get(DeepLinks).open(link.href);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Markdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: Markdown, isStandalone: true, selector: "markdown", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkPress: "linkPress" }, host: { properties: { "class.md-ios": "platform === 'ios'", "class.md-android": "platform === 'android'" } }, ngImport: i0, template: `
+    <ng-template #blockTemplate let-list>
+      @for (block of list; track $index) {
+        @switch (block.kind) {
+          @case ('heading') {
+            <text [class]="classFor(block.element)" accessibilityRole="header"
+              ><ng-container *templateSlot="inlineTemplate; context: { $implicit: block.children }"
+            /></text>
+          }
+          @case ('paragraph') {
+            <text [class]="classFor('p')"
+              ><ng-container *templateSlot="inlineTemplate; context: { $implicit: block.children }"
+            /></text>
+          }
+          @case ('image') {
+            <image
+              [src]="block.src"
+              [alt]="block.alt || undefined"
+              resizeMode="contain"
+              [class]="classFor('img')"
+              [style.aspectRatio]="ratios().get(block.src) ?? null"
+              [style.height]="ratios().has(block.src) ? 'auto' : null"
+              (load)="sizeImage(block.src, $any($event))"
+            />
+          }
+          @case ('blockquote') {
+            <view [class]="classFor('blockquote')">
+              <ng-container *templateSlot="blockTemplate; context: { $implicit: block.children }" />
+            </view>
+          }
+          @case ('list') {
+            <view [class]="classFor(block.element)">
+              @for (item of block.items; track $index) {
+                <view [class]="classFor('li')">
+                  <text [class]="classFor('marker')">{{ item.marker }}</text>
+                  <view class="md-li-body">
+                    <ng-container
+                      *templateSlot="blockTemplate; context: { $implicit: item.children }"
+                    />
+                  </view>
+                </view>
+              }
+            </view>
+          }
+          @case ('code') {
+            <scroll-view horizontal [class]="classFor('pre')">
+              <text selectable class="md-pre-text">{{ block.text }}</text>
+            </scroll-view>
+          }
+          @case ('hr') {
+            <view [class]="classFor('hr')"></view>
+          }
+          @case ('table') {
+            <view [class]="classFor('table')">
+              <view [class]="classFor('tr')">
+                @for (cell of block.header; track $index) {
+                  <text [class]="classFor('th')"
+                    ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
+                  /></text>
+                }
+              </view>
+              @for (row of block.rows; track $index) {
+                <view [class]="classFor('tr')">
+                  @for (cell of row; track $index) {
+                    <text [class]="classFor('td')"
+                      ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
+                    /></text>
+                  }
+                </view>
+              }
+            </view>
+          }
+        }
+      }
+    </ng-template>
+
+    <ng-template #inlineTemplate let-runs>
+      @for (run of runs; track $index) {
+        @switch (run.kind) {
+          @case ('text') {
+            <ng-container>{{ run.text }}</ng-container>
+          }
+          @case ('code') {
+            <text [class]="classFor('code')">{{ run.text }}</text>
+          }
+          @case ('link') {
+            <text
+              [class]="classFor('a')"
+              pressable
+              [accessibilityHint]="run.title ?? undefined"
+              (press)="followLink(run)"
+              ><ng-container *templateSlot="inlineTemplate; context: { $implicit: run.children }"
+            /></text>
+          }
+          @default {
+            <text [class]="classFor(run.kind)"
+              ><ng-container *templateSlot="inlineTemplate; context: { $implicit: run.children }"
+            /></text>
+          }
+        }
+      }
+    </ng-template>
+
+    <ng-container *templateSlot="blockTemplate; context: { $implicit: blocks() }" />
+  `, isInline: true, styles: ["/* What a document looks like with no `classes` of the app's, in light and in dark. */\n\n:host {\n  gap: 12px;\n  color: #1c1c1e;\n}\n\n.md-h1,\n.md-h2,\n.md-h3,\n.md-h4,\n.md-h5,\n.md-h6 {\n  font-weight: 700;\n}\n\n.md-h1 {\n  font-size: 28px;\n  line-height: 34px;\n}\n\n.md-h2 {\n  font-size: 22px;\n  line-height: 28px;\n}\n\n.md-h3 {\n  font-size: 20px;\n  line-height: 25px;\n}\n\n.md-h4 {\n  font-size: 17px;\n  line-height: 22px;\n}\n\n.md-h5 {\n  font-size: 15px;\n  line-height: 20px;\n}\n\n.md-h6 {\n  font-size: 13px;\n  line-height: 18px;\n  color: #6c6c70;\n}\n\n.md-p,\n.md-marker,\n.md-th,\n.md-td {\n  font-size: 16px;\n  line-height: 23px;\n}\n\n.md-strong {\n  font-weight: 700;\n}\n\n.md-em {\n  font-style: italic;\n}\n\n.md-del {\n  text-decoration-line: line-through;\n}\n\n.md-a {\n  color: #0a66d8;\n  text-decoration-line: underline;\n}\n\n.md-code {\n  background-color: rgba(120, 120, 128, 0.16);\n}\n\n.md-code,\n.md-pre {\n  font-family: Courier New;\n}\n\n:host(.md-ios) .md-code,\n:host(.md-ios) .md-pre {\n  font-family: Menlo;\n}\n\n:host(.md-android) .md-code,\n:host(.md-android) .md-pre {\n  font-family: monospace;\n}\n\n.md-blockquote {\n  gap: 8px;\n  padding-left: 12px;\n  border-left-width: 3px;\n  border-left-color: #d1d1d6;\n  color: #6c6c70;\n}\n\n.md-ul,\n.md-ol {\n  gap: 4px;\n}\n\n.md-li {\n  flex-direction: row;\n  gap: 8px;\n}\n\n.md-marker {\n  min-width: 16px;\n}\n\n.md-li-body {\n  flex: 1;\n  gap: 4px;\n}\n\n.md-pre {\n  flex-grow: 0;\n  border-radius: 8px;\n  background-color: #f2f2f7;\n}\n\n.md-pre-text {\n  padding: 12px;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.md-hr {\n  height: 1px;\n  background-color: #d1d1d6;\n}\n\n.md-img {\n  width: 100%;\n  height: 200px;\n  border-radius: 8px;\n}\n\n.md-table {\n  border-width: 1px;\n  border-color: #d1d1d6;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.md-tr {\n  flex-direction: row;\n}\n\n.md-th,\n.md-td {\n  flex: 1;\n  padding: 6px 8px;\n}\n\n.md-td {\n  border-top-width: 1px;\n  border-top-color: #d1d1d6;\n}\n\n.md-th {\n  font-weight: 600;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    color: #f2f2f7;\n  }\n\n  .md-h6,\n  .md-blockquote {\n    color: #98989f;\n  }\n\n  .md-a {\n    color: #4c9bff;\n  }\n\n  .md-code {\n    background-color: rgba(120, 120, 128, 0.32);\n  }\n\n  .md-pre {\n    background-color: #1c1c1e;\n  }\n\n  .md-blockquote,\n  .md-table,\n  .md-td {\n    border-color: #38383a;\n  }\n\n  .md-hr {\n    background-color: #38383a;\n  }\n}\n"], dependencies: [{ kind: "directive", type: Image, selector: "image", inputs: ["source", "src", "srcSet", "defaultSource", "loadingIndicatorSource", "resizeMode", "resizeMethod", "resizeMultiplier", "blurRadius", "capInsets", "tintColor", "fadeDuration", "progressiveRenderingEnabled", "alt", "crossOrigin", "referrerPolicy"] }, { kind: "component", type: ScrollView, selector: "scroll-view", inputs: ["contentContainerStyle", "contentContainerClass", "horizontal", "contentOffset", "maintainVisibleContentPosition", "keyboardShouldPersistTaps", "nestedScrollEnabled", "stickyHeaderIndices"], outputs: ["contentSizeChange"], exportAs: ["scrollView"] }, { kind: "directive", type: TemplateSlot, selector: "[templateSlot]", inputs: ["templateSlot", "templateSlotContext"] }, { kind: "directive", type: Text, selector: "text", inputs: ["numberOfLines", "ellipsizeMode", "selectable", "selectionColor", "allowFontScaling", "maxFontSizeMultiplier", "dynamicTypeRamp", "adjustsFontSizeToFit", "minimumFontScale", "lineBreakStrategyIOS", "textBreakStrategy", "dataDetectorType", "android_hyphenationFrequency", "pressable", "suppressHighlighting"], exportAs: ["text"] }, { kind: "directive", type: View, selector: "view" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Markdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'markdown', imports: [Image, ScrollView, TemplateSlot, Text, View], template: `
+    <ng-template #blockTemplate let-list>
+      @for (block of list; track $index) {
+        @switch (block.kind) {
+          @case ('heading') {
+            <text [class]="classFor(block.element)" accessibilityRole="header"
+              ><ng-container *templateSlot="inlineTemplate; context: { $implicit: block.children }"
+            /></text>
+          }
+          @case ('paragraph') {
+            <text [class]="classFor('p')"
+              ><ng-container *templateSlot="inlineTemplate; context: { $implicit: block.children }"
+            /></text>
+          }
+          @case ('image') {
+            <image
+              [src]="block.src"
+              [alt]="block.alt || undefined"
+              resizeMode="contain"
+              [class]="classFor('img')"
+              [style.aspectRatio]="ratios().get(block.src) ?? null"
+              [style.height]="ratios().has(block.src) ? 'auto' : null"
+              (load)="sizeImage(block.src, $any($event))"
+            />
+          }
+          @case ('blockquote') {
+            <view [class]="classFor('blockquote')">
+              <ng-container *templateSlot="blockTemplate; context: { $implicit: block.children }" />
+            </view>
+          }
+          @case ('list') {
+            <view [class]="classFor(block.element)">
+              @for (item of block.items; track $index) {
+                <view [class]="classFor('li')">
+                  <text [class]="classFor('marker')">{{ item.marker }}</text>
+                  <view class="md-li-body">
+                    <ng-container
+                      *templateSlot="blockTemplate; context: { $implicit: item.children }"
+                    />
+                  </view>
+                </view>
+              }
+            </view>
+          }
+          @case ('code') {
+            <scroll-view horizontal [class]="classFor('pre')">
+              <text selectable class="md-pre-text">{{ block.text }}</text>
+            </scroll-view>
+          }
+          @case ('hr') {
+            <view [class]="classFor('hr')"></view>
+          }
+          @case ('table') {
+            <view [class]="classFor('table')">
+              <view [class]="classFor('tr')">
+                @for (cell of block.header; track $index) {
+                  <text [class]="classFor('th')"
+                    ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
+                  /></text>
+                }
+              </view>
+              @for (row of block.rows; track $index) {
+                <view [class]="classFor('tr')">
+                  @for (cell of row; track $index) {
+                    <text [class]="classFor('td')"
+                      ><ng-container *templateSlot="inlineTemplate; context: { $implicit: cell }"
+                    /></text>
+                  }
+                </view>
+              }
+            </view>
+          }
+        }
+      }
+    </ng-template>
+
+    <ng-template #inlineTemplate let-runs>
+      @for (run of runs; track $index) {
+        @switch (run.kind) {
+          @case ('text') {
+            <ng-container>{{ run.text }}</ng-container>
+          }
+          @case ('code') {
+            <text [class]="classFor('code')">{{ run.text }}</text>
+          }
+          @case ('link') {
+            <text
+              [class]="classFor('a')"
+              pressable
+              [accessibilityHint]="run.title ?? undefined"
+              (press)="followLink(run)"
+              ><ng-container *templateSlot="inlineTemplate; context: { $implicit: run.children }"
+            /></text>
+          }
+          @default {
+            <text [class]="classFor(run.kind)"
+              ><ng-container *templateSlot="inlineTemplate; context: { $implicit: run.children }"
+            /></text>
+          }
+        }
+      }
+    </ng-template>
+
+    <ng-container *templateSlot="blockTemplate; context: { $implicit: blocks() }" />
+  `, host: {
+                        '[class.md-ios]': "platform === 'ios'",
+                        '[class.md-android]': "platform === 'android'",
+                    }, styles: ["/* What a document looks like with no `classes` of the app's, in light and in dark. */\n\n:host {\n  gap: 12px;\n  color: #1c1c1e;\n}\n\n.md-h1,\n.md-h2,\n.md-h3,\n.md-h4,\n.md-h5,\n.md-h6 {\n  font-weight: 700;\n}\n\n.md-h1 {\n  font-size: 28px;\n  line-height: 34px;\n}\n\n.md-h2 {\n  font-size: 22px;\n  line-height: 28px;\n}\n\n.md-h3 {\n  font-size: 20px;\n  line-height: 25px;\n}\n\n.md-h4 {\n  font-size: 17px;\n  line-height: 22px;\n}\n\n.md-h5 {\n  font-size: 15px;\n  line-height: 20px;\n}\n\n.md-h6 {\n  font-size: 13px;\n  line-height: 18px;\n  color: #6c6c70;\n}\n\n.md-p,\n.md-marker,\n.md-th,\n.md-td {\n  font-size: 16px;\n  line-height: 23px;\n}\n\n.md-strong {\n  font-weight: 700;\n}\n\n.md-em {\n  font-style: italic;\n}\n\n.md-del {\n  text-decoration-line: line-through;\n}\n\n.md-a {\n  color: #0a66d8;\n  text-decoration-line: underline;\n}\n\n.md-code {\n  background-color: rgba(120, 120, 128, 0.16);\n}\n\n.md-code,\n.md-pre {\n  font-family: Courier New;\n}\n\n:host(.md-ios) .md-code,\n:host(.md-ios) .md-pre {\n  font-family: Menlo;\n}\n\n:host(.md-android) .md-code,\n:host(.md-android) .md-pre {\n  font-family: monospace;\n}\n\n.md-blockquote {\n  gap: 8px;\n  padding-left: 12px;\n  border-left-width: 3px;\n  border-left-color: #d1d1d6;\n  color: #6c6c70;\n}\n\n.md-ul,\n.md-ol {\n  gap: 4px;\n}\n\n.md-li {\n  flex-direction: row;\n  gap: 8px;\n}\n\n.md-marker {\n  min-width: 16px;\n}\n\n.md-li-body {\n  flex: 1;\n  gap: 4px;\n}\n\n.md-pre {\n  flex-grow: 0;\n  border-radius: 8px;\n  background-color: #f2f2f7;\n}\n\n.md-pre-text {\n  padding: 12px;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.md-hr {\n  height: 1px;\n  background-color: #d1d1d6;\n}\n\n.md-img {\n  width: 100%;\n  height: 200px;\n  border-radius: 8px;\n}\n\n.md-table {\n  border-width: 1px;\n  border-color: #d1d1d6;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.md-tr {\n  flex-direction: row;\n}\n\n.md-th,\n.md-td {\n  flex: 1;\n  padding: 6px 8px;\n}\n\n.md-td {\n  border-top-width: 1px;\n  border-top-color: #d1d1d6;\n}\n\n.md-th {\n  font-weight: 600;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    color: #f2f2f7;\n  }\n\n  .md-h6,\n  .md-blockquote {\n    color: #98989f;\n  }\n\n  .md-a {\n    color: #4c9bff;\n  }\n\n  .md-code {\n    background-color: rgba(120, 120, 128, 0.32);\n  }\n\n  .md-pre {\n    background-color: #1c1c1e;\n  }\n\n  .md-blockquote,\n  .md-table,\n  .md-td {\n    border-color: #38383a;\n  }\n\n  .md-hr {\n    background-color: #38383a;\n  }\n}\n"] }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], tokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "tokens", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], linkPress: [{ type: i0.Output, args: ["linkPress"] }] } });
+//# sourceMappingURL=markdown.js.map

package/dist/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../src/markdown.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Markdown, drawn as native views and text.\n *\n * Its own entry point because it parses with `marked`, an optional peer dependency an app installs\n * only when it renders Markdown: the barrel never imports it, so an app that does not is not asked\n * for it.\n *\n * ```ts\n * import { Markdown } from '@ng-native/components/markdown';\n * ```\n */\nimport { Component, Injector, computed, inject, input, linkedSignal, output } from '@angular/core';\nimport { DeepLinks } from '@ng-native/device';\nimport { nativePlatform } from '@ng-native/fabric';\nimport { lexer, type Token } from 'marked';\nimport type { ImageLoadEvent } from './events.ts';\nimport { Image } from './image.ts';\nimport {\n  markdownBlocks,\n  opensOnPress,\n  type MarkdownBlock,\n  type MarkdownElement,\n  type MarkdownInline,\n} from './markdown-blocks.ts';\nimport { ScrollView } from './scroll-view.ts';\nimport { TemplateSlot } from './template-slot.ts';\nimport { Text } from './text.ts';\nimport { View } from './view.ts';\n\nexport type { MarkdownElement } from './markdown-blocks.ts';\n\n/** Classes for the elements a document is drawn with, each one in place of the default. */\nexport type MarkdownClasses = Partial<Readonly<Record<MarkdownElement, string>>>;\n\n/** `(linkPress)`: a link was pressed. */\nexport interface MarkdownLinkPress {\n  /** The target as written, after its entities are decoded and its scheme was allowed. */\n  readonly href: string;\n  readonly title: string | null;\n  /** Keep the link from being opened, to handle it in the app instead. */\n  preventDefault(): void;\n}\n\nconst ELEMENTS: readonly MarkdownElement[] = [\n  ...['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'ul', 'ol', 'li', 'marker'],\n  ...['pre', 'code', 'strong', 'em', 'del', 'a', 'hr', 'img', 'table', 'tr', 'th', 'td'],\n] as MarkdownElement[];\n\nconst DEFAULT_CLASSES = Object.fromEntries(\n  ELEMENTS.map((element) => [element, `md-${element}`]),\n) as Readonly<Record<MarkdownElement, string>>;\n\ntype MarkdownLink = Extract<MarkdownInline, { kind: 'link' }>;\n\n/** Every image address in `blocks`, however deep in quotes and lists. */\nfunction imageSources(blocks: readonly MarkdownBlock[], into = new Set<string>()): Set<string> {\n  for (const block of blocks) {\n    if (block.kind === 'image') into.add(block.src);\n    else if (block.kind === 'blockquote') imageSources(block.children, into);\n    else if (block.kind === 'list') {\n      for (const item of block.items) imageSources(item.children, into);\n    }\n  }\n  return into;\n}\n\n/**\n * A Markdown document as `<text>`, `<view>`, `<image>` and `<scroll-view>`: headings, paragraphs,\n * emphasis, inline code, links, quotes, ordered, unordered and task lists, code blocks, rules,\n * tables and images.\n *\n * `source` is parsed with `marked.lexer`; `tokens` takes tokens lexed already, and wins when both\n * are set. A paragraph is one `<text>` with a nested `<text>` for each emphasis, code span and\n * link, so it wraps as one run; an image is lifted out to a block of its own.\n *\n * Nothing in the document is interpreted. Raw HTML is drawn as the text it is written as, a link\n * is followed only to `http`, `https`, `mailto`, `tel` or a relative target, and an image is\n * loaded only over `http` or `https`; anything else is drawn as its text.\n *\n * Each element carries a default class, `md-h1`, `md-p`, `md-a` and so on, styled in light and\n * dark. `classes` replaces one by its element's name, so a global stylesheet or Tailwind styles it\n * instead: `{ h1: 'text-3xl font-bold' }`. Put the default back beside your own to keep both.\n *\n * A pressed link is `(linkPress)`. An absolute target is then opened with `DeepLinks.open` unless\n * a handler calls `preventDefault()`; a relative one is only reported, for the app to route.\n */\n@Component({\n  selector: 'markdown',\n  imports: [Image, ScrollView, TemplateSlot, Text, View],\n  template: `\n    <ng-template #blockTemplate let-list>\n      @for (block of list; track $index) {\n        @switch (block.kind) {\n          @case ('heading') {\n            <text [class]=\"classFor(block.element)\" accessibilityRole=\"header\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: block.children }\"\n            /></text>\n          }\n          @case ('paragraph') {\n            <text [class]=\"classFor('p')\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: block.children }\"\n            /></text>\n          }\n          @case ('image') {\n            <image\n              [src]=\"block.src\"\n              [alt]=\"block.alt || undefined\"\n              resizeMode=\"contain\"\n              [class]=\"classFor('img')\"\n              [style.aspectRatio]=\"ratios().get(block.src) ?? null\"\n              [style.height]=\"ratios().has(block.src) ? 'auto' : null\"\n              (load)=\"sizeImage(block.src, $any($event))\"\n            />\n          }\n          @case ('blockquote') {\n            <view [class]=\"classFor('blockquote')\">\n              <ng-container *templateSlot=\"blockTemplate; context: { $implicit: block.children }\" />\n            </view>\n          }\n          @case ('list') {\n            <view [class]=\"classFor(block.element)\">\n              @for (item of block.items; track $index) {\n                <view [class]=\"classFor('li')\">\n                  <text [class]=\"classFor('marker')\">{{ item.marker }}</text>\n                  <view class=\"md-li-body\">\n                    <ng-container\n                      *templateSlot=\"blockTemplate; context: { $implicit: item.children }\"\n                    />\n                  </view>\n                </view>\n              }\n            </view>\n          }\n          @case ('code') {\n            <scroll-view horizontal [class]=\"classFor('pre')\">\n              <text selectable class=\"md-pre-text\">{{ block.text }}</text>\n            </scroll-view>\n          }\n          @case ('hr') {\n            <view [class]=\"classFor('hr')\"></view>\n          }\n          @case ('table') {\n            <view [class]=\"classFor('table')\">\n              <view [class]=\"classFor('tr')\">\n                @for (cell of block.header; track $index) {\n                  <text [class]=\"classFor('th')\"\n                    ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: cell }\"\n                  /></text>\n                }\n              </view>\n              @for (row of block.rows; track $index) {\n                <view [class]=\"classFor('tr')\">\n                  @for (cell of row; track $index) {\n                    <text [class]=\"classFor('td')\"\n                      ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: cell }\"\n                    /></text>\n                  }\n                </view>\n              }\n            </view>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template #inlineTemplate let-runs>\n      @for (run of runs; track $index) {\n        @switch (run.kind) {\n          @case ('text') {\n            <ng-container>{{ run.text }}</ng-container>\n          }\n          @case ('code') {\n            <text [class]=\"classFor('code')\">{{ run.text }}</text>\n          }\n          @case ('link') {\n            <text\n              [class]=\"classFor('a')\"\n              pressable\n              [accessibilityHint]=\"run.title ?? undefined\"\n              (press)=\"followLink(run)\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: run.children }\"\n            /></text>\n          }\n          @default {\n            <text [class]=\"classFor(run.kind)\"\n              ><ng-container *templateSlot=\"inlineTemplate; context: { $implicit: run.children }\"\n            /></text>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-container *templateSlot=\"blockTemplate; context: { $implicit: blocks() }\" />\n  `,\n  styleUrl: './markdown.css',\n  host: {\n    '[class.md-ios]': \"platform === 'ios'\",\n    '[class.md-android]': \"platform === 'android'\",\n  },\n})\nexport class Markdown {\n  private readonly injector = inject(Injector);\n  /** Which monospace font code is drawn in, as the platform names it. */\n  protected readonly platform = nativePlatform();\n\n  /** The Markdown to draw. */\n  readonly source = input<string>();\n  /** Tokens `marked.lexer` made already, drawn in place of `source`. */\n  readonly tokens = input<readonly Token[]>();\n  /** A class for an element, in place of its default. See the class note. */\n  readonly classes = input<MarkdownClasses>({});\n  /** A link was pressed. See the class note. */\n  readonly linkPress = output<MarkdownLinkPress>();\n\n  protected readonly blocks = computed(() =>\n    markdownBlocks(this.tokens() ?? lexer(this.source() ?? '')),\n  );\n\n  private readonly classOf = computed(() => ({ ...DEFAULT_CLASSES, ...this.classes() }));\n\n  /**\n   * Each image's width over its height, once it has loaded, so it is drawn at the page's width and\n   * its own shape. An image the document no longer has is forgotten when the document changes.\n   */\n  protected readonly ratios = linkedSignal<readonly MarkdownBlock[], ReadonlyMap<string, number>>({\n    source: this.blocks,\n    computation: (blocks, previous) => {\n      const kept = new Map<string, number>();\n      if (!previous) return kept;\n      const present = imageSources(blocks);\n      for (const [src, ratio] of previous.value) if (present.has(src)) kept.set(src, ratio);\n      return kept;\n    },\n  });\n\n  protected classFor(element: MarkdownElement): string {\n    return this.classOf()[element];\n  }\n\n  protected sizeImage(src: string, event: Partial<ImageLoadEvent>): void {\n    const source = event.nativeEvent?.source;\n    if (!source) return;\n    const { width, height } = source;\n    if (!(width > 0 && height > 0)) return;\n    this.ratios.update((ratios) => new Map(ratios).set(src, width / height));\n  }\n\n  protected followLink(link: MarkdownLink): void {\n    let prevented = false;\n    this.linkPress.emit({\n      href: link.href,\n      title: link.title,\n      preventDefault: () => {\n        prevented = true;\n      },\n    });\n    if (!prevented && opensOnPress(link.href)) this.injector.get(DeepLinks).open(link.href);\n  }\n}\n"]}

package/dist/virtual-list.d.ts

@@ -215,6 +215,8 @@ export declare class VirtualList<T> extends ScrollViewProps {
     private readonly headerHeight;
     /** What native reported the content measures along the axis, once it has. */
     private contentSize;
+    /** The rows' own extent when native reported that, so a report for other rows is not used. */
+    private contentSizeFor;
     /** The item count `endReached` last fired for, cleared once the list is away from the end. */
     private endReachedFor;
     /** Slot styles are cached so a scroll does not hand Fabric new prop objects for stable rows. */
@@ -275,6 +277,10 @@ export declare class VirtualList<T> extends ScrollViewProps {
     private readonly extent;
     /** A fixed-height row and the gap after it. */
     private stride;
+    /** ScrollView.js's `contentContainerHorizontal`: the header, rows and footer side by side. */
+    protected readonly content: import("@angular/core").Signal<{
+        flexDirection: string;
+    } | undefined>;
     protected readonly canvas: import("@angular/core").Signal<{
         width: number;
         flexDirection: string;
@@ -366,6 +372,14 @@ export declare class VirtualList<T> extends ScrollViewProps {
     /** In development, a list with rows that stays at zero size; see `ZeroSizeWarning`. */
     private readonly zeroSize;
     constructor();
+    /** The items the end and viewability were last checked against after a render. */
+    private checkedItems;
+    /**
+     * New items can bring the end within reach or change what is on screen with no scroll: a list
+     * shorter than its viewport, a page appended while at the end, a filter. Checked once the rows
+     * they make are rendered, and only when they changed, so any other render costs a comparison.
+     */
+    private recheckItems;
     /** Whether the viewport has been laid out yet, so a zero in it is a measurement. */
     private viewportMeasured;
     /**
@@ -491,6 +505,8 @@ export declare class VirtualList<T> extends ScrollViewProps {
     private viewableAt;
     /** The last set announced, so the output fires on a change rather than on every frame. */
     private announced;
+    /** The items the last set was announced from: new items are a change even at the same indices. */
+    private announcedFrom;
     /**
      * Announce a change in what is on screen.
      *