User:Inductiveload/Script development

Developing scripts live on-wiki can be frustrating due to the need for saving a page for each change.

Instead, I usually serve scripts directly from my machine, which is faster to load and also doesn't require changes to be saved on-wiki.

HTTPS
Because Wikisource is served over HTTPS, your scripts should be do. This can be quite tricky to set up.

I have the following script to set up the certificates.

Serving
It is easy to server the contents of your script development directory, along with the above HTTPS certs:

prevents the browser caching the JS, so it updates immediately after change without having to flush browser caches.

Caching
The above method of serving files indicates to browsers to never cache the files. This is usually what you want for development purposes.

If you use other methods of serving the code, it's very common for your browser to cache script files even when they are served locally. This can prevent you seeing the latest version of a script. Disabling this caching depends on the browser.

In Firefox, open the Network debugging pane (Ctrl+Shift+E) and select. This may make pages slower to load, but it will discard all cached script versions and load from fresh from your development server.

When loading scripts from the wiki, it can take a minute or two for the server-side caches to update after changing the file.

Selecting local or on-wiki using common.js
Your common.js can be set up to load from this local development server if possible, or fall back to on-wiki defaults.

The following code attempts to load a file called  from your development server, and falls back if that fails (e.g. the server is offline):

You can load gadgets from your fallback code, or based on other logic, with. This can be useful when you want to load the "normal" gadgets when not developing

Switching between local code and gadgets
When developing gadgets, it can be helpful to turn them on and off. The following code can use a local script if a gadget is turned off. Then all you have to do to switch over is to enable or disable the gasget in your preferences:

Simulating ResourceLoader dependencies
Many gadgets have dependencies that they assume are loaded before the gadget runs. When developing, you should do this too or you find it works differently locally to when it is a gadget. To do this, wrap the  call with.

Loading CSS components
When your gadget contains CSS files, you can use  to load them like this:

When these are a proper gadget, the gadget's ResourceLoader dependencies in MediaWiki:Gadgets-definition will include this and you won't need to load two files - just use   or enable in preferences and the CSS will be included.

IIFEs
Gadgets are automatically wrapped in a Immediately invoked function expression (IIFE) by. Locally served scripts do not have this. If you want to isolate your local scripts in the same way, you can add your own IIFE. If used as-is in a gadget, there will be two levels of IIFE, but this is not an issue in practice.

Worry box

 * CSP: is this going to destroy this method? T28508.