├── README.md
├── .vscode
    └── extensions.json
├── src
    ├── vite-env.d.ts
    ├── app.css
    ├── main.js
    ├── lib
    │   └── services
    │   │   └── pocketbase.js
    └── App.svelte
├── svelte.config.js
├── vite.config.js
├── .gitignore
├── package.json
├── index.html
├── jsconfig.json
└── public
    └── vite.svg


/README.md:
--------------------------------------------------------------------------------
1 | ## DBSeeder Docs
2 | ### Coming Soon
3 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["svelte.svelte-vscode"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="svelte" />
2 | /// <reference types="vite/client" />
3 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | @plugin "daisyui" {
3 |     themes: light --default;
4 | }
5 | 
6 | ion-icon {
7 |     visibility: visible !important;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { mount } from 'svelte'
 2 | import './app.css'
 3 | import App from './App.svelte'
 4 | 
 5 | const app = mount(App, {
 6 |   target: document.getElementById('app'),
 7 | })
 8 | 
 9 | export default app
10 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2 | 
3 | export default {
4 |   // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
5 |   // for more information about preprocessors
6 |   preprocess: vitePreprocess(),
7 | }
8 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import { svelte } from '@sveltejs/vite-plugin-svelte'
3 | import tailwindcss from '@tailwindcss/vite'
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [svelte(), tailwindcss()],
8 | })
9 | 


