index.html

<div class='repl-container'>
	<div class='left' style='width: {{verticalDividerPos}}%;'>
		<section class='input'>
			<div class='app-controls'>
				<ExampleSelector :exampleGroups bind:selectedExample/>

				<button style='width: 6em;' disabled='{{downloading}}' class='{{downloading ? "active" : ""}}' on:click='download()'>{{downloading ? 'zipping' : 'download'}}</button>
				<button disabled='{{saving}}' class='{{saving ? "active" : ""}}' on:click='save()'>{{saving ? 'saving' : 'save'}}</button>
				<!-- TODO add a download button -->
			</div>

			<div class='module-controls'>
				{{#if selectedComponent}}
					<ComponentSelector
						ref:selector
						:components
						bind:selectedComponent
						on:create='createComponent()'
						on:remove='removeComponent(selectedComponent)'
					/>
				{{/if}}
			</div>

			{{#if loadedCodemirror}}
				<div ref:editorWrapper class='editor-wrapper {{flip}}'>
					{{#if selectedComponent}}
						{{#if showGenerated && selectedComponent.compiled}}
							<CodeMirror ref:editor mode='javascript' code='{{selectedComponent.compiled.code}}' readonly/>
						{{else}}
							<CodeMirror
								ref:editor
								mode='htmlmixed'
								bind:code='selectedComponent.source'
								error='{{sourceError}}'
								errorLoc='{{sourceErrorLoc || runtimeErrorLoc}}'
								on:navigate='navigate(event)'
							/>
						{{/if}}
					{{/if}}

					<button class='editor-toggle' on:click='flip()'>
						<span class='flip-text'>{{showGenerated ? 'output' : 'input'}}</span>
					</button>
				</div>
			{{else}}
				<p class='loading'>loading editor...</p>
			{{/if}}
		</section>
	</div>

	<div ref:right class='right' style='width: {{100 - verticalDividerPos}}%;'>
		<h2 class='show-if-mobile'>data.json</h2>
		<div class='bottom' style='height: {{100 - horizontalDividerPos}}%;'>
			{{#if loadedCodemirror}}
				<CodeMirror ref:data mode='javascript' bind:code='json' error='{{dataError}}' errorLoc='{{dataErrorLoc}}'/>
			{{else}}
				<p class='loading'>loading editor...</p>
			{{/if}}
		</div>

		<h2 class='show-if-mobile'>Rendered component</h2>
		<div class='top' style='height: {{horizontalDividerPos}}%;'>
			{{#if loadedSvelte}}
				{{#if bundle}}
					<Viewer :bundle :data :bundleError bind:error='runtimeError' on:change='updateData(event)' on:navigate='navigate(event)'/>
				{{/if}}
			{{else}}
				<p class='loading'>loading Svelte compiler...</p>
			{{/if}}

			{{#if dragging}}
				<div class='mousecatcher'></div>
			{{/if}}
		</div>

		<div class='divider horizontal-divider' style='top: calc({{horizontalDividerPos}}% - 8px)' on:drag='setHorizontal(event)'></div>
	</div>

	<div class='divider vertical-divider' style='left: calc({{verticalDividerPos}}% - 8px)' on:drag='setVertical(event)'></div>
</div>

<style>
	.repl-container {
		min-height: calc(100vh - 3em);
		background-color: #f4f4f4;
	}

	@keyframes pulse {
		0%   { opacity: 1; transform: scale(1.5); }
		50%  { opacity: 0; transform: scale(1); }
		100% { opacity: 1; transform: scale(1.5); }
	}

	@-webkit-keyframes pulse {
		0%   { opacity: 1; transform: scale(1.5); }
		50%  { opacity: 0; transform: scale(1); }
		100% { opacity: 1; transform: scale(1.5); }
	}

	@keyframes fade-in {
		0%   { opacity: 0; }
		100% { opacity: 1; }
	}

	@-webkit-keyframes fade-in {
		0%   { opacity: 0; }
		100% { opacity: 1; }
	}

	.left, .right {
		position: relative;
	}

	@media (max-width: 767px) {
		.left, .right {
			width: 100% !important; /* override divider-set width */
		}

		.top, .bottom {
			height: auto !important;
		}
	}

	.divider {
		position: absolute;
		z-index: 10;
		display: none;
	}

	h2 {
		margin: 1em 0 0 0;
		padding: 0 8px;
		font-weight: 500;
		font-size: 1.2em;
	}

	.editor-wrapper {
		z-index: 5;
		transform-style: preserve-3d;
		animation-fill-mode: forwards;
	}

	.editor-toggle {
		position: absolute;
		bottom: 1em;
		right: 1em;
		z-index: 10;
		background: white url(/icons/flip.svg) no-repeat calc(100% - 0.7em) 50%;
		background-size: 1.4em 1em;
		padding-right: 2.5em;
	}

	.flip-text {
		/*display: none;*/
	}

	.editor-toggle:hover .flip-text {
		/*display: inline-block;*/
	}

	.flip-out {
		animation-name: flip-out;
		animation-duration: 0.2s;
		animation-timing-function: ease-in;
	}

	.flip-pause {
		opacity: 0;
	}

	.flip-in {
		animation-name: flip-in;
		animation-duration: 0.2s;
		animation-timing-function: ease-out;
	}

	@keyframes flip-out {
		from { transform: rotateY(0deg); }
		to { transform: rotateY(90deg); }
	}

	@keyframes flip-in {
		from { transform: rotateY(-90deg); }
		to { transform: rotateY(0deg); }
	}

	@media (min-width: 768px) {
		.show-if-mobile {
			display: none;
		}

		.repl-container {
			min-height: auto;
			height: calc(100vh - 4em);
			background-color: white;
			overflow: hidden;
		}

		.screen-too-small {
			display: none;
		}

		.left, .right, .divider {
			display: block;

		}

		.left, .right {
			height: 100%;
			float: left;
		}

		.top, .bottom {
			position: absolute;
			width: 100%;
		}

		.top { top: 0; }
		.bottom { bottom: 0; }

		.left .editor-wrapper {
			/* make it easier to interact with scrollbar */
			padding-right: 8px;
			height: auto;
			height: 100%;
		}

		section {
			height: 100%;
		}
	}

	.divider::after {
		content: '';
		position: absolute;
		background-color: #eee;
	}

	.vertical-divider {
		padding: 0 8px;
		width: 0;
		height: 100%;
		cursor: ew-resize;
	}

	.vertical-divider::after {
		left: 8px;
		top: 0;
		width: 1px;
		height: 100%;
	}

	.horizontal-divider {
		padding: 8px 0;
		width: 100%;
		height: 0;
		cursor: ns-resize;
	}

	.horizontal-divider::after {
		top: 8px;
		left: 0;
		width: 100%;
		height: 1px;
	}

	.loading {
		text-align: center;
		color: #999;
		font-weight: 300;
		margin: 2em 0 0 0;
	}

	.input {
		padding: 6em 0 0 0;
		perspective: 1500px;
		perspective-origin: 50% 0%;
	}

	@media (min-width: 768px) {
		.input {
			perspective-origin: 50% 50%;
		}
	}

	.app-controls, .module-controls {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3em;
		padding: 0.5em;
	}

	.app-controls {
		top: 0;
		border-bottom: 1px solid #eee;
		background-color: #f4f4f4;
	}

	.module-controls {
		top: 3em;
		border-bottom: 1px solid #eee;
	}

	.tabs {
		position: absolute;
		right: 0.5em;
		top: 0.5em;
	}

	.tab {
		padding: 0.8em 1em;
		border: 1px solid #eee;
		border-bottom: none;
		border-radius: 0.2em 0.2em 0 0;
		bottom: -0.2em;
		background: white;
		line-height: 1;
		display: inline-block;
		background-color: #f4f4f4;
		user-select: none;
		cursor: default;
	}

	.tab.active {
		z-index: 2;
		background-color: white;
		bottom: 0;
	}

	button {
		display: block;
		float: right;
		padding: calc(0.5em - 1px) 1em;
		margin: 0 0 0 0.5em;
		border-radius: 0.2em;
		color: rgb(170,30,30);
		border: 1px solid rgba(170,30,30,0.3);
		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		font-weight: 500;
		font-size: inherit;
		outline: none;
		line-height: 1;
		box-sizing: border-box;
		background-color: white;
		cursor: pointer;
	}

	button:hover {
		border: 1px solid rgb(170,30,30);
	}

	button.active {
		background-color: rgb(170,30,30);
		color: white;
	}

	select {
		position: absolute;
		left: 0.5em;
		top: 50%;
	}

	.mousecatcher {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.01);
	}

	.message {
		position: relative;
		border-radius: 0.2em;
		margin: 0;
		padding: 0.5em 0.5em 0.5em 2.5em;
		color: white;
	}

	.message::before {
		content: '!';
		position: absolute;
		left: 0.7em;
		top: 0.55em;
		font-size: 0.8em;
		font-weight: 800;
		width: 1em;
		height: 1em;
		text-align: center;
		line-height: 1;
		padding: 0.2em 0.15em 0.1em 0.15em;
		border-radius: 50%;
		color: white;
		border: 2px solid white;
	}

	.error.message {
		background-color: rgb(170,30,30);
	}

	.info.message {
		background-color: #666;
	}

	.error .filename {
		cursor: pointer;
	}
</style>

<script>
	import { locate } from 'locate-character';
	import CodeMirror from './CodeMirror.html';
	import Viewer from './Viewer.html';
	import ComponentSelector from './ComponentSelector.html';
	import ExampleSelector from './ExampleSelector.html';
	import { exampleGroups, redirects } from './examples.js';
	import { getComponentFromGist, saveComponentAsGist } from './utils/gist.js';
	import debounce from './utils/debounce.js';
	import * as load from './utils/load.js';
	import { get } from './utils/get.js';

	function loadCodemirror () {
		return Promise.all([
			curl([ '/codemirror.js' ]),
			load.css( '/codemirror.css' ),
		]).then( ([ CodeMirror ]) => {
			return ( window.CodeMirror = CodeMirror );
		});
	}

	const versionMatch = typeof window !== 'undefined' && /version=([^&]+)/.exec( window.location.search );
	let dataQuery;

	function loadSvelte () {
		const url = versionMatch ?
			versionMatch[1] === 'local' ? '/svelte.js' :
			'https://unpkg.com/svelte@' + versionMatch[1] + '/compiler/svelte.js' :
			'https://unpkg.com/svelte/compiler/svelte.js';

		return curl([ url ]);
	}

	function tryParseData ( encoded ) {
		try {
			return JSON.parse( decodeURIComponent( atob( encoded ) ) );
		} catch ( err ) {
			return {};
		}
	}

	function findExample ( id ) {
		id = decodeURIComponent( id );

		if ( redirects[ id ] ) {
			return findExample( redirects[ id ] );
		}

		for ( let i = 0; i < exampleGroups.length; i += 1 ) {
			const group = exampleGroups[i];
			for ( let j = 0; j < group.examples.length; j += 1 ) {
				const example = group.examples[j];
				if ( example.id === id ) return example;
			}
		}
	}

	function compile ( component ) {
		return svelte.compile( component.source || '', {
			name: component.name,
			filename: component.name + '.html'
		});
	}

	export default {
		data () {
			const search = typeof window !== 'undefined' ? window.location.search : '';
			const gistMatch = /gist=([^&]+)$/.exec( search );
			const dataMatch = /data=([^&]+)$/.exec( search );
			const exampleMatch = /example=([^&]+)$/.exec( search );

			let gist = null;
			let components = [];
			let selectedExample = null;
			let data = {};

			if ( dataMatch ) {
				dataQuery = dataMatch[1]; // so we don't lose it from the URL later
				const parsed = tryParseData( dataMatch[1] );

				if ( parsed.source && !parsed.components ) {
					// legacy
					components = [
						{
							name: 'App',
							entry: true,
							source: parsed.source
						}
					];
				} else {
					components = parsed.components;
				}

				data = parsed.data;
			}

			let selectedComponent = null;

			if ( components && components.length > 0 ) {
				selectedComponent = components[0];
			} else {
				if ( gistMatch ) {
					gist = gistMatch[1];
				} else {
					selectedExample = exampleMatch && findExample( exampleMatch[1] ) || exampleGroups[0].examples[0];
				}
			}

			return {
				horizontalDividerPos: 50,
				verticalDividerPos: 50,
				showGenerated: false,

				// TODO remove this post-https://github.com/sveltejs/svelte/issues/424
				false: false,
				true: true,
				null: null,

				exampleGroups,
				selectedExample,
				selectedComponent,

				gist,
				components,
				data,
				json: JSON.stringify( data, null, '  ' ),

				loadedCodemirror: false,
				editorRotation: 0,
				flip: ''
			};
		},

		computed: {
			runtimeErrorLoc ( runtimeError, selectedComponent ) {
				if ( !runtimeError || !selectedComponent ) return null;
				if ( runtimeError.filename !== `${selectedComponent.name}.html` ) return;

				return runtimeError.loc;
			}
		},

		methods: {
			createComponent () {
				const components = this.get( 'components' );

				const newComponent = {
					name: this.uid++ ? `Component${this.uid}` : 'Component',
					source: ''
				};

				components.push( newComponent );

				this.set({
					components,

					// for some reason we need to unset selectedComponent before
					// resetting it, otherwise the editor remains bound to the
					// previous component. TODO look into this bug
					selectedComponent: null
				});

				this.set({
					selectedComponent: newComponent
				});

				this.refs.selector.refs.name.focus();
			},

			removeComponent ( component ) {
				const components = this.get( 'components' );

				let selectedComponent;

				if ( component.entry ) {
					// App.html can't be removed
					component.source = '';
					selectedComponent = component;
				} else {
					const index = components.indexOf( component );
					if ( ~index ) {
						components.splice( index, 1 );
					} else {
						console.error( `Could not find component! That's... odd` );
					}

					selectedComponent = components[ index ] || components[ components.length - 1 ];
				}

				this.set({
					components,
					selectedComponent
				});
			},

			flip () {
				if ( window.innerWidth < 768 ) {
					this.flipMobile();
					return;
				}

				if ( this.flipping ) return;
				this.flipping = true;

				const wrapper = this.refs.editorWrapper;
				const showGenerated = this.get( 'showGenerated' );

				const handleFlipOutEnd = () => {
					wrapper.removeEventListener( 'animationend', handleFlipOutEnd );
					wrapper.removeEventListener( 'webkitAnimationEnd', handleFlipOutEnd );

					this.set({
						showGenerated: !showGenerated,
						flip: 'flip-pause'
					});

					const handleFlipInEnd = () => {
						wrapper.removeEventListener( 'animationend', handleFlipInEnd );
						wrapper.removeEventListener( 'webkitAnimationEnd', handleFlipInEnd );

						this.flipping = false;

						this.set({ flip: '' });
					}

					wrapper.addEventListener( 'animationend', handleFlipInEnd );
					wrapper.addEventListener( 'webkitAnimationEnd', handleFlipInEnd );

					setTimeout( () => {
						this.set({ flip: 'flip-in' });
					});
				}

				wrapper.addEventListener( 'animationend', handleFlipOutEnd );
				wrapper.addEventListener( 'webkitAnimationEnd', handleFlipOutEnd );

				this.set({ flip: 'flip-out' });
			},

			flipMobile () {
				const bcr1 = this.refs.editorWrapper.getBoundingClientRect();
				this.set({
					showGenerated: !this.get( 'showGenerated' )
				});

				// if top is visible, keep it that way
				if ( bcr1.top > 0 ) return;

				const bcr2 = this.refs.editorWrapper.getBoundingClientRect();
				const d = bcr2.bottom - bcr1.bottom;
				window.scrollTo( 0, window.scrollY + d );
			},

			setHorizontal ( event ) {
				const { top, bottom } = this.refs.right.getBoundingClientRect();

				this.set({
					horizontalDividerPos: 100 * ( event.clientY - top ) / ( bottom - top )
				});

				this.refs.data.resize();
			},

			setVertical ( event ) {
				this.set({
					verticalDividerPos: 100 * event.clientX / window.innerWidth
				});

				this.refs.editor.resize();
				this.refs.data.resize();
			},

			updateData ({ key, value }) {
				const data = JSON.parse( this.get( 'json' ) );
				data[ key ] = value;
				this.set({ json: JSON.stringify( data, null, '  ' ) });
			},

			save () {
				this.set({ saving: true });

				saveComponentAsGist( this.get( 'components' ), this.get( 'json' ) ).then( id => {
					this.set({
						saving: false,
						gist: id,
						selectedExample: null
					});
					this.updateUrl();
				});
			},

			updateBundle () {
				// TODO do this in a worker
				const components = this.get( 'components' );

				if ( !components || !components.length ) return;
				if ( components.some( c => !c.compiled ) ) return;

				if ( this.bundlePromise ) this.bundlePromise.cancel();

				const lookup = {};
				components.forEach( component => {
					lookup[ `./${component.name}.html` ] = component.compiled;
				});

				let cancelled = false;

				let uid = 1;
				const importMap = new Map();
				const entry = './App.html';

				this.bundlePromise = rollup.rollup({
					entry,
					external: id => {
						return id[0] !== '.';
					},
					plugins: [{
						resolveId ( importee, importer ) {
							if ( importee[0] === '.' ) return importee;
						},
						load ( id ) {
							return lookup[ `${id}` ];
						}
					}],
					onwarn ( warning ) {
						if ( warning.code === 'MISSING_GLOBAL_NAME' ) return;
						console.warn( warning.message );
					}
				}).then( bundle => {
					if ( cancelled ) return;

					const { code, map } = bundle.generate({
						format: 'iife',
						moduleName: 'SvelteComponent',
						globals: id => {
							const name = `import_${uid++}`;
							importMap.set( id, name );
							return name;
						},
						sourceMap: true
					});

					this.set({
						bundle: {
							code,
							map,
							imports: bundle.imports,
							importMap
						},
						runtimeError: null
					});
				}).catch( err => {
					console.error( err.stack );
					this.set({
						bundleError: err
					});
				});

				this.bundlePromise.cancel = () => {
					cancelled = true;
				};
			},

			updateUrl () {
				if ( typeof history === 'undefined' ) return;

				const gist = this.get( 'gist' );
				const selectedExample = this.get( 'selectedExample' );

				const params = {};
				if ( typeof svelte !== 'undefined' ) {
					params.version = versionMatch && versionMatch[1] === 'local' ? 'local' : svelte.VERSION;
				} else if ( versionMatch ) {
					params.version = versionMatch[1];
				}

				if ( gist ) {
					params.gist = gist;
				} else if ( selectedExample ) {
					params.example = selectedExample.id;
				} else if ( dataQuery ) {
					params.data = dataQuery;
				}

				const queryString = Object.keys( params ).map( key => `${key}=${params[key]}` ).join( '&' );
				const url = queryString ? `/repl?${queryString}` : '/repl';

				history.replaceState( {}, 'x', url );
			},

			navigate ( filename ) {
				const name = filename.replace( /\.html$/, '' );
				const { components, selectedComponent } = this.get();

				if ( selectedComponent.name === name ) return;

				this.set({
					selectedComponent: components.find( c => c.name === name )
				});
			},

			download () {
				this.set({
					downloading: true
				});

				curl([ '/jszip.js', '/file-saver.js' ]).then( ( JSZip, saveAs ) => {
					const zip = new JSZip();

					get( '/svelte-app.zip', { responseType: 'arraybuffer' })
						.then( JSZip.loadAsync )
						.then( zip => {
							const { bundle, components, data } = this.get();

							// remove any dotfiles that snuck in
							Object.keys( zip.files ).forEach( key => {
								const file = key.split( '/' ).pop();
								if ( file[0] === '.' ) zip.remove( key );
							});

							// add component files
							components.forEach( component => {
								zip.file( `src/${component.name}.html`, component.source );
							});

							// add entry point
							zip.file( `src/main.js`, `import App from './App.html';

var app = new App({
	target: document.body,
	data: ${JSON.stringify( data, null, '\t' ).replace( /\n/g, '\n\t' )}
});

export default app;` );

							const go = () => {
								zip.generateAsync({ type: 'blob' })
									.then( blob => {
										this.set({
											downloading: false
										});
										saveAs( blob, 'svelte-app.zip' );
									});
							};

							if ( bundle.imports.length > 0 ) {
								zip.file( 'package.json' )
									.async( 'string' )
									.then( JSON.parse )
									.then( pkg => {
										const deps = {};
										bundle.imports.forEach( mod => {
											const match = /^[^@\/]+/.exec( mod );
											deps[ match[0] ] = 'latest';
										});
										pkg.dependencies = deps;

										zip.file( 'package.json', JSON.stringify( pkg, null, '  ' ) );
									})
									.then( go );
							} else {
								go();
							}
						});
				});
			}
		},

		oncreate () {
			this.uid = 0;
			this.flipping = false;
			this.bundlePromise = null;

			loadCodemirror().then( () => {
				this.set({ loadedCodemirror: true });
			});

			let exampleComponents;
			let lastSelectedExample;

			this.observe( 'selectedExample', example => {
				if ( !example ) return;
				const id = example.id;

				lastSelectedExample = id;
				get( `/examples/${id}.json` ).then( JSON.parse ).then( example => {
					exampleComponents = JSON.stringify( example.components );

					// compile non-selected components
					if ( window.svelte ) {
						example.components.slice( 1 ).forEach( component => {
							component.compiled = compile( component );
						});
					}

					this.set({
						components: example.components,
						selectedComponent: example.components[0],
						json: JSON.stringify( example.data , null, '  ' )
					});
				});

				this.set({ gist: null });
				this.updateUrl();
			});

			if ( !this.get( 'gist' ) ) {
				this.set({ json: JSON.stringify( this.get( 'data' ), null, '  ' ) });
			}

			this.observe( 'gist', gist => {
				if ( !gist ) return;

				if ( this.promise ) this.promise.cancel();
				this.promise = getComponentFromGist( gist );

				this.promise
					.then( ({ components, json }) => {
						// compile non-selected components
						if ( window.svelte ) {
							components.slice( 1 ).forEach( component => {
								component.compiled = compile( component );
							});
						}

						this.set({ components, json, selectedComponent: components[0] });
					})
					.catch( err => {
						alert( 'Error loading from gist.github.com – please try again later!' );
						console.error( err.stack );
					});

				this.set({ selectedExample: null });
				this.updateUrl();
			});

			loadSvelte().then( svelte => {
				console.log( `running Svelte compiler version %c${svelte.VERSION}`, 'font-weight: bold' );
				window.svelte = svelte;

				this.set({ loadedSvelte: true });

				this.get( 'components' ).forEach( component => {
					// skip the selected component, that'll come soon enough
					if ( component === this.get( 'selectedComponent' ) ) return;

					try {
						component.compiled = compile( component );
					} catch ( err ) {
						console.error( err.stack );

						this.set({
							sourceError: err,
							sourceErrorLoc: err.loc
						});
					}
				});

				this.observe( 'selectedComponent', selectedComponent => {
					if ( !selectedComponent ) return;

					// if component has been edited, unset selectedExample
					if ( JSON.stringify( this.get( 'components' ) ) !== exampleComponents ) {
						this.set({ selectedExample: null });
					}

					try {
						selectedComponent.compiled = compile( selectedComponent );
						this.set({ selectedComponent, sourceError: null, sourceErrorLoc: null });

						if ( this.get( 'loadedRollup' ) ) {
							this.updateBundle();
						}
					} catch ( err ) {
						console.error( err.stack );

						this.set({
							sourceError: err,
							sourceErrorLoc: err.loc
						});
					}
				});

				this.updateUrl();
			});

			curl([ '/rollup.browser.js' ]).then( rollup => {
				this.set({ loadedRollup: true });
				window.rollup = rollup;

				this.updateBundle();
			});

			this.observe( 'json', json => {
				try {
					this.set({
						data: JSON.parse( json ),
						dataError: null,
						dataErrorLoc: null
					});
				} catch ( err ) {
					console.error( err.stack );

					const match = /in JSON at position (\d+)/.exec( err.message );

					if ( match ) {
						const loc = locate( json, +match[1], { offsetLine: 1 });
						this.set({
							dataError: {
								message: err.message.slice( 0, match.index ).trim(),
								loc
							},
							dataErrorLoc: loc
						});
					}
				}
			});
		},

		events: {
			drag ( node, callback ) {
				const mousedown = event => {
					if ( event.which !== 1 ) return;

					event.preventDefault();

					this.set({ dragging: true });

					const onmouseup = () => {
						this.set({ dragging: false });

						window.removeEventListener( 'mousemove', callback, false );
						window.removeEventListener( 'mouseup', onmouseup, false );
					};

					window.addEventListener( 'mousemove', callback, false );
					window.addEventListener( 'mouseup', onmouseup, false );
				}

				node.addEventListener( 'mousedown', mousedown, false );

				return {
					teardown () {
						node.removeEventListener( 'mousedown', onmousedown, false );
					}
				};
			}
		},

		components: {
			CodeMirror,
			Viewer,
			ComponentSelector,
			ExampleSelector
		}
	};
</script>