Przeglądaj źródła

Clear mess with change event and types.

Piotr Jasiun 9 lat temu
rodzic
commit
a374a72b3c

+ 7 - 7
packages/ckeditor5-engine/src/view/document.js

@@ -162,9 +162,9 @@ export default class Document {
 		this.roots.set( name, viewRoot );
 
 		// Mark changed nodes in the renderer.
-		viewRoot.on( 'change:children', ( evt, type, node ) => this.renderer.markToSync( 'CHILDREN', node ) );
-		viewRoot.on( 'change:attribute', ( evt, type, node ) => this.renderer.markToSync( 'ATTRIBTE', node ) );
-		viewRoot.on( 'change:text', ( evt, type, node ) => this.renderer.markToSync( 'TEXT', node ) );
+		viewRoot.on( 'change:children', ( evt, node ) => this.renderer.markToSync( 'children', node ) );
+		viewRoot.on( 'change:attributes', ( evt, node ) => this.renderer.markToSync( 'attributes', node ) );
+		viewRoot.on( 'change:text', ( evt, node ) => this.renderer.markToSync( 'text', node ) );
 
 		if ( domRoot instanceof HTMLElement ) {
 			this.attachDomRoot( domRoot, name );
@@ -191,7 +191,7 @@ export default class Document {
 
 		this.domConverter.bindElements( domRoot, viewRoot );
 
-		this.renderer.markToSync( 'CHILDREN', viewRoot );
+		this.renderer.markToSync( 'children', viewRoot );
 
 		for ( let observer of this._observers.values() ) {
 			observer.observe( domRoot, name );
@@ -257,9 +257,9 @@ mix( Document, EmitterMixin );
  *
  * Possible values:
  *
- * * `CHILDREN` - for child list changes,
- * * `ATTRIBUTES` - for element attributes changes,
- * * `TEXT` - for text nodes changes.
+ * * `children` - for child list changes,
+ * * `attributes` - for element attributes changes,
+ * * `text` - for text nodes changes.
  *
  * @typedef {String} engine.view.ChangeType
  */

+ 2 - 2
packages/ckeditor5-engine/src/view/documentfragment.js

@@ -100,7 +100,7 @@ export default class DocumentFragment {
 	 * @returns {Number} Number of inserted nodes.
 	 */
 	insertChildren( index, nodes ) {
-		this._fireChange( 'CHILDREN', this );
+		this._fireChange( 'children', this );
 		let count = 0;
 
 		if ( !isIterable( nodes ) ) {
@@ -126,7 +126,7 @@ export default class DocumentFragment {
 	 * @returns {Array.<engine.view.Node>} The array of removed nodes.
 	 */
 	removeChildren( index, howMany = 1 ) {
-		this._fireChange( 'CHILDREN', this );
+		this._fireChange( 'children', this );
 
 		for ( let i = index; i < index + howMany; i++ ) {
 			this._children[ i ].parent = null;

+ 8 - 8
packages/ckeditor5-engine/src/view/element.js

@@ -257,7 +257,7 @@ export default class Element extends Node {
 	 * @fires engine.view.Node#change
 	 */
 	setAttribute( key, value ) {
-		this._fireChange( 'ATTRIBUTES', this );
+		this._fireChange( 'attributes', this );
 
 		if ( key == 'class' ) {
 			parseClasses( this._classes, value );
@@ -278,7 +278,7 @@ export default class Element extends Node {
 	 * @returns {Number} Number of inserted nodes.
 	 */
 	insertChildren( index, nodes ) {
-		this._fireChange( 'CHILDREN', this );
+		this._fireChange( 'children', this );
 		let count = 0;
 
 		if ( !isIterable( nodes ) ) {
@@ -304,7 +304,7 @@ export default class Element extends Node {
 	 * @fires engine.view.Node#change
 	 */
 	removeAttribute( key ) {
-		this._fireChange( 'ATTRIBUTES', this );
+		this._fireChange( 'attributes', this );
 
 		// Remove class attribute.
 		if ( key == 'class' ) {
@@ -341,7 +341,7 @@ export default class Element extends Node {
 	 * @fires engine.view.Node#change
 	 */
 	removeChildren( index, howMany = 1 ) {
-		this._fireChange( 'CHILDREN', this );
+		this._fireChange( 'children', this );
 
 		for ( let i = index; i < index + howMany; i++ ) {
 			this._children[ i ].parent = null;
@@ -413,7 +413,7 @@ export default class Element extends Node {
 	 * @fires engine.view.Node#change
 	 */
 	addClass( ...className ) {
-		this._fireChange( 'ATTRIBUTES', this );
+		this._fireChange( 'attributes', this );
 		className.forEach( name => this._classes.add( name ) );
 	}
 
@@ -427,7 +427,7 @@ export default class Element extends Node {
 	 * @fires engine.view.Node#change
 	 */
 	removeClass( ...className ) {
-		this._fireChange( 'ATTRIBUTES', this );
+		this._fireChange( 'attributes', this );
 		className.forEach( name => this._classes.delete( name ) );
 	}
 
@@ -473,7 +473,7 @@ export default class Element extends Node {
 	 * @fires engine.view.Node#change
 	 */
 	setStyle( property, value ) {
-		this._fireChange( 'ATTRIBUTES', this );
+		this._fireChange( 'attributes', this );
 
 		if ( isPlainObject( property ) ) {
 			const keys = Object.keys( property );
@@ -535,7 +535,7 @@ export default class Element extends Node {
 	 * @fires engine.view.Node#change
 	 */
 	removeStyle( ...property ) {
-		this._fireChange( 'ATTRIBUTES', this );
+		this._fireChange( 'attributes', this );
 		property.forEach( name => this._styles.delete( name ) );
 	}
 }

+ 20 - 6
packages/ckeditor5-engine/src/view/node.js

@@ -143,7 +143,7 @@ export default class Node {
 	 * @fires engine.view.Node#change
 	 */
 	_fireChange( type, node ) {
-		this.fire( 'change' + type.toLowerCase(), type, node );
+		this.fire( 'change:' + type, node );
 
 		if ( this.parent ) {
 			this.parent._fireChange( type, node );
@@ -165,15 +165,29 @@ export default class Node {
 	 */
 
 	/**
-	 * Fired when a node changes.
+	 * Fired when list of {@link engine.view.Element elements} children changes.
 	 *
-	 * * In case of {@link engine.view.Text text nodes} it will be a change of the text data.
-	 * * In case of {@link engine.view.Element elements} it will be a change of child nodes or attributes.
+	 * Change event is bubbling, it is fired on the ancestors chain.
+	 *
+	 * @event engine.view.Node#change:children
+	 * @param {engine.view.Node} Changed node.
+	 */
+
+	/**
+	 * Fired when list of {@link engine.view.Element elements} attributes changes.
+	 *
+	 * Change event is bubbling, it is fired on the ancestors chain.
+	 *
+	 * @event engine.view.Node#change:attributes
+	 * @param {engine.view.Node} Changed node.
+	 */
+
+	/**
+	 * Fired when {@link engine.view.Text text nodes} data changes.
 	 *
 	 * Change event is bubbling, it is fired on the ancestors chain.
 	 *
-	 * @event engine.view.Node#change
-	 * @param {engine.view.ChangeType} Type of the change.
+	 * @event engine.view.Node#change:text
 	 * @param {engine.view.Node} Changed node.
 	 */
 }

+ 2 - 2
packages/ckeditor5-engine/src/view/observer/mutationobserver.js

@@ -175,7 +175,7 @@ export default class MutationObserver extends Observer {
 		const viewMutations = [];
 
 		for ( let mutatedText of mutatedTexts.values() ) {
-			this.renderer.markToSync( 'TEXT', mutatedText.node );
+			this.renderer.markToSync( 'text', mutatedText.node );
 			viewMutations.push( mutatedText );
 		}
 
@@ -184,7 +184,7 @@ export default class MutationObserver extends Observer {
 			const viewChildren = viewElement.getChildren();
 			const newViewChildren = domConverter.domChildrenToView( domElement );
 
-			this.renderer.markToSync( 'CHILDREN', viewElement );
+			this.renderer.markToSync( 'children', viewElement );
 			viewMutations.push( {
 				type: 'children',
 				oldChildren: Array.from( viewChildren ),

+ 3 - 3
packages/ckeditor5-engine/src/view/renderer.js

@@ -113,7 +113,7 @@ export default class Renderer {
 	 * @param {engine.view.Node} node Node to be marked.
 	 */
 	markToSync( type, node ) {
-		if ( type === 'TEXT' ) {
+		if ( type === 'text' ) {
 			if ( this.domConverter.getCorrespondingDom( node.parent ) ) {
 				this.markedTexts.add( node );
 			}
@@ -124,9 +124,9 @@ export default class Renderer {
 				return;
 			}
 
-			if ( type === 'ATTRIBUTES' ) {
+			if ( type === 'attributes' ) {
 				this.markedAttributes.add( node );
-			} else if ( type === 'CHILDREN' ) {
+			} else if ( type === 'children' ) {
 				this.markedChildren.add( node );
 			} else {
 				/**

+ 1 - 1
packages/ckeditor5-engine/src/view/text.js

@@ -52,7 +52,7 @@ export default class Text extends Node {
 	}
 
 	set data( data ) {
-		this._fireChange( 'TEXT', this );
+		this._fireChange( 'text', this );
 
 		this._data = data;
 	}

+ 3 - 3
packages/ckeditor5-engine/tests/view/documentfragment.js

@@ -91,7 +91,7 @@ describe( 'DocumentFragment', () => {
 
 			it( 'should fire change event when inserting', ( done ) => {
 				fragment.once( 'change', ( event, type ) => {
-					expect( type ).to.equal( 'CHILDREN' );
+					expect( type ).to.equal( 'children' );
 					done();
 				} );
 
@@ -100,7 +100,7 @@ describe( 'DocumentFragment', () => {
 
 			it( 'should fire change event when appending', ( done ) => {
 				fragment.once( 'change', ( event, type ) => {
-					expect( type ).to.equal( 'CHILDREN' );
+					expect( type ).to.equal( 'children' );
 					done();
 				} );
 
@@ -177,7 +177,7 @@ describe( 'DocumentFragment', () => {
 				fragment.appendChildren( el1 );
 
 				fragment.once( 'change', ( event, type ) => {
-					expect( type ).to.equal( 'CHILDREN' );
+					expect( type ).to.equal( 'children' );
 					done();
 				} );
 

+ 12 - 24
packages/ckeditor5-engine/tests/view/element.js

@@ -340,11 +340,9 @@ describe( 'Element', () => {
 				expect( el._attrs.get( 'foo' ) ).to.equal( 'bar' );
 			} );
 
-			it( 'should fire change event with ATTRIBUTES type', ( done ) => {
-				el.once( 'change', ( eventInfo, type ) => {
-					expect( eventInfo.name ).to.equal( 'change' );
+			it( 'should fire change event with attributes type', ( done ) => {
+				el.once( 'change:attributes', ( eventInfo ) => {
 					expect( eventInfo.source ).to.equal( el );
-					expect( type ).to.equal( 'ATTRIBUTES' );
 					done();
 				} );
 
@@ -486,12 +484,10 @@ describe( 'Element', () => {
 				expect( count( el.getAttributeKeys() ) ).to.equal( 0 );
 			} );
 
-			it( 'should fire change event with ATTRIBUTES type', ( done ) => {
+			it( 'should fire change event with attributes type', ( done ) => {
 				el.setAttribute( 'foo', 'bar' );
-				el.once( 'change', ( eventInfo, type ) => {
-					expect( eventInfo.name ).to.equal( 'change' );
+				el.once( 'change:attributes', ( eventInfo ) => {
 					expect( eventInfo.source ).to.equal( el );
-					expect( type ).to.equal( 'ATTRIBUTES' );
 					done();
 				} );
 
@@ -541,11 +537,9 @@ describe( 'Element', () => {
 				expect( el._classes.has( 'one' ) ).to.be.true;
 			} );
 
-			it( 'should fire change event with ATTRIBUTES type', ( done ) => {
-				el.once( 'change', ( eventInfo, type ) => {
-					expect( eventInfo.name ).to.equal( 'change' );
+			it( 'should fire change event with attributes type', ( done ) => {
+				el.once( 'change:attributes', ( eventInfo ) => {
 					expect( eventInfo.source ).to.equal( el );
-					expect( type ).to.equal( 'ATTRIBUTES' );
 					done();
 				} );
 
@@ -572,12 +566,10 @@ describe( 'Element', () => {
 				expect( el._classes.has( 'three' ) ).to.be.true;
 			} );
 
-			it( 'should fire change event with ATTRIBUTES type', ( done ) => {
+			it( 'should fire change event with attributes type', ( done ) => {
 				el.addClass( 'one' );
-				el.once( 'change', ( eventInfo, type ) => {
-					expect( eventInfo.name ).to.equal( 'change' );
+				el.once( 'change:attributes', ( eventInfo ) => {
 					expect( eventInfo.source ).to.equal( el );
-					expect( type ).to.equal( 'ATTRIBUTES' );
 					done();
 				} );
 
@@ -644,11 +636,9 @@ describe( 'Element', () => {
 				expect( el._styles.get( 'color' ) ).to.equal( 'red' );
 			} );
 
-			it( 'should fire change event with ATTRIBUTES type', ( done ) => {
-				el.once( 'change', ( eventInfo, type ) => {
-					expect( eventInfo.name ).to.equal( 'change' );
+			it( 'should fire change event with attributes type', ( done ) => {
+				el.once( 'change:attributes', ( eventInfo ) => {
 					expect( eventInfo.source ).to.equal( el );
-					expect( type ).to.equal( 'ATTRIBUTES' );
 					done();
 				} );
 
@@ -725,12 +715,10 @@ describe( 'Element', () => {
 				expect( el.hasStyle( 'padding-top' ) ).to.be.false;
 			} );
 
-			it( 'should fire change event with ATTRIBUTES type', ( done ) => {
+			it( 'should fire change event with attributes type', ( done ) => {
 				el.setStyle( 'color', 'red' );
-				el.once( 'change', ( eventInfo, type ) => {
-					expect( eventInfo.name ).to.equal( 'change' );
+				el.once( 'change:attributes', ( eventInfo ) => {
 					expect( eventInfo.source ).to.equal( el );
-					expect( type ).to.equal( 'ATTRIBUTES' );
 					done();
 				} );
 

+ 13 - 13
packages/ckeditor5-engine/tests/view/node.js

@@ -193,9 +193,9 @@ describe( 'Node', () => {
 			root = new Element( 'p', { renderer: { markToSync: rootChangeSpy } } );
 			root.appendChildren( [ text, img ] );
 
-			root.on( 'change', ( evt, type, node ) => {
-				rootChangeSpy( type, node );
-			} );
+			root.on( 'change:children', ( evt, node ) => rootChangeSpy( 'children', node ) );
+			root.on( 'change:attributes', ( evt, node ) => rootChangeSpy( 'attributes', node ) );
+			root.on( 'change:text', ( evt, node ) => rootChangeSpy( 'text', node ) );
 
 			rootChangeSpy.reset();
 		} );
@@ -203,21 +203,21 @@ describe( 'Node', () => {
 		it( 'should be fired on the node', () => {
 			const imgChangeSpy = sinon.spy();
 
-			img.on( 'change', ( evt, type, node ) => {
-				imgChangeSpy( type, node );
+			img.on( 'change:attributes', ( evt, node ) => {
+				imgChangeSpy( 'attributes', node );
 			} );
 
 			img.setAttribute( 'width', 100 );
 
 			sinon.assert.calledOnce( imgChangeSpy );
-			sinon.assert.calledWith( imgChangeSpy, 'ATTRIBUTES', img );
+			sinon.assert.calledWith( imgChangeSpy, 'attributes', img );
 		} );
 
 		it( 'should be fired on the parent', () => {
 			img.setAttribute( 'width', 100 );
 
 			sinon.assert.calledOnce( rootChangeSpy );
-			sinon.assert.calledWith( rootChangeSpy, 'ATTRIBUTES', img );
+			sinon.assert.calledWith( rootChangeSpy, 'attributes', img );
 		} );
 
 		describe( 'setAttr', () => {
@@ -225,7 +225,7 @@ describe( 'Node', () => {
 				img.setAttribute( 'width', 100 );
 
 				sinon.assert.calledOnce( rootChangeSpy );
-				sinon.assert.calledWith( rootChangeSpy, 'ATTRIBUTES', img );
+				sinon.assert.calledWith( rootChangeSpy, 'attributes', img );
 			} );
 		} );
 
@@ -234,7 +234,7 @@ describe( 'Node', () => {
 				img.removeAttribute( 'src' );
 
 				sinon.assert.calledOnce( rootChangeSpy );
-				sinon.assert.calledWith( rootChangeSpy, 'ATTRIBUTES', img );
+				sinon.assert.calledWith( rootChangeSpy, 'attributes', img );
 			} );
 		} );
 
@@ -243,7 +243,7 @@ describe( 'Node', () => {
 				root.insertChildren( 1, new Element( 'img' ) );
 
 				sinon.assert.calledOnce( rootChangeSpy );
-				sinon.assert.calledWith( rootChangeSpy, 'CHILDREN', root );
+				sinon.assert.calledWith( rootChangeSpy, 'children', root );
 			} );
 		} );
 
@@ -252,7 +252,7 @@ describe( 'Node', () => {
 				root.appendChildren( new Element( 'img' ) );
 
 				sinon.assert.calledOnce( rootChangeSpy );
-				sinon.assert.calledWith( rootChangeSpy, 'CHILDREN', root );
+				sinon.assert.calledWith( rootChangeSpy, 'children', root );
 			} );
 		} );
 
@@ -261,7 +261,7 @@ describe( 'Node', () => {
 				root.removeChildren( 1, 1 );
 
 				sinon.assert.calledOnce( rootChangeSpy );
-				sinon.assert.calledWith( rootChangeSpy, 'CHILDREN', root );
+				sinon.assert.calledWith( rootChangeSpy, 'children', root );
 			} );
 		} );
 
@@ -270,7 +270,7 @@ describe( 'Node', () => {
 				text.data = 'bar';
 
 				sinon.assert.calledOnce( rootChangeSpy );
-				sinon.assert.calledWith( rootChangeSpy, 'TEXT', text );
+				sinon.assert.calledWith( rootChangeSpy, 'text', text );
 			} );
 		} );
 	} );

+ 52 - 52
packages/ckeditor5-engine/tests/view/renderer.js

@@ -44,7 +44,7 @@ describe( 'Renderer', () => {
 		it( 'should mark attributes which need update', () => {
 			viewRoot.setAttribute( 'class', 'foo' );
 
-			renderer.markToSync( 'ATTRIBUTES', viewRoot );
+			renderer.markToSync( 'attributes', viewRoot );
 
 			expect( renderer.markedAttributes.has( viewRoot ) ).to.be.true;
 		} );
@@ -52,7 +52,7 @@ describe( 'Renderer', () => {
 		it( 'should mark children which need update', () => {
 			viewRoot.appendChildren( new ViewText( 'foo' ) );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 
 			expect( renderer.markedChildren.has( viewRoot ) ).to.be.true;
 		} );
@@ -63,7 +63,7 @@ describe( 'Renderer', () => {
 
 			viewRoot.appendChildren( new ViewText( 'foo' ) );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 
 			expect( renderer.markedTexts.has( viewRoot ) ).to.be.false;
 		} );
@@ -73,7 +73,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewText );
 			viewText.data = 'bar';
 
-			renderer.markToSync( 'TEXT', viewText );
+			renderer.markToSync( 'text', viewText );
 
 			expect( renderer.markedTexts.has( viewText ) ).to.be.true;
 		} );
@@ -86,7 +86,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewText );
 			viewText.data = 'bar';
 
-			renderer.markToSync( 'TEXT', viewText );
+			renderer.markToSync( 'text', viewText );
 
 			expect( renderer.markedTexts.has( viewText ) ).to.be.false;
 		} );
@@ -118,7 +118,7 @@ describe( 'Renderer', () => {
 		it( 'should update attributes', () => {
 			viewRoot.setAttribute( 'class', 'foo' );
 
-			renderer.markToSync( 'ATTRIBUTES', viewRoot );
+			renderer.markToSync( 'attributes', viewRoot );
 			renderer.render();
 
 			expect( domRoot.getAttribute( 'class' ) ).to.equal( 'foo' );
@@ -131,7 +131,7 @@ describe( 'Renderer', () => {
 			domRoot.setAttribute( 'id', 'bar' );
 			domRoot.setAttribute( 'class', 'bar' );
 
-			renderer.markToSync( 'ATTRIBUTES', viewRoot );
+			renderer.markToSync( 'attributes', viewRoot );
 			renderer.render();
 
 			expect( domRoot.getAttribute( 'class' ) ).to.equal( 'foo' );
@@ -143,7 +143,7 @@ describe( 'Renderer', () => {
 		it( 'should add children', () => {
 			viewRoot.appendChildren( new ViewText( 'foo' ) );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 1 );
@@ -155,7 +155,7 @@ describe( 'Renderer', () => {
 		it( 'should remove children', () => {
 			viewRoot.appendChildren( new ViewText( 'foo' ) );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 1 );
@@ -163,7 +163,7 @@ describe( 'Renderer', () => {
 
 			viewRoot.removeChildren( 0, 1 );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 0 );
@@ -175,7 +175,7 @@ describe( 'Renderer', () => {
 			const viewText = new ViewText( 'foo' );
 			viewRoot.appendChildren( viewText );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 1 );
@@ -183,7 +183,7 @@ describe( 'Renderer', () => {
 
 			viewText.data = 'bar';
 
-			renderer.markToSync( 'TEXT', viewText );
+			renderer.markToSync( 'text', viewText );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 1 );
@@ -197,8 +197,8 @@ describe( 'Renderer', () => {
 			const viewText = new ViewText( 'foo' );
 			viewRoot.appendChildren( [ viewImg, viewText ] );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
-			renderer.markToSync( 'TEXT', viewText );
+			renderer.markToSync( 'children', viewRoot );
+			renderer.markToSync( 'text', viewText );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 2 );
@@ -210,13 +210,13 @@ describe( 'Renderer', () => {
 			const viewText = new ViewText( 'foo' );
 			viewRoot.appendChildren( viewText );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			// This should not be changed during the render.
 			const domText = domRoot.childNodes[ 0 ];
 
-			renderer.markToSync( 'TEXT', viewText );
+			renderer.markToSync( 'text', viewText );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 1 );
@@ -227,13 +227,13 @@ describe( 'Renderer', () => {
 			const viewText = new ViewText( 'foo' );
 			viewRoot.appendChildren( viewText );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			// This should not be changed during the render.
 			const domText = domRoot.childNodes[ 0 ];
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 1 );
@@ -250,7 +250,7 @@ describe( 'Renderer', () => {
 
 			domConverter.bindElements( domImg, viewImg );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 1 );
@@ -261,14 +261,14 @@ describe( 'Renderer', () => {
 			const viewImg = new ViewElement( 'img' );
 			viewRoot.appendChildren( viewImg );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const viewP = new ViewElement( 'p' );
 			viewRoot.removeChildren( 0, 1 );
 			viewRoot.appendChildren( viewP );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 1 );
@@ -285,7 +285,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			expect( domRoot.childNodes.length ).to.equal( 1 );
@@ -306,8 +306,8 @@ describe( 'Renderer', () => {
 			expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
 
 			// Step 2: No mutation on second render
-			renderer.markToSync( 'CHILDREN', viewRoot );
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewRoot );
+			renderer.markToSync( 'children', viewP );
 
 			renderAndExpectNoChanges( renderer, domRoot );
 
@@ -329,8 +329,8 @@ describe( 'Renderer', () => {
 			expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
 
 			// Step 4: No mutation on second render
-			renderer.markToSync( 'CHILDREN', viewRoot );
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewRoot );
+			renderer.markToSync( 'children', viewP );
 
 			renderAndExpectNoChanges( renderer, domRoot );
 		} );
@@ -345,7 +345,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -362,7 +362,7 @@ describe( 'Renderer', () => {
 			expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
 
 			// Step 2: No mutation on second render
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewP );
 			renderAndExpectNoChanges( renderer, domRoot );
 
 			// Step 3: <p><b>{}foo</b></p>
@@ -383,7 +383,7 @@ describe( 'Renderer', () => {
 			expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
 
 			// Step 4: No mutation on second render
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewP );
 			renderAndExpectNoChanges( renderer, domRoot );
 		} );
 
@@ -397,7 +397,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -414,7 +414,7 @@ describe( 'Renderer', () => {
 			expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
 
 			// Step 2: No mutation on second render
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewP );
 			renderAndExpectNoChanges( renderer, domRoot );
 
 			// Step 3: <p><b>foo{}</b></p>
@@ -435,7 +435,7 @@ describe( 'Renderer', () => {
 			expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
 
 			// Step 4: No mutation on second render
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewP );
 			renderAndExpectNoChanges( renderer, domRoot );
 		} );
 
@@ -448,7 +448,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -476,7 +476,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -504,7 +504,7 @@ describe( 'Renderer', () => {
 			selection.removeAllRanges();
 			selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
 
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewP );
 			renderAndExpectNoChanges( renderer, domRoot );
 		} );
 
@@ -516,7 +516,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -535,7 +535,7 @@ describe( 'Renderer', () => {
 			selection.removeAllRanges();
 			selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
 
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewP );
 			renderer.render();
 
 			expect( domP.childNodes.length ).to.equal( 1 );
@@ -555,7 +555,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -583,7 +583,7 @@ describe( 'Renderer', () => {
 			selection.removeAllRanges();
 			selection.addRange( ViewRange.createFromParentsAndOffsets( viewP, 0, viewP, 0 ) );
 
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewP );
 			renderAndExpectNoChanges( renderer, domRoot );
 		} );
 
@@ -596,7 +596,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -630,11 +630,11 @@ describe( 'Renderer', () => {
 			selection.removeAllRanges();
 			selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
 
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewP );
 			renderAndExpectNoChanges( renderer, domRoot );
 		} );
 
-		it( 'should handle typing in empty attribute as a CHILDREN change, render if needed', () => {
+		it( 'should handle typing in empty attribute as a children change, render if needed', () => {
 			const domSelection = document.getSelection();
 
 			const { view: viewP, selection: newSelection } = parse(
@@ -643,7 +643,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -669,7 +669,7 @@ describe( 'Renderer', () => {
 			selection.removeAllRanges();
 			selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
 
-			renderer.markToSync( 'CHILDREN', viewB );
+			renderer.markToSync( 'children', viewB );
 			renderer.render();
 
 			expect( domB.childNodes.length ).to.equal( 1 );
@@ -681,7 +681,7 @@ describe( 'Renderer', () => {
 			expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
 		} );
 
-		it( 'should handle typing in empty attribute as a TEXT change, render if needed', () => {
+		it( 'should handle typing in empty attribute as a text change, render if needed', () => {
 			const domSelection = document.getSelection();
 
 			const { view: viewP, selection: newSelection } = parse(
@@ -690,7 +690,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -716,7 +716,7 @@ describe( 'Renderer', () => {
 			selection.removeAllRanges();
 			selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
 
-			renderer.markToSync( 'TEXT', viewText );
+			renderer.markToSync( 'text', viewText );
 			renderer.render();
 
 			expect( domB.childNodes.length ).to.equal( 1 );
@@ -737,7 +737,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -754,7 +754,7 @@ describe( 'Renderer', () => {
 			expect( domSelection.getRangeAt( 0 ).endContainer ).to.equal( domP.childNodes[ 1 ].childNodes[ 0 ] );
 			expect( domSelection.getRangeAt( 0 ).endOffset ).to.equal( 1 );
 
-			renderer.markToSync( 'CHILDREN', viewP );
+			renderer.markToSync( 'children', viewP );
 			renderAndExpectNoChanges( renderer, domRoot );
 		} );
 
@@ -766,7 +766,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domP = domRoot.childNodes[ 0 ];
@@ -787,7 +787,7 @@ describe( 'Renderer', () => {
 			viewRoot.appendChildren( viewP );
 			selection.setTo( newSelection );
 
-			renderer.markToSync( 'CHILDREN', viewRoot );
+			renderer.markToSync( 'children', viewRoot );
 			renderer.render();
 
 			const domB = domRoot.childNodes[ 0 ].childNodes[ 1 ];
@@ -799,7 +799,7 @@ describe( 'Renderer', () => {
 			domB.childNodes[ 0 ].data = '';
 
 			selection.removeAllRanges();
-			renderer.markToSync( 'CHILDREN', viewB );
+			renderer.markToSync( 'children', viewB );
 
 			expect( () => {
 				renderer.render();