Extension Repository Connector - NPM

Last modified by Roman Oli on 2024/09/07 19:48

cogEnable importing npm packages from the npm registry
TypeJAR
Categoryrepository
Developed by

Krzysztof Płachno, Thomas Mortagne

Active Installs1
Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

Description

Npm registry is the most popular and used repository of JS packages. Inside XWiki JS libaries may be required for example in Java Script Skin Extensions. There's already mechanism in XWiki that solves the problem of providing JS packages using WebJars - it installs them and provides JS files for front pages: WebJars API.
More about WebJars.

However not all JS libs are already packed in webJars and available in Maven Central Repository. Thats why Extension Repository Connector - NPM was created. It enables XWiki user to download any JS library available in NPM registry and converting it internally to WebJar, made it available for import on front pages.

Configuration

No configuration needed. The extension after installment connects automatically to the NPM registry

Example

Let's assume that you want to import to XWiki some usefull JS library for more complicated math operations - mathjs
After installation of Extension Repository Connector - NPM, go to the "Extensions" page of the Administration. Then search for  mathjs by choosing "All Extensions" from the drop down list filter. The result should be more less the following:

simpleSearch3.PNG

Then choose the mathjs from the the result list and choosing option "Install on farm" proceed to install it as you'd do for any XWiki extension:

install2.PNG

Skin Extension using mathjs

To see your imported JS library in action you may create JavaScript Skin Extension (a.k.a jsx). To get to know how to create such extension refer to Skin Extension Tutorial particularly to Minimal JavaScript eXtension  guide.
Create this Minimal JavaScript eXtension as described in tutorial and then replace Code section with following snippet:

require(["$services.webjars.url('mathjs','dist/math.js')"], function(math){
 var res = math.sqrt(-4);
  alert("Square root of -4 is: " + res);
});

You'll find more information about syntax of importing JS libraries into Skin Extensions code on WebJars API page.

When you refresh your page as the result you should see alert popup with text more less like following:

result.PNG

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager).

You can also use the manual method which involves dropping the JAR file and all its dependencies into the WEB-INF/lib folder and restarting XWiki.

Dependencies

Dependencies for this extension (org.xwiki.contrib:repository-npm 1.1):

Get Connected