klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-22 14:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Go for a more generic js bundling architecture

Browse Source 
* 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
This commit is contained in:
Antoine Bartuccio 2024-11-18 15:36:05 +01:00 committed by Bartuccio Antoine
parent 3db1f592e2
commit 7b41051d0d
56 changed files with 73 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
accounting/static/webpack/accounting/components/ajax-select-index.ts → accounting/static/bundled/accounting/components/ajax-select-index.ts
View File

2
accounting/widgets/select.py
View File

@ -4,7 +4,7 @@ from accounting.models import ClubAccount, Company
from accounting.schemas import ClubAccountSchema, CompanySchema from accounting.schemas import ClubAccountSchema, CompanySchema
from core.views.widgets.select import AutoCompleteSelect, AutoCompleteSelectMultiple 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): class AutoCompleteSelectClubAccount(AutoCompleteSelect):

0
club/static/webpack/club/components/ajax-select-index.ts → club/static/bundled/club/components/ajax-select-index.ts
View File

2
club/widgets/select.py
View File

@ -4,7 +4,7 @@ from club.models import Club
from club.schemas import ClubSchema from club.schemas import ClubSchema
from core.views.widgets.select import AutoCompleteSelect, AutoCompleteSelectMultiple 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): class AutoCompleteSelectClub(AutoCompleteSelect):

2
com/templates/com/screen_slideshow.jinja
View File

@ -3,7 +3,7 @@
<head> <head>
<title>{% trans %}Slideshow{% endtrans %}</title> <title>{% trans %}Slideshow{% endtrans %}</title>
<link href="{{ static('css/slideshow.scss') }}" rel="stylesheet" type="text/css" /> <link href="{{ static('css/slideshow.scss') }}" rel="stylesheet" type="text/css" />
<script src="{{ static('webpack/jquery-index.js') }}"></script> <script src="{{ static('bundled/jquery-index.js') }}"></script>
<script src="{{ static('com/js/slideshow.js') }}"></script> <script src="{{ static('com/js/slideshow.js') }}"></script>
</head> </head>
<body> <body>

0
core/static/webpack/alpine-index.js → core/static/bundled/alpine-index.js
View File

0
core/static/webpack/core/components/ajax-select-base.ts → core/static/bundled/core/components/ajax-select-base.ts
View File

0
core/static/webpack/core/components/ajax-select-index.ts → core/static/bundled/core/components/ajax-select-index.ts
View File

0
core/static/webpack/core/components/easymde-index.ts → core/static/bundled/core/components/easymde-index.ts
View File

0
core/static/webpack/core/components/include-index.ts → core/static/bundled/core/components/include-index.ts
View File

0
core/static/webpack/core/components/nfc-input-index.ts → core/static/bundled/core/components/nfc-input-index.ts
View File

0
core/static/webpack/fontawesome-index.js → core/static/bundled/fontawesome-index.js
View File

0
core/static/webpack/htmx-index.js → core/static/bundled/htmx-index.js
View File

0
core/static/webpack/jquery-index.js → core/static/bundled/jquery-index.js vendored
View File

0
core/static/webpack/sentry-popup-index.ts → core/static/bundled/sentry-popup-index.ts
View File

0
core/static/webpack/types/web-nfc.d.ts → core/static/bundled/types/web-nfc.d.ts vendored
View File

0
core/static/webpack/user/family-graph-index.js → core/static/bundled/user/family-graph-index.js
View File

0
core/static/webpack/user/pictures-index.js → core/static/bundled/user/pictures-index.js
View File

0
core/static/webpack/utils/api.ts → core/static/bundled/utils/api.ts
View File

0
core/static/webpack/utils/globals.ts → core/static/bundled/utils/globals.ts
View File

0
core/static/webpack/utils/history.ts → core/static/bundled/utils/history.ts
View File

0
core/static/webpack/utils/web-components.ts → core/static/bundled/utils/web-components.ts
View File

2
core/templates/core/500.jinja
View File

@ -1,7 +1,7 @@
{% extends "core/base.jinja" %} {% extends "core/base.jinja" %}
{% block additional_js %} {% block additional_js %}
{% if settings.SENTRY_DSN %} {% if settings.SENTRY_DSN %}
<script src="{{ static('webpack/sentry-popup-index.ts') }}" defer ></script> <script src="{{ static('bundled/sentry-popup-index.ts') }}" defer ></script>
{% endif %} {% endif %}
{% endblock additional_js %} {% endblock additional_js %}

