Lazy load css for legacy themes

Author: KoolADE85

dash_ag_grid/__init__.py

@@ -67,6 +67,66 @@
         'external_url': f'{_unpkg}async-enterprise.js.map',
         'dynamic': True
     },
+    {
+        'relative_package_path': 'async-ag-grid-css.js',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-grid-css.js',
+        'async': True
+    },
+    {
+        'relative_package_path': 'async-ag-grid-css.js.map',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-grid-css.js.map',
+        'dynamic': True
+    },
+    {
+        'relative_package_path': 'async-ag-theme-alpine-css.js',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-theme-alpine-css.js',
+        'async': True
+    },
+    {
+        'relative_package_path': 'async-ag-theme-alpine-css.js.map',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-theme-alpine-css.js.map',
+        'dynamic': True
+    },
+    {
+        'relative_package_path': 'async-ag-theme-balham-css.js',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-theme-balham-css.js',
+        'async': True
+    },
+    {
+        'relative_package_path': 'async-ag-theme-balham-css.js.map',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-theme-balham-css.js.map',
+        'dynamic': True
+    },
+    {
+        'relative_package_path': 'async-ag-theme-material-css.js',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-theme-material-css.js',
+        'async': True
+    },
+    {
+        'relative_package_path': 'async-ag-theme-material-css.js.map',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-theme-material-css.js.map',
+        'dynamic': True
+    },
+    {
+        'relative_package_path': 'async-ag-theme-quartz-css.js',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-theme-quartz-css.js',
+        'async': True
+    },
+    {
+        'relative_package_path': 'async-ag-theme-quartz-css.js.map',
+        'namespace': package_name,
+        'external_url': f'{_unpkg}async-ag-theme-quartz-css.js.map',
+        'dynamic': True
+    },
 ]
 
 _css_dist = []

src/lib/components/AgGrid.react.js

@@ -1,6 +1,13 @@
 import PropTypes from 'prop-types';
 import LazyLoader from '../LazyLoader';
-import React, {lazy, Suspense, useState, useCallback, useEffect} from 'react';
+import React, {
+    lazy,
+    Suspense,
+    useState,
+    useCallback,
+    useEffect,
+    useMemo,
+} from 'react';
 import {AllCommunityModule, ModuleRegistry} from 'ag-grid-community';
 
 // Register all community features
@@ -13,6 +20,46 @@ function getGrid(enable) {
     return enable ? RealAgGridEnterprise : RealAgGrid;
 }
 
+// Base CSS loader - loads ag-grid.css
+const LegacyThemeBaseCSS = lazy(() =>
+    import(
+        /* webpackChunkName: "ag-grid-css" */ 'ag-grid-community/styles/ag-grid.css'
+    ).then(() => ({default: () => null}))
+);
+
+// Theme-specific CSS loaders
+const LegacyThemeAlpineCSS = lazy(() =>
+    import(
+        /* webpackChunkName: "ag-theme-alpine-css" */ 'ag-grid-community/styles/ag-theme-alpine.css'
+    ).then(() => ({default: () => null}))
+);
+
+const LegacyThemeBalhamCSS = lazy(() =>
+    import(
+        /* webpackChunkName: "ag-theme-balham-css" */ 'ag-grid-community/styles/ag-theme-balham.css'
+    ).then(() => ({default: () => null}))
+);
+
+const LegacyThemeMaterialCSS = lazy(() =>
+    import(
+        /* webpackChunkName: "ag-theme-material-css" */ 'ag-grid-community/styles/ag-theme-material.css'
+    ).then(() => ({default: () => null}))
+);
+
+const LegacyThemeQuartzCSS = lazy(() =>
+    import(
+        /* webpackChunkName: "ag-theme-quartz-css" */ 'ag-grid-community/styles/ag-theme-quartz.css'
+    ).then(() => ({default: () => null}))
+);
+
+// Map themes to their CSS loaders
+const legacyThemeLoaderMap = {
+    alpine: LegacyThemeAlpineCSS,
+    balham: LegacyThemeBalhamCSS,
+    material: LegacyThemeMaterialCSS,
+    quartz: LegacyThemeQuartzCSS,
+};
+
 /**
  * Dash interface to AG Grid, a powerful tabular data component.
  */
