mwstake/mediawiki-component-thirdpartyresources

Provides ResourceLoader module definitions that allow for inclusion of third-party pre-compiled resources (JS/CSS)

1.0.1 2022-02-25 09:02 UTC

Requires

• mwstake/mediawiki-componentloader: ~1

Requires (Dev)

• jakub-onderka/php-console-highlighter: 0.4.0
• jakub-onderka/php-parallel-lint: 1.0.0
• mediawiki/mediawiki-codesniffer: 29.0.0
• mediawiki/minus-x: 1.0.0
• phpunit/phpunit: ^6.5

GPL-3.0-only

• BlueSpice

README

ThirdPartyResources for MediaWiki

Provides ResourceLoader module definitions that allow for inclusion of third-party pre-compiled resources (JS/CSS).

This code is meant to be used within the MediaWiki framework. Do not attempt to use it outside of MediaWiki.

Use in a MediaWiki extension

Add "mwstake/mediawiki-component-thirdpartyresources": "~1.0" to the require section of your composer.json file.

Explicit initialization is required. This can be archived by

• either adding "callback": "mwsInitComponents" to your extension.json/skin.json
• or calling mwsInitComponents(); within you extensions/skins custom callback method

See also mwstake/mediawiki-componentloader.

Optional: Setting up package.json

In MediaWiki extensions/skins, the package.json is usually just used for CI tasks, like eslint. Therefore one usually has only the "devDependecies" entry and the node_modules/ directory is excluded from source code management e.g. via .gitignore.

If npm is used to pull in actual dependenies, it is recommended to copy the "dist" file(s) into the resources/ (or modules/) directory of the extension/skin. This can easily be done by a scripts.postinstall entry.

Example package.json

"scripts": {
	"postinstall": "cp node_modules/some-package/dist/some-package.min.js resources/lib/"
},
"dependencies": {
	"some-package": "^1.0.0"
}

Setting up the ResourceLoader module

MediaWiki ResourceLoader may corrupt pre-packaged JS/CSS files, as it applies "minification". Also it may lack a proper module.exports statement, to make the third party code available to the consuming code.

To overcome such issues, use the "class" property of the "ResourceModule" definition like this:

"ResourceModules": {
	"ext.SomePackageComponent": {
		"class": "MWStake\\MediaWiki\\Component\\ThirdPartyResources\\ResourceLoader\\DistFiles",
		"packageFiles": [
			"lib/some-package.min.js"
		]
	}
},
"ResourceFileModulePaths": {
	"localBasePath": "resources",
	"remoteExtPath": "MyExtension/resources"
},

If a special module.exports is required, it can be specified in the "module.exports" property.

"ResourceModules": {
	"ext.VTreeView": {
		"class": "MWStake\\MediaWiki\\Component\\ThirdPartyResources\\ResourceLoader\\DistFiles",
		"module.exports": "SomePackageComponent",
		"packageFiles": [
			"lib/some-package.min.js"
		]
	}
},