Theming API: Improve performance

components/lib/accordiontab/style/AccordionTabStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'accordiontab'
+});

components/lib/animateonscroll/BaseAnimateOnScroll.js

@@ -1,5 +1,8 @@
+import AnimateOnScrollStyle from 'primevue/animateonscroll/style';
 import BaseDirective from 'primevue/basedirective';
 
-const BaseAnimateOnScroll = BaseDirective.extend({});
+const BaseAnimateOnScroll = BaseDirective.extend({
+    style: AnimateOnScrollStyle
+});
 
 export default BaseAnimateOnScroll;

components/lib/animateonscroll/style/AnimateOnScrollStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'animateonscroll-directive'
+});

components/lib/badgedirective/style/BadgeDirectiveStyle.js

@@ -5,6 +5,6 @@ const classes = {
 };
 
 export default BaseStyle.extend({
-    name: 'badge',
+    name: 'badge-directive',
     classes
 });

components/lib/base/style/BaseStyle.js

@@ -38,7 +38,7 @@ export default {
         return this.css ? useStyle(ObjectUtils.minifyCSS(this.css), { name: this.name, ...options }) : {};
     },
     loadTheme(theme, options = {}) {
-        return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: `${this.name}-style`, ...options }) : {};
+        return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: this.name, ...options }) : {};
     },
     getCommonThemeCSS(params) {
         return Theme.getCommonCSS(this.name, params);

components/lib/basecomponent/BaseComponent.vue

@@ -1,6 +1,6 @@
 <script>
 import BaseStyle from 'primevue/base/style';
-import Theme from 'primevue/themes';
+import Theme, { ThemeService } from 'primevue/themes';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseComponentStyle from './style/BaseComponentStyle';
@@ -35,14 +35,6 @@ export default {
                     this.$options.style && this.$style.loadStyle(this.$styleOptions);
                 }
             }
-        },
-        $theme: {
-            deep: true,
-            immediate: true,
-            handler(newValue) {
-                Theme.setTheme(newValue);
-                this._loadThemeStyles();
-            }
         }
     },
     beforeCreate() {
@@ -96,9 +88,9 @@ export default {
         _loadStyles() {
             BaseStyle.loadStyle(this.$styleOptions);
             this._loadGlobalStyles();
+            this._loadThemeStyles();
 
-            // apply theme settings
+            ThemeService.on('theme:change', this._loadThemeStyles);
-            Theme.init();
         },
         _loadGlobalStyles() {
             /*
@@ -113,26 +105,38 @@ export default {
 
             const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
 
-            ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
+            ObjectUtils.isNotEmpty(globalCSS) && BaseStyle.loadStyle(globalCSS, { name: 'global', ...this.$styleOptions });
         },
         _loadThemeStyles() {
             // common
-            const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(this.$themeParams) || {};
+            if (!Theme.isStyleNameLoaded('common')) {
+                const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.() || {};
 
-            BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions });
+                BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions });
-            BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions });
+                BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions });
-            BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions);
+                BaseStyle.loadTheme(global, { name: 'global-style', ...this.$styleOptions });
+
+                Theme.setLoadedStyleName('common');
+            }
 
             // component
-            const { variables, style } = this.$style?.getComponentThemeCSS?.(this.$themeParams) || {};
+            if (!Theme.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
+                const { variables, style } = this.$style?.getComponentThemeCSS?.() || {};
 
-            this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
+                this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
-            this.$style?.loadTheme(style, this.$styleOptions);
+                this.$style?.loadTheme(style, { name: `${this.$style.name}-style`, ...this.$styleOptions });
+
+                Theme.setLoadedStyleName(this.$style.name);
+            }
 
             // layer order
-            const layerOrder = this.$style?.getLayerOrderThemeCSS?.();
+            if (!Theme.isStyleNameLoaded('layer-order')) {
+                const layerOrder = this.$style?.getLayerOrderThemeCSS?.();
 
-            BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
+                BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
+
+                Theme.setLoadedStyleName('layer-order');
+            }
         },
         _getHostInstance(instance) {
             return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@@ -229,7 +233,7 @@ export default {
         },
         ptmi(key = '', params = {}) {
             // inheritAttrs:true without `pt:*`
-            return mergeProps(this.$_attrsNoPT, this.ptm(key, params));
+            return mergeProps(this.$_attrsWithoutPT, this.ptm(key, params));
         },
         ptmo(obj = {}, key = '', params = {}) {
             return this._getPTValue(obj, key, { instance: this, ...params }, false);
@@ -286,15 +290,7 @@ export default {
                     props: parentInstance?.$props,
                     state: parentInstance?.$data,
                     attrs: parentInstance?.$attrs
-                },
+                }
-                /* @deprecated since v3.43.0. Use the `parent.instance` instead of the `parentInstance`.*/
-                parentInstance
-            };
-        },
-        $themeParams() {
-            return {
-                ...this.$params,
-                theme: this.$theme
             };
         },
         $_attrsPT() {
@@ -312,7 +308,7 @@ export default {
                     return result;
                 }, {});
         },
