User:PerfektesChaos/js/jsonDebug

JavaScript gadget – show JSON analysis live within the current wiki page.

This is heading for wiki pages with embedded active JSON code. Especially WP:TemplateData requires that on template documentation.

Purpose

Syntax problems in JSON code will be located, and the resulting source code after all transclusions will be shown in the top region of the page. Hidden JSON code will become visible and receives syntax highlighting, and the first error (if any) will be emphasized.

Usage

Include the following lines into your common.js, global.js etc.:

mw.loader.load( "https://en.wiki.x.io/w/index.php?title=User:PerfektesChaos/js/jsonDebug/scout/r.js&action=raw&bcache=1&maxage=86400&ctype=text/javascript" );
mw.hook( "ext.gadget.jsonDebug.namespaces" ).fire( "Template" );

The first statement is loading a smaller “scout” script which will check circumstances whether the main gadget would be appropriate.
The second statement sends a request for the Template namespace that JSON code is expected within some of those pages.
- That can be done at any time as often as desired.
- The argument for namespace might be a namespace number or the generic or localized namespace number. An Array of such specifications is also possible.
- Pages of such namespaces will be inspected and the main gadget will be loaded.

Behaviour

If elements were detected each will be equipped with a button.

On button click a box will be inserted in the top region of the page.

The box will contain JSON source code.
The source code area may be enlarged vertically.
If a syntax error could be found in JSON source code, details of the first error will be shown in a yellow box on top of the source code, and that line is focussed and marked.
In the top right corner of the inserted box there is a small button with an X which will hide the box. Any JSON element button will open it again for the related source code.
The first time it might take a few seconds, but the syntactical elements of the source code will be displayed in colour scheme.

API

Experienced users may execute the following statement:

mw.hook( "jsonDebug.ready" ).add( myFun );

There myFun is a function which will be called as soon as the gadget has been loaded.

The function is called with one argument: app
app is an application object
It might be inspected and will tell some version information.
There is also a function at app.feed() which takes one argument: JSON source code, which will be analyzed and shown on top of the current wiki page.

Triggering

The wiki page is supposed to contain valid or invalid JSON code units. They might be hidden or visible.

If detected, a button will be inserted just before the code element.

<span class="error">...</span>
<pre class="json-code-lint" style="display:none">{ "u": "X }</pre>

The example shows a typical situation the gadget is designed for: The terminating " after X is missing. An unspecified error message has been issued. The errorneous JSON code is available but hidden.

The task is identified by:

class="json-code-lint" has been assigned to the element.
The element is a <pre> or <div>.
The element contains the JSON code.

A button will be inserted just before the element.

All source code edits of pages with a content model containing json (case insensitive) will get the button.

More selectors for buttons may be communicated with the following statement:

mw.hook( "ext.gadget.jsonDebug.selectors" ).fire( others );

Here others is an object with optional components:

classes – Array with names of classes
tags – Array with names of tags, which are to be considered in addition to <pre> and <div>.

Credits

The parser has been taken from circlecell/jsonlint-mod @GitHub
Some ideas have been inspired by jsonlint.com forms.
Syntax highlighting is done on the fly by mw:Extension:CodeMirror from codemirror.net.

Internationalization

Not really required for gadget itself now.

Suggestions on foreign languages may be offered, as well as a translation of this page.

Codes

Source code	JavaScript – for load() human readable version Copied external: jsonlint.js codemirrorJavascript.js CSS Scout: JavaScript – for load() human readable version – for load()
ResourceLoader	`ext.gadget.jsonDebug` for mw:Extension:Gadgets Dependencies: None required (self-completing) `ext.CodeMirror` is loaded when required.
Namespaces	Every
Cookies	None
`mw.hook`	`jsonDebug.ready` When page has been equipped. `jsonDebug.namespaces` Request namespaces for scout. `jsonDebug.selectors` Request selectors for scout. `jsonDebug.scout.ready` When scout has been started.
MediaWiki	1.30

A test page tells how to check for proper functionality.