feat: adding svelte component testing support (#23553)

Co-authored-by: Jessica Sachs <jess@jessicasachs.io> Co-authored-by: Rocky <25568640+rockindahizzy@users.noreply.github.com>
2026-01-05 14:09:46 -06:00 · 2022-08-26 12:36:05 -05:00
parent 8d2702f9bd
commit f6eaad40e1
84 changed files with 7636 additions and 373 deletions
--- a/cli/.gitignore
+++ b/cli/.gitignore
@@ -19,4 +19,5 @@ vue
 vue2
 react*
 mount-utils
-angular
+angular
+svelte
--- a/cli/package.json
+++ b/cli/package.json
@@ -108,7 +108,8 @@
    "react",
    "vue2",
    "react18",
-    "angular"
+    "angular",
+    "svelte"
  ],
  "bin": {
    "cypress": "bin/cypress"
@@ -155,6 +156,11 @@
      "import": "./angular/dist/index.js",
      "require": "./angular/dist/index.js",
      "types": "./angular/dist/index.d.ts"
+    },
+    "./svelte": {
+      "import": "./svelte/dist/cypress-svelte.esm-bundler.js",
+      "require": "./svelte/dist/cypress-svelte.cjs.js",
+      "types": "./svelte/dist/index.d.ts"
    }
  },
  "workspaces": {
--- a/cli/scripts/post-build.js
+++ b/cli/scripts/post-build.js
@@ -13,6 +13,7 @@ const npmModulesToCopy = [
  'vue',
  'vue2',
  'angular',
+  'svelte',
 ]

 npmModulesToCopy.forEach((folder) => {
--- a/cli/types/cypress.d.ts
+++ b/cli/types/cypress.d.ts
@@ -3058,11 +3058,11 @@ declare namespace Cypress {

  type DevServerConfigOptions = {
    bundler: 'webpack'
-    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next'
+    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next' | 'svelte'
    webpackConfig?: PickConfigOpt<'webpackConfig'>
  } | {
    bundler: 'vite'
-    framework: 'react' | 'vue'
+    framework: 'react' | 'vue' | 'svelte'
    viteConfig?: Omit<Exclude<PickConfigOpt<'viteConfig'>, undefined>, 'base' | 'root'>
  } | {
    bundler: 'webpack',
--- a/npm/angular/package.json
+++ b/npm/angular/package.json
@@ -6,7 +6,7 @@
  "main": "dist/index.js",
  "scripts": {
    "prebuild": "rimraf dist",
-    "build": "rollup -c rollup.config.js",
+    "build": "rollup -c rollup.config.mjs",
    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
    "build-prod": "yarn build",
    "check-ts": "tsc --noEmit"
@@ -16,8 +16,7 @@
    "@angular/common": "^14.0.6",
    "@angular/core": "^14.0.6",
    "@angular/platform-browser-dynamic": "^14.0.6",
-    "@rollup/plugin-node-resolve": "^11.1.1",
-    "rollup-plugin-typescript2": "^0.29.0",
+    "@cypress/mount-utils": "0.0.0-development",
    "typescript": "^4.7.4",
    "zone.js": "~0.11.4"
  },
--- a/npm/angular/rollup.config.js
+++ b/npm/angular/rollup.config.js
@@ -1,61 +0,0 @@
-import ts from 'rollup-plugin-typescript2'
-import resolve from '@rollup/plugin-node-resolve'
-
-import pkg from './package.json'
-
-const banner = `
-/**
- * ${pkg.name} v${pkg.version}
- * (c) ${new Date().getFullYear()} Cypress.io
- * Released under the MIT License
- */
-`
-
-function createEntry () {
-  const input = 'src/index.ts'
-  const format = 'es'
-
-  const config = {
-    input,
-    external: [
-      '@angular/core',
-      '@angular/core/testing',
-      '@angular/common',
-      '@angular/platform-browser-dynamic/testing',
-      'zone.js',
-      'zone.js/testing',
-    ],
-    plugins: [
-      resolve(),
-    ],
-    output: {
-      banner,
-      name: 'CypressAngular',
-      file: pkg.module,
-      format,
-      exports: 'auto',
-    },
-  }
-
-  console.log(`Building ${format}: ${config.output.file}`)
-
-  config.plugins.push(
-    ts({
-      check: true,
-      tsconfigOverride: {
-        compilerOptions: {
-          declaration: true,
-          target: 'es6', // not sure what this should be?
-          module: 'esnext',
-        },
-        exclude: [],
-      },
-    }),
-  )
-
-  return config
-}
-
-export default [
-  createEntry(),
-]
--- a/npm/angular/rollup.config.mjs
+++ b/npm/angular/rollup.config.mjs
@@ -0,0 +1,14 @@
+import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
+
+const config = {
+  external: [
+    '@angular/core',
+    '@angular/core/testing',
+    '@angular/common',
+    '@angular/platform-browser-dynamic/testing',
+    'zone.js',
+    'zone.js/testing',
+  ],
+}
+
+export default createEntries({ formats: ['es'], input: 'src/index.ts', config })
--- a/npm/mount-utils/create-rollup-entry.mjs
+++ b/npm/mount-utils/create-rollup-entry.mjs
@@ -0,0 +1,71 @@
+// CommonJS to easily share across packages
+import ts from 'rollup-plugin-typescript2'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import _ from 'lodash'
+import { readFileSync } from 'fs'
+
+const pkg = JSON.parse(readFileSync('./package.json'))
+
+/** @type {(options: { formats: string[], input: string, config: {} }) => []} */
+export function createEntries (options) {
+  const {
+    formats,
+    input,
+    config = {},
+  } = options
+
+  const banner = `
+/**
+ * ${pkg.name} v${pkg.version}
+ * (c) ${new Date().getFullYear()} Cypress.io
+ * Released under the MIT License
+ */
+`
+
+  return formats.map((format) => {
+    const baseConfig = {
+      input,
+      plugins: [
+        resolve({ preferBuiltins: true }),
+        commonjs(),
+        ts({
+          check: format === 'es',
+          tsconfigOverride: {
+            compilerOptions: {
+              declaration: format === 'es',
+              target: 'es6',
+              module: format === 'cjs' ? 'es2015' : 'esnext',
+            },
+            exclude: ['tests'],
+          },
+        }),
+      ],
+      output: {
+        banner,
+        name: 'CypressReact',
+        file: pkg.unpkg,
+        format,
+      },
+    }
+
+    const finalConfig = _.mergeWith({}, baseConfig, config, (objValue, srcValue) => {
+      if (_.isArray(objValue)) {
+        return objValue.concat(srcValue)
+      }
+    })
+
+    if (format === 'es') {
+      finalConfig.output.file = pkg.module
+    }
+
+    if (format === 'cjs') {
+      finalConfig.output.file = pkg.main
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`Building ${format}: ${finalConfig.output.file}`)
+
+    return finalConfig
+  })
+}
--- a/npm/mount-utils/package.json
+++ b/npm/mount-utils/package.json
@@ -12,6 +12,10 @@
  },
  "dependencies": {},
  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "rollup": "^2.38.5",
+    "rollup-plugin-typescript2": "^0.29.0",
    "typescript": "^4.7.4"
  },
  "files": [
--- a/npm/react/package.json
+++ b/npm/react/package.json
@@ -4,7 +4,7 @@
  "description": "Test React components using Cypress",
  "main": "dist/cypress-react.cjs.js",
  "scripts": {
-    "build": "rimraf dist && rollup -c rollup.config.js",
+    "build": "rimraf dist && rollup -c rollup.config.mjs",
    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
    "build-prod": "yarn build",
    "cy:open": "node ../../scripts/cypress.js open --component",
@@ -16,8 +16,6 @@
  },
  "devDependencies": {
    "@cypress/mount-utils": "0.0.0-development",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.1.1",
    "@types/semver": "7.3.9",
    "@vitejs/plugin-react": "1.3.1",
    "axios": "0.21.2",
@@ -27,8 +25,6 @@
    "react-dom": "16.8.6",
    "react-router": "6.0.0-alpha.1",
    "react-router-dom": "6.0.0-alpha.1",
-    "rollup": "^2.38.5",
-    "rollup-plugin-typescript2": "^0.29.0",
    "semver": "^7.3.2",
    "typescript": "^4.7.4",
    "vite": "3.0.3",
--- a/npm/react/rollup.config.js
+++ b/npm/react/rollup.config.js
@@ -1,74 +0,0 @@
-// CommonJS to easily share across packages
-const ts = require('rollup-plugin-typescript2')
-const { default: resolve } = require('@rollup/plugin-node-resolve')
-const commonjs = require('@rollup/plugin-commonjs')
-
-const pkg = require('./package.json')
-
-const banner = `
-/**
- * ${pkg.name} v${pkg.version}
- * (c) ${new Date().getFullYear()} Cypress.io
- * Released under the MIT License
- */
-`
-
-function createEntry (options) {
-  const {
-    format,
-    input,
-  } = options
-
-  const config = {
-    input,
-    external: [
-      'react',
-      'react-dom',
-      'react-dom/client',
-    ],
-    plugins: [
-      resolve(),
-      commonjs(),
-      ts({
-        check: format === 'es',
-        tsconfigOverride: {
-          compilerOptions: {
-            declaration: format === 'es',
-            target: 'es5',
-            module: format === 'cjs' ? 'es2015' : 'esnext',
-          },
-          exclude: ['tests'],
-        },
-      }),
-    ],
-    output: {
-      banner,
-      name: 'CypressReact',
-      file: pkg.unpkg,
-      format,
-      globals: {
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        'react-dom/client': 'ReactDOM/client',
-      },
-    },
-  }
-
-  if (format === 'es') {
-    config.output.file = pkg.module
-  }
-
-  if (format === 'cjs') {
-    config.output.file = pkg.main
-  }
-
-  // eslint-disable-next-line no-console
-  console.log(`Building ${format}: ${config.output.file}`)
-
-  return config
-}
-
-module.exports = [
-  createEntry({ format: 'es', input: 'src/index.ts' }),
-  createEntry({ format: 'cjs', input: 'src/index.ts' }),
-]
--- a/npm/react/rollup.config.mjs
+++ b/npm/react/rollup.config.mjs
@@ -0,0 +1,18 @@
+import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
+
+const config = {
+  external: [
+    'react',
+    'react-dom',
+    'react-dom/client',
+  ],
+  output: {
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'react-dom/client': 'ReactDOM/client',
+    },
+  },
+}
+
+export default createEntries({ formats: ['es', 'cjs'], input: 'src/index.ts', config })
--- a/npm/react18/package.json
+++ b/npm/react18/package.json
@@ -4,7 +4,7 @@
  "description": "Test React components using Cypress",
  "main": "dist/cypress-react.cjs.js",
  "scripts": {
-    "build": "rimraf dist && rollup -c rollup.config.js",
+    "build": "rimraf dist && rollup -c rollup.config.mjs",
    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
    "build-prod": "yarn build",
    "watch": "yarn build --watch --watch.exclude ./dist/**/*"
--- a/npm/react18/rollup.config.js
+++ b/npm/react18/rollup.config.js
@@ -1,3 +0,0 @@
-import * as RollupConfig from '../react/rollup.config'
-
-export default RollupConfig
--- a/npm/react18/rollup.config.mjs
+++ b/npm/react18/rollup.config.mjs
@@ -0,0 +1,3 @@
+import rollupConfig from '@cypress/react/rollup.config.mjs'
+
+export default rollupConfig
--- a/npm/svelte/.eslintrc
+++ b/npm/svelte/.eslintrc
@@ -0,0 +1,17 @@
+{
+  "plugins": [
+    "cypress"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/tests"
+  ],
+  "env": {
+    "cypress/globals": true
+  },
+  "rules": {
+    "mocha/no-global-tests": "off",
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "@typescript-eslint/no-unused-vars": "off"
+  }
+}
--- a/npm/svelte/.npmrc
+++ b/npm/svelte/.npmrc
@@ -0,0 +1,3 @@
+save-exact=true
+progress=false
+package-lock=true
--- a/npm/svelte/.releaserc.js
+++ b/npm/svelte/.releaserc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  ...require('../../.releaserc.base'),
+  branches: [
+    // this one releases v3 on master on the latest channel
+    'master',
+  ],
+}
--- a/npm/svelte/CHANGELOG.md
+++ b/npm/svelte/CHANGELOG.md
--- a/npm/svelte/README.md
+++ b/npm/svelte/README.md
@@ -0,0 +1,83 @@
+# @cypress/svelte
+
+Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**
+
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-svelte#Configuring-Component-Testing) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be used for advanced use-cases.
+
+## Install
+
+- Requires Svelte >= 3
+- Requires Cypress v10.7.0 or later
+- Requires [Node](https://nodejs.org/en/) version 12 or above
+
+```sh
+npm install --save-dev @cypress/svelte
+```
+
+## Run
+
+Open cypress test runner
+```
+npx cypress open --component
+```
+
+If you need to run test in CI
+```
+npx cypress run --component
+```
+
+For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
+
+## Example
+
+```js
+import { mount } from '@cypress/svelte'
+import HelloWorld from './HelloWorld.svelte'
+
+describe('HelloWorld component', () => {
+  it('works', () => {
+    mount(HelloWorld)
+    // now use standard Cypress commands
+    cy.contains('Hello World!').should('be.visible')
+  })
+})
+```
+
+## Options
+
+In most cases, the component already imports its own styles, thus it looks "right" during the test. If you need another CSS, the simplest way is to import it from the spec file:
+
+```js
+// src/HelloWorld.svelte
+import './styles/main.css'
+import HelloWorld from './HelloWorld.svelte'
+
+it('looks right', () => {
+  // styles are applied
+  mount(HelloWorld)
+})
+```
+
+> Note: Global styles can be imported in your component support file, allowing the styles to apply to all mounted components.
+
+## Compatibility
+
+| @cypress/svelte | cypress |
+| -------------- | ------- |
+| >= v1          | >= v10  |
+
+## Development
+
+Run `yarn build` to compile and sync packages to the `cypress` cli package.
+
+Run `yarn cy:open` to open Cypress component testing against real-world examples.
+
+Run `yarn test` to execute headless Cypress tests.
+
+## License
+
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/master/LICENSE)
+
+This project is licensed under the terms of the [MIT license](/LICENSE).
+
+## [Changelog](./CHANGELOG.md)
--- a/npm/svelte/package.json
+++ b/npm/svelte/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@cypress/svelte",
+  "version": "0.0.0-development",
+  "description": "Browser-based Component Testing for Svelte.js with Cypress.io 🧡",
+  "main": "dist/cypress-svelte.cjs.js",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "rollup -c rollup.config.mjs",
+    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
+    "build-prod": "yarn build",
+    "check-ts": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@cypress/mount-utils": "0.0.0-development",
+    "svelte": "^3.49.0",
+    "typescript": "^4.7.4"
+  },
+  "peerDependencies": {
+    "cypress": ">=10.6.0",
+    "svelte": ">=3.0.0"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cypress-io/cypress.git"
+  },
+  "homepage": "https://github.com/cypress-io/cypress/blob/master/npm/svelte/#readme",
+  "bugs": "https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm%3A%20%40cypress%2Fsvelte&template=1-bug-report.md&title=",
+  "keywords": [
+    "cypress",
+    "svelte",
+    "testing",
+    "component testing"
+  ],
+  "module": "dist/cypress-svelte.esm-bundler.js",
+  "publishConfig": {
+    "access": "public"
+  }
+}
--- a/npm/svelte/rollup.config.mjs
+++ b/npm/svelte/rollup.config.mjs
@@ -0,0 +1,3 @@
+import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
+
+export default createEntries({ formats: ['es', 'cjs'], input: 'src/index.ts' })
--- a/npm/svelte/src/index.ts
+++ b/npm/svelte/src/index.ts
@@ -0,0 +1 @@
+export * from './mount'
--- a/npm/svelte/src/mount.ts
+++ b/npm/svelte/src/mount.ts
@@ -0,0 +1,100 @@
+import {
+  injectStylesBeforeElement,
+  StyleOptions,
+  getContainerEl,
+  setupHooks,
+} from '@cypress/mount-utils'
+import type { ComponentConstructorOptions, ComponentProps, SvelteComponent } from 'svelte'
+
+const DEFAULT_COMP_NAME = 'unknown'
+
+type SvelteConstructor<T> = new (...args: any[]) => T;
+type SvelteComponentOptions<T extends SvelteComponent> = Omit<
+  ComponentConstructorOptions<ComponentProps<T>>,
+  'hydrate' | 'target' | '$$inline'
+>;
+
+export interface MountOptions<T extends SvelteComponent>
+  extends SvelteComponentOptions<T>,
+  Partial<StyleOptions> {
+  log?: boolean
+}
+
+export interface MountReturn<T extends SvelteComponent> {
+  component: T
+}
+
+let componentInstance: SvelteComponent | undefined
+
+const cleanup = () => {
+  componentInstance?.$destroy()
+}
+
+// Extract the component name from the object passed to mount
+const getComponentDisplayName = <T extends SvelteComponent>(Component: SvelteConstructor<T>): string => {
+  if (Component.name) {
+    const [_, match] = /Proxy\<(\w+)\>/.exec(Component.name) || []
+
+    return match || Component.name
+  }
+
+  return DEFAULT_COMP_NAME
+}
+
+/**
+ * Mounts a Svelte component inside the Cypress browser
+ *
+ * @param {SvelteConstructor<T>} Component Svelte component being mounted
+ * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
+ * @returns Cypress.Chainable<MountReturn>
+ *
+ * @example
+ * import Counter from './Counter.svelte'
+ * import { mount } from 'cypress/svelte'
+ *
+ * it('should render', () => {
+ *   mount(Counter, { props: { count: 42 } })
+ *   cy.get('button').contains(42)
+ * })
+ */
+export function mount<T extends SvelteComponent> (
+  Component: SvelteConstructor<T>,
+  options: MountOptions<T> = {},
+): Cypress.Chainable<MountReturn<T>> {
+  return cy.then(() => {
+    const target = getContainerEl()
+
+    injectStylesBeforeElement(options, document, target)
+
+    const ComponentConstructor = ((Component as any).default || Component) as SvelteConstructor<T>
+
+    componentInstance = new ComponentConstructor({
+      target,
+      ...options,
+    })
+
+    // by waiting, we are delaying test execution for the next tick of event loop
+    // and letting hooks and component lifecycle methods to execute mount
+    return cy.wait(0, { log: false }).then(() => {
+      if (options.log) {
+        const mountMessage = `<${getComponentDisplayName(Component)} ... />`
+
+        Cypress.log({
+          name: 'mount',
+          message: [mountMessage],
+        }).snapshot('mounted').end()
+      }
+    })
+    .wrap({ component: componentInstance as T }, { log: false })
+  })
+}
+
+// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
+// by creating an explicit function/import that the user can register in their 'component.js' support file,
+// such as:
+//    import 'cypress/<my-framework>/support'
+// or
+//    import { registerCT } from 'cypress/<my-framework>'
+//    registerCT()
+// Note: This would be a breaking change
+setupHooks(cleanup)
--- a/npm/svelte/tsconfig.json
+++ b/npm/svelte/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "skipLibCheck": true,
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "allowJs": true,
+    "jsx": "preserve",
+    "outDir": "dist",
+    "strict": true,
+    "baseUrl": "./",
+    "types": [
+      "cypress"
+    ],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+}
--- a/npm/vue/package.json
+++ b/npm/vue/package.json
@@ -7,7 +7,7 @@
    "build-prod": "yarn build",
    "cy:open": "node ../../scripts/cypress.js open --component --project ${PWD}",
    "cy:run": "node ../../scripts/cypress.js run --component --project ${PWD}",
-    "build": "rimraf dist && rollup -c rollup.config.js",
+    "build": "rimraf dist && rollup -c rollup.config.mjs",
    "postbuild": "node --require @packages/ts/register ./inline-types.ts && node ../../scripts/sync-exported-npm-with-cli.js",
    "typecheck": "yarn tsd && vue-tsc --noEmit",
    "test": "yarn cy:run",
@@ -16,8 +16,6 @@
  },
  "devDependencies": {
    "@cypress/mount-utils": "0.0.0-development",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.1.1",
    "@vitejs/plugin-vue": "2.3.1",
    "@vue/compiler-sfc": "3.2.31",
    "@vue/test-utils": "2.0.2",
@@ -25,9 +23,6 @@
    "cypress": "0.0.0-development",
    "debug": "^4.3.2",
    "globby": "^11.0.1",
-    "rollup": "^2.38.5",
-    "rollup-plugin-istanbul": "2.0.1",
-    "rollup-plugin-typescript2": "^0.29.0",
    "tailwindcss": "1.1.4",
    "typescript": "^4.7.4",
    "vite": "3.0.3",
--- a/npm/vue/rollup.config.js
+++ b/npm/vue/rollup.config.js
@@ -1,75 +0,0 @@
-import ts from 'rollup-plugin-typescript2'
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-
-import pkg from './package.json'
-
-const banner = `
-/**
- * ${pkg.name} v${pkg.version}
- * (c) ${new Date().getFullYear()} Cypress.io
- * Released under the MIT License
- */
-`
-
-function createEntry (options) {
-  const {
-    format,
-    input,
-  } = options
-
-  const config = {
-    input,
-    external: [
-      'vue',
-    ],
-    plugins: [
-      resolve({ preferBuiltins: true }), commonjs(),
-    ],
-    output: {
-      banner,
-      name: 'CypressVue',
-      file: pkg.unpkg,
-      format,
-      globals: {
-        vue: 'Vue',
-      },
-      exports: 'auto',
-    },
-  }
-
-  if (input === 'src/index.ts') {
-    if (format === 'es') {
-      config.output.file = pkg.module
-    }
-
-    if (format === 'cjs') {
-      config.output.file = pkg.main
-    }
-  } else {
-    config.output.file = input.replace(/^src\//, 'dist/')
-  }
-
-  console.log(`Building ${format}: ${config.output.file}`)
-
-  config.plugins.push(
-    ts({
-      check: false,
-      tsconfigOverride: {
-        compilerOptions: {
-          declaration: format === 'es',
-          noEmit: false,
-          module: format === 'cjs' ? 'es2015' : 'esnext',
-        },
-        exclude: ['cypress/component'],
-      },
-    }),
-  )
-
-  return config
-}
-
-export default [
-  createEntry({ format: 'es', input: 'src/index.ts' }),
-  createEntry({ format: 'cjs', input: 'src/index.ts' }),
-]
--- a/npm/vue/rollup.config.mjs
+++ b/npm/vue/rollup.config.mjs
@@ -0,0 +1,14 @@
+import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
+
+const config = {
+  external: [
+    'vue',
+  ],
+  output: {
+    globals: {
+      vue: 'Vue',
+    },
+  },
+}
+
+export default createEntries({ formats: ['es', 'cjs'], input: 'src/index.ts', config })
--- a/npm/vue2/package.json
+++ b/npm/vue2/package.json
@@ -5,7 +5,7 @@
  "main": "dist/cypress-vue2.cjs.js",
  "scripts": {
    "typecheck": "tsc --noEmit",
-    "build": "rimraf dist && yarn rollup -c rollup.config.js",
+    "build": "rimraf dist && yarn rollup -c rollup.config.mjs",
    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
    "build-prod": "yarn build",
    "test": "echo \"Tests for @cypress/vue2 are run from system-tests\"",
@@ -17,11 +17,8 @@
  },
  "devDependencies": {
    "@cypress/mount-utils": "0.0.0-development",
-    "@rollup/plugin-commonjs": "^17.1.0",
    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.1.1",
    "@rollup/plugin-replace": "^2.3.1",
-    "rollup-plugin-typescript2": "^0.29.0",
    "tslib": "^2.1.0",
    "typescript": "^4.7.4",
    "vue": "2.6.12"
--- a/npm/vue2/rollup.config.js
+++ b/npm/vue2/rollup.config.js
@@ -1,93 +0,0 @@
-import ts from 'rollup-plugin-typescript2'
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import json from '@rollup/plugin-json'
-import replace from '@rollup/plugin-replace'
-
-import pkg from './package.json'
-
-const banner = `
-/**
- * ${pkg.name} v${pkg.version}
- * (c) ${new Date().getFullYear()} Cypress.io
- * Released under the MIT License
- */
-`
-
-function createEntry (options) {
-  const {
-    format,
-    input,
-    isBrowser,
-  } = options
-
-  const config = {
-    input,
-    external: [
-      'vue',
-    ],
-    plugins: [
-      resolve({ preferBuiltins: true }),
-      commonjs(),
-      json(),
-      /**
-       * Vue 2 core tries to load require.resolve(`./package.json`) in the browser for the
-       * sole purpose of throwing an error about Vue Loader.
-       * Just truncate this for now for simplicity.
-       */
-      replace({
-        'vueVersion && vueVersion !== packageVersion': JSON.stringify(false),
-      }),
-    ],
-    output: {
-      banner,
-      name: 'CypressVue2',
-      file: pkg.unpkg,
-      format,
-      globals: {
-        vue: 'Vue',
-      },
-      exports: 'auto',
-    },
-  }
-
-  if (input === 'src/index.ts') {
-    if (format === 'es') {
-      config.output.file = pkg.module
-      if (isBrowser) {
-        config.output.file = pkg.unpkg
-      }
-    }
-
-    if (format === 'cjs') {
-      config.output.file = pkg.main
-    }
-  } else {
-    config.output.file = input.replace(/^src\//, 'dist/')
-  }
-
-  console.log(`Building ${format}: ${config.output.file}`)
-
-  config.plugins.push(
-    ts({
-      check: format === 'es' && isBrowser,
-      tsconfigOverride: {
-        compilerOptions: {
-          declaration: format === 'es',
-          target: 'es5', // not sure what this should be?
-          module: format === 'cjs' ? 'es2015' : 'esnext',
-        },
-        exclude: ['tests'],
-      },
-    }),
-  )
-
-  return config
-}
-
-export default [
-  createEntry({ format: 'es', input: 'src/index.ts', isBrowser: false }),
-  createEntry({ format: 'es', input: 'src/index.ts', isBrowser: true }),
-  createEntry({ format: 'iife', input: 'src/index.ts', isBrowser: true }),
-  createEntry({ format: 'cjs', input: 'src/index.ts', isBrowser: false }),
-]
--- a/npm/vue2/rollup.config.mjs
+++ b/npm/vue2/rollup.config.mjs
@@ -0,0 +1,28 @@
+import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
+import json from '@rollup/plugin-json'
+import replace from '@rollup/plugin-replace'
+
+const config = {
+  external: [
+    'vue',
+  ],
+  plugins: [
+    json(),
+    /**
+       * Vue 2 core tries to load require.resolve(`./package.json`) in the browser for the
+       * sole purpose of throwing an error about Vue Loader.
+       * Just truncate this for now for simplicity.
+       */
+    replace({
+      'vueVersion && vueVersion !== packageVersion': JSON.stringify(false),
+      preventAssignment: false,
+    }),
+  ],
+  output: {
+    globals: {
+      vue: 'Vue',
+    },
+  },
+}
+
+export default createEntries({ formats: ['es', 'cjs'], input: 'src/index.ts', config })
--- a/npm/webpack-dev-server/src/devServer.ts
+++ b/npm/webpack-dev-server/src/devServer.ts
@@ -128,6 +128,7 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti

    case 'react':
    case 'vue':
+    case 'svelte':
    case undefined:
      return { sourceWebpackModulesResult: sourceDefaultWebpackDependencies(devServerConfig) }

--- a/npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.ts
+++ b/npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.ts
@@ -66,6 +66,7 @@ const frameworkWebpackMapper: FrameworkWebpackMapper = {
  vue: undefined,
  next: 'next',
  'angular': '@angular-devkit/build-angular',
+  'svelte': undefined,
 }

 // Source the users framework from the provided projectRoot. The framework, if available, will serve
--- a/package.json
+++ b/package.json
@@ -12,8 +12,8 @@
    "binary-release": "node ./scripts/binary.js release",
    "binary-upload": "node ./scripts/binary.js upload",
    "binary-zip": "node ./scripts/binary.js zip",
-    "build": "yarn build-npm-modules && lerna run build --stream --no-bail --ignore create-cypress-tests --ignore cypress --ignore \"'@packages/{runner}'\" --ignore \"'@cypress/{angular,react,react18,vue,vue2,mount-utils}'\" && node ./cli/scripts/post-build.js && lerna run build --stream --scope create-cypress-tests",
-    "build-npm-modules": "lerna run build --scope cypress --scope @cypress/mount-utils && lerna run build --scope \"'@cypress/{angular,react,react18,vue,vue2}'\"",
+    "build": "yarn build-npm-modules && lerna run build --stream --no-bail --ignore create-cypress-tests --ignore cypress --ignore \"'@packages/{runner}'\" --ignore \"'@cypress/{angular,react,react18,vue,vue2,mount-utils,svelte}'\" && node ./cli/scripts/post-build.js && lerna run build --stream --scope create-cypress-tests",
+    "build-npm-modules": "lerna run build --scope cypress --scope @cypress/mount-utils && lerna run build --scope \"'@cypress/{angular,react,react18,vue,vue2,svelte}'\"",
    "build-prod": "lerna run build-prod-ui --stream && lerna run build-prod --stream --ignore create-cypress-tests && node ./cli/scripts/post-build.js && lerna run build-prod --stream --scope create-cypress-tests --scope",
    "check-node-version": "node scripts/check-node-version.js",
    "check-terminal": "node scripts/check-terminal.js",
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -920,6 +920,7 @@ enum FrontendFrameworkEnum {
  nuxtjs
  react
  reactscripts
+  svelte
  vue2
  vue3
  vueclivue2
--- a/packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts
+++ b/packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts
@@ -121,4 +121,30 @@ describe('scaffolding component testing', {
      verifyConfigFile(`cypress.config.ts`)
    })
  })
+
+  context('svelte-vite-unconfigured', () => {
+    it('Scaffolds component testing for Svelte using vite', () => {
+      startSetupFor('svelte-vite-unconfigured')
+
+      // should detect correctly
+      // Screen reader text is "Support is in", but don't want to rely on DOM introduced whitespace so using regex
+      cy.contains('button', /Svelte\.js\s+Support is in\s+Alpha\(detected\)/).should('be.visible')
+      cy.contains('button', 'Next Step').click()
+      cy.findByRole('button', { name: 'Continue' }).click()
+      verifyConfigFile(`cypress.config.js`)
+    })
+  })
+
+  context('svelte-webpack-unconfigured', () => {
+    it('Scaffolds component testing for Svelte using webpack', () => {
+      startSetupFor('svelte-webpack-unconfigured')
+
+      // should detect correctly
+      // Screen reader text is "Support is in", but don't want to rely on DOM introduced whitespace so using regex
+      cy.contains('button', /Svelte\.js\s+Support is in\s+Alpha\(detected\)/).should('be.visible')
+      cy.contains('button', 'Next Step').click()
+      cy.findByRole('button', { name: 'Continue' }).click()
+      verifyConfigFile(`cypress.config.js`)
+    })
+  })
 })
--- a/packages/launchpad/src/images/logos/svelte.svg
+++ b/packages/launchpad/src/images/logos/svelte.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="0.84em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"/><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"/></svg>
--- a/packages/launchpad/src/utils/icons.ts
+++ b/packages/launchpad/src/utils/icons.ts
@@ -5,6 +5,7 @@ import LogoNuxt from '../images/logos/nuxt.svg'
 import LogoVue from '../images/logos/vue.svg'
 import LogoReact from '../images/logos/react.svg'
 import LogoAngular from '../images/logos/angular.svg'
+import LogoSvelte from '../images/logos/svelte.svg'

 import type { FrontendFrameworkEnum, SupportedBundlers } from '../generated/graphql'

@@ -20,4 +21,5 @@ export const FrameworkBundlerLogos: Record<FrontendFrameworkEnum | SupportedBund
  react: LogoReact,
  reactscripts: LogoReact,
  angular: LogoAngular,
+  svelte: LogoSvelte,
 }
