NGSTACK-870 implement vite for asset bundleing instead of webpack

.gitignore

@@ -62,3 +62,8 @@ studio.json
 .phpunit.result.cache
 /phpunit.xml
 ###< symfony/phpunit-bridge ###
+
+###> pentatrion/vite-bundle ###
+/node_modules/
+/public/build/
+###< pentatrion/vite-bundle ###

assets/js/components/GalleryBlock.component.js

@@ -1,4 +1,6 @@
 // eslint-disable-next-line import/no-unresolved
+import 'photoswipe/style.css';
+// eslint-disable-next-line import/no-unresolved
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 
 export default class GalleryBlock {

assets/js/components/PageHeader.component.js

@@ -180,6 +180,7 @@ export default class PageHeader {
 
   togglePageClass(classToToggle) {
     this.pageWrapper.classList.toggle(classToToggle);
+
   }
 
   stickyHeaderSetup() {
@@ -188,9 +189,12 @@ export default class PageHeader {
     }
     ['load', 'scroll', 'resize', 'orientationchange'].forEach((eventType) => {
       window.addEventListener(eventType, () => {
-        window.scrollY >= 1
-          ? this.stickyHeader.classList.add('site-header-sticky--active')
-          : this.stickyHeader.classList.remove('site-header-sticky--active');
+        if (window.scrollY >= 1) {
+          this.stickyHeader.classList.add('site-header-sticky--active')
+          this.stickyHeader.parentElement.style.height = `${this.stickyHeader.offsetHeight}px`
+        } else {
+          this.stickyHeader.classList.remove('site-header-sticky--active');
+        }
       });
     });
   }

assets/sass/style.scss

@@ -3,7 +3,6 @@
 
 // External libraries
 @import 'swiper/css/bundle';
-@import 'photoswipe/dist/photoswipe';
 
 // Main variables
 @import 'variables';
@@ -97,4 +96,4 @@
 @import 'cookie_control';
 
 // Accessibility
-@import 'accessibility';
+@import 'accessibility';

composer.json

@@ -54,7 +54,8 @@
         "netgen/layouts-ibexa": "~1.4.0",
         "netgen/layouts-ibexa-site-api": "~1.4.0",
         "netgen/layouts-ibexa-relation-list-query": "^1.4",
-        "netgen/layouts-ibexa-tags-query": "^1.4"
+        "netgen/layouts-ibexa-tags-query": "^1.4",
+        "pentatrion/vite-bundle": "^6.4"
     },
     "require-dev": {
         "symfony/debug-bundle": "5.4.*",

config/bundles.php

@@ -82,4 +82,5 @@
     Netgen\IbexaFieldTypeEnhancedLinkBundle\NetgenIbexaFieldTypeEnhancedLinkBundle::class => ['all' => true],
     Netgen\Bundle\BetterIbexaAdminUIBundle\NetgenBetterIbexaAdminUIBundle::class => ['all' => true],
     Netgen\Bundle\ToolbarBundle\NetgenToolbarBundle::class => ['all' => true],
+    Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true],
 ];

config/routes/dev/pentatrion_vite.yaml

@@ -0,0 +1,3 @@
+_pentatrion_vite:
+    prefix: /build
+    resource: "@PentatrionViteBundle/Resources/config/routing.yaml"

package.json

