Add link-once and script-once web components

core/static/webpack/core/components/include-index.ts

@@ -0,0 +1,33 @@
+import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
+
+/**
+ * Web component used to import css files only once
+ * If called multiple times or the file was already imported, it does nothing
+ **/
+@registerComponent("link-once")
+export class LinkOnce extends inheritHtmlElement("link") {
+  connectedCallback() {
+    super.connectedCallback(false);
+    // We get href from node.attributes instead of node.href to avoid getting the domain part
+    const href = this.node.attributes.getNamedItem("href").nodeValue;
+    if (document.querySelectorAll(`link[href='${href}']`).length === 0) {
+      this.appendChild(this.node);
+    }
+  }
+}
+
+/**
+ * Web component used to import javascript files only once
+ * If called multiple times or the file was already imported, it does nothing
+ **/
+@registerComponent("script-once")
+export class ScriptOnce extends inheritHtmlElement("script") {
+  connectedCallback() {
+    super.connectedCallback(false);
+    // We get src from node.attributes instead of node.src to avoid getting the domain part
+    const src = this.node.attributes.getNamedItem("src").nodeValue;
+    if (document.querySelectorAll(`script[src='${src}']`).length === 0) {
+      this.appendChild(this.node);
+    }
+  }
+}

core/static/webpack/easymde-index.ts

@@ -185,8 +185,8 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
 
 @registerComponent("markdown-input")
 class MarkdownInput extends inheritHtmlElement("textarea") {
-  constructor() {
-    super();
-    window.addEventListener("DOMContentLoaded", () => loadEasyMde(this.node));
+  connectedCallback() {
+    super.connectedCallback();
+    loadEasyMde(this.node);
   }
 }

core/static/webpack/utils/web-components.ts

@@ -30,8 +30,7 @@ export function inheritHtmlElement<K extends keyof HTMLElementTagNameMap>(tagNam
   return class Inherited extends HTMLElement {
     protected node: HTMLElementTagNameMap[K];
 
-    constructor() {
-      super();
+    connectedCallback(autoAddNode?: boolean) {
       this.node = document.createElement(tagName);
       const attributes: Attr[] = []; // We need to make a copy to delete while iterating
       for (const attr of this.attributes) {
@@ -44,7 +43,10 @@ export function inheritHtmlElement<K extends keyof HTMLElementTagNameMap>(tagNam
         this.removeAttributeNode(attr);
         this.node.setAttributeNode(attr);
       }
-      this.appendChild(this.node);
+      // Atuomatically add node to DOM if autoAddNode is true or unspecified
+      if (autoAddNode === undefined || autoAddNode) {
+        this.appendChild(this.node);
+      }
     }
   };
 }

core/templates/core/base.jinja

@@ -21,6 +21,7 @@
       <link rel="preload" as="style" href="{{ static('webpack/fontawesome-index.css') }}" onload="this.onload=null;this.rel='stylesheet'">
       <noscript><link rel="stylesheet" href="{{ static('webpack/fontawesome-index.css') }}"></noscript>
 
+      <script src={{ static("webpack/core/components/include-index.ts") }}></script>
       <script src="{{ static('webpack/alpine-index.js') }}" defer></script>
             <!-- Jquery declared here to be accessible in every django widgets -->
       <script src="{{ static('webpack/jquery-index.js') }}"></script>

core/templates/core/widgets/markdown_textarea.jinja

@@ -1,7 +1,7 @@
 <div>
-  <markdown-input name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</markdown-input>
+  <script-once src="{{ statics.js }}" defer></script-once>
+  <link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-once>
 
-  {# The easymde script can be included twice, it's safe in the code #}
-  <script src="{{ statics.js }}" defer> </script>
-  <link rel="stylesheet" type="text/css" href="{{ statics.css }}" defer>
-</div>
+    <markdown-input name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</markdown-input>
+
+  </div>