styled-map-package 4.1.0 → 5.0.0-pre.1

package/README.md

@@ -1,18 +1,20 @@
-# Styled Map Package
+# 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.
+CLI for creating, viewing, and converting Styled Map Package (`.smp`) files.
 
-## Installation
+An `.smp` file is a ZIP archive containing all the resources needed to serve a MapLibre vector styled map offline: style JSON, vector and raster tiles, glyphs (fonts), sprites, and metadata.
 
-Install globally to use the `smp` command.
+## Installation
 
 ```sh
 npm install --global styled-map-package
 ```
 
-## Usage
+## Commands
+
+### `smp download`
 
-Download an online map to a styled map package file, specifying the bounding box (west, south, east, north) and max zoom level.
+Download an online map style to a `.smp` file for offline use.
 
 ```sh
 smp download https://demotiles.maplibre.org/style.json \
@@ -21,8 +23,46 @@ smp download https://demotiles.maplibre.org/style.json \
   --output demotiles.smp
 ```
 
-Start a server and open in the default browser.
+**Options:**
+
+| Option                 | Description                                      |
+| ---------------------- | ------------------------------------------------ |
+| `-o, --output <file>`  | Output file (writes to stdout if omitted)        |
+| `-b, --bbox <w,s,e,n>` | Bounding box (west, south, east, north)          |
+| `-z, --zoom <number>`  | Max zoom level (0-22)                            |
+| `-t, --token <token>`  | Mapbox access token (required for Mapbox styles) |
+
+When run interactively, missing options are prompted for.
+
+### `smp view`
+
+Preview a `.smp` file in a web browser.
 
 ```sh
 smp view demotiles.smp --open
 ```
+
+**Options:**
+
+| Option                | Description                      |
+| --------------------- | -------------------------------- |
+| `-o, --open`          | Open in the default web browser  |
+| `-p, --port <number>` | Port to serve on (default: 3000) |
+
+### `smp mbtiles`
+
+Convert an MBTiles file to a `.smp` file.
+
+```sh
+smp mbtiles tiles.mbtiles --output map.smp
+```
+
+**Options:**
+
+| Option                | Description                                      |
+| --------------------- | ------------------------------------------------ |
+| `-o, --output <file>` | Output `.smp` file (writes to stdout if omitted) |
+
+## License
+
+MIT

package/bin/smp-download.js

@@ -1,12 +1,22 @@
 #!/usr/bin/env node
 import { input, number } from '@inquirer/prompts'
-import { Command, InvalidArgumentError } from 'commander'
+import { Command } from 'commander'
 import fs from 'fs'
-import { pipeline } from 'stream/promises'
-
-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 { download } from 'styled-map-package-api/download'
+import {
+  isMapboxURL,
+  API_URL as MAPBOX_API_URL,
+} from 'styled-map-package-api/utils/mapbox'
+
+import { Writable } from 'node:stream'
+
+import {
+  parseBbox,
+  parseUrl,
+  parseZoom,
+  runDownload,
+} from '../lib/commands/download.js'
+import { ttyReporter } from '../lib/reporters.js'
 
 const program = new Command()
 
