mirror of https://github.com/sveltejs/svelte
Merge branch 'master' of https://github.com/sveltejs/svelte into multi-class-comma
Marcelo Junior
6 years ago
commit
d35f316030
@ -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;
|
||||||
|
`);
|
||||||
|
};
|
||||||
@ -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.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();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
@ -0,0 +1,17 @@
|
|||||||
|
export default {
|
||||||
|
warnings: [{
|
||||||
|
code: "avoid-is",
|
||||||
|
message: "The 'is' attribute is not supported cross-browser and should be avoided",
|
||||||
|
pos: 97,
|
||||||
|
start: {
|
||||||
|
character: 97,
|
||||||
|
column: 8,
|
||||||
|
line: 7
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
character: 114,
|
||||||
|
column: 25,
|
||||||
|
line: 7
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
class FancyButton extends HTMLButtonElement {}
|
||||||
|
customElements.define('fancy-button', FancyButton, { extends: 'button' });
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<svelte:options tag="custom-element"/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import './fancy-button.js';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button is="fancy-button">click me</button>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import * as assert from 'assert';
|
||||||
|
import CustomElement from './main.svelte';
|
||||||
|
|
||||||
|
export default function (target) {
|
||||||
|
new CustomElement({
|
||||||
|
target
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.equal(target.innerHTML, '<custom-element></custom-element>');
|
||||||
|
|
||||||
|
const el = target.querySelector('custom-element');
|
||||||
|
const button = el.shadowRoot.querySelector('button');
|
||||||
|
|
||||||
|
assert.ok(button instanceof customElements.get('fancy-button'));
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
noop,
|
||||||
|
safe_not_equal,
|
||||||
|
set_style
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
var div;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
div = element("div");
|
||||||
|
set_style(div, "color", color);
|
||||||
|
},
|
||||||
|
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, div, anchor);
|
||||||
|
},
|
||||||
|
|
||||||
|
p: noop,
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) {
|
||||||
|
detach(div);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let color = 'red';
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, null, create_fragment, safe_not_equal, []);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
let color = 'red';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div style="color: {color}"></div>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
append,
|
||||||
|
attr,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
listen,
|
||||||
|
noop,
|
||||||
|
run_all,
|
||||||
|
safe_not_equal,
|
||||||
|
set_input_value,
|
||||||
|
space
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
var form, input, t, button, dispose;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
form = element("form");
|
||||||
|
input = element("input");
|
||||||
|
t = space();
|
||||||
|
button = element("button");
|
||||||
|
button.textContent = "Store";
|
||||||
|
attr(input, "type", "text");
|
||||||
|
input.required = true;
|
||||||
|
|
||||||
|
dispose = [
|
||||||
|
listen(input, "input", ctx.input_input_handler),
|
||||||
|
listen(form, "submit", ctx.handleSubmit)
|
||||||
|
];
|
||||||
|
},
|
||||||
|
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, form, anchor);
|
||||||
|
append(form, input);
|
||||||
|
|
||||||
|
set_input_value(input, ctx.test);
|
||||||
|
|
||||||
|
append(form, t);
|
||||||
|
append(form, button);
|
||||||
|
},
|
||||||
|
|
||||||
|
p(changed, ctx) {
|
||||||
|
if (changed.test && (input.value !== ctx.test)) set_input_value(input, ctx.test);
|
||||||
|
},
|
||||||
|
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) {
|
||||||
|
detach(form);
|
||||||
|
}
|
||||||
|
|
||||||
|
run_all(dispose);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let test = undefined;
|
||||||
|
|
||||||
|
function handleSubmit(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
console.log('value', test);
|
||||||
|
}
|
||||||
|
|
||||||
|
function input_input_handler() {
|
||||||
|
test = this.value;
|
||||||
|
$$invalidate('test', test);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { test, handleSubmit, input_input_handler };
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, []);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
let test = undefined;
|
||||||
|
|
||||||
|
function handleSubmit(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
console.log('value', test);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<form on:submit={handleSubmit}>
|
||||||
|
<input bind:value={test} type=text required>
|
||||||
|
<button>Store</button>
|
||||||
|
</form>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { sleep } from './sleep.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>loading...</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
return sleep(50).then(() => {
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>the answer is 42</p>
|
||||||
|
<p>count: 1</p>
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
import { sleep } from './sleep.js';
|
||||||
|
|
||||||
|
let count = 0;
|
||||||
|
|
||||||
|
const get_promise = () => {
|
||||||
|
return sleep(10).then(() => {
|
||||||
|
count += 1;
|
||||||
|
return 42;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await get_promise()}
|
||||||
|
<p>loading...</p>
|
||||||
|
{:then value}
|
||||||
|
<p>the answer is {value}</p>
|
||||||
|
<p>count: {count}</p>
|
||||||
|
{/await}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
export let stopped = false;
|
||||||
|
|
||||||
|
export const stop = () => stopped = true;
|
||||||
|
|
||||||
|
export const sleep = ms => new Promise(f => {
|
||||||
|
if (stopped) return;
|
||||||
|
setTimeout(() => {
|
||||||
|
if (stopped) return;
|
||||||
|
f();
|
||||||
|
}, ms);
|
||||||
|
});
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let thing;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{thing}</p>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<slot></slot>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>undefined</p>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
import Foo from './Foo.svelte';
|
||||||
|
import Bar from './Bar.svelte';
|
||||||
|
|
||||||
|
const things = { '1': 'one' };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Foo let:id>
|
||||||
|
<Bar thing={things[id]}/>
|
||||||
|
</Foo>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
const num = getContext('test');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>Context value: {num}</p>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p>...waiting</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
await component.promise;
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<p>Context value: 123</p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
import { setContext } from 'svelte';
|
||||||
|
import Child from './Child.svelte';
|
||||||
|
|
||||||
|
setContext('test', 123);
|
||||||
|
|
||||||
|
export let promise = Promise.resolve();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#await promise}
|
||||||
|
<p>...waiting</p>
|
||||||
|
{:then}
|
||||||
|
<Child />
|
||||||
|
{/await}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>remove</button>
|
||||||
|
<button>remove</button>
|
||||||
|
<button>remove</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const click = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
await target.querySelectorAll('button')[1].dispatchEvent(click);
|
||||||
|
await target.querySelectorAll('button')[1].dispatchEvent(click);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<button>remove</button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<script>
|
||||||
|
let list = ["a", "b", "c"];
|
||||||
|
|
||||||
|
const remove = index => {
|
||||||
|
list.splice(index, 1);
|
||||||
|
list = list;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each list as value, index (value)}
|
||||||
|
{#if value}
|
||||||
|
<button on:click="{e => remove(index)}">
|
||||||
|
remove
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
let count = 0;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
foo: 'potato',
|
||||||
|
fn: () => {
|
||||||
|
count += 1;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `<p>potato</p>`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
assert.equal(count, 1);
|
||||||
|
|
||||||
|
component.foo = 'soup';
|
||||||
|
assert.equal(count, 1);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<p>soup</p>`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<script>
|
||||||
|
export let fn;
|
||||||
|
export let foo;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if fn()}
|
||||||
|
<p>{foo}</p>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
let a = true;
|
||||||
|
let count_a = 0;
|
||||||
|
let count_b = 0;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
foo: 'potato',
|
||||||
|
fn: () => {
|
||||||
|
count_a += 1;
|
||||||
|
return a;
|
||||||
|
},
|
||||||
|
other_fn: () => {
|
||||||
|
count_b += 1;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `<p>potato</p>`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
assert.equal(count_a, 1);
|
||||||
|
assert.equal(count_b, 0);
|
||||||
|
|
||||||
|
a = false;
|
||||||
|
component.foo = 'soup';
|
||||||
|
assert.equal(count_a, 2);
|
||||||
|
assert.equal(count_b, 1);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<p>SOUP</p>`);
|
||||||
|
|
||||||
|
component.foo = 'salad';
|
||||||
|
assert.equal(count_a, 3);
|
||||||
|
assert.equal(count_b, 1);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<p>SALAD</p>`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
export let fn;
|
||||||
|
export let other_fn;
|
||||||
|
export let foo;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if fn(foo)}
|
||||||
|
<p>{foo}</p>
|
||||||
|
{:else if other_fn()}
|
||||||
|
<p>{foo.toUpperCase()}</p>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p class="svelte-y94hdy" style="color: red !important; font-size: 20px !important; opacity: 1;">red</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target, window }) {
|
||||||
|
const p = target.querySelector('p');
|
||||||
|
|
||||||
|
let styles = window.getComputedStyle(p);
|
||||||
|
assert.equal(styles.color, 'red');
|
||||||
|
assert.equal(styles.fontSize, '20px');
|
||||||
|
|
||||||
|
component.color = 'green';
|
||||||
|
|
||||||
|
styles = window.getComputedStyle(p);
|
||||||
|
assert.equal(styles.color, 'green');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let color = `red`;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p style="color: {color} !important; font-size: 20px !important; opacity: 1;">{color}</p>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
color: blue !important;
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<p style="opacity: 0.5; color: red">color: red</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target, window }) {
|
||||||
|
const p = target.querySelector('p');
|
||||||
|
|
||||||
|
let styles = window.getComputedStyle(p);
|
||||||
|
assert.equal(styles.opacity, '0.5');
|
||||||
|
assert.equal(styles.color, 'red');
|
||||||
|
|
||||||
|
component.styles = 'font-size: 20px';
|
||||||
|
|
||||||
|
styles = window.getComputedStyle(p);
|
||||||
|
assert.equal(styles.opacity, '0.5');
|
||||||
|
assert.equal(styles.color, '');
|
||||||
|
assert.equal(styles.fontSize, '20px');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let styles = `color: red`;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p style="opacity: 0.5; {styles}">{styles}</p>
|
||||||
Loading…
Reference in new issue