Displaying waypoints (and installing a plugin to import SVG files as components)

2023-01-03 13:12:16 +01:00 · 2023-01-03 13:12:16 +01:00 · 62b2b5552a
parent 6b0b394d33
commit 62b2b5552a
8 changed files with 255 additions and 14 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -32,7 +32,8 @@
        "ol": "^7.1.0",
        "pouchdb": "^8.0.0",
        "pouchdb-browser": "^8.0.0",
-        "solid-js": "^1.3.12"
+        "solid-js": "^1.3.12",
+        "vite-plugin-solid-svg": "^0.6.0"
      },
      "devDependencies": {
        "@capacitor/cli": "^3.4.3",
@ -1717,6 +1718,14 @@
        "node": ">= 10"
      }
    },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/@types/aria-query": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
@ -2274,6 +2283,11 @@
        "node": ">=0.6"
      }
    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
    "node_modules/bplist-parser": {
      "version": "0.3.2",
      "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.3.2.tgz",
@ -2549,6 +2563,44 @@
        "node": ">= 8"
      }
    },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
    "node_modules/css.escape": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@ -2560,6 +2612,17 @@
      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
    },
+    "node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/cssom": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@ -2730,6 +2793,38 @@
      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
      "dev": true
    },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
    "node_modules/domexception": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@ -2742,6 +2837,33 @@
        "node": ">=12"
      }
    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
    "node_modules/double-ended-queue": {
      "version": "2.1.0-0",
      "resolved": "https://registry.npmjs.org/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz",
@ -4722,6 +4844,11 @@
      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.1.tgz",
      "integrity": "sha512-QQ/iKiM43DM9+aujTL45Iz5o7gDeSFmy4LPl3HZmNcwCE++NxGazf+yFpY+wCb+YS23sDa1ghpo3zrNFOcHlow=="
    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
    "node_modules/memoizee": {
      "version": "0.4.15",
      "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
@ -4975,6 +5102,17 @@
      "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==",
      "dev": true
    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
    "node_modules/nwsapi": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
@ -5779,7 +5917,6 @@
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -5822,6 +5959,12 @@
        "node": ">= 10.x"
      }
    },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
+    },
    "node_modules/stack-utils": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
@ -5920,6 +6063,34 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@ -6276,6 +6447,18 @@
        "vite": "^3.0.0 || ^4.0.0"
      }
    },
+    "node_modules/vite-plugin-solid-svg": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-solid-svg/-/vite-plugin-solid-svg-0.6.0.tgz",
+      "integrity": "sha512-lKuRDmAG/Qm317dgbV1gwtHuzjk4WJQY1nsIBIywcEp8Sie1lzGKcXnfZEpe2itvNO+tKV8YVLkE+H2BEPcXcg==",
+      "dependencies": {
+        "svgo": "^2.3.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1",
+        "vite": ">=2.4"
+      }
+    },
    "node_modules/vite/node_modules/@esbuild/android-arm": {
      "version": "0.15.18",
      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
--- a/package.json
+++ b/package.json
@ -48,6 +48,7 @@
    "ol": "^7.1.0",
    "pouchdb": "^8.0.0",
    "pouchdb-browser": "^8.0.0",
-    "solid-js": "^1.3.12"
+    "solid-js": "^1.3.12",
+    "vite-plugin-solid-svg": "^0.6.0"
  }
 }
--- a/src/components/gpx/GpxViewer.tsx
+++ b/src/components/gpx/GpxViewer.tsx
@ -1,6 +1,7 @@
-import { Component } from 'solid-js';
+import { Component, For } from 'solid-js';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import Tree from '../tree';
+import { WptViewer } from '../wpt';
 import GpxIcon from './GpxIcon';

 interface Props {
@ -18,13 +19,25 @@ const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
    <Tree
      title={
        <>
-          <GpxIcon />
-          {' '}
-          {title()}
+          <GpxIcon /> {title()}
        </>
      }
      content={undefined}
-      subTree={undefined}
+      subTree={
+        <For
+          each={Object.keys(restrictToHierarchy).filter((key: string) =>
+            key.startsWith('gpx/')
+          )}
+        >
+          {(key: string) => {
+            const child = restrictToHierarchy[key];
+            if (child.type === 'wpt') {
+              return <WptViewer wptId={key} />;
+            }
+            return <></>;
+          }}
+        </For>
+      }
    />
  );
 };
--- a/src/components/wpt/WptViewer.tsx
+++ b/src/components/wpt/WptViewer.tsx
@ -0,0 +1,30 @@
+import { Component } from 'solid-js';
+import WptIcon from '../../icons/location-pin-svgrepo-com.svg?component-solid';
+import { peekCachedSignal } from '../../workers/cached-signals';
+import Tree from '../tree';
+
+interface Props {
+  wptId: string;
+}
+
+const WptViewer: Component<Props> = ({ wptId }) => {
+  const wpt = peekCachedSignal({ id: wptId, method: 'getWpt' });
+  console.log({ caller: 'WptViewer', wptId, wpt: wpt() });
+  const title = () => {
+    return wpt().name;
+  };
+
+  return (
+    <Tree
+      title={
+        <>
+          <WptIcon /> {title()}
+        </>
+      }
+      content={undefined}
+      subTree={undefined}
+    />
+  );
+};
+
+export default WptViewer;
--- a/src/components/wpt/index.ts
+++ b/src/components/wpt/index.ts
@ -1 +1,3 @@
 export { default } from './Wpt';
+
+export { default as WptViewer } from './WptViewer';
--- a/src/icons/location-pin-svgrepo-com.svg
+++ b/src/icons/location-pin-svgrepo-com.svg
@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 width="297" height="297" >
+	 width="24" height="24" viewBox="0 0 300 300">
 <g color='black' stroke='black' >
 	<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
 		c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645
--- a/tsconfig.json
+++ b/tsconfig.json
@ -9,8 +9,8 @@
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
-    "types": ["vite/client"],
-    "rootDirs": ["src"],
+    "types": ["vite/client", "vite-plugin-solid-svg/types"],
+    "rootDirs": ["src"]
  },
-  "include": ["src"],
+  "include": ["src"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -3,7 +3,8 @@

 import { defineConfig } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
-import suidPlugin from "@suid/vite-plugin";
+import suidPlugin from '@suid/vite-plugin';
+import solidSvg from 'vite-plugin-solid-svg';

 // yarn add --dev @esbuild-plugins/node-globals-polyfill
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
@ -13,7 +14,18 @@ import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfil
 import rollupNodePolyFill from 'rollup-plugin-node-polyfills';

 export default defineConfig(({ command, mode, ssrBuild }) => ({
-  plugins: [suidPlugin(), solidPlugin()],
+  plugins: [
+    suidPlugin(),
+    solidPlugin(),
+    solidSvg({
+      /**
+       * If true, will export as JSX component if `as` isn't specified.
+       *
+       * Otherwise will export as url, or as JSX component if '?as=component-solid'
+       */
+      defaultAsComponent: false,
+    }),
+  ],
  test: {
    environment: 'jsdom',
    globals: true,