improved nested key system

Author: Mr Martian

.vscode/extensions.json

@@ -2,7 +2,6 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
     "recommendations": [
       "ms-playwright.playwright",
-      "editorconfig.editorconfig",
       "esbenp.prettier-vscode"
     ]
 }

bun.lock

@@ -126,14 +126,6 @@ export default tseslint.config(
           caughtErrorsIgnorePattern: '^_',
         },
       ],
-      'vue/multi-word-component-names': 'off',
-      'vue/html-closing-bracket-newline': [
-        'error',
-        {
-          singleline: 'never',
-          multiline: 'never',
-        },
-      ],
     },
   },
 );

eslint.config.mjs

@@ -97,6 +97,7 @@
     "@vitejs/plugin-vue": "^5.2.3",
     "@vitest/browser": "^3.1.2",
     "@vitest/coverage-v8": "3.1.2",
+    "@vitest/web-worker": "^3.1.2",
     "@webgpu/types": "^0.1.60",
     "ajv": "^8.17.1",
     "better-sqlite3": "^11.9.1",

package.json

@@ -48,6 +48,19 @@ declare global {
 /**
  * # The S2 Map GPU Engine 🌎 🗺️
  *
+ * ```text
+ *   ad88888ba   ad888888b,    88b           d88
+ *  d8"     "8b d8"     "88    888b         d888
+ *  Y8,                 a8P    88`8b       d8'88
+ *  `Y8aaaaa,        ,d8P"     88 `8b     d8' 88 ,adPPYYba, 8b,dPPYba,  ,adPPYba,
+ *    `"""""8b,    a8P"        88  `8b   d8'  88 ""     `Y8 88P'    "8a I8[    ""
+ *          `8b  a8P'          88   `8b d8'   88 ,adPPPPP88 88       d8  `"Y8ba,
+ *  Y8a     a8P d8"            88    `888'    88 88,    ,88 88b,   ,a8" aa    ]8I
+ *   "Y88888P"  88888888888    88     `8'     88 `"8bbdP"Y8 88`YbbdP"'  `"YbbdP"'
+ *                                                          88
+ *                                                          88
+ * ```
+ *
  * ## Description
  *
  * Both an **S2** and **WM** Projection Map Engine Powered by `WebGL1`, `WebGL2`, and `WebGPU`.

s2/s2Map.ts

@@ -263,238 +263,3 @@
     height: 26.93px;
   }
 }
-
-/** INFO **/
-
-#s2-card {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  left: 16px;
-  top: 16px;
-  width: 425px;
-  min-height: 100px;
-  max-height: calc(100vh - 64px);
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 28%);
-  color: #52535d;
-}
-
-#s2-card a:link {
-  text-decoration: none!important;
-  color: #007fff;
-}
-#s2-card a:hover {
-  text-decoration: underline!important;
-  color: #007fff;
-}
-#s2-card a:active {
-  text-decoration: underline!important;
-  color: #007fff;
-}
-#s2-card a:visited {
-  text-decoration: none!important;
-  color: #007fff;
-}
-
-#s2-card-close-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 36px;
-  height: 36px;
-  border-bottom-left-radius: 10px;
-}
-#s2-card-close-container:hover {
-  background-color: #cc0202;
-  cursor: pointer;
-}
-
-#s2-card-close {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  width: 22px;
-  height: 22px;
-  border: 2px solid transparent;
-  border-radius: 40px
-}
-#s2-card-close::after,
-#s2-card-close::before {
-  content: "";
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  width: 16px;
-  height: 2px;
-  background: currentColor;
-  transform: rotate(45deg);
-  border-radius: 5px;
-  top: 8px;
-  left: 1px
-}
-#s2-card-close::after {
-  transform: rotate(-45deg)
-}
-#s2-card-close-container:hover #s2-card-close {
-  color: #fff;
-}
-
-#s2-skeleton {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-.s2-skel-container {
-  margin: 25px
-}
-
-.s2-skel-header {
-  height: 45px;
-  width: 100%;
-  background: #d9d9d9;
-  border-radius: 25px;
-  position: relative;
-  overflow: hidden;
-}
-
-.s2-skel-container .s2-skel-line::before,
-.s2-skel-header::before {
-  position: absolute;
-  content: "";
-  height: 100%;
-  width: 100%;
-  left: 0;
-  background-image: linear-gradient(to right, #d9d9d9 0%, rgba(0,0,0,0.05) 20%, #d9d9d9 40%, #d9d9d9 100%);
-  background-repeat: no-repeat;
-  background-size: 450px 400px;
-  animation: shimmer 1s linear infinite;
-}
-.s2-skel-container .s2-skel-line {
-  background: #d9d9d9;
-  border-radius: 10px;
-  height: 13px;
-  margin: 10px 0;
-  overflow: hidden;
-  position: relative;
-}
-.s2-skel-container .s2-skel-line-1 {
-  width: calc(100% - 15%);
-}
-.s2-skel-container .s2-skel-line-3 {
-  width: calc(100% - 40%);
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -450px 0;
-  }
-  100% {
-    background-position: 450px 0;
-  }
-}
-
-#s2-card-body {
-  max-height: calc(100vh - 64px);
-  overflow-y: scroll;
-  padding: 0 16px;
-  padding-top: 20px;
-  padding-bottom: 50px;
-  text-align: left;
-}
-
-.s2-card-item {
-  font-size: 15.5px;
-  line-height: 23px;
-  padding: 7px 12px;
-  padding-bottom: 7px;
-}
-
-.s2-card-item p {
-  margin: 0;
-}
-
-.s2-card-item-flex {
-  display: flex;
-  justify-content: flex-start;
-  align-items:flex-start;
-}
-
-.s2-card-item-no-padding {
-  padding: 0 12px;
-}
-
-.s2-card-item-title {
-  font-weight: bold;
-  font-size: 27px;
-  line-height: 28px;
-}
-
-.s2-card-item-key {
-  font-family: -apple-system, BlinkMacSystemFont, "RobotoMedium";
-  padding-right: 10px;
-}
-
-.s2-card-phone {
-  display: flex;
-  justify-content: space-between;
-  margin: 5px 0;
-}
-
-.s2-card-footer-container {
-  position: relative;
-}
-
-.s2-card-footer {
-  padding: 0;
-  margin: 0;
-  background-color: #007fff;
-  height: 52px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  -webkit-user-select: none;
-  user-select: none;
-  color: #fff !important;
-  font-weight: 500;
-}
-
-#s2-mini-card {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  left: 50%;
-  bottom: 16px;
-  transform: translateX(-50%);
-  width: auto;
-  height: auto;
-  background-color: #fff;
-  border-radius: 7px;
-  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 28%);
-  color: #63646f;
-  font-size: 14px;
-}
-
-#s2-mini-card-body {
-  padding: 15px 25px;
-}
-
-@media only screen and (max-width: 750px) {
-  .s2-card {
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    top: auto;
-    width: 100%;
-    min-height: 100px;
-    max-height: 50vh;
-    border-radius: 0px;
-  }
-}

