mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
committed by
GitHub
commit
7c953a8983
@ -1,9 +1,24 @@
|
||||
<script>
|
||||
// `value` is updated whenever the prop value changes...
|
||||
export let value;
|
||||
// `current` is updated whenever the prop value changes...
|
||||
export let current;
|
||||
|
||||
// ...but `valueAtStart` is fixed upon initialisation
|
||||
const valueAtStart = value;
|
||||
// ...but `initial` is fixed upon initialisation
|
||||
const initial = current;
|
||||
</script>
|
||||
|
||||
<p>{valueAtStart} / {value}</p>
|
||||
<p>
|
||||
<span style="background-color: {initial}">initial</span>
|
||||
<span style="background-color: {current}">current</span>
|
||||
</p>
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
width: 4em;
|
||||
text-align: center;
|
||||
border-radius: 0.2em;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@ -1,140 +1,153 @@
|
||||
<script>
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import crossfade from './crossfade.js'; // TODO put this in svelte/transition!
|
||||
|
||||
const { send, receive } = crossfade({
|
||||
fallback(node, params) {
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
|
||||
return {
|
||||
duration: 600,
|
||||
easing: quintOut,
|
||||
css: t => `
|
||||
transform: ${transform} scale(${t});
|
||||
opacity: ${t}
|
||||
`
|
||||
};
|
||||
}
|
||||
import { crossfade, scale } from 'svelte/transition';
|
||||
import images from './images.js';
|
||||
|
||||
const [send, receive] = crossfade({
|
||||
duration: 200,
|
||||
fallback: scale
|
||||
});
|
||||
|
||||
let todos = [
|
||||
{ id: 1, done: false, description: 'write some docs' },
|
||||
{ id: 2, done: false, description: 'start writing JSConf talk' },
|
||||
{ id: 3, done: true, description: 'buy some milk' },
|
||||
{ id: 4, done: false, description: 'mow the lawn' },
|
||||
{ id: 5, done: false, description: 'feed the turtle' },
|
||||
{ id: 6, done: false, description: 'fix some bugs' },
|
||||
];
|
||||
|
||||
let uid = todos.length + 1;
|
||||
|
||||
function add(input) {
|
||||
const todo = {
|
||||
id: uid++,
|
||||
done: false,
|
||||
description: input.value
|
||||
};
|
||||
let selected = null;
|
||||
let loading = null;
|
||||
|
||||
todos = [todo, ...todos];
|
||||
input.value = '';
|
||||
}
|
||||
const ASSETS = `https://sveltejs.github.io/assets/crossfade`;
|
||||
|
||||
function remove(todo) {
|
||||
todos = todos.filter(t => t !== todo);
|
||||
}
|
||||
const load = image => {
|
||||
const timeout = setTimeout(() => loading = image, 100);
|
||||
|
||||
const img = new Image();
|
||||
|
||||
img.onload = () => {
|
||||
selected = image;
|
||||
clearTimeout(timeout);
|
||||
loading = null;
|
||||
};
|
||||
|
||||
img.src = `${ASSETS}/${image.id}.jpg`;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="phone">
|
||||
<h1>Photo gallery</h1>
|
||||
|
||||
<div class="grid">
|
||||
{#each images as image}
|
||||
<div class="square">
|
||||
{#if selected !== image}
|
||||
<button
|
||||
style="background-color: {image.color};"
|
||||
on:click="{() => load(image)}"
|
||||
in:receive={{key:image.id}}
|
||||
out:send={{key:image.id}}
|
||||
>{loading === image ? '...' : image.id}</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if selected}
|
||||
{#await selected then d}
|
||||
<div class="photo" in:receive={{key:d.id}} out:send={{key:d.id}}>
|
||||
<img
|
||||
alt={d.alt}
|
||||
src="{ASSETS}/{d.id}.jpg"
|
||||
on:click="{() => selected = null}"
|
||||
>
|
||||
|
||||
<p class='credit'>
|
||||
<a target="_blank" href="https://www.flickr.com/photos/{d.path}">via Flickr</a> –
|
||||
<a target="_blank" href={d.license.url}>{d.license.name}</a>
|
||||
</p>
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.new-todo {
|
||||
font-size: 1.4em;
|
||||
.container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin: 2em 0 1em 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.board {
|
||||
max-width: 36em;
|
||||
margin: 0 auto;
|
||||
.phone {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 52vmin;
|
||||
height: 76vmin;
|
||||
border: 2vmin solid #ccc;
|
||||
border-bottom-width: 10vmin;
|
||||
padding: 3vmin;
|
||||
border-radius: 2vmin;
|
||||
}
|
||||
|
||||
.left, .right {
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 0 1em 0 0;
|
||||
box-sizing: border-box;
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
font-size: 5vmin;
|
||||
margin: 0.2em 0 0.5em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
font-weight: 200;
|
||||
user-select: none;
|
||||
.grid {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
grid-gap: 2vmin;
|
||||
}
|
||||
|
||||
label {
|
||||
button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
font-size: 5vmin;
|
||||
border: none;
|
||||
margin: 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.photo, img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
padding: 0.5em;
|
||||
margin: 0 auto 0.5em auto;
|
||||
border-radius: 2px;
|
||||
background-color: #eee;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input { margin: 0 }
|
||||
.photo {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.right label {
|
||||
background-color: rgb(180,240,100);
|
||||
img {
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
float: right;
|
||||
height: 1em;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5em;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: rgb(170,30,30);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
.credit {
|
||||
text-align: right;
|
||||
font-size: 2.5vmin;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
opacity: 0.6;
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
label:hover button {
|
||||
opacity: 1;
|
||||
.credit a, .credit a:visited {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='board'>
|
||||
<input class="new-todo" placeholder="what needs to be done?" on:keydown="{event => event.which === 13 && add(event.target)}">
|
||||
|
||||
<div class='left'>
|
||||
<h2>todo</h2>
|
||||
{#each todos.filter(t => !t.done) as todo (todo.id)}
|
||||
<label
|
||||
in:receive="{{key: todo.id}}"
|
||||
out:send="{{key: todo.id}}"
|
||||
>
|
||||
<input type=checkbox bind:checked={todo.done}>
|
||||
{todo.description}
|
||||
<button on:click="{() => remove(todo)}">x</button>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class='right'>
|
||||
<h2>done</h2>
|
||||
{#each todos.filter(t => t.done) as todo (todo.id)}
|
||||
<label
|
||||
in:receive="{{key: todo.id}}"
|
||||
out:send="{{key: todo.id}}"
|
||||
>
|
||||
<input type=checkbox bind:checked={todo.done}>
|
||||
{todo.description}
|
||||
<button on:click="{() => remove(todo)}">x</button>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,65 +0,0 @@
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
export default function crossfade({ send, receive, fallback }) {
|
||||
let requested = new Map();
|
||||
let provided = new Map();
|
||||
|
||||
function crossfade(from, node) {
|
||||
const to = node.getBoundingClientRect();
|
||||
const dx = from.left - to.left;
|
||||
const dy = from.top - to.top;
|
||||
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
|
||||
return {
|
||||
duration: 400,
|
||||
easing: quintOut,
|
||||
css: (t, u) => `
|
||||
opacity: ${t};
|
||||
transform: ${transform} translate(${u * dx}px,${u * dy}px);
|
||||
`
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
send(node, params) {
|
||||
provided.set(params.key, {
|
||||
rect: node.getBoundingClientRect()
|
||||
});
|
||||
|
||||
return () => {
|
||||
if (requested.has(params.key)) {
|
||||
const { rect } = requested.get(params.key);
|
||||
requested.delete(params.key);
|
||||
|
||||
return crossfade(rect, node);
|
||||
}
|
||||
|
||||
// if the node is disappearing altogether
|
||||
// (i.e. wasn't claimed by the other list)
|
||||
// then we need to supply an outro
|
||||
provided.delete(params.key);
|
||||
return fallback(node, params);
|
||||
};
|
||||
},
|
||||
|
||||
receive(node, params) {
|
||||
requested.set(params.key, {
|
||||
rect: node.getBoundingClientRect()
|
||||
});
|
||||
|
||||
return () => {
|
||||
if (provided.has(params.key)) {
|
||||
const { rect } = provided.get(params.key);
|
||||
provided.delete(params.key);
|
||||
|
||||
return crossfade(rect, node);
|
||||
}
|
||||
|
||||
requested.delete(params.key);
|
||||
return fallback(node, params);
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
const BY = {
|
||||
name: 'CC BY 2.0',
|
||||
url: 'https://creativecommons.org/licenses/by/2.0/'
|
||||
};
|
||||
|
||||
const BY_SA = {
|
||||
name: 'CC BY-SA 2.0',
|
||||
url: 'https://creativecommons.org/licenses/by-sa/2.0/'
|
||||
};
|
||||
|
||||
const BY_ND = {
|
||||
name: 'CC BY-ND 2.0',
|
||||
url: 'https://creativecommons.org/licenses/by-nd/2.0/'
|
||||
};
|
||||
|
||||
// via http://labs.tineye.com/multicolr
|
||||
export default [
|
||||
{
|
||||
color: '#001f3f',
|
||||
id: '1',
|
||||
alt: 'Crepuscular rays',
|
||||
path: '43428526@N03/7863279376',
|
||||
license: BY
|
||||
},
|
||||
{
|
||||
color: '#0074D9',
|
||||
id: '2',
|
||||
alt: 'Lapland winter scene',
|
||||
path: '25507134@N00/6527537485',
|
||||
license: BY
|
||||
},
|
||||
{
|
||||
color: '#7FDBFF',
|
||||
id: '3',
|
||||
alt: 'Jellyfish',
|
||||
path: '37707866@N00/3354331318',
|
||||
license: BY
|
||||
},
|
||||
{
|
||||
color: '#39CCCC',
|
||||
id: '4',
|
||||
alt: 'A man scuba diving',
|
||||
path: '32751486@N00/4608886209',
|
||||
license: BY_SA
|
||||
},
|
||||
{
|
||||
color: '#3D9970',
|
||||
id: '5',
|
||||
alt: 'Underwater scene',
|
||||
path: '25483059@N08/5548569010',
|
||||
license: BY
|
||||
},
|
||||
{
|
||||
color: '#2ECC40',
|
||||
id: '6',
|
||||
alt: 'Ferns',
|
||||
path: '8404611@N06/2447470760',
|
||||
license: BY
|
||||
},
|
||||
{
|
||||
color: '#01FF70',
|
||||
id: '7',
|
||||
alt: 'Posters in a bar',
|
||||
path: '33917831@N00/114428206',
|
||||
license: BY_SA
|
||||
},
|
||||
{
|
||||
color: '#FFDC00',
|
||||
id: '8',
|
||||
alt: 'Daffodil',
|
||||
path: '46417125@N04/4818617089',
|
||||
license: BY_ND
|
||||
},
|
||||
{
|
||||
color: '#FF851B',
|
||||
id: '9',
|
||||
alt: 'Dust storm in Sydney',
|
||||
path: '56068058@N00/3945496657',
|
||||
license: BY
|
||||
},
|
||||
{
|
||||
color: '#FF4136',
|
||||
id: '10',
|
||||
alt: 'Postbox',
|
||||
path: '31883499@N05/4216820032',
|
||||
license: BY
|
||||
},
|
||||
{
|
||||
color: '#85144b',
|
||||
id: '11',
|
||||
alt: 'Fireworks',
|
||||
path: '8484971@N07/2625506561',
|
||||
license: BY_ND
|
||||
},
|
||||
{
|
||||
color: '#B10DC9',
|
||||
id: '12',
|
||||
alt: 'The Stereophonics',
|
||||
path: '58028312@N00/5385464371',
|
||||
license: BY_ND
|
||||
}
|
||||
];
|
||||
@ -1,9 +1,24 @@
|
||||
<script>
|
||||
// `value` is updated whenever the prop value changes...
|
||||
export let value;
|
||||
// `current` is updated whenever the prop value changes...
|
||||
export let current;
|
||||
|
||||
// ...but `valueAtStart` is fixed upon initialisation
|
||||
const valueAtStart = value;
|
||||
// ...but `initial` is fixed upon initialisation
|
||||
const initial = current;
|
||||
</script>
|
||||
|
||||
<p>{valueAtStart} / {value}</p>
|
||||
<p>
|
||||
<span style="background-color: {initial}">initial</span>
|
||||
<span style="background-color: {current}">current</span>
|
||||
</p>
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
width: 4em;
|
||||
text-align: center;
|
||||
border-radius: 0.2em;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,24 @@
|
||||
<script>
|
||||
// `value` is updated whenever the prop value changes...
|
||||
export let value;
|
||||
// `current` is updated whenever the prop value changes...
|
||||
export let current;
|
||||
|
||||
// ...but `valueAtStart` is fixed upon initialisation
|
||||
const valueAtStart = value;
|
||||
// ...but `initial` is fixed upon initialisation
|
||||
const initial = current;
|
||||
</script>
|
||||
|
||||
<p>{valueAtStart} / {value}</p>
|
||||
<p>
|
||||
<span style="background-color: {initial}">initial</span>
|
||||
<span style="background-color: {current}">current</span>
|
||||
</p>
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
width: 4em;
|
||||
text-align: center;
|
||||
border-radius: 0.2em;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
exports.up = DB => {
|
||||
DB.sql(`
|
||||
create table if not exists sessions (
|
||||
uid uuid NOT NULL PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
user_id integer REFERENCES users(id) not null,
|
||||
expiry timestamp without time zone DEFAULT now() + interval '1 year'
|
||||
);
|
||||
`);
|
||||
};
|
||||
|
||||
exports.down = DB => {
|
||||
DB.sql(`
|
||||
drop table if exists sessions;
|
||||
`);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,150 +0,0 @@
|
||||
import polka from 'polka';
|
||||
import devalue from 'devalue';
|
||||
import send from '@polka/send';
|
||||
import { get, post } from 'httpie';
|
||||
import { parse, stringify } from 'querystring';
|
||||
import { decode, sign, verify } from './token';
|
||||
import { find, query } from '../utils/db';
|
||||
|
||||
const {
|
||||
BASEURL,
|
||||
GITHUB_CLIENT_ID,
|
||||
GITHUB_CLIENT_SECRET,
|
||||
} = process.env;
|
||||
|
||||
const OAuth = 'https://github.com/login/oauth';
|
||||
|
||||
function exit(res, code, msg='') {
|
||||
const error = msg.charAt(0).toUpperCase() + msg.substring(1);
|
||||
send(res, code, { error });
|
||||
}
|
||||
|
||||
function onError(err, req, res) {
|
||||
const error = err.message || err;
|
||||
const code = err.code || err.status || 500;
|
||||
res.headersSent || send(res, code, { error });
|
||||
}
|
||||
|
||||
/**
|
||||
* Middleware to determine User validity
|
||||
*/
|
||||
export async function isUser(req, res) {
|
||||
const abort = exit.bind(null, res, 401);
|
||||
|
||||
const auth = req.headers.authorization;
|
||||
if (!auth) return abort('Missing Authorization header');
|
||||
|
||||
const [scheme, token] = auth.split(' ');
|
||||
if (scheme !== 'Bearer' || !token) return abort('Invalid Authorization format');
|
||||
|
||||
let data;
|
||||
const decoded = decode(token, { complete:true });
|
||||
if (!decoded || !decoded.header) return abort('Invalid token');
|
||||
|
||||
try {
|
||||
data = await verify(token);
|
||||
} catch (err) {
|
||||
return abort(err.message);
|
||||
}
|
||||
|
||||
const { uid, username } = data;
|
||||
if (!uid || !username) return abort('Invalid token payload');
|
||||
|
||||
try {
|
||||
const row = await find(`select * from users where uid = $1 and username = $2 limit 1`, [uid, username]);
|
||||
return row || abort('Invalid token');
|
||||
} catch (err) {
|
||||
console.error('Auth.isUser', err);
|
||||
return send(res, 500, 'Unknown error occurred');
|
||||
}
|
||||
}
|
||||
|
||||
export function toUser(obj={}) {
|
||||
const { uid, username, name, avatar } = obj;
|
||||
const token = sign({ uid, username });
|
||||
return { uid, username, name, avatar, token };
|
||||
}
|
||||
|
||||
export function API() {
|
||||
const app = polka({ onError });
|
||||
|
||||
if (GITHUB_CLIENT_ID) {
|
||||
app.get('/auth/login', (req, res) => {
|
||||
try {
|
||||
const Location = `${OAuth}/authorize?` + stringify({
|
||||
scope: 'read:user',
|
||||
client_id: GITHUB_CLIENT_ID,
|
||||
redirect_uri: `${BASEURL}/auth/callback`,
|
||||
});
|
||||
|
||||
send(res, 302, Location, { Location });
|
||||
} catch (err) {
|
||||
console.error('GET /auth/login', err);
|
||||
send(res, 500);
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/auth/callback', async (req, res) => {
|
||||
try {
|
||||
// Trade "code" for "access_token"
|
||||
const r1 = await post(`${OAuth}/access_token?` + stringify({
|
||||
code: req.query.code,
|
||||
client_id: GITHUB_CLIENT_ID,
|
||||
client_secret: GITHUB_CLIENT_SECRET,
|
||||
}));
|
||||
|
||||
// Now fetch User details
|
||||
const { access_token } = parse(r1.data);
|
||||
const r2 = await get('https://api.github.com/user', {
|
||||
headers: {
|
||||
'User-Agent': 'svelte.dev',
|
||||
Authorization: `token ${access_token}`
|
||||
}
|
||||
});
|
||||
|
||||
const { id, name, avatar_url, login } = r2.data;
|
||||
|
||||
// Upsert `users` table
|
||||
const [user] = await query(`
|
||||
insert into users(uid, name, username, avatar, github_token)
|
||||
values ($1, $2, $3, $4, $5) on conflict (uid) do update
|
||||
set (name, username, avatar, github_token, updated_at) = ($2, $3, $4, $5, now())
|
||||
returning *
|
||||
`, [id, name, login, avatar_url, access_token]);
|
||||
|
||||
send(res, 200, `
|
||||
<script>
|
||||
window.opener.postMessage({
|
||||
user: ${devalue(toUser(user))}
|
||||
}, window.location.origin);
|
||||
</script>
|
||||
`, {
|
||||
'Content-Type': 'text/html; charset=utf-8'
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('GET /auth/callback', err);
|
||||
send(res, 500, err.data, {
|
||||
'Content-Type': err.headers['content-type'],
|
||||
'Content-Length': err.headers['content-length']
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Print "Misconfigured" error
|
||||
app.get('/auth/login', (req, res) => {
|
||||
send(res, 500, `
|
||||
<body style="font-family: sans-serif; background: rgb(255,215,215); border: 2px solid red; margin: 0; padding: 1em;">
|
||||
<h1>Missing .env file</h1>
|
||||
<p>In order to use GitHub authentication, you will need to <a target="_blank" href="https://github.com/settings/developers">register an OAuth application</a> and create a local .env file:</p>
|
||||
<pre>GITHUB_CLIENT_ID=[YOUR_APP_ID]\nGITHUB_CLIENT_SECRET=[YOUR_APP_SECRET]\nBASEURL=http://localhost:3000</pre>
|
||||
<p>The <code>BASEURL</code> variable should match the callback URL specified for your app.</p>
|
||||
<p>See also <a target="_blank" href="https://github.com/sveltejs/svelte/tree/master/site#repl-github-integration">here</a></p>
|
||||
</body>
|
||||
`, {
|
||||
'Content-Type': 'text/html; charset=utf-8'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return app;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import * as jwt from 'jsonwebtoken';
|
||||
|
||||
const { JWT_KEY, JWT_ALG, JWT_EXP } = process.env;
|
||||
|
||||
const CONFIG = {
|
||||
expiresIn: JWT_EXP,
|
||||
issuer: 'https://svelte.dev',
|
||||
audience: 'https://svelte.dev',
|
||||
algorithm: JWT_ALG,
|
||||
};
|
||||
|
||||
export const decode = jwt.decode;
|
||||
|
||||
export function sign(obj, opts, cb) {
|
||||
opts = Object.assign({}, opts, CONFIG);
|
||||
return jwt.sign(obj, JWT_KEY, opts, cb);
|
||||
}
|
||||
|
||||
export function verify(str, opts, cb) {
|
||||
opts = Object.assign({}, opts, CONFIG);
|
||||
return jwt.verify(str, JWT_KEY, opts, cb);
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
import send from '@polka/send';
|
||||
import { query } from '../../utils/db';
|
||||
|
||||
export async function get(req, res) {
|
||||
if (req.user) {
|
||||
const page_size = 100;
|
||||
const offset = req.query.offset ? parseInt(req.query.offset) : 0;
|
||||
const rows = await query(`
|
||||
select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
|
||||
from gists g
|
||||
where g.user_id = $1
|
||||
order by id desc
|
||||
limit ${page_size + 1}
|
||||
offset $2
|
||||
`, [req.user.id, offset]);
|
||||
|
||||
rows.forEach(row => {
|
||||
row.uid = row.uid.replace(/-/g, '');
|
||||
});
|
||||
|
||||
const more = rows.length > page_size;
|
||||
send(res, 200, { apps: rows.slice(0, page_size), offset: more ? offset + page_size : null });
|
||||
} else {
|
||||
send(res, 401);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
export const oauth = 'https://github.com/login/oauth';
|
||||
export const baseurl = process.env.BASEURL;
|
||||
export const secure = baseurl && baseurl.startsWith('https:');
|
||||
|
||||
export const client_id = process.env.GITHUB_CLIENT_ID;
|
||||
export const client_secret = process.env.GITHUB_CLIENT_SECRET;
|
||||
@ -0,0 +1,54 @@
|
||||
import send from '@polka/send';
|
||||
import devalue from 'devalue';
|
||||
import * as cookie from 'cookie';
|
||||
import * as httpie from 'httpie';
|
||||
import { parse, stringify } from 'querystring';
|
||||
import { sanitize_user, create_user, create_session } from '../../utils/auth';
|
||||
import { oauth, secure, client_id, client_secret } from './_config.js';
|
||||
|
||||
export async function get(req, res) {
|
||||
try {
|
||||
// Trade "code" for "access_token"
|
||||
const r1 = await httpie.post(`${oauth}/access_token?` + stringify({
|
||||
code: req.query.code,
|
||||
client_id,
|
||||
client_secret,
|
||||
}));
|
||||
|
||||
// Now fetch User details
|
||||
const { access_token } = parse(r1.data);
|
||||
const r2 = await httpie.get('https://api.github.com/user', {
|
||||
headers: {
|
||||
'User-Agent': 'svelte.dev',
|
||||
Authorization: `token ${access_token}`
|
||||
}
|
||||
});
|
||||
|
||||
const user = await create_user(r2.data, access_token);
|
||||
const session = await create_session(user);
|
||||
|
||||
res.writeHead(200, {
|
||||
'Set-Cookie': cookie.serialize('sid', session.uid, {
|
||||
maxAge: 31536000,
|
||||
path: '/',
|
||||
httpOnly: true,
|
||||
secure
|
||||
}),
|
||||
'Content-Type': 'text/html; charset=utf-8'
|
||||
});
|
||||
|
||||
res.end(`
|
||||
<script>
|
||||
window.opener.postMessage({
|
||||
user: ${devalue(sanitize_user(user))}
|
||||
}, window.location.origin);
|
||||
</script>
|
||||
`);
|
||||
} catch (err) {
|
||||
console.error('GET /auth/callback', err);
|
||||
send(res, 500, err.data, {
|
||||
'Content-Type': err.headers['content-type'],
|
||||
'Content-Length': err.headers['content-length']
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import send from '@polka/send';
|
||||
import { stringify } from 'querystring';
|
||||
import { oauth, baseurl, client_id } from './_config.js';
|
||||
|
||||
export const get = client_id
|
||||
? (req, res) => {
|
||||
const Location = `${oauth}/authorize?` + stringify({
|
||||
scope: 'read:user',
|
||||
client_id,
|
||||
redirect_uri: `${baseurl}/auth/callback`,
|
||||
});
|
||||
|
||||
send(res, 302, Location, { Location });
|
||||
}
|
||||
: (req, res) => {
|
||||
send(res, 500, `
|
||||
<body style="font-family: sans-serif; background: rgb(255,215,215); border: 2px solid red; margin: 0; padding: 1em;">
|
||||
<h1>Missing .env file</h1>
|
||||
<p>In order to use GitHub authentication, you will need to <a target="_blank" href="https://github.com/settings/developers">register an OAuth application</a> and create a local .env file:</p>
|
||||
<pre>GITHUB_CLIENT_ID=[YOUR_APP_ID]\nGITHUB_CLIENT_SECRET=[YOUR_APP_SECRET]\nBASEURL=http://localhost:3000</pre>
|
||||
<p>The <code>BASEURL</code> variable should match the callback URL specified for your app.</p>
|
||||
<p>See also <a target="_blank" href="https://github.com/sveltejs/svelte/tree/master/site#repl-github-integration">here</a></p>
|
||||
</body>
|
||||
`, {
|
||||
'Content-Type': 'text/html; charset=utf-8'
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
import send from '@polka/send';
|
||||
import * as cookie from 'cookie';
|
||||
import { secure } from './_config.js';
|
||||
import { delete_session } from '../../utils/auth.js';
|
||||
|
||||
export async function get(req, res) {
|
||||
await delete_session(req.cookies.sid);
|
||||
|
||||
send(res, 200, '', {
|
||||
'Set-Cookie': cookie.serialize('sid', '', {
|
||||
maxAge: -1,
|
||||
path: '/',
|
||||
httpOnly: true,
|
||||
secure
|
||||
})
|
||||
});
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import send from '@polka/send';
|
||||
import { isUser, toUser } from '../../backend/auth';
|
||||
|
||||
export async function get(req, res) {
|
||||
const user = await isUser(req, res);
|
||||
res.setHeader('Cache-Control', 'private, no-cache, no-store');
|
||||
return send(res, 200, user ? toUser(user) : null);
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
|
||||
export const user = writable(null);
|
||||
|
||||
if (process.browser) {
|
||||
const storageKey = 'svelte-dev:token';
|
||||
|
||||
// On load, get the last-known user token (if any)
|
||||
// Note: We can skip this all by writing User data?
|
||||
const token = localStorage.getItem(storageKey);
|
||||
|
||||
// Write changes to localStorage
|
||||
user.subscribe(obj => {
|
||||
if (obj) {
|
||||
localStorage.setItem(storageKey, obj.token);
|
||||
} else {
|
||||
localStorage.removeItem(storageKey);
|
||||
}
|
||||
});
|
||||
|
||||
if (token) {
|
||||
// If token, refresh the User data from API
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
fetch('/auth/me.json', { headers })
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then(user.set);
|
||||
}
|
||||
}
|
||||
|
||||
export function logout() {
|
||||
user.set(null);
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
import * as cookie from 'cookie';
|
||||
import flru from 'flru';
|
||||
import { find, query } from './db';
|
||||
|
||||
export const sanitize_user = obj => obj && ({
|
||||
uid: obj.uid,
|
||||
username: obj.username,
|
||||
name: obj.name,
|
||||
avatar: obj.avatar
|
||||
});
|
||||
|
||||
const session_cache = flru(1000);
|
||||
|
||||
export const create_user = async (gh_user, access_token) => {
|
||||
return await find(`
|
||||
insert into users(uid, name, username, avatar, github_token)
|
||||
values ($1, $2, $3, $4, $5) on conflict (uid) do update
|
||||
set (name, username, avatar, github_token, updated_at) = ($2, $3, $4, $5, now())
|
||||
returning id, uid, username, name, avatar
|
||||
`, [gh_user.id, gh_user.name, gh_user.login, gh_user.avatar_url, access_token]);
|
||||
};
|
||||
|
||||
export const create_session = async user => {
|
||||
const session = await find(`
|
||||
insert into sessions(user_id)
|
||||
values ($1)
|
||||
returning uid
|
||||
`, [user.id]);
|
||||
|
||||
session_cache.set(session.uid, user);
|
||||
|
||||
return session;
|
||||
};
|
||||
|
||||
export const delete_session = async sid => {
|
||||
await query(`delete from sessions where uid = $1`, [sid]);
|
||||
session_cache.set(sid, null);
|
||||
};
|
||||
|
||||
const get_user = async sid => {
|
||||
if (!sid) return null;
|
||||
|
||||
if (!session_cache.has(sid)) {
|
||||
session_cache.set(sid, await find(`
|
||||
select users.id, users.uid, users.username, users.name, users.avatar
|
||||
from sessions
|
||||
left join users on sessions.user_id = users.id
|
||||
where sessions.uid = $1 and expiry > now()
|
||||
`, [sid]));
|
||||
}
|
||||
|
||||
return session_cache.get(sid);
|
||||
};
|
||||
|
||||
export const authenticate = () => {
|
||||
// this is a convenient time to clear out expired sessions
|
||||
query(`delete from sessions where expiry < now()`);
|
||||
|
||||
return async (req, res, next) => {
|
||||
req.cookies = cookie.parse(req.headers.cookie || '');
|
||||
req.user = await get_user(req.cookies.sid);
|
||||
|
||||
next();
|
||||
};
|
||||
};
|
||||
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 411 B |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,11 +1,17 @@
|
||||
import Node from './shared/Node';
|
||||
|
||||
const pattern = /^\s*svelte-ignore\s+([\s\S]+)\s*$/m;
|
||||
|
||||
export default class Comment extends Node {
|
||||
type: 'Comment';
|
||||
data: string;
|
||||
ignores: string[];
|
||||
|
||||
constructor(component, parent, scope, info) {
|
||||
super(component, parent, scope, info);
|
||||
this.data = info.data;
|
||||
|
||||
const match = pattern.exec(this.data);
|
||||
this.ignores = match ? match[1].split(/[^\S]/).map(x => x.trim()).filter(Boolean) : [];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
export default function check_graph_for_cycles(edges: Array<[any, any]>): any[] {
|
||||
const graph: Map<any, any[]> = edges.reduce((g, edge) => {
|
||||
const [u, v] = edge;
|
||||
if (!g.has(u)) g.set(u, []);
|
||||
if (!g.has(v)) g.set(v, []);
|
||||
g.get(u).push(v);
|
||||
return g;
|
||||
}, new Map());
|
||||
|
||||
const visited = new Set();
|
||||
const on_stack = new Set();
|
||||
const cycles = [];
|
||||
|
||||
function visit (v) {
|
||||
visited.add(v);
|
||||
on_stack.add(v);
|
||||
|
||||
graph.get(v).forEach(w => {
|
||||
if (!visited.has(w)) {
|
||||
visit(w);
|
||||
} else if (on_stack.has(w)) {
|
||||
cycles.push([...on_stack, w]);
|
||||
}
|
||||
});
|
||||
|
||||
on_stack.delete(v);
|
||||
}
|
||||
|
||||
graph.forEach((_, v) => {
|
||||
if (!visited.has(v)) {
|
||||
visit(v);
|
||||
}
|
||||
});
|
||||
|
||||
return cycles[0];
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
import Component from '../Component';
|
||||
import MagicString from 'magic-string';
|
||||
import { Node } from '../../interfaces';
|
||||
import { nodes_match } from '../../utils/nodes_match';
|
||||
import { Scope } from './scope';
|
||||
|
||||
export function invalidate(component: Component, scope: Scope, code: MagicString, node: Node, names: Set<string>) {
|
||||
const [head, ...tail] = Array.from(names).filter(name => {
|
||||
const owner = scope.find_owner(name);
|
||||
if (owner && owner !== component.instance_scope) return false;
|
||||
|
||||
const variable = component.var_lookup.get(name);
|
||||
|
||||
return variable && (
|
||||
!variable.hoistable &&
|
||||
!variable.global &&
|
||||
!variable.module &&
|
||||
(
|
||||
variable.referenced ||
|
||||
variable.is_reactive_dependency ||
|
||||
variable.export_name ||
|
||||
variable.name[0] === '$'
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
if (head) {
|
||||
component.has_reactive_assignments = true;
|
||||
|
||||
if (node.operator === '=' && nodes_match(node.left, node.right) && tail.length === 0) {
|
||||
code.overwrite(node.start, node.end, component.invalidate(head));
|
||||
} else {
|
||||
let suffix = ')';
|
||||
|
||||
if (head[0] === '$') {
|
||||
code.prependRight(node.start, `${component.helper('set_store_value')}(${head.slice(1)}, `);
|
||||
} else {
|
||||
let prefix = `$$invalidate`;
|
||||
|
||||
const variable = component.var_lookup.get(head);
|
||||
if (variable.subscribable && variable.reassigned) {
|
||||
prefix = `$$subscribe_${head}($$invalidate`;
|
||||
suffix += `)`;
|
||||
}
|
||||
|
||||
code.prependRight(node.start, `${prefix}('${head}', `);
|
||||
}
|
||||
|
||||
const extra_args = tail.map(name => component.invalidate(name));
|
||||
|
||||
const pass_value = (
|
||||
extra_args.length > 0 ||
|
||||
(node.type === 'AssignmentExpression' && node.left.type !== 'Identifier') ||
|
||||
(node.type === 'UpdateExpression' && !node.prefix)
|
||||
);
|
||||
|
||||
if (pass_value) {
|
||||
extra_args.unshift(head);
|
||||
}
|
||||
|
||||
suffix = `${extra_args.map(arg => `, ${arg}`).join('')}${suffix}`;
|
||||
|
||||
code.appendLeft(node.end, suffix);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,16 @@
|
||||
import * as acorn from 'acorn';
|
||||
import dynamicImport from 'acorn-dynamic-import';
|
||||
|
||||
const Parser = acorn.Parser.extend(dynamicImport);
|
||||
const Parser = acorn.Parser;
|
||||
|
||||
export const parse = (source: string) => Parser.parse(source, {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 9,
|
||||
// @ts-ignore TODO pending release of fixed types
|
||||
ecmaVersion: 11,
|
||||
preserveParens: true
|
||||
});
|
||||
|
||||
export const parse_expression_at = (source: string, index: number) => Parser.parseExpressionAt(source, index, {
|
||||
ecmaVersion: 9,
|
||||
// @ts-ignore TODO pending release of fixed types
|
||||
ecmaVersion: 11,
|
||||
preserveParens: true
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue