yii2-jsloader-systemjs

An Yii2 extension that allows to register asset bundles as systemjs modules.

Installation

*Requires PHP >= 7.1

*Requires ischenko/yii2-jsloader >= 1.3

The preferred way to install this extension is through composer.

Either run

composer require ischenko/yii2-jsloader-systemjs

or add

"ischenko/yii2-jsloader-systemjs": "*"

to the require section of your composer.json.

Usage

Add the behavior and systemjs loader to the view configuration

    ...
    'components' => [
        ...
        'view' => [
            'as jsLoader' => [
                'class' => 'ischenko\yii2\jsloader\Behavior',
                'loader' => [
                    'class' => 'ischenko\yii2\jsloader\SystemJs',
                ]
            ]
        ]
        ...
    ]
    ...

Loader accepts the following options:

• extras: array a list of systemJs extras to load. Possible values are:
  • amd
  • transform
  • named-exports
  • named-register
  • global
  • module-types
• minimal: boolean indicates whether to load core version (s.js) or full version (system.js) of the library
• position: integer a position where the library and import map should be added to
• renderer: string|array configuration for the JS expressions renderer object

    ...
    'components' => [
        ...
        'view' => [
            'as jsLoader' => [
                'class' => 'ischenko\yii2\jsloader\Behavior',
                'loader' => [
                    'minimal' => false,
                    'extras' => ['amd'],
                    'position' => \yii\web\View::POS_HEAD,
                    'class' => 'ischenko\yii2\jsloader\SystemJs',
                ]
            ]
        ]
        ...
    ]
    ...

Нou can set alias, exports, init options from asset bundle:

class jQueryFireflyAsset extends AssetBundle
{
    public $js
        = [
            'jquery.firefly.min.js'
        ];

    public $jsOptions
        = [
            'systemjs' => [
                'alias' => 'jqff',
                'exports' => 'jquery_firefly'
            ]
        ];

    public $depends
        = [
            'yii\web\JqueryAsset',
        ];
}

Generated imports map will look as follows:

{
  "imports": {
    "jqff": "/pub/assets/dir/jquery.firefly.min.js"
  }
}

And JS code on the page will be wrapped by the following:

System.import("yii\\web\\JqueryAsset").then(function() {
    System.import("jqff").then(function(__sjs_module_1) {
        var jquery_firefly = __sjs_module_1.default;

        // page code goes here
    });
});

Please note that aliases works only within client-side code. On server-side you still need to operate with actual module names.