WebpackManifestLoader // introduce support for "@Vendor" in handle when loading from manifest.json.

Author: Chrico

docs/loaders.md

@@ -26,6 +26,7 @@ The [webpack-manifest-plugin](https://www.npmjs.com/package/webpack-manifest-plu
     "script.js": "/public/path/script.23dafsf2138d.js",
     "module.mjs": "/public/path/module.12aafrf5675d.mjs",
     "custom.module.js": "/public/path/custom.12aafrf5675d.module.js",
+    "@vendor/module.js" "/public/path/@vendor/module.js",
     "style.css": "style.23dafsf2138d.css",
     "sub-folder/style.css": ""
 }
@@ -59,13 +60,8 @@ The loader does support scripts modules, files with the `.mjs` extension.
 However, due to the limitations imposed on those files in regard to the MIME, we added a support to those files ending with `.module.js`.
 This permits us to load those files as script modules too even if we do not have control over the server configuration.
 
-Moreover, if your file ends with `.module.js` or `.mjs`, the loader will not try to build the asset `handle` from the file name.
-Instead, it will use the `key` from the manifest file as the **handle**.
-The reason is that there might be conventions regarding the handle naming, which might not be compatible with the `WebpackManifestLoader::parseData` logic.
-
-Imagine that `$handle` is `@vendor/lib-name`, then `pathinfo($handle, PATHINFO_FILENAME)` will return `lib-name`.
-
-This is because `pathinfo` treats the last part after a slash as the filename, so it extracts `lib-name` from `@vendor/lib-name`.
+Moreover, if your file ends with `.module.js` or `.mjs`, the loader will automatically resolve these files as a `Inpsyde/Assets/ScriptModule`.
+Additionally, we support `@vendor/` in the handle name when parsing from `manifest.json`. Before, the `@vendor/` was detected as part of the filepath and being stripped away.
 
 ### `EncoreEntrypointsLoader`
 

src/Loader/AbstractWebpackLoader.php

@@ -172,6 +172,34 @@ protected function sanitizeFileName(string $file): string
         return ltrim($parsedUrl['path'] ?? $file, './');
     }
 
+    /**
+     * Internal function to sanitize the handle based on the file
+     * by taking into consideration that @vendor can be present.
+     *
+     * @example /path/to/script.js                  -> script
+     * @example @vendor/script.module.js            -> @vendor/script.module
+     * @example /path/to/@vendor/script.module.js   -> @vendor/script.module
+     *
+     * @param string $file
+     *
+     * @return string
+     */
+    protected function sanitizeHandle(string $file): string
+    {
+        $pathInfo = pathinfo($file);
+
+        $dirName = $pathInfo['dirname'] ?? '';
+        $parts = explode('@', $dirName);
+        $vendor = $parts[1] ?? null;
+
+        $handle = $pathInfo['filename'];
+        if ($vendor !== null) {
+            $handle = "@{$vendor}/{$handle}";
+        }
+
+        return $handle;
+    }
+
     /**
      * Internal function to resolve a location for a given file name.
      *

src/Loader/WebpackManifestLoader.php

@@ -18,11 +18,7 @@ protected function parseData(array $data, string $resource): array
         $directory = trailingslashit(dirname($resource));
         $assets = [];
         foreach ($data as $handle => $file) {
-            if (!self::isModule($file)) {
-                // It can be possible that the "handle"-key is a filepath.
-                $handle = pathinfo($handle, PATHINFO_FILENAME);
-            }
-
+            $handle = $this->sanitizeHandle($handle);
             $sanitizedFile = $this->sanitizeFileName($file);
 
             $fileUrl = (!$this->directoryUrl)

tests/phpunit/Unit/Loader/WebpackManifestLoaderTest.php

@@ -38,10 +38,10 @@ public function testLoadFromManifest(
         string $expectedHandle,
         string $expectedFileName,
         string $expectedClass
-    ): void {
-
+    ): void
+    {
         $expectedDirUrl = 'http://localhost.com/assets/';
-        $expectedFileUrl = $expectedDirUrl . $expectedFileName;
+        $expectedFileUrl = $expectedDirUrl . ltrim($expectedFileName, '/');
 
         $loader = new WebpackManifestLoader();
         $loader->withDirectoryUrl($expectedDirUrl);
@@ -67,14 +67,17 @@ public function testLoadFromManifestMultipleAssets(): void
                 'style' => 'style.css',
                 'module' => 'module.mjs',
                 'custom-module' => 'custom.module.js',
+                '@vendor/module' => 'vendor.module.js',
             ]
         );
 
         $loader = new WebpackManifestLoader();
         $assets = $loader->load($this->mockManifestJson($json));
 
-        static::assertCount(4, $assets);
+        static::assertCount(5, $assets);
 
+        static::assertInstanceOf(ScriptModule::class, $assets[4]);
+        static::assertInstanceOf(ScriptModule::class, $assets[3]);
         static::assertInstanceOf(ScriptModule::class, $assets[2]);
         static::assertInstanceOf(Script::class, $assets[0]);
         static::assertInstanceOf(Style::class, $assets[1]);
@@ -106,8 +109,8 @@ public function testLoadFromManifestWithAlternativeUrl(
         string $json,
         string $alternativeUrl,
         string $expectedUrl
-    ): void {
-
+    ): void
+    {
         $loader = new WebpackManifestLoader();
         $loader->withDirectoryUrl($alternativeUrl);
         $assets = $loader->load($this->mockManifestJson($json));
@@ -201,10 +204,32 @@ public function provideManifest(): \Generator
             'sub-folder/script.js',
             Script::class,
         ];
+
+        yield 'with @vendor in handle for modules' => [
+            '{"@vendor/script.module.js": "script.module.js"}',
+            '@vendor/script.module',
+            'script.module.js',
+            ScriptModule::class,
+        ];
+
+        yield 'with @vendor in handle for modules and file path' => [
+            '{"@vendor/script.module.js": "/path/to/script.module.js"}',
+            '@vendor/script.module',
+            '/path/to/script.module.js',
+            ScriptModule::class,
+        ];
+
+        yield 'with complex @vendor in handle for modules and file path' => [
+            '{"path/to/@vendor/script.module.js": "/path/to/script.module.js"}',
+            '@vendor/script.module',
+            '/path/to/script.module.js',
+            ScriptModule::class,
+        ];
     }
 
     /**
      * @param string $json
+     *
      * @return string
      */
     private function mockManifestJson(string $json): string