--- a/packages/scaffold-config/src/dependencies.ts
+++ b/packages/scaffold-config/src/dependencies.ts
@@ -142,6 +142,15 @@ export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
  minVersion: '>=13.0.0',
 } as const

+export const WIZARD_DEPENDENCY_SVELTE = {
+  type: 'svelte',
+  name: 'Svelte.js',
+  package: 'svelte',
+  installer: 'svelte',
+  description: 'Cybernetically enhanced web apps',
+  minVersion: '^3.0.0',
+} as const
+
 export const WIZARD_DEPENDENCIES = [
  WIZARD_DEPENDENCY_WEBPACK,
  WIZARD_DEPENDENCY_TYPESCRIPT,
@@ -159,6 +168,7 @@ export const WIZARD_DEPENDENCIES = [
  WIZARD_DEPENDENCY_ANGULAR_CORE,
  WIZARD_DEPENDENCY_ANGULAR_COMMON,
  WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC,
+  WIZARD_DEPENDENCY_SVELTE,
 ] as const

 export const WIZARD_BUNDLERS = [
--- a/packages/scaffold-config/src/frameworks.ts
+++ b/packages/scaffold-config/src/frameworks.ts
@@ -264,4 +264,23 @@ export const WIZARD_FRAMEWORKS = [
    componentIndexHtml: componentIndexHtmlGenerator(),
    specPattern: '**/*.cy.ts',
  },
+  {
+    type: 'svelte',
+    configFramework: 'svelte',
+    category: 'library',
+    name: 'Svelte.js',
+    detectors: [dependencies.WIZARD_DEPENDENCY_SVELTE],
+    supportedBundlers: [dependencies.WIZARD_DEPENDENCY_WEBPACK, dependencies.WIZARD_DEPENDENCY_VITE],
+    dependencies: (bundler: WizardBundler['type'], projectPath: string): Promise<DependencyToInstall[]> => {
+      return Promise.all([
+        getBundlerDependency(bundler, projectPath),
+        isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_SVELTE, projectPath),
+      ])
+    },
+    codeGenFramework: 'svelte',
+    glob: '*.svelte',
+    mountModule: mountModule('cypress/svelte'),
+    supportStatus: 'alpha',
+    componentIndexHtml: componentIndexHtmlGenerator(),
+  },
 ] as const
