Merge branch 'master' into fix-tut-svelte-self-a11y-warning

CHANGELOG.md

@@ -1,7 +1,17 @@
 # Svelte changelog
 
-## Unreleased
-* Upgraded `css-tree` to `2.1.0` ([#7572](https://github.com/sveltejs/svelte/pull/7572))
+## 3.53.1
+
+* Fix exception in `rel=` attribute check with dynamic values ([#7994](https://github.com/sveltejs/svelte/issues/7994))
+* Do not emit deprecation warnings for `css` compiler options for now ([#8009](https://github.com/sveltejs/svelte/issues/8009))
+* Make compiler run in browser again ([#8010](https://github.com/sveltejs/svelte/issues/8010))
+* Upgrade `tslib` ([#8013](https://github.com/sveltejs/svelte/issues/8013))
+
+## 3.53.0
+
+* Check whether `parentNode` exists before removing child ([#6037](https://github.com/sveltejs/svelte/issues/6037))
+* Upgrade various dependencies, notably `css-tree` to `2.2.1` ([#7572](https://github.com/sveltejs/svelte/pull/7572), [#7982](https://github.com/sveltejs/svelte/pull/7982))
+* Extend `css` compiler option with `'external' | 'injected' | 'none'` settings and deprecate old `true | false` values ([#7914](https://github.com/sveltejs/svelte/pull/7914))
 
 ## 3.52.0
 

CONTRIBUTING.md

@@ -65,7 +65,7 @@ Working on your first Pull Request? You can learn how from this free video serie
 
 ### Proposing a change
 
-If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md).
+If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml).
 
 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.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.52.0",
+  "version": "3.53.1",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",
@@ -129,19 +129,19 @@
     "@types/node": "^8.10.53",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
-    "acorn": "^8.4.1",
-    "agadoo": "^1.1.0",
-    "aria-query": "^5.0.0",
-    "axobject-query": "^3.0.1",
+    "acorn": "^8.8.1",
+    "agadoo": "^2.0.0",
+    "aria-query": "^5.1.1",
+    "axobject-query": "^3.1.1",
     "code-red": "^0.2.5",
-    "css-tree": "^2.1.0",
-    "eslint": "^8.0.0",
+    "css-tree": "^2.2.1",
+    "eslint": "^8.26.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "estree-walker": "^3.0.0",
+    "estree-walker": "^3.0.1",
     "is-reference": "^3.0.0",
     "jsdom": "^15.2.1",
-    "kleur": "^3.0.3",
+    "kleur": "^4.1.5",
     "locate-character": "^2.0.5",
     "magic-string": "^0.25.3",
     "mocha": "^7.0.0",
@@ -149,10 +149,11 @@
     "puppeteer": "^2.0.0",
     "rollup": "^1.27.14",
     "source-map": "^0.7.4",
-    "source-map-support": "^0.5.13",
+    "source-map-support": "^0.5.21",
     "sourcemap-codec": "^1.4.8",
-    "tiny-glob": "^0.2.6",
-    "tslib": "^2.0.3",
-    "typescript": "^3.7.5"
+    "tiny-glob": "^0.2.9",
+    "tslib": "^2.4.1",
+    "typescript": "^3.7.5",
+    "util": "^0.12.5"
   }
 }

rollup.config.js

@@ -108,8 +108,18 @@ export default [
 		input: 'src/compiler/index.ts',
 		plugins: [
 			replace({
-				__VERSION__: pkg.version
+				__VERSION__: pkg.version,
+				'process.env.NODE_DEBUG': false // appears inside the util package
 			}),
+			{
+				resolveId(id) {
+					// util is a built-in module in Node.js, but we want a self-contained compiler bundle
+					// that also works in the browser, so we load its polyfill instead
+					if (id === 'util') {
+						return require.resolve('./node_modules/util'); // just 'utils' would resolve this to the built-in module
+					}
+				}
+			},
 			resolve(),
 			commonjs({
 				include: ['node_modules/**']

site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md

@@ -12,7 +12,7 @@ There's also a _huge_ showcase to cover... so let's jump in!
 ## What's new in SvelteKit
 - The new `update` method for `use:enhance` lets you easily get back the default form behavior while augmenting it with your own logic ([docs](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance), [#7083](https://github.com/sveltejs/kit/pull/7083) and [#7326](https://github.com/sveltejs/kit/pull/7326))
 - `[[optional]]` parameters are now available for routing ([docs](https://kit.svelte.dev/docs/advanced-routing#optional-parameters), [#7051](https://github.com/sveltejs/kit/pull/7051))
-- `goto` now has `invalidateAll` to (re-)run all `load` functions belonging to the new active page ([docs](https://kit.svelte.dev/docs/modules#app-navigation-goto), [#7407](https://github.com/sveltejs/kit/pull/7407))
+- `goto` now has `invalidateAll` to (re-)run all `load` functions belonging to the new active page ([docs](https://kit.svelte.dev/docs/modules#$app-navigation-goto), [#7407](https://github.com/sveltejs/kit/pull/7407))
 - `config.kit.paths.base` is now used in adapters looking for static assets - fixing 404 issues across `adapter-netlify`, `adapter-vercel`, `adapter-cloudflare`, and `adapter-cloudflare-workers` ([#4448](https://github.com/sveltejs/kit/pull/4448))
 
 **Breaking changes:**

site/content/docs/05-compile-time.md

@@ -73,7 +73,7 @@ The following options can be passed to the compiler. None are required:
 | `accessors` | `false` | If `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`.
 | `customElement` | `false` | If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
 | `tag` | `null` | A `string` that tells Svelte what tag name to register the custom element with. It must be a lowercase alphanumeric string with at least one hyphen, e.g. `"my-element"`.
-| `css` | `true` | If `true`, styles will be included in the JavaScript class and injected at runtime for the components actually rendered. If `false`, the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `false` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
+| `css` | `'injected'` | If `'injected'` (formerly `true`), styles will be included in the JavaScript class and injected at runtime for the components actually rendered. If `'external'` (formerly `false`), the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files. If `'none'`, styles are completely avoided and no CSS output is generated.
 | `cssHash` | See right | A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS. It defaults to returning `svelte-${hash(css)}`
 | `loopGuardTimeout` | 0 | A `number` that tells Svelte to break the loop if it blocks the thread for more than `loopGuardTimeout` ms. This is useful to prevent infinite loops. **Only available when `dev: true`**
 | `preserveComments` | `false` | If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.

src/compiler/compile/index.ts

@@ -35,11 +35,19 @@ const valid_options = [
 	'cssHash'
 ];
 
+const valid_css_values = [
+	true,
+	false,
+	'injected',
+	'external',
+	'none'
+];
+
 const regex_valid_identifier = /^[a-zA-Z_$][a-zA-Z_$0-9]*$/;
 const regex_starts_with_lowercase_character = /^[a-z]/;
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {
-	const { name, filename, loopGuardTimeout, dev, namespace } = options;
+	const { name, filename, loopGuardTimeout, dev, namespace, css } = options;
 
 	Object.keys(options).forEach(key => {
 		if (!valid_options.includes(key)) {
@@ -75,6 +83,23 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 		});
 	}
 
+	if (valid_css_values.indexOf(css) === -1) {
+		throw new Error(`options.css must be true, false, 'injected', 'external', or 'none' (got '${css}')`);
+	}
+
+	if (css === true || css === false) {
+		options.css = css === true ? 'injected' : 'external';
+		// possibly show this warning once we decided how Svelte 4 looks like
+		// const message = `options.css as a boolean is deprecated. Use '${options.css}' instead of ${css}.`;
+		// warnings.push({
+		// 	code: 'options-css-boolean-deprecated',
+		// 	message,
+		// 	filename,
+		// 	toString: () => message
+		// });
+		// }
+	}
+
 	if (namespace && valid_namespaces.indexOf(namespace) === -1) {
 		const match = fuzzymatch(namespace, valid_namespaces);
 		if (match) {
@@ -86,7 +111,7 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 }
 
 export default function compile(source: string, options: CompileOptions = {}) {
-	options = Object.assign({ generate: 'dom', dev: false, enableSourcemap: true }, options);
+	options = Object.assign({ generate: 'dom', dev: false, enableSourcemap: true, css: 'injected' }, options);
 
 	const stats = new Stats();
 	const warnings = [];

src/compiler/compile/nodes/Element.ts

@@ -620,9 +620,9 @@ 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 expected_values = ['noreferrer'];
-
 						expected_values.forEach(expected_value => {
 							if (!rel || rel && rel_values.indexOf(expected_value) < 0) {
 								component.warn(this, {
@@ -633,6 +633,7 @@ export default class Element extends Node {
 						});
 					}
 				}
+			}
 
 			if (href_attribute) {
 				const href_value = href_attribute.get_static_value();

src/compiler/compile/render_dom/index.ts

@@ -54,7 +54,7 @@ export default function dom(
 	const should_add_css = (
 		!options.customElement &&
 		!!styles &&
-		options.css !== false
+		options.css === 'injected'
 	);
 
 	if (should_add_css) {

src/compiler/interfaces.ts

@@ -179,7 +179,7 @@ export interface CompileOptions {
 	legacy?: boolean;
 	customElement?: boolean;
 	tag?: string;
-	css?: boolean;
+	css?: 'injected' | 'external' | 'none' | boolean;
 	loopGuardTimeout?: number;
 	namespace?: string;
 	cssHash?: CssHashGetter;
@@ -191,6 +191,7 @@ export interface CompileOptions {
 export interface ParserOptions {
 	filename?: string;
 	customElement?: boolean;
+	css?: 'injected' | 'external' | 'none' | boolean;
 }
 
 export interface Visitor {

src/compiler/parse/index.ts

@@ -21,6 +21,7 @@ export class Parser {
 	readonly template: string;
 	readonly filename?: string;
 	readonly customElement: boolean;
+	readonly css_mode: 'injected' | 'external' | 'none' | boolean;
 
 	index = 0;
 	stack: TemplateNode[] = [];
@@ -39,6 +40,7 @@ export class Parser {
 		this.template = template.trimRight();
 		this.filename = options.filename;
 		this.customElement = options.customElement;
+		this.css_mode = options.css;
 
 		this.html = {
 			start: null,

src/compiler/parse/read/style.ts

@@ -19,6 +19,12 @@ export default function read_style(parser: Parser, start: number, attributes: No
 
 	const content_end = parser.index;
 
+	// discard styles when css is disabled
+	if (parser.css_mode === 'none') {
+		parser.read(regex_closing_style_tag);
+		return null;
+	}
+
 	let ast;
 
 	try {
@@ -71,6 +77,7 @@ export default function read_style(parser: Parser, start: number, attributes: No
 	});
 
 	parser.read(regex_closing_style_tag);
+  
 	const end = parser.index;
 
 	return {

src/runtime/internal/dom.ts

@@ -204,8 +204,10 @@ export function insert_hydration(target: NodeEx, node: NodeEx, anchor?: NodeEx)
 }
 
 export function detach(node: Node) {
+	if (node.parentNode) {
 		node.parentNode.removeChild(node);
 	}
+}
 
 export function destroy_each(iterations, detaching) {
 	for (let i = 0; i < iterations.length; i += 1) {

test/parser/samples/css-option-none/input.svelte

@@ -0,0 +1,7 @@
+<div>foo</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>

test/parser/samples/css-option-none/options.json

@@ -0,0 +1,3 @@
+{
+	"css": "none"
+}

test/parser/samples/css-option-none/output.json

@@ -0,0 +1,32 @@
+{
+	"html": {
+		"start": 0,
+		"end": 14,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 14,
+				"type": "Element",
+				"name": "div",
+				"attributes": [],
+				"children": [
+					{
+						"start": 5,
+						"end": 8,
+						"type": "Text",
+						"raw": "foo",
+						"data": "foo"
+					}
+				]
+			},
+			{
+				"start": 14,
+				"end": 16,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			}
+		]
+	}
+}

test/validator/samples/security-anchor-rel-noreferrer/input.svelte

@@ -29,3 +29,5 @@
 <a href="HTTPS://svelte.dev" target="_blank" rel="noreferrer noopener">svelte website (valid)</a>
 <a href="//svelte.dev" target="_blank" rel="noreferrer">svelte website (valid)</a>
 <a href="//svelte.dev" target="_blank" rel="noreferrer noopener">svelte website (valid)</a>
+<!-- dynamic rel value should not warn-->
+<a href="//svelte.dev" target="_blank" rel={`${Math.random()}`}>svelte website (valid)</a>