allow external imports, show additional options

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "ractive": "^0.7.3",
     "ractive-events-tap": "^0.2.0",
+    "ractive-transitions-slide": "^0.2.1",
     "rollup": "^0.19.1"
   }
 }

src/app/Output/BundleOptions.html

@@ -11,6 +11,20 @@
 	</tr>
 </table>
 
+{{#if options.format === 'iife' || options.format === 'umd'}}
+	{{#if exports.length}}
+		<div intro-outro='slide'>
+			<label><span>Bundle name</span> <input value='{{options.moduleName}}'></label>
+		</div>
+	{{/if}}
+
+	{{#each imports}}
+		<div intro-outro='slide'>
+			<label><span>{{this}}</span> <input value='{{options.globals[this]}}'></label>
+		</div>
+	{{/each}}
+{{/if}}
+
 <style>
 	table {
 		width: 100%;
@@ -34,10 +48,25 @@
 		background-color: #ccc;
 		font-weight: bold;
 	}
+
+	label {
+		display: block;
+		padding: 0 0 0 8em;
+	}
+
+	label span {
+		position: absolute;
+		display: block;
+		left: 0;
+		top: 1px;
+		padding: 0.5em;
+		line-height: 1;
+	}
 </style>
 
 <script>
 	import tap from 'ractive-events-tap';
+	import slide from 'ractive-transitions-slide';
 
 	component.exports = {
 		data: () => ({
@@ -50,6 +79,7 @@
 			]
 		}),
 
-		events: { tap }
+		events: { tap },
+		transitions: { slide }
 	};
 </script>

src/app/Output/index.html

@@ -3,7 +3,7 @@
 <link rel='ractive' href='./Bundle.html'>
 
 <Status error='{{error}}'/>
-<BundleOptions options='{{options}}'/>
+<BundleOptions options='{{options}}' imports='{{imports}}' exports='{{exports}}'/>
 <Bundle code='{{code}}'/>
 
 

src/app/main.js

@@ -32,7 +32,7 @@ function update () {
 		entry: 'main',
 		resolveId ( importee, importer ) {
 			if ( !importer ) return importee;
-			if ( importee[0] !== '.' ) return undefined;
+			if ( importee[0] !== '.' ) return false;
 
 			return resolve( dirname( importer ), importee ).replace( /^\.\//, '' );
 		},
@@ -49,10 +49,19 @@ function update () {
 	}).then( bundle => {
 		const generated = bundle.generate( options );
 
-		output.set( 'code', generated.code );
+		output.set({
-		output.set( 'error', null );
+			code: generated.code,
+			error: null,
+			imports: bundle.imports,
+			exports: bundle.exports
+		});
 	})
-	.catch( error => output.set( 'error', error ) );
+	.catch( error => {
+		output.set( 'error', error );
+		setTimeout( () => {
+			throw error;
+		});
+	});
 }
 
 input.observe( 'modules', update );