diff --git a/package-lock.json b/package-lock.json
index 660593f..ab64a5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,6 +75,7 @@
         "jest": "^24.9.0",
         "lint-staged": "^5.0.0",
         "prettier": "^1.19.1",
+        "svelte-preprocess": "^5.0.0",
         "ts-jest": "^26.3.0",
         "ts-node": "3.3.0",
         "typescript": "^3.9.7"
@@ -2902,6 +2903,12 @@
         "@types/yargs-parser": "*"
       }
     },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
     "node_modules/@types/accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
@@ -3167,6 +3174,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "node_modules/@types/pug": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
+      "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
+      "dev": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
@@ -3179,6 +3192,15 @@
       "integrity": "sha512-YP9NVli96E+qQLAF2db+VjnAUEeZcFVg4YnMgr8kpDUFwQBnj31rPLOVHmazbKQhaIkJ9cMHsZhpKdzUeL0KTg==",
       "dev": true
     },
+    "node_modules/@types/sass": {
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
+      "integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/serialize-javascript": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@types/serialize-javascript/-/serialize-javascript-1.5.0.tgz",
@@ -3986,6 +4008,15 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -4581,6 +4612,15 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
+    "node_modules/detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
@@ -4750,6 +4790,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
+      "dev": true
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -8384,6 +8430,18 @@
         "yallist": "^2.1.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -8524,6 +8582,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -9869,6 +9936,18 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
+      "dev": true,
+      "dependencies": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      }
+    },
     "node_modules/sane": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
@@ -10145,6 +10224,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sorcery": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
+      "integrity": "sha512-R5ocFmKZQFfSTstfOtHjJuAwbpGyf9qjQa1egyhvXSbM7emjrtLXtGdZsDJDABC85YBfVvrOiGWKSYXPKdvP1g==",
+      "dev": true,
+      "dependencies": {
+        "buffer-crc32": "^0.2.5",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0",
+        "sourcemap-codec": "^1.3.0"
+      },
+      "bin": {
+        "sorcery": "bin/index.js"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -10181,6 +10275,13 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true
+    },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -10492,13 +10593,88 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.20.1",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.20.1.tgz",
-      "integrity": "sha512-m/dw52BZf+p6KYnyKLErIcGalu4pwJrQbUM7VZriRw6ZlJj1qMAZsLcIWzEB3I0hhdJwkKb7LrrvUIeqmbO92Q==",
+      "version": "3.55.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.0.tgz",
+      "integrity": "sha512-uGu2FVMlOuey4JoKHKrpZFkoYyj0VLjJdz47zX5+gVK5odxHM40RVhar9/iK2YFRVxvfg9FkhfVlR0sjeIrOiA==",
       "engines": {
         "node": ">= 8"
       }
     },
+    "node_modules/svelte-preprocess": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.0.tgz",
+      "integrity": "sha512-q7lpa7i2FBu8Pa+G0MmuQQWETBwCKgsGmuq1Sf6n8q4uaG9ZLcLP0Y+etC6bF4sE6EbLxfiI38zV6RfPe3RSfg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@types/pug": "^2.0.6",
+        "@types/sass": "^1.43.1",
+        "detect-indent": "^6.1.0",
+        "magic-string": "^0.27.0",
+        "sorcery": "^0.10.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 14.10.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.10.2",
+        "coffeescript": "^2.5.1",
+        "less": "^3.11.3 || ^4.0.0",
+        "postcss": "^7 || ^8",
+        "postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0",
+        "pug": "^3.0.0",
+        "sass": "^1.26.8",
+        "stylus": "^0.55.0",
+        "sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+        "svelte": "^3.23.0",
+        "typescript": "^3.9.5 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "coffeescript": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "postcss-load-config": {
+          "optional": true
+        },
+        "pug": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/svelte-preprocess/node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-0.2.4.tgz",
@@ -14483,6 +14659,12 @@
         }
       }
     },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
     "@types/accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
@@ -14750,6 +14932,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "@types/pug": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
+      "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
+      "dev": true
+    },
     "@types/range-parser": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
@@ -14762,6 +14950,15 @@
       "integrity": "sha512-YP9NVli96E+qQLAF2db+VjnAUEeZcFVg4YnMgr8kpDUFwQBnj31rPLOVHmazbKQhaIkJ9cMHsZhpKdzUeL0KTg==",
       "dev": true
     },
+    "@types/sass": {
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
+      "integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/serialize-javascript": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@types/serialize-javascript/-/serialize-javascript-1.5.0.tgz",
@@ -15431,6 +15628,12 @@
         "node-int64": "^0.4.0"
       }
     },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -15930,6 +16133,12 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
+    "detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true
+    },
     "detect-newline": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
