|
1 | | -# Svelte + TS + Vite |
| 1 | +# STL File Sanitizer |
2 | 2 |
|
3 | | -This template should help get you started developing with Svelte and TypeScript in Vite. |
| 3 | +> **Live Demo**: [https://codeynamics.github.io/stl-sanitizer/](https://codeynamics.github.io/stl-sanitizer/) |
4 | 4 |
|
5 | | -## Recommended IDE Setup |
| 5 | +A modern web-based tool to clean up STL file names and convert between ASCII and binary formats. Built with Svelte and TypeScript. |
6 | 6 |
|
7 | | -[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). |
| 7 | +## Features |
8 | 8 |
|
9 | | -## Need an official Svelte framework? |
| 9 | +- **Name Sanitization**: Remove spaces and special characters from STL filenames |
| 10 | +- **Format Conversion**: Convert between ASCII and binary STL formats |
| 11 | +- **Smart Naming**: Automatically fix `solid` and `endsolid` names in ASCII STL files |
| 12 | +- **Batch Processing**: Handle multiple files at once |
| 13 | +- **ZIP Export**: Download all processed files as a single ZIP archive |
| 14 | +- **Modern UI**: Clean, dark-themed interface with glassmorphism effects |
10 | 15 |
|
11 | | -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. |
| 16 | +## Usage |
12 | 17 |
|
13 | | -## Technical considerations |
| 18 | +> Visit [https://codeynamics.github.io/stl-sanitizer/](https://codeynamics.github.io/stl-sanitizer/) |
14 | 19 |
|
15 | | -**Why use this over SvelteKit?** |
| 20 | +Or run locally: |
| 21 | +1. **Choose STL Files**: Click "Choose STL Files" to select one or more STL files |
| 22 | +2. **Select Options**: |
| 23 | + - **Sanitize Names**: Remove spaces and special characters (replaces with underscores) |
| 24 | + - **Convert to ASCII**: Convert binary STL files to ASCII format |
| 25 | + - **Convert to Binary**: Convert ASCII STL files to binary format |
| 26 | + - **Fix Solid Names**: Update `solid` and `endsolid` lines to match filename |
| 27 | +3. **Convert**: Click "Convert Now" to process your files |
| 28 | +4. **Download**: Review the changes and download your processed files as a ZIP |
16 | 29 |
|
17 | | -- It brings its own routing solution which might not be preferable for some users. |
18 | | -- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. |
| 30 | +## => Options Explained |
19 | 31 |
|
20 | | -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. |
| 32 | +### Sanitize Names |
| 33 | +Cleans up filenames by: |
| 34 | +- Removing spaces and special characters |
| 35 | +- Keeping only alphanumeric characters and underscores |
| 36 | +- Handling duplicate names by adding `_1`, `_2`, etc. |
21 | 37 |
|
22 | | -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. |
| 38 | +### Convert to ASCII |
| 39 | +Converts binary STL files to human-readable ASCII format. Automatically applies solid name fixing. |
23 | 40 |
|
24 | | -**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** |
| 41 | +### Convert to Binary |
| 42 | +Converts ASCII STL files to compact binary format for smaller file sizes. |
25 | 43 |
|
26 | | -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. |
| 44 | +### Fix Solid Names |
| 45 | +Updates the `solid` and `endsolid` declarations in ASCII STL files to match the filename. Handles multiple solids in a single file by appending `_1`, `_2`, etc. |
27 | 46 |
|
28 | | -**Why include `.vscode/extensions.json`?** |
| 47 | +## Development |
29 | 48 |
|
30 | | -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. |
| 49 | +### Prerequisites |
| 50 | +- Node.js v18 or higher |
31 | 51 |
|
32 | | -**Why enable `allowJs` in the TS template?** |
| 52 | +### Setup |
| 53 | +```bash |
| 54 | +# Clone the repository |
| 55 | +git clone https://github.com/Codeynamics/stl-sanitizer.git |
| 56 | +cd stl-sanitizer |
33 | 57 |
|
34 | | -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. |
| 58 | +# Install dependencies |
| 59 | +npm install |
35 | 60 |
|
36 | | -**Why is HMR not preserving my local component state?** |
| 61 | +# Run development server |
| 62 | +npm run dev |
| 63 | +``` |
37 | 64 |
|
38 | | -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). |
| 65 | +### Build for Production |
| 66 | +```bash |
| 67 | +npm run build |
| 68 | +``` |
39 | 69 |
|
40 | | -If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. |
| 70 | +### Deploy to GitHub Pages |
| 71 | +This project is configured for automatic deployment to GitHub Pages via GitHub Actions. Simply push to the `main` branch and the site will be automatically built and deployed. |
41 | 72 |
|
42 | | -```ts |
43 | | -// store.ts |
44 | | -// An extremely simple external store |
45 | | -import { writable } from 'svelte/store' |
46 | | -export default writable(0) |
47 | | -``` |
| 73 | +## Technologies Used |
| 74 | + |
| 75 | +- **Svelte**: Reactive UI framework |
| 76 | +- **TypeScript**: Type-safe JavaScript |
| 77 | +- **Vite**: Fast build tool |
| 78 | +- **JSZip**: ZIP file generation |
| 79 | + |
| 80 | +## Browser Compatibility |
| 81 | + |
| 82 | +Works on all modern browsers that support: |
| 83 | +- ES6+ JavaScript |
| 84 | +- File API |
| 85 | +- ArrayBuffer |
| 86 | +- Blob URLs |
| 87 | + |
| 88 | +## License |
| 89 | + |
| 90 | +MIT License - feel free to use this project for any purpose. |
| 91 | + |
| 92 | +## Contributing |
| 93 | + |
| 94 | +Contributions are welcome! Please feel free to submit a Pull Request. |
| 95 | + |
| 96 | +## Acknowledgments |
| 97 | + |
| 98 | +Built with ❤️ for the 3D printing and simulation community |
0 commit comments