├── .gitignore ├── README.md ├── jest.config.js ├── package-lock.json ├── package.json ├── public └── index.html ├── snowpack.config.js ├── src ├── App.svelte ├── Tailwind.svelte ├── components │ └── Counter.svelte └── main.ts ├── svelte.config.js ├── tailwind.config.js ├── test ├── counter.test.ts └── demo.test.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | node_modules 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/2959-shield.svg)](https://madewithsvelte.com/p/stts/shield-link) 2 | 3 | 4 | Svelte / Typescript / Tailwind / Snowpack Template 5 | ================================================== 6 | 7 | A template for using Svelte, Typescript, Tailwind and Snowpack together. 8 | 9 | Out-of-the-box 100s across the board on lighthouse. 10 | 11 | Installation 12 | ------------ 13 | 14 | ``` 15 | npx degit "srmullen/stts#main" my_app 16 | cd my_app 17 | npm install 18 | ``` 19 | 20 | Scripts 21 | ------- 22 | 23 | ### Start a development server 24 | 25 | `npm run dev` 26 | 27 | ### Run svelte-check 28 | 29 | `npm run check` 30 | or 31 | `npm run check:watch` 32 | 33 | ### Run test 34 | 35 | `npm run test` 36 | or 37 | `npm run test:watch` 38 | 39 | ### Build the application 40 | 41 | `npm run build` 42 | 43 | ### Serve the application 44 | 45 | `npm run serve` 46 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transform: { 3 | "^.+\\.svelte$": [ 4 | "svelte-jester", 5 | { 6 | "preprocess": true 7 | } 8 | ], 9 | "^.+\\.ts$": "ts-jest", 10 | '^.+\\.js$': 'babel-jest' 11 | }, 12 | moduleFileExtensions: ['js', 'ts', 'svelte'] 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stts", 3 | "version": "1.0.0", 4 | "description": "Svelte/Typescript/Tailwind/Snowpack template", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "snowpack dev", 8 | "test": "jest", 9 | "test:watch": "jest --watchAll", 10 | "check": "svelte-check --diagnostic-sources \"js,svelte\"", 11 | "check:watch": "svelte-check --watch --diagnostic-sources \"js,svelte\"", 12 | "build": "npm test && npm run check && snowpack build", 13 | "serve": "sirv build --maxage 36000" 14 | }, 15 | "keywords": [ 16 | "svelte", 17 | "typescript", 18 | "tailwind", 19 | "snowpack", 20 | "template" 21 | ], 22 | "author": "Sean Mullen", 23 | "license": "ISC", 24 | "devDependencies": { 25 | "@snowpack/plugin-svelte": "^3.7.0", 26 | "@snowpack/plugin-typescript": "^1.2.1", 27 | "@snowpack/plugin-webpack": "^3.0.0", 28 | "@testing-library/svelte": "^3.0.3", 29 | "@tsconfig/svelte": "^2.0.1", 30 | "@types/jest": "^27.0.2", 31 | "@types/snowpack-env": "^2.3.4", 32 | "autoprefixer": "^10.4.0", 33 | "babel-jest": "^27.3.1", 34 | "jest": "^27.3.1", 35 | "postcss": "^8.3.11", 36 | "snowpack": "^3.8.8", 37 | "svelte": "^3.44.1", 38 | "svelte-check": "^2.2.8", 39 | "svelte-jester": "^2.1.5", 40 | "svelte-preprocess": "^4.9.8", 41 | "ts-jest": "^27.0.7", 42 | "typescript": "^4.4.4" 43 | }, 44 | "dependencies": { 45 | "sirv-cli": "^1.0.14", 46 | "tailwindcss": "^2.2.19" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Svelte/Typescript/Tailwind/Snowpack 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /snowpack.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("snowpack").SnowpackUserConfig } */ 2 | module.exports = { 3 | mount: { 4 | public: '/', 5 | src: '/_dist_' 6 | }, 7 | plugins: [ 8 | ['@snowpack/plugin-svelte'], 9 | ['@snowpack/plugin-typescript'], 10 | ['@snowpack/plugin-webpack'] 11 | ], 12 | packageOptions: { 13 | "packageLookupFields": ["svelte", "module", "main"] 14 | }, 15 | devOptions: { 16 | port: 5000 17 | }, 18 | buildOptions: { 19 | /* ... */ 20 | }, 21 | routes: [ 22 | { match: 'routes', src: '.*', dest: '/index.html' }, 23 | ] 24 | }; 25 | -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
9 |
10 |

11 | Svelte / Typescript / Tailwind / Snowpack 12 |

13 | 14 |

15 | A template for a fun, fast development experience! 16 |

17 | 18 |

19 | https://github.com/srmullen/stts 20 |

21 |
22 | 23 |
24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /src/Tailwind.svelte: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/components/Counter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; 8 | 9 | if (import.meta.hot) { 10 | import.meta.hot.accept(); 11 | import.meta.hot.dispose(() => { 12 | app.$destroy(); 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | const sveltePreprocess = require('svelte-preprocess'); 2 | 3 | const production = process.env.NODE_WATCH === 'production'; 4 | 5 | const preprocess = sveltePreprocess({ 6 | typescript: { 7 | tsconfigFile: './tsconfig.json' 8 | }, 9 | postcss: { 10 | plugins: [ 11 | require('tailwindcss'), 12 | require('autoprefixer') 13 | ] 14 | } 15 | }); 16 | 17 | module.exports = { 18 | dev: !production, 19 | preprocess 20 | }; -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ["./src/**/*.svelte"], 3 | 4 | theme: { 5 | 6 | }, 7 | variants: {}, 8 | plugins: [] 9 | }; -------------------------------------------------------------------------------- /test/counter.test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | import Counter from '../src/components/Counter.svelte'; 6 | import { render, fireEvent } from '@testing-library/svelte'; 7 | 8 | describe('Counter Component', () => { 9 | test('it counts', async () => { 10 | const { getByTestId } = render(Counter, { 11 | id: 'counter-btn' 12 | }); 13 | 14 | const button = getByTestId('counter-btn'); 15 | expect(button.innerHTML).toBe('Clicks: 0'); 16 | await fireEvent.click(button); 17 | expect(button.innerHTML).toBe('Clicks: 1'); 18 | }); 19 | }); -------------------------------------------------------------------------------- /test/demo.test.ts: -------------------------------------------------------------------------------- 1 | test('test', () => { 2 | expect(2 + 2).toEqual(4); 3 | }); 4 | 5 | export {}; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "include": [ 4 | "src", 5 | "types" 6 | ], 7 | "exclude": [ 8 | "node_modules" 9 | ], 10 | "compilerOptions": { 11 | "lib": [ 12 | "DOM", 13 | "ES2015", 14 | "ES2016", 15 | "ES6" 16 | ], 17 | "module": "esnext", 18 | "target": "esnext", 19 | "typeRoots": [ 20 | "./node_modules/@types" 21 | ], 22 | "moduleResolution": "node", 23 | "jsx": "preserve", 24 | "baseUrl": "./", 25 | /* paths - If you configure Snowpack import aliases, add them here. */ 26 | "paths": {}, 27 | /* noEmit - Snowpack builds (emits) files, not tsc. */ 28 | "noEmit": true, 29 | /* Additional Options */ 30 | "strict": true, 31 | "skipLibCheck": true, 32 | "forceConsistentCasingInFileNames": true, 33 | "resolveJsonModule": true, 34 | "useDefineForClassFields": true, 35 | "allowSyntheticDefaultImports": true, 36 | "importsNotUsedAsValues": "error", 37 | "types": ["svelte", "@types/snowpack-env", "jest"] 38 | } 39 | } --------------------------------------------------------------------------------