From f6adf9f364921bb35f9e253c085eb65668fcca88 Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Sun, 18 May 2025 09:49:00 -0700 Subject: [PATCH 1/4] generate flavor lists and JSONs statically to clean up code. [#5] --- app/App.tsx | 60 +++++++++++++------------------------- flavors/black_and_white.ts | 2 +- flavors/sol.ts | 2 +- vite.config.ts | 45 ++++++++++++++++++++++++++-- 4 files changed, 66 insertions(+), 43 deletions(-) diff --git a/app/App.tsx b/app/App.tsx index 16d1683..58c7e6a 100644 --- a/app/App.tsx +++ b/app/App.tsx @@ -1,37 +1,11 @@ -import { For, createSignal, createEffect, onMount, Component } from "solid-js"; +import { For, createSignal, createEffect, createResource, onMount, Component, Show } from "solid-js"; import "maplibre-gl/dist/maplibre-gl.css"; import "./App.css"; import maplibregl from "maplibre-gl"; import { StyleSpecification } from "maplibre-gl"; import { Flavor, layers } from "@protomaps/basemaps"; -const FLAVORS = ["bio", "dusk_rose", "iris_bloom","rainforest", "seafoam", "flat"]; - -const nameToFlavor = new Map(); - -import bio from "../flavors/bio.ts"; -nameToFlavor.set("bio", bio); - -import iris_bloom from "../flavors/iris_bloom.ts"; -nameToFlavor.set("iris_bloom", iris_bloom); - -import seafoam from "../flavors/seafoam.ts"; -nameToFlavor.set("seafoam", seafoam); - -// import sol from "../flavors/sol.ts"; -// nameToFlavor.set("sol", sol); - -import flat from "../flavors/flat.ts"; -nameToFlavor.set("flat", flat); - -import dusk_rose from "../flavors/dusk_rose.ts"; -nameToFlavor.set("dusk_rose", dusk_rose); - -import rainforest from "../flavors/rainforest.ts"; -nameToFlavor.set("rainforest", rainforest); - -const getStyle = (index: number, showLabels: boolean): StyleSpecification => { - let flavorName = FLAVORS[index]; +const getStyle = (flavor: Flavor | undefined, showLabels: boolean): StyleSpecification => { return { version: 8, glyphs: @@ -42,13 +16,13 @@ const getStyle = (index: number, showLabels: boolean): StyleSpecification => { url: "https://api.protomaps.com/tiles/v4.json?key=1003762824b9687f", }, }, - layers: layers("protomaps", nameToFlavor.get(flavorName)!, { lang: showLabels ? "en" : undefined }), + layers: flavor ? layers("protomaps", flavor, { lang: showLabels ? "en" : undefined }) : [] }; }; -const FlavorRow: Component<{ name: string, flavor: Flavor }> = (props) => { +const FlavorRow: Component<{ name: string }> = (props) => { return ( -
+
{props.name}
) @@ -57,7 +31,7 @@ const FlavorRow: Component<{ name: string, flavor: Flavor }> = (props) => { function App() { let map: maplibregl.Map; - const [selectedIndex, setSelectedIndex] = createSignal(0); + const [selectedFlavorName, setSelectedFlavorName] = createSignal(); const [showLabels, setShowLabels] = createSignal(true); onMount(async () => { @@ -68,17 +42,23 @@ function App() { map = new maplibregl.Map({ container: "map", - style: getStyle(selectedIndex(), showLabels()), + style: getStyle(undefined, showLabels()), }); }); - createEffect(() => { - map.setStyle(getStyle(selectedIndex(), showLabels())); + const [flavorList] = createResource(async () => { + const resp = await fetch("/flavors.json"); + return await resp.json(); + }) + + const [flavorJson] = createResource(selectedFlavorName, async () => { + const resp = await fetch(`/flavors/${selectedFlavorName()}.json`); + return await resp.json(); }); - const selectFlavor = (i: number) => { - setSelectedIndex(i); - } + createEffect(() => { + map.setStyle(getStyle(flavorJson(), showLabels())); + }); const handleShowLabelsChange = (event: Event) => { const target = event.target as HTMLInputElement; @@ -88,7 +68,9 @@ function App() { return (
- {(flavorName,i) =>
selectFlavor(i())}>
} + + {(flavorName) =>
setSelectedFlavorName(flavorName)}>
} + { city_label_halo: WHITE, state_label: BLACK, state_label_halo: WHITE, - country_label: BLACK + country_label: BLACK, address_label: BLACK, address_label_halo: WHITE, diff --git a/flavors/sol.ts b/flavors/sol.ts index f4ac59e..f9fb1b0 100644 --- a/flavors/sol.ts +++ b/flavors/sol.ts @@ -92,7 +92,7 @@ export default { glacier: 'rgba(239, 240, 231, 1)', scrub: 'rgba(176, 205, 174, 1)', forest: 'rgba(149, 207, 194, 1)' - } + }, address_label: "black", address_label_halo: "white", diff --git a/vite.config.ts b/vite.config.ts index 4095d9b..088bd8e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,47 @@ import { defineConfig } from 'vite' import solid from 'vite-plugin-solid' +import path from 'path' +import fs from 'fs' + +const flavorList = () => { + const contentDir = path.resolve(__dirname, 'flavors') + let files = fs.readdirSync(contentDir) + return files.filter(f => f.endsWith('.ts')).map(f => f.slice(0,-3)); +} + +const flavorBody = async (name: string) => { + return (await import(`./flavors/${name}.ts`)).default; +} export default defineConfig({ - plugins: [solid()], -}) + plugins: [ + { + 'name':'basemaps-flavors', + configureServer(server) { + server.middlewares.use(async (req, res, next) => { + if (req.url === '/flavors.json') { + res.setHeader('Content-Type', 'application/json'); + res.end(JSON.stringify(flavorList())); + return + } + if (req.url && req.url.startsWith("/flavors/")) { + res.setHeader('Content-Type', 'application/json'); + res.end(JSON.stringify(await flavorBody(req.url.slice(9,-5)))); + return + } + next() + }) + }, + async generateBundle() { + const flist = flavorList(); + fs.writeFileSync(path.resolve(__dirname, 'dist', 'flavors.json'), JSON.stringify(flist, null, 2)) + const dir = path.resolve(__dirname, 'dist', 'flavors') + fs.mkdirSync(dir); + for (const name of flist) { + fs.writeFileSync(path.resolve(__dirname, 'dist', 'flavors', `${name}.json`), JSON.stringify(await flavorBody(name), null, 2)) + } + }, + }, + solid() + ] +}); From 8d5aee86878fc947c79c06b53702e06b919cebaa Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Sun, 18 May 2025 09:50:59 -0700 Subject: [PATCH 2/4] set initial value --- app/App.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/App.tsx b/app/App.tsx index 58c7e6a..6510a88 100644 --- a/app/App.tsx +++ b/app/App.tsx @@ -48,7 +48,9 @@ function App() { const [flavorList] = createResource(async () => { const resp = await fetch("/flavors.json"); - return await resp.json(); + const j = await resp.json(); + setSelectedFlavorName(j[0]); + return j; }) const [flavorJson] = createResource(selectedFlavorName, async () => { From 087e18643a6148265b5f30dd2d86a9de1cdbcb1c Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Sun, 18 May 2025 09:57:42 -0700 Subject: [PATCH 3/4] fix typechecking --- package-lock.json | 18 ++++++++++++++++++ package.json | 3 ++- tsconfig.node.json | 4 +++- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 06fce18..142cff0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "solid-js": "1.9.5" }, "devDependencies": { + "@types/node": "^22.15.18", "typescript": "5.8.3", "vite": "6.3.3", "vite-plugin-solid": "2.11.6" @@ -1213,6 +1214,16 @@ "@types/pbf": "*" } }, + "node_modules/@types/node": { + "version": "22.15.18", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.18.tgz", + "integrity": "sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~6.21.0" + } + }, "node_modules/@types/pbf": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz", @@ -2010,6 +2021,13 @@ "node": ">=14.17" } }, + "node_modules/undici-types": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", + "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==", + "dev": true, + "license": "MIT" + }, "node_modules/update-browserslist-db": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", diff --git a/package.json b/package.json index 6449715..7265d05 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,12 @@ "build-ghpages": "tsc -b && vite build --base=/basemaps-flavors/" }, "dependencies": { - "maplibre-gl": "5.4.0", "@protomaps/basemaps": "5.3.0", + "maplibre-gl": "5.4.0", "solid-js": "1.9.5" }, "devDependencies": { + "@types/node": "^22.15.18", "typescript": "5.8.3", "vite": "6.3.3", "vite-plugin-solid": "2.11.6" diff --git a/tsconfig.node.json b/tsconfig.node.json index abcd7f0..a3209a9 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -18,7 +18,9 @@ "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true + "noUncheckedSideEffectImports": true, + + "types": ["node"] }, "include": ["vite.config.ts"] } From d8e728195f55705cc6ad770362324a2f70633a2b Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Sun, 18 May 2025 10:04:52 -0700 Subject: [PATCH 4/4] fix build --- vite.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 088bd8e..d2a9fed 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -34,9 +34,9 @@ export default defineConfig({ }, async generateBundle() { const flist = flavorList(); - fs.writeFileSync(path.resolve(__dirname, 'dist', 'flavors.json'), JSON.stringify(flist, null, 2)) const dir = path.resolve(__dirname, 'dist', 'flavors') - fs.mkdirSync(dir); + fs.mkdirSync(dir, {recursive: true}); + fs.writeFileSync(path.resolve(__dirname, 'dist', 'flavors.json'), JSON.stringify(flist, null, 2)) for (const name of flist) { fs.writeFileSync(path.resolve(__dirname, 'dist', 'flavors', `${name}.json`), JSON.stringify(await flavorBody(name), null, 2)) }