@@ -25,152 +35,18 @@ program
   )
   .argument('[styleUrl]', 'URL to style to download', parseUrl)
   .action(async (styleUrl, { bbox, zoom, output, token }) => {
-    const promptOutput =
-      !output &&
-      process.stdout.isTTY &&
-      (!styleUrl || !bbox || zoom === undefined)
-
-    if (!styleUrl) {
-      styleUrl = await input({
-        message: 'Style URL to download',
-        required: true,
-        validate: (value) => {
-          try {
-            new URL(value)
-            return true
-          } catch {
-            return 'Please enter a valid URL.'
-          }
-        },
-      })
-    }
-
-    if (!bbox) {
-      const west = await number({
-        message: 'Bounding box west',
-        required: true,
-        step: 'any',
-        min: -180,
-        max: 180,
-      })
-      const south = await number({
-        message: 'Bounding box south',
-        required: true,
-        step: 'any',
-        min: -90,
-        max: 90,
-      })
-      const east = await number({
-        message: 'Bounding box east',
-        required: true,
-        step: 'any',
-        min: -180,
-        max: 180,
-      })
-      const north = await number({
-        message: 'Bounding box north',
-        required: true,
-        step: 'any',
-        min: -90,
-        max: 90,
-      })
-      if (
-        west === undefined ||
-        south === undefined ||
-        east === undefined ||
-        north === undefined
-      ) {
-        throw new InvalidArgumentError('Bounding box values are required.')
-      }
-      bbox = [west, south, east, north]
-    }
-
-    if (zoom === undefined) {
-      zoom = await number({
-        message: 'Max zoom level to download',
-        required: true,
-        min: 0,
-        max: 22,
-      })
-      if (zoom === undefined) {
-        throw new InvalidArgumentError('Zoom level is required.')
-      }
-    }
-
-    if (
-      (isMapboxURL(styleUrl) || styleUrl.startsWith(MAPBOX_API_URL)) &&
-      !token
-    ) {
-      token = await input({
-        message: 'Mapbox access token',
-        required: true,
-      })
-    }
-
-    if (promptOutput) {
-      output = await input({
-        message: 'Output filename (.smp extension will be added)',
-        required: true,
-        transformer: (value) =>
-          value.endsWith('.smp') ? value : `${value}.smp`,
-      })
-    }
-
-    if (output && !output.endsWith('.smp')) {
-      output += '.smp'
-    }
-
-    const reporter = ttyReporter()
-    const readStream = download({
-      bbox,
-      maxzoom: zoom,
-      styleUrl,
-      onprogress: (p) => reporter.write(p),
-      accessToken: token,
+    await runDownload({ styleUrl, bbox, zoom, output, token }, {
+      download,
+      prompt: { input, number },
+      createOutputStream: (output) =>
+        output
+          ? Writable.toWeb(fs.createWriteStream(output))
+          : Writable.toWeb(process.stdout),
+      reporter: ttyReporter,
+      isMapboxURL,
+      mapboxApiUrl: MAPBOX_API_URL,
+      isTTY: !!process.stdout.isTTY,
     })
-    const outputStream = output ? fs.createWriteStream(output) : process.stdout
-    await pipeline(readStream, outputStream)
   })
 
 program.parseAsync(process.argv)
-
-/** @param {string} z */
-function parseZoom(z) {
-  const zoom = parseInt(z)
-  if (isNaN(zoom) || zoom < 0 || zoom > 22) {
-    throw new InvalidArgumentError(
-      'Zoom must be a whole number (integer) between 0 and 22.',
-    )
-  }
-  return zoom
-}
-
-/** @param {string} bbox */
-function parseBbox(bbox) {
-  const bounds = bbox.split(',').map((s) => parseFloat(s.trim()))
-  if (bounds.length !== 4) {
-    throw new InvalidArgumentError(
-      'Bounding box must have 4 values separated by commas.',
-    )
-  }
-  if (bounds.some(isNaN)) {
-    throw new InvalidArgumentError('Bounding box values must be numbers.')
-  }
-  return /** @type {[number, number, number, number]} */ (bounds)
-}
-
-/** @param {string} url */
-function parseUrl(url) {
-  try {
-    return new URL(url).toString()
-  } catch (e) {
-    const message =
-      e !== null &&
-      typeof e === 'object' &&
-      'message' in e &&
-      typeof e.message === 'string'
-        ? e.message
-        : 'Invalid URL'
-    throw new InvalidArgumentError(message)
-  }
-}

package/bin/smp-mbtiles.js

@@ -1,8 +1,11 @@
 #!/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'
+
+import { runMbtiles } from '../lib/commands/mbtiles.js'
 
 const program = new Command()
 
@@ -11,11 +14,13 @@ 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)
-    }
+    await runMbtiles({ mbtilesPath, output }, {
+      fromMBTiles,
+      createOutputStream: (output) =>
+        output
+          ? Writable.toWeb(fs.createWriteStream(output))
+          : Writable.toWeb(process.stdout),
+    })
   })
 
 program.parseAsync(process.argv)

package/bin/smp-view.js

@@ -1,73 +1,51 @@
 #!/usr/bin/env node
 import { createServerAdapter } from '@whatwg-node/server'
 import { Command } from 'commander'
-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 fsPromises from 'node:fs/promises'
 import path from 'node:path'
 
-import { Reader } from '../dist/reader.js'
-import { createServer } from '../dist/server.js'
+import { runView } from '../lib/commands/view.js'
 
 const program = new Command()
 
 program
   .description('Preview a styled map package in a web browser')
   .option('-o, --open', 'open in the default web browser')
