chore: upgrade routify

Support sass and typescript

docs/package.json

@@ -6,11 +6,13 @@
     "dev:svite": "vite dev",
     "build": "run-s build:*",
     "build:routify": "routify run -b",
-    "build:svite": "vite build"
+    "build:svite": "vite build",
+    "preview": "vite preview"
   },
+  "type": "module",
   "devDependencies": {
-    "@sveltech/routify": "^1.9.10",
-    "@sveltejs/vite-plugin-svelte": "^1.0.2",
+    "@roxi/routify": "^2.18.8",
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
     "carbon-components-svelte": "../",
     "carbon-icons-svelte": "^11.1.0",
     "clipboard-copy": "^4.0.1",
@@ -22,8 +24,10 @@
     "prism-svelte": "^0.4.7",
     "prismjs": "^1.28.0",
     "remark-slug": "^6.0.0",
+    "sass": "^1.57.1",
     "svelte": "^3.49.0",
-    "vite": "^3.0.9"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4"
   },
   "routify": {
     "routifyDir": ".routify",

docs/src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Router } from "@sveltech/routify";
+  import { Router } from "@roxi/routify";
   import { routes } from "../.routify/routes";
 </script>
 

docs/src/components/Preview.svelte

@@ -7,7 +7,7 @@
   import copy from "clipboard-copy";
   import { CodeSnippet, Button } from "carbon-components-svelte";
   import Launch from "carbon-icons-svelte/lib/Launch.svelte";
-  import { url } from "@sveltech/routify";
+  import { url } from "@roxi/routify";
   import { theme } from "../store";
 
   $: themedSrcUrl = $url(`${src}?theme=${$theme}`);

docs/src/layouts/ComponentLayout.svelte

@@ -14,7 +14,7 @@
     TabContent,
   } from "carbon-components-svelte";
   import Code from "carbon-icons-svelte/lib/Code.svelte";
-  import { page, metatags } from "@sveltech/routify";
+  import { page, metatags } from "@roxi/routify";
   import { onMount } from "svelte";
   import { theme } from "../store";
   import ComponentApi from "../components/ComponentApi.svelte";

docs/src/pages/_fallback.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
-  import { url, metatags } from "@sveltech/routify";
+  import { url, metatags } from "@roxi/routify";
 
   metatags.title = "404";
 </script>

docs/src/pages/_layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { isActive, url, layout, beforeUrlChange } from "@sveltech/routify";
+  import { isActive, url, layout, beforeUrlChange } from "@roxi/routify";
   import {
     Header,
     HeaderUtilities,

docs/src/pages/index.svelte

@@ -15,7 +15,7 @@
   } from "carbon-components-svelte";
   import TileCard from "../components/TileCard.svelte";
   import { theme } from "../store";
-  import { metatags } from "@sveltech/routify";
+  import { metatags } from "@roxi/routify";
 
   metatags.title = "Carbon Components Svelte";
   metatags.description =

docs/svelte.config.js

@@ -1,14 +1,17 @@
-const path = require("path");
-const { mdsvex } = require("mdsvex");
-const { parse, walk } = require("svelte/compiler");
-const slug = require("remark-slug");
-const visit = require("unist-util-visit");
-const { format } = require("prettier");
-const pkg = require("../package.json");
-const component_api = require("./src/COMPONENT_API.json");
-const fs = require("fs");
-const Prism = require("prismjs");
-require("prism-svelte");
+import path from "node:path";
+import * as url from "node:url";
+import { mdsvex } from "mdsvex";
+import { parse, walk } from "svelte/compiler";
+import slug from "remark-slug";
+import visit from "unist-util-visit";
+import { format } from "prettier";
+import pkg from "../package.json" assert { type: "json" };
+import component_api from "./src/COMPONENT_API.json" assert { type: "json" };
+import fs from "node:fs";
+import Prism from "prismjs";
+import "prism-svelte";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 
 const component_api_by_name = component_api.components.reduce((a, c) => {
   return {
@@ -139,9 +142,10 @@ function carbonify() {
   };
 }
 
-module.exports = {
+const config = {
   extensions: [".svelte", ".svx"],
   preprocess: [
+    vitePreprocess(),
     {
       markup: ({ filename, content }) => {
         if (/node_modules/.test(filename) || !filename.endsWith(".svelte"))
@@ -223,3 +227,5 @@ module.exports = {
     },
   ],
 };
+
+export default config;

docs/vite.config.js

@@ -5,6 +5,6 @@ export default defineConfig({
   plugins: [svelte()],
   optimizeDeps: {
     include: ["clipboard-copy", "flatpickr/dist/plugins/rangePlugin"],
-    exclude: ["@sveltech/routify"],
+    exclude: ["@roxi/routify", "fsevents", "carbon-icons-svelte"],
   },
 });

src/app.scss

@@ -1 +0,0 @@
-/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */