1.61.4 • Published 3 years ago

@webruntime/loader v1.61.4

Weekly downloads
1,395
License
MIT
Repository
-
Last release
3 years ago

Lightning Web Runtime :: Loader and Import Maps Service

Table of contents

Introduction

This LWR (Lightning Web Runtime) package provides a client-side loader featuring support for import-maps, a legacy AMD-like module format providing legacy browser compatability, and a server-side loader-service the generation of the import map consumed by the client for LWC based applications.

Background

Import-maps are a developing WICG (stage 3) spec allowing for "bare import specifiers" to work client-side:

<script type="importmap">
    {
        "imports": {
            "moment": "/node_modules/moment/src/moment.js",
            "lodash": "/node_modules/lodash-es/lodash.js"
        }
    }
</script>

Import map allows for import of bare specifiers in modules:

<script type="module">
    import moment from 'moment';
    import('lodash').then(lodash => {});
</script>

Alternatively, modules can be loaded through import-map import URLs:

<!-- maps to url for key `moment` in import-map -->
<script src="import:moment"></script>

Until import-maps are fully adopted, for native modules, you will need a poly-fill to support them in most browsers: es-module-shims.

However the above shim only applies to native modules, and since they are currently not supported in Lightning Web Runtime and LWC, LWR will provide a custom loader using AMD-like modules that will also provide support for import maps following the WICG spec.

LWR Client-side Loader

The LWR loader provides support for import-maps following the WICG spec, and a polyfill for native dynamic imports. Under the covers it uses a customized version of SystemJS as the foundation.

Usage

<head>
    <!-- provides window.loader -->
    <script src="/js/assets/iife/webruntime_loader/loader.js"></script>
    <script type="webruntime-importmap">
        {
            "imports": {
                "lwc": "/js/assets/engine.js",
                "my/app": "/js/components/en_US/latest/my/app.js",
                "my/dialog": "/js/components/en_US/latest/my/dialog.js"
            }
        }
    </script>
    <script>
        (async function() {
            const { default: lwc } = await loader.load('lwc');
            const { default: App } = await loader.load('my/app');
            customElements.define('my-app', lwc.buildCustomElementConstructor(App));
        })();
    </script>
</head>
<body>
    <my-app></my-app>
</body>

Module format

LWC modules must be compiled to AMD format. All modules must have a name.

loader.define(name: string, dependencies: string[], execute: function)

loader.define('my-app', ['lwc'], function(lwc){
    class MyApp extends lwc.LightningElement {
        ...
    }
    var app = lwc.registerComponent(MyApp, {});
    return app;
});

To load and execute module in the same manner as native <script type="module"></script>, set the type to webruntime-module, which the loader will parse and execute.

<script type="webruntime-module" src="/path/to/my/app.js"></script>

*Note, that this does not work for inline scripts.

Import Map

Import map follows the same prroposed WICG syntax. The only difference is the type field value must be webruntime-importmap.

<!-- These 2 import maps will be combined in to a single map -->
<script type="webruntime-importmap" src="/path/to/importmap.json"></script>
<script type="webruntime-importmap">
    {
        "imports": {
            "my/app2": "/js/components/en_US/latest/my/app2.js"
        }
    }
</script>

Import maps must be valid JSON and can be a inlined or linked to the resource. Multiple import maps can be defined in a single document, however they must be defined prior to any import requests, and cannot be modified following that first request.

Import URLs

Import URLs follow the same proposed WICG syntax src="import:<import map key>". The only difference is the type field value must be webruntime-module.

<!-- loads and registers module with name "my/app", executing it -->
<script type="webruntime-module" src="import:my/app"></script>

Dynamic Imports

Dynamic imports can be poly-filled in LWC components using the LWR loader.

import { LightningElement } from 'lwc';
class MyApp extends LightningElement {
    constructor() {
        import('my/dialog').then(m => {
            /* do something with dialog */
        });
    }
}
import { compile } from '@webruntime/compiler';

const compilerResult = await compile({
    name: 'app',
    namespace: 'my',
    files: {
        'app.js': '<app.js code>',
    },
    outputConfig: {
        compat: false,
        format: 'amd',
        formatConfig: {
            define: 'loader.define',
        },
    },
    lwcOptions: {
        experimentalDynamicComponent: {
            loader: 'webruntime_loader/loader',
            strictSpecifier: false,
        },
    },
});

The compiled component results in...

