From 7b41051d0d39010b56f2d743306ead04b3655824 Mon Sep 17 00:00:00 2001 From: Sli Date: Mon, 18 Nov 2024 15:36:05 +0100 Subject: [PATCH] Go for a more generic js bundling architecture * Don't tie the output name to webpack itself * Don't call js bundling webpack in python code * Make the doc more generic about js bundling --- .../components/ajax-select-index.ts | 0 accounting/widgets/select.py | 2 +- .../club/components/ajax-select-index.ts | 0 club/widgets/select.py | 2 +- com/templates/com/screen_slideshow.jinja | 2 +- .../{webpack => bundled}/alpine-index.js | 0 .../core/components/ajax-select-base.ts | 0 .../core/components/ajax-select-index.ts | 0 .../core/components/easymde-index.ts | 0 .../core/components/include-index.ts | 0 .../core/components/nfc-input-index.ts | 0 .../{webpack => bundled}/fontawesome-index.js | 0 .../static/{webpack => bundled}/htmx-index.js | 0 .../{webpack => bundled}/jquery-index.js | 0 .../sentry-popup-index.ts | 0 .../{webpack => bundled}/types/web-nfc.d.ts | 0 .../user/family-graph-index.js | 0 .../user/pictures-index.js | 0 core/static/{webpack => bundled}/utils/api.ts | 0 .../{webpack => bundled}/utils/globals.ts | 0 .../{webpack => bundled}/utils/history.ts | 0 .../utils/web-components.ts | 0 core/templates/core/500.jinja | 2 +- core/templates/core/base.jinja | 14 ++++++------- .../templates/core/user_godfathers_tree.jinja | 2 +- core/templates/core/user_pictures.jinja | 2 +- core/views/forms.py | 2 +- core/views/widgets/markdown.py | 4 ++-- core/views/widgets/select.py | 4 ++-- .../counter/components/ajax-select-index.ts | 0 counter/widgets/select.py | 2 +- docs/howto/js-import-paths.md | 6 +++--- docs/howto/statics.md | 20 +++++++++---------- docs/tutorial/structure.md | 6 +++--- .../eboutic/eboutic-index.ts | 0 eboutic/templates/eboutic/eboutic_main.jinja | 2 +- .../galaxy/galaxy-index.js | 0 galaxy/templates/galaxy/user.jinja | 2 +- package.json | 4 ++-- .../pedagogy/guide-index.js | 0 pedagogy/templates/pedagogy/guide.jinja | 2 +- .../{webpack => bundled}/sas/album-index.js | 0 .../sas/components/ajax-select-index.ts | 0 .../{webpack => bundled}/sas/viewer-index.ts | 0 sas/templates/sas/album.jinja | 2 +- sas/templates/sas/picture.jinja | 6 +++--- sas/widgets/select.py | 2 +- staticfiles/apps.py | 6 +++--- staticfiles/finders.py | 6 +++--- .../management/commands/collectstatic.py | 8 ++++---- staticfiles/management/commands/runserver.py | 10 +++++----- staticfiles/processors.py | 10 +++++----- .../subscription/stats-index.ts | 0 .../templates/subscription/stats.jinja | 2 +- tsconfig.json | 6 +++--- webpack.config.js | 8 ++++---- 56 files changed, 73 insertions(+), 73 deletions(-) rename accounting/static/{webpack => bundled}/accounting/components/ajax-select-index.ts (100%) rename club/static/{webpack => bundled}/club/components/ajax-select-index.ts (100%) rename core/static/{webpack => bundled}/alpine-index.js (100%) rename core/static/{webpack => bundled}/core/components/ajax-select-base.ts (100%) rename core/static/{webpack => bundled}/core/components/ajax-select-index.ts (100%) rename core/static/{webpack => bundled}/core/components/easymde-index.ts (100%) rename core/static/{webpack => bundled}/core/components/include-index.ts (100%) rename core/static/{webpack => bundled}/core/components/nfc-input-index.ts (100%) rename core/static/{webpack => bundled}/fontawesome-index.js (100%) rename core/static/{webpack => bundled}/htmx-index.js (100%) rename core/static/{webpack => bundled}/jquery-index.js (100%) rename core/static/{webpack => bundled}/sentry-popup-index.ts (100%) rename core/static/{webpack => bundled}/types/web-nfc.d.ts (100%) rename core/static/{webpack => bundled}/user/family-graph-index.js (100%) rename core/static/{webpack => bundled}/user/pictures-index.js (100%) rename core/static/{webpack => bundled}/utils/api.ts (100%) rename core/static/{webpack => bundled}/utils/globals.ts (100%) rename core/static/{webpack => bundled}/utils/history.ts (100%) rename core/static/{webpack => bundled}/utils/web-components.ts (100%) rename counter/static/{webpack => bundled}/counter/components/ajax-select-index.ts (100%) rename eboutic/static/{webpack => bundled}/eboutic/eboutic-index.ts (100%) rename galaxy/static/{webpack => bundled}/galaxy/galaxy-index.js (100%) rename pedagogy/static/{webpack => bundled}/pedagogy/guide-index.js (100%) rename sas/static/{webpack => bundled}/sas/album-index.js (100%) rename sas/static/{webpack => bundled}/sas/components/ajax-select-index.ts (100%) rename sas/static/{webpack => bundled}/sas/viewer-index.ts (100%) rename subscription/static/{webpack => bundled}/subscription/stats-index.ts (100%) diff --git a/accounting/static/webpack/accounting/components/ajax-select-index.ts b/accounting/static/bundled/accounting/components/ajax-select-index.ts similarity index 100% rename from accounting/static/webpack/accounting/components/ajax-select-index.ts rename to accounting/static/bundled/accounting/components/ajax-select-index.ts diff --git a/accounting/widgets/select.py b/accounting/widgets/select.py index 27714440..6b3145b7 100644 --- a/accounting/widgets/select.py +++ b/accounting/widgets/select.py @@ -4,7 +4,7 @@ from accounting.models import ClubAccount, Company from accounting.schemas import ClubAccountSchema, CompanySchema from core.views.widgets.select import AutoCompleteSelect, AutoCompleteSelectMultiple -_js = ["webpack/accounting/components/ajax-select-index.ts"] +_js = ["bundled/accounting/components/ajax-select-index.ts"] class AutoCompleteSelectClubAccount(AutoCompleteSelect): diff --git a/club/static/webpack/club/components/ajax-select-index.ts b/club/static/bundled/club/components/ajax-select-index.ts similarity index 100% rename from club/static/webpack/club/components/ajax-select-index.ts rename to club/static/bundled/club/components/ajax-select-index.ts diff --git a/club/widgets/select.py b/club/widgets/select.py index c7063328..d46bb344 100644 --- a/club/widgets/select.py +++ b/club/widgets/select.py @@ -4,7 +4,7 @@ from club.models import Club from club.schemas import ClubSchema from core.views.widgets.select import AutoCompleteSelect, AutoCompleteSelectMultiple -_js = ["webpack/club/components/ajax-select-index.ts"] +_js = ["bundled/club/components/ajax-select-index.ts"] class AutoCompleteSelectClub(AutoCompleteSelect): diff --git a/com/templates/com/screen_slideshow.jinja b/com/templates/com/screen_slideshow.jinja index 509c0640..f7cedc14 100644 --- a/com/templates/com/screen_slideshow.jinja +++ b/com/templates/com/screen_slideshow.jinja @@ -3,7 +3,7 @@ {% trans %}Slideshow{% endtrans %} - + diff --git a/core/static/webpack/alpine-index.js b/core/static/bundled/alpine-index.js similarity index 100% rename from core/static/webpack/alpine-index.js rename to core/static/bundled/alpine-index.js diff --git a/core/static/webpack/core/components/ajax-select-base.ts b/core/static/bundled/core/components/ajax-select-base.ts similarity index 100% rename from core/static/webpack/core/components/ajax-select-base.ts rename to core/static/bundled/core/components/ajax-select-base.ts diff --git a/core/static/webpack/core/components/ajax-select-index.ts b/core/static/bundled/core/components/ajax-select-index.ts similarity index 100% rename from core/static/webpack/core/components/ajax-select-index.ts rename to core/static/bundled/core/components/ajax-select-index.ts diff --git a/core/static/webpack/core/components/easymde-index.ts b/core/static/bundled/core/components/easymde-index.ts similarity index 100% rename from core/static/webpack/core/components/easymde-index.ts rename to core/static/bundled/core/components/easymde-index.ts diff --git a/core/static/webpack/core/components/include-index.ts b/core/static/bundled/core/components/include-index.ts similarity index 100% rename from core/static/webpack/core/components/include-index.ts rename to core/static/bundled/core/components/include-index.ts diff --git a/core/static/webpack/core/components/nfc-input-index.ts b/core/static/bundled/core/components/nfc-input-index.ts similarity index 100% rename from core/static/webpack/core/components/nfc-input-index.ts rename to core/static/bundled/core/components/nfc-input-index.ts diff --git a/core/static/webpack/fontawesome-index.js b/core/static/bundled/fontawesome-index.js similarity index 100% rename from core/static/webpack/fontawesome-index.js rename to core/static/bundled/fontawesome-index.js diff --git a/core/static/webpack/htmx-index.js b/core/static/bundled/htmx-index.js similarity index 100% rename from core/static/webpack/htmx-index.js rename to core/static/bundled/htmx-index.js diff --git a/core/static/webpack/jquery-index.js b/core/static/bundled/jquery-index.js similarity index 100% rename from core/static/webpack/jquery-index.js rename to core/static/bundled/jquery-index.js diff --git a/core/static/webpack/sentry-popup-index.ts b/core/static/bundled/sentry-popup-index.ts similarity index 100% rename from core/static/webpack/sentry-popup-index.ts rename to core/static/bundled/sentry-popup-index.ts diff --git a/core/static/webpack/types/web-nfc.d.ts b/core/static/bundled/types/web-nfc.d.ts similarity index 100% rename from core/static/webpack/types/web-nfc.d.ts rename to core/static/bundled/types/web-nfc.d.ts diff --git a/core/static/webpack/user/family-graph-index.js b/core/static/bundled/user/family-graph-index.js similarity index 100% rename from core/static/webpack/user/family-graph-index.js rename to core/static/bundled/user/family-graph-index.js diff --git a/core/static/webpack/user/pictures-index.js b/core/static/bundled/user/pictures-index.js similarity index 100% rename from core/static/webpack/user/pictures-index.js rename to core/static/bundled/user/pictures-index.js diff --git a/core/static/webpack/utils/api.ts b/core/static/bundled/utils/api.ts similarity index 100% rename from core/static/webpack/utils/api.ts rename to core/static/bundled/utils/api.ts diff --git a/core/static/webpack/utils/globals.ts b/core/static/bundled/utils/globals.ts similarity index 100% rename from core/static/webpack/utils/globals.ts rename to core/static/bundled/utils/globals.ts diff --git a/core/static/webpack/utils/history.ts b/core/static/bundled/utils/history.ts similarity index 100% rename from core/static/webpack/utils/history.ts rename to core/static/bundled/utils/history.ts diff --git a/core/static/webpack/utils/web-components.ts b/core/static/bundled/utils/web-components.ts similarity index 100% rename from core/static/webpack/utils/web-components.ts rename to core/static/bundled/utils/web-components.ts diff --git a/core/templates/core/500.jinja b/core/templates/core/500.jinja index c743cca0..f56359f2 100644 --- a/core/templates/core/500.jinja +++ b/core/templates/core/500.jinja @@ -1,7 +1,7 @@ {% extends "core/base.jinja" %} {% block additional_js %} {% if settings.SENTRY_DSN %} - + {% endif %} {% endblock additional_js %} diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja index e7f915a0..fd9a3602 100644 --- a/core/templates/core/base.jinja +++ b/core/templates/core/base.jinja @@ -14,17 +14,17 @@ {% block jquery_css %} {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #} - + {% endblock %} - - + + - - - + + + - + diff --git a/core/templates/core/user_godfathers_tree.jinja b/core/templates/core/user_godfathers_tree.jinja index 91033b15..0e9d1b45 100644 --- a/core/templates/core/user_godfathers_tree.jinja +++ b/core/templates/core/user_godfathers_tree.jinja @@ -7,7 +7,7 @@ {%- endblock -%} {% block additional_js %} - + {% endblock %} {% block title %} diff --git a/core/templates/core/user_pictures.jinja b/core/templates/core/user_pictures.jinja index 73479849..781f8ba7 100644 --- a/core/templates/core/user_pictures.jinja +++ b/core/templates/core/user_pictures.jinja @@ -5,7 +5,7 @@ {%- endblock -%} {% block additional_js %} - + {% endblock %} {% block title %} diff --git a/core/views/forms.py b/core/views/forms.py index f9e9841d..de01f7aa 100644 --- a/core/views/forms.py +++ b/core/views/forms.py @@ -76,7 +76,7 @@ class NFCTextInput(TextInput): def get_context(self, name, value, attrs): context = super().get_context(name, value, attrs) context["statics"] = { - "js": staticfiles_storage.url("webpack/core/components/nfc-input-index.ts"), + "js": staticfiles_storage.url("bundled/core/components/nfc-input-index.ts"), "css": staticfiles_storage.url("core/components/nfc-input.scss"), } return context diff --git a/core/views/widgets/markdown.py b/core/views/widgets/markdown.py index bd442b20..6e973c71 100644 --- a/core/views/widgets/markdown.py +++ b/core/views/widgets/markdown.py @@ -9,7 +9,7 @@ class MarkdownInput(Textarea): context = super().get_context(name, value, attrs) context["statics"] = { - "js": staticfiles_storage.url("webpack/core/components/easymde-index.ts"), - "css": staticfiles_storage.url("webpack/core/components/easymde-index.css"), + "js": staticfiles_storage.url("bundled/core/components/easymde-index.ts"), + "css": staticfiles_storage.url("bundled/core/components/easymde-index.css"), } return context diff --git a/core/views/widgets/select.py b/core/views/widgets/select.py index a7f600be..37e03971 100644 --- a/core/views/widgets/select.py +++ b/core/views/widgets/select.py @@ -19,10 +19,10 @@ class AutoCompleteSelectMixin: pk = "id" js = [ - "webpack/core/components/ajax-select-index.ts", + "bundled/core/components/ajax-select-index.ts", ] css = [ - "webpack/core/components/ajax-select-index.css", + "bundled/core/components/ajax-select-index.css", "core/components/ajax-select.scss", ] diff --git a/counter/static/webpack/counter/components/ajax-select-index.ts b/counter/static/bundled/counter/components/ajax-select-index.ts similarity index 100% rename from counter/static/webpack/counter/components/ajax-select-index.ts rename to counter/static/bundled/counter/components/ajax-select-index.ts diff --git a/counter/widgets/select.py b/counter/widgets/select.py index 53c0bc9f..68b0bfc1 100644 --- a/counter/widgets/select.py +++ b/counter/widgets/select.py @@ -4,7 +4,7 @@ from core.views.widgets.select import AutoCompleteSelect, AutoCompleteSelectMult from counter.models import Counter, Product from counter.schemas import ProductSchema, SimplifiedCounterSchema -_js = ["webpack/counter/components/ajax-select-index.ts"] +_js = ["bundled/counter/components/ajax-select-index.ts"] class AutoCompleteSelectCounter(AutoCompleteSelect): diff --git a/docs/howto/js-import-paths.md b/docs/howto/js-import-paths.md index 1fd270d1..6e8f8dcd 100644 --- a/docs/howto/js-import-paths.md +++ b/docs/howto/js-import-paths.md @@ -1,6 +1,6 @@ Vous avez ajouté une application et vous voulez y mettre du javascript ? -Vous voulez importer depuis cette nouvelle application dans votre script géré par webpack ? +Vous voulez importer depuis cette nouvelle application dans votre script géré par le bundler ? Eh bien il faut manuellement enregistrer dans node où les trouver et c'est très simple. @@ -11,7 +11,7 @@ D'abord, il faut ajouter dans node via `package.json`: // ... "imports": { // ... - "#mon_app:*": "./mon_app/static/webpack/*" + "#mon_app:*": "./mon_app/static/bundled/*" } // ... } @@ -25,7 +25,7 @@ Ensuite, pour faire fonctionne l'auto-complétion, il faut configurer `tsconfig. // ... "paths": { // ... - "#mon_app:*": ["./mon_app/static/webpack/*"] + "#mon_app:*": ["./mon_app/static/bundled/*"] } } } diff --git a/docs/howto/statics.md b/docs/howto/statics.md index de513b77..15b3429f 100644 --- a/docs/howto/statics.md +++ b/docs/howto/statics.md @@ -27,28 +27,28 @@ le système se débrouille automatiquement pour les transformer en `.css` ``` -## L'intégration webpack +## L'intégration avec le bundler javascript -Webpack est intégré un peu différement. Le principe est très similaire mais -les fichiers sont à mettre dans un dossier `static/webpack` de l'application à la place. +Le bundler javascript est intégré un peu différement. Le principe est très similaire mais +les fichiers sont à mettre dans un dossier `static/bundled` de l'application à la place. -Pour accéder au fichier, il faut utiliser `static` comme pour le reste mais en ajouter `webpack/` comme prefix. +Pour accéder au fichier, il faut utiliser `static` comme pour le reste mais en ajouter `bundled/` comme prefix. ```jinja - {# Example pour ajouter sith/core/webpack/alpine-index.js #} - - + {# Example pour ajouter sith/core/bundled/alpine-index.js #} + + ``` !!!note - Seuls les fichiers se terminant par `index.js` sont exportés par webpack. + Seuls les fichiers se terminant par `index.js` sont exportés par le bundler. Les autres fichiers sont disponibles à l'import dans le JavaScript comme si ils étaient tous au même niveau. -### Les imports au sein des fichiers de webpack +### Les imports au sein des fichiers des fichiers javascript bundlés -Pour importer au sein de webpack, il faut préfixer ses imports de `#app:`. +Pour importer au sein d'un fichier js bundlé, il faut préfixer ses imports de `#app:`. Exemple: diff --git a/docs/tutorial/structure.md b/docs/tutorial/structure.md index 2c37d35a..efc03c2d 100644 --- a/docs/tutorial/structure.md +++ b/docs/tutorial/structure.md @@ -116,7 +116,7 @@ sith/ 21. Outil pour faciliter la fabrication des trombinoscopes de promo. 22. Fonctionnalités pour gérer le spam. 23. Gestion des statics du site. Override le système de statics de Django. - Ajoute l'intégration du scss et de webpack + Ajoute l'intégration du scss et du bundler js de manière transparente pour l'utilisateur. 24. Fichier de configuration de coverage. 25. Fichier de configuration de direnv. @@ -178,7 +178,7 @@ comme suit : ├── templates/ (2) │ └── ... ├── static/ (3) -│ └── webpack/ (4) +│ └── bundled/ (4) │ └── ... ├── api.py (5) ├── admin.py (6) @@ -196,7 +196,7 @@ comme suit : cf. [Gestion des migrations](../howto/migrations.md) 2. Dossier contenant les templates jinja utilisés par cette application. 3. Dossier contenant les fichiers statics (js, css, scss) qui sont récpérée par Django. -4. Dossier contenant du js qui sera process avec webpack. Le contenu sera automatiquement process et accessible comme si ça avait été placé dans le dossier `static/webpack`. +4. Dossier contenant du js qui sera process avec le bundler javascript. Le contenu sera automatiquement process et accessible comme si ça avait été placé dans le dossier `static/bundled`. 5. Fichier contenant les routes d'API liées à cette application 6. Fichier de configuration de l'interface d'administration. Ce fichier permet de déclarer les modèles de l'application diff --git a/eboutic/static/webpack/eboutic/eboutic-index.ts b/eboutic/static/bundled/eboutic/eboutic-index.ts similarity index 100% rename from eboutic/static/webpack/eboutic/eboutic-index.ts rename to eboutic/static/bundled/eboutic/eboutic-index.ts diff --git a/eboutic/templates/eboutic/eboutic_main.jinja b/eboutic/templates/eboutic/eboutic_main.jinja index 965fe594..d32b68a8 100644 --- a/eboutic/templates/eboutic/eboutic_main.jinja +++ b/eboutic/templates/eboutic/eboutic_main.jinja @@ -11,7 +11,7 @@ {% block additional_js %} {# This script contains the code to perform requests to manipulate the user basket without having to reload the page #} - + {% endblock %} {% block additional_css %} diff --git a/galaxy/static/webpack/galaxy/galaxy-index.js b/galaxy/static/bundled/galaxy/galaxy-index.js similarity index 100% rename from galaxy/static/webpack/galaxy/galaxy-index.js rename to galaxy/static/bundled/galaxy/galaxy-index.js diff --git a/galaxy/templates/galaxy/user.jinja b/galaxy/templates/galaxy/user.jinja index cd11dcbd..8bc0307b 100644 --- a/galaxy/templates/galaxy/user.jinja +++ b/galaxy/templates/galaxy/user.jinja @@ -5,7 +5,7 @@ {% endblock %} {% block additional_js %} - + {% endblock %} diff --git a/package.json b/package.json index 62c27a25..3ab2c90e 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,8 @@ "sideEffects": [".css"], "imports": { "#openapi": "./staticfiles/generated/openapi/index.ts", - "#core:*": "./core/static/webpack/*", - "#pedagogy:*": "./pedagogy/static/webpack/*" + "#core:*": "./core/static/bundled/*", + "#pedagogy:*": "./pedagogy/static/bundled/*" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/pedagogy/static/webpack/pedagogy/guide-index.js b/pedagogy/static/bundled/pedagogy/guide-index.js similarity index 100% rename from pedagogy/static/webpack/pedagogy/guide-index.js rename to pedagogy/static/bundled/pedagogy/guide-index.js diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja index be9cce86..b15dc9e9 100644 --- a/pedagogy/templates/pedagogy/guide.jinja +++ b/pedagogy/templates/pedagogy/guide.jinja @@ -10,7 +10,7 @@ {% endblock %} {% block additional_js %} - + {% endblock %} {% block head %} diff --git a/sas/static/webpack/sas/album-index.js b/sas/static/bundled/sas/album-index.js similarity index 100% rename from sas/static/webpack/sas/album-index.js rename to sas/static/bundled/sas/album-index.js diff --git a/sas/static/webpack/sas/components/ajax-select-index.ts b/sas/static/bundled/sas/components/ajax-select-index.ts similarity index 100% rename from sas/static/webpack/sas/components/ajax-select-index.ts rename to sas/static/bundled/sas/components/ajax-select-index.ts diff --git a/sas/static/webpack/sas/viewer-index.ts b/sas/static/bundled/sas/viewer-index.ts similarity index 100% rename from sas/static/webpack/sas/viewer-index.ts rename to sas/static/bundled/sas/viewer-index.ts diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja index 15cd10f5..3ba82923 100644 --- a/sas/templates/sas/album.jinja +++ b/sas/templates/sas/album.jinja @@ -6,7 +6,7 @@ {%- endblock -%} {%- block additional_js -%} - + {%- endblock -%} {% block title %} diff --git a/sas/templates/sas/picture.jinja b/sas/templates/sas/picture.jinja index c14fe72b..39589190 100644 --- a/sas/templates/sas/picture.jinja +++ b/sas/templates/sas/picture.jinja @@ -1,14 +1,14 @@ {% extends "core/base.jinja" %} {%- block additional_css -%} - + {%- endblock -%} {%- block additional_js -%} - - + + {%- endblock -%} {% block title %} diff --git a/sas/widgets/select.py b/sas/widgets/select.py index be5c3ebb..9f8676d3 100644 --- a/sas/widgets/select.py +++ b/sas/widgets/select.py @@ -7,7 +7,7 @@ from core.views.widgets.select import ( from sas.models import Album from sas.schemas import AlbumSchema -_js = ["webpack/sas/components/ajax-select-index.ts"] +_js = ["bundled/sas/components/ajax-select-index.ts"] class AutoCompleteSelectAlbum(AutoCompleteSelect): diff --git a/staticfiles/apps.py b/staticfiles/apps.py index 1483fc4f..d4d27d0b 100644 --- a/staticfiles/apps.py +++ b/staticfiles/apps.py @@ -3,13 +3,13 @@ from pathlib import Path from django.contrib.staticfiles.apps import StaticFilesConfig GENERATED_ROOT = Path(__file__).parent.resolve() / "generated" -IGNORE_PATTERNS_WEBPACK = ["webpack/*"] +IGNORE_PATTERNS_BUNDLED = ["bundled/*"] IGNORE_PATTERNS_SCSS = ["*.scss"] IGNORE_PATTERNS_TYPESCRIPT = ["*.ts"] IGNORE_PATTERNS = [ *StaticFilesConfig.ignore_patterns, *IGNORE_PATTERNS_TYPESCRIPT, - *IGNORE_PATTERNS_WEBPACK, + *IGNORE_PATTERNS_BUNDLED, *IGNORE_PATTERNS_SCSS, ] @@ -25,7 +25,7 @@ class StaticFilesConfig(StaticFilesConfig): """ Application in charge of processing statics files. It replaces the original django staticfiles - It integrates scss files and webpack. + It integrates scss files and javascript bundling. It makes sure that statics are properly collected and that they are automatically when using the development server. """ diff --git a/staticfiles/finders.py b/staticfiles/finders.py index ed5b93c3..1fb25110 100644 --- a/staticfiles/finders.py +++ b/staticfiles/finders.py @@ -4,7 +4,7 @@ from django.contrib.staticfiles import utils from django.contrib.staticfiles.finders import FileSystemFinder from django.core.files.storage import FileSystemStorage -from staticfiles.apps import GENERATED_ROOT, IGNORE_PATTERNS_WEBPACK +from staticfiles.apps import GENERATED_ROOT, IGNORE_PATTERNS_BUNDLED class GeneratedFilesFinder(FileSystemFinder): @@ -27,9 +27,9 @@ class GeneratedFilesFinder(FileSystemFinder): continue ignored = ignore_patterns - # We don't want to ignore webpack files in the generated folder + # We don't want to ignore bundled files in the generated folder if root == GENERATED_ROOT: - ignored = list(set(ignored) - set(IGNORE_PATTERNS_WEBPACK)) + ignored = list(set(ignored) - set(IGNORE_PATTERNS_BUNDLED)) storage = self.storages[root] for path in utils.get_files(storage, ignored): diff --git a/staticfiles/management/commands/collectstatic.py b/staticfiles/management/commands/collectstatic.py index 428ab916..5b441f6f 100644 --- a/staticfiles/management/commands/collectstatic.py +++ b/staticfiles/management/commands/collectstatic.py @@ -7,11 +7,11 @@ from django.contrib.staticfiles.management.commands.collectstatic import ( ) from staticfiles.apps import GENERATED_ROOT, IGNORE_PATTERNS_SCSS -from staticfiles.processors import OpenApi, Scss, Webpack +from staticfiles.processors import JSBundler, OpenApi, Scss class Command(CollectStatic): - """Integrate webpack and css compilation to collectstatic""" + """Integrate js bundling and css compilation to collectstatic""" def add_arguments(self, parser): super().add_arguments(parser) @@ -50,8 +50,8 @@ class Command(CollectStatic): return Path(location) Scss.compile(self.collect_scss()) - OpenApi.compile() # This needs to be prior to webpack - Webpack.compile() + OpenApi.compile() # This needs to be prior to javascript bundling + JSBundler.compile() collected = super().collect() diff --git a/staticfiles/management/commands/runserver.py b/staticfiles/management/commands/runserver.py index 12b1b33f..f093f3bd 100644 --- a/staticfiles/management/commands/runserver.py +++ b/staticfiles/management/commands/runserver.py @@ -6,19 +6,19 @@ from django.contrib.staticfiles.management.commands.runserver import ( ) from django.utils.autoreload import DJANGO_AUTORELOAD_ENV -from staticfiles.processors import OpenApi, Webpack +from staticfiles.processors import JSBundler, OpenApi class Command(Runserver): - """Light wrapper around default runserver that integrates webpack auto bundling.""" + """Light wrapper around default runserver that integrates javascirpt auto bundling.""" def run(self, **options): - # OpenApi generation needs to be before webpack + # OpenApi generation needs to be before the bundler OpenApi.compile() - # Only run webpack server when debug is enabled + # Only run the bundling server when debug is enabled # Also protects from re-launching the server if django reloads it if os.environ.get(DJANGO_AUTORELOAD_ENV) is None and settings.DEBUG: - with Webpack.runserver(): + with JSBundler.runserver(): super().run(**options) return super().run(**options) diff --git a/staticfiles/processors.py b/staticfiles/processors.py index cc74799a..cfbbe1fb 100644 --- a/staticfiles/processors.py +++ b/staticfiles/processors.py @@ -13,19 +13,19 @@ from sith.urls import api from staticfiles.apps import GENERATED_ROOT -class Webpack: +class JSBundler: @staticmethod def compile(): - """Bundle js files with webpack for production.""" + """Bundle js files with the javascript bundler for production.""" process = subprocess.Popen(["npm", "run", "compile"]) process.wait() if process.returncode: - raise RuntimeError(f"Webpack failed with returncode {process.returncode}") + raise RuntimeError(f"Bundler failed with returncode {process.returncode}") @staticmethod def runserver() -> subprocess.Popen: """Bundle js files automatically in background when called in debug mode.""" - logging.getLogger("django").info("Running webpack server") + logging.getLogger("django").info("Running javascript bundling server") return subprocess.Popen(["npm", "run", "serve"]) @@ -69,7 +69,7 @@ class JS: p for p in settings.STATIC_ROOT.rglob("*.js") if ".min" not in p.suffixes - and (settings.STATIC_ROOT / "webpack") not in p.parents + and (settings.STATIC_ROOT / "bundled") not in p.parents ] for path in to_exec: p = path.resolve() diff --git a/subscription/static/webpack/subscription/stats-index.ts b/subscription/static/bundled/subscription/stats-index.ts similarity index 100% rename from subscription/static/webpack/subscription/stats-index.ts rename to subscription/static/bundled/subscription/stats-index.ts diff --git a/subscription/templates/subscription/stats.jinja b/subscription/templates/subscription/stats.jinja index b68e3c9e..d7bce99d 100644 --- a/subscription/templates/subscription/stats.jinja +++ b/subscription/templates/subscription/stats.jinja @@ -6,7 +6,7 @@ {% block head %} {{ super() }} - + {% endblock %} {% block content %} diff --git a/tsconfig.json b/tsconfig.json index deee110d..c8e039c8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "outDir": "./staticfiles/generated/webpack/", + "outDir": "./staticfiles/generated/bundled/", "sourceMap": true, "noImplicitAny": true, "module": "es6", @@ -13,8 +13,8 @@ "types": ["jquery", "alpinejs"], "paths": { "#openapi": ["./staticfiles/generated/openapi/index.ts"], - "#core:*": ["./core/static/webpack/*"], - "#pedagogy:*": ["./pedagogy/static/webpack/*"] + "#core:*": ["./core/static/bundled/*"], + "#pedagogy:*": ["./pedagogy/static/bundled/*"] } } } diff --git a/webpack.config.js b/webpack.config.js index 5ff49e1f..2e79fe27 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,13 +7,13 @@ const TerserPlugin = require("terser-webpack-plugin"); module.exports = { entry: glob - .sync("./!(static)/static/webpack/**/*?(-)index.[j|t]s?(x)") + .sync("./!(static)/static/bundled/**/*?(-)index.[j|t]s?(x)") .reduce((obj, el) => { - // We include the path inside the webpack folder in the name + // We include the path inside the bundled folder in the name let relativePath = []; const fullPath = path.parse(el); for (const dir of fullPath.dir.split("/").reverse()) { - if (dir === "webpack") { + if (dir === "bundled") { break; } relativePath.push(dir); @@ -29,7 +29,7 @@ module.exports = { }, output: { filename: "[name].js", - path: path.resolve(__dirname, "./staticfiles/generated/webpack"), + path: path.resolve(__dirname, "./staticfiles/generated/bundled"), clean: true, }, resolve: {