14
core/templates/core/base.jinja
View File

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

2
core/templates/core/user_godfathers_tree.jinja
View File

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

2
core/templates/core/user_pictures.jinja
View File

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

2
core/views/forms.py
View File

@ -76,7 +76,7 @@ class NFCTextInput(TextInput):
def get_context(self, name, value, attrs): def get_context(self, name, value, attrs):
context = super().get_context(name, value, attrs) context = super().get_context(name, value, attrs)
context["statics"] = { 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"), "css": staticfiles_storage.url("core/components/nfc-input.scss"),
} }
return context return context

4
core/views/widgets/markdown.py
View File

@ -9,7 +9,7 @@ class MarkdownInput(Textarea):
context = super().get_context(name, value, attrs) context = super().get_context(name, value, attrs)
context["statics"] = { context["statics"] = {
"js": staticfiles_storage.url("webpack/core/components/easymde-index.ts"), "js": staticfiles_storage.url("bundled/core/components/easymde-index.ts"),
"css": staticfiles_storage.url("webpack/core/components/easymde-index.css"), "css": staticfiles_storage.url("bundled/core/components/easymde-index.css"),
} }
return context return context

4
core/views/widgets/select.py
View File

@ -19,10 +19,10 @@ class AutoCompleteSelectMixin:
pk = "id" pk = "id"
js = [ js = [
"webpack/core/components/ajax-select-index.ts", "bundled/core/components/ajax-select-index.ts",
] ]
css = [ css = [
"webpack/core/components/ajax-select-index.css", "bundled/core/components/ajax-select-index.css",
"core/components/ajax-select.scss", "core/components/ajax-select.scss",
] ]

0
counter/static/webpack/counter/components/ajax-select-index.ts → counter/static/bundled/counter/components/ajax-select-index.ts
View File

2
counter/widgets/select.py
View File

@ -4,7 +4,7 @@ from core.views.widgets.select import AutoCompleteSelect, AutoCompleteSelectMult
from counter.models import Counter, Product from counter.models import Counter, Product
from counter.schemas import ProductSchema, SimplifiedCounterSchema 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): class AutoCompleteSelectCounter(AutoCompleteSelect):

6
docs/howto/js-import-paths.md
View File

@ -1,6 +1,6 @@
Vous avez ajouté une application et vous voulez y mettre du javascript ? 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. 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": { "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": { "paths": {
// ... // ...
"#mon_app:*": ["./mon_app/static/webpack/*"] "#mon_app:*": ["./mon_app/static/bundled/*"]
} }
} }
} }

20
docs/howto/statics.md
View File

