Migration to sveltekit

.gitignore

@@ -1,24 +1,10 @@
-# 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?
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,16 @@
+{
+    "useTabs": false,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "tabWidth": 4,
+    "printWidth": 120,
+    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+    "overrides": [
+        {
+            "files": "*.svelte",
+            "options": {
+                "parser": "svelte"
+            }
+        }
+    ]
+}

README.md

@@ -1,47 +1,38 @@
-# Svelte + TS + Vite
+# create-svelte
 
-This template should help get you started developing with Svelte and TypeScript in Vite.
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
 
-## Recommended IDE Setup
+## Creating a project
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+If you're seeing this, you've probably already done this step. Congrats!
 
-## Need an official Svelte framework?
+```bash
+# create a new project in the current directory
+npm create svelte@latest
 
-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.
-
-## Technical considerations
-
-**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.
-
-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.
-
-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.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+# create a new project in my-app
+npm create svelte@latest my-app
+```
 
-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.
+## Developing
 
-**Why include `.vscode/extensions.json`?**
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-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.
+```bash
+npm run dev
 
-**Why enable `allowJs` in the TS template?**
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
 
-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.
+## Building
 
-**Why is HMR not preserving my local component state?**
+To create a production version of your app:
 
-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).
+```bash
+npm run build
+```
 
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+You can preview the production build with `npm run preview`.
 
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
-```
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package.json

@@ -1,25 +1,33 @@
 {
-  "name": "pdf-splitter",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
-  },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
-    "@tsconfig/svelte": "^5.0.0",
-    "autoprefixer": "^10.4.16",
-    "pdf-lib": "^1.17.1",
-    "postcss": "^8.4.31",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.6",
-    "tailwindcss": "^3.3.3",
-    "tslib": "^2.6.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
-  }
+    "name": "sveltekit-start",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "lint": "prettier --check .",
+        "format": "prettier --write ."
+    },
+    "devDependencies": {
+        "@sveltejs/adapter-auto": "^3.0.0",
+        "@sveltejs/kit": "^2.0.0",
+        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@types/node": "^20.11.16",
+        "autoprefixer": "^10.4.17",
+        "pdf-lib": "^1.17.1",
+        "postcss": "^8.4.35",
+        "prettier": "^3.2.5",
+        "prettier-plugin-svelte": "^3.1.2",
+        "prettier-plugin-tailwindcss": "^0.5.11",
+        "svelte": "^4.2.7",
+        "svelte-check": "^3.6.0",
+        "tailwindcss": "^3.4.1",
+        "tslib": "^2.4.1",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.3"
+    },
+    "type": "module"
 }

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  }
-}
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+    namespace App {
+        // interface Error {}
+        // interface Locals {}
+        // interface PageData {}
+        // interface PageState {}
+        // interface Platform {}
+    }
+}
+
+export {};

src/app.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+</head>
+
+<body class="min-h-dvh bg-light text-dark dark:bg-dark dark:text-light" data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>

src/index.css

@@ -1,12 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-input[type='file']::file-selector-button {
-  margin-right: 20px;
-  border: none;
-  padding: 5px 10px;
-  color: black;
-  cursor: pointer;
-  border-radius: 10px;
-}

src/lib/hooks/use-local-storage.ts

@@ -0,0 +1,45 @@
+import { browser } from "$app/environment";
+import { writable, type Updater, get, type Writable } from "svelte/store";
+
+export function useLocalStorage<T>(key: string, initialValue: T | (() => T)): Writable<T> {
+    let tempInitValue: T;
+    if (typeof initialValue === 'function') {
+        tempInitValue = (initialValue as () => T)();
+    } else {
+        tempInitValue = initialValue;
+    }
+
+    const store = writable<T>(tempInitValue);
+    const { subscribe } = store;
+
+    const localStorageStore: Writable<T> = {
+        subscribe,
+        set: (v: T) => {
+            store.set(v);
+            localStorage.setItem(key, JSON.stringify(v));
+        },
+        update: (updater: Updater<T>) => {
+            const v = updater(get(store));
+            store.set(v);
+            localStorage.setItem(key, JSON.stringify(v));
+        }
+    };
+
+    if (!browser) {
+        return localStorageStore;
+    }
+
+    const raw = localStorage.getItem(key);
+    if (raw == null) {
+        localStorage.setItem(key, typeof tempInitValue === 'string' ? tempInitValue : JSON.stringify(tempInitValue));
+        return localStorageStore;
+    }
+
+    try {
+        store.set(typeof initialValue === 'string' ? raw as T : JSON.parse(raw));
+    } catch (error) {
+        console.error(error);
+        localStorage.setItem(key, typeof tempInitValue === 'string' ? tempInitValue : JSON.stringify(tempInitValue));
+    }
+    return localStorageStore;
+}