loader.define('my/app', ['lwc', 'webruntime_loader/loader'], function(lwc, loader) {
    class MyApp extends lwc.LightningElement {
        constructor() {
            loader.load('my/dialog').then(m => {
                /* do something with dialog */
            });
        }
    }
    var app = lwc.registerComponent(MyApp, {});
    return app;
});
@webruntime/systemjs
@infinitebrahmanuniverse/nolb-_webr@everything-registry/sub-chunk-1009@zalastax/nolb-_webr
0.61.2-234.9

3 years ago

0.61.2-234.8

3 years ago

0.61.2-234.6

3 years ago

0.61.2-234.7

3 years ago

0.61.2-234.5

3 years ago

0.61.2-234.2

3 years ago

0.61.2-234.1

3 years ago

0.61.2-234.4

3 years ago

0.61.2-234.3

3 years ago

1.61.5-alpha.1711

3 years ago

1.61.4

3 years ago

0.61.2

3 years ago

0.61.1

3 years ago

0.61.3

3 years ago

0.61.0

3 years ago

0.61.2-234.0

3 years ago

0.60.3

3 years ago

0.60.4

3 years ago

0.60.2

3 years ago

0.59.2

3 years ago

0.59.3

3 years ago

0.59.4

3 years ago

0.60.1

3 years ago

0.60.0

3 years ago

0.59.1

3 years ago

0.59.0

3 years ago

0.58.3

3 years ago

0.58.2

3 years ago

0.58.1

3 years ago

0.55.2

3 years ago

0.55.3

3 years ago

0.55.0

3 years ago

0.55.1

3 years ago

0.56.0

3 years ago

0.54.0

3 years ago

0.57.0

3 years ago

0.58.0

3 years ago

0.50.10

3 years ago

0.53.2

3 years ago

0.53.0

3 years ago

0.53.1

3 years ago

0.51.0

3 years ago

0.51.1

3 years ago

0.52.0

3 years ago

0.49.6-232.2

3 years ago

0.50.9

3 years ago

0.50.8

3 years ago

0.50.7

3 years ago

0.49.6-232.0

3 years ago

0.50.6

3 years ago

0.50.5

3 years ago

0.50.3

3 years ago

0.50.4

3 years ago

0.50.2

3 years ago

0.50.1

3 years ago

0.50.0

3 years ago

0.49.7

3 years ago

0.49.6

3 years ago

0.49.5

3 years ago

0.49.4

3 years ago

0.49.1

3 years ago

0.49.0

3 years ago

0.49.3

3 years ago

0.48.6

3 years ago

0.48.2

3 years ago

0.48.3

3 years ago

0.48.0

3 years ago

0.48.1

3 years ago

0.48.4

3 years ago

0.48.5

3 years ago

0.47.4

3 years ago

0.47.3

3 years ago

0.47.2

3 years ago

0.47.1

3 years ago

0.45.10

3 years ago

0.45.11

3 years ago

0.46.0

3 years ago

0.47.0

3 years ago

0.45.9

3 years ago

0.45.8

3 years ago

0.45.6

3 years ago

0.45.7

3 years ago

0.45.5

3 years ago

0.45.4

3 years ago

0.42.6-230.3

3 years ago

0.45.3

3 years ago

0.45.1

3 years ago

0.45.2

3 years ago

0.44.2

3 years ago

0.45.0

3 years ago

0.44.1

3 years ago

0.44.0

3 years ago

0.42.6-230.2

3 years ago

0.43.7

3 years ago

0.43.8

3 years ago

0.43.6

3 years ago

0.43.5

3 years ago

0.43.4

3 years ago

0.43.3

3 years ago

0.42.6-230.1

3 years ago

0.42.6-230.0

3 years ago

0.43.2

3 years ago

0.43.1

3 years ago

0.43.0

3 years ago

0.42.6

3 years ago

0.42.5

3 years ago

0.42.4

3 years ago

0.42.3

3 years ago

0.42.2

3 years ago

0.42.0

3 years ago

0.42.1

3 years ago

0.41.1

3 years ago

0.40.0

3 years ago

0.41.0

3 years ago

0.39.2

3 years ago

0.39.1

3 years ago

0.38.0

3 years ago

0.39.0

3 years ago

0.37.10

3 years ago

0.37.7

3 years ago

0.37.6

4 years ago

0.37.5

4 years ago

0.37.4

4 years ago

0.37.3

4 years ago

0.37.2

4 years ago

0.37.1

4 years ago

0.37.0

4 years ago

0.36.2

4 years ago

0.36.1

4 years ago

0.36.0

4 years ago

0.35.9

4 years ago

0.35.8

4 years ago

0.35.7

4 years ago

0.35.6

4 years ago

0.35.5

4 years ago

0.35.4

4 years ago

0.35.3

4 years ago

