From caca8a53401e975d23672255393dd778a58a48ff Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Sun, 16 Oct 2022 13:55:23 +0900 Subject: [PATCH 001/125] [chore] Improve CI (#7945) * stop to use cache * update on.push.branches * rename --- .github/workflows/ci.yml | 35 ++++++++++++++--------------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e878e8eb02..948f5d3bac 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,5 +1,8 @@ name: CI -on: [push, pull_request] +on: + push: + branches: [ master ] + pull_request: permissions: contents: read # to fetch code (actions/checkout) jobs: @@ -9,8 +12,8 @@ jobs: matrix: os: [ubuntu-latest, windows-latest, macOS-latest] steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 16 cache: npm @@ -20,11 +23,11 @@ jobs: - run: npm run build env: PUBLISH: true - - uses: actions/cache@v3 + - name: Upload build assets + id: upload-artifact + uses: actions/upload-artifact@v3 with: - # cache key based on OS as the full path for each OS may be different - # and windows is not able to reuse the cache from ubuntu - key: output-${{ github.run_id }}-${{ matrix.os }} + name: build-assets path: | index.* compiler.* @@ -51,21 +54,11 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: npm - - uses: actions/cache@v3 + - name: Download build assets + uses: actions/download-artifact@v3 + id: download-artifact with: - key: output-${{ github.run_id }}-${{ matrix.os }} - path: | - index.* - compiler.* - ssr.* - action/ - animate/ - easing/ - internal/ - motion/ - store/ - transition/ - types/ + name: build-assets - run: npm install env: SKIP_PREPARE: true From 1de2c025350511c4be27a784d7a295b17727692f Mon Sep 17 00:00:00 2001 From: Yuri Date: Sun, 16 Oct 2022 04:25:39 -0400 Subject: [PATCH 002/125] Ensure onmouseleave event fires in Hoverable example (#7873) Fixes the browser-quirk-related issue described in #6520 and #7867, based on a [suggestion](https://github.com/sveltejs/svelte/issues/7867#issuecomment-1248993436) by @Prinzhorn. Tested in the editable example area on the Svelte site: https://svelte.dev/examples/slot-props --- .../examples/15-composition/03-slot-props/App.svelte | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/site/content/examples/15-composition/03-slot-props/App.svelte b/site/content/examples/15-composition/03-slot-props/App.svelte index 299cd336a6..5525867932 100644 --- a/site/content/examples/15-composition/03-slot-props/App.svelte +++ b/site/content/examples/15-composition/03-slot-props/App.svelte @@ -43,4 +43,8 @@ background-color: #ff3e00; color: white; } - \ No newline at end of file + + p { + pointer-events: none; + } + From 8921c04a21e60bf6773cded17e79fde016c1018a Mon Sep 17 00:00:00 2001 From: Sid Date: Sun, 16 Oct 2022 14:28:34 +0530 Subject: [PATCH 003/125] [chore] Upgrade css-tree version to 2.1.0 (#7572) * chore: upgrade to css-tree major version * fix: handle whitespace token for new ast * fix: css syntax error * remove @types/css-tree * import css-tree/parser instead of file path import Co-authored-by: tanhauhau --- package-lock.json | 181 ++++++++++++++++------- package.json | 4 +- src/compiler/compile/css/Selector.ts | 2 +- src/compiler/parse/read/style.ts | 3 +- test/parser/samples/error-css/error.json | 2 +- 5 files changed, 133 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index cc2e097814..1e4763cac4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@ampproject/remapping": "^0.3.0", "@rollup/plugin-commonjs": "^11.0.0", "@rollup/plugin-json": "^4.0.1", - "@rollup/plugin-node-resolve": "^6.0.0", + "@rollup/plugin-node-resolve": "^11.2.1", "@rollup/plugin-replace": "^2.3.0", "@rollup/plugin-sucrase": "^3.1.0", "@rollup/plugin-typescript": "^2.0.1", @@ -28,7 +28,7 @@ "aria-query": "^5.0.0", "axobject-query": "^3.0.1", "code-red": "^0.2.5", - "css-tree": "^1.1.2", + "css-tree": "^2.1.0", "eslint": "^8.0.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-svelte3": "^4.0.0", @@ -209,21 +209,54 @@ } }, "node_modules/@rollup/plugin-node-resolve": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-6.0.0.tgz", - "integrity": "sha512-GqWz1CfXOsqpeVMcoM315+O7zMxpRsmhWyhJoxLFHVSp9S64/u02i7len/FnbTNbmgYs+sZyilasijH8UiuboQ==", + "version": "11.2.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz", + "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==", "dev": true, "dependencies": { - "@rollup/pluginutils": "^3.0.0", - "@types/resolve": "0.0.8", + "@rollup/pluginutils": "^3.1.0", + "@types/resolve": "1.17.1", "builtin-modules": "^3.1.0", + "deepmerge": "^4.2.2", "is-module": "^1.0.0", - "resolve": "^1.11.1" + "resolve": "^1.19.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0" + } + }, + "node_modules/@rollup/plugin-node-resolve/node_modules/@rollup/pluginutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", + "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", + "dev": true, + "dependencies": { + "@types/estree": "0.0.39", + "estree-walker": "^1.0.1", + "picomatch": "^2.2.2" }, "engines": { "node": ">= 8.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0" } }, + "node_modules/@rollup/plugin-node-resolve/node_modules/@types/estree": { + "version": "0.0.39", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", + "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "dev": true + }, + "node_modules/@rollup/plugin-node-resolve/node_modules/estree-walker": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", + "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", + "dev": true + }, "node_modules/@rollup/plugin-replace": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.0.tgz", @@ -331,9 +364,9 @@ "dev": true }, "node_modules/@types/resolve": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", - "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==", + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", + "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", "dev": true, "dependencies": { "@types/node": "*" @@ -1077,25 +1110,17 @@ "dev": true }, "node_modules/css-tree": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz", - "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", "dev": true, "dependencies": { - "mdn-data": "2.0.14", - "source-map": "^0.6.1" + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" }, "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/css-tree/node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "engines": { - "node": ">=0.10.0" + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" } }, "node_modules/cssom": { @@ -1177,6 +1202,15 @@ "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=", "dev": true }, + "node_modules/deepmerge": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", + "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/define-properties": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", @@ -3108,9 +3142,9 @@ } }, "node_modules/mdn-data": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", - "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", "dev": true }, "node_modules/merge2": { @@ -4055,6 +4089,15 @@ "node": ">= 8" } }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-support": { "version": "0.5.13", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz", @@ -4884,16 +4927,42 @@ } }, "@rollup/plugin-node-resolve": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-6.0.0.tgz", - "integrity": "sha512-GqWz1CfXOsqpeVMcoM315+O7zMxpRsmhWyhJoxLFHVSp9S64/u02i7len/FnbTNbmgYs+sZyilasijH8UiuboQ==", + "version": "11.2.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz", + "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==", "dev": true, "requires": { - "@rollup/pluginutils": "^3.0.0", - "@types/resolve": "0.0.8", + "@rollup/pluginutils": "^3.1.0", + "@types/resolve": "1.17.1", "builtin-modules": "^3.1.0", + "deepmerge": "^4.2.2", "is-module": "^1.0.0", - "resolve": "^1.11.1" + "resolve": "^1.19.0" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", + "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", + "dev": true, + "requires": { + "@types/estree": "0.0.39", + "estree-walker": "^1.0.1", + "picomatch": "^2.2.2" + } + }, + "@types/estree": { + "version": "0.0.39", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", + "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "dev": true + }, + "estree-walker": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", + "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", + "dev": true + } } }, "@rollup/plugin-replace": { @@ -4997,9 +5066,9 @@ "dev": true }, "@types/resolve": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", - "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==", + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", + "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", "dev": true, "requires": { "@types/node": "*" @@ -5545,21 +5614,13 @@ "dev": true }, "css-tree": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz", - "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", "dev": true, "requires": { - "mdn-data": "2.0.14", - "source-map": "^0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" } }, "cssom": { @@ -5626,6 +5687,12 @@ "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=", "dev": true }, + "deepmerge": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", + "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==", + "dev": true + }, "define-properties": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", @@ -7103,9 +7170,9 @@ } }, "mdn-data": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", - "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", "dev": true }, "merge2": { @@ -7837,6 +7904,12 @@ "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", "dev": true }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true + }, "source-map-support": { "version": "0.5.13", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz", diff --git a/package.json b/package.json index 30afca4209..245c9b1834 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "@ampproject/remapping": "^0.3.0", "@rollup/plugin-commonjs": "^11.0.0", "@rollup/plugin-json": "^4.0.1", - "@rollup/plugin-node-resolve": "^6.0.0", + "@rollup/plugin-node-resolve": "^11.2.1", "@rollup/plugin-replace": "^2.3.0", "@rollup/plugin-sucrase": "^3.1.0", "@rollup/plugin-typescript": "^2.0.1", @@ -134,7 +134,7 @@ "aria-query": "^5.0.0", "axobject-query": "^3.0.1", "code-red": "^0.2.5", - "css-tree": "^1.1.2", + "css-tree": "^2.1.0", "eslint": "^8.0.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-svelte3": "^4.0.0", diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index 28cf5ba6af..07e2dc439e 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -212,7 +212,7 @@ function apply_selector(blocks: Block[], node: Element, to_encapsulate: Array<{ } if (block.combinator) { - if (block.combinator.type === 'WhiteSpace') { + if (block.combinator.type === 'Combinator' && block.combinator.name === ' ') { for (const ancestor_block of blocks) { if (ancestor_block.global) { continue; diff --git a/src/compiler/parse/read/style.ts b/src/compiler/parse/read/style.ts index 1e21dddc67..d7ba83c6e5 100644 --- a/src/compiler/parse/read/style.ts +++ b/src/compiler/parse/read/style.ts @@ -1,4 +1,5 @@ -import parse from 'css-tree/lib/parser/index.js'; +// @ts-ignore +import parse from 'css-tree/parser'; import { walk } from 'estree-walker'; import { Parser } from '../index'; import { Node } from 'estree'; diff --git a/test/parser/samples/error-css/error.json b/test/parser/samples/error-css/error.json index 90f7a091d2..78bea3030c 100644 --- a/test/parser/samples/error-css/error.json +++ b/test/parser/samples/error-css/error.json @@ -1,6 +1,6 @@ { "code": "css-syntax-error", - "message": "LeftCurlyBracket is expected", + "message": "\"{\" is expected", "start": { "line": 2, "column": 16, From f9e5b3e995a488ff5ef21b4258a5954ea6667dbf Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Sun, 16 Oct 2022 17:01:12 +0800 Subject: [PATCH 004/125] Update CHANGELOG.md --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 41eebe64d1..cc41f14a88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Svelte changelog +## Unreleased +* Upgraded `css-tree` to `2.1.0` ([#7572](https://github.com/sveltejs/svelte/pull/7572)) + ## 3.52.0 * Throw compile-time error when attempting to update `const` variable ([#4895](https://github.com/sveltejs/svelte/issues/4895)) From 0a7cf0e73e386e46a692e06d540703c435d4d003 Mon Sep 17 00:00:00 2001 From: Josiah Nieves <23145687+jtn7@users.noreply.github.com> Date: Sun, 16 Oct 2022 22:45:03 -0400 Subject: [PATCH 005/125] [docs] fix typo "bellow" vs "below" (#7955) --- site/content/docs/02-component-format.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/02-component-format.md b/site/content/docs/02-component-format.md index 5212b001ac..268444ab7d 100644 --- a/site/content/docs/02-component-format.md +++ b/site/content/docs/02-component-format.md @@ -209,7 +209,7 @@ It is important to note that the reactive blocks are ordered via simple static a ``` -Moving the line `$: yDependent = y` bellow `$: setY(x)` will cause `yDependent` to be updated when `x` is updated. +Moving the line `$: yDependent = y` below `$: setY(x)` will cause `yDependent` to be updated when `x` is updated. --- From 146e7a6310627d4599bb60760d573dffa5d1d2ce Mon Sep 17 00:00:00 2001 From: Neagu Mihai <74415486+devneagu@users.noreply.github.com> Date: Thu, 20 Oct 2022 21:04:35 +0300 Subject: [PATCH 006/125] fix: Remove Security Message (#7959) --- site/content/examples/03-logic/03-each-blocks/App.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/examples/03-logic/03-each-blocks/App.svelte b/site/content/examples/03-logic/03-each-blocks/App.svelte index 3ecbe5ca2f..7d08b79ab8 100644 --- a/site/content/examples/03-logic/03-each-blocks/App.svelte +++ b/site/content/examples/03-logic/03-each-blocks/App.svelte @@ -11,7 +11,7 @@
    {#each cats as { id, name }, i}
  • - + {i + 1}: {name}
    • From b265bc6f0fb4d981827fc1dbb89185076a9f3885 Mon Sep 17 00:00:00 2001 From: Josh Soref <2119212+jsoref@users.noreply.github.com> Date: Thu, 27 Oct 2022 11:09:18 -0400 Subject: [PATCH 007/125] [chore] fix spelling and typos (#7974) --- CHANGELOG.md | 2 +- .../blog/2020-10-01-whats-new-in-svelte-october-2020.md | 4 ++-- .../blog/2021-02-01-whats-new-in-svelte-february-2021.md | 2 +- .../blog/2021-07-01-whats-new-in-svelte-july-2021.md | 2 +- .../blog/2021-08-01-whats-new-in-svelte-august-2021.md | 2 +- .../blog/2021-10-01-whats-new-in-svelte-october-2021.md | 2 +- .../blog/2021-11-01-whats-new-in-svelte-november-2021.md | 2 +- .../blog/2022-02-01-whats-new-in-svelte-february-2022.md | 2 +- .../blog/2022-06-01-whats-new-in-svelte-june-2022.md | 2 +- .../blog/2022-07-01-whats-new-in-svelte-july-2022.md | 6 +++--- .../blog/2022-10-01-whats-new-in-svelte-october-2022.md | 2 +- .../examples/05-bindings/02-checkbox-inputs/App.svelte | 2 +- ...at.md => 425-is-there-a-tool-to-automatically-format.md} | 0 site/content/tutorial/01-introduction/01-basics/text.md | 2 +- .../06-bindings/03-checkbox-inputs/app-a/App.svelte | 2 +- .../06-bindings/03-checkbox-inputs/app-b/App.svelte | 2 +- src/compiler/compile/compiler_warnings.ts | 2 +- src/compiler/compile/nodes/Element.ts | 2 +- src/runtime/internal/dom.ts | 2 +- test/runtime/samples/binding-this-with-context/_config.js | 4 ++-- .../samples/each-block-dynamic-else-static/_config.js | 2 +- .../_config.js | 0 .../main.svelte | 0 test/runtime/samples/spread-element-input-value/_config.js | 2 +- .../samples/a11y-aria-proptypes-token/input.svelte | 2 +- .../samples/a11y-aria-proptypes-tokenlist/input.svelte | 4 ++-- .../samples/rest-eachblock-binding-2/warnings.json | 2 +- .../samples/rest-eachblock-binding-3/warnings.json | 2 +- test/validator/samples/rest-eachblock-binding/warnings.json | 2 +- 29 files changed, 31 insertions(+), 31 deletions(-) rename site/content/faq/{425-is-there-a-tool-to-automaticly-format.md => 425-is-there-a-tool-to-automatically-format.md} (100%) rename test/runtime/samples/{each-block-keyed-dyanmic-key => each-block-keyed-dynamic-key}/_config.js (100%) rename test/runtime/samples/{each-block-keyed-dyanmic-key => each-block-keyed-dynamic-key}/main.svelte (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index cc41f14a88..606645a7b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1204,7 +1204,7 @@ Also: ## 2.12.0 * Initialise actions on mount rather than hydrate ([#1653](https://github.com/sveltejs/svelte/pull/1653)) -* Allow non-existent components to be destroyed ([#1677](https://github.com/sveltejs/svelte/pull/1677)) +* Allow nonexistent components to be destroyed ([#1677](https://github.com/sveltejs/svelte/pull/1677)) * Pass AMD ID from CLI correctly ([#1672](https://github.com/sveltejs/svelte/pull/1672)) * Minor AST tweaks ([#1673](https://github.com/sveltejs/svelte/pull/1673), [#1674](https://github.com/sveltejs/svelte/pull/1674)) * Reduce code duplication in component initialisation ([#1670](https://github.com/sveltejs/svelte/pull/1670)) diff --git a/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md index ba2ee80caf..d9617ec917 100644 --- a/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md +++ b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md @@ -12,7 +12,7 @@ Welcome to the first edition of our "What's new in Svelte" series! We'll try to 2. `_` is now supported as a "numerical separator", similar to a `.` or `,` ([Example](https://svelte.dev/repl/844c39e91d1248649fe54af839fab570?version=3.26.0), **3.26.0**) 3. `import.meta` now works in template expressions ([Example](https://svelte.dev/repl/9630de41957a4c80a4fce264360a6bc7?version=3.26.0), **3.26.0**) 4. CSS Selectors with `~` and `+` combinators are now supported ([Example](https://svelte.dev/repl/91ad9257d2d1430185a504a18cc60172?version=3.29.0), **3.27.0**, with a compiler fix in **3.29.0**) -5. The `{#key}` block is now available to key arbitrary content on an expression. Whever the expression changes, the contents inside the `{#key}` block will be destroyed and recreated. For an in-depth explanation and to find out how it's implemented, check out the [new blog post](https://lihautan.com/contributing-to-svelte-implement-key-block/) of Svelte Team member Tan Li Hau. ([More info](https://github.com/sveltejs/svelte/issues/1469), **3.29.0**) +5. The `{#key}` block is now available to key arbitrary content on an expression. Whenever the expression changes, the contents inside the `{#key}` block will be destroyed and recreated. For an in-depth explanation and to find out how it's implemented, check out the [new blog post](https://lihautan.com/contributing-to-svelte-implement-key-block/) of Svelte Team member Tan Li Hau. ([More info](https://github.com/sveltejs/svelte/issues/1469), **3.29.0**) 6. Slots can now be forwarded through child components! This used to only be possible by adding extra wrapper `
    `s ([More info](https://github.com/sveltejs/svelte/issues/2079), **3.29.0**) 7. When using TypeScript, you can now type the `createEventDispatcher` method: ```html @@ -53,7 +53,7 @@ For all the features and bugfixes see the CHANGELOG for [Svelte](https://github. ## Svelte Showcase - [This CustomMenu example](https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu -- [Github Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history +- [GitHub Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history - [Who are my representatives?](https://whoaremyrepresentatives.us/) is a website built with Svelte to help US residents get more info on their congressional representatives - [Pick Palette](https://github.com/bluwy/pick-palette) is a color palette manager made with Svelte! diff --git a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md index cb7bcb425e..0e6aaba925 100644 --- a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md +++ b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md @@ -66,7 +66,7 @@ New changes to the Svelte Society website include [a new cheat sheet](https://sv - [eleventy-plugin-embed-svelte](https://github.com/shalomscott/eleventy-plugin-embed-svelte) makes it easy to embed Svelte components into an 11ty site. - [svelte-tailwind-extension-boilerplate](https://github.com/kyrelldixon/svelte-tailwind-extension-boilerplate) is a good foundation for a Chrome extension using either JavaScript or TypeScript, Svelte for the frontend, Tailwind CSS for styling, Jest for testing, and Rollup as the build system. - [snowpack-ui](https://github.com/rajasegar/snowpack-ui) lets you run & manage Snowpack projects from the browser instead of the terminal -- [Svelte for Appwrite](https://dev.to/torstendittmann/svelte-for-appwrite-4fkg) explains how to integrate with Appwrite, a self-hosted Firebase alternative [Github Repo](https://github.com/appwrite/sdk-for-svelte) +- [Svelte for Appwrite](https://dev.to/torstendittmann/svelte-for-appwrite-4fkg) explains how to integrate with Appwrite, a self-hosted Firebase alternative [GitHub Repo](https://github.com/appwrite/sdk-for-svelte) - [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) makes it easy to include HERE maps in a Svelte app - [p5-svelte](https://github.com/tonyketcham/p5-svelte) is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project - [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler diff --git a/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md b/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md index c7510143a8..f1f32fd6be 100644 --- a/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md +++ b/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md @@ -49,7 +49,7 @@ As the northern hemisphere heats up, Svelte has stayed cool with lots of perform **Libraries, Tools & Components** -- [svelte-pipeline](https://github.com/novacbn/svelte-pipeline) provides custom Javascript contexts and the Svelte Compiler as Svelte Stores, for REPLs, Editors, etc. +- [svelte-pipeline](https://github.com/novacbn/svelte-pipeline) provides custom JavaScript contexts and the Svelte Compiler as Svelte Stores, for REPLs, Editors, etc. - [Sveltotron](https://github.com/Salemmous/sveltotron) is an Electron-based app made to inspect your Svelte app - [svelte-qr-reader-writer](https://github.com/pleasemarkdarkly/svelte-qr-reader-writer) is a Svelte component that helps read and write data from QR codes - [svelte-stack-router](https://www.npmjs.com/package/svelte-stack-router) Aims to make Svelte apps feel more native by routing with Stacks diff --git a/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md index 145d3aa784..12ebd77c6c 100644 --- a/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md +++ b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md @@ -52,7 +52,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git - [How to Create a Blog with SvelteKit and Strapi](https://strapi.io/blog/how-to-create-a-blog-with-svelte-kit-strapi) is a step-by-step tutorial by Aarnav Pai from Strapi - [Sveltekit Markdown Blog](https://www.youtube.com/watch?v=sKKgT0SEioI&list=PLm_Qt4aKpfKgonq1zwaCS6kOD-nbOKx7V) is a YouTube tutorial series by WebJeda. - [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) is a deep dive into custom elements by Geoff Rich. -- [learn / graphql / svelte](https://hasura.io/learn/graphql/svelte-apollo/introduction/) is a free 2-hour GraphQL course course from Hasura. +- [learn / graphql / svelte](https://hasura.io/learn/graphql/svelte-apollo/introduction/) is a free 2-hour GraphQL course from Hasura. - [How to add Magic Link to a SvelteKit application](https://magic.link/posts/magic-svelte) is a guide to the popular password-less login pattern. **Libraries, Tools & Components** diff --git a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md index 706b4907e0..46531a0611 100644 --- a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md +++ b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md @@ -57,7 +57,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git **Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit. **Podcasts Featuring Svelte** -- [Syntax Podast: From React to SvelteKit](https://podcasts.apple.com/us/podcast/from-react-to-sveltekit/id1253186678?i=1000536276106) Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit β€” why he did it, how, benefits, things to watch out for, and more! +- [Syntax Podcast: From React to SvelteKit](https://podcasts.apple.com/us/podcast/from-react-to-sveltekit/id1253186678?i=1000536276106) Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit β€” why he did it, how, benefits, things to watch out for, and more! - [Web Rush Podcast: Svelte Tools and Svelte Society](https://www.webrush.io/episodes/episode-150-svelte-tools-and-svelte-society) Kevin Γ…berg Kultalahti talks about what Svelte Society is, what he's excited about with Svelte, how important documentation is to any product, and much _much_ more - [Svelte: The Compiled Future of Front End](https://www.arahansen.com/the-compiled-future-of-front-end/) details the history of component-based frontends and how a compiler changes everything - [Svelte Radio: Contributing to Svelte with Martin 'Grygrflzr' Krisnanto Putra](https://share.transistor.fm/s/10aa305c) Grygrflzr shares his journey to becoming a maintainer and his views on React, Vite and a host of other things diff --git a/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md index 0b2d82c199..33dbd0a20b 100644 --- a/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md +++ b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md @@ -41,7 +41,7 @@ To see all updates to Svelte and SvelteKit, check out the [Svelte](https://githu - [DottoBit](https://dottobit.com/) is a multi-color 16-bit drawing program with URL sharing built-in - [Former Fast Document for Print](https://github.com/zummon/former) is an invoice generator with beautiful designs, abilities for international languages and auto calculation - [Helvetikon](https://github.com/noahsalvi/helvetikon) is a community maintained dictionary for the Swiss German language -- [Palitra App](https://palitra.app/) is a search-based color pallete generator +- [Palitra App](https://palitra.app/) is a search-based color palette generator **Podcasts Featuring Svelte** - [Svelte Radio](https://www.svelteradio.com/episodes/svelte-summit-is-coming-up-and-svelte-is-growing) dives into the tech behind the recently released Svelte Summit website and a bunch of other fun stuff! diff --git a/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md b/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md index 9de6a3a28d..7f750c08ce 100644 --- a/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md +++ b/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md @@ -69,7 +69,7 @@ _To Read_ - [Building an iOS app with Svelte, Capacitor and Firebase](https://harryherskowitz.com/2022/01/05/tapedrop-app.html) by Harry Herskowitz - [Mutating Query Params in SvelteKit Without Page Reloads or Navigations](https://dev.to/mohamadharith/mutating-query-params-in-sveltekit-without-page-reloads-or-navigations-2i2b) and [Workaround for Bubbling Custom Events in Svelte](https://dev.to/mohamadharith/workaround-for-bubbling-custom-events-in-svelte-3khk) by Mohamad Harith - [How to build a full stack serverless application with Svelte and GraphQL](https://dev.to/shadid12/how-to-build-a-full-stack-serverless-application-with-svelte-graphql-and-fauna-5427) by Shadid Haque -- [How to Deploy SvelteKit Apps to Github Pages](https://sveltesaas.com/articles/sveltekit-github-pages-guide/) +- [How to Deploy SvelteKit Apps to GitHub Pages](https://sveltesaas.com/articles/sveltekit-github-pages-guide/) - [Creating a dApp with SvelteKit](https://anthonyriley.org/2021/12/31/creating-a-dapp-with-sveltekit/) by Anthony Riley - [Comparing Svelte Reactivity Options](https://opendirective.net/2022/01/06/comparing-svelte-reactivity-options/) by Steve Lee diff --git a/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md index d38921b7eb..e5455f88c8 100644 --- a/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md +++ b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md @@ -16,7 +16,7 @@ Let's dive in! ## What's new in SvelteKit -- Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever ([Vite 3.0 Milestone](https://github.com/vitejs/vite/milestone/5)) +- Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever ([Vite 3.0 Milestone](https://github.com/vitejs/vite/milestone/5)) - `config.kit.alias` lets you more easily declare a custom alias to replace values in `import` statements ([Docs](https://kit.svelte.dev/docs/configuration#alias), [PR](https://github.com/sveltejs/kit/pull/4964)) - Pages marked for prerendering will now fail during SSR at runtime ([PR](https://github.com/sveltejs/kit/pull/4812)) diff --git a/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md b/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md index e8c76a0857..ae10ab1fea 100644 --- a/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md +++ b/site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md @@ -26,7 +26,7 @@ We will also be utilizing OpenCollective funds to allow Svelte core maintainers - Introduced `@sveltejs/kit/experimental/vite` which allows SvelteKit to interoperate with other tools in the Vite ecosystem like Vitest and Storybook ([#5094](https://github.com/sveltejs/kit/pull/5094)). Please [leave feedback](https://github.com/sveltejs/kit/issues/5184) as to whether the feature works and is helpful as we consider taking it out of experimental and making `vite.config.js` required for all users - Streaming in endpoints is now supported ([#3419](https://github.com/sveltejs/kit/issues/3419)). This was enabled by switching to the Undici `fetch` implementation ([#5117](https://github.com/sveltejs/kit/pull/5117)) - Static assets can now be symlinked in development environments ([#5089](https://github.com/sveltejs/kit/pull/5089)) -- `server` and `prod` environment variables are now available as a correlary to `browser` and `dev` ([#5251](https://github.com/sveltejs/kit/pull/5251)) +- `server` and `prod` environment variables are now available as a corollary to `browser` and `dev` ([#5251](https://github.com/sveltejs/kit/pull/5251)) --- @@ -63,7 +63,7 @@ _To Watch_ - [SvelteKit Page Endpoints](https://www.youtube.com/watch?v=yQRf2wmTu5w), [Named Layouts](https://www.youtube.com/watch?v=UHX9TJ0BxZY) and [Passing data from page component to layout component with $page.stuff](https://www.youtube.com/watch?v=CXaCstU5pcw) by lihautan - [🍞 & 🧈: Magically load data with SvelteKit Endpoints](https://www.youtube.com/watch?v=f6prqYlbTE4) by Johnny Magrippis - [Svelte for React developers](https://www.youtube.com/watch?v=7tsrwrx5HtQ) by frontendtier -- [Learn Svelte JS || Javascript Compiler for Building Front end Applications](https://www.youtube.com/watch?v=1rKRarJJFrY&list=PLIGDNOJWiL1-7zCgdR7MKuho-tPC6Ra6C&index=1) by Code with tsksharma +- [Learn Svelte JS || JavaScript Compiler for Building Front end Applications](https://www.youtube.com/watch?v=1rKRarJJFrY&list=PLIGDNOJWiL1-7zCgdR7MKuho-tPC6Ra6C&index=1) by Code with tsksharma - [SvelteKit Authentication](https://www.youtube.com/watch?v=T935Ya4W5X0&list=PLA9WiRZ-IS_zKrDzhOhV5RGKKTHNIyTDO&index=1) by Joy of Code - [Svelte + websockets: Build a real-time Auction app](https://www.youtube.com/watch?v=CqgsWFrwQIU) by Evgeny Maksimov @@ -85,7 +85,7 @@ _To Read_ - [Svelte Brick Gallery](https://github.com/anotherempty/svelte-brick-gallery) is a masonry-like image gallery component for Svelte - [use-vest](https://github.com/enyo/use-vest) is a Svelte action for Vest - a library that makes it easy to validate forms and show errors when necessary - [Svelidate](https://github.com/svelidate/svelidate) is a simple and lightweight form validation library for Svelte with no dependencies -- [Svve11](https://github.com/oslabs-beta/Svve11) is an "accessbility-first" component library for Svelte +- [Svve11](https://github.com/oslabs-beta/Svve11) is an "accessibility-first" component library for Svelte - [Slidy](https://github.com/Valexr/Slidy) is a simple, configurable & reusable carousel sliding action script with templates & some useful plugins - [Svelte Component Snippets](https://marketplace.visualstudio.com/items?itemName=brysonbw.svelte-component-snippets) is a VS Code extension with access to common Svelte snippets - [Svelte Confetti](https://github.com/Mitcheljager/svelte-confetti) adds a little bit of flair to your app with some confetti 🎊 diff --git a/site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md b/site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md index 647d185fa4..30b4e61c8d 100644 --- a/site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md +++ b/site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md @@ -110,7 +110,7 @@ _To Read_ - [How to add an Emoji Picker to Sveltekit](https://xvrc.net/) by Xavier Coiffard - [Get Started with SvelteKit Headless WordPress](https://plus.rodneylab.com/tutorials/get-started-sveltekit-headless-wordpress) by Rodney Lab - [Speed up SvelteKit Pages With a Redis Cache](https://www.captaincodeman.com/speed-up-sveltekit-pages-with-a-redis-cache) and [How to await Firebase Auth with SvelteKit](https://www.captaincodeman.com/how-to-await-firebase-auth-with-sveltekit) by Captain Codeman -- [Deploying SvelteKit with NodeJS to a Server Using Gitlab and PM2](https://abyteofcoding.com/blog/deploying-sveltekit-with-nodejs-pm2-to-server/) by A Byte of Coding +- [Deploying SvelteKit with NodeJS to a Server Using GitLab and PM2](https://abyteofcoding.com/blog/deploying-sveltekit-with-nodejs-pm2-to-server/) by A Byte of Coding - [Quality of Life Tips when using SvelteKit in VS Code](https://www.reddit.com/r/sveltejs/comments/xltgyp/quality_of_life_tips_when_using_sveltekit_in_vs/) by doa-doa diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte index b82d31e783..1831da1793 100644 --- a/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte +++ b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte @@ -10,7 +10,7 @@ {#if yes}

    Thank you. We will bombard your inbox and sell your personal details.

    {:else} -

    You must opt in to continue. If you're not paying, you're the product.

    +

    You must opt-in to continue. If you're not paying, you're the product.

    {/if} {#if expanded}
      @@ -27,12 +27,14 @@ {/if} \ No newline at end of file + diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte index 34fb2cebfc..6c0cca3587 100644 --- a/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte +++ b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte @@ -10,7 +10,7 @@
        -
      • +
      • {cat.name}
        • diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte index 6ea5097be2..3a13c0057f 100644 --- a/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte +++ b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte @@ -10,7 +10,7 @@
          {#each cats as { id, name }, i} -
        • +
        • {i + 1}: {name}
          • {/each} diff --git a/site/content/tutorial/04-logic/04-each-blocks/text.md b/site/content/tutorial/04-logic/04-each-blocks/text.md index 886990f5a0..c3a6c30d4e 100644 --- a/site/content/tutorial/04-logic/04-each-blocks/text.md +++ b/site/content/tutorial/04-logic/04-each-blocks/text.md @@ -7,7 +7,7 @@ If you need to loop over lists of data, use an `each` block: ```html
            {#each cats as cat} -
          • +
          • {cat.name}
            • {/each} @@ -20,10 +20,10 @@ You can get the current *index* as a second argument, like so: ```html {#each cats as cat, i} -
          • +
          • {i + 1}: {cat.name}
            • {/each} ``` -If you prefer, you can use destructuring β€” `each cats as { id, name }` β€” and replace `cat.id` and `cat.name` with `id` and `name`. \ No newline at end of file +If you prefer, you can use destructuring β€” `each cats as { id, name }` β€” and replace `cat.id` and `cat.name` with `id` and `name`. From 84d61c61f883c206b87a6fc76c5690379059f979 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Mon, 5 Dec 2022 05:43:59 -0800 Subject: [PATCH 029/125] [feat] Add options w/ direction to transitions (#8068) --- site/content/docs/03-template-syntax.md | 7 +++++- src/runtime/internal/transitions.ts | 18 ++++++++------ .../_config.js | 19 +++++++++++++++ .../main.svelte | 24 +++++++++++++++++++ .../transition-js-option-direction/_config.js | 13 ++++++++++ .../main.svelte | 20 ++++++++++++++++ 6 files changed, 93 insertions(+), 8 deletions(-) create mode 100644 test/runtime/samples/transition-js-deferred-option-direction/_config.js create mode 100644 test/runtime/samples/transition-js-deferred-option-direction/main.svelte create mode 100644 test/runtime/samples/transition-js-option-direction/_config.js create mode 100644 test/runtime/samples/transition-js-option-direction/main.svelte diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index 9afe399469..de7ded9d6c 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -971,7 +971,7 @@ transition:fn|local={params} ```js -transition = (node: HTMLElement, params: any) => { +transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => { delay?: number, duration?: number, easing?: (t: number) => number, @@ -1091,6 +1091,11 @@ A custom transition function can also return a `tick` function, which is called If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible. +Transition functions also receive a third argument, `options`, which contains information about the transition. + +Available values in the `options` object are: + +* `direction` - one of `in`, `out`, or `bidirectional` depending on the type of transition ##### Transition events diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts index 9aa45dc4f1..4705c0ac9a 100644 --- a/src/runtime/internal/transitions.ts +++ b/src/runtime/internal/transitions.ts @@ -86,10 +86,12 @@ export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, ca const null_transition: TransitionConfig = { duration: 0 }; -type TransitionFn = (node: Element, params: any) => TransitionConfig; +type TransitionOptions = { direction: 'in' | 'out' | 'both' }; +type TransitionFn = (node: Element, params: any, options: TransitionOptions) => TransitionConfig; export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) { - let config = fn(node, params); + const options: TransitionOptions = { direction: 'in' }; + let config = fn(node, params, options); let running = false; let animation_name; let task; @@ -150,7 +152,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: delete_rule(node); if (is_function(config)) { - config = config(); + config = config(options); wait().then(go); } else { go(); @@ -171,7 +173,8 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: } export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) { - let config = fn(node, params); + const options: TransitionOptions = { direction: 'out' }; + let config = fn(node, params, options); let running = true; let animation_name; @@ -224,7 +227,7 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: if (is_function(config)) { wait().then(() => { // @ts-ignore - config = config(); + config = config(options); go(); }); } else { @@ -264,7 +267,8 @@ interface Program { } export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) { - let config = fn(node, params); + const options: TransitionOptions = { direction: 'both' }; + let config = fn(node, params, options); let t = intro ? 0 : 1; @@ -373,7 +377,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline if (is_function(config)) { wait().then(() => { // @ts-ignore - config = config(); + config = config(options); go(b); }); } else { diff --git a/test/runtime/samples/transition-js-deferred-option-direction/_config.js b/test/runtime/samples/transition-js-deferred-option-direction/_config.js new file mode 100644 index 0000000000..2bf448d9c7 --- /dev/null +++ b/test/runtime/samples/transition-js-deferred-option-direction/_config.js @@ -0,0 +1,19 @@ +export default { + test({ assert, component, target }) { + component.visible = true; + + const div_in = target.querySelector('#in'); + const div_out = target.querySelector('#out'); + const div_both = target.querySelector('#both'); + + assert.equal(div_in.initial, 'in'); + assert.equal(div_out.initial, 'out'); + assert.equal(div_both.initial, 'both'); + + return Promise.resolve().then(() => { + assert.equal(div_in.later, 'in'); + assert.equal(div_out.later, 'out'); + assert.equal(div_both.later, 'both'); + }); + } +}; diff --git a/test/runtime/samples/transition-js-deferred-option-direction/main.svelte b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte new file mode 100644 index 0000000000..9ac816ce75 --- /dev/null +++ b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte @@ -0,0 +1,24 @@ + + +{#if visible} +
            +
            +{/if} + +{#if !visible} +
            +{/if} diff --git a/test/runtime/samples/transition-js-option-direction/_config.js b/test/runtime/samples/transition-js-option-direction/_config.js new file mode 100644 index 0000000000..649b4ec7fa --- /dev/null +++ b/test/runtime/samples/transition-js-option-direction/_config.js @@ -0,0 +1,13 @@ +export default { + test({ assert, component, target }) { + component.visible = true; + + const div_in = target.querySelector('#in'); + const div_out = target.querySelector('#out'); + const div_both = target.querySelector('#both'); + + assert.equal(div_in.direction, 'in'); + assert.equal(div_out.direction, 'out'); + assert.equal(div_both.direction, 'both'); + } +}; diff --git a/test/runtime/samples/transition-js-option-direction/main.svelte b/test/runtime/samples/transition-js-option-direction/main.svelte new file mode 100644 index 0000000000..7bae2c158d --- /dev/null +++ b/test/runtime/samples/transition-js-option-direction/main.svelte @@ -0,0 +1,20 @@ + + +{#if visible} +
            +
            +{/if} + +{#if !visible} +
            +{/if} From 6330bfc05285f945b750a3d78f28b7994d2a2e13 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Mon, 5 Dec 2022 22:44:40 +0900 Subject: [PATCH 030/125] Update CHANGELOG.md --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2cb521f390..65eadad36e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Svelte changelog +## Unreleased + +* Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) + + ## 3.53.1 * Fix exception in `rel=` attribute check with dynamic values ([#7994](https://github.com/sveltejs/svelte/issues/7994)) From 676716979a95bf33333a2ba8185ceea63e7d7655 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 5 Dec 2022 15:00:51 +0100 Subject: [PATCH 031/125] [fix] a11y - allow fallback roles (#8045) --- src/compiler/compile/nodes/Element.ts | 77 ++++++++++--------- .../samples/a11y-aria-role/input.svelte | 8 +- .../samples/a11y-aria-role/warnings.json | 25 ++++-- 3 files changed, 68 insertions(+), 42 deletions(-) diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index ca9bcb8c4e..a499d013e3 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -194,10 +194,10 @@ function is_valid_aria_attribute_value(schema: ARIAPropertyDefinition, value: st .indexOf(typeof value === 'string' ? value.toLowerCase() : value) > -1; case 'idlist': // if list of ids, split each return typeof value === 'string' - && value.split(' ').every((id) => typeof id === 'string'); + && value.split(regex_any_repeated_whitespaces).every((id) => typeof id === 'string'); case 'tokenlist': // if list of tokens, split each return typeof value === 'string' - && value.split(' ').every((token) => (schema.values || []).indexOf(token.toLowerCase()) > -1); + && value.split(regex_any_repeated_whitespaces).every((token) => (schema.values || []).indexOf(token.toLowerCase()) > -1); default: return false; } @@ -492,47 +492,52 @@ export default class Element extends Node { component.warn(attribute, compiler_warnings.a11y_misplaced_role(this.name)); } - const value = attribute.get_static_value() as ARIARoleDefintionKey; + const value = attribute.get_static_value(); - if (value && aria_role_abstract_set.has(value)) { - component.warn(attribute, compiler_warnings.a11y_no_abstract_role(value)); - } else if (value && !aria_role_set.has(value)) { - const match = fuzzymatch(value, aria_roles); - component.warn(attribute, compiler_warnings.a11y_unknown_role(value, match)); - } + if (typeof value === 'string') { + value.split(regex_any_repeated_whitespaces).forEach((current_role: ARIARoleDefintionKey) => { + if (current_role && aria_role_abstract_set.has(current_role)) { + component.warn(attribute, compiler_warnings.a11y_no_abstract_role(current_role)); + } else if (current_role && !aria_role_set.has(current_role)) { + const match = fuzzymatch(current_role, aria_roles); + component.warn(attribute, compiler_warnings.a11y_unknown_role(current_role, match)); + } - // no-redundant-roles - const has_redundant_role = value === a11y_implicit_semantics.get(this.name); + // no-redundant-roles + const has_redundant_role = current_role === a11y_implicit_semantics.get(this.name); - if (this.name === value || has_redundant_role) { - component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value)); - } + if (this.name === current_role || has_redundant_role) { + component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(current_role)); + } - // Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles. - const is_parent_section_or_article = is_parent(this.parent, ['section', 'article']); - if (!is_parent_section_or_article) { - const has_nested_redundant_role = value === a11y_nested_implicit_semantics.get(this.name); - if (has_nested_redundant_role) { - component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value)); - } - } + // Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles. + const is_parent_section_or_article = is_parent(this.parent, ['section', 'article']); + if (!is_parent_section_or_article) { + const has_nested_redundant_role = current_role === a11y_nested_implicit_semantics.get(this.name); + if (has_nested_redundant_role) { + component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(current_role)); + } + } - // role-has-required-aria-props - if (!is_semantic_role_element(value, this.name, attribute_map)) { - const role = roles.get(value); - if (role) { - const required_role_props = Object.keys(role.requiredProps); - const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop)); + // role-has-required-aria-props + if (!is_semantic_role_element(current_role, this.name, attribute_map)) { + const role = roles.get(current_role); + if (role) { + const required_role_props = Object.keys(role.requiredProps); + const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop)); - if (has_missing_props) { - component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(value as string, required_role_props)); + if (has_missing_props) { + component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(current_role, required_role_props)); + } + } } - } - } - // no-interactive-element-to-noninteractive-role - if (is_interactive_element(this.name, attribute_map) && (is_non_interactive_roles(value) || is_presentation_role(value))) { - component.warn(this, compiler_warnings.a11y_no_interactive_element_to_noninteractive_role(value, this.name)); + // no-interactive-element-to-noninteractive-role + if (is_interactive_element(this.name, attribute_map) && (is_non_interactive_roles(current_role) || is_presentation_role(current_role))) { + component.warn(this, compiler_warnings.a11y_no_interactive_element_to_noninteractive_role(current_role, this.name)); + } + }); + } } @@ -621,7 +626,7 @@ export default class Element extends Node { if (href_static_value === null || href_static_value.match(/^(https?:)?\/\//i)) { const rel = attribute_map.get('rel'); if (rel == null || rel.is_static) { - const rel_values = rel ? rel.get_static_value().split(' ') : []; + const rel_values = rel ? rel.get_static_value().split(regex_any_repeated_whitespaces) : []; const expected_values = ['noreferrer']; expected_values.forEach(expected_value => { if (!rel || rel && rel_values.indexOf(expected_value) < 0) { diff --git a/test/validator/samples/a11y-aria-role/input.svelte b/test/validator/samples/a11y-aria-role/input.svelte index 3089d84e5b..1dde21a2ad 100644 --- a/test/validator/samples/a11y-aria-role/input.svelte +++ b/test/validator/samples/a11y-aria-role/input.svelte @@ -1 +1,7 @@ -
            \ No newline at end of file + +
            +
            + + +
            +
            diff --git a/test/validator/samples/a11y-aria-role/warnings.json b/test/validator/samples/a11y-aria-role/warnings.json index 22fb2d52b6..2943f232f8 100644 --- a/test/validator/samples/a11y-aria-role/warnings.json +++ b/test/validator/samples/a11y-aria-role/warnings.json @@ -3,15 +3,30 @@ "code": "a11y-unknown-role", "message": "A11y: Unknown role 'toooltip' (did you mean 'tooltip'?)", "start": { - "line": 1, + "line": 6, "column": 5, - "character": 5 + "character": 101 }, "end": { - "line": 1, + "line": 6, "column": 20, - "character": 20 + "character": 116 }, - "pos": 5 + "pos": 101 + }, + { + "code": "a11y-unknown-role", + "message": "A11y: Unknown role 'toooltip' (did you mean 'tooltip'?)", + "start": { + "line": 7, + "column": 5, + "character": 129 + }, + "end": { + "line": 7, + "column": 27, + "character": 151 + }, + "pos": 129 } ] From de46e36315322f9785bb88cd0f3e78e42fd765c3 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Mon, 5 Dec 2022 23:01:14 +0900 Subject: [PATCH 032/125] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65eadad36e..3545785f66 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) +* Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) ## 3.53.1 From ed3ac92ec075dc237de2994c7f5f9a38819fd79c Mon Sep 17 00:00:00 2001 From: Bert B <44912991+bertybot@users.noreply.github.com> Date: Mon, 5 Dec 2022 09:25:25 -0500 Subject: [PATCH 033/125] [fix] Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` (#8025) * update tabindex warning to ignore tabpanels * refactor Co-authored-by: Yuichiro Yamashita --- src/compiler/compile/utils/a11y.ts | 25 +++--------- .../input.svelte | 1 + .../warnings.json | 40 +++++++++---------- 3 files changed, 26 insertions(+), 40 deletions(-) diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts index b96386a3b0..d51125fa92 100644 --- a/src/compiler/compile/utils/a11y.ts +++ b/src/compiler/compile/utils/a11y.ts @@ -7,17 +7,17 @@ import { import { AXObjects, AXObjectRoles, elementAXObjects } from 'axobject-query'; import Attribute from '../nodes/Attribute'; -const roles = [...roles_map.keys()]; +const non_abstract_roles = [...roles_map.keys()].filter((name) => !roles_map.get(name).abstract); const non_interactive_roles = new Set( - roles + non_abstract_roles .filter((name) => { const role = roles_map.get(name); return ( - !roles_map.get(name).abstract && // 'toolbar' does not descend from widget, but it does support // aria-activedescendant, thus in practice we treat it as a widget. - name !== 'toolbar' && + // focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable. + !['toolbar', 'tabpanel'].includes(name) && !role.superClass.some((classes) => classes.includes('widget')) ); }) @@ -29,22 +29,7 @@ const non_interactive_roles = new Set( ); const interactive_roles = new Set( - roles - .filter((name) => { - const role = roles_map.get(name); - return ( - !role.abstract && - // The `progressbar` is descended from `widget`, but in practice, its - // value is always `readonly`, so we treat it as a non-interactive role. - name !== 'progressbar' && - role.superClass.some((classes) => classes.includes('widget')) - ); - }) - .concat( - // 'toolbar' does not descend from widget, but it does support - // aria-activedescendant, thus in practice we treat it as a widget. - 'toolbar' - ) + non_abstract_roles.filter((name) => !non_interactive_roles.has(name)) ); export function is_non_interactive_roles(role: ARIARoleDefintionKey) { diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte index e9ac0d3c9f..9efed4d879 100644 --- a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte +++ b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte @@ -7,6 +7,7 @@
            +
            diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json index 740d9b346c..b2c3ec4168 100644 --- a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json +++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json @@ -2,61 +2,61 @@ { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 241, + "character": 278, "column": 20, - "line": 11 + "line": 12 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 221, + "pos": 258, "start": { - "character": 221, + "character": 258, "column": 0, - "line": 11 + "line": 12 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 277, + "character": 314, "column": 35, - "line": 12 + "line": 13 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 242, + "pos": 279, "start": { - "character": 242, + "character": 279, "column": 0, - "line": 12 + "line": 13 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 302, + "character": 339, "column": 24, - "line": 13 + "line": 14 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 278, + "pos": 315, "start": { - "character": 278, + "character": 315, "column": 0, - "line": 13 + "line": 14 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 329, + "character": 366, "column": 26, - "line": 14 + "line": 15 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 303, + "pos": 340, "start": { - "character": 303, + "character": 340, "column": 0, - "line": 14 + "line": 15 } } ] From d2ff2aee4f6269868099dae42472c1be00d24576 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Mon, 5 Dec 2022 23:25:55 +0900 Subject: [PATCH 034/125] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3545785f66..bdad22e607 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ * Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) - +* Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) ## 3.53.1 From 4c5469b1ee55a9675240adaab5bb42ae8b7c3f3f Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Mon, 5 Dec 2022 15:43:39 +0100 Subject: [PATCH 035/125] [fix] don't run binding init unnecessarily (#7981) --- .../wrappers/InlineComponent/index.ts | 2 +- src/runtime/internal/Component.ts | 6 ++++-- .../Tab.svelte | 3 +++ .../_config.js | 7 +++++++ .../main.svelte | 17 +++++++++++++++++ 5 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte create mode 100644 test/runtime/samples/binding-no-unnecessary-invalidation/_config.js create mode 100644 test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index bca01fdb4c..f7875dc1b0 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -393,7 +393,7 @@ export default class InlineComponentWrapper extends Wrapper { component.partly_hoisted.push(body); - return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}));`; + return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}, ${snippet}));`; }); const munged_handlers = this.node.handlers.map(handler => { diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 5aec24c651..eedf8dd1ad 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -5,11 +5,13 @@ import { children, detach, start_hydrating, end_hydrating } from './dom'; import { transition_in } from './transitions'; import { T$$ } from './types'; -export function bind(component, name, callback) { +export function bind(component, name, callback, value) { const index = component.$$.props[name]; if (index !== undefined) { component.$$.bound[index] = callback; - callback(component.$$.ctx[index]); + if (value === undefined) { + callback(component.$$.ctx[index]); + } } } diff --git a/test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte b/test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte new file mode 100644 index 0000000000..86e2413898 --- /dev/null +++ b/test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte @@ -0,0 +1,3 @@ + diff --git a/test/runtime/samples/binding-no-unnecessary-invalidation/_config.js b/test/runtime/samples/binding-no-unnecessary-invalidation/_config.js new file mode 100644 index 0000000000..a34cf0121f --- /dev/null +++ b/test/runtime/samples/binding-no-unnecessary-invalidation/_config.js @@ -0,0 +1,7 @@ +export default { + async test({ assert, target }) { + assert.htmlEqual(target.innerHTML, ` +

            0

            + `); + } +}; diff --git a/test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte b/test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte new file mode 100644 index 0000000000..c57781cc97 --- /dev/null +++ b/test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte @@ -0,0 +1,17 @@ + + + +

            {i}

            From 43905ccc22e0875f39a3e8d9317d8a75cdf974d5 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Mon, 5 Dec 2022 23:52:30 +0900 Subject: [PATCH 036/125] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bdad22e607..1209f74131 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ * Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) * Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) +* Prevent to call unnecessary init binding ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) ## 3.53.1 From 5eb1ff9946a6a1ac2d1de838f1911cceab3723c7 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Mon, 5 Dec 2022 06:53:29 -0800 Subject: [PATCH 037/125] [docs] publish roadmap. add process section to contributor's guide and re-organize a bit (#7965) --- CONTRIBUTING.md | 94 +++++++++++++++++++++++++++---------------------- README.md | 5 +++ 2 files changed, 56 insertions(+), 43 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6153ae25d9..01f8728cc0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,7 +13,7 @@ There are many ways to contribute to Svelte, and many of them do not involve wri - Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/docs#getting-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues). - Look through the [open issues](https://github.com/sveltejs/svelte/issues). A good starting point would be issues tagged [good first issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests). -- If you find an issue you would like to fix, [open a pull request](#your-first-pull-request). +- If you find an issue you would like to fix, [open a pull request](#pull-requests). - Read through our [tutorials](https://svelte.dev/tutorial/basics). If you find anything that is confusing or can be improved, you can make edits by clicking "Edit this chapter" at the bottom left of the tutorial page. - Take a look at the [features requested](https://github.com/sveltejs/svelte/labels/feature%20request) by others in the community and consider opening a pull request if you see something you want to work on. @@ -24,44 +24,43 @@ Contributions are very welcome. If you think you need help planning your contrib One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in. - Ask for more information if you believe the issue does not provide all the details required to solve it. -- Suggest [labels](https://github.com/sveltejs/svelte/labels) that can help categorize issues. - Flag issues that are stale or that should be closed. - Ask for test plans and review code. -## Bugs +## Our process -We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues). +### RFCs -If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions. +If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front. -If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md) +### Roadmap -## Reporting new issues +When deciding where to contribute, you may wish to take a look at [our roadmap](https://svelte.dev/roadmap). The Svelte team generally works on a single major effort at a time. This has a couple benefits for us as maintainers. First, it allows us to focus and make noticeable progress in an area being proactive rather than reactive. Secondly, it allows us to handle related issues and PRs together. By batching issues and PRs together we’re able to ensure implementations and fixes holistically address the set of problems and use cases encountered by our users. -When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template. +### Maintainer meetings -- **One issue, one bug:** Please report a single bug per issue. -- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction. +The maintainers meet on the final Saturday of each month. While these meetings are not open publicly, we will report back by leaving a comment on each issue discussed. We will generally discuss items aligning with our roadmap, but major PRs needing discussion amongst the maintainers can be added to the agenda for the monthly maintainer’s meeting. However, we typically are only able to get to a couple of items that are not aligned with our current priority. -## RFCs +### Prioritization -If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front. +We do our best to review PRs and RFCs as they are sent, but it is difficult to keep up. We welcome help in reviewing PRs, RFC, and issues. If an item aligns with the current priority on our [roadmap](https://svelte.dev/roadmap), it is more likely to be reviewed quickly. PRs to the most important and active ones repositories get reviewed more quickly while PRs to smaller inactive repos may sit for a bit before we periodically come by and review the pending PRs in a batch. -## Installation +## Bugs -1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed. -1. After cloning the repository, run `npm install` in the root of the repository. -1. To start a development server, run `npm run dev`. +We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues). -## Pull requests +If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions. -### Your first pull request +If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md) -So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at. +### Reporting new issues -Working on your first Pull Request? You can learn how from this free video series: +When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template. + +- **One issue, one bug:** Please report a single bug per issue. +- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction. -[**How to Contribute to an Open Source Project on GitHub**](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) +## Pull requests ### Proposing a change @@ -69,20 +68,19 @@ If you would like to request a new feature or enhancement but are not yet thinki If you're only fixing a bug, it's fine to submit a pull request right away, but we still recommend that you file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue. -### Sending a pull request +Small pull requests are much easier to review and more likely to get merged. -Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it. +### Installation -Please make sure the following is done when submitting a pull request: +1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed. +1. After cloning the repository, run `npm install` in the root of the repository. +1. To start a development server, run `npm run dev`. -1. Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`. -1. Describe your **test plan** in your pull request description. Make sure to test your changes. -1. Make sure your code lints (`npm run lint`). -1. Make sure your tests pass (`npm run test`). +### Creating a branch -All pull requests should be opened against the `master` branch. +Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`. If you've never sent a GitHub pull request before, you can learn how from [this free video series](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github). -#### Test plan +### Testing A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI. @@ -110,6 +108,25 @@ Test samples are kept in `/test/xxx/samples` folder. 1. Tests suites like `css`, `js`, `server-side-rendering` asserts that the generated output has to match the content in the `.expected` file. For example, in the `js` test suites, the generated js code is compared against the content in `expected.js`. 1. To update the content of the `.expected` file, run the test with `--update` flag. (`npm run test --update`) +### Style guide + +[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`. + +#### Code conventions + +- `snake_case` for internal variable names and methods. +- `camelCase` for public variable names and methods. + +### Sending your pull request + +Please make sure the following is done when submitting a pull request: + +1. Describe your **test plan** in your pull request description. Make sure to test your changes. +1. Make sure your code lints (`npm run lint`). +1. Make sure your tests pass (`npm run test`). + +All pull requests should be opened against the `master` branch. Make sure the PR does only one thing, otherwise please split it. + #### Breaking changes When adding a new breaking change, follow this template in your pull request: @@ -123,19 +140,10 @@ When adding a new breaking change, follow this template in your pull request: - **Severity (number of people affected x effort)**: ``` -### What happens next? - -The core Svelte team will be monitoring for pull requests. Do help us by making your pull request easy to review by following the guidelines above. - -## Style guide - -[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`. - -### Code conventions - -- `snake_case` for internal variable names and methods. -- `camelCase` for public variable names and methods. - ## License By contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE). + +## Questions + +Feel free to ask in [#contributing](https://discord.com/channels/457912077277855764/750401468569354431) on [Discord](https://svelte.dev/chat) if you have questions about our process, how to proceed, etc. diff --git a/README.md b/README.md index 97e9ab65f3..11150f39b8 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,11 @@ Svelte is an MIT-licensed open source project with its ongoing development made Funds donated via Open Collective will be used for compensating expenses related to Svelte's development such as hosting costs. If sufficient donations are received, funds may also be used to support Svelte's development more directly. +## Roadmap + +You may view [our roadmap](https://svelte.dev/roadmap) if you'd like to see what we're currently working on. + + ## Development Pull requests are encouraged and always welcome. [Pick an issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and help us out! From 2f61907ec136eb53528a2933b194689b98e444aa Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 5 Dec 2022 23:01:51 +0800 Subject: [PATCH 038/125] [fix] allow invalidating variables from @const declared function (#7858) --- .../compile/nodes/shared/Expression.ts | 82 +++++++++++-------- .../samples/const-tag-invalidate/_config.js | 34 ++++++++ .../samples/const-tag-invalidate/main.svelte | 16 ++++ 3 files changed, 96 insertions(+), 36 deletions(-) create mode 100644 test/runtime/samples/const-tag-invalidate/_config.js create mode 100644 test/runtime/samples/const-tag-invalidate/main.svelte diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts index d726b811a1..1b1558ec17 100644 --- a/src/compiler/compile/nodes/shared/Expression.ts +++ b/src/compiler/compile/nodes/shared/Expression.ts @@ -274,41 +274,7 @@ export default class Expression { ); const declaration = b`const ${id} = ${node}`; - - if (owner.type === 'ConstTag') { - let child_scope = scope; - walk(node, { - enter(node: Node, parent: any) { - if (map.has(node)) child_scope = map.get(node); - if (node.type === 'Identifier' && is_reference(node, parent)) { - if (child_scope.has(node.name)) return; - this.replace(block.renderer.reference(node, ctx)); - } - }, - leave(node: Node) { - if (map.has(node)) child_scope = child_scope.parent; - } - }); - } else if (dependencies.size === 0 && contextual_dependencies.size === 0) { - // we can hoist this out of the component completely - component.fully_hoisted.push(declaration); - - this.replace(id as any); - - component.add_var(node, { - name: id.name, - internal: true, - hoistable: true, - referenced: true - }); - } else if (contextual_dependencies.size === 0) { - // function can be hoisted inside the component init - component.partly_hoisted.push(declaration); - - block.renderer.add_to_context(id.name); - this.replace(block.renderer.reference(id)); - } else { - // we need a combo block/init recipe + const extract_functions = () => { const deps = Array.from(contextual_dependencies); const function_expression = node as FunctionExpression; @@ -318,7 +284,7 @@ export default class Expression { ...function_expression.params ]; - const context_args = deps.map(name => block.renderer.reference(name)); + const context_args = deps.map(name => block.renderer.reference(name, ctx)); component.partly_hoisted.push(declaration); @@ -334,6 +300,50 @@ export default class Expression { : b`function ${id}() { return ${callee}(${context_args}); }`; + return { deps, func_declaration }; + }; + + if (owner.type === 'ConstTag') { + // we need a combo block/init recipe + if (contextual_dependencies.size === 0) { + let child_scope = scope; + walk(node, { + enter(node: Node, parent: any) { + if (map.has(node)) child_scope = map.get(node); + if (node.type === 'Identifier' && is_reference(node, parent)) { + if (child_scope.has(node.name)) return; + this.replace(block.renderer.reference(node, ctx)); + } + }, + leave(node: Node) { + if (map.has(node)) child_scope = child_scope.parent; + } + }); + } else { + const { func_declaration } = extract_functions(); + this.replace(func_declaration[0]); + } + } else if (dependencies.size === 0 && contextual_dependencies.size === 0) { + // we can hoist this out of the component completely + component.fully_hoisted.push(declaration); + + this.replace(id as any); + + component.add_var(node, { + name: id.name, + internal: true, + hoistable: true, + referenced: true + }); + } else if (contextual_dependencies.size === 0) { + // function can be hoisted inside the component init + component.partly_hoisted.push(declaration); + + block.renderer.add_to_context(id.name); + this.replace(block.renderer.reference(id)); + } else { + // we need a combo block/init recipe + const { deps, func_declaration } = extract_functions(); if (owner.type === 'Attribute' && owner.parent.name === 'slot') { const dep_scopes = new Set(deps.map(name => template_scope.get_owner(name))); diff --git a/test/runtime/samples/const-tag-invalidate/_config.js b/test/runtime/samples/const-tag-invalidate/_config.js new file mode 100644 index 0000000000..ffb1f14816 --- /dev/null +++ b/test/runtime/samples/const-tag-invalidate/_config.js @@ -0,0 +1,34 @@ +export default { + html: ` +
            [Y] A
            +
            [N] B
            +
            [N] C
            + `, + async test({ component, target, assert, window }) { + const [btn1, btn2, btn3] = target.querySelectorAll('button'); + await btn1.dispatchEvent(new window.MouseEvent('click')); + await btn2.dispatchEvent(new window.MouseEvent('click')); + + assert.htmlEqual(target.innerHTML, ` +
            [N] A
            +
            [Y] B
            +
            [N] C
            + `); + + await btn2.dispatchEvent(new window.MouseEvent('click')); + + assert.htmlEqual(target.innerHTML, ` +
            [N] A
            +
            [N] B
            +
            [N] C
            + `); + + await btn3.dispatchEvent(new window.MouseEvent('click')); + + assert.htmlEqual(target.innerHTML, ` +
            [N] A
            +
            [N] B
            +
            [Y] C
            + `); + } +}; diff --git a/test/runtime/samples/const-tag-invalidate/main.svelte b/test/runtime/samples/const-tag-invalidate/main.svelte new file mode 100644 index 0000000000..6e58cbd9e2 --- /dev/null +++ b/test/runtime/samples/const-tag-invalidate/main.svelte @@ -0,0 +1,16 @@ + + +{#each items as item} + {@const toggle = () => item.selected = !item.selected} +
            + {item.selected ? '[Y]' : '[N]'} + {item.name} + +
            +{/each} From d8c6ab87df1edf28e7a286818434bda8443d3f15 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Tue, 6 Dec 2022 00:02:21 +0900 Subject: [PATCH 039/125] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1209f74131..a055b2f9d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) * Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) * Prevent to call unnecessary init binding ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) +* Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843)) ## 3.53.1 From f45b8237704573fb736bd40cf7751063f61deb91 Mon Sep 17 00:00:00 2001 From: Daniel Huang <99danielh@gmail.com> Date: Mon, 5 Dec 2022 10:14:11 -0500 Subject: [PATCH 040/125] [docs] fix inconsistent margin in svelte/motion spring tutorial (#8081) --- site/content/tutorial/09-motion/02-spring/app-b/App.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/site/content/tutorial/09-motion/02-spring/app-b/App.svelte b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte index d8a0287c2c..3ded9350a9 100644 --- a/site/content/tutorial/09-motion/02-spring/app-b/App.svelte +++ b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte @@ -33,6 +33,7 @@ svg { width: 100%; height: 100%; + margin: -8px; } circle { fill: #ff3e00; From cc52dc442be8cb3207005d13bf9b1d521b2b0afd Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Tue, 6 Dec 2022 00:18:29 +0900 Subject: [PATCH 041/125] [docs] add explanation about property binding order (#7833) * update document * update sentence and position * update the sentence * update --- site/content/docs/03-template-syntax.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index de7ded9d6c..2d92813e89 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -124,6 +124,10 @@ An element or component can have multiple spread attributes, interspersed with r > The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable. +> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example, ``, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to ``. + +> Another example is ``. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `` to make the image lazily loaded. + --- ### Text expressions From 75c3a48245295c3748a135165a4ac9947bf11ef8 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 6 Dec 2022 14:22:36 -0500 Subject: [PATCH 042/125] update changelog --- CHANGELOG.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a055b2f9d5..0aa980597e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,11 +2,11 @@ ## Unreleased -* Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) +* Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918)) * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) -* Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) -* Prevent to call unnecessary init binding ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) +* Prevent running init binding unnecessarily ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) * Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843)) +* Do not emit `a11y-no-noninteractive-tabindex` warning if element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) ## 3.53.1 From 94e51df07b0512de0716a0109d29c8a1d1f1ce20 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Wed, 7 Dec 2022 04:23:23 +0900 Subject: [PATCH 043/125] [fix] escape style attribute for SSR (#8087) --- src/runtime/internal/ssr.ts | 2 +- test/runtime/samples/css-vars-escape/Sub.svelte | 7 +++++++ test/runtime/samples/css-vars-escape/_config.js | 12 ++++++++++++ test/runtime/samples/css-vars-escape/main.svelte | 6 ++++++ .../samples/inline-style-directive-escape/_config.js | 12 ++++++++++++ .../inline-style-directive-escape/main.svelte | 5 +++++ 6 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 test/runtime/samples/css-vars-escape/Sub.svelte create mode 100644 test/runtime/samples/css-vars-escape/_config.js create mode 100644 test/runtime/samples/css-vars-escape/main.svelte create mode 100644 test/runtime/samples/inline-style-directive-escape/_config.js create mode 100644 test/runtime/samples/inline-style-directive-escape/main.svelte diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts index 571a25f1ac..e6d747dc18 100644 --- a/src/runtime/internal/ssr.ts +++ b/src/runtime/internal/ssr.ts @@ -205,7 +205,7 @@ export function add_classes(classes) { function style_object_to_string(style_object) { return Object.keys(style_object) .filter(key => style_object[key]) - .map(key => `${key}: ${style_object[key]};`) + .map(key => `${key}: ${escape_attribute_value(style_object[key])};`) .join(' '); } diff --git a/test/runtime/samples/css-vars-escape/Sub.svelte b/test/runtime/samples/css-vars-escape/Sub.svelte new file mode 100644 index 0000000000..4781b65b36 --- /dev/null +++ b/test/runtime/samples/css-vars-escape/Sub.svelte @@ -0,0 +1,7 @@ +
            hi
            + + diff --git a/test/runtime/samples/css-vars-escape/_config.js b/test/runtime/samples/css-vars-escape/_config.js new file mode 100644 index 0000000000..04defbdae8 --- /dev/null +++ b/test/runtime/samples/css-vars-escape/_config.js @@ -0,0 +1,12 @@ +export default { + html: ` +
            +
            hi
            +
            + `, + ssrHtml: ` +
            +
            hi
            +
            + ` +}; diff --git a/test/runtime/samples/css-vars-escape/main.svelte b/test/runtime/samples/css-vars-escape/main.svelte new file mode 100644 index 0000000000..d18e2d57f2 --- /dev/null +++ b/test/runtime/samples/css-vars-escape/main.svelte @@ -0,0 +1,6 @@ + + + diff --git a/test/runtime/samples/inline-style-directive-escape/_config.js b/test/runtime/samples/inline-style-directive-escape/_config.js new file mode 100644 index 0000000000..31666815d9 --- /dev/null +++ b/test/runtime/samples/inline-style-directive-escape/_config.js @@ -0,0 +1,12 @@ +export default { + html: ` +
            + `, + + test({ assert, component, target }) { + component.attack = '" onload="alert(\'uhoh2\')" data-nothing="not important'; + assert.htmlEqual(target.innerHTML, ` +
            + `); + } +}; diff --git a/test/runtime/samples/inline-style-directive-escape/main.svelte b/test/runtime/samples/inline-style-directive-escape/main.svelte new file mode 100644 index 0000000000..fd27bfda6a --- /dev/null +++ b/test/runtime/samples/inline-style-directive-escape/main.svelte @@ -0,0 +1,5 @@ + + +
            From 86524181a9b825ad2a49f3af52f501950ea627ba Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 6 Dec 2022 14:24:27 -0500 Subject: [PATCH 044/125] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0aa980597e..315db36a18 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * Prevent running init binding unnecessarily ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) * Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843)) * Do not emit `a11y-no-noninteractive-tabindex` warning if element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) +* Fix escaping SSR'd values in `style:` directive ([#8085](https://github.com/sveltejs/svelte/issues/8085)) ## 3.53.1 From aa5a1cdf1a21845f8d174ebadee76564394daa81 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 6 Dec 2022 14:25:16 -0500 Subject: [PATCH 045/125] -> v3.54.0 --- CHANGELOG.md | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 315db36a18..30e5136d0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 3.54.0 * Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918)) * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) diff --git a/package-lock.json b/package-lock.json index 59c853fa4b..d57d0b3436 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "svelte", - "version": "3.53.1", + "version": "3.54.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "svelte", - "version": "3.53.1", + "version": "3.54.0", "license": "MIT", "devDependencies": { "@ampproject/remapping": "^0.3.0", diff --git a/package.json b/package.json index 4fde354b6a..7996fd5583 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.53.1", + "version": "3.54.0", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", From a0a6bd1f546096d9e5cac8edbec7b21d5f2d580e Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 7 Dec 2022 11:04:50 -0800 Subject: [PATCH 046/125] [docs] add some basic docs about bundler plugins (#8092) --- site/content/docs/01-getting-started.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md index 48cdbcc231..03dfb4bbcf 100644 --- a/site/content/docs/01-getting-started.md +++ b/site/content/docs/01-getting-started.md @@ -6,17 +6,16 @@ title: Getting started To try Svelte in an interactive online environment you can try [the REPL](https://svelte.dev/repl) or [StackBlitz](https://node.new/svelte). -To create a project locally, run: - +To create a project locally we recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team: ``` -npm create vite@latest myapp -- --template svelte +npm create svelte@latest myapp cd myapp npm install npm run dev ``` -Or use [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team (currently in release candidate status). +SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. [SvelteKit](https://kit.svelte.dev/) utilizes [Vite](https://vitejs.dev/) to build your code and handle server-side rendering (SSR). There are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation, which will output `.js` and `.css` that you can insert into your HTML, but most others won't handle SSR. -The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and the Svelte community has created a list of integrations with various other [tooling and editors](https://sveltesociety.dev/tools). +The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well. If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte). From 512eda7a84c342b2798b2e5cffcd16068744d798 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Sun, 11 Dec 2022 21:45:11 +0100 Subject: [PATCH 047/125] [feat] add html typings (#7649) This adds typings for HTML elements and their attributes. It's supposed to be used by the new transformation in language-tools. Co-authored-by: Ignatius Bagus Co-authored-by: Lyu, Wei-Da <36730922+jasonlyu123@users.noreply.github.com> --- CHANGELOG.md | 4 + elements/index.d.ts | 1581 +++++++++++++++++++++++++++++++++++++++++ elements/package.json | 3 + package.json | 4 + 4 files changed, 1592 insertions(+) create mode 100644 elements/index.d.ts create mode 100644 elements/package.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 30e5136d0f..a92cb4472c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Add `svelte/elements` for HTML/Svelte typings ([#7649](https://github.com/sveltejs/svelte/pull/7649)) + ## 3.54.0 * Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918)) diff --git a/elements/index.d.ts b/elements/index.d.ts new file mode 100644 index 0000000000..2534bfaf40 --- /dev/null +++ b/elements/index.d.ts @@ -0,0 +1,1581 @@ +// Type definitions for Svelte HTML, based on JSX React 18 typings +// Original Project/Authors: +// Type definitions for React 18.0 +// Project: http://facebook.github.io/react/ +// Definitions by: Asana +// AssureSign +// Microsoft +// John Reilly +// Benoit Benezech +// Patricio Zavolinsky +// Eric Anderson +// Dovydas Navickas +// Josh Rutherford +// Guilherme HΓΌbner +// Ferdy Budhidharma +// Johann Rakotoharisoa +// Olivier Pascal +// Martin Hochel +// Frank Li +// Jessica Franco +// Saransh Kataria +// Kanitkorn Sujautra +// Sebastian Silbermann +// Kyle Scully +// Cong Zhang +// Dimitri Mitropoulos +// JongChan Choi +// Victor MagalhΓ£es +// Dale Tan +// Priyanshu Rav +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +// Note: We also allow `null` as a valid value because Svelte treats this the same as `undefined` + +type Booleanish = boolean | 'true' | 'false'; + +// +// Event Handler Types +// ---------------------------------------------------------------------- + +type EventHandler = +(event: E & { currentTarget: EventTarget & T}) => any; + +export type ClipboardEventHandler = EventHandler; +export type CompositionEventHandler = EventHandler; +export type DragEventHandler = EventHandler; +export type FocusEventHandler = EventHandler; +export type FormEventHandler = EventHandler; +export type ChangeEventHandler = EventHandler; +export type KeyboardEventHandler = EventHandler; +export type MouseEventHandler = EventHandler; +export type TouchEventHandler = EventHandler; +export type PointerEventHandler = EventHandler; +export type UIEventHandler = EventHandler; +export type WheelEventHandler = EventHandler; +export type AnimationEventHandler = EventHandler; +export type TransitionEventHandler = EventHandler; +export type MessageEventHandler = EventHandler; + +// +// DOM Attributes +// ---------------------------------------------------------------------- + +export interface DOMAttributes { + // Clipboard Events + 'on:copy'?: ClipboardEventHandler | undefined | null; + 'on:cut'?: ClipboardEventHandler | undefined | null; + 'on:paste'?: ClipboardEventHandler | undefined | null; + + // Composition Events + 'on:compositionend'?: CompositionEventHandler | undefined | null; + 'on:compositionstart'?: CompositionEventHandler | undefined | null; + 'on:compositionupdate'?: CompositionEventHandler | undefined | null; + + // Focus Events + 'on:focus'?: FocusEventHandler | undefined | null; + 'on:focusin'?: FocusEventHandler | undefined | null; + 'on:focusout'?: FocusEventHandler | undefined | null; + 'on:blur'?: FocusEventHandler | undefined | null; + + // Form Events + 'on:change'?: FormEventHandler | undefined | null; + 'on:beforeinput'?: EventHandler | undefined | null; + 'on:input'?: FormEventHandler | undefined | null; + 'on:reset'?: FormEventHandler | undefined | null; + 'on:submit'?: EventHandler | undefined | null; // TODO make this SubmitEvent once we require TS>=4.4 + 'on:invalid'?: EventHandler | undefined | null; + 'on:formdata'?: EventHandler | undefined | null; // TODO make this FormDataEvent once we require TS>=4.4 + + // Image Events + 'on:load'?: EventHandler | undefined | null; + 'on:error'?: EventHandler | undefined | null; // also a Media Event + + // Detail Events + 'on:toggle'?: EventHandler | undefined | null; + + // Keyboard Events + 'on:keydown'?: KeyboardEventHandler | undefined | null; + 'on:keypress'?: KeyboardEventHandler | undefined | null; + 'on:keyup'?: KeyboardEventHandler | undefined | null; + + // Media Events + 'on:abort'?: EventHandler | undefined | null; + 'on:canplay'?: EventHandler | undefined | null; + 'on:canplaythrough'?: EventHandler | undefined | null; + 'on:cuechange'?: EventHandler | undefined | null; + 'on:durationchange'?: EventHandler | undefined | null; + 'on:emptied'?: EventHandler | undefined | null; + 'on:encrypted'?: EventHandler | undefined | null; + 'on:ended'?: EventHandler | undefined | null; + 'on:loadeddata'?: EventHandler | undefined | null; + 'on:loadedmetadata'?: EventHandler | undefined | null; + 'on:loadstart'?: EventHandler | undefined | null; + 'on:pause'?: EventHandler | undefined | null; + 'on:play'?: EventHandler | undefined | null; + 'on:playing'?: EventHandler | undefined | null; + 'on:progress'?: EventHandler | undefined | null; + 'on:ratechange'?: EventHandler | undefined | null; + 'on:seeked'?: EventHandler | undefined | null; + 'on:seeking'?: EventHandler | undefined | null; + 'on:stalled'?: EventHandler | undefined | null; + 'on:suspend'?: EventHandler | undefined | null; + 'on:timeupdate'?: EventHandler | undefined | null; + 'on:volumechange'?: EventHandler | undefined | null; + 'on:waiting'?: EventHandler | undefined | null; + + // MouseEvents + 'on:auxclick'?: MouseEventHandler | undefined | null; + 'on:click'?: MouseEventHandler | undefined | null; + 'on:contextmenu'?: MouseEventHandler | undefined | null; + 'on:dblclick'?: MouseEventHandler | undefined | null; + 'on:drag'?: DragEventHandler | undefined | null; + 'on:dragend'?: DragEventHandler | undefined | null; + 'on:dragenter'?: DragEventHandler | undefined | null; + 'on:dragexit'?: DragEventHandler | undefined | null; + 'on:dragleave'?: DragEventHandler | undefined | null; + 'on:dragover'?: DragEventHandler | undefined | null; + 'on:dragstart'?: DragEventHandler | undefined | null; + 'on:drop'?: DragEventHandler | undefined | null; + 'on:mousedown'?: MouseEventHandler | undefined | null; + 'on:mouseenter'?: MouseEventHandler | undefined | null; + 'on:mouseleave'?: MouseEventHandler | undefined | null; + 'on:mousemove'?: MouseEventHandler | undefined | null; + 'on:mouseout'?: MouseEventHandler | undefined | null; + 'on:mouseover'?: MouseEventHandler | undefined | null; + 'on:mouseup'?: MouseEventHandler | undefined | null; + + // Selection Events + 'on:select'?: EventHandler | undefined | null; + 'on:selectionchange'?: EventHandler | undefined | null; + 'on:selectstart'?: EventHandler | undefined | null; + + // Touch Events + 'on:touchcancel'?: TouchEventHandler | undefined | null; + 'on:touchend'?: TouchEventHandler | undefined | null; + 'on:touchmove'?: TouchEventHandler | undefined | null; + 'on:touchstart'?: TouchEventHandler | undefined | null; + + // Pointer Events + 'on:gotpointercapture'?: PointerEventHandler | undefined | null; + 'on:pointercancel'?: PointerEventHandler | undefined | null; + 'on:pointerdown'?: PointerEventHandler | undefined | null; + 'on:pointerenter'?: PointerEventHandler | undefined | null; + 'on:pointerleave'?: PointerEventHandler | undefined | null; + 'on:pointermove'?: PointerEventHandler | undefined | null; + 'on:pointerout'?: PointerEventHandler | undefined | null; + 'on:pointerover'?: PointerEventHandler | undefined | null; + 'on:pointerup'?: PointerEventHandler | undefined | null; + 'on:lostpointercapture'?: PointerEventHandler | undefined | null; + + // UI Events + 'on:scroll'?: UIEventHandler | undefined | null; + 'on:resize'?: UIEventHandler | undefined | null; + + // Wheel Events + 'on:wheel'?: WheelEventHandler | undefined | null; + + // Animation Events + 'on:animationstart'?: AnimationEventHandler | undefined | null; + 'on:animationend'?: AnimationEventHandler | undefined | null; + 'on:animationiteration'?: AnimationEventHandler | undefined | null; + + // Transition Events + 'on:transitionstart'?: TransitionEventHandler | undefined | null; + 'on:transitionrun'?: TransitionEventHandler | undefined | null; + 'on:transitionend'?: TransitionEventHandler | undefined | null; + 'on:transitioncancel'?: TransitionEventHandler | undefined | null; + + // Svelte Transition Events + 'on:outrostart'?: EventHandler, T> | undefined | null; + 'on:outroend'?: EventHandler, T> | undefined | null; + 'on:introstart'?: EventHandler, T> | undefined | null; + 'on:introend'?: EventHandler, T> | undefined | null; + + // Message Events + 'on:message'?: MessageEventHandler | undefined | null; + 'on:messageerror'?: MessageEventHandler | undefined | null; + + // Global Events + 'on:cancel'?: EventHandler | undefined | null; + 'on:close'?: EventHandler | undefined | null; + 'on:fullscreenchange'?: EventHandler | undefined | null; + 'on:fullscreenerror'?: EventHandler | undefined | null; +} + +// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ +export interface AriaAttributes { + /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ + 'aria-activedescendant'?: string | undefined | null; + /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */ + 'aria-atomic'?: Booleanish | undefined | null; + /** + * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be + * presented if they are made. + */ + 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined | null; + /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */ + 'aria-busy'?: Booleanish | undefined | null; + /** + * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. + * @see aria-pressed @see aria-selected. + */ + 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined | null; + /** + * Defines the total number of columns in a table, grid, or treegrid. + * @see aria-colindex. + */ + 'aria-colcount'?: number | undefined | null; + /** + * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. + * @see aria-colcount @see aria-colspan. + */ + 'aria-colindex'?: number | undefined | null; + /** + * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-colindex @see aria-rowspan. + */ + 'aria-colspan'?: number | undefined | null; + /** + * Identifies the element (or elements) whose contents or presence are controlled by the current element. + * @see aria-owns. + */ + 'aria-controls'?: string | undefined | null; + /** Indicates the element that represents the current item within a container or set of related elements. */ + 'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time' | undefined | null; + /** + * Identifies the element (or elements) that describes the object. + * @see aria-labelledby + */ + 'aria-describedby'?: string | undefined | null; + /** + * Identifies the element that provides a detailed, extended description for the object. + * @see aria-describedby. + */ + 'aria-details'?: string | undefined | null; + /** + * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. + * @see aria-hidden @see aria-readonly. + */ + 'aria-disabled'?: Booleanish | undefined | null; + /** + * Indicates what functions can be performed when a dragged object is released on the drop target. + * @deprecated in ARIA 1.1 + */ + 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined | null; + /** + * Identifies the element that provides an error message for the object. + * @see aria-invalid @see aria-describedby. + */ + 'aria-errormessage'?: string | undefined | null; + /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ + 'aria-expanded'?: Booleanish | undefined | null; + /** + * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, + * allows assistive technology to override the general default of reading in document source order. + */ + 'aria-flowto'?: string | undefined | null; + /** + * Indicates an element's "grabbed" state in a drag-and-drop operation. + * @deprecated in ARIA 1.1 + */ + 'aria-grabbed'?: Booleanish | undefined | null; + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined | null; + /** + * Indicates whether the element is exposed to an accessibility API. + * @see aria-disabled. + */ + 'aria-hidden'?: Booleanish | undefined | null; + /** + * Indicates the entered value does not conform to the format expected by the application. + * @see aria-errormessage. + */ + 'aria-invalid'?: Booleanish | 'grammar' | 'spelling' | undefined | null; + /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ + 'aria-keyshortcuts'?: string | undefined | null; + /** + * Defines a string value that labels the current element. + * @see aria-labelledby. + */ + 'aria-label'?: string | undefined | null; + /** + * Identifies the element (or elements) that labels the current element. + * @see aria-describedby. + */ + 'aria-labelledby'?: string | undefined | null; + /** Defines the hierarchical level of an element within a structure. */ + 'aria-level'?: number | undefined | null; + /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */ + 'aria-live'?: 'off' | 'assertive' | 'polite' | undefined | null; + /** Indicates whether an element is modal when displayed. */ + 'aria-modal'?: Booleanish | undefined | null; + /** Indicates whether a text box accepts multiple lines of input or only a single line. */ + 'aria-multiline'?: Booleanish | undefined | null; + /** Indicates that the user may select more than one item from the current selectable descendants. */ + 'aria-multiselectable'?: Booleanish | undefined | null; + /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ + 'aria-orientation'?: 'horizontal' | 'vertical' | undefined | null; + /** + * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship + * between DOM elements where the DOM hierarchy cannot be used to represent the relationship. + * @see aria-controls. + */ + 'aria-owns'?: string | undefined | null; + /** + * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. + * A hint could be a sample value or a brief description of the expected format. + */ + 'aria-placeholder'?: string | undefined | null; + /** + * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-setsize. + */ + 'aria-posinset'?: number | undefined | null; + /** + * Indicates the current "pressed" state of toggle buttons. + * @see aria-checked @see aria-selected. + */ + 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined | null; + /** + * Indicates that the element is not editable, but is otherwise operable. + * @see aria-disabled. + */ + 'aria-readonly'?: Booleanish | undefined | null; + /** + * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. + * @see aria-atomic. + */ + 'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined | null; + /** Indicates that user input is required on the element before a form may be submitted. */ + 'aria-required'?: Booleanish | undefined | null; + /** Defines a human-readable, author-localized description for the role of an element. */ + 'aria-roledescription'?: string | undefined | null; + /** + * Defines the total number of rows in a table, grid, or treegrid. + * @see aria-rowindex. + */ + 'aria-rowcount'?: number | undefined | null; + /** + * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. + * @see aria-rowcount @see aria-rowspan. + */ + 'aria-rowindex'?: number | undefined | null; + /** + * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-rowindex @see aria-colspan. + */ + 'aria-rowspan'?: number | undefined | null; + /** + * Indicates the current "selected" state of various widgets. + * @see aria-checked @see aria-pressed. + */ + 'aria-selected'?: Booleanish | undefined | null; + /** + * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-posinset. + */ + 'aria-setsize'?: number | undefined | null; + /** Indicates if items in a table or grid are sorted in ascending or descending order. */ + 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined | null; + /** Defines the maximum allowed value for a range widget. */ + 'aria-valuemax'?: number | undefined | null; + /** Defines the minimum allowed value for a range widget. */ + 'aria-valuemin'?: number | undefined | null; + /** + * Defines the current value for a range widget. + * @see aria-valuetext. + */ + 'aria-valuenow'?: number | undefined | null; + /** Defines the human readable text alternative of aria-valuenow for a range widget. */ + 'aria-valuetext'?: string | undefined | null; +} + +// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions +export type AriaRole = + | 'alert' + | 'alertdialog' + | 'application' + | 'article' + | 'banner' + | 'button' + | 'cell' + | 'checkbox' + | 'columnheader' + | 'combobox' + | 'complementary' + | 'contentinfo' + | 'definition' + | 'dialog' + | 'directory' + | 'document' + | 'feed' + | 'figure' + | 'form' + | 'grid' + | 'gridcell' + | 'group' + | 'heading' + | 'img' + | 'link' + | 'list' + | 'listbox' + | 'listitem' + | 'log' + | 'main' + | 'marquee' + | 'math' + | 'menu' + | 'menubar' + | 'menuitem' + | 'menuitemcheckbox' + | 'menuitemradio' + | 'navigation' + | 'none' + | 'note' + | 'option' + | 'presentation' + | 'progressbar' + | 'radio' + | 'radiogroup' + | 'region' + | 'row' + | 'rowgroup' + | 'rowheader' + | 'scrollbar' + | 'search' + | 'searchbox' + | 'separator' + | 'slider' + | 'spinbutton' + | 'status' + | 'switch' + | 'tab' + | 'table' + | 'tablist' + | 'tabpanel' + | 'term' + | 'textbox' + | 'timer' + | 'toolbar' + | 'tooltip' + | 'tree' + | 'treegrid' + | 'treeitem' + | (string & {}); + +export interface HTMLAttributes extends AriaAttributes, DOMAttributes { + // Standard HTML Attributes + accesskey?: string | undefined | null; + autofocus?: boolean | undefined | null; + class?: string | undefined | null; + contenteditable?: Booleanish | 'inherit' | undefined | null; + contextmenu?: string | undefined | null; + dir?: string | undefined | null; + draggable?: Booleanish | undefined | null; + enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined | null; + hidden?: boolean | undefined | null; + id?: string | undefined | null; + lang?: string | undefined | null; + placeholder?: string | undefined | null; + slot?: string | undefined | null; + spellcheck?: Booleanish | undefined | null; + style?: string | undefined | null; + tabindex?: number | undefined | null; + title?: string | undefined | null; + translate?: 'yes' | 'no' | '' | undefined | null; + inert?: boolean | undefined | null; + + // Unknown + radiogroup?: string | undefined | null; // , + + // WAI-ARIA + role?: AriaRole | undefined | null; + + // RDFa Attributes + about?: string | undefined | null; + datatype?: string | undefined | null; + inlist?: any; + prefix?: string | undefined | null; + property?: string | undefined | null; + resource?: string | undefined | null; + typeof?: string | undefined | null; + vocab?: string | undefined | null; + + // Non-standard Attributes + autocapitalize?: string | undefined | null; + autocorrect?: string | undefined | null; + autosave?: string | undefined | null; + color?: string | undefined | null; + itemprop?: string | undefined | null; + itemscope?: boolean | undefined | null; + itemtype?: string | undefined | null; + itemid?: string | undefined | null; + itemref?: string | undefined | null; + results?: number | undefined | null; + security?: string | undefined | null; + unselectable?: 'on' | 'off' | undefined | null; + + // Living Standard + /** + * Hints at the type of data that might be entered by the user while editing the element or its contents + * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute + */ + inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined | null; + /** + * Specify that a standard HTML element should behave like a defined custom built-in element + * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is + */ + is?: string | undefined | null; + + /** + * Elements with the contenteditable attribute support innerHTML and textContent bindings. + */ + 'bind:innerHTML'?: string | undefined | null; + /** + * Elements with the contenteditable attribute support innerHTML and textContent bindings. + */ + 'bind:textContent'?: string | undefined | null; + + // SvelteKit + 'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null; + 'data-sveltekit-preload-code'?: true | '' | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null; + 'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null; + 'data-sveltekit-reload'?: true | '' | 'off' | undefined | null; +} + +export type HTMLAttributeAnchorTarget = + | '_self' + | '_blank' + | '_parent' + | '_top' + | (string & {}); + +export interface HTMLAnchorAttributes extends HTMLAttributes { + download?: any; + href?: string | undefined | null; + hreflang?: string | undefined | null; + media?: string | undefined | null; + ping?: string | undefined | null; + rel?: string | undefined | null; + target?: HTMLAttributeAnchorTarget | undefined | null; + type?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + + // Sapper + 'sapper:noscroll'?: true | undefined | null; + 'sapper:prefetch'?: true | undefined | null; +} + +export interface HTMLAudioAttributes extends HTMLMediaAttributes {} + +export interface HTMLAreaAttributes extends HTMLAttributes { + alt?: string | undefined | null; + coords?: string | undefined | null; + download?: any; + href?: string | undefined | null; + hreflang?: string | undefined | null; + media?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + rel?: string | undefined | null; + shape?: string | undefined | null; + target?: string | undefined | null; + ping?: string | undefined | null; +} + +export interface HTMLBaseAttributes extends HTMLAttributes { + href?: string | undefined | null; + target?: string | undefined | null; +} + +export interface HTMLBlockquoteAttributes extends HTMLAttributes { + cite?: string | undefined | null; +} + +export interface HTMLButtonAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + form?: string | undefined | null; + formaction?: string | undefined | null; + formenctype?: string | undefined | null; + formmethod?: string | undefined | null; + formnovalidate?: boolean | undefined | null; + formtarget?: string | undefined | null; + name?: string | undefined | null; + type?: 'submit' | 'reset' | 'button' | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLCanvasAttributes extends HTMLAttributes { + height?: number | string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLColAttributes extends HTMLAttributes { + span?: number | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLColgroupAttributes extends HTMLAttributes { + span?: number | undefined | null; +} + +export interface HTMLDataAttributes extends HTMLAttributes { + value?: string | string[] | number | undefined | null; +} + +export interface HTMLDetailsAttributes extends HTMLAttributes { + open?: boolean | undefined | null; + + 'bind:open'?: boolean | undefined | null; +} + +export interface HTMLDelAttributes extends HTMLAttributes { + cite?: string | undefined | null; + datetime?: string | undefined | null; +} + +export interface HTMLDialogAttributes extends HTMLAttributes { + open?: boolean | undefined | null; +} + +export interface HTMLEmbedAttributes extends HTMLAttributes { + height?: number | string | undefined | null; + src?: string | undefined | null; + type?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLFieldsetAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + form?: string | undefined | null; + name?: string | undefined | null; +} + +export interface HTMLFormAttributes extends HTMLAttributes { + acceptcharset?: string | undefined | null; + action?: string | undefined | null; + autocomplete?: string | undefined | null; + enctype?: string | undefined | null; + method?: string | undefined | null; + name?: string | undefined | null; + novalidate?: boolean | undefined | null; + target?: string | undefined | null; + rel?: string | undefined | null; +} + +export interface HTMLHtmlAttributes extends HTMLAttributes { + manifest?: string | undefined | null; +} + +export interface HTMLIframeAttributes extends HTMLAttributes { + allow?: string | undefined | null; + allowfullscreen?: boolean | undefined | null; + allowtransparency?: boolean | undefined | null; + /** @deprecated */ + frameborder?: number | string | undefined | null; + height?: number | string | undefined | null; + loading?: 'eager' | 'lazy' | undefined | null; + /** @deprecated */ + marginheight?: number | undefined | null; + /** @deprecated */ + marginwidth?: number | undefined | null; + name?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + sandbox?: string | undefined | null; + /** @deprecated */ + scrolling?: string | undefined | null; + seamless?: boolean | undefined | null; + src?: string | undefined | null; + srcdoc?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLImgAttributes extends HTMLAttributes { + alt?: string | undefined | null; + crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null; + decoding?: 'async' | 'auto' | 'sync' | undefined | null; + height?: number | string | undefined | null; + ismap?: boolean | undefined | null; + loading?: 'eager' | 'lazy' | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + sizes?: string | undefined | null; + src?: string | undefined | null; + srcset?: string | undefined | null; + usemap?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLInsAttributes extends HTMLAttributes { + cite?: string | undefined | null; + datetime?: string | undefined | null; +} + +export type HTMLInputTypeAttribute = + | 'button' + | 'checkbox' + | 'color' + | 'date' + | 'datetime-local' + | 'email' + | 'file' + | 'hidden' + | 'image' + | 'month' + | 'number' + | 'password' + | 'radio' + | 'range' + | 'reset' + | 'search' + | 'submit' + | 'tel' + | 'text' + | 'time' + | 'url' + | 'week' + | (string & {}); + +export interface HTMLInputAttributes extends HTMLAttributes { + accept?: string | undefined | null; + alt?: string | undefined | null; + autocomplete?: string | undefined | null; + capture?: boolean | 'user' | 'environment' | undefined | null; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute + checked?: boolean | undefined | null; + crossorigin?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + formaction?: string | undefined | null; + formenctype?: string | undefined | null; + formmethod?: string | undefined | null; + formnovalidate?: boolean | undefined | null; + formtarget?: string | undefined | null; + height?: number | string | undefined | null; + list?: string | undefined | null; + max?: number | string | undefined | null; + maxlength?: number | undefined | null; + min?: number | string | undefined | null; + minlength?: number | undefined | null; + multiple?: boolean | undefined | null; + name?: string | undefined | null; + pattern?: string | undefined | null; + placeholder?: string | undefined | null; + readonly?: boolean | undefined | null; + required?: boolean | undefined | null; + size?: number | undefined | null; + src?: string | undefined | null; + step?: number | string | undefined | null; + type?: HTMLInputTypeAttribute | undefined | null; + value?: any; + width?: number | string | undefined | null; + + 'on:change'?: ChangeEventHandler | undefined | null; + + 'bind:checked'?: boolean | undefined | null; + 'bind:value'?: any; + 'bind:group'?: any | undefined | null; + 'bind:files'?: FileList | undefined | null; + 'bind:indeterminate'?: boolean | undefined | null; +} + +export interface HTMLKeygenAttributes extends HTMLAttributes { + challenge?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + keytype?: string | undefined | null; + keyparams?: string | undefined | null; + name?: string | undefined | null; +} + +export interface HTMLLabelAttributes extends HTMLAttributes { + form?: string | undefined | null; + for?: string | undefined | null; +} + +export interface HTMLLiAttributes extends HTMLAttributes { + value?: string | string[] | number | undefined | null; +} + +export interface HTMLLinkAttributes extends HTMLAttributes { + as?: string | undefined | null; + crossorigin?: string | undefined | null; + href?: string | undefined | null; + hreflang?: string | undefined | null; + integrity?: string | undefined | null; + media?: string | undefined | null; + imagesrcset?: string | undefined | null; + imagesizes?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + rel?: string | undefined | null; + sizes?: string | undefined | null; + type?: string | undefined | null; + charset?: string | undefined | null; +} + +export interface HTMLMapAttributes extends HTMLAttributes { + name?: string | undefined | null; +} + +export interface HTMLMenuAttributes extends HTMLAttributes { + type?: string | undefined | null; +} + +export interface HTMLMediaAttributes extends HTMLAttributes { + autoplay?: boolean | undefined | null; + controls?: boolean | undefined | null; + controlslist?: 'nodownload' | 'nofullscreen' | 'noplaybackrate' | 'noremoteplayback' | (string & {}) | undefined | null; + crossorigin?: string | undefined | null; + currenttime?: number | undefined | null; + defaultmuted?: boolean | undefined | null; + defaultplaybackrate?: number | undefined | null; + loop?: boolean | undefined | null; + mediagroup?: string | undefined | null; + muted?: boolean | undefined | null; + playsinline?: boolean | undefined | null; + preload?: string | undefined | null; + src?: string | undefined | null; + /** + * a value between 0 and 1 + */ + volume?: number | undefined | null; + + readonly 'bind:duration'?: number | undefined | null; + readonly 'bind:buffered'?: SvelteMediaTimeRange[] | undefined | null; + readonly 'bind:played'?: SvelteMediaTimeRange[] | undefined | null; + readonly 'bind:seekable'?: SvelteMediaTimeRange[] | undefined | null; + readonly 'bind:seeking'?: boolean | undefined | null; + readonly 'bind:ended'?: boolean | undefined | null; + 'bind:muted'?: boolean | undefined | null; + 'bind:volume'?: number | undefined | null; + /** + * the current playback time in the video, in seconds + */ + 'bind:currentTime'?: number | undefined | null; + /** + * how fast or slow to play the video, where 1 is 'normal' + */ + 'bind:playbackRate'?: number | undefined | null; + 'bind:paused'?: boolean | undefined | null; +} + +export interface HTMLMetaAttributes extends HTMLAttributes { + charSet?: string | undefined | null; + content?: string | undefined | null; + httpequiv?: string | undefined | null; + name?: string | undefined | null; + media?: string | undefined | null; +} + +export interface HTMLMeterAttributes extends HTMLAttributes { + form?: string | undefined | null; + high?: number | undefined | null; + low?: number | undefined | null; + max?: number | string | undefined | null; + min?: number | string | undefined | null; + optimum?: number | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLQuoteAttributes extends HTMLAttributes { + cite?: string | undefined | null; +} + +export interface HTMLObjectAttributes extends HTMLAttributes { + classid?: string | undefined | null; + data?: string | undefined | null; + form?: string | undefined | null; + height?: number | string | undefined | null; + name?: string | undefined | null; + type?: string | undefined | null; + usemap?: string | undefined | null; + width?: number | string | undefined | null; + wmode?: string | undefined | null; +} + +export interface HTMLOlAttributes extends HTMLAttributes { + reversed?: boolean | undefined | null; + start?: number | undefined | null; + type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined | null; +} + +export interface HTMLOptgroupAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + label?: string | undefined | null; +} + +export interface HTMLOptionAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + label?: string | undefined | null; + selected?: boolean | undefined | null; + value?: any; +} + +export interface HTMLOutputAttributes extends HTMLAttributes { + form?: string | undefined | null; + for?: string | undefined | null; + name?: string | undefined | null; +} + +export interface HTMLParamAttributes extends HTMLAttributes { + name?: string | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLProgressAttributes extends HTMLAttributes { + max?: number | string | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLSlotAttributes extends HTMLAttributes { + name?: string | undefined | null; +} + +export interface HTMLScriptAttributes extends HTMLAttributes { + async?: boolean | undefined | null; + /** @deprecated */ + charset?: string | undefined | null; + crossorigin?: string | undefined | null; + defer?: boolean | undefined | null; + integrity?: string | undefined | null; + nomodule?: boolean | undefined | null; + nonce?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + src?: string | undefined | null; + type?: string | undefined | null; +} + +export interface HTMLSelectAttributes extends HTMLAttributes { + autocomplete?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + multiple?: boolean | undefined | null; + name?: string | undefined | null; + required?: boolean | undefined | null; + size?: number | undefined | null; + value?: any; + + 'on:change'?: ChangeEventHandler | undefined | null; + + 'bind:value'?: any; +} + +export interface HTMLSourceAttributes extends HTMLAttributes { + height?: number | string | undefined | null; + media?: string | undefined | null; + sizes?: string | undefined | null; + src?: string | undefined | null; + srcset?: string | undefined | null; + type?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLStyleAttributes extends HTMLAttributes { + media?: string | undefined | null; + nonce?: string | undefined | null; + scoped?: boolean | undefined | null; + type?: string | undefined | null; +} + +export interface HTMLTableAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | undefined | null; + bgcolor?: string | undefined | null; + border?: number | undefined | null; + cellpadding?: number | string | undefined | null; + cellspacing?: number | string | undefined | null; + frame?: boolean | undefined | null; + rules?: 'none' | 'groups' | 'rows' | 'columns' | 'all' | undefined | null; + summary?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLTextareaAttributes extends HTMLAttributes { + autocomplete?: string | undefined | null; + cols?: number | undefined | null; + dirname?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + maxlength?: number | undefined | null; + minlength?: number | undefined | null; + name?: string | undefined | null; + placeholder?: string | undefined | null; + readonly?: boolean | undefined | null; + required?: boolean | undefined | null; + rows?: number | undefined | null; + value?: string | string[] | number | undefined | null; + wrap?: string | undefined | null; + + 'on:change'?: ChangeEventHandler | undefined | null; + + 'bind:value'?: any; +} + +export interface HTMLTdAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined | null; + colspan?: number | undefined | null; + headers?: string | undefined | null; + rowspan?: number | undefined | null; + scope?: string | undefined | null; + abbr?: string | undefined | null; + height?: number | string | undefined | null; + width?: number | string | undefined | null; + valign?: 'top' | 'middle' | 'bottom' | 'baseline' | undefined | null; +} + +export interface HTMLThAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined | null; + colspan?: number | undefined | null; + headers?: string | undefined | null; + rowspan?: number | undefined | null; + scope?: string | undefined | null; + abbr?: string | undefined | null; +} + +export interface HTMLTimeAttributes extends HTMLAttributes { + datetime?: string | undefined | null; +} + +export interface HTMLTrackAttributes extends HTMLAttributes { + default?: boolean | undefined | null; + kind?: string | undefined | null; + label?: string | undefined | null; + src?: string | undefined | null; + srclang?: string | undefined | null; +} + +export interface HTMLVideoAttributes extends HTMLMediaAttributes { + height?: number | string | undefined | null; + playsinline?: boolean | undefined | null; + poster?: string | undefined | null; + width?: number | string | undefined | null; + disablepictureinpicture?: boolean | undefined | null; + disableremoteplayback?: boolean | undefined | null; + + readonly 'bind:videoWidth'?: number | undefined | null; + readonly 'bind:videoHeight'?: number | undefined | null; +} + +export interface SvelteMediaTimeRange { + start: number; + end: number; +} + +export interface SvelteWindowAttributes extends HTMLAttributes { + readonly 'bind:innerWidth'?: Window['innerWidth'] | undefined | null; + readonly 'bind:innerHeight'?: Window['innerHeight'] | undefined | null; + readonly 'bind:outerWidth'?: Window['outerWidth'] | undefined | null; + readonly 'bind:outerHeight'?: Window['outerHeight'] | undefined | null; + 'bind:scrollX'?: Window['scrollX'] | undefined | null; + 'bind:scrollY'?: Window['scrollY'] | undefined | null; + readonly 'bind:online'?: Window['navigator']['onLine'] | undefined | null; + + // SvelteKit + 'on:sveltekit:start'?: EventHandler | undefined | null; + 'on:sveltekit:navigation-start'?: EventHandler | undefined | null; + 'on:sveltekit:navigation-end'?: EventHandler | undefined | null; + + 'on:devicelight'?: EventHandler | undefined | null; + 'on:beforeinstallprompt'?: EventHandler | undefined | null; + 'on:deviceproximity'?: EventHandler | undefined | null; + 'on:paint'?: EventHandler | undefined | null; + 'on:userproximity'?: EventHandler | undefined | null; + 'on:beforeprint'?: EventHandler | undefined | null; + 'on:afterprint'?: EventHandler | undefined | null; + 'on:languagechange'?: EventHandler | undefined | null; + 'on:orientationchange'?: EventHandler | undefined | null; + 'on:message'?: EventHandler | undefined | null; + 'on:messageerror'?: EventHandler | undefined | null; + 'on:offline'?: EventHandler | undefined | null; + 'on:online'?: EventHandler | undefined | null; + 'on:beforeunload'?: EventHandler | undefined | null; + 'on:unload'?: EventHandler | undefined | null; + 'on:storage'?: EventHandler | undefined | null; + 'on:hashchange'?: EventHandler | undefined | null; + 'on:pagehide'?: EventHandler | undefined | null; + 'on:pageshow'?: EventHandler | undefined | null; + 'on:popstate'?: EventHandler | undefined | null; + 'on:devicemotion'?: EventHandler | undefined | null; + 'on:deviceorientation'?: EventHandler | undefined | null; + 'on:deviceorientationabsolute'?: EventHandler | undefined | null; + 'on:unhandledrejection'?: EventHandler | undefined | null; + 'on:rejectionhandled'?: EventHandler | undefined | null; +} + +export interface SVGAttributes extends AriaAttributes, DOMAttributes { + // Attributes which also defined in HTMLAttributes + className?: string | undefined | null; + class?: string | undefined | null; + color?: string | undefined | null; + height?: number | string | undefined | null; + id?: string | undefined | null; + lang?: string | undefined | null; + max?: number | string | undefined | null; + media?: string | undefined | null; + method?: string | undefined | null; + min?: number | string | undefined | null; + name?: string | undefined | null; + style?: string | undefined | null; + target?: string | undefined | null; + type?: string | undefined | null; + width?: number | string | undefined | null; + + // Other HTML properties supported by SVG elements in browsers + role?: AriaRole | undefined | null; + tabindex?: number | undefined | null; + crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null; + + // SVG Specific attributes + 'accent-height'?: number | string | undefined | null; + accumulate?: 'none' | 'sum' | undefined | null; + additive?: 'replace' | 'sum' | undefined | null; + 'alignment-baseline'?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | + 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | + 'mathematical' | 'inherit' | undefined | null; + allowReorder?: 'no' | 'yes' | undefined | null; + alphabetic?: number | string | undefined | null; + amplitude?: number | string | undefined | null; + 'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated' | undefined | null; + ascent?: number | string | undefined | null; + attributeName?: string | undefined | null; + attributeType?: string | undefined | null; + autoReverse?: number | string | undefined | null; + azimuth?: number | string | undefined | null; + baseFrequency?: number | string | undefined | null; + 'baseline-shift'?: number | string | undefined | null; + baseProfile?: number | string | undefined | null; + bbox?: number | string | undefined | null; + begin?: number | string | undefined | null; + bias?: number | string | undefined | null; + by?: number | string | undefined | null; + calcMode?: number | string | undefined | null; + 'cap-height'?: number | string | undefined | null; + clip?: number | string | undefined | null; + 'clip-path'?: string | undefined | null; + clipPathUnits?: number | string | undefined | null; + 'clip-rule'?: number | string | undefined | null; + 'color-interpolation'?: number | string | undefined | null; + 'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit' | undefined | null; + 'color-profile'?: number | string | undefined | null; + 'color-rendering'?: number | string | undefined | null; + contentScriptType?: number | string | undefined | null; + contentStyleType?: number | string | undefined | null; + cursor?: number | string | undefined | null; + cx?: number | string | undefined | null; + cy?: number | string | undefined | null; + d?: string | undefined | null; + decelerate?: number | string | undefined | null; + descent?: number | string | undefined | null; + diffuseConstant?: number | string | undefined | null; + direction?: number | string | undefined | null; + display?: number | string | undefined | null; + divisor?: number | string | undefined | null; + 'dominant-baseline'?: number | string | undefined | null; + dur?: number | string | undefined | null; + dx?: number | string | undefined | null; + dy?: number | string | undefined | null; + edgeMode?: number | string | undefined | null; + elevation?: number | string | undefined | null; + 'enable-background'?: number | string | undefined | null; + end?: number | string | undefined | null; + exponent?: number | string | undefined | null; + externalResourcesRequired?: number | string | undefined | null; + fill?: string | undefined | null; + 'fill-opacity'?: number | string | undefined | null; + 'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' | undefined | null; + filter?: string | undefined | null; + filterRes?: number | string | undefined | null; + filterUnits?: number | string | undefined | null; + 'flood-color'?: number | string | undefined | null; + 'flood-opacity'?: number | string | undefined | null; + focusable?: number | string | undefined | null; + 'font-family'?: string | undefined | null; + 'font-size'?: number | string | undefined | null; + 'font-size-adjust'?: number | string | undefined | null; + 'font-stretch'?: number | string | undefined | null; + 'font-style'?: number | string | undefined | null; + 'font-variant'?: number | string | undefined | null; + 'font-weight'?: number | string | undefined | null; + format?: number | string | undefined | null; + from?: number | string | undefined | null; + fx?: number | string | undefined | null; + fy?: number | string | undefined | null; + g1?: number | string | undefined | null; + g2?: number | string | undefined | null; + 'glyph-name'?: number | string | undefined | null; + 'glyph-orientation-horizontal'?: number | string | undefined | null; + 'glyph-orientation-vertical'?: number | string | undefined | null; + glyphRef?: number | string | undefined | null; + gradientTransform?: string | undefined | null; + gradientUnits?: string | undefined | null; + hanging?: number | string | undefined | null; + href?: string | undefined | null; + 'horiz-adv-x'?: number | string | undefined | null; + 'horiz-origin-x'?: number | string | undefined | null; + ideographic?: number | string | undefined | null; + 'image-rendering'?: number | string | undefined | null; + in2?: number | string | undefined | null; + in?: string | undefined | null; + intercept?: number | string | undefined | null; + k1?: number | string | undefined | null; + k2?: number | string | undefined | null; + k3?: number | string | undefined | null; + k4?: number | string | undefined | null; + k?: number | string | undefined | null; + kernelMatrix?: number | string | undefined | null; + kernelUnitLength?: number | string | undefined | null; + kerning?: number | string | undefined | null; + keyPoints?: number | string | undefined | null; + keySplines?: number | string | undefined | null; + keyTimes?: number | string | undefined | null; + lengthAdjust?: number | string | undefined | null; + 'letter-spacing'?: number | string | undefined | null; + 'lighting-color'?: number | string | undefined | null; + limitingConeAngle?: number | string | undefined | null; + local?: number | string | undefined | null; + 'marker-end'?: string | undefined | null; + markerHeight?: number | string | undefined | null; + 'marker-mid'?: string | undefined | null; + 'marker-start'?: string | undefined | null; + markerUnits?: number | string | undefined | null; + markerWidth?: number | string | undefined | null; + mask?: string | undefined | null; + maskContentUnits?: number | string | undefined | null; + maskUnits?: number | string | undefined | null; + mathematical?: number | string | undefined | null; + mode?: number | string | undefined | null; + numOctaves?: number | string | undefined | null; + offset?: number | string | undefined | null; + opacity?: number | string | undefined | null; + operator?: number | string | undefined | null; + order?: number | string | undefined | null; + orient?: number | string | undefined | null; + orientation?: number | string | undefined | null; + origin?: number | string | undefined | null; + overflow?: number | string | undefined | null; + 'overline-position'?: number | string | undefined | null; + 'overline-thickness'?: number | string | undefined | null; + 'paint-order'?: number | string | undefined | null; + 'panose-1'?: number | string | undefined | null; + path?: string | undefined | null; + pathLength?: number | string | undefined | null; + patternContentUnits?: string | undefined | null; + patternTransform?: number | string | undefined | null; + patternUnits?: string | undefined | null; + 'pointer-events'?: number | string | undefined | null; + points?: string | undefined | null; + pointsAtX?: number | string | undefined | null; + pointsAtY?: number | string | undefined | null; + pointsAtZ?: number | string | undefined | null; + preserveAlpha?: number | string | undefined | null; + preserveAspectRatio?: string | undefined | null; + primitiveUnits?: number | string | undefined | null; + r?: number | string | undefined | null; + radius?: number | string | undefined | null; + refX?: number | string | undefined | null; + refY?: number | string | undefined | null; + 'rendering-intent'?: number | string | undefined | null; + repeatCount?: number | string | undefined | null; + repeatDur?: number | string | undefined | null; + requiredExtensions?: number | string | undefined | null; + requiredFeatures?: number | string | undefined | null; + restart?: number | string | undefined | null; + result?: string | undefined | null; + rotate?: number | string | undefined | null; + rx?: number | string | undefined | null; + ry?: number | string | undefined | null; + scale?: number | string | undefined | null; + seed?: number | string | undefined | null; + 'shape-rendering'?: number | string | undefined | null; + slope?: number | string | undefined | null; + spacing?: number | string | undefined | null; + specularConstant?: number | string | undefined | null; + specularExponent?: number | string | undefined | null; + speed?: number | string | undefined | null; + spreadMethod?: string | undefined | null; + startOffset?: number | string | undefined | null; + stdDeviation?: number | string | undefined | null; + stemh?: number | string | undefined | null; + stemv?: number | string | undefined | null; + stitchTiles?: number | string | undefined | null; + 'stop-color'?: string | undefined | null; + 'stop-opacity'?: number | string | undefined | null; + 'strikethrough-position'?: number | string | undefined | null; + 'strikethrough-thickness'?: number | string | undefined | null; + string?: number | string | undefined | null; + stroke?: string | undefined | null; + 'stroke-dasharray'?: string | number | undefined | null; + 'stroke-dashoffset'?: string | number | undefined | null; + 'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit' | undefined | null; + 'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit' | undefined | null; + 'stroke-miterlimit'?: string | undefined | null; + 'stroke-opacity'?: number | string | undefined | null; + 'stroke-width'?: number | string | undefined | null; + surfaceScale?: number | string | undefined | null; + systemLanguage?: number | string | undefined | null; + tableValues?: number | string | undefined | null; + targetX?: number | string | undefined | null; + targetY?: number | string | undefined | null; + 'text-anchor'?: string | undefined | null; + 'text-decoration'?: number | string | undefined | null; + textLength?: number | string | undefined | null; + 'text-rendering'?: number | string | undefined | null; + to?: number | string | undefined | null; + transform?: string | undefined | null; + u1?: number | string | undefined | null; + u2?: number | string | undefined | null; + 'underline-position'?: number | string | undefined | null; + 'underline-thickness'?: number | string | undefined | null; + unicode?: number | string | undefined | null; + 'unicode-bidi'?: number | string | undefined | null; + 'unicode-range'?: number | string | undefined | null; + 'units-per-em'?: number | string | undefined | null; + 'v-alphabetic'?: number | string | undefined | null; + values?: string | undefined | null; + 'vector-effect'?: number | string | undefined | null; + version?: string | undefined | null; + 'vert-adv-y'?: number | string | undefined | null; + 'vert-origin-x'?: number | string | undefined | null; + 'vert-origin-y'?: number | string | undefined | null; + 'v-hanging'?: number | string | undefined | null; + 'v-ideographic'?: number | string | undefined | null; + viewBox?: string | undefined | null; + viewTarget?: number | string | undefined | null; + visibility?: number | string | undefined | null; + 'v-mathematical'?: number | string | undefined | null; + widths?: number | string | undefined | null; + 'word-spacing'?: number | string | undefined | null; + 'writing-mode'?: number | string | undefined | null; + x1?: number | string | undefined | null; + x2?: number | string | undefined | null; + x?: number | string | undefined | null; + xChannelSelector?: string | undefined | null; + 'x-height'?: number | string | undefined | null; + 'xlink:actuate'?: string | undefined | null; + 'xlink:arcrole'?: string | undefined | null; + 'xlink:href'?: string | undefined | null; + 'xlink:role'?: string | undefined | null; + 'xlink:show'?: string | undefined | null; + 'xlink:title'?: string | undefined | null; + 'xlink:type'?: string | undefined | null; + 'xml:base'?: string | undefined | null; + 'xml:lang'?: string | undefined | null; + xmlns?: string | undefined | null; + 'xmlns:xlink'?: string | undefined | null; + 'xml:space'?: string | undefined | null; + y1?: number | string | undefined | null; + y2?: number | string | undefined | null; + y?: number | string | undefined | null; + yChannelSelector?: string | undefined | null; + z?: number | string | undefined | null; + zoomAndPan?: string | undefined | null; +} + +export interface HTMLWebViewAttributes extends HTMLAttributes { + allowfullscreen?: boolean | undefined | null; + allowpopups?: boolean | undefined | null; + autosize?: boolean | undefined | null; + blinkfeatures?: string | undefined | null; + disableblinkfeatures?: string | undefined | null; + disableguestresize?: boolean | undefined | null; + disablewebsecurity?: boolean | undefined | null; + guestinstance?: string | undefined | null; + httpreferrer?: string | undefined | null; + nodeintegration?: boolean | undefined | null; + partition?: string | undefined | null; + plugins?: boolean | undefined | null; + preload?: string | undefined | null; + src?: string | undefined | null; + useragent?: string | undefined | null; + webpreferences?: string | undefined | null; +} + +// +// DOM Elements +// ---------------------------------------------------------------------- + +export interface SvelteHTMLElements { + a: HTMLAnchorAttributes; + abbr: HTMLAttributes; + address: HTMLAttributes; + area: HTMLAreaAttributes; + article: HTMLAttributes; + aside: HTMLAttributes; + audio: HTMLAudioAttributes; + b: HTMLAttributes; + base: HTMLBaseAttributes; + bdi: HTMLAttributes; + bdo: HTMLAttributes; + big: HTMLAttributes; + blockquote: HTMLBlockquoteAttributes; + body: HTMLAttributes; + br: HTMLAttributes; + button: HTMLButtonAttributes; + canvas: HTMLCanvasAttributes; + caption: HTMLAttributes; + cite: HTMLAttributes; + code: HTMLAttributes; + col: HTMLColAttributes; + colgroup: HTMLColgroupAttributes; + data: HTMLDataAttributes; + datalist: HTMLAttributes; + dd: HTMLAttributes; + del: HTMLDelAttributes; + details: HTMLDetailsAttributes; + dfn: HTMLAttributes; + dialog: HTMLDialogAttributes; + div: HTMLAttributes; + dl: HTMLAttributes; + dt: HTMLAttributes; + em: HTMLAttributes; + embed: HTMLEmbedAttributes; + fieldset: HTMLFieldsetAttributes; + figcaption: HTMLAttributes; + figure: HTMLAttributes; + footer: HTMLAttributes; + form: HTMLFormAttributes; + h1: HTMLAttributes; + h2: HTMLAttributes; + h3: HTMLAttributes; + h4: HTMLAttributes; + h5: HTMLAttributes; + h6: HTMLAttributes; + head: HTMLAttributes; + header: HTMLAttributes; + hgroup: HTMLAttributes; + hr: HTMLAttributes; + html: HTMLHtmlAttributes; + i: HTMLAttributes; + iframe: HTMLIframeAttributes; + img: HTMLImgAttributes; + input: HTMLInputAttributes; + ins: HTMLInsAttributes; + kbd: HTMLAttributes; + keygen: HTMLKeygenAttributes; + label: HTMLLabelAttributes; + legend: HTMLAttributes; + li: HTMLLiAttributes; + link: HTMLLinkAttributes; + main: HTMLAttributes; + map: HTMLMapAttributes; + mark: HTMLAttributes; + menu: HTMLMenuAttributes; + menuitem: HTMLAttributes; + meta: HTMLMetaAttributes; + meter: HTMLMeterAttributes; + nav: HTMLAttributes; + noscript: HTMLAttributes; + object: HTMLObjectAttributes; + ol: HTMLOlAttributes; + optgroup: HTMLOptgroupAttributes; + option: HTMLOptionAttributes; + output: HTMLOutputAttributes; + p: HTMLAttributes; + param: HTMLParamAttributes; + picture: HTMLAttributes; + pre: HTMLAttributes; + progress: HTMLProgressAttributes; + q: HTMLQuoteAttributes; + rp: HTMLAttributes; + rt: HTMLAttributes; + ruby: HTMLAttributes; + s: HTMLAttributes; + samp: HTMLAttributes; + slot: HTMLSlotAttributes; + script: HTMLScriptAttributes; + section: HTMLAttributes; + select: HTMLSelectAttributes; + small: HTMLAttributes; + source: HTMLSourceAttributes; + span: HTMLAttributes; + strong: HTMLAttributes; + style: HTMLStyleAttributes; + sub: HTMLAttributes; + summary: HTMLAttributes; + sup: HTMLAttributes; + table: HTMLTableAttributes; + template: HTMLAttributes; + tbody: HTMLAttributes; + td: HTMLTdAttributes; + textarea: HTMLTextareaAttributes; + tfoot: HTMLAttributes; + th: HTMLThAttributes; + thead: HTMLAttributes; + time: HTMLTimeAttributes; + title: HTMLAttributes; + tr: HTMLAttributes; + track: HTMLTrackAttributes; + u: HTMLAttributes; + ul: HTMLAttributes; + var: HTMLAttributes; + video: HTMLVideoAttributes; + wbr: HTMLAttributes; + webview: HTMLWebViewAttributes; + // SVG + svg: SVGAttributes; + + animate: SVGAttributes; + animateMotion: SVGAttributes; + animateTransform: SVGAttributes; + circle: SVGAttributes; + clipPath: SVGAttributes; + defs: SVGAttributes; + desc: SVGAttributes; + ellipse: SVGAttributes; + feBlend: SVGAttributes; + feColorMatrix: SVGAttributes; + feComponentTransfer: SVGAttributes; + feComposite: SVGAttributes; + feConvolveMatrix: SVGAttributes; + feDiffuseLighting: SVGAttributes; + feDisplacementMap: SVGAttributes; + feDistantLight: SVGAttributes; + feDropShadow: SVGAttributes; + feFlood: SVGAttributes; + feFuncA: SVGAttributes; + feFuncB: SVGAttributes; + feFuncG: SVGAttributes; + feFuncR: SVGAttributes; + feGaussianBlur: SVGAttributes; + feImage: SVGAttributes; + feMerge: SVGAttributes; + feMergeNode: SVGAttributes; + feMorphology: SVGAttributes; + feOffset: SVGAttributes; + fePointLight: SVGAttributes; + feSpecularLighting: SVGAttributes; + feSpotLight: SVGAttributes; + feTile: SVGAttributes; + feTurbulence: SVGAttributes; + filter: SVGAttributes; + foreignObject: SVGAttributes; + g: SVGAttributes; + image: SVGAttributes; + line: SVGAttributes; + linearGradient: SVGAttributes; + marker: SVGAttributes; + mask: SVGAttributes; + metadata: SVGAttributes; + mpath: SVGAttributes; + path: SVGAttributes; + pattern: SVGAttributes; + polygon: SVGAttributes; + polyline: SVGAttributes; + radialGradient: SVGAttributes; + rect: SVGAttributes; + stop: SVGAttributes; + switch: SVGAttributes; + symbol: SVGAttributes; + text: SVGAttributes; + textPath: SVGAttributes; + tspan: SVGAttributes; + use: SVGAttributes; + view: SVGAttributes; + + // Svelte specific + 'svelte:window': SvelteWindowAttributes; + 'svelte:body': HTMLAttributes; + 'svelte:fragment': { slot?: string }; + 'svelte:options': { [name: string]: any }; + 'svelte:head': { [name: string]: any }; + + [name: string]: { [name: string]: any }; +} diff --git a/elements/package.json b/elements/package.json new file mode 100644 index 0000000000..1704e6b78b --- /dev/null +++ b/elements/package.json @@ -0,0 +1,3 @@ +{ + "types": "./index.d.ts" +} diff --git a/package.json b/package.json index 7996fd5583..fa7a97cbfd 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "easing", "motion", "action", + "elements", "README.md" ], "exports": { @@ -75,6 +76,9 @@ "import": "./transition/index.mjs", "require": "./transition/index.js" }, + "./elements": { + "types": "./elements/index.d.ts" + }, "./ssr": { "types": "./types/runtime/index.d.ts", "import": "./ssr.mjs", From 3ba0e304166f7d5dfc608fdf2696a8f4cbc2b4f0 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 13 Dec 2022 09:04:08 -0500 Subject: [PATCH 048/125] -> v3.55.0 --- CHANGELOG.md | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a92cb4472c..190caaf6e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 3.55.0 * Add `svelte/elements` for HTML/Svelte typings ([#7649](https://github.com/sveltejs/svelte/pull/7649)) diff --git a/package-lock.json b/package-lock.json index d57d0b3436..eeef42a72c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "svelte", - "version": "3.54.0", + "version": "3.55.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "svelte", - "version": "3.54.0", + "version": "3.55.0", "license": "MIT", "devDependencies": { "@ampproject/remapping": "^0.3.0", diff --git a/package.json b/package.json index fa7a97cbfd..8839b95c75 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.54.0", + "version": "3.55.0", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", From ad8dbfb9b923182872f781210b6c69beff6a2a24 Mon Sep 17 00:00:00 2001 From: Nilesh <19304+nileshtrivedi@users.noreply.github.com> Date: Thu, 15 Dec 2022 12:47:02 +0000 Subject: [PATCH 049/125] [docs] Add comment about generating a Svelte project without Kit (#8115) --- site/content/docs/01-getting-started.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md index 03dfb4bbcf..2362925beb 100644 --- a/site/content/docs/01-getting-started.md +++ b/site/content/docs/01-getting-started.md @@ -16,6 +16,8 @@ npm run dev SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. [SvelteKit](https://kit.svelte.dev/) utilizes [Vite](https://vitejs.dev/) to build your code and handle server-side rendering (SSR). There are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation, which will output `.js` and `.css` that you can insert into your HTML, but most others won't handle SSR. +If you don't need a full-fledged app framework and instead want to build a simple frontend-only site/app, you can also use Svelte (without Kit) with Vite by running `npm init vite` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. + The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well. If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte). From 670f4580568fe8ea31097981ba2d59c33daf0725 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Fri, 16 Dec 2022 10:33:36 +0100 Subject: [PATCH 050/125] [docs] adjust code snippet to conform with previous one Backported from https://github.com/sveltejs/learn.svelte.dev/pull/143 --- site/content/tutorial/04-logic/06-await-blocks/text.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/tutorial/04-logic/06-await-blocks/text.md b/site/content/tutorial/04-logic/06-await-blocks/text.md index 0d47dcde95..1814681341 100644 --- a/site/content/tutorial/04-logic/06-await-blocks/text.md +++ b/site/content/tutorial/04-logic/06-await-blocks/text.md @@ -19,7 +19,7 @@ Most web applications have to deal with asynchronous data at some point. Svelte If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves: ```html -{#await promise then value} -

            the value is {value}

            +{#await promise then number} +

            the number is {number}

            {/await} -``` \ No newline at end of file +``` From eef125f6c1d586ec4ed4a75ae8a93c54870a2e12 Mon Sep 17 00:00:00 2001 From: gaac510 <74474003+gaac510@users.noreply.github.com> Date: Tue, 20 Dec 2022 08:47:31 +1100 Subject: [PATCH 051/125] [docs] update outdated SvelteKit release info (#8128) Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- .../tutorial/01-introduction/07-making-an-app/text.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md index 4ba5908137..dc3fe7adad 100644 --- a/site/content/tutorial/01-introduction/07-making-an-app/text.md +++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md @@ -4,15 +4,13 @@ title: Making an app This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor. -First, you'll need to integrate Svelte with a build tool. We recommend using [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/)... +First, you'll need to integrate Svelte with a build tool. We recommend using [SvelteKit](https://kit.svelte.dev), which sets up [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/) for you... ```bash -npm create vite@latest my-app -- --template svelte +npm create svelte@latest myapp ``` -...or one of the [community-maintained integrations](https://sveltesociety.dev/tools). - -> [SvelteKit](https://kit.svelte.dev) is the official application framework from the Svelte team. It's currently in development, but if you don't mind using pre-1.0 software then it's the recommended way to build Svelte apps. +There are also a number of [community-maintained integrations](https://sveltesociety.dev/tools). Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process. From b8bc1be0a8bc4f5cf9e78fa44ae7e22e724dc985 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 20 Dec 2022 11:09:50 -0500 Subject: [PATCH 052/125] remove blog content. it now lives in sites repo (#8117) --- ...-11-26-frameworks-without-the-framework.md | 55 ----- ...17-08-07-the-easiest-way-to-get-started.md | 66 ------ .../2017-09-06-the-zen-of-just-writing-css.md | 78 ------- ...per-towards-the-ideal-web-app-framework.md | 84 -------- site/content/blog/2018-04-18-version-2.md | 204 ------------------ .../blog/2018-12-26-svelte-css-in-js.md | 29 --- ...2018-12-27-virtual-dom-is-pure-overhead.md | 149 ------------- .../2019-01-31-svelte-on-the-changelog.md | 21 -- .../blog/2019-04-15-setting-up-your-editor.md | 65 ------ .../2019-04-16-svelte-for-new-developers.md | 100 --------- .../blog/2019-04-20-write-less-code.md | 164 -------------- ...19-04-22-svelte-3-rethinking-reactivity.md | 97 --------- .../blog/2020-07-17-svelte-and-typescript.md | 141 ------------ ...-10-01-whats-new-in-svelte-october-2020.md | 85 -------- ...11-01-whats-new-in-svelte-november-2020.md | 46 ---- ...020-11-05-whats-the-deal-with-sveltekit.md | 103 --------- ...12-01-whats-new-in-svelte-december-2020.md | 71 ------ ...-01-01-whats-new-in-svelte-january-2021.md | 86 -------- ...02-01-whats-new-in-svelte-february-2021.md | 86 -------- ...21-03-01-whats-new-in-svelte-march-2021.md | 104 --------- .../content/blog/2021-03-23-sveltekit-beta.md | 67 ------ ...21-04-01-whats-new-in-svelte-april-2021.md | 73 ------- ...2021-05-01-whats-new-in-svelte-may-2021.md | 76 ------- ...021-06-01-whats-new-in-svelte-june-2021.md | 65 ------ ...021-07-01-whats-new-in-svelte-july-2021.md | 65 ------ ...1-08-01-whats-new-in-svelte-august-2021.md | 71 ------ ...9-01-whats-new-in-svelte-september-2021.md | 83 ------- ...-10-01-whats-new-in-svelte-october-2021.md | 99 --------- ...11-01-whats-new-in-svelte-november-2021.md | 85 -------- ...12-01-whats-new-in-svelte-december-2021.md | 91 -------- ...-01-01-whats-new-in-svelte-january-2022.md | 77 ------- ...-01-13-accelerating-sveltes-development.md | 67 ------ ...02-01-whats-new-in-svelte-february-2022.md | 106 --------- ...22-03-01-whats-new-in-svelte-march-2022.md | 87 -------- ...22-04-01-whats-new-in-svelte-april-2022.md | 104 --------- ...2022-05-01-whats-new-in-svelte-may-2022.md | 89 -------- ...022-06-01-whats-new-in-svelte-june-2022.md | 113 ---------- ...022-07-01-whats-new-in-svelte-july-2022.md | 98 --------- ...2-08-01-whats-new-in-svelte-august-2022.md | 119 ---------- ...9-01-whats-new-in-svelte-september-2022.md | 105 --------- ...-10-01-whats-new-in-svelte-october-2022.md | 139 ------------ ...11-01-whats-new-in-svelte-november-2022.md | 116 ---------- ...12-01-whats-new-in-svelte-december-2022.md | 102 --------- 43 files changed, 3931 deletions(-) delete mode 100644 site/content/blog/2016-11-26-frameworks-without-the-framework.md delete mode 100644 site/content/blog/2017-08-07-the-easiest-way-to-get-started.md delete mode 100644 site/content/blog/2017-09-06-the-zen-of-just-writing-css.md delete mode 100644 site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md delete mode 100644 site/content/blog/2018-04-18-version-2.md delete mode 100644 site/content/blog/2018-12-26-svelte-css-in-js.md delete mode 100644 site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md delete mode 100644 site/content/blog/2019-01-31-svelte-on-the-changelog.md delete mode 100644 site/content/blog/2019-04-15-setting-up-your-editor.md delete mode 100644 site/content/blog/2019-04-16-svelte-for-new-developers.md delete mode 100644 site/content/blog/2019-04-20-write-less-code.md delete mode 100644 site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md delete mode 100644 site/content/blog/2020-07-17-svelte-and-typescript.md delete mode 100644 site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md delete mode 100644 site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md delete mode 100644 site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md delete mode 100644 site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md delete mode 100644 site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md delete mode 100644 site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md delete mode 100644 site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md delete mode 100644 site/content/blog/2021-03-23-sveltekit-beta.md delete mode 100644 site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md delete mode 100644 site/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md delete mode 100644 site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md delete mode 100644 site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md delete mode 100644 site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md delete mode 100644 site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md delete mode 100644 site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md delete mode 100644 site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md delete mode 100644 site/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md delete mode 100644 site/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md delete mode 100644 site/content/blog/2022-01-13-accelerating-sveltes-development.md delete mode 100644 site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md delete mode 100644 site/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md delete mode 100644 site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md delete mode 100644 site/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md delete mode 100644 site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md delete mode 100644 site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md delete mode 100644 site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md delete mode 100644 site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md delete mode 100644 site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md delete mode 100644 site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md delete mode 100644 site/content/blog/2022-12-01-whats-new-in-svelte-december-2022.md diff --git a/site/content/blog/2016-11-26-frameworks-without-the-framework.md b/site/content/blog/2016-11-26-frameworks-without-the-framework.md deleted file mode 100644 index b29525dec3..0000000000 --- a/site/content/blog/2016-11-26-frameworks-without-the-framework.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -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. diff --git a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md deleted file mode 100644 index 29e59270d0..0000000000 --- a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -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 ` diff --git a/site/content/blog/2019-04-15-setting-up-your-editor.md b/site/content/blog/2019-04-15-setting-up-your-editor.md deleted file mode 100644 index 65d0234645..0000000000 --- a/site/content/blog/2019-04-15-setting-up-your-editor.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Setting up your editor -description: Instructions for configuring linting and syntax highlighting -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris -draft: true ---- - -*__Coming soon__* - -This post will walk you through setting up your editor so that it recognises Svelte files: - -* eslint-plugin-svelte3 -* svelte-vscode -* associating .svelte files with HTML in VSCode, Sublime, etc. - -## Atom - -To treat `*.svelte` files as HTML, open *__Edit β†’ Config...__* and add the following lines to your `core` section: - -```cson -"*": - core: - … - customFileTypes: - "text.html.basic": [ - "svelte" - ] -``` - -## Vim/Neovim - -You can use the [coc-svelte extension](https://github.com/coc-extensions/coc-svelte) which utilises the official language-server. - -As an alternative you can treat all `*.svelte` files as HTML. Add the following line to your `init.vim`: - -``` -au! BufNewFile,BufRead *.svelte set ft=html -``` - -To temporarily turn on HTML syntax highlighting for the current buffer, use: - -``` -:set ft=html -``` - -To set the filetype for a single file, use a [modeline](https://vim.fandom.com/wiki/Modeline_magic): - -``` - -``` - -## Visual Studio Code - -We recommend using the official [Svelte for VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). - -## JetBrains WebStorm - -The [Svelte Framework Integration](https://plugins.jetbrains.com/plugin/12375-svelte/) can be used to add support for Svelte to WebStorm, or other Jetbrains IDEs. Consult the [WebStorm plugin installation guide](https://www.jetbrains.com/help/webstorm/managing-plugins.html) on the JetBrains website for more details. - -## Sublime Text 3 - -Open any `.svelte` file. - -Go to *__View β†’ Syntax β†’ Open all with current extension as... β†’ HTML__*. diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md deleted file mode 100644 index 834e042138..0000000000 --- a/site/content/blog/2019-04-16-svelte-for-new-developers.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Svelte for new developers -description: Never used Node.js or the command line? No problem -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -This short guide is designed to help you β€” someone who has looked at the [tutorial](/tutorial) and wants to start creating Svelte apps, but doesn't have a ton of experience using JavaScript build tooling β€” get up and running. - -If there are things that don't make sense, or that we're glossing over, feel free to [raise an issue](https://github.com/sveltejs/svelte/issues) or [suggest edits to this page](https://github.com/sveltejs/svelte/blob/master/site/content/blog/2019-04-16-svelte-for-new-developers.md) that will help us help more people. - -If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](https://svelte.dev/chat). - - -## First things first - -You'll be using the *command line*, also known as the terminal. On Windows, you can access it by running **Command Prompt** from the Start menu; on a Mac, hit `Cmd` and `Space` together to bring up **Spotlight**, then start typing `Terminal.app`. On most Linux systems, `Ctrl-Alt-T` brings up the command line. - -The command line is a way to interact with your computer (or another computer! but that's a topic for another time) with more power and control than the GUI (graphical user interface) that most people use day-to-day. - -Once on the command line, you can navigate the filesystem using `ls` (`dir` on Windows) to list the contents of your current directory, and `cd` to change the current directory. For example, if you had a `Development` directory of your projects inside your home directory, you would type - -```bash -cd Development -``` - -to go to it. From there, you could create a new project directory with the `mkdir` command: - -```bash -mkdir svelte-projects -cd svelte-projects -``` - -A full introduction to the command line is out of the scope of this guide, but here are a few more useful commands: - -* `cd ..` β€” navigates to the parent of the current directory -* `cat my-file.txt` β€” on Mac/Linux (`type my-file.txt` on Windows), lists the contents of `my-file.txt` -* `open .` (or `start .` on Windows) β€” opens the current directory in Finder or File Explorer - - -## Installing Node.js - -[Node](https://nodejs.org/en/) is a way to run JavaScript on the command line. It's used by many tools, including Svelte. If you don't yet have it installed, the easiest way is to download the latest version straight from the [website](https://nodejs.org/en/). - -Once installed, you'll have access to three new commands: - -* `node my-file.js` β€” runs the JavaScript in `my-file.js` -* `npm [subcommand]` β€” [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/package/svelte) package -* `npx [subcommand]` β€” a convenient way to run programs available on npm without permanently installing them - - -## Installing a text editor - -To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VSCode, and justifiably so β€” it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components). - - -## Creating a project - -We're going to use the [Svelte + Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template. You don't have to use a project template, but it means you have to do a lot less setup work. - -On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it): - -```bash -npm create vite@latest my-svelte-project -- --template svelte -cd my-svelte-project -npm install -``` - -> You can replace `--template svelte` with `--template svelte-ts`, if you prefer TypeScript. - -This creates a new directory, `my-svelte-project`, adds files from the [create-vite/template-svelte](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`. - -In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application β€” `dev`, `build` and `preview`. To launch your app in development mode, type the following: - -```bash -npm run dev -``` - -Running the `dev` script starts a program called [Vite](https://vitejs.dev/). Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser. - -Speaking of which, open a browser and navigate to http://localhost:5173. This is your application running on a local *web server* (hence 'localhost') on port 5173. - -Try changing `src/App.svelte` and saving it. The application will update with your changes. - - -## Building your app - -In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Vite skips the final step where your app's JavaScript is compressed. - -When you share your app with the world, you want to build it in 'production mode', so that it's as small and efficient as possible for end users. To do that, use the `build` command: - -```bash -npm run build -``` - -Your `dist` directory now contains an optimised version of your app. You can run it like so: - -```bash -npm run preview -``` diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md deleted file mode 100644 index 97e020af90..0000000000 --- a/site/content/blog/2019-04-20-write-less-code.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Write less code -description: The most important metric you're not paying attention to -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be. - -Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop. - -In fact it's widely acknowledged that [project development time](https://blog.codinghorror.com/diseconomies-of-scale-and-lines-of-code/) and [bug count](https://www.mayerdan.com/ruby/2012/11/11/bugs-per-line-of-code-ratio) grow *quadratically*, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments β€” activities that almost always result in *more* code. It's a vicious cycle. - -Yet while we obsess β€” rightly! β€” over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we're writing. - - -## Readability is important - -I'm certainly not claiming that we should use clever tricks to scrunch our code into the most compact form possible at the expense of readability. Nor am I claiming that reducing *lines* of code is necessarily a worthwhile goal, since it encourages turning readable code like this... - -```js -for (let i = 0; i <= 100; i += 1) { - if (i % 2 === 0) { - console.log(`${i} is even`); - } -} -``` - -...into something much harder to parse: - -```js -for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`); -``` - -Instead, I'm claiming that we should favour languages and patterns that allow us to naturally write less code. - - -## Yes, I'm talking about Svelte - -Reducing the amount of code you have to write is an explicit goal of Svelte. To illustrate, let's look at a very simple component implemented in React, Vue and Svelte. First, the Svelte version: - -
            - -
            - -How would we build this in React? It would probably look something like this: - -```js -import React, { useState } from 'react'; - -export default () => { - const [a, setA] = useState(1); - const [b, setB] = useState(2); - - function handleChangeA(event) { - setA(+event.target.value); - } - - function handleChangeB(event) { - setB(+event.target.value); - } - - return ( -
            - - - -

            {a} + {b} = {a + b}

            -
            - ); -}; -``` - -Here's an equivalent component in Vue: - -```html - - - -``` - - - -In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger! - -It's unusual for the difference to be *quite* so obvious β€” in my experience, a React component is typically around 40% larger than its Svelte equivalent. Let's look at the features of Svelte's design that enable you to express ideas more concisely: - - -### Top-level elements - -In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element β€” in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment β€” `<>` β€”Β instead of a `
            `, but it's the same basic idea, and still results in an extra level of indentation). - -In Vue, your markup must be wrapped in a `