@ -27,28 +27,28 @@ le système se débrouille automatiquement pour les transformer en `.css`
<link rel="stylesheet" href="{{ static('core/style.scss') }}"> <link rel="stylesheet" href="{{ static('core/style.scss') }}">
``` ```
## 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 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/webpack` de l'application à la place. 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 ```jinja
{# Example pour ajouter sith/core/webpack/alpine-index.js #} {# Example pour ajouter sith/core/bundled/alpine-index.js #}
<script src="{{ static('webpack/alpine-index.js') }}" defer></script> <script src="{{ static('bundled/alpine-index.js') }}" defer></script>
<script src="{{ static('webpack/other-index.ts') }}" defer></script> <script src="{{ static('bundled/other-index.ts') }}" defer></script>
``` ```
!!!note !!!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 Les autres fichiers sont disponibles à l'import dans le JavaScript comme
si ils étaient tous au même niveau. 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: Exemple:

6
docs/tutorial/structure.md
View File

@ -116,7 +116,7 @@ sith/
21. Outil pour faciliter la fabrication des trombinoscopes de promo. 21. Outil pour faciliter la fabrication des trombinoscopes de promo.
22. Fonctionnalités pour gérer le spam. 22. Fonctionnalités pour gérer le spam.
23. Gestion des statics du site. Override le système de statics de Django. 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. de manière transparente pour l'utilisateur.
24. Fichier de configuration de coverage. 24. Fichier de configuration de coverage.
25. Fichier de configuration de direnv. 25. Fichier de configuration de direnv.
@ -178,7 +178,7 @@ comme suit :
├── templates/ (2) ├── templates/ (2)
│ └── ... │ └── ...
├── static/ (3) ├── static/ (3)
│ └── webpack/ (4) │ └── bundled/ (4)
│ └── ... │ └── ...
├── api.py (5) ├── api.py (5)
├── admin.py (6) ├── admin.py (6)
@ -196,7 +196,7 @@ comme suit :
cf. [Gestion des migrations](../howto/migrations.md) cf. [Gestion des migrations](../howto/migrations.md)
2. Dossier contenant les templates jinja utilisés par cette application. 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. 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 5. Fichier contenant les routes d'API liées à cette application
6. Fichier de configuration de l'interface d'administration. 6. Fichier de configuration de l'interface d'administration.
Ce fichier permet de déclarer les modèles de l'application Ce fichier permet de déclarer les modèles de l'application

0
eboutic/static/webpack/eboutic/eboutic-index.ts → eboutic/static/bundled/eboutic/eboutic-index.ts
View File

2
eboutic/templates/eboutic/eboutic_main.jinja
View File

@ -11,7 +11,7 @@
{% block additional_js %} {% block additional_js %}
{# This script contains the code to perform requests to manipulate the {# This script contains the code to perform requests to manipulate the
user basket without having to reload the page #} user basket without having to reload the page #}
<script src="{{ static('webpack/eboutic/eboutic-index.ts') }}"></script> <script src="{{ static('bundled/eboutic/eboutic-index.ts') }}"></script>
{% endblock %} {% endblock %}
{% block additional_css %} {% block additional_css %}

0
galaxy/static/webpack/galaxy/galaxy-index.js → galaxy/static/bundled/galaxy/galaxy-index.js
View File

2
galaxy/templates/galaxy/user.jinja
View File

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

4
package.json
View File

@ -17,8 +17,8 @@
"sideEffects": [".css"], "sideEffects": [".css"],
"imports": { "imports": {
"#openapi": "./staticfiles/generated/openapi/index.ts", "#openapi": "./staticfiles/generated/openapi/index.ts",
"#core:*": "./core/static/webpack/*", "#core:*": "./core/static/bundled/*",
"#pedagogy:*": "./pedagogy/static/webpack/*" "#pedagogy:*": "./pedagogy/static/bundled/*"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.25.2", "@babel/core": "^7.25.2",

0
pedagogy/static/webpack/pedagogy/guide-index.js → pedagogy/static/bundled/pedagogy/guide-index.js
View File

2
pedagogy/templates/pedagogy/guide.jinja
View File

@ -10,7 +10,7 @@
{% endblock %} {% endblock %}
{% block additional_js %} {% block additional_js %}
<script src="{{ static('webpack/pedagogy/guide-index.js') }}" defer></script> <script src="{{ static('bundled/pedagogy/guide-index.js') }}" defer></script>
{% endblock %} {% endblock %}
{% block head %} {% block head %}

0
sas/static/webpack/sas/album-index.js → sas/static/bundled/sas/album-index.js
View File

0
sas/static/webpack/sas/components/ajax-select-index.ts → sas/static/bundled/sas/components/ajax-select-index.ts
View File

0
sas/static/webpack/sas/viewer-index.ts → sas/static/bundled/sas/viewer-index.ts
View File

2
sas/templates/sas/album.jinja
View File

@ -6,7 +6,7 @@
{%- endblock -%} {%- endblock -%}
{%- block additional_js -%} {%- block additional_js -%}
<script src="{{ static('webpack/sas/album-index.js') }}" defer></script> <script src="{{ static('bundled/sas/album-index.js') }}" defer></script>
{%- endblock -%} {%- endblock -%}
{% block title %} {% block title %}

6
sas/templates/sas/picture.jinja
View File

@ -1,14 +1,14 @@
{% extends "core/base.jinja" %} {% extends "core/base.jinja" %}
{%- block additional_css -%} {%- block additional_css -%}
<link defer rel="stylesheet" href="{{ static('webpack/core/components/ajax-select-index.css') }}"> <link defer rel="stylesheet" href="{{ static('bundled/core/components/ajax-select-index.css') }}">
<link defer rel="stylesheet" href="{{ static('core/components/ajax-select.scss') }}"> <link defer rel="stylesheet" href="{{ static('core/components/ajax-select.scss') }}">
<link defer rel="stylesheet" href="{{ static('sas/css/picture.scss') }}"> <link defer rel="stylesheet" href="{{ static('sas/css/picture.scss') }}">
{%- endblock -%} {%- endblock -%}
{%- block additional_js -%} {%- block additional_js -%}
<script defer src="{{ static('webpack/core/components/ajax-select-index.ts') }}"></script> <script defer src="{{ static('bundled/core/components/ajax-select-index.ts') }}"></script>
<script defer src="{{ static("webpack/sas/viewer-index.ts") }}"></script> <script defer src="{{ static("bundled/sas/viewer-index.ts") }}"></script>
{%- endblock -%} {%- endblock -%}
{% block title %} {% block title %}

2
sas/widgets/select.py
View File

@ -7,7 +7,7 @@ from core.views.widgets.select import (
from sas.models import Album from sas.models import Album
from sas.schemas import AlbumSchema from sas.schemas import AlbumSchema
_js = ["webpack/sas/components/ajax-select-index.ts"] _js = ["bundled/sas/components/ajax-select-index.ts"]
class AutoCompleteSelectAlbum(AutoCompleteSelect): class AutoCompleteSelectAlbum(AutoCompleteSelect):

6
staticfiles/apps.py
View File

@ -3,13 +3,13 @@ from pathlib import Path
from django.contrib.staticfiles.apps import StaticFilesConfig from django.contrib.staticfiles.apps import StaticFilesConfig
GENERATED_ROOT = Path(__file__).parent.resolve() / "generated" GENERATED_ROOT = Path(__file__).parent.resolve() / "generated"
IGNORE_PATTERNS_WEBPACK = ["webpack/*"] IGNORE_PATTERNS_BUNDLED = ["bundled/*"]
IGNORE_PATTERNS_SCSS = ["*.scss"] IGNORE_PATTERNS_SCSS = ["*.scss"]
IGNORE_PATTERNS_TYPESCRIPT = ["*.ts"] IGNORE_PATTERNS_TYPESCRIPT = ["*.ts"]
IGNORE_PATTERNS = [ IGNORE_PATTERNS = [
*StaticFilesConfig.ignore_patterns, *StaticFilesConfig.ignore_patterns,
*IGNORE_PATTERNS_TYPESCRIPT, *IGNORE_PATTERNS_TYPESCRIPT,
*IGNORE_PATTERNS_WEBPACK, *IGNORE_PATTERNS_BUNDLED,
*IGNORE_PATTERNS_SCSS, *IGNORE_PATTERNS_SCSS,
] ]
@ -25,7 +25,7 @@ class StaticFilesConfig(StaticFilesConfig):
""" """
Application in charge of processing statics files. Application in charge of processing statics files.
It replaces the original django staticfiles 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 It makes sure that statics are properly collected and that they are automatically
when using the development server. when using the development server.
""" """

6
staticfiles/finders.py
View File

@ -4,7 +4,7 @@ from django.contrib.staticfiles import utils
from django.contrib.staticfiles.finders import FileSystemFinder from django.contrib.staticfiles.finders import FileSystemFinder
from django.core.files.storage import FileSystemStorage 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): class GeneratedFilesFinder(FileSystemFinder):
@ -27,9 +27,9 @@ class GeneratedFilesFinder(FileSystemFinder):
continue continue
ignored = ignore_patterns 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: if root == GENERATED_ROOT:
ignored = list(set(ignored) - set(IGNORE_PATTERNS_WEBPACK)) ignored = list(set(ignored) - set(IGNORE_PATTERNS_BUNDLED))
storage = self.storages[root] storage = self.storages[root]
for path in utils.get_files(storage, ignored): for path in utils.get_files(storage, ignored):

8
staticfiles/management/commands/collectstatic.py
View File

@ -7,11 +7,11 @@ from django.contrib.staticfiles.management.commands.collectstatic import (
) )
from staticfiles.apps import GENERATED_ROOT, IGNORE_PATTERNS_SCSS 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): class Command(CollectStatic):
"""Integrate webpack and css compilation to collectstatic""" """Integrate js bundling and css compilation to collectstatic"""
def add_arguments(self, parser): def add_arguments(self, parser):
super().add_arguments(parser) super().add_arguments(parser)
@ -50,8 +50,8 @@ class Command(CollectStatic):
return Path(location) return Path(location)
Scss.compile(self.collect_scss()) Scss.compile(self.collect_scss())
OpenApi.compile() # This needs to be prior to webpack OpenApi.compile() # This needs to be prior to javascript bundling
Webpack.compile() JSBundler.compile()
collected = super().collect() collected = super().collect()

10
staticfiles/management/commands/runserver.py
View File

@ -6,19 +6,19 @@ from django.contrib.staticfiles.management.commands.runserver import (
) )
from django.utils.autoreload import DJANGO_AUTORELOAD_ENV from django.utils.autoreload import DJANGO_AUTORELOAD_ENV
from staticfiles.processors import OpenApi, Webpack from staticfiles.processors import JSBundler, OpenApi
class Command(Runserver): 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): def run(self, **options):
# OpenApi generation needs to be before webpack # OpenApi generation needs to be before the bundler
OpenApi.compile() 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 # Also protects from re-launching the server if django reloads it
if os.environ.get(DJANGO_AUTORELOAD_ENV) is None and settings.DEBUG: if os.environ.get(DJANGO_AUTORELOAD_ENV) is None and settings.DEBUG:
with Webpack.runserver(): with JSBundler.runserver():
super().run(**options) super().run(**options)
return return
super().run(**options) super().run(**options)