-  .option('-p, --port <number>', 'port to serve on', parseInt, 3000)
+  .option('-p, --port <number>', 'port to serve on', (v) => parseInt(v), 3000)
   .argument('<file>', 'file to serve')
   .action(async (filepath, { open, port }) => {
-    const address = await serve({ port, filepath })
-    console.log(`server listening on ${address}`)
-    if (open) {
-      await openApp(address)
-    }
+    await runView(
+      { port, filepath: path.relative(process.cwd(), filepath), open },
+      {
+        Reader,
+        createServer,
+        openApp,
+        log: (msg) => console.log(msg),
+        readViewerHtml: (filepath) => fsPromises.readFile(filepath),
+        listen: (port, handler) =>
+          new Promise((resolve, reject) => {
+            const server = http.createServer(
+              createServerAdapter(handler),
+            )
+            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)
+          }),
+      },
+    )
   })
 
 program.parseAsync(process.argv)
-
-/**
- * Serve a styled map package on the given port (defaults to 3000).
- *
- * @param {object} opts
- * @param {number} [opts.port]
- * @param {string} opts.filepath
- * @returns
- */
-async function serve({ port = 3000, filepath }) {
-  const reader = new Reader(path.relative(process.cwd(), filepath))
-  const smpServer = createServer({ base: '/map' })
-
-  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',
-      },
-    })
-  })
-  router.all('/map/*', (request) => {
-    return smpServer.fetch(request, reader)
-  })
-  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)
-  })
-}

package/lib/commands/download.js

@@ -0,0 +1,188 @@
+import { InvalidArgumentError } from 'commander'
+
+/**
+ * @param {string} z
+ * @returns {number}
+ */
+export function parseZoom(z) {
+  const zoom = parseInt(z)
+  if (isNaN(zoom) || zoom < 0 || zoom > 22) {
+    throw new InvalidArgumentError(
+      'Zoom must be a whole number (integer) between 0 and 22.',
+    )
+  }
+  return zoom
+}
+
+/**
+ * @param {string} bbox
+ * @returns {[number, number, number, number]}
+ */
+export function parseBbox(bbox) {
+  const bounds = bbox.split(',').map((s) => parseFloat(s.trim()))
+  if (bounds.length !== 4) {
+    throw new InvalidArgumentError(
+      'Bounding box must have 4 values separated by commas.',
+    )
+  }
+  if (bounds.some(isNaN)) {
+    throw new InvalidArgumentError('Bounding box values must be numbers.')
+  }
+  return /** @type {[number, number, number, number]} */ (bounds)
+}
+
+/**
+ * @param {string} url
+ * @returns {string}
+ */
+export function parseUrl(url) {
+  try {
+    return new URL(url).toString()
+  } catch (e) {
+    const message =
+      e !== null &&
+      typeof e === 'object' &&
+      'message' in e &&
+      typeof e.message === 'string'
+        ? e.message
+        : 'Invalid URL'
+    throw new InvalidArgumentError(message)
+  }
+}
+
+/**
+ * @typedef {object} DownloadOptions
+ * @property {string | undefined} styleUrl
+ * @property {[number, number, number, number] | undefined} bbox
+ * @property {number | undefined} zoom
+ * @property {string | undefined} output
+ * @property {string | undefined} token
+ */
+
+/**
+ * @typedef {object} DownloadDeps
+ * @property {(opts: any) => ReadableStream} download
+ * @property {{ input: (opts: any) => Promise<string>, number: (opts: any) => Promise<number | undefined> }} prompt
+ * @property {(output: string | undefined) => WritableStream | import('node:fs').WriteStream} createOutputStream
+ * @property {() => { write: (p: any) => void }} reporter
+ * @property {(url: string) => boolean} isMapboxURL
+ * @property {string} mapboxApiUrl
+ * @property {boolean} isTTY
+ */
+
+/**
+ * @param {DownloadOptions} options
+ * @param {DownloadDeps} deps
+ */
+export async function runDownload(
+  { styleUrl, bbox, zoom, output, token },
+  deps,
+) {
+  const { download, prompt, isMapboxURL, mapboxApiUrl, isTTY } = deps
+
+  const promptOutput =
+    !output && isTTY && (!styleUrl || !bbox || zoom === undefined)
+
+  if (!styleUrl) {
+    styleUrl = await prompt.input({
+      message: 'Style URL to download',
+      required: true,
+      validate: (/** @type {string} */ value) => {
+        try {
+          new URL(value)
+          return true
+        } catch {
+          return 'Please enter a valid URL.'
+        }
+      },
+    })
+  }
+
+  if (!bbox) {
+    const west = await prompt.number({
+      message: 'Bounding box west',
+      required: true,
+      step: 'any',
+      min: -180,
+      max: 180,
+    })
+    const south = await prompt.number({
+      message: 'Bounding box south',
+      required: true,
+      step: 'any',
+      min: -90,
+      max: 90,
+    })
+    const east = await prompt.number({
+      message: 'Bounding box east',
+      required: true,
+      step: 'any',
+      min: -180,
+      max: 180,
+    })
+    const north = await prompt.number({
+      message: 'Bounding box north',
+      required: true,
+      step: 'any',
+      min: -90,
+      max: 90,
+    })
+    if (
+      west === undefined ||
+      south === undefined ||
+      east === undefined ||
+      north === undefined
+    ) {
+      throw new InvalidArgumentError('Bounding box values are required.')
+    }
+    bbox = [west, south, east, north]
+  }
+
+  if (zoom === undefined) {
+    zoom = await prompt.number({
+      message: 'Max zoom level to download',
+      required: true,
+      min: 0,
+      max: 22,
+    })
+    if (zoom === undefined) {
+      throw new InvalidArgumentError('Zoom level is required.')
+    }
+  }
+
+  if ((isMapboxURL(styleUrl) || styleUrl.startsWith(mapboxApiUrl)) && !token) {
+    token = await prompt.input({
+      message: 'Mapbox access token',
+      required: true,
+    })
+  }
+
+  if (promptOutput) {
+    output = await prompt.input({
+      message: 'Output filename (.smp extension will be added)',
+      required: true,
+      transformer: (/** @type {string} */ value) =>
+        value.endsWith('.smp') ? value : `${value}.smp`,
+    })
+  }
+
+  if (output && !output.endsWith('.smp')) {
+    output += '.smp'
+  }
+
+  const reporter = deps.reporter()
+  const readStream = download({
+    bbox,
+    maxzoom: zoom,
+    styleUrl,
+    onprogress: (/** @type {any} */ p) => reporter.write(p),
+    accessToken: token,
+  })
+  const outputStream = deps.createOutputStream(output)
+  await readStream.pipeTo(
+    outputStream instanceof WritableStream
+      ? outputStream
+      : // @ts-ignore - Writable.toWeb compatibility
+        outputStream,
+  )
+}