0.35.2

4 years ago

0.35.1

4 years ago

0.34.9

4 years ago

0.35.0

4 years ago

0.34.10

4 years ago

0.34.8

4 years ago

0.34.7

4 years ago

0.34.6

4 years ago

0.34.5

4 years ago

0.34.4

4 years ago

0.34.3

4 years ago

0.34.2

4 years ago

0.34.1

4 years ago

0.34.0

4 years ago

0.33.29

4 years ago

0.33.28

4 years ago

0.33.27

4 years ago

0.33.26

4 years ago

0.33.24-228.1

4 years ago

0.33.24-228.0

4 years ago

0.33.25

4 years ago

0.33.24

4 years ago

0.33.23

4 years ago

0.33.21

4 years ago

0.33.22

4 years ago

0.33.20

4 years ago

0.33.19

4 years ago

0.33.18

4 years ago

0.33.17

4 years ago

0.33.16

4 years ago

0.33.15

4 years ago

0.33.14

4 years ago

0.33.13

4 years ago

0.33.12

4 years ago

0.33.11

4 years ago

0.33.10

4 years ago

0.33.9

4 years ago

0.33.8

4 years ago

0.33.7

4 years ago

0.33.6

4 years ago

0.33.5

4 years ago

0.33.4

4 years ago

0.33.3

4 years ago

0.33.2

4 years ago

0.33.1

4 years ago

0.33.0

4 years ago

0.32.3

4 years ago

0.32.2

4 years ago

0.32.1

4 years ago

0.32.0

4 years ago

0.31.1

4 years ago

0.31.0

4 years ago

0.30.14

4 years ago

0.30.13

4 years ago

0.30.11

4 years ago

0.30.12

4 years ago

0.30.10

4 years ago

0.30.9

4 years ago

0.30.8

4 years ago

0.30.7

4 years ago

0.30.6

4 years ago

0.30.5

4 years ago

0.30.4

4 years ago

0.30.3

4 years ago

0.30.2

4 years ago

0.30.1

4 years ago

0.30.0

4 years ago

0.29.34

4 years ago

0.29.33

4 years ago

0.29.32

4 years ago

0.29.31

4 years ago

0.29.30

4 years ago

0.29.29

4 years ago

0.29.28

4 years ago

0.29.27

4 years ago

0.29.26

4 years ago

0.29.24

4 years ago

0.29.25

4 years ago

0.29.23

4 years ago

0.29.22

4 years ago

0.29.21

4 years ago

0.29.20

4 years ago

0.29.19

4 years ago

0.29.13-226.1

4 years ago

0.29.18

4 years ago

0.29.16

4 years ago

0.29.17

4 years ago

0.29.15

4 years ago

0.29.13-226.0

4 years ago

0.29.13

4 years ago

0.29.14

4 years ago

0.29.12

4 years ago

0.29.10

4 years ago

0.29.11

4 years ago

0.29.9

4 years ago

0.29.8

4 years ago

0.29.7

4 years ago

0.29.6

4 years ago

0.29.5

4 years ago

0.29.4

4 years ago

0.29.3

4 years ago

0.29.2

4 years ago

0.29.1

4 years ago

0.29.0

4 years ago

0.28.5

4 years ago

0.28.4

4 years ago

0.28.3

4 years ago

0.28.2

4 years ago

0.28.1

4 years ago

0.28.0

4 years ago

0.27.1

4 years ago

0.27.0

4 years ago

0.26.1

4 years ago

0.26.0

4 years ago

0.25.3

4 years ago

0.25.2

4 years ago

0.25.1

4 years ago

0.25.0

4 years ago

0.24.0

4 years ago

0.23.1

4 years ago

0.23.0

4 years ago

0.22.4

4 years ago

0.22.3

4 years ago

0.22.2

4 years ago

0.22.1

4 years ago

0.21.8

4 years ago

0.22.0

4 years ago

0.21.9

4 years ago

0.21.7

4 years ago

0.21.6

4 years ago

0.21.5

4 years ago

0.21.4

4 years ago

0.21.3

4 years ago

0.21.2

4 years ago

0.21.1

4 years ago

0.21.0

4 years ago

0.20.18

4 years ago

0.20.17

4 years ago

0.20.15

4 years ago

0.20.14

4 years ago

0.20.13-226.0

4 years ago

0.20.13

4 years ago

0.20.11

4 years ago

0.20.12

4 years ago

0.20.10

4 years ago

0.20.9

4 years ago

0.20.8

4 years ago

0.20.6

4 years ago

0.20.5

4 years ago

0.20.3

4 years ago

0.20.2

4 years ago