Passage de webpack à vite.dev

core/static/bundled/fontawesome-index.js

@@ -1 +1 @@
-require("@fortawesome/fontawesome-free/css/all.css");
+import "@fortawesome/fontawesome-free/css/all.css";

core/static/bundled/htmx-index.js

@@ -1 +1,3 @@
-window.htmx = require("htmx.org");
+import htmx from "htmx.org";
+
+Object.assign(window, { htmx });

core/static/bundled/jquery-index.js

@@ -1,25 +0,0 @@
-import $ from "jquery";
-import "jquery.shorten/src/jquery.shorten.min.js";
-
-// We ship jquery-ui with jquery because when standalone with webpack
-// JQuery is also included in the jquery-ui package. We do gain space by doing this
-// We require jquery-ui components manually and not in a loop
-// Otherwise it increases the output files by a x2 factor !
-require("jquery-ui/ui/widgets/accordion.js");
-require("jquery-ui/ui/widgets/autocomplete.js");
-require("jquery-ui/ui/widgets/button.js");
-require("jquery-ui/ui/widgets/dialog.js");
-require("jquery-ui/ui/widgets/tabs.js");
-
-require("jquery-ui/themes/base/all.css");
-
-/**
- * Simple wrapper to solve shorten not being able on legacy pages
- * @param {string} selector to be passed to jQuery
- * @param {Object} options object to pass to the shorten function
- **/
-function shorten(selector, options) {
-  $(selector).shorten(options);
-}
-
-window.shorten = shorten;

core/static/bundled/jquery-ui-index.js

@@ -0,0 +1,2 @@
+// This is only used to import jquery-ui css files
+import "jquery-ui/themes/base/all.css";

core/templates/core/base.jinja

@@ -14,18 +14,19 @@
 
       {% block jquery_css %}
         {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
-        <link rel="stylesheet" href="{{ static('bundled/jquery-index.css') }}">
+        <link rel="stylesheet" href="{{ static('bundled/jquery-ui-index.css') }}">
       {% endblock %}
       <link rel="preload" as="style" href="{{ static('bundled/fontawesome-index.css') }}" onload="this.onload=null;this.rel='stylesheet'">
       <noscript><link rel="stylesheet" href="{{ static('bundled/fontawesome-index.css') }}"></noscript>
 
       <script src="{{ url('javascript-catalog') }}"></script>
-      <script src={{ static("bundled/core/components/include-index.ts") }}></script>
-      <script src="{{ static('bundled/alpine-index.js') }}" defer></script>
-      <script src="{{ static('bundled/htmx-index.js') }}" defer></script>
-            <!-- Jquery declared here to be accessible in every django widgets -->
-      <script src="{{ static('bundled/jquery-index.js') }}"></script>
-            <!-- Put here to always have access to those functions on django widgets -->
+      <script type="module" src={{ static("bundled/core/components/include-index.ts") }}></script>
+      <script type="module" src="{{ static('bundled/alpine-index.js') }}"></script>
+      <script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
+
+      <!-- Jquery declared here to be accessible in every django widgets -->
+      <script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>
+      <script src="{{ static('bundled/vendored/jquery-ui.min.js') }}"></script>
       <script src="{{ static('core/js/script.js') }}"></script>
 
 

core/templates/core/user_godfathers_tree.jinja

@@ -7,7 +7,7 @@
 {%- endblock -%}
 
 {% block additional_js %}
-  <script src="{{ static("bundled/user/family-graph-index.js") }}" defer></script>
+  <script type="module" src="{{ static("bundled/user/family-graph-index.js") }}" defer></script>
 {% endblock %}
 
 {% block title %}

core/templates/core/user_pictures.jinja

@@ -5,7 +5,7 @@
 {%- endblock -%}
 
 {% block additional_js %}
-  <script src="{{ static('bundled/user/pictures-index.js') }}" defer></script>
+  <script type="module" src="{{ static('bundled/user/pictures-index.js') }}" defer></script>
 {% endblock %}
 
 {% block title %}

core/templates/core/widgets/autocomplete_select.jinja

@@ -1,5 +1,5 @@
 {% for js in statics.js %}
-  <script-once src="{{ js }}" defer></script-once>
+  <script-once type="module" src="{{ js }}" defer></script-once>
 {% endfor %}
 {% for css in statics.css %}
   <link-once rel="stylesheet" type="text/css" href="{{ css }}" defer></link-once>

core/templates/core/widgets/markdown_textarea.jinja

@@ -1,5 +1,5 @@
 <div>
-  <script-once src="{{ statics.js }}" defer></script-once>
+  <script-once type="module" src="{{ statics.js }}" defer></script-once>
   <link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-once>
 
     <markdown-input name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</markdown-input>

core/templates/core/widgets/nfc.jinja

@@ -1,4 +1,4 @@
-<script-once src="{{ statics.js }}" defer></script-once>
+<script-once type="module" src="{{ statics.js }}" defer></script-once>
 <link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-once>
 
   <span>

core/views/widgets/markdown.py

@@ -10,6 +10,6 @@ class MarkdownInput(Textarea):
 
         context["statics"] = {
             "js": staticfiles_storage.url("bundled/core/components/easymde-index.ts"),
-            "css": staticfiles_storage.url("bundled/core/components/easymde-index.css"),
+            "css": staticfiles_storage.url("bundled/easymde-index.css"),
         }
         return context

core/views/widgets/select.py

@@ -22,7 +22,7 @@ class AutoCompleteSelectMixin:
         "bundled/core/components/ajax-select-index.ts",
     ]
     css = [
-        "bundled/core/components/ajax-select-index.css",
+        "bundled/ajax-select-index.css",
         "core/components/ajax-select.scss",
     ]