From: Johann-S <johann.servoire@gmail.com>
Date: Sun, 3 Mar 2019 10:01:29 +0000 (+0200)
Subject: add docs about how to use the esm version
X-Git-Tag: v5.0.0-alpha1~1222
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ba9caacaa588cca41af9a899bca8a1020f784f18;p=thirdparty%2Fbootstrap.git

add docs about how to use the esm version
---

diff --git a/site/docs/4.3/getting-started/contents.md b/site/docs/4.3/getting-started/contents.md
index 1809fa34d5..efaee638cc 100644
--- a/site/docs/4.3/getting-started/contents.md
+++ b/site/docs/4.3/getting-started/contents.md
@@ -32,6 +32,10 @@ bootstrap/
     ├── bootstrap.bundle.js.map
     ├── bootstrap.bundle.min.js
     ├── bootstrap.bundle.min.js.map
+    ├── bootstrap.esm.js
+    ├── bootstrap.esm.js.map
+    ├── bootstrap.esm.min.js
+    ├── bootstrap.esm.min.js.map
     ├── bootstrap.js
     ├── bootstrap.js.map
     ├── bootstrap.min.js
diff --git a/site/docs/4.3/getting-started/introduction.md b/site/docs/4.3/getting-started/introduction.md
index 49602f3603..08363687c9 100644
--- a/site/docs/4.3/getting-started/introduction.md
+++ b/site/docs/4.3/getting-started/introduction.md
@@ -33,6 +33,8 @@ Many of our components require the use of JavaScript to function. Specifically,
 <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
 {% endhighlight %}
 
+If you use `<script type="module">`, please refer to our [using Bootstrap as a module]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module) section.
+
 Curious which components explicitly require our JavaScript and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
 
 Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section.
diff --git a/site/docs/4.3/getting-started/javascript.md b/site/docs/4.3/getting-started/javascript.md
index 5659f6f936..bf9ebfe633 100644
--- a/site/docs/4.3/getting-started/javascript.md
+++ b/site/docs/4.3/getting-started/javascript.md
@@ -12,6 +12,26 @@ Plugins can be included individually (using Bootstrap's individual `js/dist/*.js
 
 If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files which are UMD ready.
 
+## Using Bootstrap as a module
+
+We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in your browser, if your [targeted browsers support it](https://caniuse.com/#feat=es6-module).
+
+{% highlight html %}
+<script type="module">
+  import { Toast } from 'bootstrap.esm.min.js'
+
+  Array.from(document.querySelectorAll('.toast'))
+    .forEach(toastNode => new Toast(toastNode))
+</script>
+{% endhighlight %}
+
+{% capture callout %}
+## Incompatible plugins
+
+Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a `<script>` tag with `module` type because they depend on Popper.js. For more information about the issue see [here](https://developers.google.com/web/fundamentals/primers/modules#specifiers).
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
+
 ## Dependencies
 
 Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.