-        $_attrsNoPT() {
+        $_attrsWithoutPT() {
             // $attrs without `pt:*`
             return Object.entries(this.$attrs || {})
                 .filter(([key]) => !key?.startsWith('pt:'))

components/lib/basecomponent/style/BaseComponentStyle.js

@@ -1,8 +1,5 @@
 import BaseStyle from 'primevue/base/style';
-import { useStyle } from 'primevue/usestyle';
 
 export default BaseStyle.extend({
-    name: 'common',
+    name: 'common'
-    loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options }),
-    loadGlobalTheme: (globalTheme, options = {}) => useStyle(globalTheme, { name: 'global-style', ...options })
 });

components/lib/basedirective/BaseDirective.js

@@ -1,5 +1,5 @@
 import BaseStyle from 'primevue/base/style';
-import Theme from 'primevue/themes';
+import Theme, { ThemeService } from 'primevue/themes';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
@@ -80,31 +80,39 @@ const BaseDirective = {
         BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
         !el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
 
-        // apply theme settings
-        Theme.init();
-        Theme.setTheme(el.$instance?.theme());
         BaseDirective._loadThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
+        ThemeService.on('theme:change', () => BaseDirective._loadThemeStyles(el.$instance, { nonce: config?.csp?.nonce }));
     },
     _loadThemeStyles: (instance = {}, useStyleOptions) => {
-        const themeParams = instance.themeParams();
-
         // common
-        const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(themeParams) || {};
+        if (!Theme.isStyleNameLoaded('common')) {
+            const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.() || {};
 
-        BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...useStyleOptions });
+            BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...useStyleOptions });
-        BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...useStyleOptions });
+            BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...useStyleOptions });
-        BaseStyle.loadTheme(global, { name: 'global-style', ...useStyleOptions });
+            BaseStyle.loadTheme(global, { name: 'global-style', ...useStyleOptions });
 
-        // component
+            Theme.setLoadedStyleName('common');
-        const { variables, style } = instance.$style?.getDirectiveThemeCSS?.(themeParams) || {};
+        }
 
-        instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, ...useStyleOptions });
+        // directive
-        instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, ...useStyleOptions });
+        if (!Theme.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) {
+            const { variables, style } = instance.$style?.getDirectiveThemeCSS?.() || {};
+
+            instance.$style?.loadTheme(variables, { name: `${instance.$style.name}-variables`, ...useStyleOptions });
+            instance.$style?.loadTheme(style, { name: `${instance.$style.name}-style`, ...useStyleOptions });
+
+            Theme.setLoadedStyleName(instance.$style.name);
+        }
 
         // layer order
-        const layerOrder = instance.$style?.getLayerOrderThemeCSS?.();
+        if (!Theme.isStyleNameLoaded('layer-order')) {
+            const layerOrder = instance.$style?.getLayerOrderThemeCSS?.();
 
-        BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions });
+            BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions });
+
+            Theme.setLoadedStyleName('layer-order');
+        }
     },
     _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
         const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
@@ -142,8 +150,7 @@ const BaseDirective = {
                 /* computed instance variables */
                 defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
                 isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
-                theme: () => config?.theme,
+                theme: () => el.$instance?.$config?.theme,
-                themeParams: () => ({ theme: el.$instance?.theme }),
                 /* instance's methods */
                 ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
                 ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),

components/lib/chart/style/ChartStyle.js

@@ -10,6 +10,6 @@ const classes = {
 
 export default BaseStyle.extend({
     name: 'chart',
-    inlineStyles,
+    classes,
-    classes
+    inlineStyles
 });

components/lib/column/style/ColumnStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'column'
+});

components/lib/columngroup/style/ColumnGroupStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'columngroup'
+});

components/lib/config/PrimeVue.js

@@ -2,7 +2,7 @@ import { FilterMatchMode } from 'primevue/api';
 import Theme, { ThemeService } from 'primevue/themes';
 import PrimeOne from 'primevue/themes/primeone';
 import Aura from 'primevue/themes/primeone/aura';
