add changes from #112 to #111

README.md

@@ -43,13 +43,19 @@ const { code, map } = svelte.compile( source, {
 		console.error( err.message );
 	},
 
-	onwarning: warning => {
+	onwarn: warning => {
 		console.warn( warning.message );
 	}
 });
 ```
 
 
+## Example/starter repos
+
+* [charpeni/svelte-example](https://github.com/charpeni/svelte-example) - Some Svelte examples with configured Rollup, Babel, ESLint, directives, Two-Way binding, and nested components
+* [EmilTholin/svelte-test](https://github.com/EmilTholin/svelte-test)
+
+
 ## License
 
 [MIT](LICENSE)

compiler/generate/index.js

@@ -27,8 +27,8 @@ export default function generate ( parsed, source, options ) {
 				` );
 			}
 			if ( isToplevel ) {
-				generator.current.teardownStatements.push( deindent`
-					if ( detach ) ${name}.parentNode.removeChild( ${name} );
+				generator.current.detachStatements.push( deindent`
+					${name}.parentNode.removeChild( ${name} );
 				` );
 			}
 		},
@@ -72,6 +72,10 @@ export default function generate ( parsed, source, options ) {
 
 						teardown: function ( detach ) {
 							${fragment.teardownStatements.join( '\n\n' )}
+
+							if ( detach ) {
+								${fragment.detachStatements.join( '\n\n' )}
+							}
 						}
 					};
 				}
@@ -255,6 +259,7 @@ export default function generate ( parsed, source, options ) {
 		initStatements: [],
 		mountStatements: [],
 		updateStatements: [],
+		detachStatements: [],
 		teardownStatements: [],
 
 		contexts: {},
@@ -516,6 +521,7 @@ export default function generate ( parsed, source, options ) {
 			};
 
 			this.root = options.root;
+			this.yield = options.yield;
 
 			${initStatements.join( '\n\n' )}
 		}

compiler/generate/visitors/Component.js

@@ -1,8 +1,10 @@
 import deindent from '../utils/deindent.js';
 import addComponentAttributes from './attributes/addComponentAttributes.js';
+import counter from '../utils/counter.js';
 
 export default {
 	enter ( generator, node ) {
+		const hasChildren = node.children.length > 0;
 		const name = generator.current.counter( `${node.name[0].toLowerCase()}${node.name.slice( 1 )}` );
 
 		const local = {
@@ -24,13 +26,49 @@ export default {
 
 		addComponentAttributes( generator, node, local );
 
+		const componentInitProperties = [
+			`target: ${!isToplevel ? generator.current.target: 'null'}`,
+			'root: component.root || component'
+		];
+		// Component has children
+		if ( hasChildren ) {
+			const yieldName = `render${name}YieldFragment`;
+
+			// {{YIELD STUFF}}
+			generator.push({
+				useAnchor: true,
+				name: generator.current.counter(yieldName),
+				target: 'target',
+				localElementDepth: 0,
+
+				initStatements: [],
+				mountStatements: [],
+				updateStatements: [],
+				teardownStatements: [],
+
+				counter: counter()
+			});
+
+			node.children.forEach( generator.visit );
+			generator.addRenderer( generator.current );
+			generator.pop();
+
+			// Don't render children twice
+			node.children = [];
+
+			generator.current.initStatements.push(`var ${name}_yieldFragment = ${yieldName}( root, component );`);
+			generator.current.updateStatements.push(`${name}_yieldFragment.update ( changed, root );`);
+
+			componentInitProperties.push(`yield: ${name}_yieldFragment`);
+		}
+
+		const statements = [];
+
 		if ( local.staticAttributes.length || local.dynamicAttributes.length || local.bindings.length ) {
 			const initialProps = local.staticAttributes
 				.concat( local.dynamicAttributes )
 				.map( attribute => `${attribute.name}: ${attribute.value}` );
 
-			const statements = [];
-
 			if ( initialProps.length ) {
 				statements.push( deindent`
 					var ${name}_initialData = {
@@ -50,25 +88,16 @@ export default {
 
 				statements.push( bindings.join( '\n' ) );
 			}
-
-			local.init.unshift( deindent`
-				${statements.join( '\n\n' )}
-
-				var ${name} = new template.components.${node.name}({
-					target: ${!isToplevel ? generator.current.target: 'null'},
-					root: component.root || component,
-					data: ${name}_initialData
-				});
-			` );
-		} else {
-			local.init.unshift( deindent`
-				var ${name} = new template.components.${node.name}({
-					target: ${!isToplevel ? generator.current.target: 'null'},
-					root: component.root || component
-				});
-			` );
+			componentInitProperties.push(`data: ${name}_initialData`);
 		}
 
+		local.init.unshift( deindent`
+			${statements.join( '\n\n' )}
+			var ${name} = new template.components.${node.name}({
+				${componentInitProperties.join(',\n')}
+			});
+		` );
+
 		if ( isToplevel ) {
 			local.mount.unshift( `${name}.mount( target, anchor );` );
 		}

compiler/generate/visitors/EachBlock.js

@@ -102,6 +102,7 @@ export default {
 
 				return `var ${contextName} = ${listName}[${indexName}];`;
 			}).join( '\n' ) ],
