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

pull/2021/head
Conduitry 7 years ago
parent 14d41af973
commit a270661d20

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

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

@ -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.namespace = namespaces[this.meta.namespace] || this.meta.namespace;
this.optionsTag = process_options_tag(this, this.ast.html.children);
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) {
const meta: Meta = {
function process_options_tag(component, nodes) {
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`,
message: `<svelte:meta> unknown attribute`
code: `invalid-options-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`,
message: `<svelte:meta> only supports bind:props`
code: `invalid-options-binding`,
message: `<svelte:options> only supports bind:props`
});
}
const { start, end } = attribute.expression;
const { name } = flattenReference(attribute.expression);
meta.props = `[✂${start}-${end}✂]`;
meta.props_object = name;
optionsTag.props = `[✂${start}-${end}✂]`;
optionsTag.props_object = name;
}
else {
component.error(attribute, {
code: `invalid-meta-attribute`,
message: `<svelte:meta> can only have static 'tag', 'namespace' and 'immutable' attributes, or a bind:props directive`
code: `invalid-options-attribute`,
message: `<svelte:options> can only have static 'tag', 'namespace' and 'immutable' attributes, or a bind:props directive`
});
}
});
}
return meta;
return optionsTag;
}

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

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

@ -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;

@ -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`
if (!${component.meta.props}) ${component.meta.props} = {};
@assign(${component.meta.props}, $$props);
$$invalidate('${component.meta.props_object}', ${component.meta.props_object});
${component.optionsTag.props && deindent`
if (!${component.optionsTag.props}) ${component.optionsTag.props} = {};
@assign(${component.optionsTag.props}, $$props);
$$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();

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

@ -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,

@ -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']
]);

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

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

@ -1,4 +1,4 @@
<svelte:meta tag="custom-element"/>
<svelte:options tag="custom-element"/>
<span class='icon'></span>
@ -6,4 +6,4 @@
.icon::before {
content: '\ff'
}
</style>
</style>

@ -1,4 +1,4 @@
<svelte:meta tag="custom-element"/>
<svelte:options tag="custom-element"/>
<div>
<slot>
@ -8,4 +8,4 @@
<slot name='foo'>
<p>foo fallback content</p>
</slot>
</div>
</div>

@ -1,7 +1,7 @@
<svelte:meta tag="custom-element"/>
<svelte:options tag="custom-element"/>
<script>
export let name;
</script>
<h1>Hello {name}!</h1>
<h1>Hello {name}!</h1>

@ -1,7 +1,7 @@
<svelte:meta tag="my-counter"/>
<svelte:options tag="my-counter"/>
<script>
export let count = 0;
</script>
<button on:click='{() => count += 1}'>count: {count}</button>
<button on:click='{() => count += 1}'>count: {count}</button>

@ -1,4 +1,4 @@
<svelte:meta tag="my-app"/>
<svelte:options tag="my-app"/>
<script>
import Counter from './Counter.html';
@ -7,4 +7,4 @@
</script>
<Counter bind:count/>
<p>clicked {count} times</p>
<p>clicked {count} times</p>

@ -1,4 +1,4 @@
<svelte:meta tag="custom-element"/>
<svelte:options tag="custom-element"/>
<p>styled</p>
@ -6,4 +6,4 @@
p {
color: red;
}
</style>
</style>

@ -1,7 +1,7 @@
<svelte:meta tag="custom-element"/>
<svelte:options tag="custom-element"/>
<script>
export let name;
</script>
<h1>Hello {name}!</h1>
<h1>Hello {name}!</h1>

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

@ -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>

@ -1,4 +1,4 @@
<svelte:meta tag="custom-element"/>
<svelte:options tag="custom-element"/>
<script>
import './my-widget.html';
@ -6,4 +6,4 @@
export let items = ['a', 'b', 'c'];
</script>
<my-widget class="foo" {items}/>
<my-widget class="foo" {items}/>

@ -1,8 +1,8 @@
<svelte:meta tag="my-widget"/>
<svelte:options tag="my-widget"/>
<script>
export let items = [];
</script>
<p>{items.length} items</p>
<p>{items.join(', ')}</p>
<p>{items.join(', ')}</p>

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

@ -1,4 +1,4 @@
<svelte:meta tag="custom-element"/>
<svelte:options tag="custom-element"/>
<div>fades in</div>
@ -11,4 +11,4 @@
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</style>

@ -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,

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

@ -1,4 +1,4 @@
<svelte:meta immutable/>
<svelte:options immutable/>
<script>
export let count = 0;
@ -9,4 +9,4 @@
<div>
<h3>Called {count} times.</h3>
</div>
</div>

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

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

@ -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;

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

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

@ -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,
"character": 13
"column": 16,
"character": 16
},
"end": {
"line": 1,
"column": 51,
"character": 51
"column": 54,
"character": 54
}
}]

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

@ -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,
"character": 13
"column": 16,
"character": 16
},
"end": {
"line": 1,
"column": 27,
"character": 27
"column": 30,
"character": 30
}
}]

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

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

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

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

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

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

Loading…
Cancel
Save