-import { inject, reactive, watch } from 'vue';
+import { inject, reactive, ref, watch } from 'vue';
 
 export const defaultOptions = {
     ripple: false,
@@ -168,52 +168,37 @@ export function usePrimeVue() {
     return PrimeVue;
 }
 
-function switchTheme(currentTheme, newTheme, linkElementId, callback) {
+function setupTheme(app, PrimeVue) {
-    if (currentTheme !== newTheme) {
+    const isChanged = ref(false);
-        const linkElement = document.getElementById(linkElementId);
 
-        if (linkElement) {
+    watch(
-            const cloneLinkElement = linkElement.cloneNode(true);
+        PrimeVue.config.theme,
-            const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+        (newValue) => {
+            if (!isChanged.value) {
+                Theme.setTheme(newValue);
+            }
 
-            cloneLinkElement.setAttribute('id', linkElementId + '-clone');
+            isChanged.value = false;
-            cloneLinkElement.setAttribute('href', newThemeUrl);
+        },
-            cloneLinkElement.addEventListener('load', () => {
+        { immediate: true, deep: true }
-                linkElement.remove();
+    );
-                cloneLinkElement.setAttribute('id', linkElementId);
 
-                if (callback) {
+    ThemeService.on('theme:change', function (newTheme) {
-                    callback();
+        isChanged.value = true;
-                }
+        app.config.globalProperties.$primevue.config.theme = newTheme;
-            });
+    });
-            linkElement.parentNode && linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
-        }
-    }
 }
 
 export default {
     install: (app, options) => {
-        let configOptions = options ? { ...defaultOptions, ...options } : { ...defaultOptions };
+        const configOptions = options ? { ...defaultOptions, ...options } : { ...defaultOptions };
         const PrimeVue = {
-            config: reactive(configOptions),
+            config: reactive(configOptions)
-            changeTheme: switchTheme
         };
 
-        watch(
-            PrimeVue.config,
-            (newValue) => {
-                Theme.setPConfig(newValue);
-            },
-            { immediate: true }
-        );
-
         app.config.globalProperties.$primevue = PrimeVue;
         app.provide(PrimeVueSymbol, PrimeVue);
 
-        ThemeService.on('theme:change', (newTheme) => {
+        setupTheme(app, PrimeVue);
-            app.config.globalProperties.$primevue.config.theme = newTheme;
-        }).on('preset:change', (newPreset) => {
-            app.config.globalProperties.$primevue.config.theme.preset = newPreset;
-        });
     }
 };

components/lib/deferredcontent/style/DeferredContentStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'deferredcontent'
+});

components/lib/dynamicdialog/style/DynamicDialogStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'dynamicdialog'
+});

components/lib/focustrap/style/FocusTrapStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'focustrap-directive'
+});

components/lib/portal/style/PortalStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'portal'
+});

components/lib/ripple/style/RippleStyle.js

@@ -5,6 +5,6 @@ const classes = {
 };
 
 export default BaseStyle.extend({
-    name: 'ripple',
+    name: 'ripple-directive',
     classes
 });

components/lib/row/style/RowStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'row'
+});

components/lib/stepperpanel/style/StepperPanelStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'stepperpanel'
+});

components/lib/styleclass/BaseStyleClass.js

@@ -1,5 +1,8 @@
 import BaseDirective from 'primevue/basedirective';
+import StyleClassStyle from 'primevue/styleclass/style';
 
-const BaseStyleClass = BaseDirective.extend({});
+const BaseStyleClass = BaseDirective.extend({
+    style: StyleClassStyle
+});
 
 export default BaseStyleClass;

components/lib/styleclass/style/StyleClassStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'styleclass-directive'
+});

components/lib/tabpanel/style/TabPanelStyle.js

@@ -1 +1,5 @@
-export default {};
+import BaseStyle from 'primevue/base/style';
+
+export default BaseStyle.extend({
+    name: 'tabpanel'
+});

components/lib/themes/config/index.js

@@ -16,21 +16,27 @@ export default {
             }*/
         }
     },
-    _pConfig: undefined,
     _theme: undefined,
-    _initialized: false,
     _layerNames: new Set(),
+    _loadedStyleNames: new Set(),
     _tokens: {},
