├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── App.svelte
    │   ├── JsThing.svelte
    │   └── TsThing.svelte
    ├── index.html
    ├── index.scss
    └── index.ts
├── tsconfig.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .DS_Store
4 | dist


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | svelte-typescript-sass
 2 | =====================
 3 | 
 4 | Svelte boilerplate.
 5 | 
 6 | # Inside the package
 7 | - Svelte 3+
 8 | - Webpack 4+
 9 | - Typescript 3+
10 | - Sass processor for styles
11 | - Babel 
12 | 
13 | ### Easy to develop
14 | 
15 | ```
16 | npm install
17 | npm start
18 | ```
19 | 
20 | ### Build production assets
21 | 
22 | ```
23 | npm run build
24 | ```
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-typescript-sass",
 3 |   "description": "Svelte boilerplate. Includes typescript and sass. Bundled by webpack",
 4 |   "devDependencies": {
 5 |     "@babel/core": "7.4.5",
 6 |     "@babel/preset-env": "7.4.5",
 7 |     "@pyoner/svelte-types": "3.1.0-3",
 8 |     "awesome-typescript-loader": "5.2.1",
 9 |     "babel-loader": "8.0.6",
10 |     "css-loader": "2.1.1",
11 |     "html-webpack-plugin": "3.2.0",
12 |     "mini-css-extract-plugin": "0.7.0",
13 |     "node-sass": "4.12.0",
14 |     "sass-loader": "7.1.0",
15 |     "style-loader": "0.23.1",
16 |     "svelte": "3.4.4",
17 |     "svelte-loader": "2.13.4",
18 |     "svelte-ts-preprocess": "1.1.3",
19 |     "typescript": "3.4.5",
20 |     "webpack": "4.32.2",
21 |     "webpack-cli": "3.3.2",
22 |     "webpack-dev-server": "3.4.1"
23 |   },
24 |   "scripts": {
25 |     "start": "webpack-dev-server --hot --inline",
26 |     "build": "NODE_ENV=production webpack"
27 |   },
28 |   "keywords": [
29 |     "svelte",
30 |     "boilerplate",
31 |     "typescript",
32 |     "webpack",
33 |     "sass"
34 |   ],
35 |   "author": "n0th1ng-else",
36 |   "license": "MIT"
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import JsThing from './JsThing.svelte';
 3 |   import TsThing from './TsThing.svelte';
 4 | </script>
 5 | 
 6 | <div>
 7 |   <JsThing name="test"/>
 8 |   <TsThing message="perfecto!"/>
 9 | </div>
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/src/components/JsThing.svelte:
--------------------------------------------------------------------------------
 1 | 
 2 | <script>
 3 |   export let name;
 4 | </script>
 5 | 
 6 | <h1>Simple JS component with prop name: {name}</h1>
 7 | 
 8 | <style>
 9 |   h1 {
10 |     font-weight: bold;
11 |   }
12 | </style>
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/src/components/TsThing.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   export let message: string;
 3 | </script>
 4 | 
 5 | <h1>Or you can go with Typescript!</h1>
 6 | <div>
 7 |   simply add <b>lang="ts"</b> in your script section
 8 |   and you are ready to go!
 9 | 
10 |   {message}
11 | </div>
12 | 
13 | <style>
14 |   h1 {
15 |     color: tomato;
16 |   }
17 | </style>


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |         <title>New Svelte Project</title>
 8 |     </head>
 9 | 
10 |     <body>
11 |         <main></main>
12 |     </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: ghostwhite;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import App from './components/App.svelte';
 2 | import './index.scss';
 3 | 
 4 | const name: string = 'test';
 5 | 
 6 | const target = document.querySelector('main');
 7 | 
 8 | if (!target) {
 9 |   throw new Error('Can not find app container...');
10 | }
11 | 
12 | const app = new App({
13 |   target,
14 |   anchor: null,
15 |   props: {},
16 |   hydrate: false,
17 |   intro: false,
18 | });
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"module": "esnext",
 4 | 		"target": "esnext",
 5 | 		"sourceMap": true,
 6 | 		"removeComments": true,
 7 | 		"experimentalDecorators": true,
 8 | 		"emitDecoratorMetadata": true,
 9 | 		"noImplicitAny": false,
