Update Node and Webpack

.gitlab-ci.yml

@@ -6,7 +6,7 @@ stages:
 - build_assets
 - create_pack
 - deploy
-     
+
 variables:
   KUBECONFIG: /etc/k8s-config
   THEME_NAME: base-theme-slug
@@ -27,8 +27,8 @@ build_assets:
    - tags
  tags:
    - docker
- image: node:12
- 
+ image: node:20
+
  script:
    - rm -rf themes/${THEME_NAME}/dist
    - npm --prefix themes/${THEME_NAME}/ install
@@ -46,7 +46,7 @@ create_pack_develop:
   script:
     - cd themes/
     - mkdir -p /deploy-zips/
-    - zip -r /deploy-zips/${THEME_NAME}.zip ${THEME_NAME}  
+    - zip -r /deploy-zips/${THEME_NAME}.zip ${THEME_NAME}
     #create theme pack
     - curl --header "$AUTH" --upload-file /deploy-zips/${THEME_NAME}.zip  "${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${THEME_NAME}/${CI_COMMIT_SHORT_SHA}/${THEME_NAME}.zip"
 
@@ -55,10 +55,10 @@ deploy_to_develop:
   image: hacklab/kubectl:latest
   script:
     - echo ${kubeconfig} | base64 -d > ${KUBECONFIG}
-    - POD=$(kubectl get pods -n ${NAMESPACE_DEV} | grep wordpress | cut -d ' ' -f 1) 
+    - POD=$(kubectl get pods -n ${NAMESPACE_DEV} | grep wordpress | cut -d ' ' -f 1)
     - echo $POD
     #deploy zips to production
-    - kubectl exec -n ${NAMESPACE_DEV} -it $POD -- sh -c "cd /tmp/ && curl --create-dirs --location --output /tmp/deploy-zips/${THEME_NAME}.zip  --header $AUTH ${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${THEME_NAME}/${CI_COMMIT_SHORT_SHA}/${THEME_NAME}.zip && cd /var/www/html/ && wp theme install --force /tmp/deploy-zips/${THEME_NAME}.zip && chown -R www-data /var/www/html/wp-content/themes/ && chgrp -R www-data /var/www/html/wp-content/themes/"    
+    - kubectl exec -n ${NAMESPACE_DEV} -it $POD -- sh -c "cd /tmp/ && curl --create-dirs --location --output /tmp/deploy-zips/${THEME_NAME}.zip  --header $AUTH ${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${THEME_NAME}/${CI_COMMIT_SHORT_SHA}/${THEME_NAME}.zip && cd /var/www/html/ && wp theme install --force /tmp/deploy-zips/${THEME_NAME}.zip && chown -R www-data /var/www/html/wp-content/themes/ && chgrp -R www-data /var/www/html/wp-content/themes/"
   environment: develop
   only:
     - /main/
@@ -76,7 +76,7 @@ create_pack_production:
   script:
     - cd themes/
     - mkdir -p /deploy-zips/
-    - zip -r /deploy-zips/${THEME_NAME}.zip ${THEME_NAME}  
+    - zip -r /deploy-zips/${THEME_NAME}.zip ${THEME_NAME}
     #create theme pack
     - curl --header "$AUTH" --upload-file /deploy-zips/${THEME_NAME}.zip  "${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${THEME_NAME}/${CI_BUILD_REF_NAME}/${THEME_NAME}.zip"
 
@@ -85,10 +85,10 @@ deploy_to_production:
   image: hacklab/kubectl:latest
   script:
     - echo ${kubeconfig} | base64 -d > ${KUBECONFIG}
-    - POD=$(kubectl get pods -n ${NAMESPACE_PROD} | grep wordpress | cut -d ' ' -f 1) 
+    - POD=$(kubectl get pods -n ${NAMESPACE_PROD} | grep wordpress | cut -d ' ' -f 1)
     - echo $POD
     #deploy zips to production
-    - kubectl exec -n ${NAMESPACE_PROD} -it $POD -- sh -c "cd /tmp/ && curl --create-dirs --location --output /tmp/deploy-zips/${THEME_NAME}.zip  --header $AUTH ${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${THEME_NAME}/${CI_BUILD_REF_NAME}/${THEME_NAME}.zip && cd /var/www/html/ && wp theme install --force /tmp/deploy-zips/${THEME_NAME}.zip"    
+    - kubectl exec -n ${NAMESPACE_PROD} -it $POD -- sh -c "cd /tmp/ && curl --create-dirs --location --output /tmp/deploy-zips/${THEME_NAME}.zip  --header $AUTH ${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${THEME_NAME}/${CI_BUILD_REF_NAME}/${THEME_NAME}.zip && cd /var/www/html/ && wp theme install --force /tmp/deploy-zips/${THEME_NAME}.zip"
   environment: develop
   only:
     - tags

compose/local/watcher/Dockerfile

-FROM node:14
+FROM node:20
 
 LABEL mantainer "hacklab/ <contato@hacklab.com.br>"
 