--- a/packages/scaffold-config/test/unit/detect.spec.ts
+++ b/packages/scaffold-config/test/unit/detect.spec.ts
@@ -219,6 +219,36 @@ describe('detectFramework', () => {
    })
  })

+  ;['2.0.0', '3.0.0'].forEach((v) => {
+    it(`Svelte and Vite v${v}`, async () => {
+      const projectPath = await scaffoldMigrationProject('svelte-vite-unconfigured')
+
+      fakeDepsInNodeModules(projectPath, [
+        { dependency: 'svelte', version: '3.0.0' },
+        { dependency: 'vite', version: v },
+      ])
+
+      const actual = await detectFramework(projectPath)
+
+      expect(actual.framework?.type).to.eq('svelte')
+      expect(actual.bundler?.type).to.eq('vite')
+    })
+  })
+
+  it(`Svelte and Webpack`, async () => {
+    const projectPath = await scaffoldMigrationProject('svelte-webpack-unconfigured')
+
+    fakeDepsInNodeModules(projectPath, [
+      { dependency: 'svelte', version: '3.0.0' },
+      { dependency: 'webpack', version: '5.0.0' },
+    ])
+
+    const actual = await detectFramework(projectPath)
+
+    expect(actual.framework?.type).to.eq('svelte')
+    expect(actual.bundler?.type).to.eq('webpack')
+  })
+
  it(`no framework or library`, async () => {
    const projectPath = await scaffoldMigrationProject('pristine')

--- a/packages/scaffold-config/test/unit/supportFile.spec.ts
+++ b/packages/scaffold-config/test/unit/supportFile.spec.ts
@@ -220,4 +220,86 @@ describe('supportFileComponent', () => {
      })
    }
  })