package/lib/commands/mbtiles.js

@@ -0,0 +1,21 @@
+/**
+ * @typedef {object} MbtilesOptions
+ * @property {string} mbtilesPath
+ * @property {string | undefined} output
+ */
+
+/**
+ * @typedef {object} MbtilesDeps
+ * @property {(path: string) => ReadableStream} fromMBTiles
+ * @property {(output: string | undefined) => WritableStream} createOutputStream
+ */
+
+/**
+ * @param {MbtilesOptions} options
+ * @param {MbtilesDeps} deps
+ */
+export async function runMbtiles({ mbtilesPath, output }, deps) {
+  const readStream = deps.fromMBTiles(mbtilesPath)
+  const outputStream = deps.createOutputStream(output)
+  await readStream.pipeTo(outputStream)
+}

package/lib/commands/view.js

@@ -0,0 +1,57 @@
+/**
+ * @typedef {object} ViewOptions
+ * @property {number} port
+ * @property {string} filepath
+ * @property {boolean} [open]
+ */
+
+/**
+ * @typedef {object} ViewDeps
+ * @property {new (filepath: string) => any} Reader
+ * @property {(opts: any) => { fetch: (req: any, reader: any) => any }} createServer
+ * @property {(port: number, handler: any) => Promise<import('node:http').Server>} listen
+ * @property {(url: string) => Promise<void>} openApp
+ * @property {(url: string) => void} log
+ * @property {(url: string) => Promise<Uint8Array>} readViewerHtml
+ */
+
+/**
+ * @param {ViewOptions} options
+ * @param {ViewDeps} deps
+ * @returns {Promise<string>} The address the server is listening on
+ */
+export async function runView({ port, filepath, open }, deps) {
+  const { Reader, createServer, openApp, log, readViewerHtml } = deps
+
+  const reader = new Reader(filepath)
+  const smpServer = createServer({ base: '/map' })
+
+  /** @param {Request} request */
+  const handler = async (request) => {
+    const url = new URL(request.url)
+    if (url.pathname === '/') {
+      const index = await readViewerHtml(
+        new URL('../../map-viewer/index.html', import.meta.url).pathname,
+      )
+      return new Response(index, {
+        headers: {
+          'Content-Type': 'text/html',
+          'Content-Length': String(index.byteLength),
+          'Cache-Control': 'public, max-age=0',
+        },
+      })
+    }
+    if (url.pathname.startsWith('/map/')) {
+      return smpServer.fetch(request, reader)
+    }
+    return new Response('Not found', { status: 404 })
+  }
+
+  const address = await deps.listen(port, handler)
+
+  log(`server listening on ${address}`)
+  if (open) {
+    await openApp(address)
+  }
+  return address
+}