PHPackages                             gebruederheitz/wp-module-scripts - 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. gebruederheitz/wp-module-scripts

ActiveLibrary

gebruederheitz/wp-module-scripts
================================

Simple setup for module and nomodule script tags in Wordpress

1.0.0(1y ago)0226↓50%[8 PRs](https://github.com/gebruederheitz/wp-module-scripts/pulls)GPL-3.0-onlyPHPPHP >=7.3CI failing

Since Mar 25Pushed 2mo agoCompare

[ Source](https://github.com/gebruederheitz/wp-module-scripts)[ Packagist](https://packagist.org/packages/gebruederheitz/wp-module-scripts)[ RSS](/packages/gebruederheitz-wp-module-scripts/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (5)Versions (10)Used By (0)

Wordpress Module Scripts
========================

[](#wordpress-module-scripts)

*Simple setup for module and nomodule script tags in Wordpress*

---

Most of the credit goes to [kylereicks](https://github.com/kylereicks), who demonstrated in principle how a module/nomodule setup can be realized with Wordpress' script loading mechanism in .

I've wrapped it all in a reusable class, improved some of the regexes and logic, and added the convenience method for registering / enqueueing the scripts with the required data declared in the first place.

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

[](#installation)

```
composer require gebruederheitz/wp-module-scripts
```

Usage
-----

[](#usage)

The simplest usage involves instantiating the handler (so it can register its action hook callback) and adding the required extra data to a script:

```
// functions.php or similar
use GebruederHeitz\Wordpress\ModuleScriptHandler;

// Initialize once so the action can be hooked
ModuleScriptHandler::getInstance();

// The script that has been registered (or enqueued) with the handle
// 'my-legacy-script' will now have the 'nomodule' attribute added to it.
wp_script_add_data('my-legacy-script', 'nomodule', true);
// This will be "type='module'":
wp_script_add_data('my-esm-script', 'type', 'module');
```

### Using the utility method for registering / enqueueing

[](#using-the-utility-method-for-registering--enqueueing)

The utility method `register()` will handle both the registration / enqueueing of the scripts and the addition of the required attributes in one go.

Note

All scripts are loaded asynchronously in the "footer". The script paths are passed through `get_theme_file_uri()`.

```
// functions.php or similar
use GebruederHeitz\Wordpress\ModuleScriptHandler;

// Initialize once so the action can be hooked
ModuleScriptHandler::getInstance();

add_action('wp_enqueue_scripts', function() {
    // ModuleScriptHandler is a Singleton, so this will retrieve the instance
    // initialized above
    $handler = ModuleScriptHandler::getInstance();
    // Simple usage: register your hybrid build
    // Paths are passed through `get_theme_file_uri()`
    $handler->register('my-hybrid-script', 'path/to/module.js', 'path/to/nomodule.js');

    // Adds cache busting to the nomodule script (because version is supplied),
    // immediately enqueues both scripts, and returns the handles.
    [$moduleHandle, $nomoduleHandle] = $handler->register(
        'my-hybrid-script',
        modulePath: 'js/main.esm.v4.0.1.js',
        nomodulePath: 'js/main.legacy.js',
        dependencies: ['jquery'],
        enqueue: true,
        version: '4.0.1',
    );
});
```

```

```

### Advanced Usage

[](#advanced-usage)

```
    [$moduleHandle, $nomoduleHandle] = $handler->register(
        'my-hybrid-script',
        modulePath: 'js/main.esm.v4.0.1.js',
        nomodulePath: 'js/main.legacy.js',
        version: '4.0.1',
    );

    wp_localize_script($moduleHandle, 'myData', ['foo' => 'bar']);
    if ($condition) {
        wp_enqueue_script($moduleHandle);
    }

    // You can also register/enqueue only a module script by passing only the
    // modulePath...
    [$moduleHandle, $nomoduleHandle] = $handler->register(
        'my-module-only-script',
        modulePath: 'js/main.esm.v4.0.1.js',
        version: '4.0.1',
        enqueue: true,
    );

    // ...or a "generic" script with no special attributes whatsoever.
    [$moduleHandle, $nomoduleHandle] = $handler->register(
        'my-generic-script',
        nomodulePath: 'js/main.js',
        version: '4.0.1',
        enqueue: true,
    );
```

```

    /*
    var myData = {"foo":"bar"};
    /* ]]> */

```

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance67

Regular maintenance activity

Popularity14

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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

Unknown

Total

1

Last Release

419d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d2a201d58341e3ed71321bcb66cb375a8c6efffce7d8fe33244e821afc087c78?d=identicon)[mediocrity](/maintainers/mediocrity)

---

Top Contributors

[![AndreasMaros](https://avatars.githubusercontent.com/u/25008845?v=4)](https://github.com/AndreasMaros "AndreasMaros (3 commits)")

###  Code Quality

Static AnalysisPHPStan

Type Coverage Yes

### Embed Badge

![Health badge](/badges/gebruederheitz-wp-module-scripts/health.svg)

```
[![Health](https://phpackages.com/badges/gebruederheitz-wp-module-scripts/health.svg)](https://phpackages.com/packages/gebruederheitz-wp-module-scripts)
```

PHPackages © 2026

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