+
+  context('svelte', () => {
+    it(`handles cypress/svelte and JS`, () => {
+      const actual = supportFileComponent('js', 'cypress/svelte')
+
+      expect(actual).to.eq(dedent`
+          // ***********************************************************
+          // This example support/component.js is processed and
+          // loaded automatically before your test files.
+          //
+          // This is a great place to put global configuration and
+          // behavior that modifies Cypress.
+          //
+          // You can change the location of this file or turn off
+          // automatically serving support files with the
+          // 'supportFile' configuration option.
+          //
+          // You can read more here:
+          // https://on.cypress.io/configuration
+          // ***********************************************************
+
+          // Import commands.js using ES2015 syntax:
+          import './commands'
+
+          // Alternatively you can use CommonJS syntax:
+          // require('./commands')
+
+          import { mount } from 'cypress/svelte'
+
+          Cypress.Commands.add('mount', mount)
+
+          // Example use:
+          // cy.mount(MyComponent)
+          `)
+    })
+
+    it(`handles cypress/svelte and TS`, () => {
+      const actual = supportFileComponent('ts', 'cypress/svelte')
+
+      expect(actual).to.eq(dedent`
+        // ***********************************************************
+        // This example support/component.ts is processed and
+        // loaded automatically before your test files.
+        //
+        // This is a great place to put global configuration and
+        // behavior that modifies Cypress.
+        //
+        // You can change the location of this file or turn off
+        // automatically serving support files with the
+        // 'supportFile' configuration option.
+        //
+        // You can read more here:
+        // https://on.cypress.io/configuration
+        // ***********************************************************
+
+        // Import commands.js using ES2015 syntax:
+        import './commands'
+
+        // Alternatively you can use CommonJS syntax:
+        // require('./commands')
+
+        import { mount } from 'cypress/svelte'
+
+        // Augment the Cypress namespace to include type definitions for
+        // your custom command.
+        // Alternatively, can be defined in cypress/support/component.d.ts
+        // with a <reference path="./component" /> at the top of your spec.
+        declare global {
+          namespace Cypress {
+            interface Chainable {
+              mount: typeof mount
+            }
+          }
+        }
+
+        Cypress.Commands.add('mount', mount)
+
+        // Example use:
+        // cy.mount(MyComponent)
+      `)
+    })
+  })
 })
