FANDOM


Rewire is a library that resolves identifier conflicts, loads missing resources, and invokes appropriate initializers for dynamically added content containing parser tags. Whilst intended primarily for scripts that handle such content, this library can also be imported as a user script to resolve related issues when previewing edits.

Installation

Usage

To resolve identifier conflicts prior to insertion of dynamic content, pass a DocumentFragment comprising said content to window.dev.rewire.prepare. If this is not practical, you can pass a sequence of disconnected Nodes instead.

var api = new mw.Api();
api.get({
	action: 'parse',
	text: '<rss>https://dev.fandom.com/wiki/Special:RecentChanges?feed=atom</rss>',
	prop: ['text']
}).done(function (response) {
	// This is no good, as the script tag will be rearranged:
	// var disconnectedNodes = $.parseHTML(response.parse.text['*'], document, /*keepScripts=*/true);
	var container = document.createElement('div');
	container.innerHTML = response.parse.text['*'];
 
	// Untaint scripts, so that they'll actually execute when we insert them into the document.
	Array.prototype.forEach.call(container.getElementsByTagName('script'), function (taintedScript) {
		var untaintedScript = document.createElement('script');
		untaintedScript.innerHTML = taintedScript.innerHTML;
		taintedScript.parentNode.replaceChild(untaintedScript, taintedScript);
	});
 
	var fragment = document.createDocumentFragment();
	while (container.firstChild) fragment.appendChild(container.firstChild);
	if (window.dev && window.dev.rewire) {
		window.dev.rewire.prepare(fragment);
	}
	$('#mw-content-text').append(fragment);
});

For parser tags that expect to be initialized via JSSnippetsStack, you must ensure that all relevant script tags aren't perturbed. Note that if you opt to pass a sequence of disconnected Nodes, Rewire may mutate their siblings as necessary; in other words, the scope of effect is not strictly limited to the set of Nodes you pass in.

To load missing resources and invoke appropriate initializers after insertion of dynamic content, fire the standard hook wikipage.content. If this is not practical, you can pass a sequence of connected Nodes to window.dev.rewire.load.

var api = new mw.Api();
api.get({
	action: 'parse',
	text: '<twitter screen-name="internetofshit"/>',
	prop: ['text']
}).done(function (response) {
	var $newContent = $('<div/>', {html: response.parse.text['*']});
	$('#mw-content-text').append($newContent);
	mw.hook('wikipage.content').fire($newContent);
	// Alternatively, if firing the hook (as above) is not practical:
	// window.dev.rewire.load($newContent);
});

Note that this only affects parser tags that expect to be initialized via Resource Loader modules added directly to a page's output; for parser tags that expect to be initialized via JSSnippetsStack, follow the advice above on resolving identifier conflicts with window.dev.rewire.prepare.

Support

Parser TagHandled by prepare?Handled by load?
<gallery type="slider"/>YesN/A
<gallery type="slideshow"/>YesN/A
<rss/>YesN/A
<tabview/>YesN/A
<twitter/>N/AYes

Demo

This demo allows you to add the contents of the dashed box to the top of the solid box, with and without Rewire enabled.

If controls do not appear, ensure the DemoScripts gadget is enabled in your preferences.

Text above can be found here (edit)
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+