rig up examples

gobblefile.js

@@ -5,8 +5,13 @@ module.exports = gobble([
 
 	gobble( 'node_modules/rollup/dist' ),
 
-	gobble( 'src/app' )
-		.transform( 'ractive', { type: 'es6' })
+	gobble([
+		gobble( 'src/app' ).transform( 'ractive', { type: 'es6' }),
+		gobble( 'src/examples' ).transform( 'spelunk', {
+			dest: 'examples.js',
+			type: 'es6'
+		})
+	])
 		.transform( 'rollup-babel', {
 			entry: 'main.js',
 			dest: 'app.js',

package.json

@@ -10,6 +10,7 @@
     "gobble-cli": "^0.4.2",
     "gobble-ractive": "^0.2.0",
     "gobble-rollup-babel": "^0.1.2",
+    "gobble-spelunk": "^0.6.0",
     "gobble-uglifyjs": "^0.2.1",
     "surge": "^0.15.0"
   },

src/app/BaseView.html

@@ -4,6 +4,12 @@
 <link rel='ractive' href='./Output.html'>
 
 <div class='left'>
+	<select value='{{selectedExample}}'>
+		{{#each examples}}
+			<option value='{{this}}'>{{name}}</option>
+		{{/each}}
+	</select>
+
 	{{#each modules :i}}
 		<Module module='{{this}}' index='{{i}}' main='{{i===0}}'/>
 	{{/each}}
@@ -59,14 +65,34 @@
 		}),
 
 		oninit () {
-			this.observe( 'modules', modules => {
-				console.log( 'modules', modules );
-				this.renderModules( modules, this.get( 'options' ) );
-			});
+			this.observe({
+				modules: modules => {
+					console.log( 'modules', modules );
+					this.renderModules( modules, this.get( 'options' ) );
+				},
+
+				options: options => {
+					console.log( 'options', options );
+					this.renderModules( this.get( 'modules' ), options );
+				},
 
-			this.observe( 'options', options => {
-				console.log( 'options', options );
-				this.renderModules( this.get( 'modules' ), options );
+				selectedExample: example => {
+					const modules = Object.keys( example.modules ).map( key => {
+						return {
+							name: `${key}.js`,
+							code: example.modules[ key ]
+						};
+					});
+
+					modules.sort( ( a, b ) => {
+						if ( a.name === 'main.js' ) return -1;
+						if ( b.name === 'main.js' ) return 1;
+
+						return a.name < b.name ? -1 : 1;
+					});
+
+					this.set({ modules });
+				}
 			});
 		},
 

src/app/Module.html

@@ -42,12 +42,30 @@
 	import tap from 'ractive-events-tap';
 
 	component.exports = {
-		oncomplete () {
+		onrender () {
 			this.on( 'remove', index => this.parent.removeModule( index ) );
 
-			CodeMirror.fromTextArea( this.find( 'textarea' ), {
+			let updating = false;
+
+			const editor = CodeMirror.fromTextArea( this.find( 'textarea' ), {
 				lineNumbers: true
-			}).on( 'change', instance => this.set( 'module.code', instance.getValue() ) );
+			});
+
+			editor.on( 'change', instance => {
+				if ( !updating ) {
+					updating = true;
+					this.set( 'module.code', instance.getValue() );
+					updating = false;
+				}
+			});
+
+			this.observe( 'module.code', code => {
+				if ( !updating ) {
+					updating = true;
+					editor.setValue( code );
+					updating = false;
+				}
+			});
 		},
 
 		events: { tap }

src/app/main.js

@@ -1,7 +1,9 @@
 import BaseView from './BaseView';
+import examples from './examples';
 
-console.log( 'yes, it deployed correctly' );
+console.log( examples );
 
 const ractive = new BaseView({
-	el: 'main'
+	el: 'main',
+	data: { examples }
 });

src/examples/00/modules/foo.js

@@ -0,0 +1,3 @@
+export function foo () {
+	return 42;
+}

src/examples/00/modules/main.js

@@ -0,0 +1,2 @@
+import { foo } from './foo';
+console.log( foo() );

src/examples/00/name

@@ -0,0 +1 @@
+first example

src/examples/01/modules/lib.js

@@ -0,0 +1,9 @@
+export const sqrt = Math.sqrt;
+
+export function square( x ) {
+	return x * x;
+}
+
+export function diag ( x, y ) {
+	return sqrt( square( x ) + square( y ) );
+}

src/examples/01/modules/main.js

@@ -0,0 +1,3 @@
+import { diag } from './lib';
+
+console.log( diag( 3, 4 ) ); // 5

src/examples/01/name

@@ -0,0 +1 @@
+second example