User:Lucas Werkmeister (WMDE)/Working on OOUI

From mediawiki.org

When you want to work on the OOUI code itself, e. g. to fix a bug, you typically don’t want to do this from inside MediaWiki: MediaWiki’s source code repository only syncs up with OOUI on each OOUI release, without reflecting the details of the work between releases, and it also merges multiple source code files together, making them harder to navigate.

Instead, you’ll want to set up a simple standalone web page using OOUI. First, in a new directory run npm install oojs-ui to install its dependencies (though we won’t load OOUI itself from there); then, create an index.html file like the following (based on the OOUI ToDo App Tutorial: 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>OOUI test</title>
    <!-- jQuery -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <!-- OOjs -->
    <script src="node_modules/oojs/dist/oojs.jquery.min.js"></script>
    <!-- OOUI -->
    <script src="oojs-ui/dist/oojs-ui.js"></script>
    <!-- OOUI theme -->
    <script src="oojs-ui/dist/oojs-ui-wikimediaui.js"></script>
    <link rel="stylesheet" href="oojs-ui/dist/oojs-ui-wikimediaui.css">

    <!-- custom -->
    <link rel="stylesheet" href="test.css">
    <script src="test.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <h1>OOUI test page</h1>
    </div>
  </body>
</html>

You’ll place your own code in test.js and/or test.css, for example: 

$( function () {
    var widget = new OO.ui.LabelWidget( { label: 'a label' } );
    $( '.wrapper' ).append( widget.$element );
} );

The HTML file expects to load OOUI from an oojs-ui/ directory, so you first need to clone it and set it up: 

git clone ssh://<username>@gerrit.wikimedia.org:29418/oojs/ui.git oojs-ui
cd oojs-ui
npm install
grunt build

Then, whenever you’ve made a change to the OOUI source code, run grunt build again to rebuild the files in dist/ that the HTML file loads. (Unfortunately, this takes about 1½ minutes on my system, and includes re-rasterizing all the SVG images to PNG files. This is the part that I’m sure can be improved.)

Retrieved from "https://www.mediawiki.org/w/index.php?title=User:Lucas_Werkmeister_(WMDE)/Working_on_OOUI&oldid=3197027"