Migrate to svelte

ylfyt · Sep 29, 2023 · 9fce4ca · 9fce4ca
1 parent a6a87dc
commit 9fce4ca
Show file tree

Hide file tree

Showing 18 changed files with 994 additions and 656 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,47 @@
-# PDF Splitter
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+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`?**
+
+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)
+```
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,7 +7,7 @@
     <title>PDF Splitter</title>
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -5,22 +5,21 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "pdf-lib": "^1.17.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.6",
-    "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "@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"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Container from "./components/container.svelte";
+	import Home from "./pages/home.svelte";
+
+</script>
+<div class="App min-h-screen flex flex-col items-center">
+  <Container>
+    <Home />
+  </Container>
+</div>
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/components/container.svelte b/src/components/container.svelte
@@ -0,0 +1,4 @@
+<div class="w-full md:w-3/4 xl:w-1/2">
+	<slot />
+</div>
+;
diff --git a/src/components/container.tsx b/src/components/container.tsx
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,8 @@
+import './index.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')!,
+})
+
+export default app
diff --git a/src/main.tsx b/src/main.tsx
diff --git a/src/pages/home.svelte b/src/pages/home.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { PDFDocument } from 'pdf-lib';
+	import { saveFile } from '../utils/save-file.js';
+
+	let splits: string[] = [''];
+	let files: FileList | undefined;
+	let doc: PDFDocument | undefined;
+
+	$: files,
+		(() => {
+			if (!files || !files[0]) {
+				doc = undefined;
+				return;
+			}
+			files[0].arrayBuffer().then(async (buff) => {
+				doc = await PDFDocument.load(buff);
+			});
+		})();
+
+	const split = async () => {
+		if (!doc || !files?.[0]) return;
+
+		splits.forEach(async (val, idx) => {
+			if (val === '') return;
+
+			const pages = val
+				.split(',')
+				.map((page) => {
+					if (!page.includes('-')) {
+						return Number.isNaN(parseInt(page)) ? [] : parseInt(page) - 1;
+					}
+					const data = page.split('-').map((val) => parseInt(val));
+					if (data.length < 2 || Number.isNaN(data[0]) || Number.isNaN(data[1])) return [];
+
+					const temp: number[] = [];
+					for (let i = data[0]; i <= data[1]; i++) {
+						temp.push(i - 1);
+					}
+					return temp;
+				})
+				.flat()
+				.filter((val) => val >= 0 || val);
+			if (pages.length === 0) return;
+
+			const resultDoc = await PDFDocument.create();
+			const copiedPages = await resultDoc.copyPages(doc!, pages);
+			for (const copied of copiedPages) {
+				resultDoc.addPage(copied);
+			}
+			const buff = await resultDoc.save();
+			saveFile(buff, `Split#${idx + 1}_No${val}_${files![0]?.name}`, 'application/pdf');
+		});
+	};
+
+	function init(el: HTMLInputElement) {
+		el.focus();
+	}
+</script>
+
+<div class="md:mt-10 md:border border-gray-900 rounded-lg pt-4 pb-8 px-4 md:px-6 flex flex-col gap-8 md:gap-10">
+	<h1 class="text-3xl text-center font-medium">PDF Splitter</h1>
+	<div class="">
+		<div class="text-sm md:text-lg font-bold md:font-medium text-gray-900 mb-2">Upload PDF File</div>
+		<div>
+			<input
+				accept=".pdf"
+				class="w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 p-2"
+				type="file"
+				bind:files
+			/>
+			{#if doc}
+				<div class="text-xs md:text-sm text-gray-900 mt-1 font-medium">
+					Pages Count: <span class="text-red-600">{doc?.getPageCount()}</span>
+				</div>
+			{/if}
+		</div>
+	</div>
+	<div>
+		<div class="flex items-center mb-2 gap-2">
+			<span class="text-sm md:text-lg font-bold md:font-medium text-gray-900">Split Pages</span>
+			<span class="text-xs md:text-base">(Separated by comma, ex: 1, 2, 5-10, 14)</span>
+		</div>
+		<div class="flex flex-col gap-3">
+			{#each splits as _, idx}
+				<div>
+					<div class="flex md:gap-4 items-center justify-start">
+						<div class="text-sm md:text-base w-[60px]">{`Split #${idx + 1}`}</div>
+						<input
+							class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-3/4 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+							type="text"
+							placeholder="Pages number"
+							bind:value={splits[idx]}
+							use:init
+						/>
+						{#if idx === 0}
+							<div class="w-[30px] h-[30px] ml-1 md:ml-0" />
+						{:else}
+							<button
+								on:click={() => {
+									splits = splits.filter((_, i) => idx != i);
+								}}
+								class="font-bold text-sm bg-red-300 w-[30px] h-[30px] rounded-full ml-1 md:ml-0"
+							>
+								&#10005;
+							</button>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+		<button
+			type="button"
+			class="text-white bg-orange-400 focus:outline-none focus:ring-4 focus:ring-blue-300 rounded-lg text-sm px-3 py-1 text-center mt-2 shadow-sm"
+			on:click={() => {
+				splits.push('');
+				splits = [...splits];
+			}}
+		>
+			Add Split
+		</button>
+	</div>
+	<div class="mt-4 flex justify-end md:justify-start">
+		<button
+			type="button"
+			disabled={!doc || !splits.find((val) => val !== '')}
+			class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 shadow-md disabled:opacity-50"
+			on:click={() => {
+				split();
+			}}
+		>
+			Download
+		</button>
+	</div>
+</div>