--- a/system-tests/project-fixtures/svelte/cypress/support/component-index.html
+++ b/system-tests/project-fixtures/svelte/cypress/support/component-index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root>
+      <div id="anchor"></div>
+    </div>
+  </body>
+</html>
--- a/system-tests/project-fixtures/svelte/cypress/support/component.js
+++ b/system-tests/project-fixtures/svelte/cypress/support/component.js
@@ -0,0 +1,4 @@
+import { mount } from "cypress/svelte";
+import "../../src/styles.css"
+
+Cypress.Commands.add("mount", mount);
--- a/system-tests/project-fixtures/svelte/src/App.cy.js
+++ b/system-tests/project-fixtures/svelte/src/App.cy.js
@@ -0,0 +1,10 @@
+import App from './App.svelte'
+
+it('should render with style', () => {
+  cy.mount(App)
+  cy.contains('Hello World!')
+  // Verify global styles
+  cy.get('.very-red').should('have.css', 'color', 'rgb(255, 0, 0)')
+  // Verify local styles
+  cy.get('.very-blue').should('have.css', 'color', 'rgb(0, 0, 255)')
+})
--- a/system-tests/project-fixtures/svelte/src/App.svelte
+++ b/system-tests/project-fixtures/svelte/src/App.svelte
@@ -0,0 +1,14 @@
+<script>
+</script>
+
+<main>
+  <h1>Hello World!</h1>
+  <h2 class="very-red">Colored by global styles</h2>
+  <h2 class="very-blue">Colored by local styles</h2>
+</main>
+
+<style>
+.very-blue {
+  color: rgb(0, 0, 255)
+}
+</style>
--- a/system-tests/project-fixtures/svelte/src/Context.svelte
+++ b/system-tests/project-fixtures/svelte/src/Context.svelte
@@ -0,0 +1,7 @@
+<script>
+import { getContext } from 'svelte'
+
+const { msg } = getContext('myKey')
+</script>
+
+<h1>{msg}</h1>
--- a/system-tests/project-fixtures/svelte/src/Counter.svelte
+++ b/system-tests/project-fixtures/svelte/src/Counter.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let count = 0
+  
+  const handleClick = () => {
+    dispatch('change', {
+      count: count++
+    })
+  }
+</script>
+
+<main>
+  <div>
+    <h1>Count is {count}</h1>
+    <button on:click={handleClick}>Click to increment</button>
+  </div>
+</main>
--- a/system-tests/project-fixtures/svelte/src/Store.svelte
+++ b/system-tests/project-fixtures/svelte/src/Store.svelte
@@ -0,0 +1,19 @@
+<script>
+import { messageStore } from './store'
+
+let message;
+
+messageStore.subscribe((value) => {
+  message = value
+})
+
+function handleChange(event) {
+  messageStore.update(() => {
+    return event.target.value
+  })
+}
+
+</script>
+
+<h1>{message}</h1>
+<input on:keyup={handleChange} value={message} />
--- a/system-tests/project-fixtures/svelte/src/main.js
+++ b/system-tests/project-fixtures/svelte/src/main.js
@@ -0,0 +1,8 @@
+import App from "./App.svelte";
+import "./styles.css";
+
+const app = new App({
+  target: document.getElementById("app"),
+});
+
+export default app;
--- a/system-tests/project-fixtures/svelte/src/mount.cy.js
+++ b/system-tests/project-fixtures/svelte/src/mount.cy.js
@@ -0,0 +1,56 @@
+import Counter from "./Counter.svelte";
+import Context from "./Context.svelte";
+import Store from "./Store.svelte";
+import { messageStore } from "./store";
+
+describe("Svelte mount", () => {
+  it("mounts", () => {
+    cy.mount(Counter)
+    cy.contains("h1", "Count is 0");
+  });
+
+  it("reacts to state changes", () => {
+    cy.mount(Counter);
+    cy.contains("h1", "Count is 0");
+    cy.get("button").click();
+    cy.contains("h1", "Count is 1");
+  });
+
+  it("accepts props", () => {
+    cy.mount(Counter, { props: { count: 42 } });
+    cy.contains("h1", "Count is 42");
+  });
+
+  it("accepts context", () => {
+    const payload = { msg: "This value came from context!" };
+    const context = new Map();
+    context.set("myKey", payload);
+
+    cy.mount(Context, { context });
+    cy.contains("h1", payload.msg);
+  });
+
+  it("spies on outputs", () => {
+    cy.mount(Counter).then(({ component }) => {
+      component.$on("change", cy.spy().as("changeSpy"));
+      cy.get("button").click();
+      cy.get("@changeSpy").should("have.been.called");
+    });
+  });
+
+  it("anchors mounted component", () => {
+    cy.mount(Counter, { anchor: document.getElementById("anchor") });
+    cy.get("[data-cy-root]").children().last().should("have.id", "anchor");
+  });
+
+  it("reactive to writables", () => {
+    cy.mount(Store);
+    cy.contains("h1", "Hello World!");
+
+    cy.get("input").clear().type("New Message");
+    cy.contains("h1", "New Message");
+
+    cy.then(() => messageStore.set("Written from spec"));
+    cy.contains("h1", "Written from spec");
+  });
+});
--- a/system-tests/project-fixtures/svelte/src/store.js
+++ b/system-tests/project-fixtures/svelte/src/store.js
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const messageStore = writable("Hello World!");
--- a/system-tests/project-fixtures/svelte/src/styles.css
+++ b/system-tests/project-fixtures/svelte/src/styles.css
@@ -0,0 +1,3 @@
+.very-red {
+  color: rgb(255, 0, 0)
+}
--- a/system-tests/projects/svelte-vite-unconfigured/index.html
+++ b/system-tests/projects/svelte-vite-unconfigured/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/system-tests/projects/svelte-vite-unconfigured/jsconfig.json
+++ b/system-tests/projects/svelte-vite-unconfigured/jsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "checkJs": true
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.js",
+    "src/**/*.svelte"
+  ]
+}
--- a/system-tests/projects/svelte-vite-unconfigured/package.json
+++ b/system-tests/projects/svelte-vite-unconfigured/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "svelte-vite-unconfigured",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "svelte": "^3.49.0",
+    "vite": "^3.0.7"
+  },
+  "type": "module"
+}
--- a/system-tests/projects/svelte-vite-unconfigured/public/vite.svg
+++ b/system-tests/projects/svelte-vite-unconfigured/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/system-tests/projects/svelte-vite-unconfigured/src/App.svelte
+++ b/system-tests/projects/svelte-vite-unconfigured/src/App.svelte
@@ -0,0 +1,45 @@
+<script>
+  import svelteLogo from './assets/svelte.svg'
+  import Counter from './lib/Counter.svelte'
+</script>
+
+<main>
+  <div>
+    <a href="https://vitejs.dev" target="_blank"> 
+      <img src="/vite.svg" class="logo" alt="Vite Logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank"> 
+      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+    </a>
+  </div>
+  <h1>Vite + Svelte</h1>
+
+  <div class="card">
+    <Counter />
+  </div>
+
+  <p>
+    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank">SvelteKit</a>, the official Svelte app framework powered by Vite!
+  </p>
+
+  <p class="read-the-docs">
+    Click on the Vite and Svelte logos to learn more
+  </p>
+</main>
+
+<style>
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+  .read-the-docs {
+    color: #888;
+  }
+</style>
--- a/system-tests/projects/svelte-vite-unconfigured/src/app.css
+++ b/system-tests/projects/svelte-vite-unconfigured/src/app.css
@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/system-tests/projects/svelte-vite-unconfigured/src/assets/svelte.svg
+++ b/system-tests/projects/svelte-vite-unconfigured/src/assets/svelte.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
--- a/system-tests/projects/svelte-vite-unconfigured/src/lib/Counter.svelte
+++ b/system-tests/projects/svelte-vite-unconfigured/src/lib/Counter.svelte
@@ -0,0 +1,10 @@
+<script>
+  let count = 0
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button on:click={increment}>
+  count is {count}
+</button>
--- a/system-tests/projects/svelte-vite-unconfigured/src/main.js
+++ b/system-tests/projects/svelte-vite-unconfigured/src/main.js
@@ -0,0 +1,8 @@
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app
--- a/system-tests/projects/svelte-vite-unconfigured/src/vite-env.d.ts
+++ b/system-tests/projects/svelte-vite-unconfigured/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/system-tests/projects/svelte-vite-unconfigured/vite.config.js
+++ b/system-tests/projects/svelte-vite-unconfigured/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})
--- a/system-tests/projects/svelte-vite-unconfigured/yarn.lock
+++ b/system-tests/projects/svelte-vite-unconfigured/yarn.lock
@@ -0,0 +1,295 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@esbuild/linux-loong64@0.14.54":
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
+  integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==
+
+"@rollup/pluginutils@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
+"@sveltejs/vite-plugin-svelte@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.1.tgz#7f468f03c933fcdfc60d4773671c73f33b9ef4d6"
+  integrity sha512-PorCgUounn0VXcpeJu+hOweZODKmGuLHsLomwqSj+p26IwjjGffmYQfVHtiTWq+NqaUuuHWWG7vPge6UFw4Aeg==
+  dependencies:
+    "@rollup/pluginutils" "^4.2.1"
+    debug "^4.3.4"
+    deepmerge "^4.2.2"
+    kleur "^4.1.5"
+    magic-string "^0.26.2"
+    svelte-hmr "^0.14.12"
+
+debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
+esbuild-android-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be"
+  integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==
+
+esbuild-android-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771"
+  integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==
+
+esbuild-darwin-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25"
+  integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==
+
+esbuild-darwin-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73"
+  integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==
+
+esbuild-freebsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d"
+  integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==
+
+esbuild-freebsd-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48"
+  integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==
+
+esbuild-linux-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5"
+  integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==
+
+esbuild-linux-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652"
+  integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==
+
+esbuild-linux-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b"
+  integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==
+
+esbuild-linux-arm@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59"
+  integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==
+
+esbuild-linux-mips64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34"
+  integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==
+
+esbuild-linux-ppc64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e"
+  integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==
+
+esbuild-linux-riscv64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8"
+  integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==
+
+esbuild-linux-s390x@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6"
+  integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==
+
+esbuild-netbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81"
+  integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==
+
+esbuild-openbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b"
+  integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==
+
+esbuild-sunos-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da"
+  integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==
+
+esbuild-windows-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31"
+  integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==
+
+esbuild-windows-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4"
+  integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==
+
+esbuild-windows-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982"
+  integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==
+
+esbuild@^0.14.47:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2"
+  integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==
+  optionalDependencies:
+    "@esbuild/linux-loong64" "0.14.54"
+    esbuild-android-64 "0.14.54"
+    esbuild-android-arm64 "0.14.54"
+    esbuild-darwin-64 "0.14.54"
+    esbuild-darwin-arm64 "0.14.54"
+    esbuild-freebsd-64 "0.14.54"
+    esbuild-freebsd-arm64 "0.14.54"
+    esbuild-linux-32 "0.14.54"
+    esbuild-linux-64 "0.14.54"
+    esbuild-linux-arm "0.14.54"
+    esbuild-linux-arm64 "0.14.54"
+    esbuild-linux-mips64le "0.14.54"
+    esbuild-linux-ppc64le "0.14.54"
+    esbuild-linux-riscv64 "0.14.54"
+    esbuild-linux-s390x "0.14.54"
+    esbuild-netbsd-64 "0.14.54"
+    esbuild-openbsd-64 "0.14.54"
+    esbuild-sunos-64 "0.14.54"
+    esbuild-windows-32 "0.14.54"
+    esbuild-windows-64 "0.14.54"
+    esbuild-windows-arm64 "0.14.54"
+
+estree-walker@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
+  dependencies:
+    has "^1.0.3"
+
+kleur@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
+magic-string@^0.26.2:
+  version "0.26.2"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.2.tgz#5331700e4158cd6befda738bb6b0c7b93c0d4432"
+  integrity sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.2.2:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+postcss@^8.4.16:
+  version "8.4.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
+  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+resolve@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+"rollup@>=2.75.6 <2.77.0 || ~2.77.0":
+  version "2.77.3"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.3.tgz#8f00418d3a2740036e15deb653bed1a90ee0cc12"
+  integrity sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svelte-hmr@^0.14.12:
+  version "0.14.12"
+  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
+  integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==
+
+svelte@^3.49.0:
+  version "3.49.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
+  integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
+
+vite@^3.0.7:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.9.tgz#45fac22c2a5290a970f23d66c1aef56a04be8a30"
+  integrity sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==
+  dependencies:
+    esbuild "^0.14.47"
+    postcss "^8.4.16"
+    resolve "^1.22.1"
+    rollup ">=2.75.6 <2.77.0 || ~2.77.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
--- a/system-tests/projects/svelte-vite/cypress.config.js
+++ b/system-tests/projects/svelte-vite/cypress.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'svelte',
+      bundler: 'vite',
+    },
+  },
+})
--- a/system-tests/projects/svelte-vite/package.json
+++ b/system-tests/projects/svelte-vite/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "svelte-vite",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "svelte": "^3.44.0",
+    "vite": "^3.0.0"
+  },
+  "type": "module",
+  "projectFixtureDirectory": "svelte"
+}
--- a/system-tests/projects/svelte-vite/vite.config.js
+++ b/system-tests/projects/svelte-vite/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})
--- a/system-tests/projects/svelte-vite/yarn.lock
+++ b/system-tests/projects/svelte-vite/yarn.lock
@@ -0,0 +1,295 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@esbuild/linux-loong64@0.14.54":
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
+  integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==
+
+"@rollup/pluginutils@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
+"@sveltejs/vite-plugin-svelte@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.2.tgz#d9997e9f1aeca7b5f72634e774c4f0c7207134b3"
+  integrity sha512-8tTVbNuraeDchBaArNbwaZLpO0feM7BRSdZU5yeM4Clasx2p1p1CYBoWh+VgxZlxiark49HXummkHqKztbl8lA==
+  dependencies:
+    "@rollup/pluginutils" "^4.2.1"
+    debug "^4.3.4"
+    deepmerge "^4.2.2"
+    kleur "^4.1.5"
+    magic-string "^0.26.2"
+    svelte-hmr "^0.14.12"
+
+debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
+esbuild-android-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be"
+  integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==
+
+esbuild-android-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771"
+  integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==
+
+esbuild-darwin-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25"
+  integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==
+
+esbuild-darwin-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73"
+  integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==
+
+esbuild-freebsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d"
+  integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==
+
+esbuild-freebsd-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48"
+  integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==
+
+esbuild-linux-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5"
+  integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==
+
+esbuild-linux-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652"
+  integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==
+
+esbuild-linux-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b"
+  integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==
+
+esbuild-linux-arm@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59"
+  integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==
+
+esbuild-linux-mips64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34"
+  integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==
+
+esbuild-linux-ppc64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e"
+  integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==
+
+esbuild-linux-riscv64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8"
+  integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==
+
+esbuild-linux-s390x@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6"
+  integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==
+
+esbuild-netbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81"
+  integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==
+
+esbuild-openbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b"
+  integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==
+
+esbuild-sunos-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da"
+  integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==
+
+esbuild-windows-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31"
+  integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==
+
+esbuild-windows-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4"
+  integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==
+
+esbuild-windows-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982"
+  integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==
+
+esbuild@^0.14.47:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2"
+  integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==
+  optionalDependencies:
+    "@esbuild/linux-loong64" "0.14.54"
+    esbuild-android-64 "0.14.54"
+    esbuild-android-arm64 "0.14.54"
+    esbuild-darwin-64 "0.14.54"
+    esbuild-darwin-arm64 "0.14.54"
+    esbuild-freebsd-64 "0.14.54"
+    esbuild-freebsd-arm64 "0.14.54"
+    esbuild-linux-32 "0.14.54"
+    esbuild-linux-64 "0.14.54"
+    esbuild-linux-arm "0.14.54"
+    esbuild-linux-arm64 "0.14.54"
+    esbuild-linux-mips64le "0.14.54"
+    esbuild-linux-ppc64le "0.14.54"
+    esbuild-linux-riscv64 "0.14.54"
+    esbuild-linux-s390x "0.14.54"
+    esbuild-netbsd-64 "0.14.54"
+    esbuild-openbsd-64 "0.14.54"
+    esbuild-sunos-64 "0.14.54"
+    esbuild-windows-32 "0.14.54"
+    esbuild-windows-64 "0.14.54"
+    esbuild-windows-arm64 "0.14.54"
+
+estree-walker@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
+  dependencies:
+    has "^1.0.3"
+
+kleur@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
+magic-string@^0.26.2:
+  version "0.26.2"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.2.tgz#5331700e4158cd6befda738bb6b0c7b93c0d4432"
+  integrity sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.2.2:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+postcss@^8.4.16:
+  version "8.4.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
+  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+resolve@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+"rollup@>=2.75.6 <2.77.0 || ~2.77.0":
+  version "2.77.3"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.3.tgz#8f00418d3a2740036e15deb653bed1a90ee0cc12"
+  integrity sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svelte-hmr@^0.14.12:
+  version "0.14.12"
+  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
+  integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==
+
+svelte@^3.44.0:
+  version "3.49.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
+  integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
+
+vite@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.9.tgz#45fac22c2a5290a970f23d66c1aef56a04be8a30"
+  integrity sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==
+  dependencies:
+    esbuild "^0.14.47"
+    postcss "^8.4.16"
+    resolve "^1.22.1"
+    rollup ">=2.75.6 <2.77.0 || ~2.77.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
--- a/system-tests/projects/svelte-webpack-unconfigured/package.json
+++ b/system-tests/projects/svelte-webpack-unconfigured/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "dev": "webpack serve --content-base public"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.0.1",
+    "mini-css-extract-plugin": "^1.3.4",
+    "svelte": "^3.31.2",
+    "svelte-loader": "^3.0.0",
+    "webpack": "^5.16.0",
+    "webpack-cli": "^4.4.0",
+    "webpack-dev-server": "^3.11.2"
+  }
+}
--- a/system-tests/projects/svelte-webpack-unconfigured/public/favicon.png
+++ b/system-tests/projects/svelte-webpack-unconfigured/public/favicon.png
--- a/system-tests/projects/svelte-webpack-unconfigured/public/index.html
+++ b/system-tests/projects/svelte-webpack-unconfigured/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
--- a/system-tests/projects/svelte-webpack-unconfigured/scripts/setupTypeScript.js
+++ b/system-tests/projects/svelte-webpack-unconfigured/scripts/setupTypeScript.js
@@ -0,0 +1,210 @@
+/**
+ * Run this script to convert the project to TypeScript. This is only guaranteed to work
+ * on the unmodified default template; if you have done code changes you are likely need
+ * to touch up the generated project manually.
+ */
+
+// @ts-check
+const fs = require('fs')
+const path = require('path')
+const { argv } = require('process')
+
+const projectRoot = argv[2] || path.join(__dirname, '..')
+
+function warn (message) {
+  console.warn(`Warning: ${ message}`)
+}
+
+function createFile (fileName, contents) {
+  if (fs.existsSync(fileName)) {
+    warn(`Wanted to create ${fileName}, but it already existed. Leaving existing file.`)
+  } else {
+    fs.writeFileSync(fileName, contents)
+  }
+}
+
+function replaceInFile (fileName, replacements) {
+  if (fs.existsSync(fileName)) {
+    let contents = fs.readFileSync(fileName, 'utf8')
+    let hadUpdates = false
+
+    replacements.forEach(([from, to]) => {
+      const newContents = contents.replace(from, to)
+
+      const isAlreadyApplied = typeof to !== 'string' || contents.includes(to)
+
+      if (newContents !== contents) {
+        contents = newContents
+        hadUpdates = true
+      } else if (!isAlreadyApplied) {
+        warn(`Wanted to update "${from}" in ${fileName}, but did not find it.`)
+      }
+    })
+
+    if (hadUpdates) {
+      fs.writeFileSync(fileName, contents)
+    } else {
+      console.log(`${fileName} had already been updated.`)
+    }
+  } else {
+    warn(`Wanted to update ${fileName} but the file did not exist.`)
+  }
+}
+
+// Add deps to pkg.json
+function addDepsToPackageJson () {
+  const pkgJSONPath = path.join(projectRoot, 'package.json')
+  const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8'))
+
+  packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
+    'ts-loader': '^8.0.4',
+    '@tsconfig/svelte': '^1.0.10',
+    '@types/node': '^14.11.1',
+    'svelte-check': '^1.0.46',
+    'svelte-preprocess': '^4.3.0',
+    tslib: '^2.0.1',
+    typescript: '^4.0.3',
+  })
+
+  // Add script for checking
+  packageJSON.scripts = Object.assign(packageJSON.scripts, {
+    validate: 'svelte-check',
+  })
+
+  // Write the package JSON
+  fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, '  '))
+}
+
+// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
+function changeJsExtensionToTs (dir) {
+  const elements = fs.readdirSync(dir, { withFileTypes: true })
+
+  for (let i = 0; i < elements.length; i++) {
+    if (elements[i].isDirectory()) {
+      changeJsExtensionToTs(path.join(dir, elements[i].name))
+    } else if (elements[i].name.match(/^[^_]((?!json).)*js$/)) {
+      fs.renameSync(path.join(dir, elements[i].name), path.join(dir, elements[i].name).replace('.js', '.ts'))
+    }
+  }
+}
+
+function updateSingleSvelteFile ({ view, vars, contextModule }) {
+  replaceInFile(path.join(projectRoot, 'src', `${view}.svelte`), [
+    [/(?:<script)(( .*?)*?)>/gm, (m, attrs) => `<script${attrs}${!attrs.includes('lang="ts"') ? ' lang="ts"' : ''}>`],
+    ...(vars ? vars.map(({ name, type }) => [`export let ${name};`, `export let ${name}: ${type};`]) : []),
+    ...(contextModule ? contextModule.map(({ js, ts }) => [js, ts]) : []),
+  ])
+}
+
+// Switch the App.svelte file to use TS
+function updateSvelteFiles () {
+  [
+    {
+      view: 'App',
+      vars: [{ name: 'name', type: 'string' }],
+    },
+  ].forEach(updateSingleSvelteFile)
+}
+
+function updateWebpackConfig () {
+  // Edit webpack config
+  replaceInFile(path.join(projectRoot, 'webpack.config.js'), [
+    // Edit imports
+    [
+      /require\('path'\);\n(?!const sveltePreprocess)/,
+			`require('path');\nconst sveltePreprocess = require('svelte-preprocess');\n`,
+    ],
+    // Edit extensions
+    [
+      /'\.js',/,
+			`'.js', '.ts',`,
+    ],
+    // Edit name of entry point
+    [
+      /'\.\/src\/main.js'/,
+			`'./src/main.ts'`,
+    ],
+    // Add preprocess to the svelte loader, this is tricky because there's no easy signifier.
+    // Instead we look for 'hotReload: 'prod,'
+    [
+      /hotReload: \!prod(?!,\n\s*preprocess)/g,
+      'hotReload: !prod,\n\t\t\t\t\t\t\tpreprocess: sveltePreprocess({ sourceMap: !prod })',
+    ],
+    // Add ts-loader
+    [
+      /module: {\n\s*rules: \[\n\s*(?!{\n\s*test: \/\\\.ts\$\/)/g,
+			`module: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\ttest: /\\.ts$/,\n\t\t\t\t\tloader: 'ts-loader',\n\t\t\t\t\texclude: /node_modules/\n\t\t\t\t},\n\t\t\t\t`,
+    ],
+  ])
+}
+
+// Add TSConfig
+function createTsConfig () {
+  const tsconfig = `{
+		"extends": "@tsconfig/svelte/tsconfig.json",
+		"include": ["src/**/*", "src/node_modules/**/*"],
+		"exclude": ["node_modules/*", "__sapper__/*", "static/*"]
+	}`
+
+  createFile(path.join(projectRoot, 'tsconfig.json'), tsconfig)
+}
+
+// Adds the extension recommendation
+function configureVsCode () {
+  const dir = path.join(projectRoot, '.vscode')
+
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir)
+  }
+
+  createFile(path.join(projectRoot, '.vscode', 'extensions.json'), `{"recommendations": ["svelte.svelte-vscode"]}`)
+}
+
+function deleteThisScript () {
+  fs.unlinkSync(path.join(__filename))
+
+  // Check for Mac's DS_store file, and if it's the only one left remove it
+  const remainingFiles = fs.readdirSync(path.join(__dirname))
+
+  if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
+    fs.unlinkSync(path.join(__dirname, '.DS_store'))
+  }
+
+  // Check if the scripts folder is empty
+  if (fs.readdirSync(path.join(__dirname)).length === 0) {
+    // Remove the scripts folder
+    try {
+      fs.rmdirSync(path.join(__dirname))
+    } catch (e) {
+      warn(`Cannot delete locked directory ${__dirname}`)
+    }
+  }
+}
+
+console.log(`Adding TypeScript...`)
+
+addDepsToPackageJson()
+
+changeJsExtensionToTs(path.join(projectRoot, 'src'))
+
+updateSvelteFiles()
+
+updateWebpackConfig()
+
+createTsConfig()
+
+configureVsCode()
+
+// Delete this script, but not during testing
+if (!argv[2]) {
+  deleteThisScript()
+}
+
+console.log('Converted to TypeScript.')
+
+if (fs.existsSync(path.join(projectRoot, 'node_modules'))) {
+  console.log(`
+Next:
+1. run 'npm install' again to install TypeScript dependencies
+`)
+}
--- a/system-tests/projects/svelte-webpack-unconfigured/src/App.svelte
+++ b/system-tests/projects/svelte-webpack-unconfigured/src/App.svelte
@@ -0,0 +1,30 @@
+<script>
+	export let name;
+</script>
+
+<main>
+	<h1>Hello {name}!</h1>
+	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</main>
+
+<style>
+	main {
+		text-align: center;
+		padding: 1em;
+		max-width: 240px;
+		margin: 0 auto;
+	}
+
+	h1 {
+		color: #ff3e00;
+		text-transform: uppercase;
+		font-size: 4em;
+		font-weight: 100;
+	}
+
+	@media (min-width: 640px) {
+		main {
+			max-width: none;
+		}
+	}
+</style>
--- a/system-tests/projects/svelte-webpack-unconfigured/src/global.css
+++ b/system-tests/projects/svelte-webpack-unconfigured/src/global.css
@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}
--- a/system-tests/projects/svelte-webpack-unconfigured/src/main.js
+++ b/system-tests/projects/svelte-webpack-unconfigured/src/main.js
@@ -0,0 +1,12 @@
+import './global.css'
+
+import App from './App.svelte'
+
+const app = new App({
+  target: document.body,
+  props: {
+    name: 'world',
+  },
+})
+
+export default app
--- a/system-tests/projects/svelte-webpack-unconfigured/webpack.config.js
+++ b/system-tests/projects/svelte-webpack-unconfigured/webpack.config.js
@@ -0,0 +1,64 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const path = require('path')
+
+const mode = process.env.NODE_ENV || 'development'
+const prod = mode === 'production'
+
+module.exports = {
+  entry: {
+    'build/bundle': ['./src/main.js'],
+  },
+  resolve: {
+    alias: {
+      svelte: path.dirname(require.resolve('svelte/package.json')),
+    },
+    extensions: ['.mjs', '.js', '.svelte'],
+    mainFields: ['svelte', 'browser', 'module', 'main'],
+  },
+  output: {
+    path: path.join(__dirname, '/public'),
+    filename: '[name].js',
+    chunkFilename: '[name].[id].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            compilerOptions: {
+              dev: !prod,
+            },
+            emitCss: prod,
+            hotReload: !prod,
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
+      },
+      {
+        // required to prevent errors from Svelte on Webpack 5+
+        test: /node_modules\/svelte\/.*\.mjs$/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+    ],
+  },
+  mode,
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
+  devtool: prod ? false : 'source-map',
+  devServer: {
+    hot: true,
+  },
+}
--- a/system-tests/projects/svelte-webpack-unconfigured/yarn.lock
+++ b/system-tests/projects/svelte-webpack-unconfigured/yarn.lock
--- a/system-tests/projects/svelte-webpack/cypress.config.js
+++ b/system-tests/projects/svelte-webpack/cypress.config.js
@@ -0,0 +1,10 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  component: {
+    devServer: {
+      framework: 'svelte',
+      bundler: 'webpack',
+    },
+  },
+})
--- a/system-tests/projects/svelte-webpack/package.json
+++ b/system-tests/projects/svelte-webpack/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "svelte-webpack",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "svelte": "^3.44.0",
+    "svelte-loader": "^3.1.3",
+    "webpack": "^5.74.0",
+    "webpack-dev-server": "^4.10.0"
+  },
+  "projectFixtureDirectory": "svelte"
+}
--- a/system-tests/projects/svelte-webpack/webpack.config.js
+++ b/system-tests/projects/svelte-webpack/webpack.config.js
@@ -0,0 +1,39 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  mode: 'development',
+  entry: './src/main.js',
+  resolve: {
+    extensions: ['.mjs', '.js', '.svelte'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        use: {
+          loader: 'svelte-loader',
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+      {
+        test: /node_modules\/svelte\/.*\.mjs$/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+    }),
+  ],
+  devtool: 'source-map',
+}
--- a/system-tests/projects/svelte-webpack/yarn.lock
+++ b/system-tests/projects/svelte-webpack/yarn.lock
--- a/system-tests/test/component_testing_spec.ts
+++ b/system-tests/test/component_testing_spec.ts
@@ -133,6 +133,20 @@ describe(`Angular CLI major versions`, () => {
  })
 })

