Fixes in the config for vite

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue

@@ -366,7 +366,7 @@ import {
 } from "../../types";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import * as pdfjsLib from "pdfjs-dist";
-import {
+import type {
     PDFDocumentProxy,
     PDFPageProxy,
 } from "pdfjs-dist/types/src/display/api";

src/Bundle/ChillDocStoreBundle/vite.config.js

@@ -6,10 +6,10 @@ export default {
     mod_async_upload:
       "./src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/index.ts",
     mod_document_action_buttons_group:
-      "./src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index",
+      "./src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts",
     mod_document_download_button:
-      "./src/Bundle/ChillDocStoreBundle/Resources/public/module/button_download/index",
+      "./src/Bundle/ChillDocStoreBundle/Resources/public/module/button_download/index.ts",
     vue_document_signature:
-      "./src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index",
+      "./src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts",
   },
 };

src/Bundle/ChillMainBundle/Resources/public/page/login/login.scss

@@ -1,4 +1,4 @@
-@import 'ChillMainAssets/chill/fonts/OpenSans/OpenSans';
+@import '../../chill/fonts/OpenSans/OpenSans';
 
 html, body {
     height: 100%;
@@ -47,7 +47,7 @@ label {
     padding-right: 5px;
 }
 input {
-    color: 'black';
+    color: black;
 }
 form {
 

src/Bundle/ChillMainBundle/Templating/EncoreToViteTwigExtension.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace Chill\MainBundle\Templating;
+
+use Pentatrion\ViteBundle\Service\EntrypointRenderer;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+/**
+ * Backward-compatibility Twig extension that maps Webpack Encore helpers
+ * to Vite helpers provided by pentatrion/vite-bundle.
+ *
+ * It lets existing templates keep using:
+ *   - encore_entry_script_tags('entry')
+ *   - encore_entry_link_tags('entry')
+ * while we progressively migrate them to:
+ *   - vite_entry_script_tags('entry')
+ *   - vite_entry_link_tags('entry')
+ */
+class EncoreToViteTwigExtension extends AbstractExtension
+{
+    public function __construct(private EntrypointRenderer $entrypointRenderer)
+    {
+    }
+
+    public function getFunctions(): array
+    {
+        return [
+            // Webpack Encore compatibility shims
+            new TwigFunction('encore_entry_script_tags', [$this, 'renderEncoreScriptTags'], ['is_safe' => ['html']]),
+            new TwigFunction('encore_entry_link_tags', [$this, 'renderEncoreLinkTags'], ['is_safe' => ['html']]),
+        ];
+    }
+
+    /**
+     * Keep the Encore-compatible signature: (entryName, attributes = {}, entrypointName = null)
+     * Map to Vite renderer options and configName.
+     */
+    public function renderEncoreScriptTags(string $entryName, array $attributes = [], ?string $entrypointName = null): string
+    {
+        $options = [
+            'attr' => $attributes,
+        ];
+
+        return $this->entrypointRenderer->renderScripts($entryName, $options, $entrypointName);
+    }
+
+    /**
+     * Keep the Encore-compatible signature: (entryName, attributes = {}, entrypointName = null)
+     * Map to Vite renderer options and configName.
+     */
+    public function renderEncoreLinkTags(string $entryName, array $attributes = [], ?string $entrypointName = null): string
+    {
+        $options = [
+            'attr' => $attributes,
+        ];
+
+        return $this->entrypointRenderer->renderLinks($entryName, $options, $entrypointName);
+    }
+}

src/Bundle/ChillMainBundle/config/services/templating.yaml

@@ -24,6 +24,10 @@ services:
         tags:
             - { name: twig.extension }
 
+    Chill\MainBundle\Templating\EncoreToViteTwigExtension:
+        tags:
+            - { name: twig.extension }
+
     Chill\MainBundle\Templating\ChillTwigRoutingHelper:
         arguments:
             $requestStack: '@Symfony\Component\HttpFoundation\RequestStack'

src/Bundle/ChillMainBundle/vite.config.js

@@ -26,7 +26,7 @@ export default {
     mod_bootstrap:
       "./src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/index.js",
     mod_ckeditor5:
-      "./src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index",
+      "./src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts",
     mod_disablebuttons:
       "./src/Bundle/ChillMainBundle/Resources/public/module/disable-buttons/index.js",
     mod_blur:
@@ -48,10 +48,10 @@ export default {
     mod_pick_rolling_date:
       "./src/Bundle/ChillMainBundle/Resources/public/module/pick-rolling-date/index.js",
     mod_address_details:
-      "./src/Bundle/ChillMainBundle/Resources/public/module/address-details/index",
+      "./src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts",
     mod_news: "./src/Bundle/ChillMainBundle/Resources/public/module/news/index.js",
     mod_workflow_attachment:
-      "./src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/index",
+      "./src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/index.ts",
     mod_saved_export_button:
       "./src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/index.ts",
     vue_address:

src/Bundle/ChillWopiBundle/vite.config.js

@@ -3,6 +3,6 @@ export default {
     page_wopi_editor:
       "./src/Bundle/ChillWopiBundle/src/Resources/public/page/editor/index.ts",
     mod_reload_page:
-      "./src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index",
+      "./src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts",
   },
 };

symfony.lock

@@ -155,6 +155,15 @@
             "config/packages/misd_phone_number.yaml"
         ]
     },
+    "pentatrion/vite-bundle": {
+        "version": "8.2",
+        "recipe": {
+            "repo": "github.com/symfony/recipes-contrib",
+            "branch": "main",
+            "version": "6.5",
+            "ref": "3a6673f248f8fc1dd364dadfef4c5b381d1efab6"
+        }
+    },
     "phpstan/phpstan": {
         "version": "1.12",
         "recipe": {

vite.config.js

@@ -144,6 +144,9 @@ export default defineConfig(async () => {
     },
     build: {
       sourcemap: process.env.NODE_ENV !== "production",
+      // Ensure Symfony looks for the manifest where Vite writes it
+      outDir: resolve(__dirname, "public/build"),
+      manifest: true,
       rollupOptions: {
         input: inputs,
       },

webpack.config.js

@@ -1,121 +0,0 @@
-const Encore = require("@symfony/webpack-encore");
-const { resolve, parse } = require("path");
-const {existsSync} = require("fs");
-const { readdir } = require("fs").promises;
-
-/**
- * get the file names inside given directory recursively, limiting to
- * a given depth in the recursion
- *
- * @param string  dir    the directory
- * @param int     depth  the maximum depth to look into
- */
-async function* getFiles(dir, depth, ignored) {
-  const dirents = await readdir(dir, { withFileTypes: true });
-  for (const dirent of dirents) {
-    const res = resolve(dir, dirent.name);
-    if (dirent.isDirectory()) {
-      if (depth > 0) {
-        yield* getFiles(res, depth - 1, ignored);
-      }
-    } else if (ignored.includes(res)) {
-      continue;
-    } else {
-      yield res;
-    }
-  }
-}
-
-/**
- * populate the config of encore in directories inside `'./src'` and
- * `'./vendor'` and letting them to alter the encore config.
- *
- * if a file `chill.webpack.config.js` is found, the default function is
- * imported and executed. This function receive two arguments:
- *
- * - `Encore`, the main encore object
- * - `chillEntries`: the entries which will be appended to the main `chill` module,
- * resulting in a chill.js and chill.css file.
- *
- */
-async function populateConfig(Encore, chillEntries) {
-  // chill-main contains some bootstrap that must be loaded first.
-  // we register them first and, then, store this chill.webpack.config.js file
-  // into `toIgnore`, ignoring it when we loop on other folders.
-  let toIgnore = [];
-
-  // loop into chill main
-  for await (const f of getFiles("./src/Bundle/ChillMainBundle/", 1, [])) {
-    let filename = parse(f).base;
-    if (filename === "chill.webpack.config.js") {
-      configure = require(f);
-      configure(Encore, chillEntries);
-      toIgnore.push(f);
-    }
-  }
-
-  // loop into other chill bundles
-  for await (const f of getFiles("./src/Bundle", 2, toIgnore)) {
-    let filename = parse(f).base;
-    if (filename === "chill.webpack.config.js") {
-      configure = require(f);
-      configure(Encore, chillEntries);
-    }
-  }
-}
-
-// export the final configuration
-module.exports = (async () => {
-  // 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");
-  }
-  // basic encore configuration
-  Encore.setOutputPath("public/build/")
-    .setPublicPath("/build")
-    .enableSassLoader(function (options) {
-      // If set to true, Sass won’t print warnings that are caused by dependencies (like bootstrap):
-      // https://sass-lang.com/documentation/js-api/interfaces/options/#quietDeps
-        options.sassOptions.quietDeps = true;
-        options.sassOptions.silenceDeprecations = ['import'];
-    })
-    .enableVueLoader(() => {}, {
-      version: 3,
-    })
-    .enableTypeScriptLoader(function (tsConfig) {
-      tsConfig.appendTsSuffixTo = [/\.vue$/];
-      tsConfig.appendTsxSuffixTo = [/\.vue$/];
-      // temporary fix for https://github.com/vuejs/vue-loader/issues/1915 and https://github.com/vuejs/core/issues/2855
-      tsConfig.compilerOptions = { strict: !Encore.isProduction() };
-      tsConfig.silent = false;
-    })
-    //.enableForkedTypeScriptTypesChecking()
-    .autoProvidejQuery()
-    .enableSourceMaps(!Encore.isProduction())
-    .cleanupOutputBeforeBuild()
-    //.enableBuildNotifications()
-    .enableVersioning()
-    .enableSingleRuntimeChunk()
-    .splitEntryChunks();
-
-  // populate config with chill entries
-  let chillEntries = [];
-  await populateConfig(Encore, chillEntries);
-
-  Encore.addAliases({
-    translator: resolve(__dirname, './assets/translator'),
-    "@symfony/ux-translator": resolve(__dirname, './vendor/symfony/ux-translator/assets'),
-  });
-
-    //getting the encore config and appending chill entries
-    config = Encore.getWebpackConfig();
-    config.entry.chill = chillEntries;
-
-  if (!Encore.isProduction()) {
-    console.log(config);
-    config.devtool = "eval-source-map";
-  }
-
-  return config;
-})();