ischenko/yii2-jsloader-systemjs

An Yii2 extension that allows to handle asset bundles via systemjs

v1.0.1 2020-03-18 12:22 UTC

Requires

• php: >=7.1
• ext-json: *
• bower-asset/system.js: ^6.2
• ischenko/yii2-jsloader: ~1.3.1

Requires (Dev)

• codeception/assert-throws: ~1.0
• codeception/codeception: ~4.0
• codeception/module-asserts: ~1.1
• codeception/module-filesystem: *
• codeception/module-yii2: *
• codeception/specify: ~1.2
• codeception/verify: ~1.2

MIT

• Roman Ishchenko

• assets
• view
• Behavior
• yii2
• systemjs

README

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.