From 6a71a29bf520409c47099d85109ca698d5ed77e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ste=CC=81phane=20Dion?= Date: Sat, 24 Feb 2024 16:41:06 +0100 Subject: [PATCH] Migrating from Webpack Encore to AssetMapper --- .dockerignore | 10 +- .github/workflows/build.yml | 8 +- .gitignore | 12 +- .travis.yml | 3 +- Dockerfile | 10 +- assets/{js => }/app-database.js | 0 assets/{js => }/app-enrich.js | 0 assets/{js => }/app-subscription.js | 0 assets/{js => }/app.js | 29 +- assets/{css/app.scss => styles/app.css} | 4 - composer.json | 5 +- composer.lock | 9778 ----------------- config/bundles.php | 1 - config/packages/asset_mapper.yaml | 5 + config/packages/webpack_encore.yaml | 45 - docs/index.md | 4 +- importmap.php | 56 + package-lock.json | 8247 -------------- package.json | 32 - symfony.lock | 31 +- .../app_index_database_import_index.html.twig | 5 +- .../Modules/enrich/enrich_create.html.twig | 6 +- templates/Modules/node/node_index.html.twig | 6 +- .../subscription/subscription_index.html.twig | 8 +- templates/base.html.twig | 28 +- update.sh | 3 +- webpack.config.js | 78 - 27 files changed, 143 insertions(+), 18271 deletions(-) rename assets/{js => }/app-database.js (100%) rename assets/{js => }/app-enrich.js (100%) rename assets/{js => }/app-subscription.js (100%) rename assets/{js => }/app.js (90%) rename assets/{css/app.scss => styles/app.css} (84%) delete mode 100644 composer.lock create mode 100644 config/packages/asset_mapper.yaml delete mode 100644 config/packages/webpack_encore.yaml create mode 100644 importmap.php delete mode 100644 package-lock.json delete mode 100644 package.json delete mode 100644 webpack.config.js diff --git a/.dockerignore b/.dockerignore index 42b089c4..a01cc4da 100644 --- a/.dockerignore +++ b/.dockerignore @@ -13,12 +13,10 @@ vendor phpunit.xml ###< symfony/phpunit-bridge ### -###> symfony/webpack-encore-bundle ### -node_modules -public/build -npm-debug.log -yarn-error.log -###< symfony/webpack-encore-bundle ### +###> symfony/asset-mapper ### +/public/assets/ +/assets/vendor/ +###< symfony/asset-mapper ### .dockerignore .DS_Store diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index e27c685b..04420d68 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -44,13 +44,7 @@ jobs: - name: Install dependencies run: composer install --optimize-autoloader --no-interaction --no-progress - - name: Use Node.js - uses: actions/setup-node@v3 - with: - node-version: 18 - - - run: npm install - - run: npm run build + - run: bin/console asset-map:compile - run: sudo chown -R $USER:$USER /home/runner/work/elasticsearch-admin/elasticsearch-admin - run: bin/console app:phpunit diff --git a/.gitignore b/.gitignore index d9fe7f71..47c4d5d4 100644 --- a/.gitignore +++ b/.gitignore @@ -20,13 +20,6 @@ .phpunit.result.cache ###< phpunit/phpunit ### -###> symfony/webpack-encore-bundle ### -/node_modules/ -/public/build/ -npm-debug.log -yarn-error.log -###< symfony/webpack-encore-bundle ### - ###> app ### .env .php_cs.cache @@ -34,3 +27,8 @@ yarn-error.log info.json public/.htaccess ###< app ### + +###> symfony/asset-mapper ### +/public/assets/ +/assets/vendor/ +###< symfony/asset-mapper ### diff --git a/.travis.yml b/.travis.yml index 6b099055..fa8378fd 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ env: install: - composer install - - npm install - - npm run build + - bin/console asset-map:compile script: - bin/console app:phpunit diff --git a/Dockerfile b/Dockerfile index 145d258c..5e87b518 100644 --- a/Dockerfile +++ b/Dockerfile @@ -18,10 +18,10 @@ ENV SECRET_REGISTER=$SECRET_REGISTER RUN apk --no-cache add php82 php82-fpm php82-opcache php82-json php82-openssl php82-curl php82-zlib php82-fileinfo \ php82-xml php82-simplexml php82-phar php82-intl php82-dom php82-xmlreader php82-ctype php82-session php82-gd \ php82-tokenizer php82-pdo php82-pdo_mysql php82-pdo_pgsql php82-iconv php82-zip php82-gmp php82-mbstring php82-xmlwriter \ - nginx supervisor nodejs npm curl + nginx supervisor curl # Create symlink so programs depending on `php` still function -#RUN ln -s /usr/bin/php82 /usr/bin/php +RUN ln -s /usr/bin/php82 /usr/bin/php # Configure nginx COPY docker/nginx.conf /etc/nginx/nginx.conf @@ -37,12 +37,11 @@ COPY docker/php.ini /etc/php82/conf.d/custom.ini COPY docker/supervisord.conf /etc/supervisor/conf.d/supervisord.conf # Create folders -RUN mkdir -p /var/www/html && mkdir -p /.composer && mkdir -p /.npm +RUN mkdir -p /var/www/html && mkdir -p /.composer # Make sure files/folders needed by the processes are accessable when they run under the nobody user RUN chown -R nobody.nobody /var/www/html && \ chown -R nobody.nobody /.composer && \ - chown -R nobody.nobody /.npm && \ chown -R nobody.nobody /etc/nginx && \ chown -R nobody.nobody /run && \ chown -R nobody.nobody /var/lib/nginx && \ @@ -61,8 +60,7 @@ COPY --from=composer /usr/bin/composer /usr/bin/composer # Run composer install to install the dependencies RUN composer install --optimize-autoloader --no-interaction --no-progress --no-dev -RUN npm install -RUN npm run build +RUN bin/console asset-map:compile COPY --chown=nobody .env.dist .env diff --git a/assets/js/app-database.js b/assets/app-database.js similarity index 100% rename from assets/js/app-database.js rename to assets/app-database.js diff --git a/assets/js/app-enrich.js b/assets/app-enrich.js similarity index 100% rename from assets/js/app-enrich.js rename to assets/app-enrich.js diff --git a/assets/js/app-subscription.js b/assets/app-subscription.js similarity index 100% rename from assets/js/app-subscription.js rename to assets/app-subscription.js diff --git a/assets/js/app.js b/assets/app.js similarity index 90% rename from assets/js/app.js rename to assets/app.js index 09eb65a9..1b4fefd6 100644 --- a/assets/js/app.js +++ b/assets/app.js @@ -1,3 +1,12 @@ +import 'bootstrap/dist/css/bootstrap.min.css'; +import 'bootstrap-icons/font/bootstrap-icons.min.css'; +import './styles/app.css'; + +import { Dropdown, Modal, Toast } from 'bootstrap'; + +const dropdownElementList = document.querySelectorAll('.dropdown-toggle'); +const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new Dropdown(dropdownToggleEl)); + (() => { 'use strict' @@ -53,23 +62,17 @@ }) })(); -require('jquery'); -global.$ = global.jQuery = $; +import $ from 'jquery'; -require('bootstrap'); +import saveAs from 'file-saver'; + +import slug from 'slug'; -import { saveAs } from 'file-saver'; -var slug = require('slug'); slug.charmap['/'] = '-'; slug.charmap['?'] = '-'; slug.charmap['='] = '-'; -global.slug = slug; - -global.sleep = function sleep(ms) { - return new Promise(resolve => setTimeout(resolve, ms)); -} -global.createToast = function createToast(body) { +var createToast = function createToast(body) { var toast = `