@riebeckite/plugin-map 0.0.31 → 0.0.33

package/README.md

@@ -77,6 +77,17 @@ map:
 `lat`/`lng` also accept `latitude`/`longitude`, `coordinates: [lat, lng]` or
 `coordinates: "lat, lng"`, and `label` also accepts `title`/`place`/`name`.
 
+## Live example
+
+~~~map
+center: 35.6812, 139.7671
+zoom: 13
+label: Tokyo Station
+markers:
+  - 35.6812, 139.7671 | Tokyo Station
+  - 35.6586, 139.7454 | Tokyo Tower
+~~~
+
 ## How it renders
 
 A block or frontmatter map becomes a `figure.rr-map`:
@@ -156,7 +167,7 @@ to inject a fake Leaflet).
 
 ## Main exports
 
-- `map(options?)`: create the plugin (`mapPlugin` is an alias)
+- `map(options?)`: create the plugin (`map` is an alias)
 - `initMap`: initialize client-side maps
 - `parseMapSource`: parse a fenced block into `MapData`
 - `normalizeMapInput`: normalize frontmatter into `MapData`

package/README_ja.md

@@ -6,7 +6,7 @@
 
 [English](./README.md)
 
-## 設定する
+## 使い方
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
@@ -33,7 +33,7 @@ export default defineConfig({
 
 ### コードブロック
 
-ブロック本文は小さな key/value 形式です。`markers:` の後に `-` でマーカーを並べ、`lat, lng` だけの行は暗黙のマーカーになります。
+ブロック本文は簡単なキーと値の形式です。`markers:` の後に `-` でマーカーを並べ、`lat, lng` だけの行は暗黙のマーカーになります。
 
 ````markdown
 ```map
@@ -70,7 +70,18 @@ map:
 
 `lat`/`lng` は `latitude`/`longitude`、`coordinates: [lat, lng]` または `coordinates: "lat, lng"` も受け付けます。`label` は `title`/`place`/`name` も使えます。
 
-## どのように描画されるか
+## 実行例
+
+~~~map
+center: 35.6812, 139.7671
+zoom: 13
+label: Tokyo Station
+markers:
+  - 35.6812, 139.7671 | Tokyo Station
+  - 35.6586, 139.7454 | Tokyo Tower
+~~~
+
+## 描画の仕組み
 
 コードブロックまたは frontmatter の地図は `figure.rr-map` になります。
 
@@ -80,7 +91,7 @@ map:
 - `div.rr-map__static`: 常に利用できるフォールバック。`p.rr-map__place`、`ul.rr-map__markers` → `a.rr-map__link`（OpenStreetMap リンク）、任意の `img.rr-map__image`、`p.rr-map__attribution` を含みます
 - `details.rr-map__fallback`: 元のブロック本文を折りたたんで表示
 
-`initMap` は `[data-rr-map="pending"]` を探し、Leaflet を遅延して読み込みます。タイルレイヤーとマーカーを描画して `data-rr-map="rendered"` にします（このとき静的フォールバックは非表示になります）。失敗した場合は `data-rr-map="error"` になり、`details` を開き、静的フォールバックは表示されたままです。
+`initMap` は `[data-rr-map="pending"]` を探し、Leaflet を遅延読み込みします。タイルレイヤーとマーカーを描画して `data-rr-map="rendered"` にします（このとき静的フォールバックは非表示になります）。失敗した場合は `data-rr-map="error"` になり、`details` を開き、静的フォールバックは表示されたままになります。
 
 座標も `center` もないブロックは置き換えず、通常のコードブロックのまま残し、`source: "@riebeckite/plugin-map"` を持つ診断を出します。
 
@@ -103,7 +114,7 @@ map:
 
 ## タイルと帰属表示
 
-既定はキー不要の [OpenStreetMap 標準タイル](https://tile.openstreetmap.org/) です。小規模なサイトには十分ですが、OpenStreetMap の[タイル利用ポリシー](https://operations.osmfoundation.org/policies/tiles/)は。識別可能な referrer を前提とし、大量アクセスを禁止しています。一定のトラフィックがあるサイトは `tileUrl` を自前のタイルサーバーや商用プロバイダに向けてください。
+既定はキー不要の [OpenStreetMap 標準タイル](https://tile.openstreetmap.org/) です。小規模なサイトには十分ですが、OpenStreetMap の[タイル利用ポリシー](https://operations.osmfoundation.org/policies/tiles/)は、識別可能なリファラーを前提とし、一括取得や高負荷な利用を禁じています。一定のトラフィックがあるサイトは `tileUrl` を自前のタイルサーバーや商用プロバイダに向けてください。
 
 帰属表示は省略できません。`attribution` は Leaflet に渡され、静的フォールバックにも（プレーンテキストで）描画されます。プロバイダが要求するクレジットを常に表示してください。
 
@@ -111,11 +122,11 @@ map:
 
 ## クライアント側の描画
 
-`[data-rr-map="pending"]` の figure が 1 つ以上あるときだけ取得します。取得元は jsDelivr で、Leaflet（`leaflet.js` と `leaflet.css`）です。ライブラリを遅延して読み込むため、地図のないページは何も負担しません。地図のあるページでも、JavaScript を無効にしていたり CDN に到達できなかったりする場合があります。その場合は静的フォールバックが表示されます。
+`[data-rr-map="pending"]` の figure が 1 つ以上あるときだけ取得します。取得元は jsDelivr の Leaflet（`leaflet.js` と `leaflet.css`）です。遅延読み込みなので、地図のないページに負担はかかりません。地図のあるページでも、JavaScript が無効だったり CDN に到達できなかったりすれば、静的フォールバックが表示されます。
 
-`initMap(options?)` が受け取るオプションは次のとおりです。`tileUrl`、`attribution`、`minZoom`、`maxZoom`、`leafletScriptUrl`、`leafletStyleUrl`。さらに、事前読み込み済みの `runtime` も指定できます（テストで偽の Leaflet を注入する用途）。
+`initMap(options?)` が受け取るオプションは次のとおりです。`tileUrl`、`attribution`、`minZoom`、`maxZoom`、`leafletScriptUrl`、`leafletStyleUrl`。さらに、事前読み込み済みの `runtime` も指定できます（テストでモックの Leaflet を注入する用途）。
 
-## 出力のフック
+## 出力フック
 
 - `figure[data-rr-map]`: 状態（`pending` / `rendered` / `error`）
 - `figure[data-rr-map-payload]`: 解決済みの地図データ JSON
@@ -125,7 +136,7 @@ map:
 
 ## 主なエクスポート
 
-- `map(options?)`: プラグインを作成する（`mapPlugin` は別名）
+- `map(options?)`: プラグインを作成する（`map` は別名）
 - `initMap`: クライアント側の地図を初期化する
 - `parseMapSource`: コードブロックを `MapData` に変換する
 - `normalizeMapInput`: frontmatter を `MapData` に正規化する

package/dist/client.js

@@ -4,19 +4,28 @@ var DEFAULT_LEAFLET_STYLE_URL = "https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist
 var DEFAULT_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
 var DEFAULT_ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 var leafletPromise = null;
-async function initMap(options = {}) {
+async function initMap(context = {}) {
+  const options = context.config ?? {};
+  const root = context.root ?? document;
   const figures = Array.from(
-    document.querySelectorAll('[data-rr-map="pending"]')
+    root.querySelectorAll('[data-rr-map="pending"]')
   );
   if (figures.length === 0) return;
   const runtime = options.runtime ?? await loadLeaflet(options);
+  if (context.signal?.aborted) return;
   if (!runtime) {
     for (const figure of figures) setError(figure);
     return;
   }
+  const maps = [];
   for (const figure of figures) {
-    renderMap(runtime, figure, options);
+    if (context.signal?.aborted || !figure.isConnected) break;
+    const map = renderMap(runtime, figure, options);
+    if (map) maps.push(map);
   }
+  return () => {
+    for (const map of maps) map.remove();
+  };
 }
 function renderMap(runtime, figure, options) {
   const canvas = figure.querySelector("[data-rr-map-canvas]");
@@ -57,6 +66,7 @@ function renderMap(runtime, figure, options) {
       map.setView([payload.center.lat, payload.center.lng], payload.zoom);
     }
     figure.dataset.rrMap = "rendered";
+    return map;
   } catch {
     setError(figure);
   }

package/dist/index.d.ts

@@ -13,5 +13,3 @@ export declare const MAP_PLUGIN_NAME = "map";
  * map is present and upgrades each figure to an interactive map.
  */
 export declare function map(options?: MapOptions): import("@riebeckite/core").RiebeckitePlugin<MapOptions>;
-/** Alias matching the `*Plugin` suffix used by other plugin factories. */
-export declare const mapPlugin: typeof map;

package/dist/index.js

@@ -56,50 +56,20 @@ function clampZoom(value, minimum = 1) {
 }
 
 // src/hast.ts
-function visitElements(node, visitor, parent, index) {
-  if (isElementNode(node)) visitor(node, parent, index);
-  for (const [childIndex, child] of [...getChildren(node)].entries()) {
-    visitElements(
-      child,
-      visitor,
-      hasChildren(node) ? node : parent,
-      childIndex
-    );
-  }
-}
-function element(tagName, properties = {}, children = []) {
-  return { type: "element", tagName, properties, children };
-}
-function text(value) {
-  return { type: "text", value };
-}
-function getTextContent(node) {
-  if (node.type === "text" && "value" in node && typeof node.value === "string") {
-    return node.value;
-  }
-  return getChildren(node).map(getTextContent).join("");
-}
-function getStringProperty(node, key) {
-  const value = node.properties?.[key];
-  if (typeof value === "string") return value;
-  if (Array.isArray(value)) return value.join(" ");
-  return null;
-}
-function hasClass(node, className) {
-  const value = node.properties?.className;
-  const classes = Array.isArray(value) ? value.map(String) : typeof value === "string" ? value.split(/\s+/) : [];
-  return classes.includes(className);
-}
-function isElementNode(node) {
-  return node.type === "element";
-}
-function hasChildren(node) {
-  return Array.isArray(node.children);
-}
-function getChildren(node) {
-  const children = node.children;
-  return Array.isArray(children) ? children : [];
-}
+import {
+  element as sharedElement,
+  getStringProperty as sharedGetStringProperty,
+  getTextContent as sharedGetTextContent,
+  hasClass as sharedHasClass,
+  text as sharedText,
+  visitElements as sharedVisitElements
+} from "@riebeckite/diagram";
+var element = sharedElement;
+var text = sharedText;
+var getTextContent = sharedGetTextContent;
+var getStringProperty = sharedGetStringProperty;
+var hasClass = sharedHasClass;
+var visitElements = sharedVisitElements;
 
 // src/parse.ts
 var KEY_VALUE = /^([A-Za-z][\w-]*)\s*:\s*(.*)$/;
@@ -422,10 +392,14 @@ function buildFigure(input) {
   }
   if (options.fallback && input.source) {
     children.push(
-      element("details", { className: `${options.className}__fallback` }, [
-        element("summary", {}, [text("Map source")]),
-        element("pre", {}, [element("code", {}, [text(input.source)])])
-      ])
+      element(
+        "details",
+        { className: `${options.className}__fallback rb-source-fallback` },
+        [
+          element("summary", {}, [text("Map source")]),
+          element("pre", {}, [element("code", {}, [text(input.source)])])
+        ]
+      )
     );
   }
   return element(
@@ -578,12 +552,13 @@ function map(options = {}) {
           attribution: resolved.attribution,
           minZoom: resolved.minZoom,
           maxZoom: resolved.maxZoom
-        }
+        },
+        void 0,
+        "context"
       )
     ]
   });
 }
-var mapPlugin = map;
 function validateMapOptions(options) {
   if (!options) return [];
   const issues = [];
@@ -630,7 +605,6 @@ export {
   describeMap,
   formatCoordinates,
   map,
-  mapPlugin,
   normalizeMapInput,
   openStreetMapUrl,
   parseMapSource,

package/dist/src/hast.d.ts

@@ -1,7 +1,7 @@
 import type { ElementNode, HastNode, ParentNode, TextNode } from "./types.js";
-export declare function visitElements(node: HastNode, visitor: (node: ElementNode, parent?: ParentNode, index?: number) => void, parent?: ParentNode, index?: number): void;
-export declare function element(tagName: string, properties?: Record<string, unknown>, children?: HastNode[]): ElementNode;
-export declare function text(value: string): TextNode;
-export declare function getTextContent(node: HastNode): string;
-export declare function getStringProperty(node: ElementNode, key: string): string | null;
-export declare function hasClass(node: ElementNode, className: string): boolean;
+export declare const element: (tagName: string, properties?: Record<string, unknown>, children?: HastNode[]) => ElementNode;
+export declare const text: (value: string) => TextNode;
+export declare const getTextContent: (node: HastNode) => string;
+export declare const getStringProperty: (node: ElementNode, key: string) => string | null;
+export declare const hasClass: (node: ElementNode, className: string) => boolean;
+export declare const visitElements: (node: HastNode, visitor: (node: ElementNode, parent?: ParentNode, index?: number) => void, parent?: ParentNode, index?: number) => void;

package/dist/src/init.d.ts

@@ -1,4 +1,9 @@
 import type { MapClientOptions } from "./types.js";
+type ClientContext = {
+    root?: ParentNode;
+    signal?: AbortSignal;
+    config?: MapClientOptions;
+};
 /**
  * Upgrades every server-emitted `[data-rr-map="pending"]` figure to an
  * interactive Leaflet map.
@@ -8,4 +13,5 @@ import type { MapClientOptions } from "./types.js";
  * `data-rr-map-payload`, which means the page still renders its static
  * fallback when JavaScript is disabled or the CDN is unreachable.
  */
-export declare function initMap(options?: MapClientOptions): Promise<void>;
+export declare function initMap(context?: ClientContext): Promise<undefined | (() => void)>;
+export {};

package/dist/src/options.d.ts

@@ -1,26 +1,4 @@
 import type { MapOptions, ResolvedMapOptions } from "./types.js";
-/** Default base class for the generated figure. */
-export declare const DEFAULT_MAP_CLASS_NAME = "rr-map";
-/** Default map height in pixels. */
-export declare const DEFAULT_MAP_HEIGHT = 320;
-/** Default fenced-code language. */
-export declare const DEFAULT_MAP_LANGUAGE = "map";
-/** Default zoom level. */
-export declare const DEFAULT_MAP_ZOOM = 13;
-/** Default minimum zoom level. */
-export declare const DEFAULT_MAP_MIN_ZOOM = 1;
-/** Default maximum zoom level (OpenStreetMap's standard maximum). */
-export declare const DEFAULT_MAP_MAX_ZOOM = 19;
-/** Frontmatter property read for coordinates by default. */
-export declare const DEFAULT_MAP_FRONTMATTER_KEY = "map";
-/**
- * Default OpenStreetMap tile template. It is keyless and safe to expose to the
- * browser, but sites with meaningful traffic should follow the tile usage
- * policy or point `tileUrl` at their own tile server.
- */
-export declare const DEFAULT_MAP_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
-/** Attribution required by the default tile provider. */
-export declare const DEFAULT_MAP_ATTRIBUTION = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors";
 /**
  * Applies defaults to the user-provided options.
  *

package/dist/src/types.d.ts

@@ -121,11 +121,11 @@ export type MapClientOptions = {
     runtime?: MapRuntime;
 };
 /** The subset of the Leaflet API the initializer uses. */
-export type LeafletLayer = {
+type LeafletLayer = {
     addTo(map: LeafletMap): LeafletLayer;
     bindPopup?(content: string): LeafletLayer;
 };
-export type LeafletMap = {
+type LeafletMap = {
     setView(center: [number, number], zoom: number): LeafletMap;
     fitBounds(bounds: unknown, options?: Record<string, unknown>): LeafletMap;
     remove(): void;
@@ -149,7 +149,7 @@ export type TextNode = {
     type: "text";
     value: string;
 };
-export type RawNode = {
+type RawNode = {
     type: "raw";
     value: string;
 };
@@ -157,3 +157,4 @@ export type HastNode = ElementNode | TextNode | RawNode | {
     type: string;
     [key: string]: unknown;
 };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-map",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,8 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.31"
+    "@riebeckite/core": "0.0.33",
+    "@riebeckite/diagram": "0.0.33"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -75,26 +75,6 @@
   font-size: 0.75rem;
 }
 
-.rr-map__fallback {
-  border-top: 1px solid var(--rr-map-rule);
-  color: var(--rr-map-muted);
-  font-size: 0.8125rem;
-}
-
-.rr-map__fallback summary {
-  cursor: pointer;
-  padding: 0.5rem 0.75rem;
-}
-
-.rr-map__fallback pre {
-  overflow: auto;
-  margin: 0 1rem;
-  padding: 0.75rem;
-  border-top: 1px solid var(--rr-map-rule);
-  color: var(--rr-map-ink);
-  background: color-mix(in srgb, var(--rr-map-ink) 6%, transparent);
-}
-
 .rr-map[data-rr-map="error"] .rr-map__static::before {
   content: "The interactive map could not be loaded. ";
   color: var(--rr-map-muted);