--------------------------------------------------------------------------------
/src/lib/services/pocketbase.js:
--------------------------------------------------------------------------------
 1 | import PocketBase from "pocketbase";
 2 | 
 3 | export default function initPocketBase(url) {
 4 |     try {
 5 |         const pb = new PocketBase(url);
 6 |         return pb;
 7 |     }
 8 |     catch (error) {
 9 |         console.error("Error initializing PocketBase:", error);
10 |         return null;
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "dbseeder",
 3 |     "private": true,
 4 |     "version": "0.0.0",
 5 |     "type": "module",
 6 |     "scripts": {
 7 |         "dev": "vite",
 8 |         "build": "vite build",
 9 |         "preview": "vite preview"
10 |     },
11 |     "devDependencies": {
12 |         "@sveltejs/vite-plugin-svelte": "^5.0.3",
13 |         "daisyui": "^5.0.27",
14 |         "svelte": "^5.23.1",
15 |         "vite": "^6.3.2"
16 |     },
17 |     "dependencies": {
18 |         "@tailwindcss/vite": "^4.1.4",
19 |         "papaparse": "^5.5.2",
20 |         "pocketbase": "^0.26.0",
21 |         "tailwindcss": "^4.1.4"
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |         <title>DbSeeder</title>
 8 |         <script
 9 |             type="module"
10 |             src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
11 |         ></script>
12 |         <script
13 |             nomodule
14 |             src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
15 |         ></script>
16 |     </head>
17 |     <body>
18 |         <div id="app"></div>
19 |         <script type="module" src="/src/main.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "moduleResolution": "bundler",
 4 |     "target": "ESNext",
 5 |     "module": "ESNext",
 6 |     /**
 7 |      * svelte-preprocess cannot figure out whether you have
 8 |      * a value or a type, so tell TypeScript to enforce using
 9 |      * `import type` instead of `import` for Types.
10 |      */
11 |     "verbatimModuleSyntax": true,
12 |     "isolatedModules": true,
13 |     "resolveJsonModule": true,
14 |     /**
15 |      * To have warnings / errors of the Svelte compiler at the
16 |      * correct position, enable source maps by default.
17 |      */
18 |     "sourceMap": true,
19 |     "esModuleInterop": true,
20 |     "skipLibCheck": true,
21 |     /**
22 |      * Typecheck JS in `.svelte` and `.js` files by default.
23 |      * Disable this if you'd like to use dynamic types.
24 |      */
25 |     "checkJs": true
26 |   },
27 |   /**
28 |    * Use global.d.ts instead of compilerOptions.types
29 |    * to avoid limiting type declarations.
30 |    */
31 |   "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
32 | }
33 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     import { onMount } from "svelte";
  3 |     import Papa from "papaparse";
  4 |     import initPocketBase from "./lib/services/pocketbase";
  5 | 
  6 |     let client = $state(null);
  7 |     let clientUrl = $state("");
  8 |     let errorText = $state("");
  9 |     let headers = $state(null);
 10 |     let fileData = $state(null);
 11 |     let selectedFile = $state(null);
 12 |     let collectionName = $state("");
 13 |     let isWriting = $state(false);
 14 |     let showParseSuccess = $state(false);
 15 |     let successText = $state("");
 16 |     let totalUploads = $state(0);
 17 |     let uploadInterval = $state("1000");
 18 | 
 19 |     onMount(() => {
 20 |         const savedClientUrl = localStorage.getItem("clientUrl");
 21 |         if (savedClientUrl) {
 22 |             clientUrl = savedClientUrl;
 23 |         }
 24 |     });
 25 | 
 26 |     function initClient() {
 27 |         errorText = "";
 28 |         if (!clientUrl) {
 29 |             errorText = "Please enter a valid Pocketbase URL.";
 30 |             return;
 31 |         }
 32 |         const pb = initPocketBase(clientUrl);
 33 |         if (pb) {
 34 |             client = pb;
 35 |             localStorage.setItem("clientUrl", clientUrl);
 36 |         } else {
 37 |             clientUrl = "";
 38 |             client = null;
 39 |         }
 40 |     }
 41 | 
 42 |     function resetClient() {
 43 |         client = null;
 44 |         clientUrl = "";
 45 |         errorText = "";
 46 |         fileData = null;
 47 |         selectedFile = null;
 48 |         headers = null;
 49 |         collectionName = "";
 50 |         isWriting = false;
 51 |         showParseSuccess = false;
 52 |         successText = "";
 53 |         totalUploads = 0;
 54 |         uploadInterval = "1000";
 55 |         // localStorage.removeItem("clientUrl");
 56 |     }
 57 | 
 58 |     async function handleFileSelect(event) {
 59 |         const file = event.target.files[0];
 60 |         if (!file) return;
 61 | 
 62 |         selectedFile = file;
 63 |         errorText = "";
 64 |         fileData = null;
 65 | 
 66 |         try {
 67 |             Papa.parse(file, {
 68 |                 header: true,
 69 |                 complete: function (results, file) {
 70 |                     if (results?.data?.length === 0) {
 71 |                         errorText = "No data found in the file.";
 72 |                     } else {
 73 |                         showParseSuccess = true;
 74 |                         setTimeout(() => {
 75 |                             showParseSuccess = false;
 76 |                         }, 3000);
 77 |                         fileData = results.data;
 78 |                         headers = results.meta.fields;
 79 |                     }
 80 |                 },
 81 |                 error: function (error) {
 82 |                     console.error("Parsing error:", error);
 83 |                     errorText = "Error parsing file: " + error.message;
 84 |                 },
 85 |             });
 86 |         } catch (error) {
 87 |             errorText = error.message;
 88 |             selectedFile = null;
 89 |         }
 90 |     }
 91 | 
 92 |     async function seedPocketbase() {
 93 |         if (!client || !fileData || !collectionName) {
 94 |             errorText = "Please select a file and collection name.";
 95 |             return;
 96 |         }
 97 | 
 98 |         isWriting = true;
 99 |         errorText = "";
100 |         successText = "";
101 | 
102 |         try {
103 |             for (const row of fileData) {
104 |                 await new Promise((resolve) =>
105 |                     setTimeout(resolve, Number(uploadInterval))
106 |                 );
107 |                 let payload = {};
108 |                 for (const header of headers) {
109 |                     payload[header] = row[header];
110 |                 }
111 |                 await client.collection(collectionName).create(payload);
112 |                 totalUploads += 1;
113 |             }
114 |             successText = "Data seeded successfully!";
115 |         } catch (error) {
116 |             console.error("Seeding error:", error);
117 |             errorText = "Error seeding data: " + error.message;
118 |         } finally {
119 |             isWriting = false;
120 |         }
121 |     }
122 | </script>
123 | 
124 | <main
125 |     class="bg-slate-200 p-4 grid h-screen grid-rows-[30px_1fr] w-screen gap-4"
126 | >
127 |     <div>
128 |         <h2 class="text-slate-600 text-xl font-semibold">DbSeeder</h2>
129 |     </div>
130 |     <div class="grid grid-cols-[400px_1fr] gap-4 overflow-hidden">
131 |         <div
132 |             class="bg-base-100 border-base-300 px-6 py-4 rounded-lg flex flex-col gap-12"
133 |         >
134 |             <div>
135 |                 <div class="mb-4">
136 |                     <div class="text-slate-500 pb-1 text-sm">
137 |                         Pocketbase Endpoint
138 |                     </div>
139 |                     <label class="input w-full">
140 |                         <span class="label">
141 |                             <ion-icon name="link-outline"></ion-icon>
142 |                         </span>
143 |                         <input
144 |                             type="url"
145 |                             placeholder="https://pocketbase.example.com"
146 |                             disabled={!!client}
147 |                             bind:value={clientUrl}
148 |                         />
149 |                     </label>
150 |                 </div>
151 |                 <div class="mb-4 opacity-40">
152 |                     <div class="text-slate-500 pb-1 text-sm">
153 |                         Authentication Token (coming soon)
154 |                     </div>
155 |                     <label class="input w-full">
156 |                         <span class="label">
157 |                             <ion-icon name="key-outline"></ion-icon>
158 |                         </span>
159 |                         <input
160 |                             type="text"
161 |                             disabled={true}
162 |                             placeholder="Bearer ..."
163 |                         />
164 |                     </label>
165 |                 </div>
166 |                 <div class="flex gap-4">
167 |                     <button
168 |                         class="btn btn-neutral"
169 |                         disabled={!!client}
170 |                         onclick={initClient}
171 |                     >
172 |                         <ion-icon name="play-outline"></ion-icon>
173 |                         Initialize Pocketbase
174 |                     </button>
175 |                     {#if client}
176 |                         <button class="btn btn-error" onclick={resetClient}>
177 |                             <ion-icon name="close-outline"></ion-icon>
178 |                             Disconnect
179 |                         </button>
180 |                     {/if}
181 |                 </div>
182 |             </div>
183 |             <div>
184 |                 <div class="mb-4">
185 |                     <div class="text-slate-500 pb-1 text-sm">
186 |                         Collection Name
187 |                     </div>
188 |                     <label class="input w-full">
189 |                         <span class="label">
190 |                             <ion-icon name="file-tray-full-outline"></ion-icon>
191 |                         </span>
192 |                         <input
193 |                             type="text"
194 |                             placeholder="Example: users"
195 |                             bind:value={collectionName}
196 |                         />
197 |                     </label>
198 |                 </div>
199 |                 <div class="mb-4">
200 |                     <div class="text-slate-500 pb-1 text-sm">Pick a file</div>
201 |                     <fieldset class="fieldset w-full p-0">
202 |                         <input
203 |                             type="file"
204 |                             class="file-input w-full"
205 |                             accept=".csv"
206 |                             disabled={!client || !collectionName}
207 |                             onchange={handleFileSelect}
208 |                         />
209 |                         <!-- svelte-ignore a11y_label_has_associated_control -->
210 |                         <label class="label"
211 |                             >Only CSV files are supported.</label
212 |                         >
213 |                     </fieldset>
214 |                 </div>
215 |                 {#if fileData && showParseSuccess}
216 |                     <div
217 |                         role="alert"
218 |                         class="alert alert-vertical alert-success sm:alert-horizontal"
219 |                     >
220 |                         <ion-icon name="alert-circle-outline" class="size-6"
221 |                         ></ion-icon>
222 |                         <div>
223 |                             <h3 class="font-bold">File parsed successfully!</h3>
224 |                             <div class="text-xs">
225 |                                 Make sure the headers match the collection
226 |                                 fields
227 |                             </div>
228 |                         </div>
229 |                     </div>
230 |                 {/if}
231 |             </div>
232 |             <div class="flex-1 flex flex-col justify-end">
233 |                 <div>
234 |                     {#if isWriting}
235 |                         <div
236 |                             role="alert"
237 |                             class="alert relative alert-vertical alert-info sm:alert-horizontal"
238 |                         >
239 |                             <span class="loading loading-spinner loading-sm"
240 |                             ></span>
241 |                             <div>
242 |                                 <h3 class="font-bold">
243 |                                     Writing to Pocketbase...
244 |                                 </h3>
245 |                                 <div class="text-xs">
246 |                                     Please wait while we write the data to the
247 |                                     collection.
248 |                                 </div>
249 |                                 {#if totalUploads > 0}
250 |                                     <div class="text-xs pt-1">
251 |                                         {totalUploads} records uploaded
252 |                                     </div>
253 |                                 {/if}
254 |                             </div>
255 |                             <button
256 |                                 class="btn btn-sm btn-neutral"
257 |                                 onclick={resetClient}
258 |                             >
259 |                                 <ion-icon name="stop-circle" class="size-4"
260 |                                 ></ion-icon>
261 |                                 Stop
262 |                             </button>
263 |                         </div>
264 |                     {/if}
265 |                     {#if errorText}
266 |                         <div role="alert" class="alert alert-warning">
267 |                             <ion-icon name="warning-outline"></ion-icon>
268 |                             <span>{errorText}</span>
269 |                         </div>
270 |                     {/if}
271 |                     {#if successText}
272 |                         <div role="alert" class="alert alert-success">
273 |                             <ion-icon name="checkmark-circle-outline"
274 |                             ></ion-icon>
275 |                             <span>{successText}</span>
276 |                         </div>
277 |                     {/if}
278 |                 </div>
279 |                 <div class="pt-4 flex items-end gap-3">
280 |                     <fieldset class="fieldset p-0">
281 |                         <legend class="fieldset-legend">Upload interval</legend>
282 |                         <select
283 |                             class="select"
284 |                             disabled={isWriting}
285 |                             bind:value={uploadInterval}
286 |                         >
287 |                             <option value="0">Immediate</option>
288 |                             <option value="500">0.5 second</option>
289 |                             <option value="1000" selected>1 second</option>
290 |                             <option value="2000">2 seconds</option>
291 |                             <option value="5000">5 seconds</option>
292 |                         </select>
293 |                     </fieldset>
294 |                     <button
295 |                         class="btn btn-success flex-1"
296 |                         disabled={isWriting}
297 |                         onclick={seedPocketbase}
298 |                     >
299 |                         {#if isWriting}
300 |                             <ion-icon name="refresh-outline"></ion-icon>
301 |                             Seeding...
302 |                         {:else}
303 |                             <ion-icon name="cloud-upload-outline"></ion-icon>
304 |                             Seed Pocketbase
305 |                         {/if}
306 |                     </button>
307 |                 </div>
308 |             </div>
309 |         </div>
310 |         {#if fileData}
311 |             <div
312 |                 class="bg-base-100 border-base-300 px-6 py-4 rounded-lg flex flex-col overflow-auto"
313 |             >
314 |                 <div class="text-slate-500 pb-3 text-sm">File Preview</div>
315 |                 <div class="overflow-auto flex-1 min-h-0">
316 |                     <table
317 |                         class="table table-xs table-zebra border border-slate-100"
318 |                     >
319 |                         <thead>
320 |                             <tr>
321 |                                 {#each headers as header}
322 |                                     <th>{header}</th>
323 |                                 {/each}
324 |                             </tr>
325 |                         </thead>
326 |                         <tbody>
327 |                             {#each fileData as row}
328 |                                 <tr>
329 |                                     {#each headers as header}
330 |                                         <td>{row[header]}</td>
331 |                                     {/each}
332 |                                 </tr>
333 |                             {/each}
334 |                         </tbody>
335 |                     </table>
336 |                 </div>
337 |             </div>
338 |         {:else}
339 |             <div class="flex flex-col justify-center items-center">
340 |                 <ion-icon name="document-outline" class="text-slate-500 size-6"
341 |                 ></ion-icon>
342 |                 <div class="text-slate-500 pt-2">No file selected</div>
343 |             </div>
344 |         {/if}
345 |     </div>
346 | </main>
347 | 


--------------------------------------------------------------------------------