PHPackages                             hhvm/xhp-js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. hhvm/xhp-js

ActiveLibrary[Utility & Helpers](/categories/utility)

hhvm/xhp-js
===========

Easily create JS controllers for XHP elements, and XHP wrappers for React elements

v1.0.1(9y ago)573127[2 issues](https://github.com/hhvm/xhp-js/issues)HackCI passing

Since Jun 23Pushed 4y ago22 watchersCompare

[ Source](https://github.com/hhvm/xhp-js)[ Packagist](https://packagist.org/packages/hhvm/xhp-js)[ Docs](https://github.com/hhvm/xhp-js)[ RSS](/packages/hhvm-xhp-js/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (2)Versions (4)Used By (0)

XHP-JS
======

[](#xhp-js)

XHP-JS is a combination of Hack and Javascript libraries allowing you to easily call Javascript functions or create Javascript classes that from XHP components, and to pass these classes or references to the DOM nodes to other Javascript code.

For convenience, an interface to construct React components is also included.

A short overview is available at

Examples
--------

[](#examples)

A full example is available at

### Calling a Javascript function

[](#calling-a-javascript-function)

```
xhp class JsCallExample extends HTML\element {
  use XHPHTMLHelpers;
  use XHPJSCall;

  protected function renderAsync(): Awaitable {
    $this->jsCall(
      'ModuleName',
      'functionName',
      'First argument',
      // This passes the DOM node corresponding to the  below
      $this->toJSElementRef(),
      'Third argument',
    );

    return getID()} />;
  }
}

$xhp =

;
echo await $xhp->toStringAsync();
```

### Creating a Javascript Object

[](#creating-a-javascript-object)

```
xhp class JSInstanceExample extends HTML\element {
  use XHPHTMLHelpers;
  use XHPJSCall;

  protected function renderAsync(): Awaitable {
    $this->constructJSInstance(
      'ClassName',
      $this->toJSElementRef(),
      // can pass through other arguments too
    );

    $this->jsCall(
      'MyModule',
      'myFunction',
      // This passes the JS object created above
      $this->toJSInstanceRef(),
    );

    return getID()} />;
  }
}

$xhp =

;
```

### Creating a React component

[](#creating-a-react-component)

*This functionality was based on an extremely old React version. The example has been removed.*

Writing your JavaScript
-----------------------

[](#writing-your-javascript)

We recommend writing your modules as CommonJS modules, and using Browserify.

Alternatively, you can create them as members of the window object.

XHP-JS looks for modules as members of the window object, and falls back to attempting to call 'require("ModuleName")' - this requires a require() function to be defined in the global scope.

For example:

```
$this->jsCall('MyModule', 'myMethod', 'argument');
```

This Hack code can be thought of as creating the following Javascript:

```
var module = window.MyModule ? window.MyModule : require('MyModule');
module.myMethod('argument');
```

In turn, your JavaScript may look like:

```
var MyModule = {
  myMethod: function() {
    // ...
  }
};

module.exports = MyModule; // if using CommonJS + Browserify
window.MyModule = MyModule; // if not
```

Installation
------------

[](#installation)

We recommend installing XHP-JS with Composer (for the Hack code) and npm + Browserify for the Javascript code. Alternatively, you can include xhpjs.js or xhpjs.min.js directly to declare an XHPJS object in the global scope.

See  for a full example.

License
-------

[](#license)

XHP-JS is [MIT-licensed](LICENSE).

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity26

Limited adoption so far

Community20

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 92.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~302 days

Total

3

Last Release

3377d ago

Major Versions

v0.0.2 → v1.0.02015-07-09

### Community

Maintainers

![](https://www.gravatar.com/avatar/66d33e29918fd8cc713997dbbe03cb86e2aefbdc6736637641cdffed2f22accb?d=identicon)[fredemmott](/maintainers/fredemmott)

---

Top Contributors

[![fredemmott](https://avatars.githubusercontent.com/u/360927?v=4)](https://github.com/fredemmott "fredemmott (48 commits)")[![aewing](https://avatars.githubusercontent.com/u/5033161?v=4)](https://github.com/aewing "aewing (1 commits)")[![facebook-github-bot](https://avatars.githubusercontent.com/u/6422482?v=4)](https://github.com/facebook-github-bot "facebook-github-bot (1 commits)")[![lexidor](https://avatars.githubusercontent.com/u/31805625?v=4)](https://github.com/lexidor "lexidor (1 commits)")[![simonwelsh](https://avatars.githubusercontent.com/u/125915?v=4)](https://github.com/simonwelsh "simonwelsh (1 commits)")

---

Tags

hackhacklangjavascriptreactxhpfacebookjavascriptJShhvmreacthackxhp

### Embed Badge

![Health badge](/badges/hhvm-xhp-js/health.svg)

```
[![Health](https://phpackages.com/badges/hhvm-xhp-js/health.svg)](https://phpackages.com/packages/hhvm-xhp-js)
```

###  Alternatives

[matthiasmullie/minify

CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns.

2.0k30.5M336](/packages/matthiasmullie-minify)[stolz/assets

An ultra-simple-to-use assets management library

296519.2k8](/packages/stolz-assets)[tholu/php-packer

A PHP version of Packer, JavaScript obfuscation library originally created by Dean Edwards

137441.2k5](/packages/tholu-php-packer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)