Thank you. We will bombard your inbox and sell your personal details.
12 | {:else}
13 | You must opt in to continue. If you're not paying, you're the product.
14 | {/if}
15 |
16 |
49 | You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
50 | of {join(flavours)}
51 |
52 | {/if}
53 |
--------------------------------------------------------------------------------
/public/examples/05-bindings/03-group-inputs/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Group inputs"
3 | }
--------------------------------------------------------------------------------
/public/examples/05-bindings/04-textarea-inputs/App.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
9 |
10 |
50 | You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
51 | of {join(flavours)}
52 |
53 | {/if}
54 |
--------------------------------------------------------------------------------
/public/examples/05-bindings/06-multiple-select-bindings/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Select multiple"
3 | }
--------------------------------------------------------------------------------
/public/examples/05-bindings/07-each-block-bindings/App.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 |
24 |
25 |
--------------------------------------------------------------------------------
/public/examples/05-bindings/11-component-bindings/Keypad.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
25 |
26 |
27 | 1
28 | 2
29 | 3
30 | 4
31 | 5
32 | 6
33 | 7
34 | 8
35 | 9
36 |
37 | clear
38 | 0
39 | submit
40 |
--------------------------------------------------------------------------------
/public/examples/05-bindings/11-component-bindings/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Component bindings"
3 | }
--------------------------------------------------------------------------------
/public/examples/05-bindings/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Bindings"
3 | }
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/00-onmount/App.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
25 |
26 | Photo album
27 |
28 |
29 | {#each photos as photo}
30 |
31 |
32 | {photo.title}
33 |
34 | {:else}
35 |
36 |
loading...
37 | {/each}
38 |
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/00-onmount/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "onMount"
3 | }
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/01-ondestroy/App.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | The page has been open for
10 | {seconds} {seconds === 1 ? 'second' : 'seconds'}
11 |
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/01-ondestroy/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "onDestroy"
3 | }
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/01-ondestroy/utils.js:
--------------------------------------------------------------------------------
1 | import { onDestroy } from 'svelte';
2 |
3 | export function onInterval(callback, milliseconds) {
4 | const interval = setInterval(callback, milliseconds);
5 |
6 | onDestroy(() => {
7 | clearInterval(interval);
8 | });
9 | }
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/02-update/App.svelte:
--------------------------------------------------------------------------------
1 |
53 |
54 |
93 |
94 |
95 |
Eliza
96 |
97 |
98 | {#each comments as comment}
99 |
102 | {/each}
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/02-update/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "beforeUpdate and afterUpdate"
3 | }
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/03-tick/App.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 |
36 |
37 |
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/03-tick/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "tick"
3 | }
--------------------------------------------------------------------------------
/public/examples/06-lifecycle/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Lifecycle"
3 | }
--------------------------------------------------------------------------------
/public/examples/07-stores/00-writable-stores/App.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 | The count is {count_value}
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/public/examples/07-stores/00-writable-stores/Decrementer.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | -
11 |
--------------------------------------------------------------------------------
/public/examples/07-stores/00-writable-stores/Incrementer.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | +
11 |
--------------------------------------------------------------------------------
/public/examples/07-stores/00-writable-stores/Resetter.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | reset
11 |
--------------------------------------------------------------------------------
/public/examples/07-stores/00-writable-stores/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Writable stores"
3 | }
--------------------------------------------------------------------------------
/public/examples/07-stores/00-writable-stores/stores.js:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 |
3 | export const count = writable(0);
--------------------------------------------------------------------------------
/public/examples/07-stores/01-auto-subscriptions/App.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | The count is {$count}
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/public/examples/07-stores/01-auto-subscriptions/Decrementer.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | -
11 |
--------------------------------------------------------------------------------
/public/examples/07-stores/01-auto-subscriptions/Incrementer.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | +
11 |
--------------------------------------------------------------------------------
/public/examples/07-stores/01-auto-subscriptions/Resetter.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | reset
11 |
--------------------------------------------------------------------------------
/public/examples/07-stores/01-auto-subscriptions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Auto-subscriptions"
3 | }
--------------------------------------------------------------------------------
/public/examples/07-stores/01-auto-subscriptions/stores.js:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 |
3 | export const count = writable(0);
--------------------------------------------------------------------------------
/public/examples/07-stores/02-readable-stores/App.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 | The time is {formatter.format($time)}
--------------------------------------------------------------------------------
/public/examples/07-stores/02-readable-stores/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Readable stores"
3 | }
--------------------------------------------------------------------------------
/public/examples/07-stores/02-readable-stores/stores.js:
--------------------------------------------------------------------------------
1 | import { readable } from 'svelte/store';
2 |
3 | export const time = readable(new Date(), function start(set) {
4 | const interval = setInterval(() => {
5 | set(new Date());
6 | }, 1000);
7 |
8 | return function stop() {
9 | clearInterval(interval);
10 | };
11 | });
--------------------------------------------------------------------------------
/public/examples/07-stores/03-derived-stores/App.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 | The time is {formatter.format($time)}
13 |
14 |
15 | This page has been open for
16 | {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
17 |
--------------------------------------------------------------------------------
/public/examples/07-stores/03-derived-stores/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Derived stores"
3 | }
--------------------------------------------------------------------------------
/public/examples/07-stores/03-derived-stores/stores.js:
--------------------------------------------------------------------------------
1 | import { readable, derived } from 'svelte/store';
2 |
3 | export const time = readable(new Date(), function start(set) {
4 | const interval = setInterval(() => {
5 | set(new Date());
6 | }, 1000);
7 |
8 | return function stop() {
9 | clearInterval(interval);
10 | };
11 | });
12 |
13 | const start = new Date();
14 |
15 | export const elapsed = derived(
16 | time,
17 | $time => Math.round(($time - start) / 1000)
18 | );
--------------------------------------------------------------------------------
/public/examples/07-stores/04-custom-stores/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | The count is {$count}
6 |
7 | +
8 | -
9 | reset
--------------------------------------------------------------------------------
/public/examples/07-stores/04-custom-stores/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Custom stores"
3 | }
--------------------------------------------------------------------------------
/public/examples/07-stores/04-custom-stores/stores.js:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 |
3 | function createCount() {
4 | const { subscribe, set, update } = writable(0);
5 |
6 | return {
7 | subscribe,
8 | increment: () => update(n => n + 1),
9 | decrement: () => update(n => n - 1),
10 | reset: () => set(0)
11 | };
12 | }
13 |
14 | export const count = createCount();
--------------------------------------------------------------------------------
/public/examples/07-stores/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Stores"
3 | }
--------------------------------------------------------------------------------
/public/examples/08-motion/00-tweened/App.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
17 |
18 |
19 |
20 |
21 | 0%
22 |
23 |
24 |
25 | 25%
26 |
27 |
28 |
29 | 50%
30 |
31 |
32 |
33 | 75%
34 |
35 |
36 |
37 | 100%
38 |
--------------------------------------------------------------------------------
/public/examples/08-motion/00-tweened/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Tweened"
3 | }
--------------------------------------------------------------------------------
/public/examples/08-motion/01-spring/App.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
16 |
17 |
18 |
19 | stiffness ({coords.stiffness})
20 |
21 |
22 |
23 |
24 | damping ({coords.damping})
25 |
26 |
27 |
28 |
29 |
34 |
35 |
--------------------------------------------------------------------------------
/public/examples/08-motion/01-spring/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Spring"
3 | }
--------------------------------------------------------------------------------
/public/examples/08-motion/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Motion"
3 | }
--------------------------------------------------------------------------------
/public/examples/09-transitions/00-transition/App.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | visible
9 |
10 |
11 | {#if visible}
12 |
13 | Fades in and out
14 |
15 | {/if}
--------------------------------------------------------------------------------
/public/examples/09-transitions/00-transition/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "The transition directive"
3 | }
--------------------------------------------------------------------------------
/public/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | visible
9 |
10 |
11 | {#if visible}
12 |
13 | Flies in and out
14 |
15 | {/if}
--------------------------------------------------------------------------------
/public/examples/09-transitions/01-adding-parameters-to-transitions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Adding parameters"
3 | }
--------------------------------------------------------------------------------
/public/examples/09-transitions/02-in-and-out/App.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | visible
9 |
10 |
11 | {#if visible}
12 |
13 | Flies in, fades out
14 |
15 | {/if}
--------------------------------------------------------------------------------
/public/examples/09-transitions/02-in-and-out/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "In and out"
3 | }
--------------------------------------------------------------------------------
/public/examples/09-transitions/03-custom-css-transitions/App.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
39 |
40 |
41 |
42 | visible
43 |
44 |
45 | {#if visible}
46 |
47 | transitions!
48 |
49 | {/if}
--------------------------------------------------------------------------------
/public/examples/09-transitions/03-custom-css-transitions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Custom CSS transitions"
3 | }
--------------------------------------------------------------------------------
/public/examples/09-transitions/04-custom-js-transitions/App.svelte:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 | visible
30 |
31 |
32 | {#if visible}
33 |
34 | The quick brown fox jumps over the lazy dog
35 |
36 | {/if}
--------------------------------------------------------------------------------
/public/examples/09-transitions/04-custom-js-transitions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Custom JS transitions"
3 | }
--------------------------------------------------------------------------------
/public/examples/09-transitions/05-transition-events/App.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | status: {status}
9 |
10 |
11 |
12 | visible
13 |
14 |
15 | {#if visible}
16 |
23 | Flies in and out
24 |
25 | {/if}
--------------------------------------------------------------------------------
/public/examples/09-transitions/05-transition-events/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Transition events"
3 | }
--------------------------------------------------------------------------------
/public/examples/09-transitions/06-deferred-transitions/crossfade.js:
--------------------------------------------------------------------------------
1 | import { quintOut } from 'svelte/easing';
2 |
3 | export default function crossfade({ send, receive, fallback }) {
4 | let requested = new Map();
5 | let provided = new Map();
6 |
7 | function crossfade(from, node) {
8 | const to = node.getBoundingClientRect();
9 | const dx = from.left - to.left;
10 | const dy = from.top - to.top;
11 |
12 | const style = getComputedStyle(node);
13 | const transform = style.transform === 'none' ? '' : style.transform;
14 |
15 | return {
16 | duration: 400,
17 | easing: quintOut,
18 | css: (t, u) => `
19 | opacity: ${t};
20 | transform: ${transform} translate(${u * dx}px,${u * dy}px);
21 | `
22 | };
23 | }
24 |
25 | return {
26 | send(node, params) {
27 | provided.set(params.key, {
28 | rect: node.getBoundingClientRect()
29 | });
30 |
31 | return () => {
32 | if (requested.has(params.key)) {
33 | const { rect } = requested.get(params.key);
34 | requested.delete(params.key);
35 |
36 | return crossfade(rect, node);
37 | }
38 |
39 | // if the node is disappearing altogether
40 | // (i.e. wasn't claimed by the other list)
41 | // then we need to supply an outro
42 | provided.delete(params.key);
43 | return fallback(node, params);
44 | };
45 | },
46 |
47 | receive(node, params) {
48 | requested.set(params.key, {
49 | rect: node.getBoundingClientRect()
50 | });
51 |
52 | return () => {
53 | if (provided.has(params.key)) {
54 | const { rect } = provided.get(params.key);
55 | provided.delete(params.key);
56 |
57 | return crossfade(rect, node);
58 | }
59 |
60 | requested.delete(params.key);
61 | return fallback(node, params);
62 | };
63 | }
64 | };
65 | }
--------------------------------------------------------------------------------
/public/examples/09-transitions/06-deferred-transitions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Deferred transitions"
3 | }
--------------------------------------------------------------------------------
/public/examples/09-transitions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Transitions"
3 | }
--------------------------------------------------------------------------------
/public/examples/10-animations/00-animate/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "The animate directive"
3 | }
--------------------------------------------------------------------------------
/public/examples/10-animations/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Animations"
3 | }
--------------------------------------------------------------------------------
/public/examples/11-svg/01-clock/App.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
60 |
61 |
62 |
63 |
64 |
65 | {#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
66 |
72 |
73 | {#each [1, 2, 3, 4] as offset}
74 |
80 | {/each}
81 | {/each}
82 |
83 |
84 |
90 |
91 |
92 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/public/examples/11-svg/01-clock/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Clock"
3 | }
--------------------------------------------------------------------------------
/public/examples/11-svg/02-bar-chart/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Bar chart"
3 | }
--------------------------------------------------------------------------------
/public/examples/11-svg/03-area-chart/data.js:
--------------------------------------------------------------------------------
1 | export default [
2 | { x: 1979, y: 7.19 },
3 | { x: 1980, y: 7.83 },
4 | { x: 1981, y: 7.24 },
5 | { x: 1982, y: 7.44 },
6 | { x: 1983, y: 7.51 },
7 | { x: 1984, y: 7.10 },
8 | { x: 1985, y: 6.91 },
9 | { x: 1986, y: 7.53 },
10 | { x: 1987, y: 7.47 },
11 | { x: 1988, y: 7.48 },
12 | { x: 1989, y: 7.03 },
13 | { x: 1990, y: 6.23 },
14 | { x: 1991, y: 6.54 },
15 | { x: 1992, y: 7.54 },
16 | { x: 1993, y: 6.50 },
17 | { x: 1994, y: 7.18 },
18 | { x: 1995, y: 6.12 },
19 | { x: 1996, y: 7.87 },
20 | { x: 1997, y: 6.73 },
21 | { x: 1998, y: 6.55 },
22 | { x: 1999, y: 6.23 },
23 | { x: 2000, y: 6.31 },
24 | { x: 2001, y: 6.74 },
25 | { x: 2002, y: 5.95 },
26 | { x: 2003, y: 6.13 },
27 | { x: 2004, y: 6.04 },
28 | { x: 2005, y: 5.56 },
29 | { x: 2006, y: 5.91 },
30 | { x: 2007, y: 4.29 },
31 | { x: 2008, y: 4.72 },
32 | { x: 2009, y: 5.38 },
33 | { x: 2010, y: 4.92 },
34 | { x: 2011, y: 4.61 },
35 | { x: 2012, y: 3.62 },
36 | { x: 2013, y: 5.35 },
37 | { x: 2014, y: 5.28 },
38 | { x: 2015, y: 4.63 },
39 | { x: 2016, y: 4.72 }
40 | ];
--------------------------------------------------------------------------------
/public/examples/11-svg/03-area-chart/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Area chart"
3 | }
--------------------------------------------------------------------------------
/public/examples/11-svg/04-scatterplot/App.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
16 |
17 |
18 |
Anscombe's quartet
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/public/examples/11-svg/04-scatterplot/Scatterplot.svelte:
--------------------------------------------------------------------------------
1 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | {#each yTicks as tick}
42 |
43 |
44 | {tick}
45 |
46 | {/each}
47 |
48 |
49 |
50 |
51 | {#each xTicks as tick}
52 |
53 |
54 | {tick}
55 |
56 | {/each}
57 |
58 |
59 |
60 | {#each points as point}
61 |
62 | {/each}
63 |
64 |
65 |
96 |
--------------------------------------------------------------------------------
/public/examples/11-svg/04-scatterplot/data.js:
--------------------------------------------------------------------------------
1 | export default {
2 | a: [
3 | { x: 10, y: 8.04 },
4 | { x: 8, y: 6.95 },
5 | { x: 13, y: 7.58 },
6 | { x: 9, y: 8.81 },
7 | { x: 11, y: 8.33 },
8 | { x: 14, y: 9.96 },
9 | { x: 6, y: 7.24 },
10 | { x: 4, y: 4.26 },
11 | { x: 12, y: 10.84 },
12 | { x: 7, y: 4.82 },
13 | { x: 5, y: 5.68 }
14 | ],
15 | b: [
16 | { x: 10, y: 9.14 },
17 | { x: 8, y: 8.14 },
18 | { x: 13, y: 8.74 },
19 | { x: 9, y: 8.77 },
20 | { x: 11, y: 9.26 },
21 | { x: 14, y: 8.1 },
22 | { x: 6, y: 6.13 },
23 | { x: 4, y: 3.1 },
24 | { x: 12, y: 9.13 },
25 | { x: 7, y: 7.26 },
26 | { x: 5, y: 4.74 }
27 | ],
28 | c: [
29 | { x: 10, y: 7.46 },
30 | { x: 8, y: 6.77 },
31 | { x: 13, y: 12.74 },
32 | { x: 9, y: 7.11 },
33 | { x: 11, y: 7.81 },
34 | { x: 14, y: 8.84 },
35 | { x: 6, y: 6.08 },
36 | { x: 4, y: 5.39 },
37 | { x: 12, y: 8.15 },
38 | { x: 7, y: 6.42 },
39 | { x: 5, y: 5.73 }
40 | ],
41 | d: [
42 | { x: 8, y: 6.58 },
43 | { x: 8, y: 5.76 },
44 | { x: 8, y: 7.71 },
45 | { x: 8, y: 8.84 },
46 | { x: 8, y: 8.47 },
47 | { x: 8, y: 7.04 },
48 | { x: 8, y: 5.25 },
49 | { x: 19, y: 12.5 },
50 | { x: 8, y: 5.56 },
51 | { x: 8, y: 7.91 },
52 | { x: 8, y: 6.89 }
53 | ]
54 | };
--------------------------------------------------------------------------------
/public/examples/11-svg/04-scatterplot/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Scatterplot"
3 | }
--------------------------------------------------------------------------------
/public/examples/11-svg/05-svg-transitions/App.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
43 |
44 | {#if visible}
45 |
46 |
47 |
52 |
57 |
58 |
59 |
60 |
61 | {#each 'SVELTE' as char, i}
62 | {char}
65 | {/each}
66 |
67 | {/if}
68 |
69 |
70 |
71 | toggle me
72 |
73 |
74 |
--------------------------------------------------------------------------------
/public/examples/11-svg/05-svg-transitions/custom-transitions.js:
--------------------------------------------------------------------------------
1 | import { cubicOut } from 'svelte/easing';
2 |
3 | export function expand(node, params) {
4 | const {
5 | delay = 0,
6 | duration = 400,
7 | easing = cubicOut
8 | } = params;
9 |
10 | const w = parseFloat(getComputedStyle(node).strokeWidth);
11 |
12 | return {
13 | delay,
14 | duration,
15 | easing,
16 | css: t => `opacity: ${t}; stroke-width: ${t * w}`
17 | };
18 | }
--------------------------------------------------------------------------------
/public/examples/11-svg/05-svg-transitions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "SVG transitions"
3 | }
--------------------------------------------------------------------------------
/public/examples/11-svg/05-svg-transitions/shape.js:
--------------------------------------------------------------------------------
1 | export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`;
2 | export const outer = `M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`;
--------------------------------------------------------------------------------
/public/examples/11-svg/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "SVG"
3 | }
--------------------------------------------------------------------------------
/public/examples/12-actions/00-actions/App.svelte:
--------------------------------------------------------------------------------
1 |
27 |
28 |
42 |
43 |
--------------------------------------------------------------------------------
/public/examples/12-actions/00-actions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "The use directive"
3 | }
--------------------------------------------------------------------------------
/public/examples/12-actions/00-actions/pannable.js:
--------------------------------------------------------------------------------
1 | export function pannable(node) {
2 | let x;
3 | let y;
4 |
5 | function handleMousedown(event) {
6 | x = event.clientX;
7 | y = event.clientY;
8 |
9 | node.dispatchEvent(new CustomEvent('panstart', {
10 | detail: { x, y }
11 | }));
12 |
13 | window.addEventListener('mousemove', handleMousemove);
14 | window.addEventListener('mouseup', handleMouseup);
15 | }
16 |
17 | function handleMousemove(event) {
18 | const dx = event.clientX - x;
19 | const dy = event.clientY - y;
20 | x = event.clientX;
21 | y = event.clientY;
22 |
23 | node.dispatchEvent(new CustomEvent('panmove', {
24 | detail: { x, y, dx, dy }
25 | }));
26 | }
27 |
28 | function handleMouseup(event) {
29 | x = event.clientX;
30 | y = event.clientY;
31 |
32 | node.dispatchEvent(new CustomEvent('panend', {
33 | detail: { x, y }
34 | }));
35 |
36 | window.removeEventListener('mousemove', handleMousemove);
37 | window.removeEventListener('mouseup', handleMouseup);
38 | }
39 |
40 | node.addEventListener('mousedown', handleMousedown);
41 |
42 | return {
43 | destroy() {
44 | node.removeEventListener('mousedown', handleMousedown);
45 | }
46 | };
47 | }
--------------------------------------------------------------------------------
/public/examples/12-actions/01-adding-parameters-to-actions/App.svelte:
--------------------------------------------------------------------------------
1 |
67 |
68 |
69 | {language}
70 |
--------------------------------------------------------------------------------
/public/examples/12-actions/01-adding-parameters-to-actions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Adding parameters"
3 | }
--------------------------------------------------------------------------------
/public/examples/12-actions/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Actions"
3 | }
--------------------------------------------------------------------------------
/public/examples/13-classes/00-classes/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
15 |
16 | foo
20 |
21 | bar
25 |
26 | baz
--------------------------------------------------------------------------------
/public/examples/13-classes/00-classes/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "The class directive"
3 | }
--------------------------------------------------------------------------------
/public/examples/13-classes/01-class-shorthand/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
10 |
11 |
12 |
13 | big
14 |
15 |
16 |
17 | some {big ? 'big' : 'small'} text
18 |
--------------------------------------------------------------------------------
/public/examples/13-classes/01-class-shorthand/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Shorthand class directive"
3 | }
--------------------------------------------------------------------------------
/public/examples/13-classes/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Classes"
3 | }
--------------------------------------------------------------------------------
/public/examples/14-composition/00-slots/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Hello!
7 | This is a box. It can contain anything.
8 |
--------------------------------------------------------------------------------
/public/examples/14-composition/00-slots/Box.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/public/examples/14-composition/00-slots/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Slots"
3 | }
--------------------------------------------------------------------------------
/public/examples/14-composition/01-slot-fallbacks/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Hello!
7 | This is a box. It can contain anything.
8 |
9 |
10 |
--------------------------------------------------------------------------------
/public/examples/14-composition/01-slot-fallbacks/Box.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 | no content was provided
15 |
16 |
--------------------------------------------------------------------------------
/public/examples/14-composition/01-slot-fallbacks/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Slot fallbacks"
3 | }
--------------------------------------------------------------------------------
/public/examples/14-composition/02-named-slots/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | P. Sherman
8 |
9 |
10 |
11 | 42 Wallaby Way
12 | Sydney
13 |
14 |
--------------------------------------------------------------------------------
/public/examples/14-composition/02-named-slots/ContactCard.svelte:
--------------------------------------------------------------------------------
1 |
28 |
29 |
30 |
31 |
32 | Unknown name
33 |
34 |
35 |
36 |
37 |
38 | Unknown address
39 |
40 |
41 |
42 |
43 |
44 | Unknown email
45 |
46 |
47 |
--------------------------------------------------------------------------------
/public/examples/14-composition/02-named-slots/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Named slots"
3 | }
--------------------------------------------------------------------------------
/public/examples/14-composition/03-slot-props/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
17 |
18 |
19 |
20 | {#if active}
21 |
I am being hovered upon.
22 | {:else}
23 |
Hover over me!
24 | {/if}
25 |
26 |
27 |
28 |
29 |
30 | {#if active}
31 |
I am being hovered upon.
32 | {:else}
33 |
Hover over me!
34 | {/if}
35 |
36 |
37 |
38 |
39 |
40 | {#if active}
41 |
I am being hovered upon.
42 | {:else}
43 |
Hover over me!
44 | {/if}
45 |
46 |
--------------------------------------------------------------------------------
/public/examples/14-composition/03-slot-props/Hoverable.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/public/examples/14-composition/03-slot-props/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Slot props"
3 | }
--------------------------------------------------------------------------------
/public/examples/14-composition/04-modal/App.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | show modal
9 |
10 |
11 | {#if showModal}
12 |
13 |
14 | modal
15 | adjective mod·al \ˈmō-dəl\
16 |
17 |
18 |
19 | of or relating to modality in logic
20 | containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy
21 | of or relating to a musical mode
22 | of or relating to structure as opposed to substance
23 | of, relating to, or constituting a grammatical form or category characteristically indicating predication
24 | of or relating to a statistical mode
25 |
26 |
27 | merriam-webster.com
28 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/public/examples/14-composition/04-modal/Modal.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | close modal
45 |
46 |
--------------------------------------------------------------------------------
/public/examples/14-composition/04-modal/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Modal"
3 | }
--------------------------------------------------------------------------------
/public/examples/14-composition/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Component composition"
3 | }
--------------------------------------------------------------------------------
/public/examples/15-context/00-context-api/App.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/examples/15-context/00-context-api/Map.svelte:
--------------------------------------------------------------------------------
1 |
38 |
39 |
45 |
46 |
47 | {#if map}
48 |
49 | {/if}
50 |
--------------------------------------------------------------------------------
/public/examples/15-context/00-context-api/MapMarker.svelte:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/examples/15-context/00-context-api/mapbox.js:
--------------------------------------------------------------------------------
1 | import mapbox from 'mapbox-gl';
2 |
3 | // https://docs.mapbox.com/help/glossary/access-token/
4 | mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
5 |
6 | const key = {};
7 |
8 | export { mapbox, key };
--------------------------------------------------------------------------------
/public/examples/15-context/00-context-api/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "setContext and getContext"
3 | }
--------------------------------------------------------------------------------
/public/examples/15-context/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Context API"
3 | }
--------------------------------------------------------------------------------
/public/examples/16-special-elements/00-svelte-self/App.svelte:
--------------------------------------------------------------------------------
1 |
40 |
41 |
--------------------------------------------------------------------------------
/public/examples/16-special-elements/00-svelte-self/File.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
13 |
14 | {name}
--------------------------------------------------------------------------------
/public/examples/16-special-elements/00-svelte-self/Folder.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
37 |
38 | {name}
39 |
40 | {#if expanded}
41 |
42 | {#each files as file}
43 |
44 | {#if file.type === 'folder'}
45 |
46 | {:else}
47 |
48 | {/if}
49 |
50 | {/each}
51 |
52 | {/if}
--------------------------------------------------------------------------------
/public/examples/16-special-elements/00-svelte-self/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": ""
3 | }
--------------------------------------------------------------------------------
/public/examples/16-special-elements/01-svelte-component/App.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 | {#each options as option}
17 | {option.color}
18 | {/each}
19 |
20 |
21 |
--------------------------------------------------------------------------------
/public/examples/16-special-elements/01-svelte-component/BlueThing.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | blue thing
--------------------------------------------------------------------------------
/public/examples/16-special-elements/01-svelte-component/GreenThing.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | green thing
--------------------------------------------------------------------------------
/public/examples/16-special-elements/01-svelte-component/RedThing.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | red thing
--------------------------------------------------------------------------------
/public/examples/16-special-elements/01-svelte-component/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": ""
3 | }
--------------------------------------------------------------------------------
/public/examples/16-special-elements/02-svelte-window/App.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
32 |
33 |
34 |
35 |
36 | {#if key}
37 |
{key === ' ' ? 'Space' : key}
38 |
{keyCode}
39 | {:else}
40 |
Focus this window and press any key
41 | {/if}
42 |
--------------------------------------------------------------------------------
/public/examples/16-special-elements/02-svelte-window/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": ""
3 | }
--------------------------------------------------------------------------------
/public/examples/16-special-elements/03-svelte-window-bindings/App.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 | {#each [0, 1, 2, 3, 4, 5, 6, 7, 8] as layer}
11 |
16 | {/each}
17 |
18 |
19 |
20 |
21 | scroll down
22 |
23 |
24 |
25 | You have scrolled {y} pixels
26 |
27 |
28 |
29 |
89 |
--------------------------------------------------------------------------------
/public/examples/16-special-elements/03-svelte-window-bindings/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": " bindings"
3 | }
--------------------------------------------------------------------------------
/public/examples/16-special-elements/04-svelte-body/App.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
26 |
27 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/public/examples/16-special-elements/04-svelte-body/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": ""
3 | }
--------------------------------------------------------------------------------
/public/examples/16-special-elements/05-svelte-head/App.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Hello world!
--------------------------------------------------------------------------------
/public/examples/16-special-elements/05-svelte-head/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": ""
3 | }
--------------------------------------------------------------------------------
/public/examples/16-special-elements/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Special elements"
3 | }
--------------------------------------------------------------------------------
/public/examples/17-module-context/01-module-exports/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | stop all audio
7 |
8 |
9 |
10 |
16 |
17 |
18 |
24 |
25 |
26 |
32 |
33 |
34 |
40 |
41 |
42 |
48 |
--------------------------------------------------------------------------------
/public/examples/17-module-context/01-module-exports/AudioPlayer.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
33 |
34 |
40 |
41 |
42 | {title}
43 | {composer} / performed by {performer}
44 |
45 |
52 |
--------------------------------------------------------------------------------
/public/examples/17-module-context/01-module-exports/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Named exports"
3 | }
--------------------------------------------------------------------------------
/public/examples/17-module-context/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Module context"
3 | }
--------------------------------------------------------------------------------
/public/examples/18-debugging/00-debug/App.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 | {@debug user}
12 |
13 | Hello {user.firstname}!
--------------------------------------------------------------------------------
/public/examples/18-debugging/00-debug/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "The @debug tag"
3 | }
--------------------------------------------------------------------------------
/public/examples/18-debugging/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Debugging"
3 | }
--------------------------------------------------------------------------------
/public/examples/19-7guis/01-7guis-counter/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | count
--------------------------------------------------------------------------------
/public/examples/19-7guis/01-7guis-counter/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Counter"
3 | }
--------------------------------------------------------------------------------
/public/examples/19-7guis/02-7guis-temperature/App.svelte:
--------------------------------------------------------------------------------
1 |
2 | °c =
3 | °f
4 |
5 |
10 |
11 |
25 |
--------------------------------------------------------------------------------
/public/examples/19-7guis/02-7guis-temperature/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Temperature Converter"
3 | }
--------------------------------------------------------------------------------
/public/examples/19-7guis/03-7guis-flight-booker/App.svelte:
--------------------------------------------------------------------------------
1 |
38 |
39 |
46 |
47 |
48 |
49 | one-way flight
50 | return flight
51 |
52 |
53 |
54 |
55 |
56 | book
60 |
--------------------------------------------------------------------------------
/public/examples/19-7guis/03-7guis-flight-booker/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Flight booker"
3 | }
--------------------------------------------------------------------------------
/public/examples/19-7guis/04-7guis-timer/App.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
28 |
29 |
30 | elapsed time:
31 |
32 |
33 |
34 | {(elapsed / 1000).toFixed(1)}s
35 |
36 |
37 | duration:
38 |
39 |
40 |
41 | reset
--------------------------------------------------------------------------------
/public/examples/19-7guis/04-7guis-timer/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Timer"
3 | }
--------------------------------------------------------------------------------
/public/examples/19-7guis/05-7guis-crud/App.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
59 |
60 |
81 |
82 |
83 |
84 |
85 | {#each filteredPeople as person, i}
86 | {person.last}, {person.first}
87 | {/each}
88 |
89 |
90 |
91 |
92 |
93 |
94 | create
95 | update
96 | delete
97 |
98 |
--------------------------------------------------------------------------------
/public/examples/19-7guis/05-7guis-crud/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "CRUD"
3 | }
--------------------------------------------------------------------------------
/public/examples/19-7guis/06-7guis-circles/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Circle Drawer"
3 | }
--------------------------------------------------------------------------------
/public/examples/19-7guis/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "7GUIs"
3 | }
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/01-hacker-news/App.svelte:
--------------------------------------------------------------------------------
1 |
28 |
29 |
48 |
49 |
50 |
51 |
52 | {#if item}
53 |
54 | {:else if page}
55 |
56 | {/if}
57 |
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/01-hacker-news/Comment.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
21 |
22 |
23 | {comment.user} {comment.time_ago}
24 |
25 | {@html comment.content}
26 |
27 |
28 | {#each comment.comments as child}
29 |
30 | {/each}
31 |
32 |
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/01-hacker-news/Item.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
23 |
24 | « back
25 |
26 |
27 |
28 | {item.title}
29 | {item.domain}
30 |
31 |
32 | submitted by {item.user} {item.time_ago}
33 |
34 |
35 |
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/01-hacker-news/List.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
37 |
38 | {#if items}
39 | {#each items as item, i}
40 |
41 | {/each}
42 |
43 | page {page + 1}
44 | {:else}
45 | loading...
46 | {/if}
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/01-hacker-news/Summary.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
33 |
34 |
35 | {i + offset + 1}
36 |
37 | {comment_text()} by {item.user} {item.time_ago}
38 |
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/01-hacker-news/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Hacker News"
3 | }
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/02-immutable-data/App.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
29 |
30 | Immutable
31 | {#each todos as todo}
32 |
33 | {/each}
34 |
35 | Mutable
36 | {#each todos as todo}
37 |
38 | {/each}
39 |
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
17 |
23 |
24 |
26 |
27 | {todo.done ? '👍': ''} {todo.text}
28 |
29 |
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
21 |
22 |
24 |
25 | {todo.done ? '👍': ''} {todo.text}
26 |
27 |
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/02-immutable-data/flash.js:
--------------------------------------------------------------------------------
1 | export default function flash(element) {
2 | requestAnimationFrame(() => {
3 | element.style.transition = 'none';
4 | element.style.color = 'rgba(255,62,0,1)';
5 | element.style.backgroundColor = 'rgba(255,62,0,0.2)';
6 |
7 | setTimeout(() => {
8 | element.style.transition = 'color 1s, background 1s';
9 | element.style.color = '';
10 | element.style.backgroundColor = '';
11 | });
12 | });
13 | }
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/02-immutable-data/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Immutable data"
3 | }
--------------------------------------------------------------------------------
/public/examples/20-miscellaneous/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Miscellaneous"
3 | }
--------------------------------------------------------------------------------
/public/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. I think you'll be surprised at some of your phrasing.
10 |
--------------------------------------------------------------------------------
/public/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
--------------------------------------------------------------------------------
/public/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "-"
3 | }
4 |
--------------------------------------------------------------------------------
/public/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js:
--------------------------------------------------------------------------------
1 | import emotion from 'emotion/dist/emotion.umd.min.js';
2 |
3 | const { css } = emotion;
4 |
5 | const brand = '#74D900';
6 |
7 | export const title = css`
8 | color: ${brand};
9 | font-size: 1em;
10 | white-space: nowrap;
11 | `;
12 |
13 | export const comicSans = css`
14 | font-family: 'Comic Sans MS';
15 | `;
16 |
17 | export const box = css`
18 | position: relative;
19 | display: inline-block;
20 | border: 2px solid ${brand};
21 | line-height: 1;
22 | padding: 4px;
23 | border-radius: 4px;
24 | `;
25 |
26 | export const link = css`
27 | color: inherit;
28 | font-weight: bold;
29 | text-decoration: none;
30 | border-bottom: 1px solid ${brand};
31 | &:hover {
32 | text-decoration: none;
33 | background: ${brand};
34 | }
35 | `;
36 |
--------------------------------------------------------------------------------
/public/examples/99-embeds/20190420-blog-write-less-code/App.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | {a} + {b} = {a + b}
--------------------------------------------------------------------------------
/public/examples/99-embeds/20190420-blog-write-less-code/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "-"
3 | }
4 |
--------------------------------------------------------------------------------
/public/examples/99-embeds/meta.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/public/examples/await-blocks.json:
--------------------------------------------------------------------------------
1 | {
2 | "relaxed": true,
3 | "uid": "hello-world",
4 | "name": "Hello world",
5 | "files": [
6 | {
7 | "name": "App.svelte",
8 | "source": "\n\nHello {name}! "
9 | }
10 | ],
11 | "owner": null
12 | }
--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/favicon-16x16.png
--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/favicon-32x32.png
--------------------------------------------------------------------------------
/public/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/favicon-96x96.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/favicon.ico
--------------------------------------------------------------------------------
/public/fonts/fira-mono/fira-mono-latin-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/fira-mono/fira-mono-latin-400.woff2
--------------------------------------------------------------------------------
/public/fonts/overpass/overpass-latin-100.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-100.woff2
--------------------------------------------------------------------------------
/public/fonts/overpass/overpass-latin-300.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-300.woff2
--------------------------------------------------------------------------------
/public/fonts/overpass/overpass-latin-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-400.woff2
--------------------------------------------------------------------------------
/public/fonts/overpass/overpass-latin-600.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-600.woff2
--------------------------------------------------------------------------------
/public/fonts/overpass/overpass-latin-700.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/overpass/overpass-latin-700.woff2
--------------------------------------------------------------------------------
/public/fonts/roboto/roboto-latin-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/roboto/roboto-latin-400.woff2
--------------------------------------------------------------------------------
/public/fonts/roboto/roboto-latin-400italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/roboto/roboto-latin-400italic.woff2
--------------------------------------------------------------------------------
/public/fonts/roboto/roboto-latin-500.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/roboto/roboto-latin-500.woff2
--------------------------------------------------------------------------------
/public/fonts/roboto/roboto-latin-500italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/fonts/roboto/roboto-latin-500italic.woff2
--------------------------------------------------------------------------------
/public/global.css:
--------------------------------------------------------------------------------
1 | :root{
2 | --blue: #007bff;
3 | --indigo: #6610f2;
4 | --purple: #6f42c1;
5 | --pink: #e83e8c;
6 | --red: #dc3545;
7 | --orange: #fd7e14;
8 | --yellow: #ffc107;
9 | --green: #28a745;
10 | --teal: #20c997;
11 | --cyan: #17a2b8;
12 | --white: #fff;
13 | --gray: #6c757d;
14 | --gray-dark: #343a40;
15 | --primary: #007bff;
16 | --secondary: #6c757d;
17 | --success: #28a745;
18 | --info: #17a2b8;
19 | --warning: #ffc107;
20 | --danger: #dc3545;
21 | --light: #f8f9fa;
22 | --dark: #343a40;
23 | --breakpoint-xs: 0;
24 | --breakpoint-sm: 576px;
25 | --breakpoint-md: 768px;
26 | --breakpoint-lg: 992px;
27 | --breakpoint-xl: 1200px;
28 | --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
29 | --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
30 | --primary: #29c785;
31 | --secondary: #444857;
32 | --surface: #1B2B34;
33 | --lighter: #f0f0f0;
34 | --darker: #333;
35 | --radius: 4px;
36 | --shadow-sm: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);
37 | --shadow-md: 0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12);
38 | --shadow-lg: 0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12);
39 | }
40 | html,
41 | body {
42 | width: 100%;
43 | height: 100%;
44 | }
45 |
46 | body {
47 | margin: 0;
48 | box-sizing: border-box;
49 | font-family: var(--font-family-sans-serif);
50 | overflow-y: hidden;
51 | }
52 |
53 | a {
54 | color:var(--primary);
55 | text-decoration: none;
56 | }
57 |
58 | label {
59 | display: block;
60 | }
61 |
62 | input:disabled {
63 | color: #ccc;
64 | }
65 |
66 | input[type="range"] {
67 | height: 0;
68 | }
69 |
70 | button, select {
71 | padding: 0.5em;
72 | border: 1px solid var(--secondary);
73 | font-weight: bold;
74 | border-radius: var(--radius);
75 | background: var(--secondary);
76 | color: var(--light);
77 | fill: var(--light);
78 | }
79 | button:hover {
80 | fill: var(--primary);
81 | color: var(--primary);
82 | cursor: pointer;
83 | }
84 | pre{
85 | font-family: var(--font-family-monospace);
86 | background: var(--dark);
87 | color: var(--light);
88 | }
--------------------------------------------------------------------------------
/public/icons/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/public/icons/check.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/icons/chevron.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/icons/collapse.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/icons/download.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/public/icons/dropdown.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/icons/edit.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/public/icons/expand.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/icons/flip.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/icons/fork.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/icons/link.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/public/icons/loading.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/public/icons/save.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | SvelteMonacoEditor
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/public/logo-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-192.png
--------------------------------------------------------------------------------
/public/logo-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-512.png
--------------------------------------------------------------------------------
/public/logo-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-black.png
--------------------------------------------------------------------------------
/public/logo-left-font.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-left-font.png
--------------------------------------------------------------------------------
/public/logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-white.png
--------------------------------------------------------------------------------
/public/logo-with-text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo-with-text.png
--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mjgartendev/svelte-monaco-playground/0f77bee5d61cc3560da4b2dfac467251507b91dd/public/logo.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "App",
3 | "icons": [
4 | {
5 | "src": "\/android-icon-36x36.png",
6 | "sizes": "36x36",
7 | "type": "image\/png",
8 | "density": "0.75"
9 | },
10 | {
11 | "src": "\/android-icon-48x48.png",
12 | "sizes": "48x48",
13 | "type": "image\/png",
14 | "density": "1.0"
15 | },
16 | {
17 | "src": "\/android-icon-72x72.png",
18 | "sizes": "72x72",
19 | "type": "image\/png",
20 | "density": "1.5"
21 | },
22 | {
23 | "src": "\/android-icon-96x96.png",
24 | "sizes": "96x96",
25 | "type": "image\/png",
26 | "density": "2.0"
27 | },
28 | {
29 | "src": "\/android-icon-144x144.png",
30 | "sizes": "144x144",
31 | "type": "image\/png",
32 | "density": "3.0"
33 | },
34 | {
35 | "src": "\/android-icon-192x192.png",
36 | "sizes": "192x192",
37 | "type": "image\/png",
38 | "density": "4.0"
39 | }
40 | ]
41 | }
--------------------------------------------------------------------------------
/public/monaco-editor-worker-loader-proxy.js:
--------------------------------------------------------------------------------
1 | self.MonacoEnvironment = {
2 | baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.17.0/min/'
3 | }
4 | importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.17.0/min/vs/base/worker/workerMain.js') // eslint-disable-line
--------------------------------------------------------------------------------
/public/rollup.config.js:
--------------------------------------------------------------------------------
1 | import resolve from 'rollup-plugin-node-resolve';
2 | import replace from 'rollup-plugin-replace';
3 | import commonjs from 'rollup-plugin-commonjs';
4 | import svelte from 'rollup-plugin-svelte';
5 | import babel from 'rollup-plugin-babel';
6 | import { terser } from 'rollup-plugin-terser';
7 | import config from 'sapper/config/rollup.js';
8 | import pkg from './package.json';
9 |
10 | const mode = process.env.NODE_ENV;
11 | const dev = mode === 'development';
12 | const legacy = !!process.env.SAPPER_LEGACY_BUILD;
13 |
14 | export default {
15 | client: {
16 | input: config.client.input(),
17 | output: config.client.output(),
18 | plugins: [
19 | replace({
20 | 'process.browser': true,
21 | 'process.env.NODE_ENV': JSON.stringify(mode)
22 | }),
23 | svelte({
24 | dev,
25 | hydratable: true,
26 | emitCss: true
27 | }),
28 | resolve(),
29 | commonjs(),
30 |
31 | legacy && babel({
32 | extensions: ['.js', '.mjs', '.html', '.svelte'],
33 | runtimeHelpers: true,
34 | exclude: ['node_modules/@babel/**'],
35 | presets: [
36 | ['@babel/preset-env', {
37 | targets: '> 0.25%, not dead'
38 | }]
39 | ],
40 | plugins: [
41 | '@babel/plugin-syntax-dynamic-import',
42 | ['@babel/plugin-transform-runtime', {
43 | useESModules: true
44 | }]
45 | ]
46 | }),
47 |
48 | !dev && terser({
49 | module: true
50 | })
51 | ],
52 | },
53 |
54 | server: {
55 | input: config.server.input(),
56 | output: config.server.output(),
57 | plugins: [
58 | replace({
59 | 'process.browser': false,
60 | 'process.env.NODE_ENV': JSON.stringify(mode)
61 | }),
62 | svelte({
63 | generate: 'ssr',
64 | dev
65 | }),
66 | resolve(),
67 | commonjs()
68 | ],
69 | external: Object.keys(pkg.dependencies).concat(
70 | require('module').builtinModules || Object.keys(process.binding('natives'))
71 | ),
72 | },
73 |
74 | serviceworker: {
75 | input: config.serviceworker.input(),
76 | output: config.serviceworker.output(),
77 | plugins: [
78 | resolve(),
79 | replace({
80 | 'process.browser': true,
81 | 'process.env.NODE_ENV': JSON.stringify(mode)
82 | }),
83 | commonjs(),
84 | !dev && terser()
85 | ]
86 | }
87 | };
88 |
--------------------------------------------------------------------------------
/public/themes/All Hallows Eve.json:
--------------------------------------------------------------------------------
1 | {
2 | "base": "vs-dark",
3 | "inherit": true,
4 | "rules": [
5 | {
6 | "foreground": "ffffff",
7 | "background": "434242",
8 | "token": "text"
9 | },
10 | {
11 | "foreground": "ffffff",
12 | "background": "000000",
13 | "token": "source"
14 | },
15 | {
16 | "foreground": "9933cc",
17 | "token": "comment"
18 | },
19 | {
20 | "foreground": "3387cc",
21 | "token": "constant"
22 | },
23 | {
24 | "foreground": "cc7833",
25 | "token": "keyword"
26 | },
27 | {
28 | "foreground": "d0d0ff",
29 | "token": "meta.preprocessor.c"
30 | },
31 | {
32 | "fontStyle": "italic",
33 | "token": "variable.parameter"
34 | },
35 | {
36 | "foreground": "ffffff",
37 | "background": "9b9b9b",
38 | "token": "source comment.block"
39 | },
40 | {
41 | "foreground": "66cc33",
42 | "token": "string"
43 | },
44 | {
45 | "foreground": "aaaaaa",
46 | "token": "string constant.character.escape"
47 | },
48 | {
49 | "foreground": "000000",
50 | "background": "cccc33",
51 | "token": "string.interpolated"
52 | },
53 | {
54 | "foreground": "cccc33",
55 | "token": "string.regexp"
56 | },
57 | {
58 | "foreground": "cccc33",
59 | "token": "string.literal"
60 | },
61 | {
62 | "foreground": "555555",
63 | "token": "string.interpolated constant.character.escape"
64 | },
65 | {
66 | "fontStyle": "underline",
67 | "token": "entity.name.type"
68 | },
69 | {
70 | "fontStyle": "italic underline",
71 | "token": "entity.other.inherited-class"
72 | },
73 | {
74 | "fontStyle": "underline",
75 | "token": "entity.name.tag"
76 | },
77 | {
78 | "foreground": "c83730",
79 | "token": "support.function"
80 | }
81 | ],
82 | "colors": {
83 | "editor.foreground": "#FFFFFF",
84 | "editor.background": "#000000",
85 | "editor.selectionBackground": "#73597EE0",
86 | "editor.lineHighlightBackground": "#333300",
87 | "editorCursor.foreground": "#FFFFFF",
88 | "editorWhitespace.foreground": "#404040"
89 | }
90 | }
--------------------------------------------------------------------------------
/public/themes/Chrome DevTools.json:
--------------------------------------------------------------------------------
1 | {
2 | "base": "vs",
3 | "inherit": true,
4 | "rules": [
5 | {
6 | "foreground": "c41a16",
7 | "token": "string"
8 | },
9 | {
10 | "foreground": "1c00cf",
11 | "token": "constant.numeric"
12 | },
13 | {
14 | "foreground": "aa0d91",
15 | "token": "keyword"
16 | },
17 | {
18 | "foreground": "000000",
19 | "token": "keyword.operator"
20 | },
21 | {
22 | "foreground": "aa0d91",
23 | "token": "constant.language"
24 | },
25 | {
26 | "foreground": "990000",
27 | "token": "support.class.exception"
28 | },
29 | {
30 | "foreground": "000000",
31 | "token": "entity.name.function"
32 | },
33 | {
34 | "fontStyle": "bold underline",
35 | "token": "entity.name.type"
36 | },
37 | {
38 | "fontStyle": "italic",
39 | "token": "variable.parameter"
40 | },
41 | {
42 | "foreground": "007400",
43 | "token": "comment"
44 | },
45 | {
46 | "foreground": "ff0000",
47 | "token": "invalid"
48 | },
49 | {
50 | "background": "e71a1100",
51 | "token": "invalid.deprecated.trailing-whitespace"
52 | },
53 | {
54 | "foreground": "000000",
55 | "background": "fafafafc",
56 | "token": "text source"
57 | },
58 | {
59 | "foreground": "aa0d91",
60 | "token": "meta.tag"
61 | },
62 | {
63 | "foreground": "aa0d91",
64 | "token": "declaration.tag"
65 | },
66 | {
67 | "foreground": "000000",
68 | "fontStyle": "bold",
69 | "token": "support"
70 | },
71 | {
72 | "foreground": "aa0d91",
73 | "token": "storage"
74 | },
75 | {
76 | "fontStyle": "bold underline",
77 | "token": "entity.name.section"
78 | },
79 | {
80 | "foreground": "000000",
81 | "fontStyle": "bold",
82 | "token": "entity.name.function.frame"
83 | },
84 | {
85 | "foreground": "333333",
86 | "token": "meta.tag.preprocessor.xml"
87 | },
88 | {
89 | "foreground": "994500",
90 | "fontStyle": "italic",
91 | "token": "entity.other.attribute-name"
92 | },
93 | {
94 | "foreground": "881280",
95 | "token": "entity.name.tag"
96 | }
97 | ],
98 | "colors": {
99 | "editor.foreground": "#000000",
100 | "editor.background": "#FFFFFF",
101 | "editor.selectionBackground": "#BAD6FD",
102 | "editor.lineHighlightBackground": "#0000001A",
103 | "editorCursor.foreground": "#000000",
104 | "editorWhitespace.foreground": "#B3B3B3F4"
105 | }
106 | }
--------------------------------------------------------------------------------
/public/themes/IDLE.json:
--------------------------------------------------------------------------------
1 | {
2 | "base": "vs",
3 | "inherit": true,
4 | "rules": [
5 | {
6 | "foreground": "919191",
7 | "token": "comment"
8 | },
9 | {
10 | "foreground": "00a33f",
11 | "token": "string"
12 | },
13 | {
14 | "foreground": "a535ae",
15 | "token": "constant.language"
16 | },
17 | {
18 | "foreground": "ff5600",
19 | "token": "keyword"
20 | },
21 | {
22 | "foreground": "ff5600",
23 | "token": "storage"
24 | },
25 | {
26 | "foreground": "21439c",
27 | "token": "entity.name.type"
28 | },
29 | {
30 | "foreground": "21439c",
31 | "token": "entity.name.function"
32 | },
33 | {
34 | "foreground": "a535ae",
35 | "token": "support.function"
36 | },
37 | {
38 | "foreground": "a535ae",
39 | "token": "support.constant"
40 | },
41 | {
42 | "foreground": "a535ae",
43 | "token": "support.type"
44 | },
45 | {
46 | "foreground": "a535ae",
47 | "token": "support.class"
48 | },
49 | {
50 | "foreground": "a535ae",
51 | "token": "support.variable"
52 | },
53 | {
54 | "foreground": "ffffff",
55 | "background": "990000",
56 | "token": "invalid"
57 | },
58 | {
59 | "foreground": "990000",
60 | "token": "constant.other.placeholder.py"
61 | }
62 | ],
63 | "colors": {
64 | "editor.foreground": "#000000",
65 | "editor.background": "#FFFFFF",
66 | "editor.selectionBackground": "#BAD6FD",
67 | "editor.lineHighlightBackground": "#00000012",
68 | "editorCursor.foreground": "#000000",
69 | "editorWhitespace.foreground": "#BFBFBF"
70 | }
71 | }
--------------------------------------------------------------------------------
/public/themes/Slush and Poppies.json:
--------------------------------------------------------------------------------
1 | {
2 | "base": "vs",
3 | "inherit": true,
4 | "rules": [
5 | {
6 | "foreground": "406040",
7 | "token": "comment"
8 | },
9 | {
10 | "foreground": "c03030",
11 | "token": "string"
12 | },
13 | {
14 | "foreground": "0080a0",
15 | "token": "constant.numeric"
16 | },
17 | {
18 | "fontStyle": "underline",
19 | "token": "source.ocaml constant.numeric.floating-point"
20 | },
21 | {
22 | "foreground": "800000",
23 | "token": "constant.character"
24 | },
25 | {
26 | "foreground": "2060a0",
27 | "token": "keyword"
28 | },
29 | {
30 | "foreground": "2060a0",
31 | "token": "keyword.operator"
32 | },
33 | {
34 | "fontStyle": "underline",
35 | "token": "source.ocaml keyword.operator.symbol.prefix.floating-point"
36 | },
37 | {
38 | "fontStyle": "underline",
39 | "token": "source.ocaml keyword.operator.symbol.infix.floating-point"
40 | },
41 | {
42 | "foreground": "0080ff",
43 | "token": "entity.name.module"
44 | },
45 | {
46 | "foreground": "0080ff",
47 | "token": "support.other.module"
48 | },
49 | {
50 | "foreground": "a08000",
51 | "token": "storage.type"
52 | },
53 | {
54 | "foreground": "008080",
55 | "token": "storage"
56 | },
57 | {
58 | "foreground": "c08060",
59 | "token": "entity.name.class.variant"
60 | },
61 | {
62 | "fontStyle": "bold",
63 | "token": "keyword.other.directive"
64 | },
65 | {
66 | "foreground": "800000",
67 | "token": "entity.name.function"
68 | },
69 | {
70 | "foreground": "800080",
71 | "token": "storage.type.user-defined"
72 | },
73 | {
74 | "foreground": "8000c0",
75 | "token": "entity.name.type.class.type"
76 | }
77 | ],
78 | "colors": {
79 | "editor.foreground": "#000000",
80 | "editor.background": "#F1F1F1",
81 | "editor.selectionBackground": "#B0B0FF",
82 | "editor.lineHighlightBackground": "#00000026",
83 | "editorCursor.foreground": "#000000",
84 | "editorWhitespace.foreground": "#BFBFBF"
85 | }
86 | }
--------------------------------------------------------------------------------
/public/themes/SpaceCadet.json:
--------------------------------------------------------------------------------
1 | {
2 | "base": "vs-dark",
3 | "inherit": true,
4 | "rules": [
5 | {
6 | "foreground": "473c45",
7 | "token": "comment"
8 | },
9 | {
10 | "foreground": "805978",
11 | "token": "string"
12 | },
13 | {
14 | "foreground": "a8885a",
15 | "token": "constant"
16 | },
17 | {
18 | "foreground": "596380",
19 | "token": "variable.parameter"
20 | },
21 | {
22 | "foreground": "596380",
23 | "token": "variable.other"
24 | },
25 | {
26 | "foreground": "728059",
27 | "token": "keyword - keyword.operator"
28 | },
29 | {
30 | "foreground": "728059",
31 | "token": "keyword.operator.logical"
32 | },
33 | {
34 | "foreground": "9ebf60",
35 | "token": "storage"
36 | },
37 | {
38 | "foreground": "6078bf",
39 | "token": "entity"
40 | },
41 | {
42 | "fontStyle": "italic",
43 | "token": "entity.other.inherited-class"
44 | },
45 | {
46 | "foreground": "8a4b66",
47 | "token": "support"
48 | },
49 | {
50 | "foreground": "893062",
51 | "token": "support.type.exception"
52 | },
53 | {
54 | "background": "5f0047",
55 | "token": "invalid"
56 | },
57 | {
58 | "background": "371d28",
59 | "token": "meta.function.section"
60 | }
61 | ],
62 | "colors": {
63 | "editor.foreground": "#DDE6CF",
64 | "editor.background": "#0D0D0D",
65 | "editor.selectionBackground": "#40002F",
66 | "editor.lineHighlightBackground": "#00000012",
67 | "editorCursor.foreground": "#7F005D",
68 | "editorWhitespace.foreground": "#BFBFBF"
69 | }
70 | }
--------------------------------------------------------------------------------
/public/themes/Xcode_default.json:
--------------------------------------------------------------------------------
1 | {
2 | "base": "vs",
3 | "inherit": true,
4 | "rules": [
5 | {
6 | "foreground": "008e00",
7 | "token": "comment"
8 | },
9 | {
10 | "foreground": "7d4726",
11 | "token": "meta.preprocessor"
12 | },
13 | {
14 | "foreground": "7d4726",
15 | "token": "keyword.control.import"
16 | },
17 | {
18 | "foreground": "df0002",
19 | "token": "string"
20 | },
21 | {
22 | "foreground": "3a00dc",
23 | "token": "constant.numeric"
24 | },
25 | {
26 | "foreground": "c800a4",
27 | "token": "constant.language"
28 | },
29 | {
30 | "foreground": "275a5e",
31 | "token": "constant.character"
32 | },
33 | {
34 | "foreground": "275a5e",
35 | "token": "constant.other"
36 | },
37 | {
38 | "foreground": "c800a4",
39 | "token": "variable.language"
40 | },
41 | {
42 | "foreground": "c800a4",
43 | "token": "variable.other"
44 | },
45 | {
46 | "foreground": "c800a4",
47 | "token": "keyword"
48 | },
49 | {
50 | "foreground": "c900a4",
51 | "token": "storage"
52 | },
53 | {
54 | "foreground": "438288",
55 | "token": "entity.name.class"
56 | },
57 | {
58 | "foreground": "790ead",
59 | "token": "entity.name.tag"
60 | },
61 | {
62 | "foreground": "450084",
63 | "token": "entity.other.attribute-name"
64 | },
65 | {
66 | "foreground": "450084",
67 | "token": "support.function"
68 | },
69 | {
70 | "foreground": "450084",
71 | "token": "support.constant"
72 | },
73 | {
74 | "foreground": "790ead",
75 | "token": "support.type"
76 | },
77 | {
78 | "foreground": "790ead",
79 | "token": "support.class"
80 | },
81 | {
82 | "foreground": "790ead",
83 | "token": "support.other.variable"
84 | }
85 | ],
86 | "colors": {
87 | "editor.foreground": "#000000",
88 | "editor.background": "#FFFFFF",
89 | "editor.selectionBackground": "#B5D5FF",
90 | "editor.lineHighlightBackground": "#00000012",
91 | "editorCursor.foreground": "#000000",
92 | "editorWhitespace.foreground": "#BFBFBF"
93 | }
94 | }
--------------------------------------------------------------------------------
/public/themes/Zenburnesque.json:
--------------------------------------------------------------------------------
1 | {
2 | "base": "vs-dark",
3 | "inherit": true,
4 | "rules": [
5 | {
6 | "foreground": "709070",
7 | "fontStyle": "italic",
8 | "token": "comment"
9 | },
10 | {
11 | "fontStyle": "bold",
12 | "token": "keyword.other.directive"
13 | },
14 | {
15 | "fontStyle": "underline",
16 | "token": "keyword.other.directive.line-number"
17 | },
18 | {
19 | "foreground": "ff8080",
20 | "token": "constant.character"
21 | },
22 | {
23 | "foreground": "ff2020",
24 | "token": "string"
25 | },
26 | {
27 | "foreground": "22c0ff",
28 | "token": "constant.numeric"
29 | },
30 | {
31 | "fontStyle": "underline",
32 | "token": "constant.numeric.floating-point"
33 | },
34 | {
35 | "foreground": "ffffa0",
36 | "token": "keyword"
37 | },
38 | {
39 | "foreground": "ff8000",
40 | "fontStyle": "bold",
41 | "token": "entity.name.module"
42 | },
43 | {
44 | "foreground": "ff8000",
45 | "fontStyle": "bold",
46 | "token": "support.other.module"
47 | },
48 | {
49 | "foreground": "ffffa0",
50 | "token": "keyword.operator"
51 | },
52 | {
53 | "fontStyle": "underline",
54 | "token": "source.ocaml keyword.operator.symbol.infix.floating-point"
55 | },
56 | {
57 | "fontStyle": "underline",
58 | "token": "source.ocaml keyword.operator.symbol.prefix.floating-point"
59 | },
60 | {
61 | "foreground": "6080ff",
62 | "token": "storage.type"
63 | },
64 | {
65 | "foreground": "4080a0",
66 | "token": "entity.name.class.variant"
67 | },
68 | {
69 | "foreground": "f09040",
70 | "token": "entity.name.type"
71 | },
72 | {
73 | "foreground": "ffcc66",
74 | "fontStyle": "bold",
75 | "token": "entity.name.function"
76 | },
77 | {
78 | "foreground": "ffe000",
79 | "token": "storage.type.user-defined"
80 | },
81 | {
82 | "foreground": "f4a020",
83 | "token": "entity.name.type.class.type"
84 | }
85 | ],
86 | "colors": {
87 | "editor.foreground": "#DEDEDE",
88 | "editor.background": "#404040",
89 | "editor.selectionBackground": "#A0A0C0",
90 | "editor.lineHighlightBackground": "#A0804026",
91 | "editorCursor.foreground": "#FFFF66",
92 | "editorWhitespace.foreground": "#A8A8A8"
93 | }
94 | }
--------------------------------------------------------------------------------
/public/themes/themelist.json:
--------------------------------------------------------------------------------
1 | {
2 | "active4d": "Active4D",
3 | "all-hallows-eve": "All Hallows Eve",
4 | "amy": "Amy",
5 | "birds-of-paradise": "Birds of Paradise",
6 | "blackboard": "Blackboard",
7 | "brilliance-black": "Brilliance Black",
8 | "brilliance-dull": "Brilliance Dull",
9 | "chrome-devtools": "Chrome DevTools",
10 | "clouds-midnight": "Clouds Midnight",
11 | "clouds": "Clouds",
12 | "cobalt": "Cobalt",
13 | "dawn": "Dawn",
14 | "dreamweaver": "Dreamweaver",
15 | "eiffel": "Eiffel",
16 | "espresso-libre": "Espresso Libre",
17 | "github": "GitHub",
18 | "idle": "IDLE",
19 | "katzenmilch": "Katzenmilch",
20 | "kuroir-theme": "Kuroir Theme",
21 | "lazy": "LAZY",
22 | "magicwb--amiga-": "MagicWB (Amiga)",
23 | "merbivore-soft": "Merbivore Soft",
24 | "merbivore": "Merbivore",
25 | "monokai-bright": "Monokai Bright",
26 | "monokai": "Monokai",
27 | "night-owl": "Night Owl",
28 | "oceanic-next": "Oceanic Next",
29 | "pastels-on-dark": "Pastels on Dark",
30 | "slush-and-poppies": "Slush and Poppies",
31 | "solarized-dark": "Solarized-dark",
32 | "solarized-light": "Solarized-light",
33 | "spacecadet": "SpaceCadet",
34 | "sunburst": "Sunburst",
35 | "textmate--mac-classic-": "Textmate (Mac Classic)",
36 | "tomorrow-night-blue": "Tomorrow-Night-Blue",
37 | "tomorrow-night-bright": "Tomorrow-Night-Bright",
38 | "tomorrow-night-eighties": "Tomorrow-Night-Eighties",
39 | "tomorrow-night": "Tomorrow-Night",
40 | "tomorrow": "Tomorrow",
41 | "twilight": "Twilight",
42 | "upstream-sunburst": "Upstream Sunburst",
43 | "vibrant-ink": "Vibrant Ink",
44 | "xcode-default": "Xcode_default",
45 | "zenburnesque": "Zenburnesque",
46 | "iplastic": "iPlastic",
47 | "idlefingers": "idleFingers",
48 | "krtheme": "krTheme",
49 | "monoindustrial": "monoindustrial"
50 | }
--------------------------------------------------------------------------------
/public/workers/compiler.js:
--------------------------------------------------------------------------------
1 | !function(){"use strict";let e;self.window=self;const s=new Promise(s=>{e=s});self.addEventListener("message",async c=>{switch(c.data.type){case"init":importScripts(`${c.data.svelteUrl}/compiler.js`),e();break;case"compile":await s,postMessage(function({id:e,source:s,options:c}){try{const{js:n,css:i}=svelte.compile(s,Object.assign({},t,c));return{id:e,result:{js:n.code,css:i.code||"/* Add a
94 |
--------------------------------------------------------------------------------
/src/components/JsonEditor.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
26 |
27 |
--------------------------------------------------------------------------------
/src/components/Login.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 | {#if user}
16 | auth.signOut() } src={ user.photoURL } width="40" alt="user avatar">
17 | {:else}
18 |
19 | Login
20 |
21 | {/if}
22 |
--------------------------------------------------------------------------------
/src/components/MonacoEditor.svelte:
--------------------------------------------------------------------------------
1 | {name}
2 |
3 |
4 |
27 |
37 |
38 |
39 |
40 |
53 |
--------------------------------------------------------------------------------
/src/components/Tabs.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
34 |
35 | {#each tabs as tab, i}
36 | {tab.name}
40 | {/each}
41 |
42 |
43 | {#each tabs as tab, i}
44 |
45 | {tab.content}
46 |
47 | {/each}
48 |
49 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
2 |
3 | monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
4 | allowJs: true,
5 | esModuleInterop: true,
6 | })
7 |
8 | import('monaco-themes/themes/Oceanic Next.json')
9 | .then(data => {
10 | monaco.editor.defineTheme('oceanic-next', data);
11 | monaco.editor.setTheme('oceanic-next')
12 | })
13 |
14 | monaco.editor.create(document.getElementById('editor'), {
15 | language: 'html',
16 | theme: 'oceanic-next',
17 | autoClosingBrackets: true,
18 | autoClosingQuotes: true,
19 | autoIndent: true,
20 | autoSurround: true,
21 | automaticLayout: true,
22 | lineNumbersMinChars: 2,
23 | minimap: {
24 | enabled: false
25 | }
26 | });
27 |
28 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 | const app = new App({
3 | target: document.body,
4 | hydrateable: true,
5 | props: {
6 | previewType: "live"
7 | }
8 | });
9 |
10 | window.app = app;
11 |
12 | export default app;
--------------------------------------------------------------------------------
/src/monaco-themes.js:
--------------------------------------------------------------------------------
1 | export const themes = [
2 | { id: "active4d", name: "Active4D" },
3 | { id: "all-hallows-eve", name: "All Hallows Eve" },
4 | { id: "amy", name: "Amy" },
5 | { id: "birds-of-paradise", name: "Birds of Paradise" },
6 | { id: "blackboard", name: "Blackboard" },
7 | { id: "brilliance-black", name: "Brilliance Black" },
8 | { id: "brilliance-dull", name: "Brilliance Dull" },
9 | { id: "chrome-devtools", name: "Chrome DevTools" },
10 | { id: "clouds-midnight", name: "Clouds Midnight" },
11 | { id: "clouds", name: "Clouds" },
12 | { id: "cobalt", name: "Cobalt" },
13 | { id: "dawn", name: "Dawn" },
14 | { id: "dreamweaver", name: "Dreamweaver" },
15 | { id: "eiffel", name: "Eiffel" },
16 | { id: "espresso-libre", name: "Espresso Libre" },
17 | { id: "github", name: "GitHub" },
18 | { id: "idle", name: "IDLE" },
19 | { id: "katzenmilch", name: "Katzenmilch" },
20 | { id: "kuroir-theme", name: "Kuroir Theme" },
21 | { id: "lazy", name: "LAZY" },
22 | { id: "magicwb--amiga-", name: "MagicWB (Amiga)" },
23 | { id: "merbivore-soft", name: "Merbivore Soft" },
24 | { id: "merbivore", name: "Merbivore" },
25 | { id: "monokai-bright", name: "Monokai Bright" },
26 | { id: "monokai", name: "Monokai" },
27 | { id: "night-owl", name: "Night Owl" },
28 | { id: "oceanic-next", name: "Oceanic Next" },
29 | { id: "pastels-on-dark", name: "Pastels on Dark" },
30 | { id: "slush-and-poppies", name: "Slush and Poppies" },
31 | { id: "solarized-dark", name: "Solarized-dark" },
32 | { id: "solarized-light", name: "Solarized-light" },
33 | { id: "spacecadet", name: "SpaceCadet" },
34 | { id: "sunburst", name: "Sunburst" },
35 | { id: "textmate--mac-classic-", name: "Textmate (Mac Classic)" },
36 | { id: "tomorrow-night-blue", name: "Tomorrow-Night-Blue" },
37 | { id: "tomorrow-night-bright", name: "Tomorrow-Night-Bright" },
38 | { id: "tomorrow-night-eighties", name: "Tomorrow-Night-Eighties" },
39 | { id: "tomorrow-night", name: "Tomorrow-Night" },
40 | { id: "tomorrow", name: "Tomorrow" },
41 | { id: "twilight", name: "Twilight" },
42 | { id: "upstream-sunburst", name: "Upstream Sunburst" },
43 | { id: "vibrant-ink", name: "Vibrant Ink" },
44 | { id: "xcode-default", name: "Xcode_default" },
45 | { id: "zenburnesque", name: "Zenburnesque" },
46 | { id: "iplastic", name: "iPlastic" },
47 | { id: "idlefingers", name: "idleFingers" },
48 | { id: "krtheme", name: "krTheme" },
49 | { id: "monoindustrial", name: "monoindustrial" }
50 | ];
51 |
--------------------------------------------------------------------------------
/src/pages/Explore.svelte:
--------------------------------------------------------------------------------
1 | Explore
--------------------------------------------------------------------------------
/src/pages/Playground.svelte:
--------------------------------------------------------------------------------
1 | Playground
--------------------------------------------------------------------------------
/src/pages/Profile.svelte:
--------------------------------------------------------------------------------
1 | Profile
--------------------------------------------------------------------------------
/src/pages/Projects.svelte:
--------------------------------------------------------------------------------
1 | Projects
--------------------------------------------------------------------------------
/src/pages/Settings.svelte:
--------------------------------------------------------------------------------
1 | Settings
--------------------------------------------------------------------------------
/src/pages/Theme.svelte:
--------------------------------------------------------------------------------
1 | Theme
--------------------------------------------------------------------------------
/src/stores.js:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 |
3 | export const user = writeable({})
--------------------------------------------------------------------------------
/src/utils/compat.js:
--------------------------------------------------------------------------------
1 | export const isMac = typeof navigator !== 'undefined' && navigator.platform === 'MacIntel';
2 |
--------------------------------------------------------------------------------
/src/utils/db.js:
--------------------------------------------------------------------------------
1 | import { Pool } from 'pg';
2 |
3 | export const DB = new Pool({
4 | connectionString: process.env.DATABASE_URL
5 | });
6 |
7 | export function query(text, values=[]) {
8 | return DB.query(text, values).then(r => r.rows);
9 | }
10 |
11 | export function find(text, values=[]) {
12 | return query(text, values).then(arr => arr[0]);
13 | }
14 |
--------------------------------------------------------------------------------
/src/utils/events.js:
--------------------------------------------------------------------------------
1 | export function keyEvent(code) {
2 | return function (node, callback) {
3 | node.addEventListener('keydown', handleKeydown);
4 |
5 | function handleKeydown(event) {
6 | if (event.keyCode === code) {
7 | callback.call(this, event);
8 | }
9 | }
10 |
11 | return {
12 | destroy() {
13 | node.removeEventListener('keydown', handleKeydown);
14 | }
15 | };
16 | };
17 | }
18 |
19 | export const enter = keyEvent(13);
20 |
--------------------------------------------------------------------------------
/src/utils/examples.js:
--------------------------------------------------------------------------------
1 | export function process_example(files) {
2 | return files
3 | .map(file => {
4 | const [name, type] = file.name.split('.');
5 | return { name, type, source: file.source };
6 | })
7 | .sort((a, b) => {
8 | if (a.name === 'App' && a.type === 'svelte') return -1;
9 | if (b.name === 'App' && b.type === 'svelte') return 1;
10 |
11 | if (a.type === b.type) return a.name < b.name ? -1 : 1;
12 |
13 | if (a.type === 'svelte') return -1;
14 | if (b.type === 'svelte') return 1;
15 | });
16 | }
--------------------------------------------------------------------------------
/src/utils/slug.js:
--------------------------------------------------------------------------------
1 | import slugify from '@sindresorhus/slugify';
2 | import {SLUG_SEPARATOR} from '../../config';
3 |
4 | /* url-safe processor */
5 |
6 | export const urlsafeSlugProcessor = string =>
7 | slugify(string, {
8 | customReplacements: [ // runs before any other transformations
9 | ['$', 'DOLLAR'], // `$destroy` & co
10 | ['-', 'DASH'], // conflicts with `separator`
11 | ],
12 | separator: SLUG_SEPARATOR,
13 | decamelize: false,
14 | lowercase: false
15 | })
16 | .replace(/DOLLAR/g, '$')
17 | .replace(/DASH/g, '-');
18 |
19 | /* unicode-preserver processor */
20 |
21 | const alphaNumRegex = /[a-zA-Z0-9]/;
22 | const unicodeRegex = /\p{Letter}/u;
23 | const isNonAlphaNumUnicode =
24 | string => !alphaNumRegex.test(string) && unicodeRegex.test(string);
25 |
26 | export const unicodeSafeProcessor = string =>
27 | string.split('')
28 | .reduce((accum, char, index, array) => {
29 | const type = isNonAlphaNumUnicode(char) ? 'pass' : 'process';
30 |
31 | if (index === 0) {
32 | accum.current = {type, string: char};
33 | } else if (type === accum.current.type) {
34 | accum.current.string += char;
35 | } else {
36 | accum.chunks.push(accum.current);
37 | accum.current = {type, string: char};
38 | }
39 |
40 | if (index === array.length - 1) {
41 | accum.chunks.push(accum.current);
42 | }
43 |
44 | return accum;
45 | }, {chunks: [], current: {type: '', string: ''}})
46 | .chunks
47 | .reduce((accum, chunk) => {
48 | const processed = chunk.type === 'process'
49 | ? urlsafeSlugProcessor(chunk.string)
50 | : chunk.string;
51 |
52 | processed.length > 0 && accum.push(processed);
53 |
54 | return accum;
55 | }, [])
56 | .join(SLUG_SEPARATOR);
57 |
58 | /* processor */
59 |
60 | export const makeSlugProcessor = (preserveUnicode = false) => preserveUnicode
61 | ? unicodeSafeProcessor
62 | : urlsafeSlugProcessor;
63 |
64 | /* session processor */
65 |
66 | export const makeSessionSlugProcessor = (preserveUnicode = false) => {
67 | const processor = makeSlugProcessor(preserveUnicode);
68 | const seen = new Set();
69 |
70 | return string => {
71 | const slug = processor(string);
72 |
73 | if (seen.has(slug)) throw new Error(`Duplicate slug ${slug}`);
74 | seen.add(slug);
75 |
76 | return slug;
77 | };
78 | };
79 |
--------------------------------------------------------------------------------
/src/views/Footer.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/src/views/Navbar.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | svelte-repl-monaco
6 |
7 |
8 | {#each links as link}
9 | {link.name}
10 | {/each}
11 |
12 |
13 |
14 |
15 |
16 |
20 |
--------------------------------------------------------------------------------
/src/views/Sidebar.svelte:
--------------------------------------------------------------------------------
1 |
11 |
38 |
39 |
43 |
--------------------------------------------------------------------------------
/storage.rules:
--------------------------------------------------------------------------------
1 | service firebase.storage {
2 | match /b/{bucket}/o {
3 | match /{allPaths=**} {
4 | allow read, write: if request.auth!=null;
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2 | const MonacoEditorPlugin = require('monaco-editor-webpack-plugin');
3 | const mode = process.env.NODE_ENV || 'development';
4 | const prod = mode === 'production';
5 |
6 | module.exports = {
7 | mode: 'development',
8 | entry: {
9 | app: './src/main.js',
10 | monaco: './src/index.js'
11 | },
12 | resolve: {
13 | extensions: ['.mjs', '.js', '.svelte']
14 | },
15 | output: {
16 | globalObject: 'self',
17 | filename: '[name].bundle.js',
18 | chunkFilename: '[name].[id].js',
19 | path: __dirname + '/public',
20 | },
21 | module: {
22 | rules: [
23 | {
24 | test: /\.css$/,
25 | use: [
26 | prod ? MiniCssExtractPlugin.loader : 'style-loader',
27 | 'css-loader'
28 | ]
29 | },
30 | {
31 | test: /\.svelte$/,
32 | exclude: /node_modules/,
33 | use: {
34 | loader: 'svelte-loader',
35 | options: {
36 | emitCss: true,
37 | hotReload: true
38 | }
39 | }
40 | },
41 | ]
42 | },
43 | mode,
44 | plugins: [
45 | new MonacoEditorPlugin(),
46 | new MiniCssExtractPlugin({
47 | filename: '[name].css'
48 | })
49 | ],
50 | devtool: prod ? false: 'source-map'
51 | };
52 |
--------------------------------------------------------------------------------