@@ -1,84 +1,90 @@
 {
-    "browserslist": {
-        "defaults": [
-            "last 2 versions",
-            "Safari >= 10",
-            "iOS >= 10",
-            "not ie <= 10",
-            "> 1%"
-        ],
-        "evergreen": [
-            "last 2 Chrome versions",
-            "last 2 ChromeAndroid versions",
-            "last 2 Firefox versions",
-            "last 2 FirefoxAndroid versions",
-            "last 2 Safari versions",
-            "last 2 iOS versions",
-            "last 2 Edge versions",
-            "last 2 Opera versions"
-        ]
-    },
-    "scripts": {
-        "build:dev": "encore dev",
-        "build:prod": "encore production",
-        "watch": "encore dev --watch",
-        "start": "encore dev-server",
-        "server": "encore dev-server",
-        "site:dev": "encore dev --config-name",
-        "site:prod": "encore production --config-name",
-        "site:watch": "encore dev --watch --config-name",
-        "site:server": "encore dev-server --config-name",
-        "ibexa": "encore production --config=webpack.config.ibexa.js",
-        "format:js": "prettier --write \"assets/js/**/*.js\"",
-        "linter:js": "eslint \"assets/js/**/*.js\""
-    },
-    "private": true,
-    "devDependencies": {
-        "@babel/core": "^7.4.3",
-        "@babel/preset-env": "^7.4.3",
-        "@babel/preset-react": "^7.0.0",
-        "@babel/runtime": "^7.13.10",
-        "@ckeditor/ckeditor5-alignment": "^40.1.0",
-        "@ckeditor/ckeditor5-build-inline": "^40.1.0",
-        "@ckeditor/ckeditor5-code-block": "^40.1.0",
-        "@ckeditor/ckeditor5-dev-utils": "^39.0.0",
-        "@ckeditor/ckeditor5-theme-lark": "^40.1.0",
-        "@ckeditor/ckeditor5-widget": "^40.1.0",
-        "@hotwired/stimulus": "^3.0.0",
-        "@svgr/webpack": "^8.1.0",
-        "@symfony/stimulus-bridge": "^3.0.0",
-        "@symfony/webpack-encore": "^3.0.0",
-        "autoprefixer": "^9.5.1",
-        "core-js": "^3.0.0",
-        "eslint": "^8.3.0",
-        "eslint-config-airbnb": "^19.0.2",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-import": "^2.17.2",
-        "eslint-plugin-jsx-a11y": "^6.2.1",
-        "eslint-plugin-react": "^7.12.4",
-        "eslint-plugin-react-hooks": "^4.3.0",
-        "file-loader": "^6.0.0",
-        "path": "^0.12.7",
-        "postcss-loader": "^4.3.0",
-        "prettier": "^2.5.0",
-        "raw-loader": "^4.0.1",
-        "regenerator-runtime": "^0.13.2",
-        "sass": "^1.63.4",
-        "sass-lint": "^1.12.1",
-        "sass-loader": "^13.0.0",
-        "style-loader": "^2.0.0",
-        "webpack-notifier": "^1.6.0"
-    },
-    "dependencies": {
-        "@netgen/javascript-cookie-control": "^0.0.8",
-        "@popperjs/core": "^2.11.6",
-        "bootstrap": "~5.2.1",
-        "js-cookie": "^3.0.5",
-        "photoswipe": "^5.3.4",
-        "popper.js": "^1.15.0",
-        "swiper": "^11.0.2"
-    },
-    "engines": {
-        "node": "^18"
-    }
+  "browserslist": {
+    "defaults": [
+      "last 2 versions",
+      "Safari >= 10",
+      "iOS >= 10",
+      "not ie <= 10",
+      "> 1%"
+    ],
+    "evergreen": [
+      "last 2 Chrome versions",
+      "last 2 ChromeAndroid versions",
+      "last 2 Firefox versions",
+      "last 2 FirefoxAndroid versions",
+      "last 2 Safari versions",
+      "last 2 iOS versions",
+      "last 2 Edge versions",
+      "last 2 Opera versions"
+    ]
+  },
+  "scripts": {
+    "dev": "vite",
+    "watch": "vite",
+    "build:dev": "vite build --mode development",
+    "build:prod": "vite build",
+    "encore:build:dev": "encore dev",
+    "encore:build:prod": "encore production",
+    "encore:watch": "encore dev --watch",
+    "start": "encore dev-server",
+    "server": "encore dev-server",
+    "site:dev": "encore dev --config-name",
+    "site:prod": "encore production --config-name",
+    "site:watch": "encore dev --watch --config-name",
+    "site:server": "encore dev-server --config-name",
+    "ibexa": "encore production --config=webpack.config.ibexa.js",
+    "format:js": "prettier --write \"assets/js/**/*.js\"",
+    "linter:js": "eslint \"assets/js/**/*.js\""
+  },
+  "private": true,
+  "devDependencies": {
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.13.10",
+    "@ckeditor/ckeditor5-alignment": "^40.1.0",
+    "@ckeditor/ckeditor5-build-inline": "^40.1.0",
+    "@ckeditor/ckeditor5-code-block": "^40.1.0",
+    "@ckeditor/ckeditor5-dev-utils": "^39.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^40.1.0",
+    "@ckeditor/ckeditor5-widget": "^40.1.0",
+    "@hotwired/stimulus": "^3.0.0",
+    "@svgr/webpack": "^8.1.0",
+    "@symfony/stimulus-bridge": "^3.0.0",
+    "@symfony/webpack-encore": "^3.0.0",
+    "autoprefixer": "^9.5.1",
+    "core-js": "^3.0.0",
+    "eslint": "^8.3.0",
+    "eslint-config-airbnb": "^19.0.2",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "file-loader": "^6.0.0",
+    "path": "^0.12.7",
+    "postcss-loader": "^4.3.0",
+    "prettier": "^2.5.0",
+    "raw-loader": "^4.0.1",
+    "regenerator-runtime": "^0.13.2",
+    "sass": "^1.63.4",
+    "sass-lint": "^1.12.1",
+    "sass-loader": "^13.0.0",
+    "style-loader": "^2.0.0",
+    "webpack-notifier": "^1.6.0"
+  },
+  "dependencies": {
+    "@netgen/javascript-cookie-control": "^0.0.8",
+    "@popperjs/core": "^2.11.6",
+    "bootstrap": "~5.2.1",
+    "js-cookie": "^3.0.5",
+    "photoswipe": "^5.4.3",
+    "popper.js": "^1.15.0",
+    "swiper": "^11.0.2",
+    "vite": "^5.2.11",
+    "vite-plugin-symfony": "^6.4.4"
+  },
+  "engines": {
+    "node": "^18"
+  }
 }