+describe('svelte component testing', () => {
+  systemTests.setup()
+
+  for (const bundler of ['webpack', 'vite']) {
+    systemTests.it(`svelte + ${bundler}`, {
+      project: `svelte-${bundler}`,
+      testingType: 'component',
+      spec: '**/*.cy.js',
+      browser: 'chrome',
+      expectedExitCode: 0,
+    })
+  }
+})
+
 describe('experimentalSingleTabRunMode', function () {
  systemTests.setup()

--- a/yarn.lock
+++ b/yarn.lock
@@ -9466,7 +9466,7 @@ babel-extract-comments@^1.0.0:
  dependencies:
    babylon "^6.18.0"

-babel-generator@^6.18.0, babel-generator@^6.26.0:
+babel-generator@^6.26.0:
  version "6.26.1"
  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
  integrity sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==
@@ -10363,7 +10363,7 @@ babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runti
    core-js "^2.4.0"
    regenerator-runtime "^0.11.0"

-babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
+babel-template@^6.24.1, babel-template@^6.26.0:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
  integrity sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=
@@ -10374,7 +10374,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
    babylon "^6.18.0"
    lodash "^4.17.4"

-babel-traverse@^6.18.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
  integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
@@ -10389,7 +10389,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-tr
    invariant "^2.2.2"
    lodash "^4.17.4"

-babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.26.0:
+babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.26.0:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
@@ -15825,11 +15825,6 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==

-estree-walker@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
-  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
-
 estree-walker@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
@@ -20552,11 +20547,6 @@ issue-parser@^6.0.0:
    lodash.isstring "^4.0.1"
    lodash.uniqby "^4.7.0"

-istanbul-lib-coverage@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
-  integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
-
 istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
@@ -20567,19 +20557,6 @@ istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.0.1:
  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
  integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==

-istanbul-lib-instrument@^1.9.1:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
-  integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
-  dependencies:
-    babel-generator "^6.18.0"
-    babel-template "^6.16.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
-    babylon "^6.18.0"
-    istanbul-lib-coverage "^1.2.1"
-    semver "^5.3.0"
-
 istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
@@ -29591,14 +29568,6 @@ rollup-plugin-copy@3.4.0:
    globby "10.0.1"
    is-plain-object "^3.0.0"

-rollup-plugin-istanbul@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-istanbul/-/rollup-plugin-istanbul-2.0.1.tgz#f562d378b4082855ef035e63c04d9ee1bd601c20"
-  integrity sha512-5X1ExH74moFY/pHqCrAZQ0V8RyEMCmrUSuo1t1bDzv9UHTd54s79ALDaK8N87PgNzA6UuKtBVAP/tsaSYzIUVQ==
-  dependencies:
-    istanbul-lib-instrument "^1.9.1"
-    rollup-pluginutils "^2.0.1"
-
 rollup-plugin-node-builtins@^2.1.2:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/rollup-plugin-node-builtins/-/rollup-plugin-node-builtins-2.1.2.tgz#24a1fed4a43257b6b64371d8abc6ce1ab14597e9"
@@ -29627,13 +29596,6 @@ rollup-plugin-typescript2@^0.29.0:
    resolve "1.17.0"
    tslib "2.0.1"

-rollup-pluginutils@^2.0.1:
-  version "2.8.2"
-  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
-  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
-  dependencies:
-    estree-walker "^0.6.1"
-
 rollup@^2.38.5, rollup@^2.75.6:
  version "2.77.0"
  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.0.tgz#749eaa5ac09b6baa52acc076bc46613eddfd53f4"
@@ -31944,6 +31906,11 @@ supports-preserve-symlinks-flag@^1.0.0:
  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

+svelte@^3.49.0:
+  version "3.49.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
+  integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
+
 sver-compat@^1.5.0:
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/sver-compat/-/sver-compat-1.5.0.tgz#3cf87dfeb4d07b4a3f14827bc186b3fd0c645cd8"
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="0.84em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"/><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"/></svg>