Merge pull request #18 from hamadr/feat-module-es6

feat: javascript is now inside a ES6 module

README.md

@@ -130,8 +130,6 @@ url_patterns = [
 
 ## Usage
 
-Add `dalec/js/main.js` inside templates where you need to use the dalec. 
-
 Each dalec's child app will probably need some specific configuration to retrieve external contents 
 (eg: token or login/password). Please refer to this dalec's child app configuration section first.
 

dalec/static/dalec/js/main.js

@@ -1,4 +1,4 @@
-function dalec_fetch_content(container) {
+export function fetch_content(container) {
   const [orderedBy, url] = [container.dataset.orderedBy, container.dataset.url];
   let channelObjects = container.dataset.channelObjects;
 
@@ -36,5 +36,3 @@ function dalec_fetch_content(container) {
     });
   });
 }
-
-module.exports = dalec_fetch_content;

dalec/templates/dalec/default/list.html

@@ -1,3 +1,4 @@
+{% load static %}
 {% block dalec_list_header %}
 {% endblock dalec_list_header %}
 
@@ -27,10 +28,10 @@
         </div>
 
         {% if ajax_refresh %}
-        <script type="text/javascript">
-            window.addEventListener("load", (event) => {
-              dalecElement = document.getElementById('dalec-{{ id }}');
-              dalec_fetch_content(dalecElement);
+        <script type="module">
+            import("{% static 'dalec/js/main.js' %}").then((DalecModule) => {
+                const dalecElement = document.getElementById('dalec-{{ id }}');
+                DalecModule.fetch_content(dalecElement);
             });
         </script>
         {% endif %}

tests/settings.py

@@ -32,3 +32,5 @@
         "NAME": os.path.join(BASE_PATH, "tests.sqlite3"),
     }
 }
+
+STATIC_URL = "/static/"

tests_js/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+  ],
+};

tests_js/jest.config.js

@@ -1,5 +1,4 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
-  preset: "ts-jest",
   testEnvironment: "jsdom",
 };

tests_js/main.test.ts

@@ -1,8 +1,8 @@
-const dalec_fetch_content = require("../dalec/static/dalec/js/main.js");
+import { fetch_content } from "../dalec/static/dalec/js/main.js";
 
 let dalecContainer: HTMLElement;
 
-describe("dalec_fetch_content", () => {
+describe("fetch_content", () => {
   describe("without channelObjects nor orderBy", () => {
     beforeAll(() => {
       document.body.innerHTML = `
@@ -16,7 +16,7 @@ describe("dalec_fetch_content", () => {
         });
       }) as jest.Mock;
       dalecContainer = document.getElementById("dalec-1");
-      dalec_fetch_content(dalecContainer);
+      fetch_content(dalecContainer);
     });
 
     it("should fetch url", () => {
@@ -52,7 +52,7 @@ describe("dalec_fetch_content", () => {
         }),
       ) as jest.Mock;
       dalecContainer = document.getElementById("dalec-1");
-      dalec_fetch_content(dalecContainer);
+      fetch_content(dalecContainer);
     });
 
     it("should call fetch with channelObjects and orderedBy", () => {
@@ -76,7 +76,7 @@ describe("dalec_fetch_content", () => {
         }),
       ) as jest.Mock;
       dalecContainer = document.getElementById("dalec-1");
-      dalec_fetch_content(dalecContainer);
+      fetch_content(dalecContainer);
     });
 
     it("should call fetch with channelObjects", () => {
@@ -101,7 +101,7 @@ describe("dalec_fetch_content", () => {
         }),
       ) as jest.Mock;
       dalecContainer = document.getElementById("dalec-1");
-      dalec_fetch_content(dalecContainer);
+      fetch_content(dalecContainer);
     });
 
     it("should call fetch with orderedBy", () => {
@@ -125,7 +125,7 @@ describe("dalec_fetch_content", () => {
         }),
       ) as jest.Mock;
       dalecContainer = document.getElementById("dalec-1");
-      dalec_fetch_content(dalecContainer);
+      fetch_content(dalecContainer);
     });
 
     it("should not have the loading css class", () => {