svelte.dev v2

.github/ISSUE_TEMPLATE.md

@@ -1,7 +1,7 @@
-------
+---
 Before filing an issue we'd appreciate it if you could take a moment to ensure
 there isn't already an open issue or pull-request.
------
+---
 
 If there's an existing issue, please add a :+1: reaction to the description of
 the issue. One way we prioritize issues is by the number of :+1: reactions on
@@ -23,7 +23,6 @@ as you can including the following.
 - Svelte version (Please check you can reproduce the issue with the latest release!)
 - Whether your project uses Webpack or Rollup
 
-- *Repeatable steps to reproduce the issue*
+- _Repeatable steps to reproduce the issue_
 
-Thanks for being part of Svelte!
--------
+## Thanks for being part of Svelte!

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: "\U0001F41E Bug report"
 description: Report an issue with Svelte
-labels: ["triage: bug"]
+labels: ['triage: bug']
 body:
   - type: markdown
     attributes:
@@ -26,7 +26,7 @@ body:
     id: logs
     attributes:
       label: Logs
-      description: "Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text."
+      description: 'Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.'
       render: shell
   - type: textarea
     id: system-info

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,4 +1,4 @@
-name: "Feature Request"
+name: 'Feature Request'
 description: Request a new Svelte feature
 labels: [enhancement]
 body:

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,10 +3,12 @@
 The Svelte repo is currently in the process of heavy restructuring for Svelte 4. After that, work on Svelte 5 will likely change a lot in the compiler as well. For that reason, please don't open PRs that are large in scope, touch more than a couple of files, etc. In other words, bug fixes are fine, but feature PRs will likely not be merged.
 
 ### Before submitting the PR, please make sure you do the following