-    init() {
+    update(newValues = {}) {
-        if (!this._initialized) {
+        const { theme } = newValues;
-            this._tokens = ThemeUtils.createTokens(this.preset, this.defaults);
-            ThemeService.emit('theme:init', this.theme);
-        }
 
-        this._initialized = true;
+        if (theme) {
+            this._theme = {
+                ...theme,
+                options: {
+                    ...this.defaults.options,
+                    ...theme.options
+                }
+            };
+            this._tokens = ThemeUtils.createTokens(theme?.preset, this.defaults);
+            this.clearLoadedStyleNames();
+        }
     },
     get theme() {
-        return this._theme || this._pConfig?.theme;
+        return this._theme;
     },
     get base() {
         return this.theme?.base || {};
@@ -44,28 +50,11 @@ export default {
     get tokens() {
         return this._tokens;
     },
-    getPConfig() {
-        return this._pConfig;
-    },
-    setPConfig(newValue) {
-        this._pConfig = newValue;
-    },
-    getTokenValue(tokenPath) {
-        return ThemeUtils.getTokenValue(this.tokens, tokenPath, this.defaults);
-    },
     getTheme() {
         return this.theme;
     },
     setTheme(newValue) {
-        this._theme = {
+        this.update({ theme: newValue });
-            ...newValue,
-            options: {
-                ...this.defaults.options,
-                ...newValue.options
-            }
-        };
-        this._tokens = ThemeUtils.createTokens(newValue?.preset, this.defaults);
-
         ThemeService.emit('theme:change', newValue);
     },
     getPreset() {
@@ -75,13 +64,33 @@ export default {
         this._theme = { ...this.theme, preset: newValue };
         this._tokens = ThemeUtils.createTokens(newValue, this.defaults);
 
+        this.clearLoadedStyleNames();
         ThemeService.emit('preset:change', newValue);
+        ThemeService.emit('theme:change', this.theme);
     },
     getLayerNames() {
         return [...this._layerNames];
     },
     setLayerNames(layerName) {
-        this._layerNames?.add(layerName);
+        this._layerNames.add(layerName);
+    },
+    getLoadedStyleNames() {
+        return this._loadedStyleNames;
+    },
+    isStyleNameLoaded(name) {
+        return this._loadedStyleNames.has(name);
+    },
+    setLoadedStyleName(name) {
+        this._loadedStyleNames.add(name);
+    },
+    deleteLoadedStyleName(name) {
+        this._loadedStyleNames.delete(name);
+    },
+    clearLoadedStyleNames() {
+        this._loadedStyleNames.clear();
+    },
+    getTokenValue(tokenPath) {
+        return ThemeUtils.getTokenValue(this.tokens, tokenPath, this.defaults);
     },
     getCommonCSS(name = '', params) {
         return ThemeUtils.getCommon({ name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });

components/lib/themes/helpers/dt.js

@@ -3,9 +3,9 @@ import Theme, { SharedUtils } from 'primevue/themes';
 const types = ['value', 'variable'];
 
 export const $dt = (tokenPath, param1, param2) => {
-    const config = Theme.getPConfig();
+    const theme = Theme.getTheme();
 
-    return types.includes(param1) ? dt(config?.theme, tokenPath, undefined, param1) : dt(config?.theme, tokenPath, param1, param2);
+    return types.includes(param1) ? dt(theme, tokenPath, undefined, param1) : dt(theme, tokenPath, param1, param2);
 };
 
 export const dt = (theme = {}, tokenPath, fallback, type = 'variable') => {
@@ -23,11 +23,11 @@ export const dt = (theme = {}, tokenPath, fallback, type = 'variable') => {
 };
 
 export const $dtp = (tokenPath) => {
-    const config = Theme.getPConfig();
+    const theme = Theme.getTheme();
 
-    const variable = dt(config?.theme, tokenPath, undefined, 'variable');
+    const variable = dt(theme, tokenPath, undefined, 'variable');
     const name = variable.match(/--[\w-]+/g)?.[0];
-    const value = dt(config?.theme, tokenPath, undefined, 'value');
+    const value = dt(theme, tokenPath, undefined, 'value');
 
     return {
         variable,

nuxt-vite.config.js

@@ -94,6 +94,7 @@ const STYLE_ALIAS = {
     'primevue/steps/style': path.resolve(__dirname, './components/lib/steps/style/StepsStyle.js'),
     'primevue/stepper/style': path.resolve(__dirname, './components/lib/stepper/style/StepperStyle.js'),
     'primevue/stepperpanel/style': path.resolve(__dirname, './components/lib/stepperpanel/style/StepperPanelStyle.js'),
+    'primevue/styleclass/style': path.resolve(__dirname, './components/lib/styleclass/style/StyleClassStyle.js'),
     'primevue/tabmenu/style': path.resolve(__dirname, './components/lib/tabmenu/style/TabMenuStyle.js'),
     'primevue/tabpanel/style': path.resolve(__dirname, './components/lib/tabpanel/style/TabPanelStyle.js'),
     'primevue/tabview/style': path.resolve(__dirname, './components/lib/tabview/style/TabViewStyle.js'),

plugins/app-state.js

@@ -1,3 +1,5 @@
+import { reactive } from 'vue';
+
 const $appState = {
     install: (Vue, options) => {
         Vue.config.globalProperties.$appState = reactive({

rollup.config.js

@@ -155,6 +155,7 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/stepper/style': 'primevue.stepper.style',
     'primevue/stepperpanel/style': 'primevue.stepperpanel.style',
     'primevue/steps/style': 'primevue.steps.style',
+    'primevue/styleclass/style': 'primevue.styleclass.style',
     'primevue/tabmenu/style': 'primevue.tabmenu.style',
     'primevue/tabpanel/style': 'primevue.tabpanel.style',
     'primevue/tabview/style': 'primevue.tabview.style',