styled-map-package 4.0.1 → 5.0.0-pre.0

package/bin/smp-download.js

@@ -1,12 +1,16 @@
 #!/usr/bin/env node
-import { Command, InvalidArgumentError } from '@commander-js/extra-typings'
 import { input, number } from '@inquirer/prompts'
+import { Command, InvalidArgumentError } from 'commander'
 import fs from 'fs'
-import { pipeline } from 'stream/promises'
+import { download } from 'styled-map-package-api/download'
+import {
+  isMapboxURL,
+  API_URL as MAPBOX_API_URL,
+} from 'styled-map-package-api/utils/mapbox'
 
-import { download } from '../dist/download.js'
-import { ttyReporter } from '../dist/reporters.js'
-import { isMapboxURL, API_URL as MAPBOX_API_URL } from '../dist/utils/mapbox.js'
+import { Writable } from 'node:stream'
+
+import { ttyReporter } from '../lib/reporters.js'
 
 const program = new Command()
 
@@ -129,7 +133,7 @@ program
       accessToken: token,
     })
     const outputStream = output ? fs.createWriteStream(output) : process.stdout
-    await pipeline(readStream, outputStream)
+    await readStream.pipeTo(Writable.toWeb(outputStream))
   })
 
 program.parseAsync(process.argv)

package/bin/smp-mbtiles.js

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 import { Command } from 'commander'
-import { pipeline } from 'stream/promises'
+import { fromMBTiles } from 'styled-map-package-api/from-mbtiles'
 
-import { fromMBTiles } from '../dist/from-mbtiles.js'
+import fs from 'node:fs'
+import { Writable } from 'node:stream'
 
 const program = new Command()
 
@@ -11,11 +12,8 @@ program
   .option('-o, --output <file>', 'output smp file')
   .argument('<mbtiles>', 'MBTiles file to convert')
   .action(async (mbtilesPath, { output }) => {
-    if (output) {
-      await fromMBTiles(mbtilesPath, output)
-    } else {
-      await pipeline(fromMBTiles(mbtilesPath), process.stdout)
-    }
+    const dest = output ? fs.createWriteStream(output) : process.stdout
+    await fromMBTiles(mbtilesPath).pipeTo(Writable.toWeb(dest))
   })
 
 program.parseAsync(process.argv)

package/bin/smp-view.js

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
-import fastifyStatic from '@fastify/static'
 import { createServerAdapter } from '@whatwg-node/server'
 import { Command } from 'commander'
-import fastify from 'fastify'
+import fsPromises from 'fs/promises'
+import http from 'http'
+import { AutoRouter } from 'itty-router'
 import openApp from 'open'
+import { Reader } from 'styled-map-package-api/reader'
+import { createServer } from 'styled-map-package-api/server'
 
 import path from 'node:path'
 
-import { Reader } from '../dist/reader.js'
-import { createServer } from '../dist/server.js'
-
 const program = new Command()
 
 program
@@ -28,37 +28,45 @@ program
 program.parseAsync(process.argv)
 
 /**
- * Serve a styled map package on the given port (defaults to 3000). Use the
- * fastify plugin in `./server.js` for more flexibility.
+ * Serve a styled map package on the given port (defaults to 3000).
  *
  * @param {object} opts
  * @param {number} [opts.port]
  * @param {string} opts.filepath
  * @returns
  */
