Svelte cheat sheet

svelte-cheat-sheed.md

Cheat Sheet

Testing

Svelte-navigator

# Mock it away!
jest.mock('svelte-navigator', () => ({useResolve: () => (jest.fn()), link: jest.fn()}));

Browser support

IE11

(Example for ROLLUP)

1. polyfill.min.js in index.html

(add before the bundle.js)

<script defer src="https://polyfill.io/v3/polyfill.min.js"></script>

2. Add required dependencies

npm install -D @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/runtime @rollup/plugin-babel corejs whatwg-fetch

3. Update rollup.config.js

import babel from '@rollup/plugin-babel';
...
...
    !production && livereload('public'),

    // IE11 support 😬 😥
    babel({
      babelHelpers: 'runtime',
      extensions: ['.js', '.mjs', '.html', '.svelte'],
      exclude: ['node_modules/@babel/**', 'node_modules/core-js/**'],
      presets: [['@babel/preset-env', {targets: {ie: '11'}, useBuiltIns: 'usage', corejs: 3}]],
      plugins: ['@babel/plugin-syntax-dynamic-import', ['@babel/plugin-transform-runtime', {useESModules: true}]]
    }),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()
...
...

4. Promise support

Using fetch? For each file that you're using fetch, add this to the top:

import 'whatwg-fetch';

5. Typescript?

Using typescript? Might need to use a ts preset for babel!

"@babel/preset-typescript"