rename `<svelte:meta>` to `<svelte:options>` (#2017)

site/content/examples/immutable/App.html

@@ -1,4 +1,4 @@
-<svelte:meta immutable/>
+<svelte:options immutable/>
 
 <script>
 	import ImmutableTodo from './ImmutableTodo.html';

site/content/examples/immutable/ImmutableTodo.html

@@ -1,4 +1,4 @@
-<svelte:meta immutable/>
+<svelte:options immutable/>
 
 <script>
 	import { afterUpdate } from 'svelte';

src/compile/Component.ts

@@ -23,7 +23,7 @@ import getObject from '../utils/getObject';
 import deindent from '../utils/deindent';
 import globalWhitelist from '../utils/globalWhitelist';
 
-type Meta = {
+type Options = {
 	namespace?: string;
 	tag?: string;
 	immutable?: boolean;
@@ -51,7 +51,7 @@ export default class Component {
 	instance_scope: Scope;
 	instance_scope_map: WeakMap<Node, Scope>;
 
-	meta: Meta;
+	optionsTag: Options;
 	namespace: string;
 	tag: string;
 
@@ -111,20 +111,20 @@ export default class Component {
 		this.stylesheet = new Stylesheet(source, ast, options.filename, options.dev);
 		this.stylesheet.validate(this);
 
-		this.meta = process_meta(this, this.ast.html.children);
+		this.optionsTag = process_options_tag(this, this.ast.html.children);
-		this.namespace = namespaces[this.meta.namespace] || this.meta.namespace;
+		this.namespace = namespaces[this.optionsTag.namespace] || this.optionsTag.namespace;
 
-		if (this.meta.props) {
+		if (this.optionsTag.props) {
 			this.has_reactive_assignments = true;
 		}
 
-		if (options.customElement === true && !this.meta.tag) {
+		if (options.customElement === true && !this.optionsTag.tag) {
 			throw new Error(`No tag name specified`); // TODO better error
 		}
 
 		this.tag = options.customElement
 			? options.customElement === true
-				? this.meta.tag
+				? this.optionsTag.tag
 				: options.customElement as string
 			: this.name;
 
@@ -691,7 +691,7 @@ export default class Component {
 
 	rewrite_props() {
 		const component = this;
-		const { code, instance_scope, instance_scope_map: map, meta } = this;
+		const { code, instance_scope, instance_scope_map: map, optionsTag } = this;
 		let scope = instance_scope;
 
 		const coalesced_declarations = [];
@@ -717,10 +717,10 @@ export default class Component {
 							extractNames(declarator.id).forEach(name => {
 								const variable = component.var_lookup.get(name);
 
-								if (name === meta.props_object) {
+								if (name === optionsTag.props_object) {
 									if (variable.export_name) {
 										component.error(declarator, {
-											code: 'exported-meta-props',
+											code: 'exported-options-props',
 											message: `Cannot export props binding`
 										});
 									}
@@ -1072,12 +1072,12 @@ export default class Component {
 	}
 }
 
-function process_meta(component, nodes) {
+function process_options_tag(component, nodes) {
-	const meta: Meta = {
+	const optionsTag: Options = {
 		immutable: component.options.immutable || false
 	};
 
-	const node = nodes.find(node => node.name === 'svelte:meta');
+	const node = nodes.find(node => node.name === 'svelte:options');
 
 	function get_value(attribute, code, message) {
 		const { value } = attribute;
@@ -1118,7 +1118,7 @@ function process_meta(component, nodes) {
 							});
 						}
 
-						meta.tag = tag;
+						optionsTag.tag = tag;
 						break;
 					}
 
@@ -1144,7 +1144,7 @@ function process_meta(component, nodes) {
 							}
 						}
 
-						meta.namespace = ns;
+						optionsTag.namespace = ns;
 						break;
 					}
 
@@ -1155,13 +1155,13 @@ function process_meta(component, nodes) {
 
 						if (typeof value !== 'boolean') component.error(attribute, { code, message });
 
-						meta.immutable = value;
+						optionsTag.immutable = value;
 						break;
 
 					default:
 						component.error(attribute, {
-							code: `invalid-meta-attribute`,
+							code: `invalid-options-attribute`,
-							message: `<svelte:meta> unknown attribute`
+							message: `<svelte:options> unknown attribute`
 						});
 				}
 			}
@@ -1169,26 +1169,26 @@ function process_meta(component, nodes) {
 			else if (attribute.type === 'Binding') {
 				if (attribute.name !== 'props') {
 					component.error(attribute, {
-						code: `invalid-meta-binding`,
+						code: `invalid-options-binding`,
-						message: `<svelte:meta> only supports bind:props`
+						message: `<svelte:options> only supports bind:props`
 					});
 				}
 
 				const { start, end } = attribute.expression;
 				const { name } = flattenReference(attribute.expression);
 
-				meta.props = `[✂${start}-${end}✂]`;
+				optionsTag.props = `[✂${start}-${end}✂]`;
-				meta.props_object = name;
+				optionsTag.props_object = name;
 			}
 
 			else {
 				component.error(attribute, {
-					code: `invalid-meta-attribute`,
+					code: `invalid-options-attribute`,
-					message: `<svelte:meta> can only have static 'tag', 'namespace' and 'immutable' attributes, or a bind:props directive`
+					message: `<svelte:options> can only have static 'tag', 'namespace' and 'immutable' attributes, or a bind:props directive`
 				});
 			}
 		});
 	}
 
-	return meta;
+	return optionsTag;
 }

src/compile/nodes/Meta.ts

@@ -1,5 +0,0 @@
-import Node from './shared/Node';
-
-export default class Meta extends Node {
-	type: 'Meta';
-}

src/compile/nodes/Options.ts

@@ -0,0 +1,5 @@
+import Node from './shared/Node';
+
+export default class Options extends Node {
+	type: 'Options';
+}

src/compile/nodes/shared/mapChildren.ts

@@ -6,8 +6,8 @@ import Element from '../Element';
 import Head from '../Head';
 import IfBlock from '../IfBlock';
 import InlineComponent from '../InlineComponent';
-import Meta from '../Meta';
 import MustacheTag from '../MustacheTag';
+import Options from '../Options';
 import RawMustacheTag from '../RawMustacheTag';
 import DebugTag from '../DebugTag';
 import Slot from '../Slot';
@@ -26,8 +26,8 @@ function getConstructor(type): typeof Node {
 		case 'Head': return Head;
 		case 'IfBlock': return IfBlock;
 		case 'InlineComponent': return InlineComponent;
-		case 'Meta': return Meta;
 		case 'MustacheTag': return MustacheTag;
+		case 'Options': return Options;
 		case 'RawMustacheTag': return RawMustacheTag;
 		case 'DebugTag': return DebugTag;
 		case 'Slot': return Slot;

src/compile/render-dom/index.ts

@@ -73,13 +73,13 @@ export default function dom(
 	const props = component.vars.filter(variable => !variable.module && variable.export_name);
 	const writable_props = props.filter(variable => variable.writable);
 
-	const set = (component.meta.props || writable_props.length > 0 || renderer.slots.size > 0)
+	const set = (component.optionsTag.props || writable_props.length > 0 || renderer.slots.size > 0)
 		? deindent`
 			$$props => {
-				${component.meta.props && deindent`
+				${component.optionsTag.props && deindent`
-				if (!${component.meta.props}) ${component.meta.props} = {};
+				if (!${component.optionsTag.props}) ${component.optionsTag.props} = {};
-				@assign(${component.meta.props}, $$props);
+				@assign(${component.optionsTag.props}, $$props);
-				$$invalidate('${component.meta.props_object}', ${component.meta.props_object});
+				$$invalidate('${component.optionsTag.props_object}', ${component.optionsTag.props_object});
 				`}
 				${writable_props.map(prop =>
 				`if ('${prop.export_name}' in $$props) $$invalidate('${prop.name}', ${prop.name} = $$props.${prop.export_name});`)}
@@ -91,7 +91,7 @@ export default function dom(
 
 	const body = [];
 
-	const not_equal = component.meta.immutable ? `@not_equal` : `@safe_not_equal`;
+	const not_equal = component.optionsTag.immutable ? `@not_equal` : `@safe_not_equal`;
 	let dev_props_check;
 
 	props.forEach(x => {
@@ -355,7 +355,7 @@ export default function dom(
 							@insert(options.target, this, options.anchor);
 						}
 
-						${(props.length > 0 || component.meta.props) && deindent`
+						${(props.length > 0 || component.optionsTag.props) && deindent`
 						if (options.props) {
 							this.$set(options.props);
 							@flush();

src/compile/render-dom/wrappers/Fragment.ts

@@ -29,8 +29,8 @@ const wrappers = {
 	Head,
 	IfBlock,
 	InlineComponent,
-	Meta: null,
 	MustacheTag,
+	Options: null,
 	RawMustacheTag,
 	Slot,
 	Text,

src/compile/render-ssr/Renderer.ts

@@ -27,8 +27,8 @@ const handlers: Record<string, Handler> = {
 	Head,
 	IfBlock,
 	InlineComponent,
-	Meta: noop,
 	MustacheTag: Tag, // TODO MustacheTag is an anachronism
+	Options: noop,
 	RawMustacheTag: HtmlTag,
 	Slot,
 	Text,

src/parse/state/tag.ts

@@ -12,7 +12,7 @@ const validTagName = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
 
 const metaTags = new Map([
 	['svelte:head', 'Head'],
-	['svelte:meta', 'Meta'],
+	['svelte:options', 'Options'],
 	['svelte:window', 'Window'],
 	['svelte:body', 'Body']
 ]);

test/cli/samples/custom-element/src/Main.html

@@ -1,3 +1,3 @@
-<svelte:meta tag="my-element"/>
+<svelte:options tag="my-element"/>
 
 <p>Hello world!</p>

test/custom-elements/samples/custom-method/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="custom-element"/>
+<svelte:options tag="custom-element"/>
 
 <script>
 	export function updateFoo(value) {

test/custom-elements/samples/escaped-css/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="custom-element"/>
+<svelte:options tag="custom-element"/>
 
 <span class='icon'></span>
 

test/custom-elements/samples/html-slots/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="custom-element"/>
+<svelte:options tag="custom-element"/>
 
 <div>
 	<slot>

test/custom-elements/samples/html/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="custom-element"/>
+<svelte:options tag="custom-element"/>
 
 <script>
 	export let name;

test/custom-elements/samples/nested.skip/Counter.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="my-counter"/>
+<svelte:options tag="my-counter"/>
 
 <script>
 	export let count = 0;

test/custom-elements/samples/nested.skip/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="my-app"/>
+<svelte:options tag="my-app"/>
 
 <script>
 	import Counter from './Counter.html';

test/custom-elements/samples/new-styled/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="custom-element"/>
+<svelte:options tag="custom-element"/>
 
 <p>styled</p>
 

test/custom-elements/samples/new/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="custom-element"/>
+<svelte:options tag="custom-element"/>
 
 <script>
 	export let name;

test/custom-elements/samples/no-missing-prop-warnings/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="my-app"/>
+<svelte:options tag="my-app"/>
 
 <script>
 	export let foo;

test/custom-elements/samples/oncreate/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="my-app"/>
+<svelte:options tag="my-app"/>
 
 <script>
 	import { onMount } from 'svelte';
@@ -9,4 +9,3 @@
 		wasCreated = true;
 	});
 </script>
-

test/custom-elements/samples/props/main.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="custom-element"/>
+<svelte:options tag="custom-element"/>
 
 <script>
 	import './my-widget.html';

test/custom-elements/samples/props/my-widget.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="my-widget"/>
+<svelte:options tag="my-widget"/>
 
 <script>
 	export let items = [];

test/js/samples/component-static-immutable/input.html

@@ -1,4 +1,4 @@
-<svelte:meta immutable/>
+<svelte:options immutable/>
 
 <script>
 	const Nested = window.Nested;

test/js/samples/css-shadow-dom-keyframes/input.html

@@ -1,4 +1,4 @@
-<svelte:meta tag="custom-element"/>
+<svelte:options tag="custom-element"/>
 
 <div>fades in</div>
 

test/parser/samples/error-svelte-selfdestructive/error.json

@@ -1,6 +1,6 @@
 {
 	"code": "invalid-tag-name",
-	"message": "Valid <svelte:...> tag names are svelte:head, svelte:meta, svelte:window, svelte:body, svelte:self or svelte:component",
+	"message": "Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component",
 	"pos": 10,
 	"start": {
 		"character": 10,

test/runtime/samples/immutable-svelte-meta-false/main.html

@@ -1,4 +1,4 @@
-<svelte:meta immutable={false}/>
+<svelte:options immutable={false}/>
 
 <script>
 	export let count = 0;

test/runtime/samples/immutable-svelte-meta/main.html

@@ -1,4 +1,4 @@
-<svelte:meta immutable/>
+<svelte:options immutable/>
 
 <script>
 	export let count = 0;

test/runtime/samples/spread-own-props/main.html

@@ -1,4 +1,4 @@
-<svelte:meta bind:props/>
+<svelte:options bind:props/>
 
 <script>
 	import Widget from './Widget.html';

test/runtime/samples/svg-child-component-declared-namespace-shorthand/Rect.html

@@ -1,4 +1,4 @@
-<svelte:meta namespace="svg"/>
+<svelte:options namespace="svg"/>
 
 <script>
 	export let x;

test/runtime/samples/svg-child-component-declared-namespace/Rect.html

@@ -1,4 +1,4 @@
-<svelte:meta namespace="http://www.w3.org/2000/svg"/>
+<svelte:options namespace="http://www.w3.org/2000/svg"/>
 
 <script>
 	export let x;

test/validator/samples/namespace-invalid-unguessable/errors.json

@@ -1,15 +1,15 @@
 [{
 	"code": "invalid-namespace-property",
 	"message": "Invalid namespace 'lol'",
-	"pos": 13,
+	"pos": 16,
 	"start": {
 		"line": 1,
-		"column": 13,
+		"column": 16,
-		"character": 13
+		"character": 16
 	},
 	"end": {
 		"line": 1,
-		"column": 28,
+		"column": 31,
-		"character": 28
+		"character": 31
 	}
 }]

test/validator/samples/namespace-invalid-unguessable/input.html

@@ -1 +1 @@
-<svelte:meta namespace="lol"/>
+<svelte:options namespace="lol"/>

test/validator/samples/namespace-invalid/errors.json

@@ -1,15 +1,15 @@
 [{
 	"code": "invalid-namespace-property",
 	"message": "Invalid namespace 'http://www.w3.org/1999/svg' (did you mean 'http://www.w3.org/2000/svg'?)",
-	"pos": 13,
+	"pos": 16,
 	"start": {
 		"line": 1,
-		"column": 13,
+		"column": 16,
-		"character": 13
+		"character": 16
 	},
 	"end": {
 		"line": 1,
-		"column": 51,
+		"column": 54,
-		"character": 51
+		"character": 54
 	}
 }]

test/validator/samples/namespace-invalid/input.html

@@ -1 +1 @@
-<svelte:meta namespace="http://www.w3.org/1999/svg"/>
+<svelte:options namespace="http://www.w3.org/1999/svg"/>

test/validator/samples/namespace-non-literal/errors.json

@@ -1,15 +1,15 @@
 [{
 	"code": "invalid-namespace-attribute",
 	"message": "The 'namespace' attribute must be a string literal representing a valid namespace",
-	"pos": 13,
+	"pos": 16,
 	"start": {
 		"line": 1,
-		"column": 13,
+		"column": 16,
-		"character": 13
+		"character": 16
 	},
 	"end": {
 		"line": 1,
-		"column": 27,
+		"column": 30,
-		"character": 27
+		"character": 30
 	}
 }]

test/validator/samples/namespace-non-literal/input.html

@@ -1 +1 @@
-<svelte:meta namespace={ns}/>
+<svelte:options namespace={ns}/>

test/validator/samples/svg-child-component-declared-namespace/input.html

@@ -1,4 +1,4 @@
-<svelte:meta namespace="svg"/>
+<svelte:options namespace="svg"/>
 
 <script>
 	export let x;

test/validator/samples/tag-invalid/errors.json

@@ -3,13 +3,13 @@
 	"message": "tag name must be two or more words joined by the '-' character",
 	"start": {
 		"line": 1,
-		"column": 13,
+		"column": 16,
-		"character": 13
+		"character": 16
 	},
 	"end": {
 		"line": 1,
-		"column": 26,
+		"column": 29,
-		"character": 26
+		"character": 29
 	},
-	"pos": 13
+	"pos": 16
 }]

test/validator/samples/tag-invalid/input.html

@@ -1 +1 @@
-<svelte:meta tag="invalid"/>
+<svelte:options tag="invalid"/>

test/validator/samples/tag-non-string/errors.json

@@ -3,13 +3,13 @@
 	"message": "'tag' must be a string literal",
 	"start": {
 		"line": 1,
-		"column": 13,
+		"column": 16,
-		"character": 13
+		"character": 16
 	},
 	"end": {
 		"line": 1,
-		"column": 21,
+		"column": 24,
-		"character": 21
+		"character": 24
 	},
-	"pos": 13
+	"pos": 16
 }]

test/validator/samples/tag-non-string/input.html

@@ -1 +1 @@
-<svelte:meta tag={42}/>
+<svelte:options tag={42}/>