10 | 		"noImplicitThis": true,
11 | 		"strictNullChecks": true,
12 | 		"strictPropertyInitialization": true,
13 | 		"strictFunctionTypes": true,
14 | 		"alwaysStrict": true,
15 | 		"skipLibCheck": true,
16 | 		"types": ["@pyoner/svelte-types"],
17 | 		"esModuleInterop": true,
18 | 		"allowSyntheticDefaultImports": true,
19 | 		"moduleResolution": "node"
20 | 	},
21 |     "exclude": ["node_modules"],
22 |     "include": ["src/**/*"]
23 | }
24 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  4 | const { preprocess, createEnv, readConfigFile } = require('svelte-ts-preprocess');
  5 | 
  6 | const mode = process.env.NODE_ENV || 'development';
  7 | const isDev = mode === 'development';
  8 | 
  9 | const template = path.resolve(__dirname, 'src/index.html');
 10 | const entry = path.resolve(__dirname, 'src/index.ts');
 11 | const outDir = path.resolve(__dirname, 'dist');
 12 | 
 13 | const targets = [
 14 |   '>1%',
 15 |   'last 2 versions',
 16 |   'Firefox ESR',
 17 |   'not ie < 11'
 18 | ];
 19 | 
 20 | const babelLoader = {
 21 |   loader: 'babel-loader',
 22 |   options: {
 23 |     presets: [
 24 |       ['@babel/preset-env', { targets }]
 25 |     ]
 26 |   }
 27 | };
 28 | 
 29 | const cssLoader = [
 30 |   isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
 31 |   {
 32 |     loader: 'css-loader',
 33 |     options: {
 34 |       importLoaders: 1
 35 |     }
 36 |   }
 37 | ]
 38 | 
 39 | const env = createEnv();
 40 | const compilerOptions = readConfigFile(env);
 41 | 
 42 | const opts = {
 43 |   env,
 44 |   compilerOptions: {
 45 |     ...compilerOptions,
 46 |     allowNonTsExtensions: true
 47 |   }
 48 | };
 49 | 
 50 | module.exports = {
 51 |   mode,
 52 |   entry,
 53 |   output: {
 54 |     path: outDir,
 55 |     filename: 'bundle.[hash:8].js',
 56 |     chunkFilename: '[name].[chunkhash:8].js',
 57 |     publicPath: '/'
 58 |   },
 59 |   resolve: {
 60 |     extensions: ['.ts', '.mjs', '.js', '.json', '.css', '.svelte', '.scss'],
 61 |     mainFields: ['svelte', 'browser', 'module', 'main']
 62 |   },
 63 |   module: {
 64 |     rules: [
 65 |       {
 66 |         oneOf: [
 67 |           {
 68 |             test: /\.svelte$/,
 69 |             use: [
 70 |               babelLoader,
 71 |               {
 72 |                 loader: 'svelte-loader',
 73 |                 options: {
 74 |                   emitCss: true,
 75 |                   preprocess: preprocess(opts)
 76 |                 }
 77 |               }
 78 |             ]
 79 |           },
 80 |           {
 81 |             test: /\.m?js$/,
 82 |             exclude: /node_modules\/(?!svelte)/,
 83 |             use: babelLoader
 84 |           },
 85 |           {
 86 |             test: /\.ts$/,
 87 |             use: [
 88 |               babelLoader,
 89 |               {
 90 |                 loader: 'awesome-typescript-loader',
 91 |                 options: {
 92 |                   logInfoToStdOut: true,
 93 |                   logLevel: 'info'
 94 |                 }
 95 |               }
 96 |             ]
 97 |           },
 98 |           {
 99 |             test: /\.scss$/,
100 |             use: [...cssLoader,
101 |               {
102 |                 loader: 'sass-loader',
103 |                 options: {
104 |                   includePaths: ['./node_modules']
105 |                 }
106 |               }
107 |             ]
108 |           },
109 |           {
110 |             test: /\.css$/,
111 |             use: cssLoader
112 |           }
113 |         ]
114 |       }
115 |     ]
116 |   },
117 |   plugins: [
118 |     new HtmlWebpackPlugin({
119 |       template,
120 |       inject: true,
121 |       minify: isDev ? undefined : {
122 |         removeComments: true,
123 |         collapseWhitespace: true,
124 |         removeRedundantAttributes: true,
125 |         useShortDoctype: true,
126 |         removeEmptyAttributes: true,
127 |         removeStyleLinkTypeAttributes: true,
128 |         keepClosingSlash: true,
129 |         minifyJS: true,
130 |         minifyCSS: true,
131 |         minifyURLs: true,
132 |       }
133 |     }),
134 |     !isDev && new MiniCssExtractPlugin({
135 |       filename: '[name].[hash:8].css'
136 |     })
137 |   ].filter(Boolean)
138 | };
139 | 
140 | if (isDev) {
141 |   module.exports.devtool = '#source-map';
142 | 
143 |   module.exports.devServer = {
144 |     port: 8080,
145 |     host: "localhost",
146 |     historyApiFallback: true,
147 |     headers: {
148 |         "Access-Control-Allow-Origin": "*",
149 |         "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
150 |         "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
151 |     },
152 |     watchOptions: {aggregateTimeout: 300, poll: 1000},
153 |     contentBase: outDir
154 |   };
155 | }
156 | 


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