mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
parent
699328b165
commit
6e51bb9e4b
@ -0,0 +1,615 @@
|
||||
function append(target, node) {
|
||||
target.appendChild(node);
|
||||
}
|
||||
|
||||
function insert(target, node, anchor) {
|
||||
target.insertBefore(node, anchor);
|
||||
}
|
||||
|
||||
function detachNode(node) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
|
||||
function detachBetween(before, after) {
|
||||
while (before.nextSibling && before.nextSibling !== after) {
|
||||
before.parentNode.removeChild(before.nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
function detachBefore(after) {
|
||||
while (after.previousSibling) {
|
||||
after.parentNode.removeChild(after.previousSibling);
|
||||
}
|
||||
}
|
||||
|
||||
function detachAfter(before) {
|
||||
while (before.nextSibling) {
|
||||
before.parentNode.removeChild(before.nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
function reinsertBetween(before, after, target) {
|
||||
while (before.nextSibling && before.nextSibling !== after) {
|
||||
target.appendChild(before.parentNode.removeChild(before.nextSibling));
|
||||
}
|
||||
}
|
||||
|
||||
function reinsertChildren(parent, target) {
|
||||
while (parent.firstChild) target.appendChild(parent.firstChild);
|
||||
}
|
||||
|
||||
function reinsertAfter(before, target) {
|
||||
while (before.nextSibling) target.appendChild(before.nextSibling);
|
||||
}
|
||||
|
||||
function reinsertBefore(after, target) {
|
||||
var parent = after.parentNode;
|
||||
while (parent.firstChild !== after) target.appendChild(parent.firstChild);
|
||||
}
|
||||
|
||||
function destroyEach(iterations, detach) {
|
||||
for (var i = 0; i < iterations.length; i += 1) {
|
||||
if (iterations[i]) iterations[i].d(detach);
|
||||
}
|
||||
}
|
||||
|
||||
function createFragment() {
|
||||
return document.createDocumentFragment();
|
||||
}
|
||||
|
||||
function createElement(name) {
|
||||
return document.createElement(name);
|
||||
}
|
||||
|
||||
function createSvgElement(name) {
|
||||
return document.createElementNS('http://www.w3.org/2000/svg', name);
|
||||
}
|
||||
|
||||
function createText(data) {
|
||||
return document.createTextNode(data);
|
||||
}
|
||||
|
||||
function createComment() {
|
||||
return document.createComment('');
|
||||
}
|
||||
|
||||
function addListener(node, event, handler, options) {
|
||||
node.addEventListener(event, handler, options);
|
||||
}
|
||||
|
||||
function removeListener(node, event, handler, options) {
|
||||
node.removeEventListener(event, handler, options);
|
||||
}
|
||||
|
||||
function setAttribute(node, attribute, value) {
|
||||
if (value == null) node.removeAttribute(attribute);
|
||||
else node.setAttribute(attribute, value);
|
||||
}
|
||||
|
||||
function setAttributes(node, attributes) {
|
||||
for (var key in attributes) {
|
||||
if (key === 'style') {
|
||||
node.style.cssText = attributes[key];
|
||||
} else if (key in node) {
|
||||
node[key] = attributes[key];
|
||||
} else {
|
||||
setAttribute(node, key, attributes[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setCustomElementData(node, prop, value) {
|
||||
if (prop in node) {
|
||||
node[prop] = value;
|
||||
} else if (value) {
|
||||
setAttribute(node, prop, value);
|
||||
} else {
|
||||
node.removeAttribute(prop);
|
||||
}
|
||||
}
|
||||
|
||||
function setXlinkAttribute(node, attribute, value) {
|
||||
node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
|
||||
}
|
||||
|
||||
function getBindingGroupValue(group) {
|
||||
var value = [];
|
||||
for (var i = 0; i < group.length; i += 1) {
|
||||
if (group[i].checked) value.push(group[i].__value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function toNumber(value) {
|
||||
return value === '' ? undefined : +value;
|
||||
}
|
||||
|
||||
function timeRangesToArray(ranges) {
|
||||
var array = [];
|
||||
for (var i = 0; i < ranges.length; i += 1) {
|
||||
array.push({ start: ranges.start(i), end: ranges.end(i) });
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function children (element) {
|
||||
return Array.from(element.childNodes);
|
||||
}
|
||||
|
||||
function claimElement (nodes, name, attributes, svg) {
|
||||
for (var i = 0; i < nodes.length; i += 1) {
|
||||
var node = nodes[i];
|
||||
if (node.nodeName === name) {
|
||||
for (var j = 0; j < node.attributes.length; j += 1) {
|
||||
var attribute = node.attributes[j];
|
||||
if (!attributes[attribute.name]) node.removeAttribute(attribute.name);
|
||||
}
|
||||
return nodes.splice(i, 1)[0]; // TODO strip unwanted attributes
|
||||
}
|
||||
}
|
||||
|
||||
return svg ? createSvgElement(name) : createElement(name);
|
||||
}
|
||||
|
||||
function claimText (nodes, data) {
|
||||
for (var i = 0; i < nodes.length; i += 1) {
|
||||
var node = nodes[i];
|
||||
if (node.nodeType === 3) {
|
||||
node.data = data;
|
||||
return nodes.splice(i, 1)[0];
|
||||
}
|
||||
}
|
||||
|
||||
return createText(data);
|
||||
}
|
||||
|
||||
function setData(text, data) {
|
||||
text.data = '' + data;
|
||||
}
|
||||
|
||||
function setInputType(input, type) {
|
||||
try {
|
||||
input.type = type;
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function setStyle(node, key, value) {
|
||||
node.style.setProperty(key, value);
|
||||
}
|
||||
|
||||
function selectOption(select, value) {
|
||||
for (var i = 0; i < select.options.length; i += 1) {
|
||||
var option = select.options[i];
|
||||
|
||||
if (option.__value === value) {
|
||||
option.selected = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function selectOptions(select, value) {
|
||||
for (var i = 0; i < select.options.length; i += 1) {
|
||||
var option = select.options[i];
|
||||
option.selected = ~value.indexOf(option.__value);
|
||||
}
|
||||
}
|
||||
|
||||
function selectValue(select) {
|
||||
var selectedOption = select.querySelector(':checked') || select.options[0];
|
||||
return selectedOption && selectedOption.__value;
|
||||
}
|
||||
|
||||
function selectMultipleValue(select) {
|
||||
return [].map.call(select.querySelectorAll(':checked'), function(option) {
|
||||
return option.__value;
|
||||
});
|
||||
}
|
||||
|
||||
function addResizeListener(element, fn) {
|
||||
if (getComputedStyle(element).position === 'static') {
|
||||
element.style.position = 'relative';
|
||||
}
|
||||
|
||||
const object = document.createElement('object');
|
||||
object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
|
||||
object.type = 'text/html';
|
||||
|
||||
let win;
|
||||
|
||||
object.onload = () => {
|
||||
win = object.contentDocument.defaultView;
|
||||
win.addEventListener('resize', fn);
|
||||
};
|
||||
|
||||
if (/Trident/.test(navigator.userAgent)) {
|
||||
element.appendChild(object);
|
||||
object.data = 'about:blank';
|
||||
} else {
|
||||
object.data = 'about:blank';
|
||||
element.appendChild(object);
|
||||
}
|
||||
|
||||
return {
|
||||
cancel: () => {
|
||||
win && win.removeEventListener && win.removeEventListener('resize', fn);
|
||||
element.removeChild(object);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function toggleClass(element, name, toggle) {
|
||||
element.classList.toggle(name, !!toggle);
|
||||
}
|
||||
|
||||
let update_scheduled = false;
|
||||
|
||||
const dirty_components = [];
|
||||
|
||||
function schedule_update(component) {
|
||||
dirty_components.push(component);
|
||||
if (!update_scheduled) {
|
||||
update_scheduled = true;
|
||||
queueMicrotask(flush);
|
||||
}
|
||||
}
|
||||
|
||||
function flush() {
|
||||
while (dirty_components.length) {
|
||||
dirty_components.pop().__update();
|
||||
}
|
||||
|
||||
update_scheduled = false;
|
||||
}
|
||||
|
||||
function queueMicrotask(callback) {
|
||||
Promise.resolve().then(callback);
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
|
||||
function assign(tar, src) {
|
||||
for (var k in src) tar[k] = src[k];
|
||||
return tar;
|
||||
}
|
||||
|
||||
function assignTrue(tar, src) {
|
||||
for (var k in src) tar[k] = 1;
|
||||
return tar;
|
||||
}
|
||||
|
||||
function isPromise(value) {
|
||||
return value && typeof value.then === 'function';
|
||||
}
|
||||
|
||||
function callAfter(fn, i) {
|
||||
if (i === 0) fn();
|
||||
return () => {
|
||||
if (!--i) fn();
|
||||
};
|
||||
}
|
||||
|
||||
function addLoc(element, file, line, column, char) {
|
||||
element.__svelte_meta = {
|
||||
loc: { file, line, column, char }
|
||||
};
|
||||
}
|
||||
|
||||
function exclude(src, prop) {
|
||||
const tar = {};
|
||||
for (const k in src) k === prop || (tar[k] = src[k]);
|
||||
return tar;
|
||||
}
|
||||
|
||||
function run(fn) {
|
||||
fn();
|
||||
}
|
||||
|
||||
function linear(t) {
|
||||
return t;
|
||||
}
|
||||
|
||||
function generateRule({ a, b, delta, duration }, ease, fn) {
|
||||
const step = 16.666 / duration;
|
||||
let keyframes = '{\n';
|
||||
|
||||
for (let p = 0; p <= 1; p += step) {
|
||||
const t = a + delta * ease(p);
|
||||
keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`;
|
||||
}
|
||||
|
||||
return keyframes + `100% {${fn(b, 1 - b)}}\n}`;
|
||||
}
|
||||
|
||||
// https://github.com/darkskyapp/string-hash/blob/master/index.js
|
||||
function hash(str) {
|
||||
let hash = 5381;
|
||||
let i = str.length;
|
||||
|
||||
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
|
||||
return hash >>> 0;
|
||||
}
|
||||
|
||||
function wrapTransition(component, node, fn, params, intro) {
|
||||
let obj = fn.call(component, node, params);
|
||||
let duration;
|
||||
let ease;
|
||||
let cssText;
|
||||
|
||||
let initialised = false;
|
||||
|
||||
return {
|
||||
t: intro ? 0 : 1,
|
||||
running: false,
|
||||
program: null,
|
||||
pending: null,
|
||||
|
||||
run(b, callback) {
|
||||
if (typeof obj === 'function') {
|
||||
transitionManager.wait().then(() => {
|
||||
obj = obj();
|
||||
this._run(b, callback);
|
||||
});
|
||||
} else {
|
||||
this._run(b, callback);
|
||||
}
|
||||
},
|
||||
|
||||
_run(b, callback) {
|
||||
duration = obj.duration || 300;
|
||||
ease = obj.easing || linear;
|
||||
|
||||
const program = {
|
||||
start: window.performance.now() + (obj.delay || 0),
|
||||
b,
|
||||
callback: callback || noop
|
||||
};
|
||||
|
||||
if (intro && !initialised) {
|
||||
if (obj.css && obj.delay) {
|
||||
cssText = node.style.cssText;
|
||||
node.style.cssText += obj.css(0, 1);
|
||||
}
|
||||
|
||||
if (obj.tick) obj.tick(0, 1);
|
||||
initialised = true;
|
||||
}
|
||||
|
||||
if (!b) {
|
||||
program.group = outros.current;
|
||||
outros.current.remaining += 1;
|
||||
}
|
||||
|
||||
if (obj.delay) {
|
||||
this.pending = program;
|
||||
} else {
|
||||
this.start(program);
|
||||
}
|
||||
|
||||
if (!this.running) {
|
||||
this.running = true;
|
||||
transitionManager.add(this);
|
||||
}
|
||||
},
|
||||
|
||||
start(program) {
|
||||
component.fire(`${program.b ? 'intro' : 'outro'}.start`, { node });
|
||||
|
||||
program.a = this.t;
|
||||
program.delta = program.b - program.a;
|
||||
program.duration = duration * Math.abs(program.b - program.a);
|
||||
program.end = program.start + program.duration;
|
||||
|
||||
if (obj.css) {
|
||||
if (obj.delay) node.style.cssText = cssText;
|
||||
|
||||
const rule = generateRule(program, ease, obj.css);
|
||||
transitionManager.addRule(rule, program.name = '__svelte_' + hash(rule));
|
||||
|
||||
node.style.animation = (node.style.animation || '')
|
||||
.split(', ')
|
||||
.filter(anim => anim && (program.delta < 0 || !/__svelte/.test(anim)))
|
||||
.concat(`${program.name} ${program.duration}ms linear 1 forwards`)
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
this.program = program;
|
||||
this.pending = null;
|
||||
},
|
||||
|
||||
update(now) {
|
||||
const program = this.program;
|
||||
if (!program) return;
|
||||
|
||||
const p = now - program.start;
|
||||
this.t = program.a + program.delta * ease(p / program.duration);
|
||||
if (obj.tick) obj.tick(this.t, 1 - this.t);
|
||||
},
|
||||
|
||||
done() {
|
||||
const program = this.program;
|
||||
this.t = program.b;
|
||||
|
||||
if (obj.tick) obj.tick(this.t, 1 - this.t);
|
||||
|
||||
component.fire(`${program.b ? 'intro' : 'outro'}.end`, { node });
|
||||
|
||||
if (!program.b && !program.invalidated) {
|
||||
program.group.callbacks.push(() => {
|
||||
program.callback();
|
||||
if (obj.css) transitionManager.deleteRule(node, program.name);
|
||||
});
|
||||
|
||||
if (--program.group.remaining === 0) {
|
||||
program.group.callbacks.forEach(run);
|
||||
}
|
||||
} else {
|
||||
if (obj.css) transitionManager.deleteRule(node, program.name);
|
||||
}
|
||||
|
||||
this.running = !!this.pending;
|
||||
},
|
||||
|
||||
abort(reset) {
|
||||
if (this.program) {
|
||||
if (reset && obj.tick) obj.tick(1, 0);
|
||||
if (obj.css) transitionManager.deleteRule(node, this.program.name);
|
||||
this.program = this.pending = null;
|
||||
this.running = false;
|
||||
}
|
||||
},
|
||||
|
||||
invalidate() {
|
||||
if (this.program) {
|
||||
this.program.invalidated = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
let outros = {};
|
||||
|
||||
function groupOutros() {
|
||||
outros.current = {
|
||||
remaining: 0,
|
||||
callbacks: []
|
||||
};
|
||||
}
|
||||
|
||||
var transitionManager = {
|
||||
running: false,
|
||||
transitions: [],
|
||||
bound: null,
|
||||
stylesheet: null,
|
||||
activeRules: {},
|
||||
promise: null,
|
||||
|
||||
add(transition) {
|
||||
this.transitions.push(transition);
|
||||
|
||||
if (!this.running) {
|
||||
this.running = true;
|
||||
requestAnimationFrame(this.bound || (this.bound = this.next.bind(this)));
|
||||
}
|
||||
},
|
||||
|
||||
addRule(rule, name) {
|
||||
if (!this.stylesheet) {
|
||||
const style = createElement('style');
|
||||
document.head.appendChild(style);
|
||||
transitionManager.stylesheet = style.sheet;
|
||||
}
|
||||
|
||||
if (!this.activeRules[name]) {
|
||||
this.activeRules[name] = true;
|
||||
this.stylesheet.insertRule(`@keyframes ${name} ${rule}`, this.stylesheet.cssRules.length);
|
||||
}
|
||||
},
|
||||
|
||||
next() {
|
||||
this.running = false;
|
||||
|
||||
const now = window.performance.now();
|
||||
let i = this.transitions.length;
|
||||
|
||||
while (i--) {
|
||||
const transition = this.transitions[i];
|
||||
|
||||
if (transition.program && now >= transition.program.end) {
|
||||
transition.done();
|
||||
}
|
||||
|
||||
if (transition.pending && now >= transition.pending.start) {
|
||||
transition.start(transition.pending);
|
||||
}
|
||||
|
||||
if (transition.running) {
|
||||
transition.update(now);
|
||||
this.running = true;
|
||||
} else if (!transition.pending) {
|
||||
this.transitions.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.running) {
|
||||
requestAnimationFrame(this.bound);
|
||||
} else if (this.stylesheet) {
|
||||
let i = this.stylesheet.cssRules.length;
|
||||
while (i--) this.stylesheet.deleteRule(i);
|
||||
this.activeRules = {};
|
||||
}
|
||||
},
|
||||
|
||||
deleteRule(node, name) {
|
||||
node.style.animation = node.style.animation
|
||||
.split(', ')
|
||||
.filter(anim => anim && anim.indexOf(name) === -1)
|
||||
.join(', ');
|
||||
},
|
||||
|
||||
wait() {
|
||||
if (!transitionManager.promise) {
|
||||
transitionManager.promise = Promise.resolve();
|
||||
transitionManager.promise.then(() => {
|
||||
transitionManager.promise = null;
|
||||
});
|
||||
}
|
||||
|
||||
return transitionManager.promise;
|
||||
}
|
||||
};
|
||||
|
||||
class SvelteComponent {
|
||||
constructor(options) {
|
||||
this.__get_state = this.__init(
|
||||
fn => this.__inject_props = fn
|
||||
);
|
||||
|
||||
this.__dirty = null;
|
||||
|
||||
if (options.props) {
|
||||
this.__inject_props(options.props);
|
||||
}
|
||||
|
||||
if (options.target) {
|
||||
this.__mount(options.target);
|
||||
}
|
||||
}
|
||||
|
||||
$on(eventName, callback) {
|
||||
|
||||
}
|
||||
|
||||
$destroy() {
|
||||
this.__destroy(true);
|
||||
}
|
||||
|
||||
__make_dirty() {
|
||||
if (this.__dirty) return;
|
||||
this.__dirty = {};
|
||||
schedule_update(this);
|
||||
}
|
||||
|
||||
__mount(target, anchor) {
|
||||
this.__fragment = this.__create_fragment(this.__get_state());
|
||||
this.__fragment.c();
|
||||
this.__fragment.m(target, anchor);
|
||||
}
|
||||
|
||||
__set(key, value) {
|
||||
this.__inject_props({ [key]: value });
|
||||
this.__make_dirty();
|
||||
this.__dirty[key] = true;
|
||||
}
|
||||
|
||||
__update() {
|
||||
this.__fragment.p(this.__dirty, this.__get_state());
|
||||
this.__dirty = null;
|
||||
}
|
||||
|
||||
__destroy(detach) {
|
||||
this.__fragment.d(detach);
|
||||
}
|
||||
}
|
||||
|
||||
export { append, insert, detachNode, detachBetween, detachBefore, detachAfter, reinsertBetween, reinsertChildren, reinsertAfter, reinsertBefore, destroyEach, createFragment, createElement, createSvgElement, createText, createComment, addListener, removeListener, setAttribute, setAttributes, setCustomElementData, setXlinkAttribute, getBindingGroupValue, toNumber, timeRangesToArray, children, claimElement, claimText, setData, setInputType, setStyle, selectOption, selectOptions, selectValue, selectMultipleValue, addResizeListener, toggleClass, schedule_update, flush, linear, generateRule, hash, wrapTransition, outros, groupOutros, transitionManager, noop, assign, assignTrue, isPromise, callAfter, addLoc, exclude, run, SvelteComponent };
|
||||
@ -1 +1,2 @@
|
||||
--bail
|
||||
test/test.js
|
||||
@ -0,0 +1,54 @@
|
||||
import { schedule_update } from './scheduler';
|
||||
|
||||
export class SvelteComponent {
|
||||
constructor(options) {
|
||||
this.__get_state = this.__init(
|
||||
fn => this.__inject_props = fn
|
||||
);
|
||||
|
||||
this.__dirty = null;
|
||||
|
||||
if (options.props) {
|
||||
this.__inject_props(options.props);
|
||||
}
|
||||
|
||||
if (options.target) {
|
||||
this.__mount(options.target);
|
||||
}
|
||||
}
|
||||
|
||||
$on(eventName, callback) {
|
||||
|
||||
}
|
||||
|
||||
$destroy() {
|
||||
this.__destroy(true);
|
||||
}
|
||||
|
||||
__make_dirty() {
|
||||
if (this.__dirty) return;
|
||||
this.__dirty = {};
|
||||
schedule_update(this);
|
||||
}
|
||||
|
||||
__mount(target, anchor) {
|
||||
this.__fragment = this.__create_fragment(this.__get_state());
|
||||
this.__fragment.c();
|
||||
this.__fragment.m(target, anchor);
|
||||
}
|
||||
|
||||
__set(key, value) {
|
||||
this.__inject_props({ [key]: value });
|
||||
this.__make_dirty();
|
||||
this.__dirty[key] = true;
|
||||
}
|
||||
|
||||
__update() {
|
||||
this.__fragment.p(this.__dirty, this.__get_state());
|
||||
this.__dirty = null;
|
||||
}
|
||||
|
||||
__destroy(detach) {
|
||||
this.__fragment.d(detach);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,243 @@
|
||||
export function append(target, node) {
|
||||
target.appendChild(node);
|
||||
}
|
||||
|
||||
export function insert(target, node, anchor) {
|
||||
target.insertBefore(node, anchor);
|
||||
}
|
||||
|
||||
export function detachNode(node) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
|
||||
export function detachBetween(before, after) {
|
||||
while (before.nextSibling && before.nextSibling !== after) {
|
||||
before.parentNode.removeChild(before.nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
export function detachBefore(after) {
|
||||
while (after.previousSibling) {
|
||||
after.parentNode.removeChild(after.previousSibling);
|
||||
}
|
||||
}
|
||||
|
||||
export function detachAfter(before) {
|
||||
while (before.nextSibling) {
|
||||
before.parentNode.removeChild(before.nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
export function reinsertBetween(before, after, target) {
|
||||
while (before.nextSibling && before.nextSibling !== after) {
|
||||
target.appendChild(before.parentNode.removeChild(before.nextSibling));
|
||||
}
|
||||
}
|
||||
|
||||
export function reinsertChildren(parent, target) {
|
||||
while (parent.firstChild) target.appendChild(parent.firstChild);
|
||||
}
|
||||
|
||||
export function reinsertAfter(before, target) {
|
||||
while (before.nextSibling) target.appendChild(before.nextSibling);
|
||||
}
|
||||
|
||||
export function reinsertBefore(after, target) {
|
||||
var parent = after.parentNode;
|
||||
while (parent.firstChild !== after) target.appendChild(parent.firstChild);
|
||||
}
|
||||
|
||||
export function destroyEach(iterations, detach) {
|
||||
for (var i = 0; i < iterations.length; i += 1) {
|
||||
if (iterations[i]) iterations[i].d(detach);
|
||||
}
|
||||
}
|
||||
|
||||
export function createFragment() {
|
||||
return document.createDocumentFragment();
|
||||
}
|
||||
|
||||
export function createElement(name) {
|
||||
return document.createElement(name);
|
||||
}
|
||||
|
||||
export function createSvgElement(name) {
|
||||
return document.createElementNS('http://www.w3.org/2000/svg', name);
|
||||
}
|
||||
|
||||
export function createText(data) {
|
||||
return document.createTextNode(data);
|
||||
}
|
||||
|
||||
export function createComment() {
|
||||
return document.createComment('');
|
||||
}
|
||||
|
||||
export function addListener(node, event, handler, options) {
|
||||
node.addEventListener(event, handler, options);
|
||||
}
|
||||
|
||||
export function removeListener(node, event, handler, options) {
|
||||
node.removeEventListener(event, handler, options);
|
||||
}
|
||||
|
||||
export function setAttribute(node, attribute, value) {
|
||||
if (value == null) node.removeAttribute(attribute);
|
||||
else node.setAttribute(attribute, value);
|
||||
}
|
||||
|
||||
export function setAttributes(node, attributes) {
|
||||
for (var key in attributes) {
|
||||
if (key === 'style') {
|
||||
node.style.cssText = attributes[key];
|
||||
} else if (key in node) {
|
||||
node[key] = attributes[key];
|
||||
} else {
|
||||
setAttribute(node, key, attributes[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function setCustomElementData(node, prop, value) {
|
||||
if (prop in node) {
|
||||
node[prop] = value;
|
||||
} else if (value) {
|
||||
setAttribute(node, prop, value);
|
||||
} else {
|
||||
node.removeAttribute(prop);
|
||||
}
|
||||
}
|
||||
|
||||
export function setXlinkAttribute(node, attribute, value) {
|
||||
node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
|
||||
}
|
||||
|
||||
export function getBindingGroupValue(group) {
|
||||
var value = [];
|
||||
for (var i = 0; i < group.length; i += 1) {
|
||||
if (group[i].checked) value.push(group[i].__value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
export function toNumber(value) {
|
||||
return value === '' ? undefined : +value;
|
||||
}
|
||||
|
||||
export function timeRangesToArray(ranges) {
|
||||
var array = [];
|
||||
for (var i = 0; i < ranges.length; i += 1) {
|
||||
array.push({ start: ranges.start(i), end: ranges.end(i) });
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
export function children (element) {
|
||||
return Array.from(element.childNodes);
|
||||
}
|
||||
|
||||
export function claimElement (nodes, name, attributes, svg) {
|
||||
for (var i = 0; i < nodes.length; i += 1) {
|
||||
var node = nodes[i];
|
||||
if (node.nodeName === name) {
|
||||
for (var j = 0; j < node.attributes.length; j += 1) {
|
||||
var attribute = node.attributes[j];
|
||||
if (!attributes[attribute.name]) node.removeAttribute(attribute.name);
|
||||
}
|
||||
return nodes.splice(i, 1)[0]; // TODO strip unwanted attributes
|
||||
}
|
||||
}
|
||||
|
||||
return svg ? createSvgElement(name) : createElement(name);
|
||||
}
|
||||
|
||||
export function claimText (nodes, data) {
|
||||
for (var i = 0; i < nodes.length; i += 1) {
|
||||
var node = nodes[i];
|
||||
if (node.nodeType === 3) {
|
||||
node.data = data;
|
||||
return nodes.splice(i, 1)[0];
|
||||
}
|
||||
}
|
||||
|
||||
return createText(data);
|
||||
}
|
||||
|
||||
export function setData(text, data) {
|
||||
text.data = '' + data;
|
||||
}
|
||||
|
||||
export function setInputType(input, type) {
|
||||
try {
|
||||
input.type = type;
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
export function setStyle(node, key, value) {
|
||||
node.style.setProperty(key, value);
|
||||
}
|
||||
|
||||
export function selectOption(select, value) {
|
||||
for (var i = 0; i < select.options.length; i += 1) {
|
||||
var option = select.options[i];
|
||||
|
||||
if (option.__value === value) {
|
||||
option.selected = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function selectOptions(select, value) {
|
||||
for (var i = 0; i < select.options.length; i += 1) {
|
||||
var option = select.options[i];
|
||||
option.selected = ~value.indexOf(option.__value);
|
||||
}
|
||||
}
|
||||
|
||||
export function selectValue(select) {
|
||||
var selectedOption = select.querySelector(':checked') || select.options[0];
|
||||
return selectedOption && selectedOption.__value;
|
||||
}
|
||||
|
||||
export function selectMultipleValue(select) {
|
||||
return [].map.call(select.querySelectorAll(':checked'), function(option) {
|
||||
return option.__value;
|
||||
});
|
||||
}
|
||||
|
||||
export function addResizeListener(element, fn) {
|
||||
if (getComputedStyle(element).position === 'static') {
|
||||
element.style.position = 'relative';
|
||||
}
|
||||
|
||||
const object = document.createElement('object');
|
||||
object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
|
||||
object.type = 'text/html';
|
||||
|
||||
let win;
|
||||
|
||||
object.onload = () => {
|
||||
win = object.contentDocument.defaultView;
|
||||
win.addEventListener('resize', fn);
|
||||
};
|
||||
|
||||
if (/Trident/.test(navigator.userAgent)) {
|
||||
element.appendChild(object);
|
||||
object.data = 'about:blank';
|
||||
} else {
|
||||
object.data = 'about:blank';
|
||||
element.appendChild(object);
|
||||
}
|
||||
|
||||
return {
|
||||
cancel: () => {
|
||||
win && win.removeEventListener && win.removeEventListener('resize', fn);
|
||||
element.removeChild(object);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function toggleClass(element, name, toggle) {
|
||||
element.classList.toggle(name, !!toggle);
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
export * from './dom.js';
|
||||
export * from './scheduler.js';
|
||||
export * from './transitions.js';
|
||||
export * from './utils.js';
|
||||
export * from './SvelteComponent.js';
|
||||
@ -0,0 +1,23 @@
|
||||
let update_scheduled = false;
|
||||
|
||||
const dirty_components = [];
|
||||
|
||||
export function schedule_update(component) {
|
||||
dirty_components.push(component);
|
||||
if (!update_scheduled) {
|
||||
update_scheduled = true;
|
||||
queueMicrotask(flush);
|
||||
}
|
||||
}
|
||||
|
||||
export function flush() {
|
||||
while (dirty_components.length) {
|
||||
dirty_components.pop().__update();
|
||||
}
|
||||
|
||||
update_scheduled = false;
|
||||
}
|
||||
|
||||
function queueMicrotask(callback) {
|
||||
Promise.resolve().then(callback);
|
||||
}
|
||||
@ -0,0 +1,256 @@
|
||||
import { createElement } from './dom.js';
|
||||
import { noop, run } from './utils.js';
|
||||
|
||||
export function linear(t) {
|
||||
return t;
|
||||
}
|
||||
|
||||
export function generateRule({ a, b, delta, duration }, ease, fn) {
|
||||
const step = 16.666 / duration;
|
||||
let keyframes = '{\n';
|
||||
|
||||
for (let p = 0; p <= 1; p += step) {
|
||||
const t = a + delta * ease(p);
|
||||
keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`;
|
||||
}
|
||||
|
||||
return keyframes + `100% {${fn(b, 1 - b)}}\n}`;
|
||||
}
|
||||
|
||||
// https://github.com/darkskyapp/string-hash/blob/master/index.js
|
||||
export function hash(str) {
|
||||
let hash = 5381;
|
||||
let i = str.length;
|
||||
|
||||
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
|
||||
return hash >>> 0;
|
||||
}
|
||||
|
||||
export function wrapTransition(component, node, fn, params, intro) {
|
||||
let obj = fn.call(component, node, params);
|
||||
let duration;
|
||||
let ease;
|
||||
let cssText;
|
||||
|
||||
let initialised = false;
|
||||
|
||||
return {
|
||||
t: intro ? 0 : 1,
|
||||
running: false,
|
||||
program: null,
|
||||
pending: null,
|
||||
|
||||
run(b, callback) {
|
||||
if (typeof obj === 'function') {
|
||||
transitionManager.wait().then(() => {
|
||||
obj = obj();
|
||||
this._run(b, callback);
|
||||
});
|
||||
} else {
|
||||
this._run(b, callback);
|
||||
}
|
||||
},
|
||||
|
||||
_run(b, callback) {
|
||||
duration = obj.duration || 300;
|
||||
ease = obj.easing || linear;
|
||||
|
||||
const program = {
|
||||
start: window.performance.now() + (obj.delay || 0),
|
||||
b,
|
||||
callback: callback || noop
|
||||
};
|
||||
|
||||
if (intro && !initialised) {
|
||||
if (obj.css && obj.delay) {
|
||||
cssText = node.style.cssText;
|
||||
node.style.cssText += obj.css(0, 1);
|
||||
}
|
||||
|
||||
if (obj.tick) obj.tick(0, 1);
|
||||
initialised = true;
|
||||
}
|
||||
|
||||
if (!b) {
|
||||
program.group = outros.current;
|
||||
outros.current.remaining += 1;
|
||||
}
|
||||
|
||||
if (obj.delay) {
|
||||
this.pending = program;
|
||||
} else {
|
||||
this.start(program);
|
||||
}
|
||||
|
||||
if (!this.running) {
|
||||
this.running = true;
|
||||
transitionManager.add(this);
|
||||
}
|
||||
},
|
||||
|
||||
start(program) {
|
||||
component.fire(`${program.b ? 'intro' : 'outro'}.start`, { node });
|
||||
|
||||
program.a = this.t;
|
||||
program.delta = program.b - program.a;
|
||||
program.duration = duration * Math.abs(program.b - program.a);
|
||||
program.end = program.start + program.duration;
|
||||
|
||||
if (obj.css) {
|
||||
if (obj.delay) node.style.cssText = cssText;
|
||||
|
||||
const rule = generateRule(program, ease, obj.css);
|
||||
transitionManager.addRule(rule, program.name = '__svelte_' + hash(rule));
|
||||
|
||||
node.style.animation = (node.style.animation || '')
|
||||
.split(', ')
|
||||
.filter(anim => anim && (program.delta < 0 || !/__svelte/.test(anim)))
|
||||
.concat(`${program.name} ${program.duration}ms linear 1 forwards`)
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
this.program = program;
|
||||
this.pending = null;
|
||||
},
|
||||
|
||||
update(now) {
|
||||
const program = this.program;
|
||||
if (!program) return;
|
||||
|
||||
const p = now - program.start;
|
||||
this.t = program.a + program.delta * ease(p / program.duration);
|
||||
if (obj.tick) obj.tick(this.t, 1 - this.t);
|
||||
},
|
||||
|
||||
done() {
|
||||
const program = this.program;
|
||||
this.t = program.b;
|
||||
|
||||
if (obj.tick) obj.tick(this.t, 1 - this.t);
|
||||
|
||||
component.fire(`${program.b ? 'intro' : 'outro'}.end`, { node });
|
||||
|
||||
if (!program.b && !program.invalidated) {
|
||||
program.group.callbacks.push(() => {
|
||||
program.callback();
|
||||
if (obj.css) transitionManager.deleteRule(node, program.name);
|
||||
});
|
||||
|
||||
if (--program.group.remaining === 0) {
|
||||
program.group.callbacks.forEach(run);
|
||||
}
|
||||
} else {
|
||||
if (obj.css) transitionManager.deleteRule(node, program.name);
|
||||
}
|
||||
|
||||
this.running = !!this.pending;
|
||||
},
|
||||
|
||||
abort(reset) {
|
||||
if (this.program) {
|
||||
if (reset && obj.tick) obj.tick(1, 0);
|
||||
if (obj.css) transitionManager.deleteRule(node, this.program.name);
|
||||
this.program = this.pending = null;
|
||||
this.running = false;
|
||||
}
|
||||
},
|
||||
|
||||
invalidate() {
|
||||
if (this.program) {
|
||||
this.program.invalidated = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export let outros = {};
|
||||
|
||||
export function groupOutros() {
|
||||
outros.current = {
|
||||
remaining: 0,
|
||||
callbacks: []
|
||||
};
|
||||
}
|
||||
|
||||
export var transitionManager = {
|
||||
running: false,
|
||||
transitions: [],
|
||||
bound: null,
|
||||
stylesheet: null,
|
||||
activeRules: {},
|
||||
promise: null,
|
||||
|
||||
add(transition) {
|
||||
this.transitions.push(transition);
|
||||
|
||||
if (!this.running) {
|
||||
this.running = true;
|
||||
requestAnimationFrame(this.bound || (this.bound = this.next.bind(this)));
|
||||
}
|
||||
},
|
||||
|
||||
addRule(rule, name) {
|
||||
if (!this.stylesheet) {
|
||||
const style = createElement('style');
|
||||
document.head.appendChild(style);
|
||||
transitionManager.stylesheet = style.sheet;
|
||||
}
|
||||
|
||||
if (!this.activeRules[name]) {
|
||||
this.activeRules[name] = true;
|
||||
this.stylesheet.insertRule(`@keyframes ${name} ${rule}`, this.stylesheet.cssRules.length);
|
||||
}
|
||||
},
|
||||
|
||||
next() {
|
||||
this.running = false;
|
||||
|
||||
const now = window.performance.now();
|
||||
let i = this.transitions.length;
|
||||
|
||||
while (i--) {
|
||||
const transition = this.transitions[i];
|
||||
|
||||
if (transition.program && now >= transition.program.end) {
|
||||
transition.done();
|
||||
}
|
||||
|
||||
if (transition.pending && now >= transition.pending.start) {
|
||||
transition.start(transition.pending);
|
||||
}
|
||||
|
||||
if (transition.running) {
|
||||
transition.update(now);
|
||||
this.running = true;
|
||||
} else if (!transition.pending) {
|
||||
this.transitions.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.running) {
|
||||
requestAnimationFrame(this.bound);
|
||||
} else if (this.stylesheet) {
|
||||
let i = this.stylesheet.cssRules.length;
|
||||
while (i--) this.stylesheet.deleteRule(i);
|
||||
this.activeRules = {};
|
||||
}
|
||||
},
|
||||
|
||||
deleteRule(node, name) {
|
||||
node.style.animation = node.style.animation
|
||||
.split(', ')
|
||||
.filter(anim => anim && anim.indexOf(name) === -1)
|
||||
.join(', ');
|
||||
},
|
||||
|
||||
wait() {
|
||||
if (!transitionManager.promise) {
|
||||
transitionManager.promise = Promise.resolve();
|
||||
transitionManager.promise.then(() => {
|
||||
transitionManager.promise = null;
|
||||
});
|
||||
}
|
||||
|
||||
return transitionManager.promise;
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,38 @@
|
||||
export function noop() {}
|
||||
|
||||
export function assign(tar, src) {
|
||||
for (var k in src) tar[k] = src[k];
|
||||
return tar;
|
||||
}
|
||||
|
||||
export function assignTrue(tar, src) {
|
||||
for (var k in src) tar[k] = 1;
|
||||
return tar;
|
||||
}
|
||||
|
||||
export function isPromise(value) {
|
||||
return value && typeof value.then === 'function';
|
||||
}
|
||||
|
||||
export function callAfter(fn, i) {
|
||||
if (i === 0) fn();
|
||||
return () => {
|
||||
if (!--i) fn();
|
||||
};
|
||||
}
|
||||
|
||||
export function addLoc(element, file, line, column, char) {
|
||||
element.__svelte_meta = {
|
||||
loc: { file, line, column, char }
|
||||
};
|
||||
}
|
||||
|
||||
export function exclude(src, prop) {
|
||||
const tar = {};
|
||||
for (const k in src) k === prop || (tar[k] = src[k]);
|
||||
return tar;
|
||||
}
|
||||
|
||||
export function run(fn) {
|
||||
fn();
|
||||
}
|
||||
@ -1,2 +1,2 @@
|
||||
<div>i got 99 problems</div>
|
||||
<div>the answer is 42</div>
|
||||
<div>i got undefined problems</div>
|
||||
<div>the answer is undefined</div>
|
||||
Loading…
Reference in new issue