s2/s2maps.css

@@ -29,10 +29,14 @@ export default function coalesceField(
   properties: Properties,
   fieldIsKey = false,
 ): string {
-  // first dive into nested properties
-  while (typeof field === 'object' && 'key' in field) {
-    properties = (properties[field.nestedKey ?? ''] ?? {}) as Properties;
-    field = field.key;
+  // first dive into nested properties if field is an object
+  while (typeof field === 'object' && 'nestedKey' in field) {
+    const nestedKey = [...field.nestedKey];
+    while (nestedKey.length > 1) {
+      properties = (properties[nestedKey[0]] ?? {}) as Properties;
+      nestedKey.shift();
+    }
+    field = nestedKey[0];
   }
   // now coalesce the field
   if (Array.isArray(field)) {

s2/style/coalesceField.ts

@@ -67,14 +67,21 @@ function inputValueFunction<T extends NotNullOrObject, U>(
   cb: Callback<ValueType<T>, U>,
 ): LayerWorkerFunction<U> {
   return (code: number[], properties: Properties): U => {
-    let endKey: string | NestedKey = inputValue.key;
+    const { key, fallback } = inputValue;
     // dive into nested properties if needed
-    while (typeof endKey === 'object' && 'key' in endKey) {
-      properties = (properties[endKey.nestedKey ?? ''] ?? {}) as Properties;
-      endKey = endKey.key;
+    let endKey: string;
+    if (typeof key === 'object') {
+      const nestedKey = [...key.nestedKey];
+      while (nestedKey.length > 1) {
+        properties = (properties[nestedKey[0]] ?? {}) as Properties;
+        nestedKey.shift();
+      }
+      endKey = nestedKey[0];
+    } else {
+      endKey = key;
     }
     // return the input if it exists, otherwise fallback
-    const res = (properties[endKey] ?? inputValue.fallback) as ValueType<T>;
+    const res = (properties[endKey] ?? fallback) as ValueType<T>;
     const cbValue = cb(res);
     if (typeof cbValue === 'number') code.push(1, cbValue);
     else if (Array.isArray(cbValue)) code.push(cbValue.length, ...cbValue);
@@ -144,9 +151,13 @@ function dataRangeFunction<T extends NotNullOrObject, U>(
   return (code: number[], properties: Properties, _zoom: number): U => {
     let endKey: string | NestedKey = key;
     // dive into nested properties if needed
-    while (typeof endKey === 'object' && 'key' in endKey) {
-      properties = (properties[endKey.nestedKey ?? ''] ?? {}) as Properties;
-      endKey = endKey.key;
+    while (typeof endKey === 'object' && 'nestedKey' in endKey) {
+      const nestedKey = [...endKey.nestedKey];
+      while (nestedKey.length > 1) {
+        properties = (properties[nestedKey[0]] ?? {}) as Properties;
+        nestedKey.shift();
+      }
+      endKey = nestedKey[0];
     }
     const dataInput =
       properties[endKey] !== undefined && !isNaN(properties[endKey] as number)