From 5f2fca14789ccd3764f489559b0f21c061fed978 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my?= Date: Sat, 30 Dec 2023 14:56:06 +0100 Subject: [PATCH] chore: use vite as build system for assets and fix error when building with it --- .env | 3 +- .gitignore | 12 +- assets/css/app.scss | 35 +- assets/js/App.vue | 4 +- assets/js/api/admin/attribute.js | 14 +- assets/js/api/admin/featured.js | 14 +- assets/js/api/comment/comment.js | 7 +- assets/js/api/contact/contact.js | 7 +- assets/js/api/forum/forum.js | 14 +- assets/js/api/message/message.js | 7 +- assets/js/api/musician/announce.js | 21 +- assets/js/api/publication.js | 7 +- assets/js/api/user.js | 6 +- assets/js/app.js | 28 +- assets/js/components/global/Dropdown.vue | 2 +- assets/js/components/global/Footer.vue | 2 +- assets/js/components/global/Header.vue | 4 +- assets/js/components/global/Menu.vue | 2 +- assets/js/components/user/Avatar.vue | 2 +- assets/js/router/admin/attributes.js | 4 +- assets/js/router/admin/forum.js | 13 +- assets/js/router/admin/index.js | 2 +- assets/js/router/admin/publications.js | 4 +- assets/js/router/course.js | 6 +- assets/js/router/forum.js | 6 +- assets/js/router/gallery.js | 4 +- assets/js/router/index.js | 4 +- assets/js/router/message.js | 2 +- assets/js/router/publication.js | 2 +- assets/js/router/user-announce.js | 2 +- assets/js/router/user-publication.js | 8 +- assets/js/router/user.js | 16 +- assets/js/views/Home.vue | 2 +- .../views/admin/attribute/instrument/List.vue | 2 +- .../js/views/admin/attribute/style/List.vue | 2 +- assets/js/views/admin/featured/Featured.vue | 10 +- .../admin/featured/modal/AddFeaturedModal.vue | 2 +- .../admin/featured/modal/EditCoverModal.vue | 2 +- .../featured/modal/EditFeaturedModal.vue | 2 +- .../views/admin/forum/ForumListByCategory.vue | 0 assets/js/views/admin/forum/List.vue | 0 .../admin/publications/PublicationPending.vue | 2 +- assets/js/views/comment/Comment.vue | 2 +- assets/js/views/comment/CommentList.vue | 4 +- assets/js/views/comment/Form.vue | 2 +- assets/js/views/comment/Thread.vue | 4 +- assets/js/views/course/Course.vue | 4 +- assets/js/views/course/list/List.vue | 12 +- assets/js/views/course/show/Course.vue | 4 +- assets/js/views/forum/Category/Category.vue | 2 +- .../js/views/forum/Category/CategoryList.vue | 2 +- assets/js/views/forum/Forum.vue | 4 +- .../js/views/forum/Topic/Add/AddTopicForm.vue | 2 +- assets/js/views/forum/Topic/Topic.vue | 4 +- assets/js/views/forum/Topic/TopicList.vue | 6 +- assets/js/views/forum/Topic/TopicPost.vue | 2 +- assets/js/views/gallery/list/Galeries.vue | 4 +- assets/js/views/gallery/show/Gallery.vue | 4 +- assets/js/views/message/Index.vue | 6 +- assets/js/views/message/ThreadList.vue | 2 +- .../views/message/modal/SendMessageModal.vue | 2 +- assets/js/views/publication/list/Grid.vue | 8 +- assets/js/views/publication/list/List.vue | 4 +- .../js/views/publication/show/Publication.vue | 4 +- .../js/views/search/Musician/ResultItem.vue | 2 +- assets/js/views/search/Musician/Results.vue | 8 +- .../js/views/search/Musician/SearchForm.vue | 8 +- assets/js/views/user/Announce/List.vue | 2 +- .../modal/AddMusicianAnnounceForm.vue | 12 +- assets/js/views/user/Gallery/EditGallery.vue | 2 +- assets/js/views/user/Gallery/List.vue | 4 +- .../user/Gallery/modal/AddGalleryModal.vue | 2 +- .../modal/EditGalleryPropertiesModal.vue | 2 +- .../add/modal/AddPublicationModal.vue | 2 +- .../Publication/add/video/AddVideoForm.vue | 2 +- .../Publication/add/video/AddVideoModal.vue | 2 +- .../js/views/user/Publication/edit/Edit.vue | 4 +- .../user/Publication/edit/modal/EditModal.vue | 2 +- .../js/views/user/Publication/list/List.vue | 4 +- assets/js/views/user/Settings.vue | 2 +- assets/js/views/user/Settings/General.vue | 2 +- .../Settings/Picture/ProfilePictureModal.vue | 2 +- composer.json | 2 +- composer.lock | 133 +- config/bundles.php | 2 +- config/packages/assets.yaml | 6 + config/packages/webpack_encore.yaml | 45 - config/routes/dev/pentatrion_vite.yaml | 3 + package-lock.json | 10850 +++------------- package.json | 25 +- symfony.lock | 28 +- templates/base.html.twig | 23 +- templates/bot_base.html.twig | 5 +- vite.config.js | 27 + webpack.config.js | 97 - 95 files changed, 2466 insertions(+), 9220 deletions(-) delete mode 100644 assets/js/views/admin/forum/ForumListByCategory.vue delete mode 100644 assets/js/views/admin/forum/List.vue create mode 100644 config/packages/assets.yaml delete mode 100644 config/packages/webpack_encore.yaml create mode 100644 config/routes/dev/pentatrion_vite.yaml create mode 100644 vite.config.js delete mode 100644 webpack.config.js diff --git a/.env b/.env index e204621d..6e15f91f 100644 --- a/.env +++ b/.env @@ -33,7 +33,7 @@ DATABASE_URL="postgresql://symfony:ChangeMe@127.0.0.1:5432/app?serverVersion=13& ###< doctrine/doctrine-bundle ### ###> google/apiclient ### GOOGLE_API_KEY= -GOOGLE_API_KEY_FRONT= +VITE_GOOGLE_API_KEY_FRONT= GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= GOOGLE_AUTH_CONFIG=%kernel.project_dir%/path/to/file.json @@ -45,6 +45,7 @@ GOOGLE_AUTH_CONFIG=%kernel.project_dir%/path/to/file.json ###> sentry/sentry-symfony ### SENTRY_DSN= +VITE_SENTRY_DSN= ###< sentry/sentry-symfony ### MAIL_CONTACT_EMAIL= diff --git a/.gitignore b/.gitignore index 4e82b9ed..77ee1505 100644 --- a/.gitignore +++ b/.gitignore @@ -12,13 +12,6 @@ .phpunit.result.cache /phpunit.xml ###< symfony/phpunit-bridge ### -###> symfony/webpack-encore-bundle ### -/node_modules/ -/public/build/ -npm-debug.log -yarn-error.log -###< symfony/webpack-encore-bundle ### - hosts.yml /public/images/ @@ -35,3 +28,8 @@ hosts.yml /phpunit.xml .phpunit.result.cache ###< phpunit/phpunit ### + +###> pentatrion/vite-bundle ### +/node_modules/ +/public/build/ +###< pentatrion/vite-bundle ### diff --git a/assets/css/app.scss b/assets/css/app.scss index 1a2a4769..21be4b81 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -9,18 +9,17 @@ $menu-item-active-background-color: #5B87AE; // Import Bulma and Buefy styles -@import "~bulma"; -@import "~buefy/src/scss/buefy"; +@import "bulma/bulma"; +@import "buefy/src/scss/buefy"; // VENDOR -@import "~vue2-dropzone/dist/vue2Dropzone.min.css"; -@import '~vue-select/dist/vue-select.css'; -@import '~vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'; -@import '~@creativebulma/bulma-badge/dist/bulma-badge.css'; +@import "vue2-dropzone/dist/vue2Dropzone.min.css"; +@import 'vue-select/dist/vue-select.css'; +@import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'; +@import '@creativebulma/bulma-badge/dist/bulma-badge.css'; // CUSTOMS -//@import "global.css"; @import "components/publication-type.css"; @import "components/forum.css"; @import "components/card-horizontal"; @@ -29,25 +28,3 @@ $menu-item-active-background-color: #5B87AE; border-bottom: 1px solid #f5f5f5 } - - -/* - -@import "heading.css"; -@import "components/menu.css"; -@import "components/navbar.css"; -@import "components/footer.css"; -@import "components/comment.css"; - -@import "modules/formatting.css"; -@import "modules/editor.css"; -@import "modules/login.css"; -@import "modules/publication-list.css"; -@import "modules/message.css"; - -@import "components/featured.css"; -@import "components/buttons.css"; -@import "components/search.css"; - -@import "bc.css"; -*/ diff --git a/assets/js/App.vue b/assets/js/App.vue index 68198e27..4ef3f50f 100644 --- a/assets/js/App.vue +++ b/assets/js/App.vue @@ -14,8 +14,8 @@ @@ -37,8 +24,6 @@
-{% for js in js_files %} - -{% endfor %} +{{ vite_entry_script_tags('app') }} diff --git a/templates/bot_base.html.twig b/templates/bot_base.html.twig index 2f108860..a21e056c 100644 --- a/templates/bot_base.html.twig +++ b/templates/bot_base.html.twig @@ -1,4 +1,3 @@ -{% set display_menu = display_menu is not defined ? true : display_menu %} @@ -25,8 +24,8 @@ - {% set imageUrl = cover is defined ? cover : (app.request.schemeAndHttpHost() ~ '/build/images/facebook-logo.jpg') %} - + {% set imageUrl = cover is defined ? cover : (app.request.schemeAndHttpHost() ~ asset('assets/images/facebook-logo.jpg', 'vite')) %} + diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 00000000..224c9163 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,27 @@ +import { defineConfig } from "vite"; +import symfonyPlugin from "vite-plugin-symfony"; +import vuePlugin from "@vitejs/plugin-vue2"; + +export default defineConfig({ + define: { + global: 'window' + }, + plugins: [ + vuePlugin(), + symfonyPlugin(), + ], + build: { + assetsInlineLimit: 0, + rollupOptions: { + input: { + app: "./assets/js/app.js", + styles: "./assets/css/app.scss" + }, + output: { + manualChunks: { + vue: ['vue'] + } + } + } + }, +}); diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index aa198dee..00000000 --- a/webpack.config.js +++ /dev/null @@ -1,97 +0,0 @@ -const Encore = require('@symfony/webpack-encore'); -const dotenv = require('dotenv-flow'); -const ENV_ALLOWED_LIST = ['APP_ENV', 'SENTRY_DSN', 'GOOGLE_API_KEY_FRONT']; - -// Manually configure the runtime environment if not already configured yet by the "encore" command. -// It's useful when you use tools that rely on webpack.config.js file. -if (!Encore.isRuntimeEnvironmentConfigured()) { - Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev'); -} - -Encore - // inject the environment variables - .configureDefinePlugin(options => { - // init env vars - let loadedConfig = dotenv.config(); - - for (let key of Object.keys(loadedConfig.parsed)) { - if (ENV_ALLOWED_LIST.indexOf(key) !== -1) { - options[`process.env.${key}`] = JSON.stringify(process.env[key]); - } - } - }) - // directory where compiled assets will be stored - .setOutputPath('public/build/') - // public path used by the web server to access the output path - .setPublicPath('/build') - // only needed for CDN's or subdirectory deploy - //.setManifestKeyPrefix('build/') - - /* - * ENTRY CONFIG - * - * Add 1 entry for each "page" of your app - * (including one that's included on every page - e.g. "app") - * - * Each entry will result in one JavaScript file (e.g. app.js) - * and one CSS file (e.g. app.css) if your JavaScript imports CSS. - */ - .addEntry('app', './assets/js/app.js') - //.addEntry('page1', './assets/js/page1.js') - //.addEntry('page2', './assets/js/page2.js') - .addStyleEntry('css', './assets/css/app.scss') - - // When enabled, Webpack "splits" your files into smaller pieces for greater optimization. - .splitEntryChunks() - - // will require an extra script tag for runtime.js - // but, you probably want this, unless you're building a single-page app - .enableSingleRuntimeChunk() - - .configureBabelPresetEnv((config) => { - config.useBuiltIns = 'usage'; - config.corejs = 3; - }) - - .copyFiles({ - from: './assets/images', - - // optional target path, relative to the output dir - to: 'images/[path][name].[ext]', - - // only copy files matching this pattern - //pattern: /\.(png|jpg|jpeg)$/ - }) - /* - * FEATURE CONFIG - * - * Enable & configure other features below. For a full - * list of features, see: - * https://symfony.com/doc/current/frontend.html#adding-more-features - */ - .cleanupOutputBeforeBuild() - .enableBuildNotifications() - .enableSourceMaps(!Encore.isProduction()) - // enables hashed filenames (e.g. app.abc123.css) - .enableVersioning(Encore.isProduction()) - - .enableVueLoader(() => {}, { runtimeCompilerBuild: false }) - // enables Sass/SCSS support - .enableSassLoader() - - // uncomment if you use TypeScript - //.enableTypeScriptLoader() - - // uncomment to get integrity="..." attributes on your script & link tags - // requires WebpackEncoreBundle 1.4 or higher - //.enableIntegrityHashes(Encore.isProduction()) - - // uncomment if you're having problems with a jQuery plugin - //.autoProvidejQuery() - - // uncomment if you use API Platform Admin (composer req api-admin) - //.enableReactPreset() - //.addEntry('admin', './assets/js/admin.js') -; - -module.exports = Encore.getWebpackConfig();