Migration to Svelte and Vite

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

README.md

@@ -1,45 +1,47 @@
-![Badge](https://github.com/Beakerboy/OSMBuilding/actions/workflows/main.yml/badge.svg)
-[![Coverage Status](https://coveralls.io/repos/github/Beakerboy/OSMBuilding/badge.svg?branch=main)](https://coveralls.io/github/Beakerboy/OSMBuilding?branch=main)
+# Svelte + TS + Vite
 
-OSM Building Viewer
-=====================
+This template should help get you started developing with Svelte and TypeScript in Vite.
 
-### Visualize an OSM Building in 3D
+## Recommended IDE Setup
 
-Visualize an OSM Building from the live OSM data.
-To visualize a building tagged with a way, use the URL:
-https://beakerboy.github.io/OSMBuilding/index.html?id=[id]
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
-If the building is a multipolygon, or a relation, use:
-https://beakerboy.github.io/OSMBuilding/index.html?type=relation&id=[id]
+## Need an official Svelte framework?
 
-...replacing [id] with the actual id of the way or relation.
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
 
-Additional details will be displayed if "&info" is appended to the URL.
+## Technical considerations
 
-Console debug messages can be printed to the screen if "&errorBox" is appended to the url. Helpful since mobile browsers often lack any inspection capability.
+**Why use this over SvelteKit?**
 
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
 
-Supports:
- * Ways with a building tag
- * Ways with building parts inside.
- * Building relations with way and/or multipolygon parts
- * Mulipolygon buildings
- * Multipolygon building with multiple open ways which combine to a closed way.
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
 
-Roof Types:
- * Flat
- * Skillion
- * Dome
- * Pyramidal
- * Gabled
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
 
-Examples:
- * Simple building with no parts - [Washington Monument](https://beakerboy.github.io/OSMBuilding/index.html?id=766761337)
- * Glass - [Petronas Towers](https://beakerboy.github.io/OSMBuilding/index.html?id=279944536)
- * Dome roof, Gabled roof, and Skillion ramp - [Jefferson Memorial](https://beakerboy.github.io/OSMBuilding/index.html?type=relation&id=3461570)
- * Dome, Gabled, and Pyramidal Roof - [US Capitol](https://beakerboy.github.io/OSMBuilding/index.html?type=relation&id=12286916)
- * [Chrysler Building](https://beakerboy.github.io/OSMBuilding/index.html?id=42500770)
- * Building Relation [Burj Khalifa](https://beakerboy.github.io/OSMBuilding/index.html?type=relation&id=7584462)
- * Multipolygon with no parts - [Freer Art Gallery](https://beakerboy.github.io/OSMBuilding/index.html?type=relation&id=1029355)
- * Relation with multipolygon parts - [Leaning Tower of Pisa](https://beakerboy.github.io/OSMBuilding/index.html?type=relation&id=12982338)
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

index.html

@@ -1,30 +1,13 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>OpenStreetMap Building 3D Render</title>
+<!doctype html>
+<html lang="en">
+  <head>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-    <!-- Import maps polyfill -->
-    <!-- Remove this when import maps will be widely supported -->
-    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
-
-    <script type="importmap">
-      {
-        "imports": {
-          "three": "https://unpkg.com/three/build/three.module.js",
-          "pyramid": "https://beakerboy.github.io/Threejs-Geometries/src/PyramidGeometry.js",
-          "ramp": "https://beakerboy.github.io/Threejs-Geometries/src/RampGeometry.js",
-          "wedge": "https://beakerboy.github.io/Threejs-Geometries/src/WedgeGeometry.js"
-        }
-      }
-    </script>
-    <script src="./src/apis.js"></script>
-    <script type="module" src="./src/index.js"></script>
-    <div id="errorBox" style="position:absolute; top:10px; display:block; z-index:100; background-color: #ffffff; white-space:pre-line"></div>
-</body>
-
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenStreetMap Building 3D Render</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>

package.json

@@ -1,36 +1,33 @@
 {
-  "name": "OSMBuilding",
-  "version": "1.0.0",
+  "name": "osmbuilding",
+  "private": true,
+  "version": "2.0.0",
   "type": "module",
-  "main": "src/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Beakerboy/OSMBuilding.git"
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
   },
   "dependencies": {
-    "three": "^0.138.3"
+    "three": "^0.166.1"
   },
-  "devDependencies" : {
-    "coveralls": "*",
-    "c8": "*",
-    "eslint": "^8.13",
-    "jest": "*",
-    "jest-environment-jsdom": "*",
-    "jest-fetch-mock": "*",
-    "jest-matcher-deep-close-to": "*",
-    "jsdom": "*",
-    "pyramid": "file:../pyramid",
-    "ramp": "file:../ramp",
-    "wedge": "file:../wedge"
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@threlte/core": "^7.3.1",
+    "@threlte/extras": "^8.11.4",
+    "@tsconfig/svelte": "^5.0.4",
+    "@types/three": "^0.166.0",
+    "Threejs-Geometries": "github:Beakerboy/Threejs-Geometries",
+    "lil-gui": "^0.19.2",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.4",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4"
   },
-  "scripts": {
-    "test": "c8 jest"
-  },
-   "c8": {
-    "all": true,
-    "reporter": [
-      "lcov",
-      "text-summary"
-    ]
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Beakerboy/OSMBuilding.git"
   }
 }