+
 - [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
 - [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
 - [ ] This message body should clearly illustrate what problems it solves.
 - [ ] Ideally, include a test that fails without this PR but passes with it.
 
 ### Tests and linting
--  [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint`
+
+- [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint`

.github/workflows/ci.yml

@@ -1,7 +1,7 @@
 name: CI
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
 permissions:
   contents: read # to fetch code (actions/checkout)

CONTRIBUTING.md

@@ -4,8 +4,8 @@ Svelte is a new way to build web applications. It's a compiler that takes your d
 
 The [Open Source Guides](https://opensource.guide/) website has a collection of resources for individuals, communities, and companies. These resources help people who want to learn how to run and contribute to open source projects. Contributors and people new to open source alike will find the following guides especially useful:
 
-* [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
-* [Building Welcoming Communities](https://opensource.guide/building-community/)
+- [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
+- [Building Welcoming Communities](https://opensource.guide/building-community/)
 
 ## Get involved
 

README.md

@@ -52,7 +52,6 @@ pnpm dev
 
 The compiler is written in [TypeScript](https://www.typescriptlang.org/), but don't let that put you off — it's basically just JavaScript with type annotations. You'll pick it up in no time. If you're using an editor other than [Visual Studio Code](https://code.visualstudio.com/), you may need to install a plugin in order to get syntax highlighting and code hints, etc.
 
-
 ### Running Tests
 
 ```bash

action/index.d.ts

@@ -0,0 +1 @@
+export * from '../types/runtime/action/index.js';

action/index.js

@@ -0,0 +1,2 @@
+'use strict';
+

action/index.mjs

@@ -0,0 +1 @@
+

action/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index",
+  "module": "./index.mjs",
+  "types": "./index.d.ts"
+}

animate/index.d.ts

@@ -0,0 +1 @@
+export * from '../types/runtime/animate/index.js';

animate/index.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var easing = require('../easing/index.js');
+var Component = require('../internal/Component-9c4b98a2.js');
+
+/**
+ * @param {Element} node
+ * @param {{ from: DOMRect; to: DOMRect }} fromTo
+ * @param {import('./public.js').FlipParams} params
+ * @returns {import('./public.js').AnimationConfig}
+ */
+function flip(node, { from, to }, params = {}) {
+	const style = getComputedStyle(node);
+	const transform = style.transform === 'none' ? '' : style.transform;
+	const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
+	const dx = from.left + (from.width * ox) / to.width - (to.left + ox);
+	const dy = from.top + (from.height * oy) / to.height - (to.top + oy);
+	const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing: easing$1 = easing.cubicOut } = params;
+	return {
+		delay,
+		duration: Component.is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
+		easing: easing$1,
+		css: (t, u) => {
+			const x = u * dx;
+			const y = u * dy;
+			const sx = t + (u * from.width) / to.width;
+			const sy = t + (u * from.height) / to.height;
+			return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
+		}
+	};
+}
+
+exports.flip = flip;

animate/index.mjs

@@ -0,0 +1,31 @@
+import { cubicOut } from '../easing/index.mjs';
+import { is_function } from '../internal/Component-cd97939e.mjs';
+
+/**
+ * @param {Element} node
+ * @param {{ from: DOMRect; to: DOMRect }} fromTo
+ * @param {import('./public.js').FlipParams} params
+ * @returns {import('./public.js').AnimationConfig}
+ */
+function flip(node, { from, to }, params = {}) {
+	const style = getComputedStyle(node);
+	const transform = style.transform === 'none' ? '' : style.transform;
+	const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
+	const dx = from.left + (from.width * ox) / to.width - (to.left + ox);
+	const dy = from.top + (from.height * oy) / to.height - (to.top + oy);
+	const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
+	return {
+		delay,
+		duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
+		easing,
+		css: (t, u) => {
+			const x = u * dx;
+			const y = u * dy;
+			const sx = t + (u * from.width) / to.width;
+			const sy = t + (u * from.height) / to.height;
+			return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
+		}
+	};
+}
+
+export { flip };

animate/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index",
+  "module": "./index.mjs",
+  "types": "./index.d.ts"
+}

documentation/blog/2016-11-26-frameworks-without-the-framework.md

@@ -0,0 +1,51 @@
+---
+title: "Frameworks without the framework: why didn't we think of this sooner?"
+description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+> Wait, this new framework has a _runtime_? Ugh. Thanks, I'll pass.
+> **– front end developers in 2018**
+
+We're shipping too much code to our users. Like a lot of front end developers, I've been in denial about that fact, thinking that it was fine to serve 100kb of JavaScript on page load – just use [one less .jpg!](https://twitter.com/miketaylr/status/227056824275333120) – and that what _really_ mattered was performance once your app was already interactive.
+
+But I was wrong. 100kb of .js isn't equivalent to 100kb of .jpg. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.
+
+If you're not convinced that this is a problem, follow [Alex Russell](https://twitter.com/slightlylate) on Twitter. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing.
+
+Perhaps we need to rethink the whole thing.
+
+## What problem do frameworks _really_ solve?
+
+The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that's not really true. At best, frameworks _move the complexity around_, away from code that you had to write and into code you didn't.
+
+Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your _concepts_. Frameworks are primarily a tool for structuring your thoughts, not your code.
+
+Given that, what if the framework _didn't actually run in the browser_? What if, instead, it converted your application into pure vanilla JavaScript, just like Babel converts ES2016+ to ES5? You'd pay no upfront cost of shipping a hefty runtime, and your app would get seriously fast, because there'd be no layers of abstraction between your app and the browser.
+
+## Introducing Svelte
+
+Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](https://v2.svelte.dev/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible.
+
+The [Svelte implementation of TodoMVC](https://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM _without any app code_ weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
+
+And once your app _is_ up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
+
+It's basically as fast as vanilla JS, which makes sense because it _is_ vanilla JS – just vanilla JS that you didn't have to write.
+
+## But that's not the important thing
+
+Well, it _is_ important – performance matters a great deal. What's really exciting about this approach, though, is that we can finally solve some of the thorniest problems in web development.
+
+Consider interoperability. Want to `npm install cool-calendar-widget` and use it in your app? Previously, you could only do that if you were already using (a correct version of) the framework that the widget was designed for – if `cool-calendar-widget` was built in React and you're using Angular then, well, hard cheese. But if the widget author used Svelte, apps that use it can be built using whatever technology you like. (On the TODO list: a way to convert Svelte components into web components.)
+
+Or [code splitting](https://twitter.com/samccone/status/797528710085652480). It's a great idea (only load the code the user needs for the initial view, then get the rest later), but there's a problem – even if you only initially serve one React component instead of 100, _you still have to serve React itself_. With Svelte, code splitting can be much more effective, because the framework is embedded in the component, and the component is tiny.
+
+Finally, something I've wrestled with a great deal as an open source maintainer: your users always want _their_ features prioritised, and underestimate the cost of those features to people who don't need them. A framework author must always balance the long-term health of the project with the desire to meet their users' needs. That's incredibly difficult, because it's hard to anticipate – much less articulate – the consequences of incremental bloat, and it takes serious soft skills to tell people (who may have been enthusiastically evangelising your tool up to that point) that their feature isn't important enough. But with an approach like Svelte's, many features can be added with absolutely no cost to people who don't use them, because the code that implements those features just doesn't get generated by the compiler if it's unnecessary.
+
+## We're just getting started
+
+Svelte is very new. There's a lot of work still left to do – creating build tool integrations, adding a server-side renderer, hot reloading, transitions, more documentation and examples, starter kits, and so on.
+
+But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](https://v2.svelte.dev/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development.

documentation/blog/2017-08-07-the-easiest-way-to-get-started.md

@@ -0,0 +1,65 @@
+---
+title: The easiest way to get started with Svelte
+description: This'll only take a minute.
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+Svelte is a [new kind of framework](/blog/frameworks-without-the-framework). Rather than putting a `<script src='svelte.js'>` tag on the page, or bringing it into your app with `import` or `require`, Svelte is a compiler that works behind the scenes to turn your component files into beautifully optimised JavaScript.
+
+Because of that, getting started with it can be a little bit confusing at first. How, you might reasonably ask, do you make a Svelte app?
+
+## 1. Use the REPL
+
+The [Svelte REPL](/repl) (Read-Eval-Print Loop) is the easiest way to begin. This is an interactive environment that allows you to modify code and instantly see the result.
+
+You can choose from a list of [examples](/examples/), click the [REPL](/repl) link, and then tweak them until they do what you want.
+
+<aside><p>You'll need to have <a href="https://nodejs.org/">Node.js</a> installed, and know how to use the terminal</p></aside>
+
+At some point, your app will outgrow the REPL. Click the **download** button to save a `svelte-app.zip` file to your computer and uncompress it.
+
+Open a terminal window and set the project up...
+
+```bash
+cd /path/to/svelte-app
+npm install
+```
+
+...then start up a development server:
+
+```bash
+npm run dev
+```
+
+This will serve your app on [localhost:8080](http://localhost:8080) and rebuild it with [Rollup](https://rollupjs.org) every time you make a change to the files in `svelte-app/src`.
+
+## 2. Use degit
+
+When you download from the REPL, you're getting a customised version of the [sveltejs/template](https://github.com/sveltejs/template) repo. You can skip messing around with zip files by using [degit](https://github.com/Rich-Harris/degit), a project scaffolding tool.
+
+In the terminal, you can instantly create a new project like so:
+
+```bash
+npx degit sveltejs/template my-svelte-project
+cd my-svelte-project
+# to use TypeScript run:
+# node scripts/setupTypeScript.js
+
+npm install
+npm run dev
+```
+
+This will create a new project in the `my-svelte-project` directory, install its dependencies, and start a server on http://localhost:8080.
+
+You can find more information about using TypeScript [here](/blog/svelte-and-typescript).
+
+Once you've tinkered a bit and understood how everything fits together, you can fork [sveltejs/template](https://github.com/sveltejs/template) and start doing this instead:
+
+```bash
+npx degit your-name/template my-new-project
+```
+
+And that's it! Do `npm run build` to create a production-ready version of your app, and check the project template's [README](https://github.com/sveltejs/template/blob/master/README.md) for instructions on how to easily deploy your app to the web with [Vercel](https://vercel.com) or [Surge](http://surge.sh/).
+
+You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) (Update from 2019: with Svelte 3 the CLI was deprecated and we now use [sirv-cli](https://www.npmjs.com/package/sirv-cli) in our template. Feel free to use whatever tool you like!) or the [API](https://github.com/sveltejs/svelte/tree/v2#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](https://svelte.dev/chat), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!