fix parser tests

pull/1866/head
Rich Harris 7 years ago
parent cedbb28586
commit 1c81f85c11

@ -1,6 +1,7 @@
import Node from './shared/Node'; import Node from './shared/Node';
import getObject from '../../utils/getObject'; import getObject from '../../utils/getObject';
import Expression from './shared/Expression'; import Expression from './shared/Expression';
import Component from '../Component';
export default class Binding extends Node { export default class Binding extends Node {
name: string; name: string;
@ -10,9 +11,16 @@ export default class Binding extends Node {
obj: string; obj: string;
prop: string; prop: string;
constructor(component, parent, scope, info) { constructor(component: Component, parent, scope, info) {
super(component, parent, scope, info); super(component, parent, scope, info);
if (info.expression.type !== 'Identifier' && info.expression.node.type !== 'MemberExpression') {
component.error(info, {
code: 'invalid-directive-value',
message: 'Can only bind to an identifier (e.g. `foo`) or a member expression (e.g. `foo.bar` or `foo[baz]`)'
});
}
this.name = info.name; this.name = info.name;
this.expression = new Expression(component, this, scope, info.expression); this.expression = new Expression(component, this, scope, info.expression);

@ -220,6 +220,16 @@ export default function parse(
options: ParserOptions = {} options: ParserOptions = {}
): Ast { ): Ast {
const parser = new Parser(template, options); const parser = new Parser(template, options);
// TODO we way want to allow multiple <style> tags —
// one scoped, one global. for now, only allow one
if (parser.css.length > 1) {
parser.error({
code: 'duplicate-style',
message: 'You can only have one top-level <style> tag per component'
}, parser.css[1].start);
}
return { return {
html: parser.html, html: parser.html,
css: parser.css, css: parser.css,

@ -392,7 +392,7 @@ function readAttribute(parser: Parser, uniqueNames: Set<string>) {
end, end,
type, type,
name: directive_name, name: directive_name,
expression: value[0] && value[0].expression expression: (value[0] && value[0].expression) || null
}; };
if (type === 'Transition') { if (type === 'Transition') {

@ -17,7 +17,7 @@ function getName(filename) {
return base[0].toUpperCase() + base.slice(1); return base[0].toUpperCase() + base.slice(1);
} }
describe.only('hydration', () => { describe('hydration', () => {
before(() => { before(() => {
const svelte = loadSvelte(); const svelte = loadSvelte();

@ -2,7 +2,7 @@ import * as assert from 'assert';
import * as fs from 'fs'; import * as fs from 'fs';
import { svelte, tryToLoadJson } from '../helpers.js'; import { svelte, tryToLoadJson } from '../helpers.js';
describe('parse', () => { describe.only('parse', () => {
fs.readdirSync('test/parser/samples').forEach(dir => { fs.readdirSync('test/parser/samples').forEach(dir => {
if (dir[0] === '.') return; if (dir[0] === '.') return;

@ -1 +1 @@
<input use:tooltip="t('tooltip msg')"> <input use:tooltip="{t('tooltip msg')}">

@ -1,35 +1,35 @@
{ {
"html": { "html": {
"start": 0, "start": 0,
"end": 38, "end": 40,
"type": "Fragment", "type": "Fragment",
"children": [ "children": [
{ {
"start": 0, "start": 0,
"end": 38, "end": 40,
"type": "Element", "type": "Element",
"name": "input", "name": "input",
"attributes": [ "attributes": [
{ {
"start": 7, "start": 7,
"end": 37, "end": 39,
"type": "Action", "type": "Action",
"name": "tooltip", "name": "tooltip",
"expression": { "expression": {
"type": "CallExpression", "type": "CallExpression",
"start": 20, "start": 21,
"end": 36, "end": 37,
"callee": { "callee": {
"type": "Identifier", "type": "Identifier",
"start": 20, "start": 21,
"end": 21, "end": 22,
"name": "t" "name": "t"
}, },
"arguments": [ "arguments": [
{ {
"type": "Literal", "type": "Literal",
"start": 22, "start": 23,
"end": 35, "end": 36,
"value": "tooltip msg", "value": "tooltip msg",
"raw": "'tooltip msg'" "raw": "'tooltip msg'"
} }
@ -41,6 +41,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -1 +1 @@
<input use:tooltip="message"> <input use:tooltip={message}>

@ -27,6 +27,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -1 +1 @@
<input use:tooltip="'tooltip msg'"> <input use:tooltip="{'tooltip msg'}">

@ -1,24 +1,24 @@
{ {
"html": { "html": {
"start": 0, "start": 0,
"end": 35, "end": 37,
"type": "Fragment", "type": "Fragment",
"children": [ "children": [
{ {
"start": 0, "start": 0,
"end": 35, "end": 37,
"type": "Element", "type": "Element",
"name": "input", "name": "input",
"attributes": [ "attributes": [
{ {
"start": 7, "start": 7,
"end": 34, "end": 36,
"type": "Action", "type": "Action",
"name": "tooltip", "name": "tooltip",
"expression": { "expression": {
"type": "Literal", "type": "Literal",
"start": 20, "start": 21,
"end": 33, "end": 34,
"value": "tooltip msg", "value": "tooltip msg",
"raw": "'tooltip msg'" "raw": "'tooltip msg'"
} }
@ -28,6 +28,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -22,6 +22,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -54,6 +54,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -36,6 +36,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -34,6 +34,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -34,6 +34,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -58,6 +58,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -29,6 +29,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -43,6 +43,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -34,6 +34,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -22,6 +22,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -29,6 +29,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -29,6 +29,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -155,6 +155,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -15,10 +15,10 @@
"end": 16, "end": 16,
"type": "Binding", "type": "Binding",
"name": "foo", "name": "foo",
"value": { "expression": {
"type": "Identifier",
"start": 13, "start": 13,
"end": 16, "end": 16,
"type": "Identifier",
"name": "foo" "name": "foo"
} }
} }
@ -27,6 +27,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -15,7 +15,7 @@
"end": 24, "end": 24,
"type": "Binding", "type": "Binding",
"name": "value", "name": "value",
"value": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 19, "start": 19,
"end": 23, "end": 23,
@ -27,6 +27,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -12,6 +12,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -37,6 +37,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -21,6 +21,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -12,6 +12,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -14,7 +14,8 @@
"start": 5, "start": 5,
"end": 12, "end": 12,
"type": "Ref", "type": "Ref",
"name": "foo" "name": "foo",
"expression": null
} }
], ],
"children": [] "children": []
@ -27,7 +28,8 @@
} }
] ]
}, },
"css": { "css": [
{
"start": 16, "start": 16,
"end": 60, "end": 60,
"attributes": [], "attributes": [],
@ -90,6 +92,7 @@
"end": 52, "end": 52,
"styles": "\n\tref:foo {\n\t\tcolor: red;\n\t}\n" "styles": "\n\tref:foo {\n\t\tcolor: red;\n\t}\n"
} }
}, }
"js": null ],
"js": []
} }

@ -27,7 +27,8 @@
} }
] ]
}, },
"css": { "css": [
{
"start": 16, "start": 16,
"end": 56, "end": 56,
"attributes": [], "attributes": [],
@ -90,6 +91,7 @@
"end": 48, "end": 48,
"styles": "\n\tdiv {\n\t\tcolor: red;\n\t}\n" "styles": "\n\tdiv {\n\t\tcolor: red;\n\t}\n"
} }
}, }
"js": null ],
"js": []
} }

@ -1,9 +1,9 @@
<script> <script>
export default { import { onMount } from 'svelte';
oncreate() {
onMount(() => {
import('./foo.js').then(foo => { import('./foo.js').then(foo => {
console.log(foo.default); console.log(foo.default);
}); });
} });
}
</script> </script>

@ -5,43 +5,67 @@
"type": "Fragment", "type": "Fragment",
"children": [] "children": []
}, },
"css": null, "css": [],
"js": { "js": [
{
"start": 0, "start": 0,
"end": 131, "end": 146,
"attributes": [], "attributes": [],
"content": { "content": {
"type": "Program", "type": "Program",
"start": 8, "start": 8,
"end": 122, "end": 137,
"body": [ "body": [
{ {
"type": "ExportDefaultDeclaration", "type": "ImportDeclaration",
"start": 10, "start": 10,
"end": 121, "end": 43,
"declaration": { "specifiers": [
"type": "ObjectExpression",
"start": 25,
"end": 121,
"properties": [
{ {
"type": "Property", "type": "ImportSpecifier",
"start": 29, "start": 19,
"end": 118, "end": 26,
"method": true, "imported": {
"shorthand": false, "type": "Identifier",
"computed": false, "start": 19,
"key": { "end": 26,
"name": "onMount"
},
"local": {
"type": "Identifier",
"start": 19,
"end": 26,
"name": "onMount"
}
}
],
"source": {
"type": "Literal",
"start": 34,
"end": 42,
"value": "svelte",
"raw": "'svelte'"
}
},
{
"type": "ExpressionStatement",
"start": 46,
"end": 136,
"expression": {
"type": "CallExpression",
"start": 46,
"end": 135,
"callee": {
"type": "Identifier", "type": "Identifier",
"start": 29, "start": 46,
"end": 37, "end": 53,
"name": "oncreate" "name": "onMount"
}, },
"kind": "init", "arguments": [
"value": { {
"type": "FunctionExpression", "type": "ArrowFunctionExpression",
"start": 37, "start": 54,
"end": 118, "end": 134,
"id": null, "id": null,
"generator": false, "generator": false,
"expression": false, "expression": false,
@ -49,35 +73,35 @@
"params": [], "params": [],
"body": { "body": {
"type": "BlockStatement", "type": "BlockStatement",
"start": 40, "start": 60,
"end": 118, "end": 134,
"body": [ "body": [
{ {
"type": "ExpressionStatement", "type": "ExpressionStatement",
"start": 45, "start": 64,
"end": 114, "end": 131,
"expression": { "expression": {
"type": "CallExpression", "type": "CallExpression",
"start": 45, "start": 64,
"end": 113, "end": 130,
"callee": { "callee": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 45, "start": 64,
"end": 68, "end": 87,
"object": { "object": {
"type": "CallExpression", "type": "CallExpression",
"start": 45, "start": 64,
"end": 63, "end": 82,
"callee": { "callee": {
"type": "Import", "type": "Import",
"start": 45, "start": 64,
"end": 51 "end": 70
}, },
"arguments": [ "arguments": [
{ {
"type": "Literal", "type": "Literal",
"start": 52, "start": 71,
"end": 62, "end": 81,
"value": "./foo.js", "value": "./foo.js",
"raw": "'./foo.js'" "raw": "'./foo.js'"
} }
@ -85,8 +109,8 @@
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 64, "start": 83,
"end": 68, "end": 87,
"name": "then" "name": "then"
}, },
"computed": false "computed": false
@ -94,8 +118,8 @@
"arguments": [ "arguments": [
{ {
"type": "ArrowFunctionExpression", "type": "ArrowFunctionExpression",
"start": 69, "start": 88,
"end": 112, "end": 129,
"id": null, "id": null,
"generator": false, "generator": false,
"expression": false, "expression": false,
@ -103,38 +127,38 @@
"params": [ "params": [
{ {
"type": "Identifier", "type": "Identifier",
"start": 69, "start": 88,
"end": 72, "end": 91,
"name": "foo" "name": "foo"
} }
], ],
"body": { "body": {
"type": "BlockStatement", "type": "BlockStatement",
"start": 76, "start": 95,
"end": 112, "end": 129,
"body": [ "body": [
{ {
"type": "ExpressionStatement", "type": "ExpressionStatement",
"start": 82, "start": 100,
"end": 107, "end": 125,
"expression": { "expression": {
"type": "CallExpression", "type": "CallExpression",
"start": 82, "start": 100,
"end": 106, "end": 124,
"callee": { "callee": {
"type": "MemberExpression", "type": "MemberExpression",
"start": 82, "start": 100,
"end": 93, "end": 111,
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 82, "start": 100,
"end": 89, "end": 107,
"name": "console" "name": "console"
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 90, "start": 108,
"end": 93, "end": 111,
"name": "log" "name": "log"
}, },
"computed": false "computed": false
@ -142,18 +166,18 @@
"arguments": [ "arguments": [
{ {
"type": "MemberExpression", "type": "MemberExpression",
"start": 94, "start": 112,
"end": 105, "end": 123,
"object": { "object": {
"type": "Identifier", "type": "Identifier",
"start": 94, "start": 112,
"end": 97, "end": 115,
"name": "foo" "name": "foo"
}, },
"property": { "property": {
"type": "Identifier", "type": "Identifier",
"start": 98, "start": 116,
"end": 105, "end": 123,
"name": "default" "name": "default"
}, },
"computed": false "computed": false
@ -170,7 +194,6 @@
] ]
} }
} }
}
] ]
} }
} }
@ -178,4 +201,5 @@
"sourceType": "module" "sourceType": "module"
} }
} }
]
} }

@ -75,6 +75,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -67,6 +67,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -63,6 +63,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -63,6 +63,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -45,6 +45,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -38,6 +38,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -21,6 +21,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -22,6 +22,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -1,10 +0,0 @@
{
"code": "invalid-directive-value",
"message": "directive values should not be wrapped — use 'foo', not '{foo}'",
"start": {
"line": 1,
"column": 19,
"character": 19
},
"pos": 19
}

@ -1,10 +0,0 @@
{
"code": "invalid-directive-value",
"message": "Can only bind to an identifier (e.g. `foo`) or a member expression (e.g. `foo.bar` or `foo[baz]`)",
"pos": 19,
"start": {
"line": 1,
"column": 19,
"character": 19
}
}

@ -1,10 +0,0 @@
{
"code": "invalid-directive-value",
"message": "Expected a method call",
"start": {
"line": 1,
"column": 15,
"character": 15
},
"pos": 15
}

@ -1,10 +0,0 @@
{
"code": "invalid-directive-value",
"message": "ref directives cannot have a value",
"start": {
"line": 1,
"column": 14,
"character": 14
},
"pos": 14
}

@ -1,4 +1,4 @@
<button on:click='set({ visible: !visible })'>toggle</button> <button on:click="{() => visible = !visible}">toggle</button>
{#if visible} {#if visible}
<p>hello!</p> <p>hello!</p>

@ -15,54 +15,40 @@
"end": 45, "end": 45,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [],
"expression": { "expression": {
"type": "CallExpression", "type": "ArrowFunctionExpression",
"start": 18, "start": 19,
"end": 44,
"callee": {
"type": "Identifier",
"start": 18,
"end": 21,
"name": "set"
},
"arguments": [
{
"type": "ObjectExpression",
"start": 22,
"end": 43, "end": 43,
"properties": [ "id": null,
{ "generator": false,
"type": "Property", "expression": true,
"start": 24, "async": false,
"end": 41, "params": [],
"method": false, "body": {
"shorthand": false, "type": "AssignmentExpression",
"computed": false, "start": 25,
"key": { "end": 43,
"operator": "=",
"left": {
"type": "Identifier", "type": "Identifier",
"start": 24, "start": 25,
"end": 31, "end": 32,
"name": "visible" "name": "visible"
}, },
"value": { "right": {
"type": "UnaryExpression", "type": "UnaryExpression",
"start": 33, "start": 35,
"end": 41, "end": 43,
"operator": "!", "operator": "!",
"prefix": true, "prefix": true,
"argument": { "argument": {
"type": "Identifier", "type": "Identifier",
"start": 34, "start": 36,
"end": 41, "end": 43,
"name": "visible" "name": "visible"
} }
},
"kind": "init"
} }
]
} }
]
} }
} }
], ],
@ -111,6 +97,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -56,6 +56,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -96,6 +96,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -25,6 +25,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -66,6 +66,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -21,6 +21,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -55,6 +55,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -14,13 +14,14 @@
"start": 8, "start": 8,
"end": 15, "end": 15,
"type": "Ref", "type": "Ref",
"name": "foo" "name": "foo",
"expression": null
} }
], ],
"children": [] "children": []
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -1,5 +1,5 @@
<div></div>
<script> <script>
// TODO write some code // TODO write some code
</script> </script>
<div></div>

@ -1,25 +1,27 @@
{ {
"html": { "html": {
"start": 0, "start": 45,
"end": 11, "end": 56,
"type": "Fragment", "type": "Fragment",
"children": [ "children": [
{ {
"start": 0, "start": 43,
"end": 11, "end": 45,
"type": "Text",
"data": "\n\n"
},
{
"start": 45,
"end": 56,
"type": "Element", "type": "Element",
"name": "div", "name": "div",
"attributes": [], "attributes": [],
"children": [] "children": []
},
{
"start": 11,
"end": 13,
"type": "Text",
"data": "\n\n"
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": [
null
]
} }

@ -1,13 +1,9 @@
<h1>Hello {name}!</h1>
<script> <script>
export default { let name = 'world';
data: () => ({
name: 'world'
})
};
/* /*
trailing multiline comment trailing multiline comment
*/ */
</script> </script>
<h1>Hello {name}!</h1>

@ -1,127 +1,89 @@
{ {
"html": { "html": {
"start": 0, "start": 79,
"end": 22, "end": 101,
"type": "Fragment", "type": "Fragment",
"children": [ "children": [
{ {
"start": 0, "start": 77,
"end": 22, "end": 79,
"type": "Text",
"data": "\n\n"
},
{
"start": 79,
"end": 101,
"type": "Element", "type": "Element",
"name": "h1", "name": "h1",
"attributes": [], "attributes": [],
"children": [ "children": [
{ {
"start": 4, "start": 83,
"end": 10, "end": 89,
"type": "Text", "type": "Text",
"data": "Hello " "data": "Hello "
}, },
{ {
"start": 10, "start": 89,
"end": 16, "end": 95,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 11, "start": 90,
"end": 15, "end": 94,
"name": "name" "name": "name"
} }
}, },
{ {
"start": 16, "start": 95,
"end": 17, "end": 96,
"type": "Text", "type": "Text",
"data": "!" "data": "!"
} }
] ]
},
{
"start": 22,
"end": 24,
"type": "Text",
"data": "\n\n"
} }
] ]
}, },
"css": null, "css": [],
"js": { "js": [
"start": 24, {
"end": 141, "start": 0,
"end": 77,
"attributes": [], "attributes": [],
"content": { "content": {
"type": "Program", "type": "Program",
"start": 32, "start": 8,
"end": 132, "end": 68,
"body": [ "body": [
{ {
"type": "ExportDefaultDeclaration", "type": "VariableDeclaration",
"start": 34, "start": 10,
"end": 93, "end": 29,
"declaration": { "declarations": [
"type": "ObjectExpression",
"start": 49,
"end": 92,
"properties": [
{
"type": "Property",
"start": 53,
"end": 89,
"method": false,
"shorthand": false,
"computed": false,
"key": {
"type": "Identifier",
"start": 53,
"end": 57,
"name": "data"
},
"value": {
"type": "ArrowFunctionExpression",
"start": 59,
"end": 89,
"id": null,
"generator": false,
"expression": true,
"async": false,
"params": [],
"body": {
"type": "ObjectExpression",
"start": 66,
"end": 88,
"properties": [
{ {
"type": "Property", "type": "VariableDeclarator",
"start": 71, "start": 14,
"end": 84, "end": 28,
"method": false, "id": {
"shorthand": false,
"computed": false,
"key": {
"type": "Identifier", "type": "Identifier",
"start": 71, "start": 14,
"end": 75, "end": 18,
"name": "name" "name": "name"
}, },
"value": { "init": {
"type": "Literal", "type": "Literal",
"start": 77, "start": 21,
"end": 84, "end": 28,
"value": "world", "value": "world",
"raw": "'world'" "raw": "'world'"
},
"kind": "init"
} }
]
}
},
"kind": "init"
}
]
} }
],
"kind": "let"
} }
], ],
"sourceType": "module" "sourceType": "module"
} }
} }
]
} }

@ -1,11 +1,7 @@
<h1>Hello {name}!</h1>
<script> <script>
export default { let name = 'world';
data: () => ({
name: 'world'
})
};
// trailing line comment // trailing line comment
</script> </script>
<h1>Hello {name}!</h1>

@ -1,127 +1,89 @@
{ {
"html": { "html": {
"start": 0, "start": 68,
"end": 22, "end": 90,
"type": "Fragment", "type": "Fragment",
"children": [ "children": [
{ {
"start": 0, "start": 66,
"end": 22, "end": 68,
"type": "Text",
"data": "\n\n"
},
{
"start": 68,
"end": 90,
"type": "Element", "type": "Element",
"name": "h1", "name": "h1",
"attributes": [], "attributes": [],
"children": [ "children": [
{ {
"start": 4, "start": 72,
"end": 10, "end": 78,
"type": "Text", "type": "Text",
"data": "Hello " "data": "Hello "
}, },
{ {
"start": 10, "start": 78,
"end": 16, "end": 84,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 11, "start": 79,
"end": 15, "end": 83,
"name": "name" "name": "name"
} }
}, },
{ {
"start": 16, "start": 84,
"end": 17, "end": 85,
"type": "Text", "type": "Text",
"data": "!" "data": "!"
} }
] ]
},
{
"start": 22,
"end": 24,
"type": "Text",
"data": "\n\n"
} }
] ]
}, },
"css": null, "css": [],
"js": { "js": [
"start": 24, {
"end": 130, "start": 0,
"end": 66,
"attributes": [], "attributes": [],
"content": { "content": {
"type": "Program", "type": "Program",
"start": 32, "start": 8,
"end": 121, "end": 57,
"body": [ "body": [
{ {
"type": "ExportDefaultDeclaration", "type": "VariableDeclaration",
"start": 34, "start": 10,
"end": 93, "end": 29,
"declaration": { "declarations": [
"type": "ObjectExpression",
"start": 49,
"end": 92,
"properties": [
{
"type": "Property",
"start": 53,
"end": 89,
"method": false,
"shorthand": false,
"computed": false,
"key": {
"type": "Identifier",
"start": 53,
"end": 57,
"name": "data"
},
"value": {
"type": "ArrowFunctionExpression",
"start": 59,
"end": 89,
"id": null,
"generator": false,
"expression": true,
"async": false,
"params": [],
"body": {
"type": "ObjectExpression",
"start": 66,
"end": 88,
"properties": [
{ {
"type": "Property", "type": "VariableDeclarator",
"start": 71, "start": 14,
"end": 84, "end": 28,
"method": false, "id": {
"shorthand": false,
"computed": false,
"key": {
"type": "Identifier", "type": "Identifier",
"start": 71, "start": 14,
"end": 75, "end": 18,
"name": "name" "name": "name"
}, },
"value": { "init": {
"type": "Literal", "type": "Literal",
"start": 77, "start": 21,
"end": 84, "end": 28,
"value": "world", "value": "world",
"raw": "'world'" "raw": "'world'"
},
"kind": "init"
}
]
}
},
"kind": "init"
} }
]
} }
],
"kind": "let"
} }
], ],
"sourceType": "module" "sourceType": "module"
} }
} }
]
} }

@ -1,9 +1,5 @@
<h1>Hello {name}!</h1>
<script> <script>
export default { let name = 'world';
data: () => ({
name: 'world'
})
};
</script> </script>
<h1>Hello {name}!</h1>

@ -1,127 +1,89 @@
{ {
"html": { "html": {
"start": 0, "start": 41,
"end": 22, "end": 63,
"type": "Fragment", "type": "Fragment",
"children": [ "children": [
{ {
"start": 0, "start": 39,
"end": 22, "end": 41,
"type": "Text",
"data": "\n\n"
},
{
"start": 41,
"end": 63,
"type": "Element", "type": "Element",
"name": "h1", "name": "h1",
"attributes": [], "attributes": [],
"children": [ "children": [
{ {
"start": 4, "start": 45,
"end": 10, "end": 51,
"type": "Text", "type": "Text",
"data": "Hello " "data": "Hello "
}, },
{ {
"start": 10, "start": 51,
"end": 16, "end": 57,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 11, "start": 52,
"end": 15, "end": 56,
"name": "name" "name": "name"
} }
}, },
{ {
"start": 16, "start": 57,
"end": 17, "end": 58,
"type": "Text", "type": "Text",
"data": "!" "data": "!"
} }
] ]
},
{
"start": 22,
"end": 24,
"type": "Text",
"data": "\n\n"
} }
] ]
}, },
"css": null, "css": [],
"js": { "js": [
"start": 24, {
"end": 103, "start": 0,
"end": 39,
"attributes": [], "attributes": [],
"content": { "content": {
"type": "Program", "type": "Program",
"start": 32, "start": 8,
"end": 94, "end": 30,
"body": [ "body": [
{ {
"type": "ExportDefaultDeclaration", "type": "VariableDeclaration",
"start": 34, "start": 10,
"end": 93, "end": 29,
"declaration": { "declarations": [
"type": "ObjectExpression",
"start": 49,
"end": 92,
"properties": [
{
"type": "Property",
"start": 53,
"end": 89,
"method": false,
"shorthand": false,
"computed": false,
"key": {
"type": "Identifier",
"start": 53,
"end": 57,
"name": "data"
},
"value": {
"type": "ArrowFunctionExpression",
"start": 59,
"end": 89,
"id": null,
"generator": false,
"expression": true,
"async": false,
"params": [],
"body": {
"type": "ObjectExpression",
"start": 66,
"end": 88,
"properties": [
{ {
"type": "Property", "type": "VariableDeclarator",
"start": 71, "start": 14,
"end": 84, "end": 28,
"method": false, "id": {
"shorthand": false,
"computed": false,
"key": {
"type": "Identifier", "type": "Identifier",
"start": 71, "start": 14,
"end": 75, "end": 18,
"name": "name" "name": "name"
}, },
"value": { "init": {
"type": "Literal", "type": "Literal",
"start": 77, "start": 21,
"end": 84, "end": 28,
"value": "world", "value": "world",
"raw": "'world'" "raw": "'world'"
},
"kind": "init"
} }
]
}
},
"kind": "init"
}
]
} }
],
"kind": "let"
} }
], ],
"sourceType": "module" "sourceType": "module"
} }
} }
]
} }

@ -14,6 +14,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -73,6 +73,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -72,6 +72,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -26,6 +26,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -38,6 +38,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -31,6 +31,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -1 +1 @@
<div in:style='{opacity: 0}'>fades in</div> <div in:style="{{opacity: 0}}">fades in</div>

@ -1,42 +1,42 @@
{ {
"html": { "html": {
"start": 0, "start": 0,
"end": 43, "end": 45,
"type": "Fragment", "type": "Fragment",
"children": [ "children": [
{ {
"start": 0, "start": 0,
"end": 43, "end": 45,
"type": "Element", "type": "Element",
"name": "div", "name": "div",
"attributes": [ "attributes": [
{ {
"start": 5, "start": 5,
"end": 28, "end": 30,
"type": "Transition", "type": "Transition",
"name": "style", "name": "style",
"expression": { "expression": {
"type": "ObjectExpression", "type": "ObjectExpression",
"start": 15, "start": 16,
"end": 27, "end": 28,
"properties": [ "properties": [
{ {
"type": "Property", "type": "Property",
"start": 16, "start": 17,
"end": 26, "end": 27,
"method": false, "method": false,
"shorthand": false, "shorthand": false,
"computed": false, "computed": false,
"key": { "key": {
"type": "Identifier", "type": "Identifier",
"start": 16, "start": 17,
"end": 23, "end": 24,
"name": "opacity" "name": "opacity"
}, },
"value": { "value": {
"type": "Literal", "type": "Literal",
"start": 25, "start": 26,
"end": 26, "end": 27,
"value": 0, "value": 0,
"raw": "0" "raw": "0"
}, },
@ -50,8 +50,8 @@
], ],
"children": [ "children": [
{ {
"start": 29, "start": 31,
"end": 37, "end": 39,
"type": "Text", "type": "Text",
"data": "fades in" "data": "fades in"
} }
@ -59,6 +59,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -45,6 +45,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -27,6 +27,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -62,6 +62,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }

@ -17,6 +17,6 @@
} }
] ]
}, },
"css": null, "css": [],
"js": null "js": []
} }
Loading…
Cancel
Save