map-gl-offline 0.8.8 → 0.9.0

package/README.md

@@ -1,111 +1,84 @@
-# Map GL Offline 🗺️
+# map-gl-offline
 
 [![npm version](https://badge.fury.io/js/map-gl-offline.svg)](https://badge.fury.io/js/map-gl-offline)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue.svg)](https://www.typescriptlang.org/)
 
-**[📖 Documentation](https://map-gl-offline.netlify.app)** · **[🎮 Live Demo](https://map-gl-offline-demo.netlify.app)** · **[🐛 Issues](https://github.com/muimsd/map-gl-offline/issues)**
+Save a map area to the browser, then keep using it with no connection. Works with **MapLibre GL JS** and **Mapbox GL JS**, and stores everything in IndexedDB.
 
-TypeScript offline-map library for **MapLibre GL JS** and **Mapbox GL JS**. Download styles, tiles, sprites, glyphs, and fonts to IndexedDB; load them back with zero network. Ships with a glassmorphic UI control and a complete programmatic API.
+**[Documentation](https://map-gl-offline.netlify.app)** | **[Live demo](https://map-gl-offline-demo.netlify.app)** | **[Issues](https://github.com/muimsd/map-gl-offline/issues)**
 
-![Map GL Offline Demo](assets/map-gl-offline-demo.gif)
+![Downloading a region in the map-gl-offline demo](assets/map-gl-offline-demo.gif)
 
-## Features
-
-- 🗺️ **Offline regions** — polygon selection, smart tile management, extra vector/raster overlays
-- 🎨 **Full resource capture** — styles, sprites, fonts, glyphs with Unicode ranges
-- 🔗 **Mapbox GL + MapLibre GL** — auto-detection, `mapbox://` URL resolution, Standard style with 3D/terrain
-- 📊 **Analytics & cleanup** — storage reports, auto-cleanup, quota-aware downloads
-- 🎨 **UI control** — glassmorphic panel, dark/light themes, English/Arabic (RTL), polygon drawing
-- 🛠️ **Programmatic API** — `downloadRegion` with per-phase progress, full TypeScript types
+- **Complete regions:** style, tiles, sprites, fonts and 3D models, including Mapbox Standard's terrain and buildings.
+- **A control or an API:** add a ready-made panel where people draw an area and download it, or call `downloadRegion` yourself.
+- **Accurate progress:** one percentage that only moves forward, with exact counts for each phase.
+- **Storage management:** usage reports, expiry dates and automatic cleanup.
+- **MBTiles:** export to and import from the format QGIS and tippecanoe read.
+- **English and Arabic** in the control, including right-to-left layout.
 
 ## Install
 
 ```bash
-npm install map-gl-offline
+npm install map-gl-offline maplibre-gl
+# or
+npm install map-gl-offline mapbox-gl
 ```
 
-Or via CDN as the `mapgloffline` global:
-
-```html
-<script src="https://unpkg.com/map-gl-offline/dist/index.umd.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/map-gl-offline/style.css" />
-```
+Load only one renderer per page: [MapLibre GL 6 breaks Mapbox GL](https://map-gl-offline.netlify.app/docs/guides/troubleshooting#a-mapbox-map-is-blank) when they share one.
 
-## Quick Start
+## Quick start
 
 ### MapLibre GL JS
 
-```typescript
-import maplibregl from 'maplibre-gl';
+```ts
+import * as maplibregl from 'maplibre-gl';
 import { OfflineMapManager, OfflineManagerControl } from 'map-gl-offline';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import 'map-gl-offline/style.css';
 
-const map = new maplibregl.Map({
-  container: 'map',
-  style: 'https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY',
-  center: [-74.006, 40.7128],
-  zoom: 12,
-});
+const styleUrl = 'https://tiles.openfreemap.org/styles/liberty';
 
-const offlineManager = new OfflineMapManager();
+const map = new maplibregl.Map({ container: 'map', style: styleUrl });
 
-map.on('load', () => {
-  const control = new OfflineManagerControl(offlineManager, {
-    styleUrl: 'https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY',
-    mapLib: maplibregl, // enables idb:// protocol in web workers
-  });
-  map.addControl(control, 'top-right');
-});
+map.addControl(
+  new OfflineManagerControl(new OfflineMapManager(), { styleUrl, mapLib: maplibregl }),
+  'top-right'
+);
 ```
 
+With a bundler, MapLibre 6 also needs [its worker URL set](https://map-gl-offline.netlify.app/docs/getting-started#maplibre-gl-js).
+
 ### Mapbox GL JS
 
-Mapbox GL JS v3 lacks `addProtocol`, so the library uses a Service Worker. Run **one** of:
+Mapbox GL serves stored tiles through a Service Worker, so copy its script to your `public/` folder first:
 
 ```bash
-npx map-gl-offline init            # CLI (recommended)
-# or add to vite.config.js:
-# import { offlineSwPlugin } from 'map-gl-offline/vite-plugin';
-# plugins: [offlineSwPlugin()]
-# or manually: cp node_modules/map-gl-offline/dist/idb-offline-sw.js public/
+npx map-gl-offline init
 ```
 
-Then:
-
-```typescript
+```ts
 import mapboxgl from 'mapbox-gl';
 import { OfflineMapManager, OfflineManagerControl } from 'map-gl-offline';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'map-gl-offline/style.css';
 
 mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';
+const styleUrl = 'mapbox://styles/mapbox/standard';
 
-const map = new mapboxgl.Map({
-  container: 'map',
-  style: 'mapbox://styles/mapbox/standard',
-  center: [-74.006, 40.7128],
-  zoom: 12,
-});
+const map = new mapboxgl.Map({ container: 'map', style: styleUrl });
 
-const offlineManager = new OfflineMapManager();
-map.on('load', () =>
-  map.addControl(
-    new OfflineManagerControl(offlineManager, {
-      styleUrl: 'mapbox://styles/mapbox/standard',
-      accessToken: mapboxgl.accessToken,
-    }),
-    'top-right',
-  ),
+map.addControl(
+  new OfflineManagerControl(new OfflineMapManager(), {
+    styleUrl,
+    accessToken: mapboxgl.accessToken,
+  }),
+  'top-right'
 );
 ```
 
-## Programmatic Usage
-
-`downloadRegion` runs the full pipeline (**style → sprites → glyphs → models → tiles → metadata**) with per-phase progress. `addRegion` alone only stores metadata — use `downloadRegion` to actually fetch assets.
+### Download from code
 
-```typescript
+```ts
 import { OfflineMapManager } from 'map-gl-offline';
 
 const offlineManager = new OfflineMapManager();
@@ -114,151 +87,49 @@ await offlineManager.downloadRegion(
   {
     id: 'downtown',
     name: 'Downtown',
-    bounds: [[-74.0559, 40.7128], [-74.0059, 40.7628]],
+    bounds: [
+      [-74.02, 40.7], // south-west: [longitude, latitude]
+      [-73.97, 40.75], // north-east
+    ],
     minZoom: 10,
     maxZoom: 16,
-    styleUrl: 'https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY',
+    styleUrl: 'https://tiles.openfreemap.org/styles/liberty',
   },
   {
-    onProgress: ({ phase, percentage, message }) => {
-      console.log(`[${phase}] ${percentage.toFixed(1)}% ${message ?? ''}`);
+    onProgress: ({ overallPercentage, phase, completed, total }) => {
+      console.log(`${Math.round(overallPercentage)}%: ${phase} ${completed}/${total}`);
     },
-  },
-);
-
-// Manage
-await offlineManager.listStoredRegions();
-await offlineManager.getStoredRegion('downtown');
-await offlineManager.deleteRegion('downtown');
-
-// Analytics & cleanup
-await offlineManager.getComprehensiveStorageAnalytics();
-await offlineManager.cleanupExpiredRegions();
-await offlineManager.setupAutoCleanup({ intervalHours: 24, maxAge: 30 });
-```
-
-### Multi-region downloads (global overview + city detail)
-
-For app shipping use cases — a low-zoom basemap of the world, plus high-zoom detail in the cities your users actually visit — set `multipleRegions: true` on each region so the manager reuses the shared style/sprites/glyphs across downloads. The exported `BoundingBox` type keeps city lists from being widened to `number[][]`, so you can write the bounds inline without `as` casts.
-
-```typescript
-import mapboxgl from 'mapbox-gl';
-import {
-  OfflineMapManager,
-  type BoundingBox,
-  type DownloadRegionProgress,
-} from 'map-gl-offline';
-
-const offlineManager = new OfflineMapManager();
-const STYLE_URL = 'mapbox://styles/mapbox/standard';
-
-const opts = {
-  accessToken: mapboxgl.accessToken, // `string | null` is accepted — no cast needed
-  onProgress: ({ phase, percentage, message }: DownloadRegionProgress) =>
-    console.log(`[${phase}] ${percentage.toFixed(1)}% ${message ?? ''}`),
-};
-
-// 1) Whole planet, low zoom only (~5,500 tiles/source) — countries, major cities
-await offlineManager.downloadRegion(
-  {
-    id: 'global-overview',
-    name: 'Global overview',
-    bounds: [[-180, -85.0511], [180, 85.0511]], // ±85.0511° = Web Mercator cutoff
-    minZoom: 0,
-    maxZoom: 6,
-    styleUrl: STYLE_URL,
-    multipleRegions: true,
-  },
-  opts,
-);
-
-// 2) High-detail per city — tight bbox per place your users actually go
-const cities: Array<{ id: string; name: string; bounds: BoundingBox }> = [
-  { id: 'nyc',    name: 'New York', bounds: [[-74.05, 40.68], [-73.90, 40.82]] },
-  { id: 'london', name: 'London',   bounds: [[-0.25, 51.43],  [0.02, 51.57]]  },
-];
-
-for (const city of cities) {
-  await offlineManager.downloadRegion(
-    {
-      id: city.id,
-      name: city.name,
-      bounds: city.bounds,
-      minZoom: 6,   // overlaps the overview's maxZoom — clean handoff, no seam
-      maxZoom: 14,  // street-level detail
-      styleUrl: STYLE_URL,
-      multipleRegions: true,
-    },
-    opts,
-  );
-}
-```
-
-> **Don't download the whole globe at high zoom.** The tile count quadruples per zoom level — `minZoom: 0, maxZoom: 15` for the whole planet is ~1.4 billion tiles per source, which will blow past IndexedDB quota and may violate provider TOS. The two-tier setup above gives countries-everywhere plus streets-where-it-matters for a few thousand tiles total.
-
-### Sparse-source detection
-
-For composite styles (e.g. Mapbox Standard) that reference sparse tilesets like `indoor-v3` or `landmark-pois-v1`, the tile downloader probes start/middle/end tiles per source and drops any that return majority-404. Disable with `tileOptions: { probeSourcesBeforeDownload: false }`.
-
-Three Mapbox Standard sub-tilesets are sparse-by-design across the planet — `mapbox.indoor-v3`, `mapbox.landmark-pois-v1`, `mapbox.procedural-buildings-v1`. Since 0.8.8 these are hard-skipped **before** the probe step so no network request is issued (and no 404s land in devtools). Opt out with `tileOptions: { skipKnownSparseSources: false }` to run them through the probe path instead.
-
-### Recovering from an incompatible DB
-
-If another app on the same origin has created `offline-map-db` at a newer version, `dbPromise` throws a typed error. Offer a reset UX:
-
-```typescript
-import { dbPromise, OfflineMapDBVersionError, resetOfflineMapDB } from 'map-gl-offline';
-
-try {
-  await dbPromise;
-} catch (err) {
-  if (err instanceof OfflineMapDBVersionError) {
-    if (confirm('Offline storage is incompatible. Clear it?')) {
-      await resetOfflineMapDB(); // destructive
-      location.reload();
-    }
   }
-}
+);
 ```
 
-> **Upgrading from 0.5.x?** Read the [0.6.0 migration guide](https://map-gl-offline.netlify.app/docs/migration-0.6) — covers the rename of `ResourceService.getXxxStatistics` → `getXxxStats`, the `addRegion` vs `downloadRegion` split, and the `expiry` timestamp fix.
-
-## API at a glance
-
-- **Regions** — `downloadRegion`, `loadRegion`, `addRegion`, `getStoredRegion`, `listStoredRegions`, `listRegions`, `deleteRegion`
-- **Analytics** — `getComprehensiveStorageAnalytics`, `getRegionAnalytics`, `getTileStats`, `getFontStats`, `getSpriteStats`, `getGlyphStats`
-- **Cleanup** — `cleanupExpiredRegions`, `performSmartCleanup`, `cleanupOld{Fonts,Sprites,Glyphs}`, `verifyAndRepair{Fonts,Sprites,Glyphs}`, `setupAutoCleanup`, `performCompleteMaintenance`
-- **Import / Export** — `exportRegionAsMBTiles`, `importRegion`, `downloadExportedRegion` (binary SQLite MBTiles, QGIS/tippecanoe-compatible)
-- **Storage utilities** — `dbPromise`, `OfflineMapDBVersionError`, `resetOfflineMapDB`, `loadAllStoredRegions`, `resourceKeyBelongsToStyle`
+Each zoom level has about four times the tiles of the one before, so keep high zooms to small areas. On Mapbox Standard, buildings start at zoom 15.
 
-See the **[full API reference](https://map-gl-offline.netlify.app/docs/api-reference)** and **[examples](https://map-gl-offline.netlify.app/docs/examples)** for every option and pattern.
+## Documentation
 
-## Browser compatibility
-
-Chrome 51+ · Firefox 45+ · Safari 10+ · Edge 79+ · modern mobile browsers. Requires IndexedDB and ES2015+.
+- [Getting started](https://map-gl-offline.netlify.app/docs/getting-started)
+- [Downloading regions](https://map-gl-offline.netlify.app/docs/guides/downloading-regions)
+- [Mapbox GL and Standard](https://map-gl-offline.netlify.app/docs/guides/mapbox)
+- [The offline control](https://map-gl-offline.netlify.app/docs/guides/ui-control)
+- [Storage and cleanup](https://map-gl-offline.netlify.app/docs/guides/storage)
+- [MBTiles](https://map-gl-offline.netlify.app/docs/guides/mbtiles)
+- [Troubleshooting](https://map-gl-offline.netlify.app/docs/guides/troubleshooting)
+- [API reference](https://map-gl-offline.netlify.app/docs/api-reference)
 
 ## Contributing
 
 ```bash
 git clone https://github.com/muimsd/map-gl-offline.git
-cd map-gl-offline && npm install
-npm run dev          # dev harness
-npm test             # unit tests
-npm run build        # library
+cd map-gl-offline
+npm install
+npm run dev   # The demo
+npm test      # Unit tests
 ```
 
-Issues and PRs welcome. See [CHANGELOG.md](CHANGELOG.md) for release notes.
+See [Architecture](https://map-gl-offline.netlify.app/docs/architecture) for how it fits together, and the [changelog](CHANGELOG.md) for release notes. Issues and pull requests are welcome.
 
 ## License
 
 MIT © [Muhammad Imran Siddique](https://github.com/muimsd)
 
----
-
-<div align="center">
-
-[📖 Docs](https://map-gl-offline.netlify.app) · [🎮 Demo](https://map-gl-offline-demo.netlify.app) · [⭐ GitHub](https://github.com/muimsd/map-gl-offline)
-
-<a href="https://www.buymeacoffee.com/muimsd" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px;"></a>
-
-</div>
+If this project helps you, you can [buy me a coffee](https://www.buymeacoffee.com/muimsd).

package/dist/idb-offline-sw.js

@@ -9,7 +9,29 @@
 (() => {
   // src/sw/shared.ts
   var OFFLINE_PREFIX = "/__offline__/";
+  function safeDecodeURIComponent(value) {
+    try {
+      return decodeURIComponent(value);
+    } catch {
+      return value;
+    }
+  }
   var DB_NAME = "offline-map-db";
+  var MAPBOX_RUNTIME_ORIGIN = "https://api.mapbox.com";
+  var MAPBOX_RUNTIME_CACHE = "map-gl-offline-runtime-v1";
+  var MAPBOX_RUNTIME_ASSETS = [
+    "/mapbox-gl-js/draco_decoder_gltf_v1.5.6.wasm",
+    "/mapbox-gl-js/meshopt_base_v1.2.wasm",
+    "/mapbox-gl-js/meshopt_simd_v1.2.wasm",
+    "/mapbox-gl-js/rtl_text_v1.0.0.wasm",
+    "/mapbox-gl-js/building-gen/building_gen_v1.2.6.wasm",
+    "/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.3.0/mapbox-gl-rtl-text.js"
+  ];
+  function isMapboxRuntimeAsset(url) {
+    if (!url.startsWith(`${MAPBOX_RUNTIME_ORIGIN}/`)) return false;
+    const path = url.slice(MAPBOX_RUNTIME_ORIGIN.length).split(/[?#]/)[0];
+    return MAPBOX_RUNTIME_ASSETS.includes(path);
+  }
   function makeTileKey(x, y, z, styleId, sourceId, ext) {
     return `${styleId}:${sourceId}:${z}:${x}:${y}.${ext}`;
   }
@@ -43,6 +65,33 @@
     const fontstacks = fontstackPart.split(",").map((f) => f.trim()).filter(Boolean);
     return { fontstacks, rangePart };
   }
+  function readVarint(bytes, start) {
+    let value = 0;
+    let multiplier = 1;
+    for (let pos = start; pos < bytes.length && pos < start + 5; pos++) {
+      value += (bytes[pos] & 127) * multiplier;
+      if (bytes[pos] < 128) return { value, next: pos + 1 };
+      multiplier *= 128;
+    }
+    return null;
+  }
+  function isEmptyGlyphRange(data) {
+    const bytes = new Uint8Array(data);
+    if (bytes[0] !== 10) return false;
+    const stack = readVarint(bytes, 1);
+    if (!stack) return false;
+    const end = stack.next + stack.value;
+    if (end !== bytes.length) return false;
+    let pos = stack.next;
+    while (pos < end) {
+      const tag = bytes[pos];
+      if ((tag & 7) !== 2 || tag >> 3 === 3) return false;
+      const length = readVarint(bytes, pos + 1);
+      if (!length) return false;
+      pos = length.next + length.value;
+    }
+    return true;
+  }
   function glyphCandidateKeys(actualStyleId, downloadId, fontstack, rangePart) {
     const glyphPath = `${fontstack}/${rangePart}`;
     const normalizedPath = glyphPath.endsWith(".pbf") ? glyphPath : `${glyphPath}.pbf`;
@@ -175,6 +224,11 @@
       return cached.styleEntry;
     }
     try {
+      const direct = await idbGet(db, "styles", regionId);
+      if (direct) {
+        regionToStyleCache.set(regionId, { styleEntry: direct, ts: Date.now() });
+        return direct;
+      }
       const all = await idbGetAll(db, "styles");
       const hit = findStyleByRegionIdIn(all, regionId);
       if (hit) {
@@ -224,7 +278,7 @@
     const yExt = rest[rest.length - 1];
     const x = parseInt(rest[rest.length - 2], 10);
     const z = Math.floor(parseFloat(rest[rest.length - 3]));
-    const sourceKey = rest.slice(0, rest.length - 3).join("/");
+    const sourceKey = safeDecodeURIComponent(rest.slice(0, rest.length - 3).join("/"));
     const parsed = parseTileYExt(yExt);
     if (!parsed || Number.isNaN(x) || Number.isNaN(z)) {
       return new Response("Invalid tile coordinates", { status: 400 });
@@ -242,24 +296,27 @@
   async function handleGlyph(db, downloadId, rest) {
     const styleEntry = await findStyleByRegionId(db, downloadId);
     const styleId = styleEntry?.key ?? downloadId;
-    const { fontstacks, rangePart } = parseGlyphPath(decodeURIComponent(rest.join("/")));
+    const { fontstacks, rangePart } = parseGlyphPath(safeDecodeURIComponent(rest.join("/")));
+    const glyphResponse = (data) => new Response(data, {
+      status: 200,
+      headers: { "Content-Type": "application/x-protobuf" }
+    });
+    let emptyRange;
     for (const fontstack of fontstacks) {
       for (const key of glyphCandidateKeys(styleId, downloadId, fontstack, rangePart)) {
         const resource = await idbGet(db, "glyphs", key);
         if (resource?.data) {
-          return new Response(resource.data, {
-            status: 200,
-            headers: { "Content-Type": "application/x-protobuf" }
-          });
+          if (!isEmptyGlyphRange(resource.data)) return glyphResponse(resource.data);
+          emptyRange ?? (emptyRange = resource.data);
         }
       }
     }
-    return new Response("Glyph not found", { status: 404 });
+    return glyphResponse(emptyRange ?? new ArrayBuffer(0));
   }
   async function handleSprite(db, downloadId, rest) {
     const styleEntry = await findStyleByRegionId(db, downloadId);
     const styleId = styleEntry?.key ?? downloadId;
-    const path = decodeURIComponent(rest.join("/"));
+    const path = safeDecodeURIComponent(rest.join("/"));
     for (const key of spriteCandidateKeys(styleId, downloadId, path)) {
       const resource = await idbGet(db, "sprites", key);
       if (resource?.data) {
@@ -273,7 +330,7 @@
   async function handleModel(db, downloadId, rest) {
     const styleEntry = await findStyleByRegionId(db, downloadId);
     const styleId = styleEntry?.key ?? downloadId;
-    const path = decodeURIComponent(rest.join("/"));
+    const path = safeDecodeURIComponent(rest.join("/"));
     for (const key of modelCandidateKeys(styleId, downloadId, path)) {
       const resource = await idbGet(db, "models", key);
       if (resource?.data) {
@@ -286,7 +343,7 @@
     return new Response("Model not found", { status: 404 });
   }
   async function handleTileJSON(db, downloadId, rest) {
-    const path = decodeURIComponent(rest.join("/"));
+    const path = safeDecodeURIComponent(rest.join("/"));
     let styleEntry = await idbGet(db, "styles", downloadId);
     if (!styleEntry?.style?.sources) {
       styleEntry = await findStyleByRegionId(db, downloadId);
@@ -314,15 +371,25 @@
   }
   self.addEventListener("fetch", (event) => {
     const url = event.request.url;
+    if (isMapboxRuntimeAsset(url)) {
+      event.respondWith(serveRuntimeAsset(event.request));
+      return;
+    }
     const idx = url.indexOf(OFFLINE_PREFIX);
     if (idx === -1) return;
     event.respondWith(handleOfflineRequest(url, idx));
   });
+  async function serveRuntimeAsset(request) {
+    const cache = await caches.open(MAPBOX_RUNTIME_CACHE);
+    const cached = await cache.match(request.url, { ignoreSearch: true });
+    return cached ?? fetch(request);
+  }
   async function handleOfflineRequest(url, prefixIndex) {
     try {
       const path = url.substring(prefixIndex + OFFLINE_PREFIX.length);
       const parts = path.split("/");
-      const [downloadId, type, ...rest] = parts;
+      const [encodedDownloadId, type, ...rest] = parts;
+      const downloadId = safeDecodeURIComponent(encodedDownloadId ?? "");
       if (!downloadId || !type) {
         return new Response("Invalid offline URL", { status: 400 });
       }

package/dist/index.d.ts

@@ -11,7 +11,7 @@
  * @example Basic usage
  * ```typescript
  * import { OfflineMapManager, OfflineManagerControl } from 'map-gl-offline';
- * import maplibregl from 'maplibre-gl';
+ * import * as maplibregl from 'maplibre-gl';
  * import 'map-gl-offline/style.css';
  *
  * const map = new maplibregl.Map({
@@ -46,8 +46,8 @@
  *     styleUrl: 'https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY',
  *   },
  *   {
- *     onProgress: ({ phase, completed, total, percentage }) => {
- *       console.log(`[${phase}] ${completed}/${total} (${percentage.toFixed(1)}%)`);
+ *     onProgress: ({ phase, completed, total, overallPercentage }) => {
+ *       console.log(`${overallPercentage.toFixed(0)}%, [${phase}] ${completed}/${total}`);
  *     },
  *   }
  * );