prettier formatting for app/

app/.prettierrc.json

@@ -0,0 +1 @@
+{}

app/package-lock.json

@@ -40,6 +40,7 @@
         "@types/react-dom": "^18.0.0",
         "@types/react-svg-pan-zoom": "^3.3.5",
         "@vitejs/plugin-react": "^1.3.0",
+        "prettier": "^2.8.4",
         "typescript": "^4.6.3",
         "vite": "^2.9.13"
       }
@@ -2663,6 +2664,21 @@
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
       "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
     },
+    "node_modules/prettier": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

app/package.json

@@ -1,11 +1,13 @@
 {
-  "name": "docs",
+  "name": "pmtiles-app",
   "private": true,
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
-    "tsc": "tsc --watch"
+    "tsc": "tsc --watch",
+    "prettier": "prettier --write src/*",
+    "prettier-check": "prettier --check src/*"
   },
   "dependencies": {
     "@mapbox/vector-tile": "^1.3.1",
@@ -40,6 +42,7 @@
     "@types/react-dom": "^18.0.0",
     "@types/react-svg-pan-zoom": "^3.3.5",
     "@vitejs/plugin-react": "^1.3.0",
+    "prettier": "^2.8.4",
     "typescript": "^4.6.3",
     "vite": "^2.9.13"
   },

app/src/Inspector.tsx

