preact.diff

diff --git a/package.json b/package.json
index 1a709407c..fb4b9072f 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "nyc": "13.0.1",
     "oojs": "2.2.2",
     "pre-commit": "1.2.2",
+    "preact": "8.4.2",
     "qunit": "2.7.0",
     "sinon": "1.17.3",
     "stylelint-config-wikimedia": "0.5.0",
@@ -63,7 +64,7 @@
     },
     {
       "path": "resources/dist/mobile.startup.js",
-      "maxSize": "15.7KB"
+      "maxSize": "19.2KB"
     },
     {
       "path": "resources/dist/mobile.languages.structured.js",
diff --git a/src/mobile.startup/Anchor.js b/src/mobile.startup/Anchor.js
index 5c714d871..9ecf7c5d3 100644
--- a/src/mobile.startup/Anchor.js
+++ b/src/mobile.startup/Anchor.js
@@ -1,45 +1,32 @@
-var
-	h = require( 'vhtml' ),
-	View = require( './View' ),
-	mfExtend = require( './mfExtend' );
-
+var preact = require( 'preact' );
 // tell babel to transpile JSX to h() calls:
-/** @jsx h */
+/** @jsx preact.h */
 
 /**
  * A wrapper for creating an anchor.
  * @class Anchor
- * @extends View
+ * @extends Preact.Component
  */
-function Anchor() {
-	View.apply( this, arguments );
-}
-
-mfExtend( Anchor, View, {
+class Anchor extends preact.Component {
 	/**
 	 * @memberof Anchor
 	 * @instance
-	 * @mixes View#defaults
-	 * @property {Object} defaults Default options hash.
+	 * @param {Object} defaults Default options hash.
 	 * @property {boolean} defaults.progressive is progressive action
 	 * @property {boolean} defaults.destructive is destructive action
 	 * @property {string} defaults.additionalClassNames Additional class name(s).
 	 * @property {string} defaults.href url
 	 * @property {string} defaults.label of anchor
 	 */
-	defaults: {
-		progressive: undefined,
-		destructive: undefined,
-		additionalClassNames: '',
-		href: undefined,
-		label: undefined
-	},
+	constructor( defaults ) {
+		super( defaults )
+	}
 	/**
 	 * @inheritdoc
 	 * @memberof Anchor
 	 * @instance
 	 */
-	hypertext: function ( { href, progressive, destructive, additionalClassNames, label } ) {
+	render ( { href, progressive, destructive, additionalClassNames, label } ) {
 		const className = [ 'mw-ui-anchor' ];
 		if ( progressive ) {
 			className.push( 'mw-ui-progressive' );
@@ -53,6 +40,6 @@ mfExtend( Anchor, View, {
 		return <a href={href}
 			className={className.join( ' ' )}>{label}</a>;
 	}
-} );
+}
 
 module.exports = Anchor;
diff --git a/src/mobile.startup/Button.js b/src/mobile.startup/Button.js
index 903d6bb3b..17f7200a6 100644
--- a/src/mobile.startup/Button.js
+++ b/src/mobile.startup/Button.js
@@ -1,7 +1,4 @@
-var
-	h = require( 'vhtml' ),
-	mfExtend = require( './mfExtend' ),
-	View = require( './View' );
+var preact = require( 'preact' );
 
 // tell babel to transpile JSX to h() calls:
 /** @jsx h */
@@ -9,57 +6,42 @@ var
 /**
  * A wrapper for creating a button.
  * @class Button
- * @extends View
+ * @extends Preact.Component
  *
  * @param {Object} options Configuration options
  */
-function Button( options ) {
-	if ( options.href ) {
-		options.tagName = 'a';
-	}
-	View.call( this, options );
-}
-
-mfExtend( Button, View, {
-	/**
-	 * @inheritdoc
-	 * @memberof Button
-	 * @instance
-	 */
-	isTemplateMode: true,
+class Button extends preact.Component {
 	/**
 	 * @memberof Button
 	 * @instance
 	 * @mixes View#defaults
-	 * @property {Object} defaults Default options hash.
-	 * @property {string} defaults.tagName The name of the tag in which the button is wrapped.
+	 * @param {Object} defaults Default options hash.
+	 * @param {string} defaults.tagName The name of the tag in which the button is wrapped.
 	 * 	Either 'button' or 'a'
-	 * @property {boolean} defaults.block is stacked button
-	 * @property {boolean} defaults.progressive is progressive action
+	 * @param {boolean} defaults.block is stacked button
+	 * @param {boolean} defaults.progressive is progressive action
 	 *   This option is deprecated. Please use `progressive`.
-	 * @property {boolean} defaults.quiet is quiet button
-	 * @property {boolean} defaults.destructive is destructive action
-	 * @property {string} defaults.additionalClassNames Additional class name(s).
-	 * @property {string} defaults.href url
-	 * @property {string} defaults.label of button
+	 * @param {boolean} defaults.quiet is quiet button
+	 * @param {boolean} defaults.destructive is destructive action
+	 * @param {string} defaults.additionalClassNames Additional class name(s).
+	 * @param {string} defaults.href url
+	 * @param {string} defaults.label of button
 	 */
-	defaults: {
-		tagName: 'a',
-		block: undefined,
-		progressive: undefined,
-		destructive: undefined,
-		quiet: undefined,
-		additionalClassNames: '',
-		href: undefined,
-		label: undefined
-	},
+	constructor( defaults ) {
+		if ( defaults.href ) {
+			defaults.tagName = 'a';
+		}
+		super( defaults );
+	}
 	/**
 	 * @inheritdoc
 	 */
-	hypertext: function ( {
-		tagName, href, progressive, quiet, block, destructive,
-		additionalClassNames, label
-	} ) {
+	render (
+		{
+			tagName, href, progressive, quiet, block, destructive,
+			additionalClassNames, label
+		}
+	) {
 		const className = [ 'mw-ui-button' ];
 
 		if ( progressive ) {
@@ -86,6 +68,6 @@ mfExtend( Button, View, {
 				return <div class={className.join( ' ' )}>{label}</div>;
 		}
 	}
-} );
+}
 
 module.exports = Button;
diff --git a/src/mobile.startup/CtaDrawer.js b/src/mobile.startup/CtaDrawer.js
index d7b7c649e..2de80a7c2 100644
--- a/src/mobile.startup/CtaDrawer.js
+++ b/src/mobile.startup/CtaDrawer.js
@@ -1,4 +1,6 @@
 var
+	preact = require( 'preact' ),
+	/** @jsx preact.h */
 	mfExtend = require( './mfExtend' ),
 	Drawer = require( './Drawer' ),
 	util = require( './util' ),
@@ -78,25 +80,19 @@ mfExtend( CtaDrawer, Drawer, {
 	 * @inheritdoc
 	 */
 	postRender: function () {
-		var options = this.options,
+		var { actionAnchor, closeAnchor, progressiveButton } = this.options,
 			anchors = [];
-		if ( options.actionAnchor ) {
-			anchors.push( new Anchor( options.actionAnchor ) );
+		if ( actionAnchor ) {
+			anchors.push( <Anchor {...actionAnchor} /> );
 		}
-		if ( options.closeAnchor ) {
-			anchors.push( new Anchor( options.closeAnchor ) );
+		if ( closeAnchor ) {
+			anchors.push( <Anchor {...closeAnchor} /> );
 		}
-		Drawer.prototype.postRender.apply( this, arguments );
-		if ( options.progressiveButton ) {
-			( new Button( options.progressiveButton ) ).$el.insertBefore(
-				this.$( '.cta-drawer__anchors' )
-			);
+		if ( progressiveButton ) {
+			anchors.unshift( <Button {...progressiveButton} /> );
 		}
-		this.$( '.cta-drawer__anchors' ).append(
-			anchors.map( function ( anchor ) {
-				return anchor.$el;
-			} )
-		);
+		preact.render( <div>{anchors}</div>, this.$( '.cta-drawer__anchors' )[0] );
+		Drawer.prototype.postRender.apply( this, arguments );
 	}
 } );
 
diff --git a/src/mobile.startup/Overlay.js b/src/mobile.startup/Overlay.js
index 8aae724e3..c460a95d5 100644
--- a/src/mobile.startup/Overlay.js
+++ b/src/mobile.startup/Overlay.js
@@ -1,8 +1,7 @@
 var
+	preact = require( 'preact' ),
+	/** @jsx preact.h */
 	View = require( './View' ),
-	h = require( 'vhtml' ),
-	// tell babel to transpile JSX to h() calls:
-	/** @jsx h */
 	Icon = require( './Icon' ),
 	Anchor = require( './Anchor' ),
 	icons = require( './icons' ),
@@ -206,9 +205,7 @@ mfExtend( Overlay, View, {
 		this.$( '.overlay-header h2 span' ).addClass( 'truncated-text' );
 		this.setupEmulatedIosOverlayScrolling();
 		if ( footerAnchor ) {
-			this.$( '.overlay-footer-container' ).append(
-				( new Anchor( footerAnchor ) ).$el
-			);
+			preact.render( <Anchor {...footerAnchor} />, this.$( '.overlay-footer-container' )[0] );
 		}
 		// vhtml does not support dangerously setting inner HTML...
 		this.$( '.overlay-title h2' ).html( this.options.heading );
diff --git a/src/mobile.startup/search/SearchOverlay.js b/src/mobile.startup/search/SearchOverlay.js
index b34c1b872..214805908 100644
--- a/src/mobile.startup/search/SearchOverlay.js
+++ b/src/mobile.startup/search/SearchOverlay.js
@@ -1,4 +1,6 @@
 var
+	preact = require( 'preact' ),
+	/** @jsx preact.h */
 	mfExtend = require( '../mfExtend' ),
 	Overlay = require( '../Overlay' ),
 	util = require( '../util' ),
@@ -285,11 +287,7 @@ mfExtend( SearchOverlay, Overlay, {
 			this.$clear.hide();
 		}
 		if ( options.feedback ) {
-			this.$searchFeedback.append(
-				(
-					new Anchor( options.feedback.feedback )
-				).$el
-			);
+			preact.render( <Anchor {...options.feedback.feedback} />, this.$searchFeedback[0] );
 		}
 	},