@@ -16073,6 +16282,12 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
+      "dev": true
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -19012,6 +19227,15 @@
         "yallist": "^2.1.2"
       }
     },
+    "magic-string": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      }
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -19121,6 +19345,12 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
     },
+    "min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -20186,6 +20416,18 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
+      "dev": true,
+      "requires": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      }
+    },
     "sane": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
@@ -20413,6 +20655,18 @@
         }
       }
     },
+    "sorcery": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
+      "integrity": "sha512-R5ocFmKZQFfSTstfOtHjJuAwbpGyf9qjQa1egyhvXSbM7emjrtLXtGdZsDJDABC85YBfVvrOiGWKSYXPKdvP1g==",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "^0.2.5",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0",
+        "sourcemap-codec": "^1.3.0"
+      }
+    },
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -20446,6 +20700,12 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -20697,9 +20957,34 @@
       }
     },
     "svelte": {
-      "version": "3.20.1",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.20.1.tgz",
-      "integrity": "sha512-m/dw52BZf+p6KYnyKLErIcGalu4pwJrQbUM7VZriRw6ZlJj1qMAZsLcIWzEB3I0hhdJwkKb7LrrvUIeqmbO92Q=="
+      "version": "3.55.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.0.tgz",
+      "integrity": "sha512-uGu2FVMlOuey4JoKHKrpZFkoYyj0VLjJdz47zX5+gVK5odxHM40RVhar9/iK2YFRVxvfg9FkhfVlR0sjeIrOiA=="
+    },
+    "svelte-preprocess": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.0.tgz",
+      "integrity": "sha512-q7lpa7i2FBu8Pa+G0MmuQQWETBwCKgsGmuq1Sf6n8q4uaG9ZLcLP0Y+etC6bF4sE6EbLxfiI38zV6RfPe3RSfg==",
+      "dev": true,
+      "requires": {
+        "@types/pug": "^2.0.6",
+        "@types/sass": "^1.43.1",
+        "detect-indent": "^6.1.0",
+        "magic-string": "^0.27.0",
+        "sorcery": "^0.10.0",
+        "strip-indent": "^3.0.0"
+      },
+      "dependencies": {
+        "strip-indent": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+          "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+          "dev": true,
+          "requires": {
+            "min-indent": "^1.0.0"
+          }
+        }
+      }
     },
     "symbol-observable": {
       "version": "0.2.4",
diff --git a/package.json b/package.json
index 5b4fc20..a9086e8 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "jest": "^24.9.0",
     "lint-staged": "^5.0.0",
     "prettier": "^1.19.1",
+    "svelte-preprocess": "^5.0.0",
     "ts-jest": "^26.3.0",
     "ts-node": "3.3.0",
     "typescript": "^3.9.7"
diff --git a/src/commands/replace.ts b/src/commands/replace.ts
index 04cb71c..d06c03c 100644
--- a/src/commands/replace.ts
+++ b/src/commands/replace.ts
@@ -26,10 +26,10 @@ async function replace(
         ttagOpts = Object.assign(ttagOpts, overrideOpts);
     }
     const babelOptions = makeBabelConf(ttagOpts);
-    const transformFn: TransformFn = file => {
+    const transformFn: TransformFn = async file => {
         const relativePath = path.relative(srcPath, file);
         const resultPath = path.join(out, relativePath);
-        const result = babel.transformFileSync(file, babelOptions);
+        const result = await babel.transformFileAsync(file, babelOptions);
         const dir = path.dirname(resultPath);
         if (dir !== ".") {
             mkdirp.sync(dir);
@@ -38,7 +38,7 @@ async function replace(
             progress.fail("Failed to replace");
             return;
         }
-        fs.writeFileSync(resultPath, result.code);
+        await fs.promises.writeFile(resultPath, result.code);
     };
 
     await pathsWalk([srcPath], progress, transformFn);
diff --git a/src/lib/extract.ts b/src/lib/extract.ts
index 3c72676..db26a32 100644
--- a/src/lib/extract.ts
+++ b/src/lib/extract.ts
@@ -1,11 +1,16 @@
 import "../declarations";
 import * as babel from "@babel/core";
 import * as fs from "fs";
+import * as path from "path";
 import * as tmp from "tmp";
+import { pathToFileURL } from "url";
 import { extname } from "path";
 import { parseComponent } from "vue-sfc-parser";
 import { walk } from "estree-walker";
-import { parse as parseSvelte } from "svelte/compiler";
+import {
+    parse as parseSvelte,
+    preprocess as preprocessSvelte
+} from "svelte/compiler";
 import ignore from "ignore";
 import { TemplateNode } from "svelte/types/compiler/interfaces";
 import { makeBabelConf } from "../defaults";
@@ -13,6 +18,30 @@ import * as ttagTypes from "../types";
 import { TransformFn, pathsWalk } from "./pathsWalk";
 import { mergeOpts } from "./ttagPluginOverride";
 
+async function getSvelteConfigFile(searchDir: string): Promise<string | null> {
+    const filePath = path.resolve(searchDir, "svelte.config.js");
+    try {
+        const stat = await fs.promises.stat(filePath);
+
+        if (stat.isFile()) {
+            return filePath;
+        }
+    } catch {
+        // Ignored
+    }
+
+    const parentDir = path.resolve(searchDir, "..");
+    return parentDir === searchDir
+        ? null
+        : await getSvelteConfigFile(parentDir);
+}
+
+// https://github.com/microsoft/TypeScript/issues/43329
+async function dynamicImport(filename: string) {
+    const url = pathToFileURL(filename).toString();
+    return eval(`import("${url}")`);
+}
+
 export async function extractAll(
     paths: string[],
     lang: string,
@@ -33,17 +62,18 @@ export async function extractAll(
         ttagOpts = mergeOpts(ttagOpts, overrideOpts);
     }
     const babelOptions = makeBabelConf(ttagOpts);
-    const transformFn: TransformFn = filepath => {
+    const transformFn: TransformFn = async filepath => {
         try {
             switch (extname(filepath)) {
                 case ".vue": {
-                    const source = fs.readFileSync(filepath).toString();
+                    const sourceBuffer = await fs.promises.readFile(filepath);
+                    const source = sourceBuffer.toString();
                     const script = parseComponent(source).script;
                     if (script) {
                         const lineCount =
                             source.slice(0, script.start).split(/\r\n|\r|\n/)
                                 .length - 1;
-                        babel.transformSync(
+                        await babel.transformAsync(
                             "\n".repeat(lineCount) + script.content,
                             {
                                 filename: filepath,
@@ -54,8 +84,28 @@ export async function extractAll(
                     break;
                 }
                 case ".svelte": {
-                    const source = fs.readFileSync(filepath).toString();
+                    const sourceBuffer = await fs.promises.readFile(filepath);
+                    let source = sourceBuffer.toString();
                     const jsCodes: string[] = [];
+                    const configFilePath = await getSvelteConfigFile(".");
+                    if (configFilePath) {
+                        const config = await dynamicImport(configFilePath);
+                        const preprocess = config?.default?.preprocess;
+                        if (
+                            Array.isArray(preprocess) &&
+                            preprocess.length > 0
+                        ) {
+                            const preprocessed = await preprocessSvelte(
+                                source,
+                                preprocess,
+                                {
+                                    filename: filepath
+                                }
+                            );
+                            source = preprocessed.code;
+                        }
+                    }
+
                     const { html, instance, module } = parseSvelte(source);
 
                     // <script> tag should include `import { t } from 'ttag'`
@@ -73,12 +123,17 @@ export async function extractAll(
                             }
                         });
                     }
-                    walk(instance, {
-                        enter(node: TemplateNode) {
-                            if (node.type !== "Program") return;
-                            jsCodes.push(source.slice(node.start, node.end));
-                        }
-                    });
+
+                    if (instance) {
+                        walk(instance, {
+                            enter(node: TemplateNode) {
+                                if (node.type !== "Program") return;
+                                jsCodes.push(
+                                    source.slice(node.start, node.end)
+                                );
+                            }
+                        });
+                    }
 
                     // Collect t`...` in {...} in template
                     walk(html, {
@@ -99,14 +154,14 @@ export async function extractAll(
                         }
                     });
 
-                    babel.transformSync(jsCodes.join("\n"), {
+                    await babel.transformAsync(jsCodes.join("\n"), {
                         filename: filepath,
                         ...babelOptions
                     });
                     break;
                 }
                 default:
-                    babel.transformFileSync(filepath, babelOptions);
+                    await babel.transformFileAsync(filepath, babelOptions);
             }
         } catch (err) {
             if (err.codeFrame) {
@@ -143,9 +198,9 @@ function decorateTransformFn(
     const ignoreFiles = rcOpts?.extractor?.ignoreFiles;
     if (ignoreFiles) {
         const ig = ignore().add(ignoreFiles);
-        return function(filename: string): void {
+        return async function(filename: string): Promise<void> {
             if (ig.ignores(filename) === false) {
-                originFunc(filename);
+                await originFunc(filename);
             }
         };
     }
diff --git a/src/lib/pathsWalk.ts b/src/lib/pathsWalk.ts
index cd00978..d844b34 100644
--- a/src/lib/pathsWalk.ts
+++ b/src/lib/pathsWalk.ts
@@ -3,9 +3,9 @@ import * as path from "path";
 import * as c3poTypes from "../types";
 import * as fs from "fs";
 
-export type TransformFn = (filepath: string) => void;
+export type TransformFn = (filepath: string) => Promise<void>;
 
-function walkFile(
+async function walkFile(
     filepath: string,
     progress: c3poTypes.Progress,
     transformFn: TransformFn
@@ -20,7 +20,7 @@ function walkFile(
         extname === ".svelte"
     ) {
         progress.text = filepath;
-        transformFn(filepath);
+        await transformFn(filepath);
     }
 }
 
@@ -31,8 +31,11 @@ async function walkDir(
 ) {
     const walker = walk.walk(dirpath);
     walker.on("file", (root: string, fileState: any, next: any) => {
-        walkFile(path.join(root, fileState.name), progress, transformFn);
-        next();
+        walkFile(
+            path.join(root, fileState.name),
+            progress,
+            transformFn
+        ).then(() => next());
     });
     return new Promise(res => {
         walker.on("end", () => res());
@@ -49,7 +52,7 @@ export async function pathsWalk(
             if (fs.lstatSync(filePath).isDirectory()) {
                 await walkDir(filePath, progress, transformFn);
             } else {
-                walkFile(filePath, progress, transformFn);
+                await walkFile(filePath, progress, transformFn);
             }
         })
     );
diff --git a/tests/commands/__snapshots__/test_extract.ts.snap b/tests/commands/__snapshots__/test_extract.ts.snap
index 02c1cba..d8a89e7 100644
--- a/tests/commands/__snapshots__/test_extract.ts.snap
+++ b/tests/commands/__snapshots__/test_extract.ts.snap
@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`extract and preprocess from svelte 1`] = `
+"msgid \\"\\"
+msgstr \\"\\"
+\\"Content-Type: text/plain; charset=utf-8\\\\n\\"
+\\"Plural-Forms: nplurals=2; plural=(n!=1);\\\\n\\"
+
+#: testSveltePreprocess.svelte:2
+msgid \\"world\\"
+msgstr \\"\\"
+
+#: testSveltePreprocess.svelte:4
+#, javascript-format
+msgid \\"Hello \${ translated }!\\"
+msgstr \\"\\"
+"
+`;
+
 exports[`extract base case 1`] = `
 "msgid \\"\\"
 msgstr \\"\\"
diff --git a/tests/commands/test_extract.ts b/tests/commands/test_extract.ts
index 2376050..5b162d3 100644
--- a/tests/commands/test_extract.ts
+++ b/tests/commands/test_extract.ts
@@ -13,10 +13,15 @@ const vuePath2 = path.resolve(
     __dirname,
     "../fixtures/vueTest/testVueWithTagInScript.vue"
 );
+const svelteFixturePath = path.resolve(__dirname, "../fixtures/svelteTest/");
 const sveltePath = path.resolve(
     __dirname,
     "../fixtures/testSvelteParse.svelte"
 );
+const sveltePreprocessPath = path.resolve(
+    svelteFixturePath,
+    "testSveltePreprocess.svelte"
+);
 const globalFn = path.resolve(__dirname, "../fixtures/globalFunc.js");
 const tsPath = path.resolve(__dirname, "../fixtures/tSParse.ts");
 const tsChaning = path.resolve(__dirname, "../fixtures/tsOptionalChaning.ts");
@@ -65,6 +70,17 @@ test("extract from svelte", () => {
     expect(result).toMatchSnapshot();
 });
 
+test("extract and preprocess from svelte", () => {
+    execSync(
+        `ts-node ../../../src/index.ts extract -o ${potPath} ${sveltePreprocessPath}`,
+        {
+            cwd: svelteFixturePath
+        }
+    );
+    const result = fs.readFileSync(potPath).toString();
+    expect(result).toMatchSnapshot();
+});
+
 test("extract from ts", () => {
     execSync(`ts-node src/index.ts extract -o ${potPath} ${tsPath}`);
     const result = fs.readFileSync(potPath).toString();
diff --git a/tests/fixtures/svelteTest/svelte.config.js b/tests/fixtures/svelteTest/svelte.config.js
new file mode 100644
index 0000000..730cb65
--- /dev/null
+++ b/tests/fixtures/svelteTest/svelte.config.js
@@ -0,0 +1,13 @@
+const preprocess = require("svelte-preprocess");
+
+module.exports = {
+    preprocess: [
+        preprocess({
+            typescript: {
+                compilerOptions: {
+                    target: "es2015"
+                }
+            }
+        }),
+    ],
+};
diff --git a/tests/fixtures/svelteTest/testSveltePreprocess.svelte b/tests/fixtures/svelteTest/testSveltePreprocess.svelte
new file mode 100644
index 0000000..b942a2c
--- /dev/null
+++ b/tests/fixtures/svelteTest/testSveltePreprocess.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { t } from 'ttag';
+	export let translated: string = t`world`;
+</script>
+
+<h1>{t`Hello ${translated}!`}</h1>