-function serve({ port = 3000, filepath }) {
+async function serve({ port = 3000, filepath }) {
   const reader = new Reader(path.relative(process.cwd(), filepath))
   const smpServer = createServer({ base: '/map' })
-  const serverAdapter = createServerAdapter((request) => {
-    return smpServer.fetch(request, reader)
-  })
 
-  const server = fastify()
-
-  server.register(fastifyStatic, {
-    root: new URL('../map-viewer', import.meta.url),
-    serve: false,
+  const router = AutoRouter()
+  router.get('/', async () => {
+    const index = await fsPromises.readFile(
+      new URL('../map-viewer/index.html', import.meta.url),
+    )
+    return new Response(new Uint8Array(index), {
+      headers: {
+        'Content-Type': 'text/html',
+        'Content-Length': String(index.byteLength),
+        'Cache-Control': 'public, max-age=0',
+      },
+    })
   })
-  server.get('/', async (request, reply) => {
-    return reply.sendFile('index.html')
+  router.all('/map/*', (request) => {
+    return smpServer.fetch(request, reader)
   })
-
-  server.route({
-    url: '/map/*',
-    method: ['GET', 'HEAD', 'OPTIONS'],
-    handler: (req, reply) => {
-      return serverAdapter.handleNodeRequestAndResponse(req, reply)
-    },
+  const server = http.createServer(createServerAdapter(router.fetch))
+  return new Promise((resolve, reject) => {
+    server.listen(port, '127.0.0.1', () => {
+      const address = server.address()
+      if (typeof address === 'string') {
+        resolve(`http://${address}`)
+      } else if (address === null) {
+        reject(new Error('Failed to get server address'))
+      } else {
+        resolve(`http://${address.address}:${address.port}`)
+      }
+    })
+    server.on('error', reject)
   })
-  return server.listen({ port })
 }

package/lib/reporters.js

@@ -0,0 +1,92 @@
+import chalk, { chalkStderr } from 'chalk'
+import logSymbols from 'log-symbols'
+import ora from 'ora'
+import prettyBytes from 'pretty-bytes'
+import prettyMilliseconds from 'pretty-ms'
+import { Writable } from 'readable-stream'
+
+chalk.level = chalkStderr.level
+
+const TASKS = /** @type {const} */ ([
+  'style',
+  'sprites',
+  'tiles',
+  'glyphs',
+  'output',
+])
+
+const TASK_LABEL = /** @type {const} */ ({
+  style: 'Downloading Map Style',
+  sprites: 'Downloading Sprites',
+  tiles: 'Downloading Tiles',
+  glyphs: 'Downloading Glyphs',
+  output: 'Writing Styled Map Package',
+})
+
+const TASK_SUFFIX =
+  /** @type {{ [K in (typeof TASKS)[number]]: (progress: import('styled-map-package-api/download').DownloadProgress[K]) => string }} */ ({
+    style: () => '',
+    sprites: ({ downloaded }) => `${downloaded}`,
+    tiles: ({ total, skipped, totalBytes, downloaded }) => {
+      const formattedTotal = total.toLocaleString()
+      const formattedCompleted = (downloaded + skipped)
+        .toLocaleString()
+        .padStart(formattedTotal.length)
+      return `${formattedCompleted}/${formattedTotal} (${prettyBytes(totalBytes)})`
+    },
+    glyphs: ({ total, downloaded, totalBytes }) =>
+      `${downloaded}/${total} (${prettyBytes(totalBytes)})`,
+    output: ({ totalBytes }) => `${prettyBytes(totalBytes)}`,
+  })
+
+/**
+ * A writable stream to reporting download progress to a TTY terminal. Write
+ * progress messages to this stream for a pretty-printed progress task-list in
+ * the terminal.
+ */
+export function ttyReporter() {
+  /** @type {import('styled-map-package-api/download').DownloadProgress | undefined} */
+  let stats
+  let current = 0
+  /** @type {import('ora').Ora} */
+  let spinner
+  return new Writable({
+    objectMode: true,
+    // @ts-ignore - missing type def
+    construct(cb) {
+      process.stderr.write('\n')
+      spinner = ora(TASK_LABEL[TASKS[current]]).start()
+      cb()
+    },
+    /** @param {ArrayLike<{ chunk: import('styled-map-package-api/download').DownloadProgress, encoding: string }>} chunks */
+    writev(chunks, cb) {
+      stats = chunks[chunks.length - 1].chunk
+      while (current < TASKS.length && stats[TASKS[current]].done) {
+        spinner.suffixText = chalk.dim(
+          TASK_SUFFIX[TASKS[current]](
+            // @ts-ignore - too complicated for TS
+            stats[TASKS[current]],
+          ),
+        )
+        spinner.succeed()
+        if (++current < TASKS.length) {
+          spinner = ora(TASK_LABEL[TASKS[current]]).start()
+        }
+      }
+      if (current < TASKS.length) {
+        spinner.suffixText = chalk.dim(
+          TASK_SUFFIX[TASKS[current]](
+            // @ts-ignore - too complicated for TS
+            stats[TASKS[current]],
+          ),
+        )
+      } else {
+        process.stderr.write(
+          `${chalk.green(logSymbols.success)} Completed in ${prettyMilliseconds(stats.elapsedMs)}\n`,
+        )
+      }
+
+      cb()
+    },
+  })
+}

package/package.json

@@ -1,218 +1,39 @@
 {
   "name": "styled-map-package",
-  "version": "4.0.1",
-  "description": "A Styled Map Package (`.smp`) file is a Zip archive containing all the resources needed to serve a Maplibre vector styled map offline. This includes the style JSON, vector and raster tiles, glyphs (fonts), the sprite image, and the sprite metadata.",
+  "version": "5.0.0-pre.0",
+  "description": "CLI for creating, viewing, and converting Styled Map Package (.smp) files",
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./reader": {
-      "import": {
-        "types": "./dist/reader.d.ts",
-        "default": "./dist/reader.js"
-      },
-      "require": {
-        "types": "./dist/reader.d.cts",
-        "default": "./dist/reader.cjs"
-      }
-    },
-    "./reader-watch": {
-      "import": {
-        "types": "./dist/reader-watch.d.ts",
-        "default": "./dist/reader-watch.js"
-      },
-      "require": {
-        "types": "./dist/reader-watch.d.cts",
-        "default": "./dist/reader-watch.cjs"
-      }
-    },
-    "./writer": {
-      "import": {
-        "types": "./dist/writer.d.ts",
-        "default": "./dist/writer.js"
-      },
-      "require": {
-        "types": "./dist/writer.d.cts",
-        "default": "./dist/writer.cjs"
-      }
-    },
-    "./server": {
-      "import": {
-        "types": "./dist/server.d.ts",
-        "default": "./dist/server.js"
-      },
-      "require": {
-        "types": "./dist/server.d.cts",
-        "default": "./dist/server.cjs"
-      }
-    },
-    "./style-downloader": {
-      "import": {
-        "types": "./dist/style-downloader.d.ts",
-        "default": "./dist/style-downloader.js"
-      },
-      "require": {
-        "types": "./dist/style-downloader.d.cts",
-        "default": "./dist/style-downloader.cjs"
-      }
-    },
-    "./tile-downloader": {
-      "import": {
-        "types": "./dist/tile-downloader.d.ts",
-        "default": "./dist/tile-downloader.js"
-      },
-      "require": {
-        "types": "./dist/tile-downloader.d.cts",
-        "default": "./dist/tile-downloader.cjs"
-      }
-    },
-    "./download": {
-      "import": {
-        "types": "./dist/download.d.ts",
-        "default": "./dist/download.js"
-      },
-      "require": {
-        "types": "./dist/download.d.cts",
-        "default": "./dist/download.cjs"
-      }
-    },
-    "./from-mbtiles": {
-      "import": {
-        "types": "./dist/from-mbtiles.d.ts",
-        "default": "./dist/from-mbtiles.js"
-      },
-      "require": {
-        "types": "./dist/from-mbtiles.d.cts",
-        "default": "./dist/from-mbtiles.cjs"
-      }
-    },
-    "./package.json": "./package.json"
-  },
   "bin": {
     "styled-map-package": "bin/smp.js",
     "smp": "bin/smp.js"
   },
   "files": [
     "bin",
-    "dist",
+    "lib",
     "map-viewer"
   ],
   "scripts": {
-    "test": "npm run lint && npm run build && npm run types && node --test",
-    "prepare": "husky",
-    "lint": "eslint .",
-    "types": "tsc",
-    "build": "tsup",
-    "prepack": "npm run build"
+    "test": "echo 'No CLI tests yet'"
   },
   "keywords": [],
-  "author": "",
   "license": "MIT",
   "dependencies": {
-    "@commander-js/extra-typings": "^12.1.0",
-    "@fastify/static": "^8.3.0",
+    "styled-map-package-api": "^5.0.0-pre.0",
     "@inquirer/prompts": "^6.0.1",
-    "@mapbox/sphericalmercator": "^1.2.0",
-    "@maplibre/maplibre-gl-style-spec": "^20.3.1",
-    "@placemarkio/check-geojson": "^0.1.12",
-    "@turf/bbox": "^7.2.0",
-    "@turf/helpers": "^7.2.0",
     "@whatwg-node/server": "^0.10.17",
-    "ansi-diff": "^1.2.0",
-    "archiver": "^7.0.1",
-    "buffer-peek-stream": "^1.1.0",
     "chalk": "^5.4.1",
     "commander": "^12.1.0",
-    "fastify": "^5.6.2",
-    "filter-obj": "^6.1.0",
-    "into-stream": "^8.0.1",
-    "is-stream": "^4.0.1",
     "itty-router": "^5.0.22",
-    "ky": "^1.7.5",
     "log-symbols": "^7.0.0",
-    "map-obj": "^5.0.2",
-    "mbtiles-reader": "^1.0.0",
     "open": "^10.1.0",
     "ora": "^8.2.0",
-    "p-event": "^6.0.1",
-    "p-limit": "^6.2.0",
     "pretty-bytes": "^6.1.1",
     "pretty-ms": "^9.2.0",
-    "readable-stream": "^4.7.0",
-    "temp-dir": "^3.0.0",
-    "yauzl-promise": "^4.0.0",
-    "yocto-queue": "^1.1.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.25.1",
-    "@jsquash/jpeg": "^1.4.0",
-    "@jsquash/png": "^3.0.1",
-    "@stealthybox/jpg-stream": "^1.1.2",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/archiver": "^6.0.3",
-    "@types/geojson": "^7946.0.16",
-    "@types/http-errors": "^2.0.4",
-    "@types/mapbox__sphericalmercator": "^1.2.3",
-    "@types/node": "^18.19.130",
-    "@types/readable-stream": "^4.0.18",
-    "@types/yauzl-promise": "^4.0.1",
-    "ava": "^6.2.0",
-    "block-stream2": "^2.1.0",
-    "esbuild-fix-imports-plugin": "^1.0.20",
-    "eslint": "^9.25.1",
-    "execa": "^9.4.0",
-    "globals": "^16.0.0",
-    "husky": "^9.1.7",
-    "jpg-stream": "^1.1.2",
-    "lint-staged": "^15.4.3",
-    "pixel-stream": "^1.0.3",
-    "playwright": "^1.50.1",
-    "png-stream": "^1.0.5",
-    "prettier": "^3.5.2",
-    "random-bytes-readable-stream": "^3.0.0",
-    "tempy": "^3.1.0",
-    "tsup": "^8.4.0",
-    "type-fest": "^4.35.0",
-    "typescript": "^5.9.3"
-  },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "importOrder": [
-      "^node:",
-      "^[./]"
-    ],
-    "importOrderSeparation": true,
-    "plugins": [
-      "@trivago/prettier-plugin-sort-imports"
-    ]
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --cache --fix"
-    ],
-    "*.{js,css,md}": "prettier --write"
-  },
-  "directories": {
-    "lib": "lib",
-    "test": "test"
+    "readable-stream": "^4.7.0"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/digidem/styled-map-package.git"
-  },
-  "bugs": {
-    "url": "https://github.com/digidem/styled-map-package/issues"
+    "url": "git+https://github.com/digidem/styled-map-package.git",
+    "directory": "packages/cli"
   }
 }

package/LICENSE.md

@@ -1,7 +0,0 @@
-Copyright (c) 2024 Awana Digital
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,28 +0,0 @@
-# Styled Map Package
-
-A Styled Map Package (`.smp`) file is a Zip archive containing all the resources needed to serve a Maplibre vector styled map offline. This includes the style JSON, vector and raster tiles, glyphs (fonts), the sprite image, and the sprite metadata.
-
-## Installation
-
-Install globally to use the `smp` command.
-
-```sh
-npm install --global styled-map-package
-```
-
-## Usage
-
-Download an online map to a styled map package file, specifying the bounding box (west, south, east, north) and max zoom level.
-
-```sh
-smp download https://demotiles.maplibre.org/style.json \
-  --bbox '-180,-80,180,80' \
-  --zoom 5 \
-  --output demotiles.smp
-```
-
-Start a server and open in the default browser.
-
-```sh
-smp view demotiles.smp --open
-```

package/dist/download.cjs

@@ -1,101 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var download_exports = {};
-__export(download_exports, {
-  download: () => download
-});
-module.exports = __toCommonJS(download_exports);
-var import_readable_stream = require("readable-stream");
-var import_promises = require("stream/promises");
-var import_style_downloader = require('./style-downloader.cjs');
-var import_writer = require('./writer.cjs');
-function download({ bbox, maxzoom, styleUrl, onprogress, accessToken }) {
-  const downloader = new import_style_downloader.StyleDownloader(styleUrl, {
-    concurrency: 24,
-    mapboxAccessToken: accessToken
-  });
-  let start = Date.now();
-  let progress = {
-    tiles: { downloaded: 0, totalBytes: 0, total: 0, skipped: 0, done: false },
-    style: { done: false },
-    sprites: { downloaded: 0, done: false },
-    glyphs: { downloaded: 0, total: 0, totalBytes: 0, done: false },
-    output: { totalBytes: 0, done: false },
-    elapsedMs: 0
-  };
-  const sizeCounter = new import_readable_stream.Transform({
-    transform(chunk, encoding, cb) {
-      handleProgress({
-        output: {
-          totalBytes: progress.output.totalBytes + chunk.length,
-          done: false
-        }
-      });
-      cb(null, chunk);
-    },
-    final(cb) {
-      handleProgress({ output: { ...progress.output, done: true } });
-      cb();
-    }
-  });
-  function handleProgress(update) {
-    progress = { ...progress, ...update, elapsedMs: Date.now() - start };
-    onprogress?.(progress);
-  }
-  ;
-  (async () => {
-    const style = await downloader.getStyle();
-    const writer = new import_writer.Writer(style);
-    handleProgress({ style: { done: true } });
-    writer.outputStream.pipe(sizeCounter);
-    writer.on("error", (err) => sizeCounter.destroy(err));
-    try {
-      for await (const spriteInfo of downloader.getSprites()) {
-        await writer.addSprite(spriteInfo);
-        handleProgress({
-          sprites: { downloaded: progress.sprites.downloaded + 1, done: false }
-        });
-      }
-      handleProgress({ sprites: { ...progress.sprites, done: true } });
-      const tiles = downloader.getTiles({
-        bounds: bbox,
-        maxzoom,
-        onprogress: (tileStats) => handleProgress({ tiles: { ...tileStats, done: false } })
-      });
-      await (0, import_promises.pipeline)(tiles, writer.createTileWriteStream({ concurrency: 24 }));
-      handleProgress({ tiles: { ...progress.tiles, done: true } });
-      const glyphs = downloader.getGlyphs({
-        onprogress: (glyphStats) => handleProgress({ glyphs: { ...glyphStats, done: false } })
-      });
-      await (0, import_promises.pipeline)(glyphs, writer.createGlyphWriteStream());
-      handleProgress({ glyphs: { ...progress.glyphs, done: true } });
-      writer.finish();
-    } catch (err) {
-      writer.outputStream.destroy(
-        /** @type {Error} */
-        err
-      );
-    }
-  })();
-  return sizeCounter;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  download
-});

package/dist/download.d.cts

@@ -1,65 +0,0 @@
-import { GlyphDownloadStats } from './style-downloader.cjs';
-import { TileDownloadStats } from './tile-downloader.cjs';
-import { D as DownloadStream } from './types-B4Xn1F9K.cjs';
-import { BBox } from './utils/geo.cjs';
-import 'ky';
-import 'stream';
-import '@maplibre/maplibre-gl-style-spec';
-import './utils/fetch.cjs';
-import './utils/streams.cjs';
-import 'readable-stream';
-import 'geojson';
-import 'type-fest';
-import 'events';
-
-/**
- * @typedef {object} DownloadProgress
- * @property {import('./tile-downloader.js').TileDownloadStats & { done: boolean }} tiles
- * @property {{ done: boolean }} style
- * @property {{ downloaded: number, done: boolean }} sprites
- * @property {import('./style-downloader.js').GlyphDownloadStats & { done: boolean }} glyphs
- * @property {{ totalBytes: number, done: boolean }} output
- * @property {number} elapsedMs
- */
-/**
- * Download a map style and its resources for a given bounding box and max zoom
- * level. Returns a readable stream of a "styled map package", a zip file
- * containing all the resources needed to serve the style offline.
- *
- * @param {object} opts
- * @param {import("./utils/geo.js").BBox} opts.bbox Bounding box to download tiles for
- * @param {number} opts.maxzoom Max zoom level to download tiles for
- * @param {string} opts.styleUrl URL of the style to download
- * @param { (progress: DownloadProgress) => void } [opts.onprogress] Optional callback for reporting progress
- * @param {string} [opts.accessToken]
- * @returns {import('./types.js').DownloadStream} Readable stream of the output styled map file
- */
-declare function download({ bbox, maxzoom, styleUrl, onprogress, accessToken }: {
-    bbox: BBox;
-    maxzoom: number;
-    styleUrl: string;
-    onprogress?: ((progress: DownloadProgress) => void) | undefined;
-    accessToken?: string | undefined;
-}): DownloadStream;
-type DownloadProgress = {
-    tiles: TileDownloadStats & {
-        done: boolean;
-    };
-    style: {
-        done: boolean;
-    };
-    sprites: {
-        downloaded: number;
-        done: boolean;
-    };
-    glyphs: GlyphDownloadStats & {
-        done: boolean;
-    };
-    output: {
-        totalBytes: number;
-        done: boolean;
-    };
-    elapsedMs: number;
-};
-
-export { type DownloadProgress, download };