Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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] );
}
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.