@@ -10,4 +10,4 @@ RUN chmod +x /entrypoint.sh
 
 RUN mkdir /app
 
-WORKDIR /app
\ No newline at end of file
+WORKDIR /app

dev-scripts/compila-plugin.sh

-#!/bin/bash 
+#!/bin/bash
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 cd $DIR/../plugins/hacklab-blocks
-docker run -it -v `pwd`:/compilar node:12 bash -c "cd compilar && npm install && npm run production"
+docker run -it -v `pwd`:/compilar node:20 bash -c "cd compilar && npm install && npm run production"
 ls
 pwd
 cd $DIR/../plugins/
-zip -r ../zips/hacklab-blocks.zip hacklab-blocks -x "hacklab-blocks/node_modules/*"
\ No newline at end of file
+zip -r ../zips/hacklab-blocks.zip hacklab-blocks -x "hacklab-blocks/node_modules/*"

dev-scripts/compilar.sh

-#!/bin/bash 
+#!/bin/bash
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 CDIR=$( pwd )
 cd $DIR/../themes/base-theme-slug
-docker run -it -v `pwd`:/compilar node:12 bash -c "cd compilar && npm install && npm run production"
+docker run -it -v `pwd`:/compilar node:20 bash -c "cd compilar && npm install && npm run production"

themes/base-theme-slug/assets/javascript/app.js

-import Vue from 'vue';
-
-const app = new Vue({
-    el: '#app',
-})
-
 jQuery(document).ready(function(){
     scrolledMenu();
 
@@ -23,4 +17,4 @@ function scrolledMenu(){
     }else if(jQuery('.card-special').length > 0){
         jQuery('.main-header').removeClass('scrolled')
     }
-}
\ No newline at end of file
+}

themes/base-theme-slug/mix-manifest.json

 {
     "/js/functionalities/anchor-behavior.js": "/js/functionalities/anchor-behavior.js",
-    "/css/app.css": "/css/app.css",
     "/js/functionalities/anchor-sidebar.js": "/js/functionalities/anchor-sidebar.js",
     "/js/functionalities/copy-url.js": "/js/functionalities/copy-url.js",
     "/js/functionalities/featured-slider.js": "/js/functionalities/featured-slider.js",
@@ -9,5 +8,6 @@
     "/js/functionalities/perguntas-frequentes.js": "/js/functionalities/perguntas-frequentes.js",
     "/js/functionalities/query-slider.js": "/js/functionalities/query-slider.js",
     "/js/functionalities/search.js": "/js/functionalities/search.js",
-    "/js/functionalities/video-gallery.js": "/js/functionalities/video-gallery.js"
+    "/js/functionalities/video-gallery.js": "/js/functionalities/video-gallery.js",
+    "/css/app.css": "/css/app.css"
 }

themes/base-theme-slug/package.json

@@ -5,28 +5,23 @@
   "main": "index.js",
   "scripts": {
     "dev": "npm run development",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "npm run development -- --watch",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "development": "mix",
+    "watch": "mix watch",
+    "hot": "mix watch --hot",
     "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "production": "mix --production"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@wordpress/block-editor": "^4.2.0",
-    "@wordpress/blocks": "^6.19.0",
-    "@wordpress/components": "^9.9.0",
-    "@wordpress/scripts": "^12.0.0",
-    "laravel-mix": "^4.1.4",
-    "tiny-slider": "^2.9.3"
+    "tiny-slider": "^2.9.4"
   },
   "devDependencies": {
-    "cross-env": "^5.2.1",
-    "resolve-url-loader": "^3.1.0",
-    "sass": "^1.63.6",
-    "sass-loader": "^7.3.1",
-    "vue-template-compiler": "^2.6.14"
+    "@wordpress/dependency-extraction-webpack-plugin": "^5.8.0",
+    "laravel-mix": "^6.0.49",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.77.1",
+    "sass-loader": "^12.6.0"
   }
 }

themes/base-theme-slug/webpack.mix.js

+const fs = require('node:fs');
+const path = require('node:path');
+
 const mix = require('laravel-mix');
-const fs = require('fs');
-const path = require( 'path' );
-const defaultConfig = require( './node_modules/@wordpress/scripts/config/webpack.config' );
+const DependencyExtraction = require('@wordpress/dependency-extraction-webpack-plugin');
 
 /*
  |--------------------------------------------------------------------------
@@ -35,10 +36,6 @@ getDirFiles(functionalitiesPath).forEach((filepath) => {
 })
 
 mix.webpackConfig({
-	...defaultConfig,
-	entry: {
-    },
-
     output: {
         chunkFilename: dist_dir + '/[name].js',
         path: path.resolve( __dirname, './dist/' ),
@@ -46,9 +43,12 @@ mix.webpackConfig({
         filename: '[name].js',
     },
 
-    module: {
-
-    },
+    plugins: [
+        new DependencyExtraction({
+            combineAssets: true,
+            injectPolyfill: false,
+        }),
+    ],
 
-	devtool: "inline-source-map"
+	devtool: 'inline-source-map',
 });