├── .gitignore ├── README.md ├── svelte-snowpack-typescript ├── .env.local ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.json ├── jest.config.js ├── jest.setup.js ├── package.json ├── plugins │ └── plugin-swc.js ├── pnpm-lock.yaml ├── postcss.config.js ├── prettier.config.js ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo.svg │ └── robots.txt ├── snowpack.config.js ├── src │ ├── App.svelte │ ├── App.test.ts │ ├── Time.svelte │ ├── Wisdom.svelte │ ├── assets │ │ └── usa.svg │ ├── index.css │ ├── index.ts │ └── timer.ts ├── svelte.config.js ├── tailwind.config.js ├── tsconfig.json └── types │ ├── static.d.ts │ └── svelte-inline-svg.d.ts ├── svelte-svite-typescript ├── .env.local ├── .gitignore ├── index.html ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── prettier.config.js ├── public │ └── favicon.svg ├── src │ ├── App.svelte │ ├── Time.svelte │ ├── Wisdom.svelte │ ├── assets │ │ └── usa.svg │ ├── index.css │ ├── index.ts │ ├── timer.ts │ └── types.d.ts ├── svelte.config.js ├── tailwind.config.js └── tsconfig.json ├── svelte-vite-typescript ├── .gitignore ├── README.md ├── index.html ├── package.json ├── postcss.config.js ├── prettier.config.js ├── public │ └── favicon.ico ├── src │ ├── App.svelte │ ├── Time.svelte │ ├── Wisdom.svelte │ ├── assets │ │ └── usa.svg │ ├── index.css │ ├── index.ts │ ├── timer.ts │ └── types.d.ts ├── svelte.config.js ├── tailwind.config.js ├── tsconfig.json └── vite.config.js └── svelte-webpack5-typescript ├── .env ├── .prettierrc.js ├── README.md ├── config ├── webpack.config.js └── webpack.parts.js ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── src ├── App.svelte ├── Time.svelte ├── Wisdom.svelte ├── assets │ └── usa.svg ├── index.css ├── index.ts └── timer.ts ├── tailwind.config.js └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | **/dist 3 | **/build 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-typescript-setups 2 | 3 | > Examples of different bundler setups for Svelte **only**, not Sapper. 4 | 5 | ## Motivation 6 | 7 | I am on the quest to find the best bundler for Svelte. Why? Because development time is expensive. When writing code I want a tight feedback loop, easy setup and configuration, flexibility and small and efficient bundle size. 8 | 9 | ## My Requirements 10 | 11 | - It must be fast 12 | - It must support Typescript 13 | - It must support PostCSS 14 | - It must produce small and efficient bundles 15 | - It must produce correct sourcemaps for debugging 16 | - It should support HMR (Hot Module Replacement) 17 | 18 | ## Test App 19 | 20 | For the purpose of testing I created a simple Svelte app. Its functionality is simple. You press a button and it fetches a random Kanye West tweet from [Kanye as a Service](https://kanye.rest/). 21 | 22 | ![Kanye Says app screenshot](https://res.cloudinary.com/codechips/image/upload/v1598252607/kanye-says-app_rup4n6.png) 23 | 24 | The app might be simple, maybe even naïve, but it has a few interesting parts. 25 | 26 | - **Svelte components in Typescript**. I want to see if transpiling and type checking works correctly for TS. 27 | - **External Svelte library**. Not all bundlers support libraries written in Svelte efficiently. 28 | - **External library dependency**. I want to see if Vite supports tree shaking when bundling for production. 29 | - **Extenal Assets**. It should be possible to import SVG, PNG, JSON and other external assets in our code. 30 | - **PostCSS with TailwindCSS**. A good bundler should make it easy to work with SASS and PostCSS. 31 | - **Business components in Typescript**. Typescript is here to stay. A good bundler should support it out-of-the-box. 32 | 33 | ## Bundlers 34 | 35 | - Vite - [Is Vite currently the best bundler for Svelte?](https://codechips.me/svelte-with-vitejs-typescript-tailwind/) 36 | - Svite -[Svelte, PostCSS and Typescript with Svite bundler](https://codechips.me/svelte-postcss-and-typescript-with-svite/) 37 | - Snowpack - [Snowpack for Svelte development revisited](https://codechips.me/snowpack-for-svelte-revisited/) 38 | - Webpack 5 - [Why Webpack 5 is the best bundler for Svelte](https://codechops.me/svelte-and-webpack-5/) 39 | 40 | ## There is more! 41 | 42 | For more interesting stuff like this follow me on [Twitter](https://twitter.com/codechips) or check out my blog at [codechips.me](https://codechips.me). 43 | 44 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/.env.local: -------------------------------------------------------------------------------- 1 | SNOWPACK_PUBLIC_KANYE_API=https://api.kanye.rest 2 | 3 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/.gitignore: -------------------------------------------------------------------------------- 1 | .build 2 | build 3 | web_modules 4 | node_modules -------------------------------------------------------------------------------- /svelte-snowpack-typescript/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Fred K. Schott 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/README.md: -------------------------------------------------------------------------------- 1 | # svelte-snowpack-typescript 2 | 3 | > Test of [Snowpack](https://snowpack.dev) as a bundler for Svelte :snowflake: 4 | 5 | 6 | Code for my blog post [Snowpack for Svelte development revisited](https://codechips.me/snowpack-for-svelte-revisited/). 7 | 8 | ## My Requirements 9 | 10 | - It must be fast 11 | - It must support Typescript 12 | - It must support PostCSS 13 | - It must produce small and efficient bundles 14 | - It must produce correct sourcemaps for debugging 15 | - It should support HMR (Hot Module Replacement) 16 | 17 | ## How to run 18 | 19 | Clone the repo and run `pnpm i && pnpm start`. 20 | 21 | To build do a `pnpm run build` 22 | 23 | ## There is more! 24 | 25 | For more interesting stuff like this follow me on [Twitter](https://twitter.com/codechips) or check out my blog https://codechips.me. 26 | 27 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ...require("@snowpack/app-scripts-svelte/jest.config.js")(), 3 | }; 4 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/jest.setup.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom/extend-expect"; 6 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "start": "snowpack dev", 4 | "build": "snowpack build", 5 | "test": "jest" 6 | }, 7 | "dependencies": { 8 | "svelte": "^3.29.4" 9 | }, 10 | "devDependencies": { 11 | "@snowpack/app-scripts-svelte": "^1.9.1", 12 | "@snowpack/plugin-dotenv": "^2.0.4", 13 | "@snowpack/plugin-optimize": "^0.2.6", 14 | "@snowpack/plugin-postcss": "^1.0.6", 15 | "@snowpack/plugin-run-script": "^2.1.7", 16 | "@snowpack/plugin-svelte": "^3.1.0", 17 | "@snowpack/plugin-typescript": "^1.0.2", 18 | "@swc/core": "^1.2.37", 19 | "@testing-library/jest-dom": "^5.11.5", 20 | "@testing-library/svelte": "^3.0.0", 21 | "@tsconfig/svelte": "^1.0.10", 22 | "@types/jest": "^26.0.15", 23 | "@types/snowpack-env": "^2.3.0", 24 | "date-fns": "^2.16.1", 25 | "jest": "^26.6.1", 26 | "postcss": "^8.1.4", 27 | "postcss-cli": "^8.2.0", 28 | "postcss-preset-env": "^6.7.0", 29 | "prettier": "^2.1.2", 30 | "prettier-plugin-svelte": "^1.4.1", 31 | "snowpack": "^2.15.1", 32 | "svelte-check": "^1.1.5", 33 | "svelte-inline-svg": "^1.0.1", 34 | "svelte-preprocess": "^4.5.2", 35 | "tailwindcss": "^1.9.6", 36 | "typescript": "^4.0.5" 37 | } 38 | } -------------------------------------------------------------------------------- /svelte-snowpack-typescript/plugins/plugin-swc.js: -------------------------------------------------------------------------------- 1 | const swc = require('@swc/core'); 2 | const fs = require('fs'); 3 | 4 | module.exports = function (snowpackConfig) { 5 | // read options from the main Snowpack config file 6 | const useSourceMaps = snowpackConfig.buildOptions.sourceMaps; 7 | 8 | return { 9 | name: 'snowpack-swc', 10 | resolve: { 11 | input: ['.ts'], 12 | output: ['.js'], 13 | }, 14 | async load({ filePath }) { 15 | // read the TypeScript file 16 | const contents = await fs.promises.readFile(filePath, 'utf-8'); 17 | 18 | // transform it with SWC compiler 19 | const output = await swc.transform(contents, { 20 | filename: filePath, 21 | sourceMaps: useSourceMaps, 22 | isModule: true, 23 | jsc: { 24 | parser: { 25 | syntax: 'typescript', 26 | }, 27 | target: 'esnext', 28 | }, 29 | }); 30 | 31 | return { 32 | '.js': { 33 | code: output.code, 34 | map: output.map, 35 | }, 36 | }; 37 | }, 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('tailwindcss'), require('postcss-preset-env')({ stage: 1 })] 3 | }; 4 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tabWidth: 2, 3 | semi: true, 4 | singleQuote: true, 5 | printWidth: 80, 6 | plugins: ['prettier-plugin-svelte'], 7 | svelteStrictMode: false, 8 | svelteBracketNewLine: false 9 | }; 10 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codechips/svelte-typescript-setups/4022491446c45c7120a686a62f51c76895f8b022/svelte-snowpack-typescript/public/favicon.ico -------------------------------------------------------------------------------- /svelte-snowpack-typescript/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Snowpack App 9 | 10 | 11 | 12 | 13 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/snowpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mount: { 3 | public: '/', 4 | src: '/_dist_', 5 | }, 6 | plugins: [ 7 | '@snowpack/plugin-svelte', 8 | '@snowpack/plugin-dotenv', 9 | '@snowpack/plugin-typescript', 10 | '@snowpack/plugin-optimize', 11 | '@snowpack/plugin-postcss', 12 | // './plugins/plugin-swc.js', 13 | [ 14 | '@snowpack/plugin-run-script', 15 | { cmd: 'svelte-check --output human', watch: '$1 --watch', output: 'stream' }, 16 | ], 17 | ], 18 | install: [ 19 | /* ... */ 20 | ], 21 | installOptions: { 22 | /* ... */ 23 | }, 24 | devOptions: { 25 | // don't open browser 26 | open: 'none', 27 | // don't clear the output 28 | output: 'stream', 29 | }, 30 | buildOptions: { 31 | /* ... */ 32 | }, 33 | proxy: { 34 | /* ... */ 35 | }, 36 | alias: { 37 | /* ... */ 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /svelte-snowpack-typescript/src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |