client/data-bridge/README.md
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`.
* `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](https://cli.vuejs.org/guide/browser-compatibility.html#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
```
### Git helpers
To automatically resolve merge conflicts within `dist/` by doing a rebuild, run the following command:
```sh
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:
```sh
#!/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`](https://www.mediawiki.org/wiki/ResourceLoader/Core_modules#mw.track) to publish analytics events (under the `MediaWiki.wikibase.client.databridge` topic) which can be collected as [statistics](https://www.mediawiki.org/wiki/Manual:How_to_debug/en#Statistics).
For debugging of a specific scenario you can also subscribe to those events locally in your browser via e.g.
```javascript
mediaWiki.trackSubscribe( '', console.log );
```
## Storybook
Data Bridge used to contain Storybook stories.
Due to providing little value outside of active development but causing significant cost upgrading the dependencies,
they were deleted in Id062a14693c10c5300f7f4509db529d65b03175d.
If needed, they can be restored from git.