From 19531031611dfd3d6b98b67bd0592688f116327e Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 27 Mar 2024 13:13:15 +0000 Subject: [PATCH] Theming API: Change package build --- build-meta.js | 37 ++++++------ nuxt-vite.config.js | 140 +++++++++++++++----------------------------- rollup.config.js | 86 ++++++++++++++++++++++++++- 3 files changed, 150 insertions(+), 113 deletions(-) diff --git a/build-meta.js b/build-meta.js index bad43d1ab..8c5df610f 100644 --- a/build-meta.js +++ b/build-meta.js @@ -2,30 +2,33 @@ const fs = require('fs-extra'); const path = require('path'); function copyDependencies(inFolder, outFolder, subFolder) { - fs.readdirSync(path.resolve(__dirname, inFolder), { withFileTypes: true }) - .filter((dir) => dir.isDirectory()) - .forEach(({ name: folderName }) => { - fs.readdirSync(path.resolve(__dirname, inFolder + folderName)).forEach((file) => { - if (file === 'package.json' || file.endsWith('d.ts') || file.endsWith('vue')) { - fs.copySync(path.resolve(__dirname, inFolder + folderName) + '/' + file, outFolder + folderName + '/' + file); - } - }); + fs.readdirSync(inFolder, { withFileTypes: true }).forEach((entry) => { + const fileName = entry.name; + const sourcePath = path.join(inFolder, fileName); + const destPath = path.join(outFolder, fileName); - if (subFolder) { - try { - fs.readdirSync(path.resolve(__dirname, inFolder + folderName + subFolder)).forEach((subFile) => { - if (subFile === 'package.json' || subFile.endsWith('d.ts') || subFile.endsWith('vue')) { - fs.copySync(path.resolve(__dirname, inFolder + folderName + subFolder) + '/' + subFile, outFolder + folderName + subFolder + '/' + subFile); - } - }); - } catch {} + if (entry.isDirectory()) { + copyDependencies(sourcePath, destPath, subFolder); + } else { + if (fileName === 'package.json' || fileName.endsWith('d.ts') || fileName.endsWith('.vue')) { + if (subFolder && sourcePath.includes(subFolder)) { + const subDestPath = path.join(outFolder, fileName.replace(subFolder, '')); + + fs.ensureDirSync(path.dirname(subDestPath)); + fs.copyFileSync(sourcePath, subDestPath); + } else { + fs.ensureDirSync(path.dirname(destPath)); + fs.copyFileSync(sourcePath, destPath); + } } - }); + } + }); } copyDependencies('./components/lib/', 'dist/', '/style'); copyDependencies('./components/lib/icons/', 'dist/icons/'); copyDependencies('./components/lib/passthrough/', 'dist/passthrough/'); +copyDependencies('./components/lib/themes/', 'dist/themes/'); fs.copySync(path.resolve(__dirname, './components/lib/ts-helpers.d.ts'), 'dist/ts-helpers.d.ts'); fs.copySync(path.resolve(__dirname, './README.md'), 'dist/README.md'); diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index dea41c71a..bc5b0b0e5 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -162,102 +162,54 @@ const ICON_ALIAS = { 'primevue/icons/windowminimize': path.resolve(__dirname, './components/lib/icons/windowminimize/index.vue') }; -const THEME_COMPONENTS = [ - 'accordion', - 'autocomplete', - 'avatar', - 'badge', - 'blockui', - 'breadcrumb', - 'button', - 'calendar', - 'card', - 'carousel', - 'cascadeselect', - 'checkbox', - 'chip', - 'chips', - 'colorpicker', - 'confirmdialog', - 'confirmpopup', - 'contextmenu', - 'datatable', - 'dataview', - 'dialog', - 'divider', - 'dock', - 'dropdown', - 'editor', - 'fieldset', - 'fileupload', - 'floatlabel', - 'galleria', - 'iconfield', - 'image', - 'inlinemessage', - 'inplace', - 'inputgroup', - 'inputnumber', - 'inputotp', - 'inputswitch', - 'inputtext', - 'knob', - 'listbox', - 'megamenu', - 'menu', - 'menubar', - 'message', - 'metergroup', - 'multiselect', - 'orderlist', - 'organizationchart', - 'overlaypanel', - 'paginator', - 'panel', - 'panelmenu', - 'password', - 'picklist', - 'progressbar', - 'progressspinner', - 'radiobutton', - 'rating', - 'scrollpanel', - 'scrolltop', - 'selectbutton', - 'sidebar', - 'skeleton', - 'slider', - 'speeddial', - 'splitbutton', - 'splitter', - 'steps', - 'stepper', - 'tabmenu', - 'tabview', - 'tag', - 'terminal', - 'textarea', - 'tieredmenu', - 'timeline', - 'toast', - 'togglebutton', - 'toolbar', - 'tooltip', - 'tree', - 'treeselect', - 'treetable' -]; +// prettier-ignore +const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','calendar','card','carousel','cascadeselect','checkbox','chip','chips','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','dialog','divider','dock','dropdown','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputgroup','inputnumber','inputotp','inputswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','selectbutton','sidebar','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toolbar','tooltip','tree','treeselect','treetable']; + +const createThemeAlias = (design, presets) => { + const baseAlias = THEME_COMPONENTS.reduce((acc, name) => { + acc[`primevue/themes/${design}/base/${name}`] = path.resolve(__dirname, `./components/lib/themes/${design}/base/${name}/index.js`); + + return acc; + }, {}); + + const presetAlias = presets?.reduce((p_acc, p_name) => { + const p_alias = THEME_COMPONENTS.reduce((acc, name) => { + acc[`primevue/themes/${design}/presets/${p_name}/${name}`] = path.resolve(__dirname, `./components/lib/themes/${design}/presets/${p_name}/${name}/index.js`); + + return acc; + }, {}); + + p_acc = { ...p_acc, ...p_alias }; + + return p_acc; + }, {}); + + const otherAlias = presets?.reduce((p_acc, p_name) => { + p_acc = { + ...p_acc, + [`primevue/themes/${design}/presets/${p_name}`]: path.resolve(__dirname, `./components/lib/themes/${design}/presets/${p_name}/index.js`), + [`primevue/themes/${design}/${p_name}`]: path.resolve(__dirname, `./components/lib/themes/${design}/${p_name}/index.js`) + }; + + return p_acc; + }, {}); + + const coreAlias = { + [`primevue/themes/${design}/base/global`]: path.resolve(__dirname, `./components/lib/themes/${design}/base/global/index.js`), + [`primevue/themes/${design}/base`]: path.resolve(__dirname, `./components/lib/themes/${design}/base/index.js`), + [`primevue/themes/${design}`]: path.resolve(__dirname, `./components/lib/themes/${design}/index.js`) + }; + + return { ...baseAlias, ...presetAlias, ...otherAlias, ...coreAlias }; +}; + const THEME_ALIAS = { - 'primevue/themes/primeone/base/global': path.resolve(__dirname, './components/lib/themes/primeone/base/global.js'), - ...THEME_COMPONENTS.reduce((acc, name) => ((acc[`primevue/themes/primeone/presets/aura/${name}`] = path.resolve(__dirname, `./components/lib/themes/primeone/presets/aura/${name}/index.js`)), acc), {}), - ...THEME_COMPONENTS.reduce((acc, name) => ((acc[`primevue/themes/primeone/base/${name}`] = path.resolve(__dirname, `./components/lib/themes/primeone/base/${name}/index.js`)), acc), {}), - 'primevue/themes/primeone/base': path.resolve(__dirname, './components/lib/themes/primeone/base/index.js'), - 'primevue/themes/primeone/presets/aura': path.resolve(__dirname, './components/lib/themes/primeone/presets/aura/index.js'), - 'primevue/themes/primeone/presets': path.resolve(__dirname, './components/lib/themes/primeone/presets/index.js'), - 'primevue/themes/primeone/aura': path.resolve(__dirname, './components/lib/themes/primeone/aura/index.js'), - 'primevue/themes/primeone': path.resolve(__dirname, './components/lib/themes/primeone/index.js'), - 'primevue/themes/config': path.resolve(__dirname, './components/lib/themes/config/index.js'), 'primevue/themes/utils': path.resolve(__dirname, './components/lib/themes/utils/index.js'), + 'primevue/themes/config': path.resolve(__dirname, './components/lib/themes/config/index.js'), + 'primevue/themes/service': path.resolve(__dirname, './components/lib/themes/service/index.js'), + 'primevue/themes/helpers': path.resolve(__dirname, './components/lib/themes/helpers/index.js'), + 'primevue/themes/actions': path.resolve(__dirname, './components/lib/themes/actions/index.js'), + ...createThemeAlias('primeone', ['aura']), 'primevue/themes': path.resolve(__dirname, './components/lib/themes/index.js') }; diff --git a/rollup.config.js b/rollup.config.js index f705e2122..c537a0e66 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -173,6 +173,57 @@ const CORE_STYLE_DEPENDENCIES = { 'primevue/virtualscroller/style': 'primevue.virtualscroller.style' }; +// prettier-ignore +const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','calendar','card','carousel','cascadeselect','checkbox','chip','chips','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','dialog','divider','dock','dropdown','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputgroup','inputnumber','inputotp','inputswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','selectbutton','sidebar','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toolbar','tooltip','tree','treeselect','treetable']; + +const createThemeDependencies = (design, presets) => { + const baseDeps = THEME_COMPONENTS.reduce((acc, name) => { + acc[`primevue/themes/${design}/base/${name}`] = `primevue.themes.${design}.base.${name}`; + + return acc; + }, {}); + + const presetDeps = presets?.reduce((p_acc, p_name) => { + const p_alias = THEME_COMPONENTS.reduce((acc, name) => { + acc[`primevue/themes/${design}/presets/${p_name}/${name}`] = `primevue.themes.${design}.presets.${p_name}.${name}`; + + return acc; + }, {}); + + p_acc = { ...p_acc, ...p_alias }; + + return p_acc; + }, {}); + + const otherDeps = presets?.reduce((p_acc, p_name) => { + p_acc = { + ...p_acc, + [`primevue/themes/${design}/presets/${p_name}`]: `primevue.themes.${design}.presets.${p_name}`, + [`primevue/themes/${design}/${p_name}`]: `primevue.themes.${design}.${p_name}` + }; + + return p_acc; + }, {}); + + const coreDeps = { + [`primevue/themes/${design}/base/global`]: `primevue.themes.${design}.base.global`, + [`primevue/themes/${design}/base`]: `primevue.themes.${design}.base`, + [`primevue/themes/${design}`]: `primevue.themes.${design}` + }; + + return { ...baseDeps, ...presetDeps, ...otherDeps, ...coreDeps }; +}; + +const CORE_THEME_DEPENDENCIES = { + ...createThemeDependencies('primeone', ['aura']), + 'primevue/themes/actions': 'primevue.themes.actions', + 'primevue/themes/config': 'primevue.themes.config', + 'primevue/themes/helpers': 'primevue.themes.helpers', + 'primevue/themes/service': 'primevue.themes.service', + 'primevue/themes/utils': 'primevue.themes.utils', + 'primevue/themes': 'primevue.themes' +}; + const CORE_DEPENDENCIES = { 'primevue/utils': 'primevue.utils', 'primevue/api': 'primevue.api', @@ -212,7 +263,8 @@ const CORE_DEPENDENCIES = { 'primevue/badge': 'primevue.badge', 'primevue/listbox': 'primevue.listbox', 'primevue/togglebutton': 'primevue.togglebutton', - ...CORE_PASSTHROUGH_DEPENDENCIES + ...CORE_PASSTHROUGH_DEPENDENCIES, + ...CORE_THEME_DEPENDENCIES }; // dependencies @@ -405,6 +457,36 @@ function addStyle() { }); } +function traverseDir(dir, condition, callback) { + try { + const files = fs.readdirSync(dir); + + files.forEach((file) => { + const filePath = path.join(dir, file); + const fileStat = fs.statSync(filePath); + + if (fileStat.isDirectory()) { + traverseDir(filePath, condition, callback); + } else if (condition?.(file) && fileStat.isFile()) { + callback?.(file, filePath, dir); + } + }); + } catch {} +} + +function addThemes() { + traverseDir( + path.resolve(__dirname, './components/lib/themes'), + (file) => file === 'index.js', + (file, filePath, folderPath) => { + const searchFolder = '/components/lib/'; + const fpath = folderPath.substring(folderPath.indexOf(searchFolder) + searchFolder.length); + + addEntry(fpath, file, 'index'); + } + ); +} + function addDirectives() { addEntry('basedirective', 'BaseDirective.js', 'basedirective'); addEntry('badgedirective', 'BadgeDirective.js', 'badgedirective'); @@ -421,7 +503,6 @@ function addConfig() { function addPassThrough() { addEntry('passthrough', 'index.js', 'index'); - addEntry('passthrough/tailwind', 'index.js', 'index'); } function addUtils() { @@ -499,6 +580,7 @@ function addPackageJson() { addUtils(); addStyle(); +addThemes(); addBase(); addApi(); addConfig();