CODECSTests

Testpagina voor Paulus

General

Our starting point for defining widgets is CODECSTests/modules/ext.codecstests.vue.js. This is where Vue is required and the App is mounted. What we've done in this instance is to allow for different 'types' so you can play around with as many different Vue widgets as you want.
- The 'sitesearch' type is reserved for the #codecstests-sitesearch parser function
- The #codecstests-widget parser function, on the other hand, allows for different types, hence different widgets, to be used.
All components that you might be want to use and add are in the subfolder CODECSTests/modules/components.
For each new component, make sure it is listed under 'module.exports' in CODECSTests/modules/components/index.js. The names given there to each component must be followed in ext.codecstests.vue.js

extension.json

extension.json is an important file used for registering the CODECSTests extension in MediaWiki, adding metadata, etc. It is also where we register our JavaScript mpdules and dependencies:

Vue components

Each component must be listed under 'ext.codecstests.components' > 'packageFiles', where index.js must come first:

"packageFiles": [
	"components/index.js",
	"components/SiteSearch.vue",
	"components/TestWidget.vue"
	//, add your new Vue component here
],

Codex components

The components of the Codex design library are documented and demonstrated on https://doc.wikimedia.org/codex/latest/components/overview.html (if you hit 'Show code', then select 'MediaWiki' not 'NPM'). Just be aware that it is work in progress and may not necessarily reflect the version of Codex that ships with the current MediaWiki version.
extension.json is where we define our dependencies on Codex components. For the module we are using ('ext.codecstests.components') I added created this basic list, but feel free to add anything you want to use :

"codexComponents": [
	"CdxButton",
	"CdxCard",
	"CdxDialog",
	"CdxTypeaheadSearch",
	"CdxSearchInput",
	// add your codex component here
]

MediaWiki and Vue

As explained in more detail on https://www.mediawiki.org/wiki/Vue.js, MediaWiki's integration of Vue comes with some usage restrictions, notably :

No < script setup > for Composition API. Use setup() instead
The following requirements apply when setting up a basic setup (already done for this extension):
- in extension.json, use packageFiles; <my-component></my-component> : kebab-case and no self-closing tags
- Use require and module.exports = { ... }. ES6 import and export not supported.
- Use Vue.createMwApp();

#codecstests-sitesearch

Basically a copy of #recon-sitesearch as of 2 Dec. 2024.

Dev info. API: https://codecs.vanhamel.nl/api.php?action=recon-suggest-entity&origin=%2A&profile=69723&substr= / Target URL: https://codecs.vanhamel.nl/Show:Search?phrase=

#codecstests-widget

This is a general-purpose widget that allows you to experiment with different components (as opposed to a single one). For instance, to use the testwidget:

{{#codecstests-widget:
|type=testwidget
}}

The parser function makes sure the value is available from the data attribute 'data-widget-type'
As mentioned above, the file 'CODECSTests/modules/ext.codecstests.vue.js' provides our starting point in Vue.
- It reads the expected value in 'data-widget-type', here 'testwidget'
- You can see in the file we defined a switch on the incoming 'type'. For 'testwidget', it picks the component defined in 'TestWidget.vue' (in the 'components' subfolder)
In the same way, you can add other components
- define a lowercase name for the parser function and data attribute, e.g. 'combobox'
- add a component .vue file (just the bare bones) to the component subfolder, e.g. 'Combobox.vue'
- don't forget to include the component and its canonical name (e.g. 'Combobox') in index.js
- don't forget the new component file to extension.json as described above
- add the new component to the switch in the same way as we've done for TestWidget.

The test widget does not do much at the time of writing.

{{#codecstests-widget:
|type=testwidget
}}

Random number

Using this wiki for testing

The easiest thing to do if you want to test many different features is to define a subpage of the current wiki page below, e.g. 'CODECSTests/Test1', create the page, add the parser function you want to use and save.

CODECSTests/Test1