Merge pull request #5028 from open-formulieren/feature/sdk-76-use-esm…

…-bundle

Opt-in to ESM bundle of SDK

src/openforms/forms/context_processors.py

@@ -11,11 +11,13 @@ def sdk_urls(request):
     if settings.SDK_RELEASE != "latest":
         sdk_path /= settings.SDK_RELEASE
 
-    js_path = str(sdk_path / "open-forms-sdk.js")
     css_path = str(sdk_path / "open-forms-sdk.css")
+    umd_bundle_path = str(sdk_path / "open-forms-sdk.js")
+    esm_bundle_path = str(sdk_path / "open-forms-sdk.mjs")
 
     return {
-        "sdk_js_url": static(js_path),
+        "sdk_esm_url": static(esm_bundle_path),
+        "sdk_umd_url": static(umd_bundle_path),
         "sdk_css_url": static(css_path),
         "sdk_sentry_dsn": settings.SDK_SENTRY_DSN,
         "sdk_sentry_env": settings.SDK_SENTRY_ENVIRONMENT,

src/openforms/forms/templates/forms/sdk_info_banner.html

@@ -1,6 +1,6 @@
 {% load i18n %}{% if enabled %}
 <div class="info-bar">
     <span>{% trans "Javascript SDK used" %}</span>
-    <code>{{ sdk_js_url }}</code>
+    <code>{{ sdk_umd_url }}</code>
 </div>
 {% endif %}

src/openforms/forms/templates/forms/sdk_snippet.html

@@ -1,7 +1,23 @@
-{% load openforms %}{% if form %}{% with 'openforms-container' as div_id %}
-<div id="{{ div_id }}"></div>
-<script src="{{ sdk_js_url }}"></script>
-<script nonce="{{ request.csp_nonce }}">
+{% load openforms static %}{% if form %}{% with 'openforms-container' as div_id %}
+{# Preload the module #}
+<link href="{{ sdk_esm_url }}" rel="modulepreload" />
+<div
+    class="open-forms-sdk-root"
+    id="{{ div_id }}"
+    data-sdk-module="{{ sdk_esm_url }}"
+    data-form-id="{{ form.slug }}"
+    data-base-url="{% api_base_url %}"
+    data-base-path="{% if base_path %}{{ base_path }}{% else %}{% url 'forms:form-detail' slug=form.slug %}{% endif %}"
+    data-csp-nonce="{{ request.csp_nonce }}"
+    {% if sdk_sentry_dsn %}data-sentry-dsn{% endif %}
+    {% if sdk_sentry_env %}data-sentry-env{% endif %}
+></div>
+{# Modern browsers support modules, legacy browsers ignore this and use the fallback #}
+<script type="module" src="{% static 'sdk-wrapper.mjs' %}"></script>
+
+{# Fallback #}
+<script src="{{ sdk_umd_url }}" nomodule></script>
+<script nonce="{{ request.csp_nonce }}" nomodule>
     const formId = '{{ form.slug|escapejs }}';
     const baseUrl = '{% filter escapejs %}{% api_base_url %}{% endfilter %}';
     const targetNode = document.getElementById('{{ div_id|escapejs }}');

src/openforms/static/sdk-wrapper.mjs

@@ -0,0 +1,38 @@
+// NOTE - this file must be in the static folder and loaded as type="module", since
+// it's intended for modern browsers only and must be ignored by browsers that don't
+// natively support modules.
+
+/**
+ * Given a form node on the page, extract the options from the data-* attributes and
+ * initialize it.
+ * @param  {HTMLDivElement} node The root node for the SDK where the form must be
+ * rendered. It must have the expected data attributes.
+ * @return {Void}
+ */
+const initializeSDK = async node => {
+  const {
+    sdkModule,
+    formId,
+    baseUrl,
+    basePath,
+    cspNonce,
+    sentryDsn = '',
+    sentryEnv = '',
+  } = node.dataset;
+  const {OpenForm} = await import(sdkModule);
+
+  // initialize the SDK
+  const options = {
+    baseUrl,
+    formId,
+    basePath,
+    CSPNonce: cspNonce,
+  };
+  if (sentryDsn) options.sentryDSN = sentryDsn;
+  if (sentryEnv) options.sentryEnv = sentryEnv;
+  const form = new OpenForm(node, options);
+  form.init();
+};
+
+const sdkNodes = document.querySelectorAll('.open-forms-sdk-root');
+sdkNodes.forEach(node => initializeSDK(node));

src/openforms/utils/tests/test_sdk_urls.py

@@ -25,6 +25,16 @@ def test_sdk_latest(self):
                 fetch_redirect_response=False,
             )
 
+        mjs_url = f"{base}open-forms-sdk.mjs"
+        with self.subTest(js_url=mjs_url):
+            js_response = self.client.get(mjs_url)
+
+            self.assertRedirects(
+                js_response,
+                f"{base}1.2.3/open-forms-sdk.mjs",
+                fetch_redirect_response=False,
+            )
+
         css_url = f"{base}open-forms-sdk.css"
         with self.subTest(css_url=css_url):
             css_response = self.client.get(css_url)

src/openforms/utils/views.py

@@ -72,10 +72,15 @@ class SDKRedirectView(RedirectView):
 
     def get_redirect_url(self, ext: str):
         urls = sdk_urls(self.request)
-        key = f"sdk_{ext}_url"
-        if key not in urls:
-            raise BadRequest(f"Invalid extension '{ext}'")
-        return urls[key]
+        match ext:
+            case "js":
+                return urls["sdk_umd_url"]
+            case "mjs":
+                return urls["sdk_esm_url"]
+            case "css":
+                return urls["sdk_css_url"]
+            case _:
+                raise BadRequest(f"Invalid extension '{ext}'")
 
 
 class DevViewMixin(LoginRequiredMixin, UserPassesTestMixin):