Merge branch 'master' into gh-890

pull/1685/head
Rich Harris 6 years ago committed by GitHub
commit c4526c3302
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,5 +1,16 @@
# Svelte changelog
## 2.12.1
* Allow actions to take any expression ([#1676](https://github.com/sveltejs/svelte/issues/1676))
* Run transitions in component context ([#1675](https://github.com/sveltejs/svelte/issues/1675))
* Correctly set select value on mount ([#1666](https://github.com/sveltejs/svelte/issues/1666))
* Support `{@debug}` in SSR ([#1659](https://github.com/sveltejs/svelte/issues/1659))
* Don't treat ` ` as empty whitespace ([#1658](https://github.com/sveltejs/svelte/issues/1658))
* Fix outros for if blocks with no else ([#1688](https://github.com/sveltejs/svelte/pull/1688))
* Set `style.cssText` in spread attributes ([#1684](https://github.com/sveltejs/svelte/pull/1684))
## 2.12.0
* Initialise actions on mount rather than hydrate ([#1653](https://github.com/sveltejs/svelte/pull/1653))

@ -1,6 +1,6 @@
{
"name": "svelte",
"version": "2.12.0",
"version": "2.12.1",
"description": "The magical disappearing UI framework",
"main": "compiler/svelte.js",
"bin": {

@ -210,7 +210,7 @@ export default class Attribute extends Node {
}
`;
block.builders.hydrate.addBlock(deindent`
block.builders.mount.addBlock(deindent`
${last} = ${value};
${updater}
`);

@ -4,6 +4,7 @@ import Block from '../dom/Block';
import Expression from './shared/Expression';
import deindent from '../../utils/deindent';
import addToSet from '../../utils/addToSet';
import { stringify } from '../../utils/stringify';
export default class DebugTag extends Node {
expressions: Expression[];
@ -25,8 +26,8 @@ export default class DebugTag extends Node {
const { code } = this.compiler;
// Debug all
if (this.expressions.length === 0) {
// Debug all
code.overwrite(this.start + 1, this.start + 7, 'debugger', {
storeName: true
});
@ -67,4 +68,22 @@ export default class DebugTag extends Node {
`);
}
}
ssr() {
if (!this.compiler.options.dev) return;
const filename = this.compiler.file || null;
const { line, column } = this.compiler.locate(this.start + 1);
const obj = this.expressions.length === 0
? `ctx`
: `{ ${this.expressions
.map(e => e.node.name)
.map(name => `${name}: ctx.${name}`)
.join(', ')} }`;
const str = '${@debug(' + `${filename && stringify(filename)}, ${line}, ${column}, ${obj})}`;
this.compiler.target.append(str);
}
}

@ -139,9 +139,10 @@ export default class IfBlock extends Node {
this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars);
if (this.compiler.options.nestedTransitions) {
block.builders.outro.addLine(
`${name}.o(#outrocallback);`
);
block.builders.outro.addBlock(deindent`
if (${name}) ${name}.o(#outrocallback);
else #outrocallback();
`);
}
} else {
this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars);

@ -87,7 +87,9 @@ export function setAttribute(node, attribute, value) {
export function setAttributes(node, attributes) {
for (var key in attributes) {
if (key in node) {
if (key === 'style') {
node.style.cssText = attributes[key];
} else if (key in node) {
node[key] = attributes[key];
} else {
if (attributes[key] === undefined) removeAttribute(node, key);

@ -54,4 +54,10 @@ export function validateSsrComponent(component, name) {
}
return component;
}
export function debug(file, line, column, values) {
console.log(`{@debug} ${file ? file + ' ' : ''}(${line}:${column})`);
console.log(values);
return '';
}

@ -14,7 +14,7 @@ function isEmptyBlock(node: Node) {
if (!/Block$/.test(node.type) || !node.children) return false;
if (node.children.length > 1) return false;
const child = node.children[0];
return !child || (child.type === 'Text' && !/\S/.test(child.data));
return !child || (child.type === 'Text' && !/[^ \r\n\f\v\t]/.test(child.data));
}
export default function validateHtml(validator: Validator, html: Node) {

@ -0,0 +1,6 @@
export default {
options: {
generate: 'ssr',
dev: true
}
};

@ -0,0 +1,46 @@
var { debug, each, escape } = require("svelte/shared.js");
var SvelteComponent = {};
SvelteComponent.data = function() {
return {};
};
SvelteComponent.render = function(state, options = {}) {
var components = new Set();
function addComponent(component) {
components.add(component);
}
var result = { head: '', addComponent };
var html = SvelteComponent._render(result, state, options);
var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\n');
return {
html,
head: result.head,
css: { code: cssCode, map: null },
toString() {
return html;
}
};
};
SvelteComponent._render = function(__result, ctx, options) {
__result.addComponent(SvelteComponent);
ctx = Object.assign({}, ctx);
return `${ each(ctx.things, item => Object.assign({}, ctx, { thing: item }), ctx => `<span>${escape(ctx.thing.name)}</span>
${debug(null, 2, 2, { foo: ctx.foo })}`)}
<p>foo: ${escape(ctx.foo)}</p>`;
};
SvelteComponent.css = {
code: '',
map: null
};
module.exports = SvelteComponent;

@ -0,0 +1,51 @@
"use strict";
var { debug, each, escape } = require("svelte/shared.js");
var SvelteComponent = {};;
SvelteComponent.data = function() {
return {};
};
SvelteComponent.render = function(state, options = {}) {
var components = new Set();
function addComponent(component) {
components.add(component);
}
var result = { head: '', addComponent };
var html = SvelteComponent._render(result, state, options);
var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\n');
return {
html,
head: result.head,
css: { code: cssCode, map: null },
toString() {
return html;
}
};
}
SvelteComponent._render = function(__result, ctx, options) {
__result.addComponent(SvelteComponent);
ctx = Object.assign({}, ctx);
return `${ each(ctx.things, item => Object.assign({}, ctx, { thing: item }), ctx => `<span>${escape(ctx.thing.name)}</span>
${debug(null, 2, 2, { foo: ctx.foo })}`)}
<p>foo: ${escape(ctx.foo)}</p>`;
};
SvelteComponent.css = {
code: '',
map: null
};
var warned = false;
module.exports = SvelteComponent;

@ -0,0 +1,6 @@
{#each things as thing}
<span>{thing.name}</span>
{@debug foo}
{/each}
<p>foo: {foo}</p>

@ -0,0 +1,224 @@
function noop() {}
function assign(tar, src) {
for (var k in src) tar[k] = src[k];
return tar;
}
function append(target, node) {
target.appendChild(node);
}
function insert(target, node, anchor) {
target.insertBefore(node, anchor);
}
function detachNode(node) {
node.parentNode.removeChild(node);
}
function createElement(name) {
return document.createElement(name);
}
function createText(data) {
return document.createTextNode(data);
}
function blankObject() {
return Object.create(null);
}
function destroy(detach) {
this.destroy = noop;
this.fire('destroy');
this.set = noop;
this._fragment.d(detach !== false);
this._fragment = null;
this._state = {};
}
function _differs(a, b) {
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
}
function fire(eventName, data) {
var handlers =
eventName in this._handlers && this._handlers[eventName].slice();
if (!handlers) return;
for (var i = 0; i < handlers.length; i += 1) {
var handler = handlers[i];
if (!handler.__calling) {
try {
handler.__calling = true;
handler.call(this, data);
} finally {
handler.__calling = false;
}
}
}
}
function flush(component) {
component._lock = true;
callAll(component._beforecreate);
callAll(component._oncreate);
callAll(component._aftercreate);
component._lock = false;
}
function get() {
return this._state;
}
function init(component, options) {
component._handlers = blankObject();
component._slots = blankObject();
component._bind = options._bind;
component.options = options;
component.root = options.root || component;
component.store = options.store || component.root.store;
if (!options.root) {
component._beforecreate = [];
component._oncreate = [];
component._aftercreate = [];
}
}
function on(eventName, handler) {
var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
handlers.push(handler);
return {
cancel: function() {
var index = handlers.indexOf(handler);
if (~index) handlers.splice(index, 1);
}
};
}
function set(newState) {
this._set(assign({}, newState));
if (this.root._lock) return;
flush(this.root);
}
function _set(newState) {
var oldState = this._state,
changed = {},
dirty = false;
for (var key in newState) {
if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
}
if (!dirty) return;
this._state = assign(assign({}, oldState), newState);
this._recompute(changed, this._state);
if (this._bind) this._bind(changed, this._state);
if (this._fragment) {
this.fire("state", { changed: changed, current: this._state, previous: oldState });
this._fragment.p(changed, this._state);
this.fire("update", { changed: changed, current: this._state, previous: oldState });
}
}
function callAll(fns) {
while (fns && fns.length) fns.shift()();
}
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}
var proto = {
destroy,
get,
fire,
on,
set,
_recompute: noop,
_set,
_mount,
_differs
};
/* generated by Svelte vX.Y.Z */
function create_main_fragment(component, ctx) {
var select, option, text, option_1, text_1, select_value_value;
return {
c() {
select = createElement("select");
option = createElement("option");
text = createText("1");
option_1 = createElement("option");
text_1 = createText("2");
option.__value = "1";
option.value = option.__value;
option_1.__value = "2";
option_1.value = option_1.__value;
},
m(target, anchor) {
insert(target, select, anchor);
append(select, option);
append(option, text);
append(select, option_1);
append(option_1, text_1);
select_value_value = ctx.current;
for (var i = 0; i < select.options.length; i += 1) {
var option_2 = select.options[i];
if (option_2.__value === select_value_value) {
option_2.selected = true;
break;
}
}
},
p(changed, ctx) {
if ((changed.current) && select_value_value !== (select_value_value = ctx.current)) {
for (var i = 0; i < select.options.length; i += 1) {
var option_2 = select.options[i];
if (option_2.__value === select_value_value) {
option_2.selected = true;
break;
}
}
}
},
d(detach) {
if (detach) {
detachNode(select);
}
}
};
}
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);
if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor);
}
}
assign(SvelteComponent.prototype, proto);
export default SvelteComponent;

@ -0,0 +1,73 @@
/* generated by Svelte vX.Y.Z */
import { append, assign, createElement, createText, detachNode, init, insert, proto } from "svelte/shared.js";
function create_main_fragment(component, ctx) {
var select, option, text, option_1, text_1, select_value_value;
return {
c() {
select = createElement("select");
option = createElement("option");
text = createText("1");
option_1 = createElement("option");
text_1 = createText("2");
option.__value = "1";
option.value = option.__value;
option_1.__value = "2";
option_1.value = option_1.__value;
},
m(target, anchor) {
insert(target, select, anchor);
append(select, option);
append(option, text);
append(select, option_1);
append(option_1, text_1);
select_value_value = ctx.current;
for (var i = 0; i < select.options.length; i += 1) {
var option_2 = select.options[i];
if (option_2.__value === select_value_value) {
option_2.selected = true;
break;
}
}
},
p(changed, ctx) {
if ((changed.current) && select_value_value !== (select_value_value = ctx.current)) {
for (var i = 0; i < select.options.length; i += 1) {
var option_2 = select.options[i];
if (option_2.__value === select_value_value) {
option_2.selected = true;
break;
}
}
}
},
d(detach) {
if (detach) {
detachNode(select);
}
}
};
}
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);
if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor);
}
}
assign(SvelteComponent.prototype, proto);
export default SvelteComponent;

@ -0,0 +1,4 @@
<select value={current}>
<option value="1">1</option>
<option value="2">2</option>
</select>

@ -0,0 +1,8 @@
export default {
nestedTransitions: true,
test ( assert, component, target ) {
// Would cause "TypeError: Cannot read property 'o' of undefined"
component.set({ foo: false });
}
};

@ -0,0 +1,16 @@
{#if foo}
{#if false}
<Component/>
{:elseif false}
<Component/>
{/if}
{/if}
<script>
export default {
components: {
Component: './Component.html',
},
data: () => ({ foo: true }),
}
</script>
Loading…
Cancel
Save