A modern template for Svelte projects using TypeScript and Vite as a bundler. This repository serves as a starting point for new Svelte projects with an optimized, ready-to-use configuration.
This template includes:
Using GitHub
# Clone this template
gh repo create my-project --template svelte-ts-skeleton-starter
# or use GitHub's interface to create a new repository from this template
Manually
# Clone the repository
git clone https://github.com/your-username/svelte-ts-skeleton-starter.git my-project
# Remove Git history
cd my-project
rm -rf .git
# Initialize a new Git repository
git init
Project Initialization
npm create vite@latest svelte-ts-skeleton-starter -- --template svelte-ts
cd svelte-ts-skeleton-starter
npm install
Project Structure
📦 svelte-ts-skeleton-starter
├── 📂 public/
│ └── vite.svg
├── 📂 src/
│ ├── 📂 assets/
│ │ └── svelte.svg
│ ├── 📂 lib/
│ │ └── Counter.svelte
│ ├── 📂 styles/
│ │ └── global.css
│ ├── app.css
│ ├── App.svelte
│ ├── main.ts
│ └── vite-env.d.ts
├── index.html
├── package.json
├── svelte.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
svelte
: ^5.23.1@skeletonlabs/skeleton
: ^3.1.3svelte-i18n
: ^4.0.0 # Internationalization library@sveltejs/vite-plugin-svelte
: ^5.0.3@tsconfig/svelte
: ^5.0.4svelte-check
: ^4.1.5typescript
: ~5.7.2vite
: ^6.3.1{
"dev": "vite", // Starts the development server
"build": "vite build", // Generates production build
"preview": "vite preview", // Preview production version
"check": "svelte-check" // Runs TypeScript type checking
}
The project uses TypeScript with the following main configurations:
Clone the repository
git clone [REPOSITORY-URL]
Install dependencies
npm install
Start the development server
npm run dev
Access the project
The project will be available at http://localhost:5173
/public
: Static files that will be served directly/src
: Application source code/assets
: Resources such as images and icons/components
: User interface componentsLanguageSelector.svelte
: Component for language switchingThemeToggle.svelte
: Enhanced component for toggling between light/dark themes with improved accessibility, theme persistence, and error handling/lib
: Reusable components and shared functionalitiesi18n.ts
: Internationalization system/locales
: Translation files for different languagesen.ts
: English translationspt.ts
: Portuguese translationses.ts
: Spanish translations/styles
: Global style filesApp.svelte
: Root application componentmain.ts
: Application entry pointThe project uses TypeScript for:
This project includes a complete setup for unit and end-to-end (E2E) tests.
We use Vitest for unit tests with the following features:
Available commands:
# Run tests in watch mode (development)
npm test
# Run tests once
npm run test:run
# Run tests with coverage report
npm run test:coverage
npm run coverage
The internationalization system has comprehensive unit tests that verify:
We use Playwright for E2E tests with the following features:
Available commands:
# Run all E2E tests
npm run e2e
# Run E2E tests with visual interface
npm run e2e:ui
# View E2E test report
npm run e2e:report
The E2E tests for internationalization ensure that:
These tests use an approach based on the role and name of elements (getByRole
, getByText
), which makes the tests more robust and less susceptible to breaking due to changes in HTML or CSS structure.
The project includes specific accessibility tests for:
To run all tests (unit and E2E) at once:
npm run test:all
To build the project for production:
npm run build
The built files will be available in the dist/
directory.
This template supports automatic deployment to GitHub Pages with comprehensive testing integration.
Configure GitHub Pages in your repository settings:
Update vite.config.ts
with your repository name:
export default defineConfig({
plugins: [svelte()],
base: '/your-repository-name/', // Replace with your repository name
// other configurations
});
The deployment workflow (.github/workflows/deploy.yml
) automatically:
main
branchThe automated deployment includes:
npm ci
for reproducible buildsYou can also trigger deployment manually:
For GitHub Pages deployment, ensure your vite.config.ts
includes the correct base path:
export default defineConfig({
plugins: [svelte()],
base: process.env.NODE_ENV === 'production' ? '/your-repo-name/' : '/',
// other configurations
});
For different deployment environments:
// vite.config.ts
export default defineConfig({
plugins: [svelte()],
base: process.env.VITE_BASE_URL || '/',
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
},
});
The deployment process includes comprehensive testing:
base
configuration matches your repository namenpm run test:run # Run unit tests
npm run e2e # Run E2E tests
npm run build # Test build process
base
URL configurationTo use a custom domain with GitHub Pages:
CNAME
file to the public/
directory with your domainbase
configuration if neededmain
: Main development branch with automatic deploymentgh-pages
: Automatically managed deployment branch (do not edit manually)The workflow uses GitHub's native Pages deployment action, eliminating the need for manual branch management.
git checkout -b feature/AmazingFeature
)git commit -m 'Add some AmazingFeature'
)git push origin feature/AmazingFeature
)For questions and support, please open an issue in the project repository.
The template now includes an improved theme system with the following features:
Robust Dark/Light Mode: Implements theme switching using multiple approaches simultaneously:
data-mode
attributedark
classdata-theme
attributeFlash Prevention: Includes script in HTML to apply theme immediately during page load, preventing flash of wrong theme
Error Handling: Built-in fallbacks if localStorage is unavailable
Accessibility: Improved accessibility with proper ARIA attributes on theme toggle controls
Comprehensive Tests: Enhanced test coverage for theme functionality including error handling
The theme system provides a simple API through the ThemeToggle component:
<script>
import ThemeToggle from './components/ThemeToggle.svelte';
</script>
<ThemeToggle />
Custom styling can be applied using the CSS variables defined in src/styles/global.css
:
:root {
--app-background: #ffffff;
--app-text: #1a202c;
/* other variables */
}
[data-mode="dark"] {
--app-background: #0f172a;
--app-text: #f8fafc;
/* other dark mode variables */
}
The theme system uses a multi-layered approach to ensure comprehensive theming:
CSS Custom Properties (Variables)
src/styles/global.css
--app-background
and --app-text
data-mode
attributeHTML Data Attributes
data-mode
: Controls the main theme ('light' or 'dark')data-theme
: Controls the Skeleton UI theme ('skeleton' for light, 'vintage' for dark)CSS Class
dark
class is added to html
element for Tailwind dark modedark:
variant in Tailwind classesLocal Storage Persistence
localStorage
as 'mode'Initialization
index.html
Accessibility
See src/components/ThemeToggle.example.ts
for examples of how to extend the theme system.
Correção da API de Eventos do Svelte 5
on:click
para onclick
conforme recomendado pela API do Svelte 5Ajustes no Sistema de Temas
Compatibilidade com Testes E2E
Para executar os testes após estas correções:
# Teste unitários
npm run test:run
# Testes E2E
npm run e2e