10
staticfiles/processors.py
View File

@ -13,19 +13,19 @@ from sith.urls import api
from staticfiles.apps import GENERATED_ROOT from staticfiles.apps import GENERATED_ROOT
class Webpack: class JSBundler:
@staticmethod @staticmethod
def compile(): 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 = subprocess.Popen(["npm", "run", "compile"])
process.wait() process.wait()
if process.returncode: if process.returncode:
raise RuntimeError(f"Webpack failed with returncode {process.returncode}") raise RuntimeError(f"Bundler failed with returncode {process.returncode}")
@staticmethod @staticmethod
def runserver() -> subprocess.Popen: def runserver() -> subprocess.Popen:
"""Bundle js files automatically in background when called in debug mode.""" """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"]) return subprocess.Popen(["npm", "run", "serve"])
@ -69,7 +69,7 @@ class JS:
p p
for p in settings.STATIC_ROOT.rglob("*.js") for p in settings.STATIC_ROOT.rglob("*.js")
if ".min" not in p.suffixes 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: for path in to_exec:
p = path.resolve() p = path.resolve()

0
subscription/static/webpack/subscription/stats-index.ts → subscription/static/bundled/subscription/stats-index.ts
View File

2
subscription/templates/subscription/stats.jinja
View File

@ -6,7 +6,7 @@
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<script src="{{ static('webpack/subscription/stats-index.ts') }}" defer></script> <script src="{{ static('bundled/subscription/stats-index.ts') }}" defer></script>
{% endblock %} {% endblock %}
{% block content %} {% block content %}

6
tsconfig.json
View File

@ -1,6 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "./staticfiles/generated/webpack/", "outDir": "./staticfiles/generated/bundled/",
"sourceMap": true, "sourceMap": true,
"noImplicitAny": true, "noImplicitAny": true,
"module": "es6", "module": "es6",
@ -13,8 +13,8 @@
"types": ["jquery", "alpinejs"], "types": ["jquery", "alpinejs"],
"paths": { "paths": {
"#openapi": ["./staticfiles/generated/openapi/index.ts"], "#openapi": ["./staticfiles/generated/openapi/index.ts"],
"#core:*": ["./core/static/webpack/*"], "#core:*": ["./core/static/bundled/*"],
"#pedagogy:*": ["./pedagogy/static/webpack/*"] "#pedagogy:*": ["./pedagogy/static/bundled/*"]
} }
} }
} }

8
webpack.config.js
View File

@ -7,13 +7,13 @@ const TerserPlugin = require("terser-webpack-plugin");
module.exports = { module.exports = {
entry: glob entry: glob
.sync("./!(static)/static/webpack/**/*?(-)index.[j|t]s?(x)") .sync("./!(static)/static/bundled/**/*?(-)index.[j|t]s?(x)")
.reduce((obj, el) => { .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 = []; let relativePath = [];
const fullPath = path.parse(el); const fullPath = path.parse(el);
for (const dir of fullPath.dir.split("/").reverse()) { for (const dir of fullPath.dir.split("/").reverse()) {
if (dir === "webpack") { if (dir === "bundled") {
break; break;
} }
relativePath.push(dir); relativePath.push(dir);
@ -29,7 +29,7 @@ module.exports = {
}, },
output: { output: {
filename: "[name].js", filename: "[name].js",
path: path.resolve(__dirname, "./staticfiles/generated/webpack"), path: path.resolve(__dirname, "./staticfiles/generated/bundled"),
clean: true, clean: true,
}, },
resolve: { resolve: {