Reference previews should no longer use Webpack

As a precursor to moving this code to the Cite extension move it off
of webpack and switch to using require rather than import

Bug: T355194
Change-Id: Ib6486ad38b79a3b67a9744b716b1a2f5d3779795

extension.json

@@ -159,9 +159,14 @@
 			"styles": [
 				"resources/ext.popups.referencePreviews/referencePreview.less"
 			],
-			"scripts": [
-				"resources/dist/referencePreviews.js",
-				"resources/ext.popups.referencePreviews/index.js"
+			"packageFiles": [
+				"resources/ext.popups.referencePreviews/index.js",
+				"resources/ext.popups.referencePreviews/constants.js",
+				"resources/ext.popups.referencePreviews/createReferenceGateway.js",
+				"resources/ext.popups.referencePreviews/createReferencePreview.js",
+				"resources/ext.popups.referencePreviews/isReferencePreviewsEnabled.js",
+				"resources/ext.popups.referencePreviews/referencePreviews.js",
+				"resources/ext.popups.referencePreviews/setUserConfigFlags.js"
 			]
 		},
 		"ext.popups.main": {

package.json

@@ -72,10 +72,6 @@
 		{
 			"path": "resources/dist/index.js",
 			"maxSize": "13.5kB"
-		},
-		{
-			"path": "resources/dist/referencePreviews.js",
-			"maxSize": "2.1kB"
 		}
 	]
 }

resources/ext.popups.referencePreviews/constants.js

@@ -0,0 +1,4 @@
+module.exports = {
+    TYPE_REFERENCE: 'reference',
+    FETCH_DELAY_REFERENCE_TYPE: 150
+};

resources/ext.popups.referencePreviews/createReferenceGateway.js

@@ -2,12 +2,12 @@
  * @module gateway/reference
  */
 
-import { TYPE_REFERENCE } from './constants.js';
+const { TYPE_REFERENCE } = require( './constants.js' );
 
 /**
  * @return {Gateway}
  */
