Merge branch 'master' into pr/5079

.github/workflows/ci.yml

@@ -3,6 +3,7 @@ on: [push, pull_request]
 jobs:
   Tests:
     runs-on: ${{ matrix.os }}
+    timeout-minutes: 6
     strategy:
       matrix:
         node-version: [8, 10, 12, 14]
@@ -18,12 +19,14 @@ jobs:
         CI: true
   Lint:
     runs-on: ubuntu-latest
+    timeout-minutes: 2
     steps:
     - uses: actions/checkout@v1
     - uses: actions/setup-node@v1
     - run: 'npm i && npm run lint'
   Unit:
     runs-on: ${{ matrix.os }}
+    timeout-minutes: 3
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macOS-latest]

CHANGELOG.md

@@ -12,6 +12,8 @@
 * Update `<select>` with one-way `value` binding when the available `<option>`s change ([#5051](https://github.com/sveltejs/svelte/issues/5051))
 * Fix published `tweened` types so the `.set()` and `.update()` options are optional ([#5062](https://github.com/sveltejs/svelte/issues/5062))
 * Fix contextual `bind:this` inside `{#each}` block ([#5067](https://github.com/sveltejs/svelte/issues/5067))
+* Preprocess self-closing `<script>` and `<style>` tags ([#5080](https://github.com/sveltejs/svelte/issues/5080))
+* Fix types for animation- and transition-related param objects so each param is optional ([#5083](https://github.com/sveltejs/svelte/pull/5083))
 
 ## 3.23.2
 

site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md

@@ -57,7 +57,7 @@ What about a more 'real world' example? Conveniently, the [RealWorld](https://gi
 
 <aside><p>Code-splitting isn't free — if the reference implementation used code-splitting, it would be larger still</p></aside>
 
-The entire app costs 132.7kb (39.9kb zipped), which is significantly smaller than the reference React/Redux implementation at 327kb (85.7kb), but even if was as large it would *feel* faster because of code-splitting. And that's a crucial point. We're told we need to code-split our apps, but if your app uses a traditional framework like React or Vue then there's a hard lower bound on the size of your initial code-split chunk — the framework itself, which is likely to be a significant portion of your total app size. With the Svelte approach, that's no longer the case.
+The entire app costs 132.7kb (39.9kb zipped), which is significantly smaller than the reference React/Redux implementation at 327kb (85.7kb), but even if it was as large it would *feel* faster because of code-splitting. And that's a crucial point. We're told we need to code-split our apps, but if your app uses a traditional framework like React or Vue then there's a hard lower bound on the size of your initial code-split chunk — the framework itself, which is likely to be a significant portion of your total app size. With the Svelte approach, that's no longer the case.
 
 But size is only part of the story. Svelte apps are also extremely performant and memory-efficient, and the framework includes powerful features that you would sacrifice if you chose a 'minimal' or 'simple' UI library.
 

site/content/faq/400-how-can-i-get-syntax-highlighting.md

@@ -2,4 +2,4 @@
 question: How can I get VS Code to syntax-highlight my .svelte files?
 ---
 
-There is an [official VSCode extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), however it is still in the **beta** testing stage, and not all issues have been ironed out.
+There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).

site/content/faq/500-what-about-typescript-support.md

@@ -1,10 +1,11 @@
 ---
-question: What about Typescript support?
+question: What about TypeScript support?
 ---
 
-You need to install a preprocessor such as [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). Work is ongoing to improve [IDE support](https://github.com/sveltejs/language-tools/issues/83). You can also run type checking from the command line with [svelte-check](https://www.npmjs.com/package/svelte-check).
+You need to install a preprocessor such as [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). You can run type checking from the command line with [svelte-check](https://www.npmjs.com/package/svelte-check).
+
+To declare the type of a reactive variable in a Svelte template, you should use the following syntax:
 
-To declare the type of a reactive variable in a Svelte template, you can use the following syntax:
 ```
 let x: number;
 $: x = count + 1;

site/package-lock.json

@@ -1281,9 +1281,9 @@
       }
     },
     "@sveltejs/site-kit": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.1.5.tgz",
-      "integrity": "sha512-Rs2quQ/H00DAN/ZTFa+unLefL335UW3Yo4I2rTocW5JwW73Kvi5++d7BcY8LsjhMCbG1PkwQmJE2RVrIIxQcOw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.2.0.tgz",
+      "integrity": "sha512-C7puq+1so3fKPPZAnQJQlKfyCG6FsnSSFSS2LRIhWD8VK2FL5j8Eq7DIKSxUvWbGw1AsxnzO3dIHJWPB7fwjKg==",
       "dev": true,
       "requires": {
         "@sindresorhus/slugify": "^0.9.1",
@@ -1291,9 +1291,9 @@
       }
     },
     "@sveltejs/svelte-repl": {
-      "version": "0.1.19",
-      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.1.19.tgz",
-      "integrity": "sha512-35R94X6uYgy6PHLQnQCsKcZ4zb6rGGQXjBYqjuCkoCykIlSLx8/avq6BGqudmE5pzVWDP3kk4063cHgccy1xYg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.2.0.tgz",
+      "integrity": "sha512-2vLQnOVrsmn2d2K4a6urGm8OulGGSPhZCGNySSb1H8nOPsgKrdcTt5qoaxNYXgcyVp55Yow2SvXYXsyJKd4KEQ==",
       "dev": true,
       "requires": {
         "codemirror": "^5.49.2",
@@ -1601,9 +1601,9 @@
       "dev": true
     },
     "codemirror": {
-      "version": "5.53.2",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.53.2.tgz",
-      "integrity": "sha512-wvSQKS4E+P8Fxn/AQ+tQtJnF1qH5UOlxtugFLpubEZ5jcdH2iXTVinb+Xc/4QjshuOxRm4fUsU2QPF1JJKiyXA==",
+      "version": "5.55.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.55.0.tgz",
+      "integrity": "sha512-TumikSANlwiGkdF/Blnu/rqovZ0Y3Jh8yy9TqrPbSM0xxSucq3RgnpVDQ+mD9q6JERJEIT2FMuF/fBGfkhIR/g==",
       "dev": true
     },
     "color-convert": {

site/package.json

@@ -36,8 +36,8 @@
     "@babel/preset-env": "^7.6.0",
     "@babel/runtime": "^7.6.0",
     "@sindresorhus/slugify": "^0.9.1",
-    "@sveltejs/site-kit": "^1.1.5",
-    "@sveltejs/svelte-repl": "^0.1.19",
+    "@sveltejs/site-kit": "^1.2.0",
+    "@sveltejs/svelte-repl": "^0.2.0",
     "degit": "^2.1.4",
     "dotenv": "^8.1.0",
     "esm": "^3.2.25",

site/src/routes/docs/_sections.js

@@ -85,7 +85,7 @@ export default function() {
 			renderer.heading = (text, level, rawtext) => {
 				let slug;
 
-				const match = /<a href="([^"]+)">(.+)<\/a>/.exec(text);
+				const match = /<a href="([^"]+)"[^>]*>(.+)<\/a>/.exec(text);
 				if (match) {
 					slug = match[1];
 					text = match[2];

src/compiler/preprocess/index.ts

@@ -94,8 +94,8 @@ export default async function preprocess(
 	for (const fn of script) {
 		source = await replace_async(
 			source,
-			/<!--[^]*?-->|<script(\s[^]*?)?>([^]*?)<\/script>/gi,
-			async (match, attributes = '', content) => {
+			/<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi,
+			async (match, attributes = '', content = '') => {
 				if (!attributes && !content) {
 					return match;
 				}
@@ -114,8 +114,8 @@ export default async function preprocess(
 	for (const fn of style) {
 		source = await replace_async(
 			source,
-			/<!--[^]*?-->|<style(\s[^]*?)?>([^]*?)<\/style>/gi,
-			async (match, attributes = '', content) => {
+			/<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi,
+			async (match, attributes = '', content = '') => {
 				if (!attributes && !content) {
 					return match;
 				}

src/runtime/animate/index.ts

@@ -11,9 +11,9 @@ export interface AnimationConfig {
 }
 
 interface FlipParams {
-	delay: number;
-	duration: number | ((len: number) => number);
-	easing: (t: number) => number;
+	delay?: number;
+	duration?: number | ((len: number) => number);
+	easing?: (t: number) => number;
 }
 
 export function flip(node: Element, animation: { from: DOMRect; to: DOMRect }, params: FlipParams): AnimationConfig {

src/runtime/transition/index.ts

@@ -12,11 +12,11 @@ export interface TransitionConfig {
 }
 
 interface BlurParams {
-	delay: number;
-	duration: number;
+	delay?: number;
+	duration?: number;
 	easing?: EasingFunction;
-	amount: number;
-	opacity: number;
+	amount?: number;
+	opacity?: number;
 }
 
 export function blur(node: Element, {
@@ -41,9 +41,9 @@ export function blur(node: Element, {
 }
 
 interface FadeParams {
-	delay: number;
-	duration: number;
-	easing: EasingFunction;
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
 }
 
 export function fade(node: Element, {
@@ -62,12 +62,12 @@ export function fade(node: Element, {
 }
 
 interface FlyParams {
-	delay: number;
-	duration: number;
-	easing: EasingFunction;
-	x: number;
-	y: number;
-	opacity: number;
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	x?: number;
+	y?: number;
+	opacity?: number;
 }
 
 export function fly(node: Element, {
@@ -95,9 +95,9 @@ export function fly(node: Element, {
 }
 
 interface SlideParams {
-	delay: number;
-	duration: number;
-	easing: EasingFunction;
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
 }
 
 export function slide(node: Element, {
@@ -133,11 +133,11 @@ export function slide(node: Element, {
 }
 
 interface ScaleParams {
-	delay: number;
-	duration: number;
-	easing: EasingFunction;
-	start: number;
-	opacity: number;
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	start?: number;
+	opacity?: number;
 }
 
 export function scale(node: Element, {
@@ -166,10 +166,10 @@ export function scale(node: Element, {
 }
 
 interface DrawParams {
-	delay: number;
-	speed: number;
-	duration: number | ((len: number) => number);
-	easing: EasingFunction;
+	delay?: number;
+	speed?: number;
+	duration?: number | ((len: number) => number);
+	easing?: EasingFunction;
 }
 
 export function draw(node: SVGElement & { getTotalLength(): number }, {
@@ -199,9 +199,9 @@ export function draw(node: SVGElement & { getTotalLength(): number }, {
 }
 
 interface CrossfadeParams {
-	delay: number;
-	duration: number | ((len: number) => number);
-	easing: EasingFunction;
+	delay?: number;
+	duration?: number | ((len: number) => number);
+	easing?: EasingFunction;
 }
 
 type ClientRectMap = Map<any, { rect: ClientRect }>;

test/preprocess/samples/script-self-closing/_config.js

@@ -0,0 +1,12 @@
+import * as assert from "assert";
+
+export default {
+	preprocess: {
+		script: ({ content, attributes }) => {
+			assert.equal(content, "");
+			return {
+				code: `console.log("${attributes["the-answer"]}");`
+			};
+		}
+	}
+};

test/preprocess/samples/script-self-closing/input.svelte

@@ -0,0 +1 @@
+<script the-answer="42"/>

test/preprocess/samples/script-self-closing/output.svelte

@@ -0,0 +1 @@
+<script the-answer="42">console.log("42");</script>

test/preprocess/samples/style-self-closing/_config.js

@@ -0,0 +1,12 @@
+import * as assert from "assert";
+
+export default {
+	preprocess: {
+		style: ({ content, attributes: { color } }) => {
+			assert.equal(content, "");
+			return {
+				code: `div { color: ${color}; }`
+			};
+		}
+	}
+};

test/preprocess/samples/style-self-closing/input.svelte

@@ -0,0 +1,3 @@
+<div class='brand-color'>$brand</div>
+
+<style color="red"/>

test/preprocess/samples/style-self-closing/output.svelte

@@ -0,0 +1,3 @@
+<div class='brand-color'>$brand</div>
+
+<style color="red">div { color: red; }</style>