mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-09-23 02:09:03 +00:00
06ab2d7676
eslint:
* Remove hardcoded glob paths that are (relatively slow) to expand
before linting could start, in favour of specifying directories
which can be iterated while linting happens.
* JSON files in i18n/ were skipped, unlike other repos.
JS code under .storybook/ was skipped.
JS code under resources/ext.popups/ was skipped.
Fix all these by doing what other repos do, which is to let
ESLint iterate the repository and tell it which directories not to
enter. This has the happy side-effect of making IDE integrations
for ESLint work correctly (as customisation in package.json has the
same problems as using Gruntfile, namely that invoking 'eslint'
directly can't be aware of this), as well as allowing things like
`eslint --fix` to be used.
```
/Popups/resources/ext.popups/index.js
4:2 error Unexpected var, use let or const instead no-var
```
nyc:
* Remove SPAWN_WRAP_SHIM_ROOT.
This was a hack for an early CI experiment that hasn't been
needed for several years.
storybook:
* Remove gitignore entries for additional npm and build output in the
storybook subdirectory, which appears to not exist anymore since
|
||
|---|---|---|
| .phan | ||
| .storybook | ||
| dev-scripts | ||
| docs | ||
| i18n | ||
| includes | ||
| resources | ||
| src | ||
| tests | ||
| .babelrc | ||
| .browserslistrc | ||
| .eslintignore | ||
| .eslintrc.json | ||
| .gitattributes | ||
| .gitignore | ||
| .gitreview | ||
| .istanbul.yml | ||
| .nvmrc | ||
| .nycrc.json | ||
| .phpcs.xml | ||
| .stylelintrc.json | ||
| .svgo.config.js | ||
| CODE_OF_CONDUCT.md | ||
| composer.json | ||
| COPYING | ||
| Doxyfile | ||
| extension.json | ||
| jsdoc.json | ||
| package-lock.json | ||
| package.json | ||
| popups.svg | ||
| README.md | ||
| webpack.config.js | ||
mediawiki/extensions/Popups
See https://www.mediawiki.org/wiki/Extension:Popups for more information about what it does.
Development
Popups uses an asset bundler so when developing for the extension you'll need to run a script to assemble the frontend assets.
You can find the frontend source files in src/, the compiled sources in
resources/dist/, and other frontend assets managed by resource loader in
resources/*.
After an npm install:
- On one terminal, kickstart the bundler process:
npm startWill run the bundler in watch mode, re-assembling the files on file change. Additionally, this builds debug-friendly assets and enables Redux DevTools debugging.npm run buildWill compile the assets just once, ready for deployment. You must run this step before sending the patch or CI will fail (so that sources and built assets are in sync).
- On another terminal, run tests and linting tools:
npm testTo run the linting tools and the tests.- You can find the QUnit tests that depend on running MediaWiki under
tests/qunit/ - You can find the isolated QUnit tests under
tests/node-qunit/, which you can run withnpm run test:unit
- You can find the QUnit tests that depend on running MediaWiki under
- We recommend you install a file watcher like
nodemonto watch sources and auto run linting and tests.npm install -g nodemon- Example running linting and node unit tests:
nodemon -w src/ --exec "grunt lint:all && npm run test:unit"
- Get code coverage report with
npm run coverage- Reports printed in the
coverage/folder
- Reports printed in the
Developers are likely to work with local MediaWiki instances that do not have content to test with. To reduce this pain, you can create a single page with a list of links that point to an existing and external wiki by using the following config flag:
$wgPopupsGateway = 'restbaseHTML';
$wgPopupsRestGatewayEndpoint = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
Popups works with a local copy of the Mobile Content Service too:
$wgPopupsGateway = 'restbaseHTML';
$wgPopupsRestGatewayEndpoint = 'http://localhost:6927/en.wikipedia.org/v1/page/summary/';
Debugging
- Popups are dismissed ("abandoned") when the cursor leaves the popup
container. As such, it can be difficult to debug a popup of interest
without it popping in and out of the DOM. A useful workaround in
DevTools is to context click a link, select inspect, move the cursor
some place comfortable, and then from the console enter
$($0).trigger('mouseenter'). - As described in #Development,
npm startenables Redux DevTools functionality. In production builds, this same functionality can be enabled by setting adebug=truequery. E.g.,https://en.wikipedia.org/wiki/Popup?debug=true. - When a QUnit test fails but you can't see why, open package.json and
temporarily remove the snippet
| tap-mocha-reporter dot.
Storybook.js Component Library
The root of the repository contains a .storybook directory. This folder contains a separate NPM project using the Storybook.js UI framework. This framework provides an environment that showcases all possible permutations of popups, without the state-management constraints of having only one popup per page.
This framework requires Node 8 (because of the spread ... operator) and is therefore
separated from the main package.json until CI upgrades from Node 6. NVM can be used to
manage multiple Node versions to run the Storybook app (cd .storybook && nvm use).
See the .storybook/README.md for details.
Building the documentation
Execute npm -s run doc.
Terminology
- Footnote - What the Cite extension shows at the bottom of the page.
- Hovercard - Deprecated term for popup.
- Link preview - A similar user feature in the Android native app.
- Navpop / nav pop - A popup-like UI from the NavigationPopups gadget.
- Popup - Generic term for a dialog that appears to float above a link that is being hovered over by a cursor.
- Page preview - A specific type of popup that shows a page summary.
- Preview - A synonym for popup.
- Reference - A specific type of popup that previews the Cite extension's
footnotes. Since footnotes are typically used for references, and the tag's
name is
<ref>, the terms are used synonymously.