msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

moved transformation in template.js

Browse Source
pull/9462/head
paoloricciuti 3 years ago
parent f763eff069
commit 565c7f6ffe
8 changed files with 149 additions and 40 deletions
Show Stats Download Patch File Download Diff File

11
packages/svelte/src/compiler/phases/1-parse/state/element.js
Unescape View File

@ -467,16 +467,7 @@ function read_attribute(parser, unique_names) {
}
if (type) {
const [base_directive_name, ...modifiers] = name.slice(colon_index + 1).split('|');
// this allow for accessing members of an object
const splitted_directive = base_directive_name.split('.');
let directive_name = splitted_directive.shift() ?? '';
for (let new_piece of splitted_directive) {
directive_name += `['${new_piece}']`;
}
const [directive_name, ...modifiers] = name.slice(colon_index + 1).split('|');
if (directive_name === '') {
error(start + colon_index + 1, 'empty-directive-name', type);

37
packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
Unescape View File

@ -74,6 +74,22 @@ function serialize_style_directives(style_directives, element_id, context, is_at
}
}
/**
* goes from nested.access to nested['access']
* @param {string} expression
*/
function member_expression_id_to_literal(expression) {
// this allow for accessing members of an object
const splitted_expression = expression.split('.');
let new_expression = splitted_expression.shift() ?? '';
for (let new_piece of splitted_expression) {
new_expression += `['${new_piece}']`;
}
return new_expression;
}
/**
* Serializes each class directive into something like `$.class_toogle(element, class_name, value)`
* and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
@ -1676,7 +1692,16 @@ export const template_visitors = {
? b.literal(null)
: b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression)));
state.init.push(b.stmt(b.call('$.animate', state.node, b.id(node.name), expression)));
state.init.push(
b.stmt(
b.call(
'$.animate',
state.node,
b.id(member_expression_id_to_literal(node.name)),
expression
)
)
);
},
ClassDirective(node, { state, next }) {
error(node, 'INTERNAL', 'Node should have been handled elsewhere');
@ -1696,7 +1721,7 @@ export const template_visitors = {
b.call(
type,
state.node,
b.id(node.name),
b.id(member_expression_id_to_literal(node.name)),
expression,
node.modifiers.includes('global') ? b.true : b.false
)
@ -2417,7 +2442,13 @@ export const template_visitors = {
/** @type {import('estree').Expression[]} */
const args = [
state.node,
b.arrow(params, b.call(serialize_get_binding(b.id(node.name), state), ...params))
b.arrow(
params,
b.call(
serialize_get_binding(b.id(member_expression_id_to_literal(node.name)), state),
...params
)
)
];
if (node.expression) {

1
packages/svelte/tests/parser-legacy/samples/action-with-memberaccess/input.svelte
Unescape View File

@ -1 +0,0 @@
<input use:nested.action>

26
packages/svelte/tests/parser-legacy/samples/action-with-memberaccess/output.json
Unescape View File

@ -1,26 +0,0 @@
{
"html": {
"type": "Fragment",
"start": 0,
"end": 25,
"children": [
{
"type": "Element",
"start": 0,
"end": 25,
"name": "input",
"attributes": [
{
"start": 7,
"end": 24,
"type": "Action",
"name": "nested['action']",
"modifiers": [],
"expression": null
}
],
"children": []
}
]
}
}

3
packages/svelte/tests/snapshot/samples/directives-with-member-access/_config.js
Unescape View File

@ -0,0 +1,3 @@
import { test } from '../../test';
export default test({});

72
packages/svelte/tests/snapshot/samples/directives-with-member-access/_expected/client/index.svelte.js
Unescape View File

@ -0,0 +1,72 @@
// index.svelte (Svelte VERSION)
// Note: compiler output will change before 5.0 is released!
import "svelte/internal/disclose-version";
import * as $ from "svelte/internal";
var frag = $.template(`<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>`, true);
export default function Directives_with_member_access($$anchor, $$props) {
$.push($$props, false);
const one = () => {};
const nested = { one };
const evenmore = { nested };
/* Init */
var fragment = $.open_frag($$anchor, true, frag);
var div = $.child_frag(fragment);
var div_1 = $.sibling($.sibling(div));
var div_2 = $.sibling($.sibling(div_1));
var div_3 = $.sibling($.sibling(div_2));
$.transition(div_3, one, null, false);
var div_4 = $.sibling($.sibling(div_3));
$.transition(div_4, nested['one'], null, false);
var div_5 = $.sibling($.sibling(div_4));
$.transition(div_5, evenmore['nested']['one'], null, false);
var div_6 = $.sibling($.sibling(div_5));
$.animate(div_6, one, null);
var div_7 = $.sibling($.sibling(div_6));
$.animate(div_7, nested['one'], null);
var div_8 = $.sibling($.sibling(div_7));
$.animate(div_8, evenmore['nested']['one'], null);
var div_9 = $.sibling($.sibling(div_8));
$.in(div_9, one, null, false);
var div_10 = $.sibling($.sibling(div_9));
$.in(div_10, nested['one'], null, false);
var div_11 = $.sibling($.sibling(div_10));
$.in(div_11, evenmore['nested']['one'], null, false);
var div_12 = $.sibling($.sibling(div_11));
$.out(div_12, one, null, false);
var div_13 = $.sibling($.sibling(div_12));
$.out(div_13, nested['one'], null, false);
var div_14 = $.sibling($.sibling(div_13));
$.out(div_14, evenmore['nested']['one'], null, false);
$.action(div, $$node => one($$node));
$.action(div_1, $$node => nested['one']($$node));
$.action(div_2, $$node => evenmore['nested']['one']($$node));
$.close_frag($$anchor, fragment);
$.pop();
}

14
packages/svelte/tests/snapshot/samples/directives-with-member-access/_expected/server/index.svelte.js
Unescape View File

@ -0,0 +1,14 @@
// index.svelte (Svelte VERSION)
// Note: compiler output will change before 5.0 is released!
import * as $ from "svelte/internal/server";
export default function Directives_with_member_access($$payload, $$props) {
$.push(false);
const one = () => {};
const nested = { one };
const evenmore = { nested };
$$payload.out += `<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>`;
$.pop();
}

25
packages/svelte/tests/snapshot/samples/directives-with-member-access/index.svelte
Unescape View File

@ -0,0 +1,25 @@
<script>
const one = ()=>{};
const nested = {one};
const evenmore = {nested};
</script>
<div use:one />
<div use:nested.one />
<div use:evenmore.nested.one />
<div transition:one />
<div transition:nested.one />
<div transition:evenmore.nested.one />
<div animate:one />
<div animate:nested.one />
<div animate:evenmore.nested.one />
<div in:one />
<div in:nested.one />
<div in:evenmore.nested.one />
<div out:one />
<div out:nested.one />
<div out:evenmore.nested.one />
Write Preview
Loading…
Cancel
Save