@@ -47,6 +94,52 @@ function DashAgGrid(props) {
     const {enableEnterpriseModules} = props;
     const RealComponent = getGrid(enableEnterpriseModules);
 
+    const themeName = useMemo(() => {
+        const themeMatch = props.className.match(
+            /\bag-theme-([a-zA-Z0-9-]+)\b/
+        );
+        return themeMatch ? themeMatch[1] : null;
+    }, [props.className]);
+
+    const shouldLoadLegacyCSS = useMemo(() => {
+        // Only load legacy CSS if theme is 'legacy' or unset
+        return (
+            !('theme' in props.dashGridOptions) ||
+            props.dashGridOptions.theme === 'legacy'
+        );
+    }, [props.dashGridOptions.theme]);
+
+    const LegacyThemeLoader = useMemo(() => {
+        if (
+            themeName &&
+            shouldLoadLegacyCSS &&
+            legacyThemeLoaderMap[themeName]
+        ) {
+            return legacyThemeLoaderMap[themeName];
+        }
+        return null;
+    }, [themeName, shouldLoadLegacyCSS]);
+
+    if (themeName && shouldLoadLegacyCSS && LegacyThemeLoader) {
+        const dashGridOptions = {
+            ...props.dashGridOptions,
+            theme: 'legacy',
+        };
+        return (
+            <Suspense fallback={null}>
+                <LegacyThemeBaseCSS />
+                <LegacyThemeLoader />
+                <Suspense fallback={null}>
+                    <RealComponent
+                        parentState={state}
+                        {...props}
+                        dashGridOptions={dashGridOptions}
+                    />
+                </Suspense>
+            </Suspense>
+        );
+    }
+
     return (
         <Suspense fallback={null}>
             <RealComponent parentState={state} {...props} />
@@ -57,7 +150,7 @@ function DashAgGrid(props) {
 DashAgGrid.dashRenderType = true;
 
 DashAgGrid.defaultProps = {
-    className: 'ag-theme-alpine',
+    className: '',
     resetColumnState: false,
     exportDataAsCsv: false,
     selectAll: false,

tests/examples/assets_legacy_themes/README.md

@@ -46,7 +46,7 @@
             {"label": "Alpine", "value": "themeAlpine"},
             {"label": "Custom Balham with red accent", "value": '{ "function": "themeBalham.withParams({ accentColor: \'red\' })"}'},
             {"label": "Invalid theme name", "value": "invalidTheme"},
-        ], value="themeQuartz", id="themeSelector"),
+        ], value="", id="themeSelector"),
         dag.AgGrid(
             id="grid",
             columnDefs=columnDefs,
@@ -61,6 +61,7 @@
     Output("grid", "dashGridOptions"),
     Input("themeSelector", "value"),
     State("grid", "dashGridOptions"),
+    prevent_initial_call=True,
 )
 def addGrid(selected_theme, dash_grid_options):
     try:

tests/examples/assets_legacy_themes/ag-grid.css

@@ -7,7 +7,7 @@
 legacy theme in action.
 """
 
-app = Dash(__name__, assets_folder="assets_legacy_themes/")
+app = Dash(__name__,)
 
 rowData = [
     {"weight": 0.074657, "date": "01/01/2024"},
@@ -17,8 +17,8 @@
 ]
 
 columnDefs = [
-    {"field": "weight", "cellDataType": "percentage"},
-    {"field": "date", "cellDataType": "dateString"},
+    {"field": "weight"},
+    {"field": "date"},
 ]
 
 app.layout = html.Div(
@@ -28,8 +28,7 @@
             columnDefs=columnDefs,
             rowData=rowData,
             defaultColDef={"filter": True, "editable": True},
-            dashGridOptions={"theme": "legacy"},
-            className="ag-theme-material",
+            className="ag-theme-balham",
         ),
     ],
 )