+			detachStatements: [],
 			teardownStatements: [],
 
 			counter: counter(),

compiler/generate/visitors/Element.js

@@ -21,6 +21,7 @@ export default {
 			init: [],
 			mount: [],
 			update: [],
+			detach: [],
 			teardown: []
 		};
 
@@ -81,6 +82,7 @@ export default {
 		generator.current.initStatements.push( local.init.join( '\n' ) );
 		if ( local.update.length ) generator.current.updateStatements.push( local.update.join( '\n' ) );
 		if ( local.mount.length ) generator.current.mountStatements.push( local.mount.join( '\n' ) );
+		generator.current.detachStatements.push( local.detach.join( '\n' ) );
 		generator.current.teardownStatements.push( local.teardown.join( '\n' ) );
 
 		generator.createMountStatement( name );

compiler/generate/visitors/IfBlock.js

@@ -13,6 +13,7 @@ function generateBlock ( generator, node, name ) {
 		initStatements: [],
 		mountStatements: [],
 		updateStatements: [],
+		detachStatements: [],
 		teardownStatements: [],
 
 		counter: counter()

compiler/generate/visitors/YieldTag.js

@@ -0,0 +1,7 @@
+export default {
+	enter ( generator ) {
+	  const anchor = generator.createAnchor( 'yield', 'yield' );
+		generator.current.mountStatements.push(`component.yield && component.yield.mount( ${generator.current.target}, ${anchor} );`);
+		generator.current.teardownStatements.push(`component.yield && component.yield.teardown( detach );`);
+	}
+};

compiler/generate/visitors/index.js

@@ -4,12 +4,14 @@ import Element from './Element.js';
 import IfBlock from './IfBlock.js';
 import MustacheTag from './MustacheTag.js';
 import Text from './Text.js';
+import YieldTag from './YieldTag.js';
 
 export default {
 	Comment,
 	EachBlock,
 	Element,
 	IfBlock,
 	MustacheTag,
-	Text
+	Text,
+	YieldTag
 };

compiler/parse/state/mustache.js

@@ -177,6 +177,19 @@ export default function mustache ( parser ) {
 		parser.stack.push( block );
 	}
 
+	// {{yield}}
+	else if ( parser.eat( 'yield' ) ) {
+
+		parser.allowWhitespace();
+		parser.eat( '}}', true );
+
+		parser.current().children.push({
+			start,
+			end: parser.index,
+			type: 'YieldTag'
+		});
+	}
+
 	else {
 		const expression = readExpression( parser );
 

compiler/validate/js/propValidators/computed.js

@@ -21,7 +21,14 @@ export default function computed ( validator, prop ) {
 			return;
 		}
 
-		computation.value.params.forEach( param => {
+		const params = computation.value.params;
+
+		if ( params.length === 0 ) {
+			validator.error( `A computed value must depend on at least one property`, computation.value.start );
+			return;
+		}
+
+		params.forEach( param => {
 			const valid = param.type === 'Identifier' || param.type === 'AssignmentPattern' && param.left.type === 'Identifier';
 
 			if ( !valid ) {

test/compiler/component-yield-if/Widget.html

@@ -0,0 +1,15 @@
+<p>
+	{{#if show}}
+		{{yield}}
+	{{/if}}
+</p>
+
+<script>
+	export default {
+		data () {
+			return {
+				show: false
+			}
+		}
+	};
+</script>

test/compiler/component-yield-if/_config.js

@@ -0,0 +1,24 @@
+export default {
+	html: '<div><p></p></div>',
+
+	test ( assert, component, target ) {
+		const widget = component.refs.widget;
+
+		assert.equal( widget.get( 'show' ), false );
+
+		widget.set({show: true});
+		assert.htmlEqual( target.innerHTML, '<div><p>Hello</p></div>' );
+
+		component.set({data: 'World'});
+		assert.htmlEqual( target.innerHTML, '<div><p>World</p></div>' );
+
+		widget.set({show: false});
+		assert.htmlEqual( target.innerHTML, '<div><p></p></div>' );
+
+		component.set({data: 'Goodbye'});
+		assert.htmlEqual( target.innerHTML, '<div><p></p></div>' );
+
+		widget.set({show: true});
+		assert.htmlEqual( target.innerHTML, '<div><p>Goodbye</p></div>' );
+	}
+};

test/compiler/component-yield-if/main.html

@@ -0,0 +1,14 @@
+<div>
+	<Widget ref:widget>{{data}}</Widget>
+</div>
+<script>
+	import Widget from './Widget.html'
+	export default {
+		components: { Widget },
+		data(){
+			return {
+				data: "Hello"
+			}
+		}
+	}
+</script>

test/compiler/component-yield-parent/Widget.html

@@ -0,0 +1 @@
+<p>{{yield}}</p>

test/compiler/component-yield-parent/_config.js

@@ -0,0 +1,9 @@
+export default {
+	html: '<div><p>Hello</p></div>',
+	test ( assert, component, target ) {
+		assert.equal( component.get( 'data' ), 'Hello' );
+		component.set({data: 'World'})
+		assert.equal( component.get( 'data' ), 'World' );
+		assert.equal( target.innerHTML, '<div><p>World<!--yield--></p></div>' );
+	}
+}

test/compiler/component-yield-parent/main.html

@@ -0,0 +1,14 @@
+<div>
+	<Widget>{{data}}</Widget>
+</div>
+<script>
+	import Widget from './Widget.html'
+	export default {
+		components: { Widget },
+		data(){
+			return {
+				data: "Hello"
+			}
+		}
+	}
+</script>

test/compiler/component-yield/_config.js

@@ -0,0 +1,3 @@
+export default {
+  html: '<p>Hello</p>'
+}

test/compiler/component-yield/main.html

@@ -0,0 +1,15 @@
+<p>
+  Hello
+  {{#if test}}
+    {{yield}}
+  {{/if}}
+</p>
+<script>
+  export default {
+    data(){
+      return {
+        test: true
+      }
+    }
+  }
+</script>

test/parser/yield/input.html

@@ -0,0 +1 @@
+{{yield}}

test/parser/yield/output.json

@@ -0,0 +1,14 @@
+{
+  "html": {
+    "start": 0,
+    "end": 9,
+    "type": "Fragment",
+    "children": [
+      {
+        "start": 0,
+        "end": 9,
+        "type": "YieldTag"
+      }
+    ]
+  }
+}