-export default function createReferenceGateway() {
+module.exports = function createReferenceGateway() {
 
 	/**
 	 * @param {string} id

resources/ext.popups.referencePreviews/createReferencePreview.js

@@ -1,7 +1,7 @@
 /**
  * @module referencePreview
  */
-import { isTrackingEnabled, LOGGING_SCHEMA } from './referencePreviews';
+const { isTrackingEnabled, LOGGING_SCHEMA } = require( './referencePreviews.js' );
 
 const TEMPLATE = document.createElement( 'template' );
 TEMPLATE.innerHTML = `
@@ -180,10 +180,12 @@ function renderReferencePreview(
  * @param {ext.popups.ReferencePreviewModel} model
  * @return {ext.popups.Preview}
  */
-export default function createReferencePreview( model ) {
+function createReferencePreview( model ) {
 	return {
 		el: renderReferencePreview( model ),
 		hasThumbnail: false,
 		isTall: false
 	};
 }
+
+module.exports = createReferencePreview;

resources/ext.popups.referencePreviews/index.js

@@ -1 +1,37 @@
-module.exports = window.refPreviews;
+const isReferencePreviewsEnabled = require( './isReferencePreviewsEnabled.js' );
+const { initReferencePreviewsInstrumentation } = require( './referencePreviews.js' )
+const createReferenceGateway = require( './createReferenceGateway.js' )
+const renderFn  = require( './createReferencePreview.js' );
+const { TYPE_REFERENCE, FETCH_DELAY_REFERENCE_TYPE } = require( './constants.js' )
+const setUserConfigFlags = require( './setUserConfigFlags.js' )
+
+const REFERENCE_PREVIEWS_LOGGING_SCHEMA = 'event.ReferencePreviewsPopups';
+
+setUserConfigFlags( mw.config );
+const referencePreviewsState = isReferencePreviewsEnabled(
+	mw.user, mw.popups.isEnabled,
+	mw.config
+);
+const gateway = createReferenceGateway();
+
+// For tracking baseline stats in the Cite extension https://phabricator.wikimedia.org/T353798
+// FIXME: This might be obsolete when the code moves to the Cite extension and the tracking there
+//  can check that state differently.
+mw.config.set( 'wgPopupsReferencePreviewsVisible', !!referencePreviewsState );
+
+mw.trackSubscribe( 'Popups.SettingChange', ( data ) => {
+	if ( data.previewType === TYPE_REFERENCE ) {
+		mw.track( REFERENCE_PREVIEWS_LOGGING_SCHEMA, data );
+	}
+} );
+
+module.exports = referencePreviewsState !== null ? {
+	type: TYPE_REFERENCE,
+	selector: '#mw-content-text .reference a[ href*="#" ]',
+	delay: FETCH_DELAY_REFERENCE_TYPE,
+	gateway,
+	renderFn,
+	init: () => {
+		initReferencePreviewsInstrumentation();
+	}
+} : null;

resources/ext.popups.referencePreviews/isReferencePreviewsEnabled.js

@@ -1,4 +1,4 @@
-import { TYPE_REFERENCE } from './constants.js';
+const { TYPE_REFERENCE } = require( './constants.js' );
 
 /**
  * @module isReferencePreviewsEnabled
@@ -14,7 +14,7 @@ import { TYPE_REFERENCE } from './constants.js';
  *
  * @return {boolean|null} Null when there is no way the popup type can be enabled at run-time.
  */
-export default function isReferencePreviewsEnabled( user, isPreviewTypeEnabled, config ) {
+function isReferencePreviewsEnabled( user, isPreviewTypeEnabled, config ) {
 	// TODO: This and the final `mw.user.options` check are currently redundant. Only this here
 	// should be removed when the wgPopupsReferencePreviews feature flag is not needed any more.
 	if ( !config.get( 'wgPopupsReferencePreviews' ) ) {
@@ -37,3 +37,5 @@ export default function isReferencePreviewsEnabled( user, isPreviewTypeEnabled,
 	// Registered users never can enable popup types at run-time.
 	return user.options.get( 'popups-reference-previews' ) === '1' ? true : null;
 }
+
+module.exports = isReferencePreviewsEnabled;

resources/ext.popups.referencePreviews/referencePreviews.js

@@ -1,11 +1,11 @@
 let isTracking = false;
 
-export const LOGGING_SCHEMA = 'event.ReferencePreviewsPopups';
+const LOGGING_SCHEMA = 'event.ReferencePreviewsPopups';
 
 /**
  * Run once the preview is initialized.
  */
-export function initReferencePreviewsInstrumentation() {
+function initReferencePreviewsInstrumentation() {
 	if ( mw.config.get( 'wgPopupsReferencePreviews' ) &&
 		navigator.sendBeacon &&
 		mw.config.get( 'wgIsArticle' ) &&
@@ -16,6 +16,12 @@ export function initReferencePreviewsInstrumentation() {
 	}
 }
 
-export function isTrackingEnabled() {
+function isTrackingEnabled() {
 	return isTracking;
 }
+
+module.exports = {
+	LOGGING_SCHEMA,
+	initReferencePreviewsInstrumentation,
+	isTrackingEnabled
+};

resources/ext.popups.referencePreviews/setUserConfigFlags.js

@@ -13,7 +13,7 @@ const REF_TOOLTIPS_ENABLED = 2,
  *
  * @param {mw.Map} config
  */
-export default function setUserConfigFlags( config ) {
+module.exports = function setUserConfigFlags( config ) {
 	const popupsFlags = parseInt( config.get( 'wgPopupsFlags' ), 10 );
 
 	/* eslint-disable no-bitwise */

src/ext.popups.referencePreviews/constants.js

@@ -1,2 +0,0 @@
-export const TYPE_REFERENCE = 'reference';
-export const FETCH_DELAY_REFERENCE_TYPE = 150; // ms.

src/ext.popups.referencePreviews/index.js

@@ -1,37 +0,0 @@
-import isReferencePreviewsEnabled from './isReferencePreviewsEnabled';
-import { initReferencePreviewsInstrumentation } from './referencePreviews';
-import createReferenceGateway from './createReferenceGateway';
-import renderFn from './createReferencePreview';
-import { TYPE_REFERENCE, FETCH_DELAY_REFERENCE_TYPE } from './constants';
-import setUserConfigFlags from './setUserConfigFlags';
-
-const REFERENCE_PREVIEWS_LOGGING_SCHEMA = 'event.ReferencePreviewsPopups';
-
-setUserConfigFlags( mw.config );
-const referencePreviewsState = isReferencePreviewsEnabled(
-	mw.user, mw.popups.isEnabled,
-	mw.config
-);
-const gateway = createReferenceGateway();
-
-// For tracking baseline stats in the Cite extension https://phabricator.wikimedia.org/T353798
-// FIXME: This might be obsolete when the code moves to the Cite extension and the tracking there
-//  can check that state differently.
-mw.config.set( 'wgPopupsReferencePreviewsVisible', !!referencePreviewsState );
-
-mw.trackSubscribe( 'Popups.SettingChange', ( data ) => {
-	if ( data.previewType === TYPE_REFERENCE ) {
-		mw.track( REFERENCE_PREVIEWS_LOGGING_SCHEMA, data );
-	}
-} );
-
-window.refPreviews = referencePreviewsState !== null ? {
-	type: TYPE_REFERENCE,
-	selector: '#mw-content-text .reference a[ href*="#" ]',
-	delay: FETCH_DELAY_REFERENCE_TYPE,
-	gateway,
-	renderFn,
-	init: () => {
-		initReferencePreviewsInstrumentation();
-	}
-} : null;

tests/node-qunit/ext.popups.referencePreviews/gateway.test.js

@@ -1,5 +1,5 @@
 import { createStubTitle } from '../stubs';
-import createReferenceGateway from '../../../src/ext.popups.referencePreviews/createReferenceGateway';
+import createReferenceGateway from '../../../resources/ext.popups.referencePreviews/createReferenceGateway';
 
 QUnit.module( 'ext.popups.referencePreviews/createReferenceGateway', {
 	beforeEach() {

tests/node-qunit/ext.popups.referencePreviews/isReferencePreviewsEnabled.test.js

@@ -1,5 +1,5 @@
 import * as stubs from '../stubs';
-import isReferencePreviewsEnabled from '../../../src/ext.popups.referencePreviews/isReferencePreviewsEnabled';
+import isReferencePreviewsEnabled from '../../../resources/ext.popups.referencePreviews/isReferencePreviewsEnabled';
 
 function createStubUserSettings( expectEnabled ) {
 	return {

tests/node-qunit/ext.popups.referencePreviews/renderer.test.js

@@ -1,12 +1,10 @@
-import * as renderer from '../../../src/ui/renderer';
-import * as constants from '../../../src/constants';
-import { previewTypes } from '../../../src/preview/model';
-import createReferencePreview from '../../../src/ext.popups.referencePreviews/createReferencePreview';
+import createReferencePreview from '../../../resources/ext.popups.referencePreviews/createReferencePreview';
+import { TYPE_REFERENCE } from '../../../resources/ext.popups.referencePreviews/constants';
+
+const previewTypes = { TYPE_REFERENCE };
 
 QUnit.module( 'ext.popups.referencePreviews#renderer', {
 	beforeEach() {
-		this.sandbox.stub( constants.default, 'BRACKETED_DEVICE_PIXEL_RATIO' ).value( 1 );
-
 		mw.msg = ( key ) => `<${ key }>`;
 		mw.message = ( key ) => {
 			return { exists: () => !key.endsWith( 'generic' ), text: () => `<${ key }>` };
@@ -31,22 +29,17 @@ QUnit.module( 'ext.popups.referencePreviews#renderer', {
 		mw.msg = null;
 		mw.message = null;
 		mw.html = null;
-		renderer.test.reset();
 	}
 } );
 
 QUnit.test( 'createReferencePreview(model)', ( assert ) => {
-	renderer.registerPreviewUI(
-		previewTypes.TYPE_REFERENCE,
-		createReferencePreview
-	);
 	const model = {
 			url: '#custom_id',
 			extract: 'Custom <i>extract</i> with an <a href="/wiki/Internal">internal</a> and an <a href="//wikipedia.de" class="external">external</a> link',
 			type: previewTypes.TYPE_REFERENCE,
 			referenceType: 'web'
 		},
-		preview = renderer.createPreviewWithType( model );
+		preview = createReferencePreview( model );
 
 	assert.strictEqual( preview.hasThumbnail, false );
 	assert.strictEqual( preview.isTall, false );
@@ -67,16 +60,12 @@ QUnit.test( 'createReferencePreview(model)', ( assert ) => {
 } );
 
 QUnit.test( 'createReferencePreview default title', ( assert ) => {
-	renderer.registerPreviewUI(
-		previewTypes.TYPE_REFERENCE,
-		createReferencePreview
-	);
 	const model = {
 			url: '',
 			extract: '',
 			type: previewTypes.TYPE_REFERENCE
 		},
-		preview = renderer.createPreviewWithType( model );
+		preview = createReferencePreview( model );
 
 	assert.strictEqual(
 		$( preview.el ).find( '.mwe-popups-title' ).text().trim(),
@@ -85,16 +74,12 @@ QUnit.test( 'createReferencePreview default title', ( assert ) => {
 } );
 
 QUnit.test( 'createReferencePreview updates fade-out effect on scroll', ( assert ) => {
-	renderer.registerPreviewUI(
-		previewTypes.TYPE_REFERENCE,
-		createReferencePreview
-	);
 	const model = {
 			url: '',
 			extract: '',
 			type: previewTypes.TYPE_REFERENCE
 		},
-		preview = renderer.createPreviewWithType( model ),
+		preview = createReferencePreview( model ),
 		$extract = $( preview.el ).find( '.mwe-popups-extract' );
 
 	$extract.children()[ 0 ].dispatchEvent( new Event( 'scroll' ) );
@@ -104,17 +89,13 @@ QUnit.test( 'createReferencePreview updates fade-out effect on scroll', ( assert
 } );
 
 QUnit.test( 'createReferencePreview collapsible/sortable handling', ( assert ) => {
-	renderer.registerPreviewUI(
-		previewTypes.TYPE_REFERENCE,
-		createReferencePreview
-	);
 	const model = {
 			url: '',
 			extract: '<table class="mw-collapsible"></table>' +
 				'<table class="sortable"><th class="headerSort" tabindex="1" title="Click here"></th></table>',
 			type: previewTypes.TYPE_REFERENCE
 		},
-		preview = renderer.createPreviewWithType( model );
+		preview = createReferencePreview( model );
 
 	assert.strictEqual( $( preview.el ).find( '.mw-collapsible, .sortable, .headerSort' ).length, 0 );
 	assert.strictEqual( $( preview.el ).find( 'th' ).attr( 'tabindex' ), undefined );

tests/node-qunit/ext.popups.referencePreviews/setUserConfigFlags.test.js

@@ -1,4 +1,4 @@
-import setUserConfigFlags from '../../../src/ext.popups.referencePreviews/setUserConfigFlags';
+import setUserConfigFlags from '../../../resources/ext.popups.referencePreviews/setUserConfigFlags';
 
 QUnit.module( 'ext.popups.referencePreviews#setUserConfigFlags' );
 

webpack.config.js

@@ -29,8 +29,7 @@ module.exports = ( env, argv ) => ( {
 	context: __dirname,
 
 	entry: {
-		index: './src',
-		referencePreviews: './src/ext.popups.referencePreviews/index.js'
+		index: './src'
 	},
 
 	resolve: {