mirror of https://github.com/sveltejs/svelte
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