mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
commit
265c222195
@ -0,0 +1,173 @@
|
||||
/*
|
||||
Adapted from https://github.com/mattdesl
|
||||
Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICENSE.md
|
||||
*/
|
||||
|
||||
export function backInOut(t) {
|
||||
var s = 1.70158 * 1.525;
|
||||
if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));
|
||||
return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
|
||||
}
|
||||
|
||||
export function backIn(t) {
|
||||
var s = 1.70158;
|
||||
return t * t * ((s + 1) * t - s);
|
||||
}
|
||||
|
||||
export function backOut(t) {
|
||||
var s = 1.70158;
|
||||
return --t * t * ((s + 1) * t + s) + 1;
|
||||
}
|
||||
|
||||
export function bounceOut(t) {
|
||||
var a = 4.0 / 11.0;
|
||||
var b = 8.0 / 11.0;
|
||||
var c = 9.0 / 10.0;
|
||||
|
||||
var ca = 4356.0 / 361.0;
|
||||
var cb = 35442.0 / 1805.0;
|
||||
var cc = 16061.0 / 1805.0;
|
||||
|
||||
var t2 = t * t;
|
||||
|
||||
return t < a
|
||||
? 7.5625 * t2
|
||||
: t < b
|
||||
? 9.075 * t2 - 9.9 * t + 3.4
|
||||
: t < c
|
||||
? ca * t2 - cb * t + cc
|
||||
: 10.8 * t * t - 20.52 * t + 10.72;
|
||||
}
|
||||
|
||||
export function bounceInOut(t) {
|
||||
return t < 0.5
|
||||
? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0))
|
||||
: 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
|
||||
}
|
||||
|
||||
export function bounceIn(t) {
|
||||
return 1.0 - bounceOut(1.0 - t);
|
||||
}
|
||||
|
||||
export function circInOut(t) {
|
||||
if ((t *= 2) < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
|
||||
return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
|
||||
}
|
||||
|
||||
export function circIn(t) {
|
||||
return 1.0 - Math.sqrt(1.0 - t * t);
|
||||
}
|
||||
|
||||
export function circOut(t) {
|
||||
return Math.sqrt(1 - --t * t);
|
||||
}
|
||||
|
||||
export function cubicInOut(t) {
|
||||
return t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
|
||||
}
|
||||
|
||||
export function cubicIn(t) {
|
||||
return t * t * t;
|
||||
}
|
||||
|
||||
export function cubicOut(t) {
|
||||
var f = t - 1.0;
|
||||
return f * f * f + 1.0;
|
||||
}
|
||||
|
||||
export function elasticInOut(t) {
|
||||
return t < 0.5
|
||||
? 0.5 *
|
||||
Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) *
|
||||
Math.pow(2.0, 10.0 * (2.0 * t - 1.0))
|
||||
: 0.5 *
|
||||
Math.sin(((-13.0 * Math.PI) / 2) * (2.0 * t - 1.0 + 1.0)) *
|
||||
Math.pow(2.0, -10.0 * (2.0 * t - 1.0)) +
|
||||
1.0;
|
||||
}
|
||||
|
||||
export function elasticIn(t) {
|
||||
return Math.sin((13.0 * t * Math.PI) / 2) * Math.pow(2.0, 10.0 * (t - 1.0));
|
||||
}
|
||||
|
||||
export function elasticOut(t) {
|
||||
return (
|
||||
Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * Math.pow(2.0, -10.0 * t) + 1.0
|
||||
);
|
||||
}
|
||||
|
||||
export function expoInOut(t) {
|
||||
return t === 0.0 || t === 1.0
|
||||
? t
|
||||
: t < 0.5
|
||||
? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
|
||||
: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
|
||||
}
|
||||
|
||||
export function expoIn(t) {
|
||||
return t === 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
|
||||
}
|
||||
|
||||
export function expoOut(t) {
|
||||
return t === 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
|
||||
}
|
||||
|
||||
export function linear(t) {
|
||||
return t;
|
||||
}
|
||||
|
||||
export function quadInOut(t) {
|
||||
t /= 0.5;
|
||||
if (t < 1) return 0.5 * t * t;
|
||||
t--;
|
||||
return -0.5 * (t * (t - 2) - 1);
|
||||
}
|
||||
|
||||
export function quadIn(t) {
|
||||
return t * t;
|
||||
}
|
||||
|
||||
export function quadOut(t) {
|
||||
return -t * (t - 2.0);
|
||||
}
|
||||
|
||||
export function quartInOut(t) {
|
||||
return t < 0.5
|
||||
? +8.0 * Math.pow(t, 4.0)
|
||||
: -8.0 * Math.pow(t - 1.0, 4.0) + 1.0;
|
||||
}
|
||||
|
||||
export function quartIn(t) {
|
||||
return Math.pow(t, 4.0);
|
||||
}
|
||||
|
||||
export function quartOut(t) {
|
||||
return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
|
||||
}
|
||||
|
||||
export function quintInOut(t) {
|
||||
if ((t *= 2) < 1) return 0.5 * t * t * t * t * t;
|
||||
return 0.5 * ((t -= 2) * t * t * t * t + 2);
|
||||
}
|
||||
|
||||
export function quintIn(t) {
|
||||
return t * t * t * t * t;
|
||||
}
|
||||
|
||||
export function quintOut(t) {
|
||||
return --t * t * t * t * t + 1;
|
||||
}
|
||||
|
||||
export function sineInOut(t) {
|
||||
return -0.5 * (Math.cos(Math.PI * t) - 1);
|
||||
}
|
||||
|
||||
export function sineIn(t) {
|
||||
var v = Math.cos(t * Math.PI * 0.5);
|
||||
if (Math.abs(v) < 1e-14) return 1;
|
||||
else return 1 - v;
|
||||
}
|
||||
|
||||
export function sineOut(t) {
|
||||
return Math.sin((t * Math.PI) / 2);
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
const fs = require('fs');
|
||||
|
||||
const files = [];
|
||||
|
||||
for (const path of process.argv.slice(2)) {
|
||||
if (!path.includes('/.')) {
|
||||
files.push({ path: path.slice(19), data: fs.readFileSync(path).toString() });
|
||||
}
|
||||
}
|
||||
|
||||
fs.writeFileSync('static/svelte-app.json', JSON.stringify(files));
|
||||
@ -0,0 +1,15 @@
|
||||
cd `dirname $0`/..
|
||||
|
||||
# fetch svelte-app
|
||||
rm -rf scripts/svelte-app
|
||||
node_modules/.bin/degit sveltejs/template scripts/svelte-app
|
||||
|
||||
# update repl-viewer.css based on template
|
||||
cp scripts/svelte-app/public/global.css static/repl-viewer.css
|
||||
|
||||
# remove src (will be recreated client-side) and node_modules
|
||||
rm -rf scripts/svelte-app/src
|
||||
rm -rf scripts/svelte-app/node_modules
|
||||
|
||||
# build svelte-app.json
|
||||
node scripts/build-svelte-app-json.js `find scripts/svelte-app -type f`
|
||||
@ -0,0 +1,24 @@
|
||||
export default {
|
||||
html: `
|
||||
<input>
|
||||
<p>value: initial</p>
|
||||
`,
|
||||
|
||||
ssrHtml: `
|
||||
<input value="initial">
|
||||
<p>value: initial</p>
|
||||
`,
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
const input = target.querySelector('input');
|
||||
const event = new window.Event('input');
|
||||
|
||||
input.value = 'changed';
|
||||
await input.dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<input>
|
||||
<p>value: changed</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let node;
|
||||
export let value = 'initial';
|
||||
</script>
|
||||
|
||||
<input bind:this={node} bind:value>
|
||||
<p>value: {value}</p>
|
||||
@ -0,0 +1 @@
|
||||
<div>{x} {y}</div>
|
||||
@ -0,0 +1,9 @@
|
||||
export default {
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
warnings: [
|
||||
`<Foo$> was created without expected prop 'y'`
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import Foo from './Foo.html';
|
||||
</script>
|
||||
|
||||
<Foo x={undefined}/>
|
||||
@ -0,0 +1,26 @@
|
||||
export default {
|
||||
preserveIdentifiers: true,
|
||||
|
||||
props: {
|
||||
links: ['a', 'b', 'c']
|
||||
},
|
||||
|
||||
html: `
|
||||
<a href="x#a">x#a</a>
|
||||
<a href="x#b">x#b</a>
|
||||
<a href="x#c">x#c</a>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.links = ['d', 'e', 'f'];
|
||||
|
||||
const links = [...target.querySelectorAll('a')];
|
||||
assert.deepEqual(links.map(l => l.href), ['x#d', 'x#e', 'x#f']);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<a href="x#d">x#d</a>
|
||||
<a href="x#e">x#e</a>
|
||||
<a href="x#f">x#f</a>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
{#each links as link}
|
||||
<a href="x#{link}">x#{link}</a>
|
||||
{/each}
|
||||
@ -0,0 +1,82 @@
|
||||
import { cubicOut, cubicInOut } from './easing';
|
||||
|
||||
export function fade(node, {
|
||||
delay = 0,
|
||||
duration = 400
|
||||
}) {
|
||||
const o = +getComputedStyle(node).opacity;
|
||||
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
css: t => `opacity: ${t * o}`
|
||||
};
|
||||
}
|
||||
|
||||
export function fly(node, {
|
||||
delay = 0,
|
||||
duration = 400,
|
||||
easing = cubicOut,
|
||||
x = 0,
|
||||
y = 0
|
||||
}) {
|
||||
const style = getComputedStyle(node);
|
||||
const opacity = +style.opacity;
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: t => `
|
||||
transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
|
||||
opacity: ${t * opacity}`
|
||||
};
|
||||
}
|
||||
|
||||
export function slide(node, {
|
||||
delay = 0,
|
||||
duration = 400,
|
||||
easing = cubicOut
|
||||
}) {
|
||||
const style = getComputedStyle(node);
|
||||
const opacity = +style.opacity;
|
||||
const height = parseFloat(style.height);
|
||||
const padding_top = parseFloat(style.paddingTop);
|
||||
const padding_bottom = parseFloat(style.paddingBottom);
|
||||
const margin_top = parseFloat(style.marginTop);
|
||||
const margin_bottom = parseFloat(style.marginBottom);
|
||||
const border_top_width = parseFloat(style.borderTopWidth);
|
||||
const border_bottom_width = parseFloat(style.borderBottomWidth);
|
||||
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: t =>
|
||||
`overflow: hidden;` +
|
||||
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
||||
`height: ${t * height}px;` +
|
||||
`padding-top: ${t * padding_top}px;` +
|
||||
`padding-bottom: ${t * padding_bottom}px;` +
|
||||
`margin-top: ${t * margin_top}px;` +
|
||||
`margin-bottom: ${t * margin_bottom}px;` +
|
||||
`border-top-width: ${t * border_top_width}px;` +
|
||||
`border-bottom-width: ${t * border_bottom_width}px;`
|
||||
};
|
||||
}
|
||||
|
||||
export function draw(node, {
|
||||
delay = 0,
|
||||
duration = 800,
|
||||
easing = cubicInOut
|
||||
}) {
|
||||
const len = node.getTotalLength();
|
||||
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}`
|
||||
};
|
||||
}
|
||||
Loading…
Reference in new issue