SmarterReactTemplateTagManager
Vite-generated React manifest.json loader and asset collector base class for Django templatetags.
This module provides a reusable base class and supporting types for managing Vite-generated React manifest.json files and collecting frontend assets for React apps in Django projects. It is designed to be instantiated as a singleton representing a specific React app, enabling Django templates to include the correctly-sequenced JavaScript and CSS assets built by Vite for each app.
Key Features
Loads and caches the manifest.json for each React app from the static files directory.
Recursively collects CSS and JS dependencies for a given entry point, including all imports, preserving dependency order.
Provides a method to retrieve the JS and CSS assets for a manifest entry, suitable for use in Django template tags.
Designed as a base class to be instantiated for each React app; singletons are used to register template tags per app.
Main Classes and Functions
SmarterReactTemplateTagManager: Base class for managing Vite-generated React manifest loading and asset collection for a React app.
collect_assets(): Recursively collects asset files (CSS or JS) for a manifest entry and its imports.
reactapp_build_assets(): Returns the JS and CSS assets for the configured entry point.
Usage Example
In a Django template, use the registered template tag for your app to get asset paths:
{% load react_dashboard %}
{% dashboard_react_assets as assets %}
{% for css_file in assets.css %}
<link class="smarter" rel="stylesheet" href="{% static 'react/smarter-dashboard/' %}{{ css_file }}">
{% endfor %}
Example React manifest.json
A typical React manifest.json looks like this:
{
"_rolldown-runtime.js": {
"file": "assets/rolldown-runtime.js",
"name": "rolldown-runtime"
},
"_xterm-TdnZ7DQy.css": {
"file": "assets/xterm-TdnZ7DQy.css",
"src": "_xterm-TdnZ7DQy.css"
},
"_xterm.js": {
"file": "assets/xterm.js",
"name": "xterm",
"imports": [
"_rolldown-runtime.js"
],
"css": [
"assets/xterm-TdnZ7DQy.css"
]
},
"index.html": {
"file": "assets/index.js",
"name": "index",
"src": "index.html",
"isEntry": true,
"imports": [
"_rolldown-runtime.js",
"_xterm.js"
],
"css": [
"assets/index-DvLY75bJ.css"
]
}
}
- class smarter.lib.django.templatetags.smarter_react_templatetag_manager.AssetDict[source]
Bases:
TypedDictTypedDict representing the structure of assets returned for a manifest.json entry point.
- js
A list of JavaScript file paths required for the entry point, including dependencies.
- Type:
List[str]
- css
A list of CSS file paths required for the entry point, including dependencies.
- Type:
List[str]
- class smarter.lib.django.templatetags.smarter_react_templatetag_manager.SmarterReactTemplateTagManager(app_name, templatetag_name)[source]
Bases:
SmarterHelperMixinBase class for per-React-app singleton managers that load and analyze Vite-generated React manifest.json files in order to generate ordered lists of JS and CSS assets.
This class is intended to be instantiated once per React app, providing a long-lived singleton that manages loading and caching the React manifest.json and collecting all required JS and CSS assets for the app’s entry point.
After instantiation, the only public method called is reactapp_build_assets(), which returns ordered lists of the JS and CSS assets for the configured entry point. The results of this method are cached for the effective lifetime of the object instance (until server reboot).
This design ensures that asset collection is efficient and consistent, and that Django templates can reliably include the dependency-ordered asset files for each React app.
- __init__(app_name, templatetag_name)[source]
Initialize the SmarterReactTemplateTagManager.
- app_name: str
- collect_assets(manifest, key, asset_type, seen=None)[source]
Recursively collect assets from a manifest entry and its imports, preserving dependency order.
Assets are collected in the order required for correct script or style loading in the DOM: dependencies (as listed in the “imports” array) are always collected before the assets of the entry itself. This ensures that, for example, JavaScript files are loaded in the correct order so that dependencies are available before their dependents execute.
- Parameters:
- Returns:
A list of asset file paths, ordered so that dependencies appear before dependents.
- Return type:
- entry_key: str
- find_entry_key()[source]
Locate the top-level key and dict in the manifest where the dict contains the key ‘isEntry’. Returns the key if found, else raises an error.
Example entry dict:
"index.html": { "file": "assets/index.js", "name": "index", "src": "index.html", "isEntry": true, "imports": [ "_rolldown-runtime.js", "_xterm.js" ], "css": [ "assets/index-DvLY75bJ.css" ] }
- Return type:
- property manifest: dict[str, dict[str, Any]][source]
Load and cache the manifest.json as a dictionary.
- property reactapp_build_assets: AssetDict[source]
Load CSS and JS files for a Vite-generated React manifest.json entry point from the manifest, including all dependencies, cache and return them as an ordered dictionary.
This function retrieves the JavaScript and CSS assets for a given manifest.json entry point (defaulting to “index.html”) by loading the manifest and collecting all CSS dependencies recursively. It returns a dictionary with the main JS file and a list of CSS files, all prefixed for Django static file usage.
- Parameters:
entry – The manifest.json entry point to retrieve assets for (default: “index.html”).
- Returns:
A dictionary containing the JS file and a list of CSS files.
- Return type:
AssetDict
Example output:
{ "js": [ "assets/index-CZK_Bxxh.js", "assets/rolldown-runtime-B3igc2qu.js", "assets/xterm-D5XSfLrr.js" ], "css": [ "assets/index-58MXwt-L.css", "assets/xterm-kHJ-D0s7.css" ] }
- templatetag_name: str