@@ -43,7 +43,7 @@ const Split = styled("div", {
 
 const TileRow = (props: {
   entry: Entry;
-  setSelectedEntry:(val: Entry | null) => void;
+  setSelectedEntry: (val: Entry | null) => void;
 }) => {
   let [z, x, y] = tileIdToZxy(props.entry.tileId);
   return (
@@ -58,7 +58,11 @@ const TileRow = (props: {
       <td>{y}</td>
       <td>{props.entry.offset}</td>
       <td>{props.entry.length}</td>
-      <td>{props.entry.runLength == 0 ? "directory" : `tile(${props.entry.runLength})`}</td>
+      <td>
+        {props.entry.runLength == 0
+          ? "directory"
+          : `tile(${props.entry.runLength})`}
+      </td>
     </TableRow>
   );
 };
@@ -289,8 +293,8 @@ const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
   return <img src={imgSrc}></img>;
 };
 
-function getHashString(entry:Entry) {
+function getHashString(entry: Entry) {
-  const [z,x,y] = tileIdToZxy(entry.tileId);
+  const [z, x, y] = tileIdToZxy(entry.tileId);
   let hash = `${z}/${x}/${y}`;
 
   const hashName = "inspector";

app/src/Loader.tsx

@@ -41,7 +41,13 @@ const StyledLink = styled(
     justifyContent: "center",
     alignItems: "center",
   },
-  { "&:hover": { backgroundColor: "$hover", color:"$white", cursor: "pointer" } }
+  {
+    "&:hover": {
+      backgroundColor: "$hover",
+      color: "$white",
+      cursor: "pointer",
+    },
+  }
 );
 
 const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup, {

app/src/Metadata.tsx

@@ -9,7 +9,7 @@ const Padded = styled("div", {
 
 const Heading = styled("div", {
   paddingBottom: "2rem",
-  fontFamily: "monospace"
+  fontFamily: "monospace",
 });
 
 function Metadata(props: { file: PMTiles }) {
@@ -27,24 +27,43 @@ function Metadata(props: { file: PMTiles }) {
 
   return (
     <Padded>
-      { header ? <Heading>
+      {header ? (
-      <div>root directory: offset={header.rootDirectoryOffset} len={header.rootDirectoryLength}</div>
+        <Heading>
-      <div>metadata: offset={header.jsonMetadataOffset} len={header.jsonMetadataLength}</div>
+          <div>
-      <div>leaf directories: offset={header.leafDirectoryOffset} len={header.leafDirectoryLength}</div>
+            root directory: offset={header.rootDirectoryOffset} len=
-      <div>tile data: offset={header.tileDataOffset} len={header.tileDataLength}</div>
+            {header.rootDirectoryLength}
-      <div>num addressed tiles: {header.numAddressedTiles}</div>
+          </div>
-      <div>num tile entries: {header.numTileEntries}</div>
+          <div>
-      <div>num tile contents: {header.numTileContents}</div>
+            metadata: offset={header.jsonMetadataOffset} len=
-      <div>clustered: {header.clustered ? "true" : "false"}</div>
+            {header.jsonMetadataLength}
-      <div>internal compression: {header.internalCompression}</div>
+          </div>
-      <div>tile compression: {header.tileCompression}</div>
+          <div>
-      <div>tile type: {header.tileType}</div>
+            leaf directories: offset={header.leafDirectoryOffset} len=
-      <div>min zoom: {header.minZoom}</div>
+            {header.leafDirectoryLength}
-      <div>max zoom: {header.maxZoom}</div>
+          </div>
-      <div>min lon, min lat, max lon, max lat: {header.minLon}, {header.minLat}, {header.maxLon}, {header.maxLat}</div>
+          <div>
-      <div>center zoom: {header.centerZoom}</div>
+            tile data: offset={header.tileDataOffset} len=
-      <div>center lon, center lat: {header.centerLon}, {header.centerLat}</div>
+            {header.tileDataLength}
-      </Heading> : null }
+          </div>
+          <div>num addressed tiles: {header.numAddressedTiles}</div>
+          <div>num tile entries: {header.numTileEntries}</div>
+          <div>num tile contents: {header.numTileContents}</div>
+          <div>clustered: {header.clustered ? "true" : "false"}</div>
+          <div>internal compression: {header.internalCompression}</div>
+          <div>tile compression: {header.tileCompression}</div>
+          <div>tile type: {header.tileType}</div>
+          <div>min zoom: {header.minZoom}</div>
+          <div>max zoom: {header.maxZoom}</div>
+          <div>
+            min lon, min lat, max lon, max lat: {header.minLon}, {header.minLat}
+            , {header.maxLon}, {header.maxLat}
+          </div>
+          <div>center zoom: {header.centerZoom}</div>
+          <div>
+            center lon, center lat: {header.centerLon}, {header.centerLat}
+          </div>
+        </Heading>
+      ) : null}
 
       <JsonViewer value={metadata} theme="dark" defaultInspectDepth={1} />
     </Padded>

app/src/stitches.config.ts

@@ -1,60 +1,64 @@
 import { createStitches, globalCss } from "@stitches/react";
 
 export const { styled } = createStitches({
-	theme: {
+  theme: {
-		colors: {
+    colors: {
-			black: "rgba(0, 0, 0)",
+      black: "rgba(0, 0, 0)",
-			white: "rgba(236, 237, 238)",
+      white: "rgba(236, 237, 238)",
-			hover: "#7180B9",
+      hover: "#7180B9",
-			primary: "#3423A6",
+      primary: "#3423A6",
-			primaryText: "white"
+      primaryText: "white",
-		},
+    },
-		fonts: {
+    fonts: {
-			sans: "Inter, sans-serif",
+      sans: "Inter, sans-serif",
-		},
+    },
-		fontSizes: {
+    fontSizes: {
-			1: "12px",
+      1: "12px",
-			2: "14px",
+      2: "14px",
-			3: "16px",
+      3: "16px",
-			4: "20px",
+      4: "20px",
-			5: "24px",
+      5: "24px",
-			6: "32px",
+      6: "32px",
-		},
+    },
-		space: {
+    space: {
-			1: "10px",
+      1: "10px",
-			2: "20px",
+      2: "20px",
-			3: "40px",
+      3: "40px",
-		},
+    },
-		sizes: {
+    sizes: {
-			1: "4px",
+      1: "4px",
-			2: "8px",
+      2: "8px",
-			3: "16px",
+      3: "16px",
-			4: "32px",
+      4: "32px",
-			5: "64px",
+      5: "64px",
-			6: "128px",
+      6: "128px",
-		},
+    },
-		radii: {
+    radii: {
-			1: "2px",
+      1: "2px",
-			2: "4px",
+      2: "4px",
-			3: "8px",
+      3: "8px",
-			round: "9999px",
+      round: "9999px",
-		},
+    },
-		fontWeights: {},
+    fontWeights: {},
-		lineHeights: {},
+    lineHeights: {},
-		letterSpacings: {},
+    letterSpacings: {},
-		borderWidths: {},
+    borderWidths: {},
-		borderStyles: {},
+    borderStyles: {},
-		shadows: {},
+    shadows: {},
-		zIndices: {},
+    zIndices: {},
-		transitions: {},
+    transitions: {},
-	},
+  },
 });
 
 export const globalStyles = globalCss({
-	"*": {
+  "*": {
-		margin: 0,
+    margin: 0,
-		padding: 0,
+    padding: 0,
-		border: 0,
+    border: 0,
-	},
+  },
-	body: { backgroundColor: "$black", color: "$white", fontFamily: "sans-serif" }
+  body: {
+    backgroundColor: "$black",
+    color: "$white",
+    fontFamily: "sans-serif",
+  },
 });