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

Merge pull request #862 from sveltejs/readable-each

Browse Source 
more readable each block values
pull/863/head
Rich Harris 7 years ago committed by GitHub
parent 75cf698885 5d84a93c99
commit f5f94c9a0c
8 changed files with 111 additions and 71 deletions
Show Stats Download Patch File Download Diff File

10
src/generators/Generator.ts
Unescape View File

@ -425,13 +425,19 @@ export default class Generator {
getUniqueNameMaker(params: string[]) { getUniqueNameMaker(params: string[]) {
const localUsedNames = new Set(params); const localUsedNames = new Set(params);
function add(name: string) {
localUsedNames.add(name);
}
reservedNames.forEach(add);
this.importedNames.forEach(add);
return (name: string) => { return (name: string) => {
if (test) name = `${name}$`; if (test) name = `${name}$`;
let alias = name; let alias = name;
for ( for (
let i = 1; let i = 1;
reservedNames.has(alias) ||
this.importedNames.has(alias) ||
this.usedNames.has(alias) || this.usedNames.has(alias) ||
localUsedNames.has(alias); localUsedNames.has(alias);
alias = `${name}_${i++}` alias = `${name}_${i++}`

30
src/generators/dom/index.ts
Unescape View File

@ -6,6 +6,7 @@ import { walk } from 'estree-walker';
import deindent from '../../utils/deindent'; import deindent from '../../utils/deindent';
import { stringify, escape } from '../../utils/stringify'; import { stringify, escape } from '../../utils/stringify';
import CodeBuilder from '../../utils/CodeBuilder'; import CodeBuilder from '../../utils/CodeBuilder';
import reservedNames from '../../utils/reservedNames';
import visit from './visit'; import visit from './visit';
import shared from './shared'; import shared from './shared';
import Generator from '../Generator'; import Generator from '../Generator';
@ -15,6 +16,8 @@ import Block from './Block';
import { version } from '../../../package.json'; import { version } from '../../../package.json';
import { Parsed, CompileOptions, Node } from '../../interfaces'; import { Parsed, CompileOptions, Node } from '../../interfaces';
const test = typeof global !== 'undefined' && global.__svelte_test;
export class DomGenerator extends Generator { export class DomGenerator extends Generator {
blocks: (Block|string)[]; blocks: (Block|string)[];
readonly: Set<string>; readonly: Set<string>;
@ -48,6 +51,33 @@ export class DomGenerator extends Generator {
// initial values for e.g. window.innerWidth, if there's a <:Window> meta tag // initial values for e.g. window.innerWidth, if there's a <:Window> meta tag
this.metaBindings = []; this.metaBindings = [];
} }
getUniqueNameMaker(params: string[]) {
const localUsedNames = new Set(params);
function add(name: string) {
localUsedNames.add(name);
}
reservedNames.forEach(add);
this.importedNames.forEach(add);
for (const name in shared) {
localUsedNames.add(test ? `${name}$` : name);
}
return (name: string) => {
if (test) name = `${name}$`;
let alias = name;
for (
let i = 1;
this.usedNames.has(alias) ||
localUsedNames.has(alias);
alias = `${name}_${i++}`
);
localUsedNames.add(alias);
return alias;
};
}
} }
export default function dom( export default function dom(

8
src/generators/dom/preprocess.ts
Unescape View File

@ -195,7 +195,7 @@ const preprocessors = {
stripWhitespace: boolean, stripWhitespace: boolean,
nextSibling: Node nextSibling: Node
) => { ) => {
node.var = block.getUniqueName(`each_block`); node.var = block.getUniqueName(`each`);
const dependencies = block.findDependencies(node.expression); const dependencies = block.findDependencies(node.expression);
block.addDependencies(dependencies); block.addDependencies(dependencies);
@ -206,7 +206,11 @@ const preprocessors = {
indexNames.set(node.context, indexName); indexNames.set(node.context, indexName);
const listNames = new Map(block.listNames); const listNames = new Map(block.listNames);
const listName = block.getUniqueName(`each_block_value`); const listName = block.getUniqueName(
(node.expression.type === 'MemberExpression' && !node.expression.computed) ? node.expression.property.name :
node.expression.type === 'Identifier' ? node.expression.name :
`each_value`
);
listNames.set(node.context, listName); listNames.set(node.context, listName);
const context = generator.getUniqueName(node.context); const context = generator.getUniqueName(node.context);

26
src/generators/dom/visitors/EachBlock.ts
Unescape View File

@ -14,16 +14,16 @@ export default function visitEachBlock(
elementStack: Node[], elementStack: Node[],
componentStack: Node[] componentStack: Node[]
) { ) {
const each_block = node.var; const each = node.var;
const create_each_block = node._block.name; const create_each_block = node._block.name;
const each_block_value = node._block.listName; const each_block_value = node._block.listName;
const iterations = block.getUniqueName(`${each_block}_iterations`); const iterations = block.getUniqueName(`${each}_blocks`);
const params = block.params.join(', '); const params = block.params.join(', ');
const needsAnchor = node.next ? !isDomNode(node.next, generator) : !state.parentNode; const needsAnchor = node.next ? !isDomNode(node.next, generator) : !state.parentNode;
const anchor = needsAnchor const anchor = needsAnchor
? block.getUniqueName(`${each_block}_anchor`) ? block.getUniqueName(`${each}_anchor`)
: (node.next && node.next.var) || 'null'; : (node.next && node.next.var) || 'null';
// hack the sourcemap, so that if data is missing the bug // hack the sourcemap, so that if data is missing the bug
@ -35,7 +35,7 @@ export default function visitEachBlock(
const mountOrIntro = node._block.hasIntroMethod ? 'intro' : 'mount'; const mountOrIntro = node._block.hasIntroMethod ? 'intro' : 'mount';
const vars = { const vars = {
each_block, each,
create_each_block, create_each_block,
each_block_value, each_block_value,
length, length,
@ -67,7 +67,7 @@ export default function visitEachBlock(
} }
if (node.else) { if (node.else) {
const each_block_else = generator.getUniqueName(`${each_block}_else`); const each_block_else = generator.getUniqueName(`${each}_else`);
block.builders.init.addLine(`var ${each_block_else} = null;`); block.builders.init.addLine(`var ${each_block_else} = null;`);
@ -144,7 +144,7 @@ function keyed(
node: Node, node: Node,
snippet: string, snippet: string,
{ {
each_block, each,
create_each_block, create_each_block,
each_block_value, each_block_value,
length, length,
@ -154,11 +154,11 @@ function keyed(
} }
) { ) {
const key = block.getUniqueName('key'); const key = block.getUniqueName('key');
const lookup = block.getUniqueName(`${each_block}_lookup`); const lookup = block.getUniqueName(`${each}_lookup`);
const iteration = block.getUniqueName(`${each_block}_iteration`); const iteration = block.getUniqueName(`${each}_iteration`);
const head = block.getUniqueName(`${each_block}_head`); const head = block.getUniqueName(`${each}_head`);
const last = block.getUniqueName(`${each_block}_last`); const last = block.getUniqueName(`${each}_last`);
const expected = block.getUniqueName(`${each_block}_expected`); const expected = block.getUniqueName(`${each}_expected`);
block.addVariable(lookup, `@blankObject()`); block.addVariable(lookup, `@blankObject()`);
block.addVariable(head); block.addVariable(head);
@ -222,7 +222,7 @@ function keyed(
let destroy; let destroy;
if (node._block.hasOutroMethod) { if (node._block.hasOutroMethod) {
const fn = block.getUniqueName(`${each_block}_outro`); const fn = block.getUniqueName(`${each}_outro`);
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
function ${fn}(iteration) { function ${fn}(iteration) {
iteration.outro(function() { iteration.outro(function() {
@ -246,7 +246,7 @@ function keyed(
} }
`; `;
} else { } else {
const fn = block.getUniqueName(`${each_block}_destroy`); const fn = block.getUniqueName(`${each}_destroy`);
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
function ${fn}(iteration) { function ${fn}(iteration) {
iteration.unmount(); iteration.unmount();

4
test/helpers.js
Unescape View File

@ -174,10 +174,10 @@ function capitalise(str) {
return str[0].toUpperCase() + str.slice(1); return str[0].toUpperCase() + str.slice(1);
} }
export function showOutput(cwd, options = {}) { export function showOutput(cwd, options = {}, s = svelte) {
glob.sync('**/*.html', { cwd }).forEach(file => { glob.sync('**/*.html', { cwd }).forEach(file => {
if (file[0] === '_') return; if (file[0] === '_') return;
const { code } = svelte.compile( const { code } = s.compile(
fs.readFileSync(`${cwd}/${file}`, 'utf-8'), fs.readFileSync(`${cwd}/${file}`, 'utf-8'),
Object.assign(options, { Object.assign(options, {
filename: file, filename: file,

48
test/js/samples/each-block-changed-check/expected-bundle.js
Unescape View File

@ -203,18 +203,18 @@ var proto = {
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var text, p, text_1; var text, p, text_1;
var each_block_value = state.comments; var comments = state.comments;
var each_block_iterations = []; var each_blocks = [];
for (var i = 0; i < each_block_value.length; i += 1) { for (var i = 0; i < comments.length; i += 1) {
each_block_iterations[i] = create_each_block(state, each_block_value, each_block_value[i], i, component); each_blocks[i] = create_each_block(state, comments, comments[i], i, component);
} }
return { return {
create: function() { create: function() {
for (var i = 0; i < each_block_iterations.length; i += 1) { for (var i = 0; i < each_blocks.length; i += 1) {
each_block_iterations[i].create(); each_blocks[i].create();
} }
text = createText("\n\n"); text = createText("\n\n");
@ -223,8 +223,8 @@ function create_main_fragment(state, component) {
}, },
mount: function(target, anchor) { mount: function(target, anchor) {
for (var i = 0; i < each_block_iterations.length; i += 1) { for (var i = 0; i < each_blocks.length; i += 1) {
each_block_iterations[i].mount(target, anchor); each_blocks[i].mount(target, anchor);
} }
insertNode(text, target, anchor); insertNode(text, target, anchor);
@ -233,24 +233,24 @@ function create_main_fragment(state, component) {
}, },
update: function(changed, state) { update: function(changed, state) {
var each_block_value = state.comments; var comments = state.comments;
if (changed.comments || changed.elapsed || changed.time) { if (changed.comments || changed.elapsed || changed.time) {
for (var i = 0; i < each_block_value.length; i += 1) { for (var i = 0; i < comments.length; i += 1) {
if (each_block_iterations[i]) { if (each_blocks[i]) {
each_block_iterations[i].update(changed, state, each_block_value, each_block_value[i], i); each_blocks[i].update(changed, state, comments, comments[i], i);
} else { } else {
each_block_iterations[i] = create_each_block(state, each_block_value, each_block_value[i], i, component); each_blocks[i] = create_each_block(state, comments, comments[i], i, component);
each_block_iterations[i].create(); each_blocks[i].create();
each_block_iterations[i].mount(text.parentNode, text); each_blocks[i].mount(text.parentNode, text);
} }
} }
for (; i < each_block_iterations.length; i += 1) { for (; i < each_blocks.length; i += 1) {
each_block_iterations[i].unmount(); each_blocks[i].unmount();
each_block_iterations[i].destroy(); each_blocks[i].destroy();
} }
each_block_iterations.length = each_block_value.length; each_blocks.length = comments.length;
} }
if (changed.foo) { if (changed.foo) {
@ -259,8 +259,8 @@ function create_main_fragment(state, component) {
}, },
unmount: function() { unmount: function() {
for (var i = 0; i < each_block_iterations.length; i += 1) { for (var i = 0; i < each_blocks.length; i += 1) {
each_block_iterations[i].unmount(); each_blocks[i].unmount();
} }
detachNode(text); detachNode(text);
@ -268,13 +268,13 @@ function create_main_fragment(state, component) {
}, },
destroy: function() { destroy: function() {
destroyEach(each_block_iterations, false, 0); destroyEach(each_blocks, false, 0);
} }
}; };
} }
// (1:0) {{#each comments as comment, i}} // (1:0) {{#each comments as comment, i}}
function create_each_block(state, each_block_value, comment, i, component) { function create_each_block(state, comments, comment, i, component) {
var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before; var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before;
return { return {
@ -313,7 +313,7 @@ function create_each_block(state, each_block_value, comment, i, component) {
raw_before.insertAdjacentHTML("afterend", raw_value); raw_before.insertAdjacentHTML("afterend", raw_value);
}, },
update: function(changed, state, each_block_value, comment, i) { update: function(changed, state, comments, comment, i) {
if ((changed.comments) && text_2_value !== (text_2_value = comment.author)) { if ((changed.comments) && text_2_value !== (text_2_value = comment.author)) {
text_2.data = text_2_value; text_2.data = text_2_value;
} }

48
test/js/samples/each-block-changed-check/expected.js
Unescape View File

@ -5,18 +5,18 @@ import { appendNode, assign, createElement, createText, destroyEach, detachAfter
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var text, p, text_1; var text, p, text_1;
var each_block_value = state.comments; var comments = state.comments;
var each_block_iterations = []; var each_blocks = [];
for (var i = 0; i < each_block_value.length; i += 1) { for (var i = 0; i < comments.length; i += 1) {
each_block_iterations[i] = create_each_block(state, each_block_value, each_block_value[i], i, component); each_blocks[i] = create_each_block(state, comments, comments[i], i, component);
} }
return { return {
create: function() { create: function() {
for (var i = 0; i < each_block_iterations.length; i += 1) { for (var i = 0; i < each_blocks.length; i += 1) {
each_block_iterations[i].create(); each_blocks[i].create();
} }
text = createText("\n\n"); text = createText("\n\n");
@ -25,8 +25,8 @@ function create_main_fragment(state, component) {
}, },
mount: function(target, anchor) { mount: function(target, anchor) {
for (var i = 0; i < each_block_iterations.length; i += 1) { for (var i = 0; i < each_blocks.length; i += 1) {
each_block_iterations[i].mount(target, anchor); each_blocks[i].mount(target, anchor);
} }
insertNode(text, target, anchor); insertNode(text, target, anchor);
@ -35,24 +35,24 @@ function create_main_fragment(state, component) {
}, },
update: function(changed, state) { update: function(changed, state) {
var each_block_value = state.comments; var comments = state.comments;
if (changed.comments || changed.elapsed || changed.time) { if (changed.comments || changed.elapsed || changed.time) {
for (var i = 0; i < each_block_value.length; i += 1) { for (var i = 0; i < comments.length; i += 1) {
if (each_block_iterations[i]) { if (each_blocks[i]) {
each_block_iterations[i].update(changed, state, each_block_value, each_block_value[i], i); each_blocks[i].update(changed, state, comments, comments[i], i);
} else { } else {
each_block_iterations[i] = create_each_block(state, each_block_value, each_block_value[i], i, component); each_blocks[i] = create_each_block(state, comments, comments[i], i, component);
each_block_iterations[i].create(); each_blocks[i].create();
each_block_iterations[i].mount(text.parentNode, text); each_blocks[i].mount(text.parentNode, text);
} }
} }
for (; i < each_block_iterations.length; i += 1) { for (; i < each_blocks.length; i += 1) {
each_block_iterations[i].unmount(); each_blocks[i].unmount();
each_block_iterations[i].destroy(); each_blocks[i].destroy();
} }
each_block_iterations.length = each_block_value.length; each_blocks.length = comments.length;
} }
if (changed.foo) { if (changed.foo) {
@ -61,8 +61,8 @@ function create_main_fragment(state, component) {
}, },
unmount: function() { unmount: function() {
for (var i = 0; i < each_block_iterations.length; i += 1) { for (var i = 0; i < each_blocks.length; i += 1) {
each_block_iterations[i].unmount(); each_blocks[i].unmount();
} }
detachNode(text); detachNode(text);
@ -70,13 +70,13 @@ function create_main_fragment(state, component) {
}, },
destroy: function() { destroy: function() {
destroyEach(each_block_iterations, false, 0); destroyEach(each_blocks, false, 0);
} }
}; };
} }
// (1:0) {{#each comments as comment, i}} // (1:0) {{#each comments as comment, i}}
function create_each_block(state, each_block_value, comment, i, component) { function create_each_block(state, comments, comment, i, component) {
var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before; var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before;
return { return {
@ -115,7 +115,7 @@ function create_each_block(state, each_block_value, comment, i, component) {
raw_before.insertAdjacentHTML("afterend", raw_value); raw_before.insertAdjacentHTML("afterend", raw_value);
}, },
update: function(changed, state, each_block_value, comment, i) { update: function(changed, state, comments, comment, i) {
if ((changed.comments) && text_2_value !== (text_2_value = comment.author)) { if ((changed.comments) && text_2_value !== (text_2_value = comment.author)) {
text_2.data = text_2_value; text_2.data = text_2_value;
} }

8
test/runtime/index.js
Unescape View File

@ -87,7 +87,7 @@ describe("runtime", () => {
} }
} catch (err) { } catch (err) {
failed.add(dir); failed.add(dir);
showOutput(cwd, { shared }); // eslint-disable-line no-console showOutput(cwd, { shared }, svelte); // eslint-disable-line no-console
throw err; throw err;
} }
} }
@ -133,7 +133,7 @@ describe("runtime", () => {
try { try {
SvelteComponent = require(`./samples/${dir}/main.html`); SvelteComponent = require(`./samples/${dir}/main.html`);
} catch (err) { } catch (err) {
showOutput(cwd, { shared, hydratable: hydrate }); // eslint-disable-line no-console showOutput(cwd, { shared, hydratable: hydrate }, svelte); // eslint-disable-line no-console
throw err; throw err;
} }
@ -187,12 +187,12 @@ describe("runtime", () => {
config.error(assert, err); config.error(assert, err);
} else { } else {
failed.add(dir); failed.add(dir);
showOutput(cwd, { shared, hydratable: hydrate }); // eslint-disable-line no-console showOutput(cwd, { shared, hydratable: hydrate }, svelte); // eslint-disable-line no-console
throw err; throw err;
} }
} }
if (config.show) showOutput(cwd, { shared, hydratable: hydrate }); if (config.show) showOutput(cwd, { shared, hydratable: hydrate }, svelte);
}); });
} }

Write Preview
Loading…
Cancel
Save