The Wikidata Bridge (formerly known as “client editing”) is a project aiming to make it possible to edit Wikidata’s data directly from Wikipedia.

Project setup

# ensure the node user uses your user id, so you own generated files
docker-compose build --build-arg UID=$(id -u) --build-arg GID=$(id -g) node
docker-compose run --rm node npm install
docker-compose run --rm node npm run prepare

Compiles and hot-reloads for development

docker-compose up

This uses the values from .env for configuration - create a .env.local file if you desire diverging values.

CSR_PORT is the port at which you can reach the development server on your machine to live-preview changes to the application. This allows development outside of MediaWiki, using a simulated environment as configured in src/dev-entry.ts.
STORYBOOK_PORT is the port at which you can reach the storybook server on your machine to live-preview changes in the component library
NODE_ENV is the environment to set for node.js

Compiles and minifies for production

docker-compose run --rm node npm run build

Bridge is built with Vue's modern mode to ship light-weight JavaScript to capable browsers. MediaWiki chooses one or the other distribution using client/resources/wikibase.client.data-bridge.app.js.

Automatically fix code style violations

docker-compose run --rm node npm run fix

Run all code quality tools

docker-compose run --rm node npm run test

Run jest unit tests

docker-compose run --rm node npm run test:unit

Jest can watch the filesystem and run the tests affecting your files changed after the last commit with:

docker-compose run --rm node npm run test:unit -- --watch

Lints files for code style violations

docker-compose run --rm node npm run test:lint

Storybook

docker-compose run --rm node npm run storybook

Git helpers

To automatically resolve merge conflicts within dist/ by doing a rebuild, run the following command:

npx npm-merge-driver install \
    --driver-name bridge-rebuild \
    --driver 'npx npm-merge-driver merge %A %O %B %P -c \"cd -- \\\"\$(git rev-parse --show-toplevel)/client/data-bridge\\\" && npm ci && npm run build:app\"' \
    --files /client/data-bridge/dist/{data-bridge.{app{,.modern},init}.js,css/data-bridge.app.css}

This is very useful when rebasing unmerged changes, for example.

To automatically prefix messages of Bridge-related commits with the keyword “bridge:”, put the following in .git/hooks/prepare-commit-msg and ensure the file is executable:

#!/usr/bin/env bash
 
case $2 in
    message|template|commit|'')
        if ! git diff --cached --exit-code -- '://client/data-bridge/*' > /dev/null &&
                git diff --cached --exit-code -- ':!/client/data-bridge/*' > /dev/null; then
            # differences in data bridge and none outside it,
            # prefix the message with "bridge: " if necessary
            sed -i '
                1 {
                    # add bridge: prefix
                    s/^/bridge: /
                    # remove duplicate prefix
                    s/ bridge://g
                    # remove bridge: again before rebase.autosquash prefixes
                    s/^bridge: \‍(fixup!\|squash!\‍)/\1/
                }
                ' -- "$1"
        fi
        ;;
esac

Debugging

Bridge augments MediaWiki pages and uses some of its modules to do its work. It uses mw.track to publish analytics events (under the MediaWiki.wikibase.client.databridge topic) which can be collected as statistics.

For debugging of a specific scenario you can also subscribe to those events locally in your browser via e.g.

mediaWiki.trackSubscribe( '', console.log );