WebPack Loader Script Modules Support

Since the `ScriptModule` has been integrated, we can register WP modules, but only when we create the Assets programmatically. There's no support for modules within the Autoloader.

These changes aim to support modules by establishing a module filename convention as `.mjs` might not work correctly if it isn't possible to guarantee the server is serving the mjs resources with the correct MIME type.

Hence, a `.module.js` seems to be a good tradeoff and the number of changes necessary to make it work ar limited, so in the future when (and if) the `mjs` are well-supported, we can slightly improve the solution.

The changes involve two key points

- The `AbstractWebpackLoader` so that the class can recognize the new `ScriptModule` class as an instantiable class for those files ending with `.module.js`.
- The `WebpackManifestLoader` to correctly use the original `handle` rather than the file name. WordPress Modules start with `@` though, not required it is an established convention and would make sense to keep the handle provided by the manifest rather than guessing it by the file name.

Note:
The Manifest file contains a key value pair, and it could be possible to extract the handle from the key, which might be a file path in the classic case the webpack plugin is configured with `basePath: './'` and `publicPath: './'`. I would not suggest changing the approach here and with these changes as it would be comparable to a breaking change, while the current ones can be seen as a minor change because, the file name ending with `.module.js` would trigger the registration using the `ScriptModule`.

Author: widoz

src/Loader/AbstractWebpackLoader.php

@@ -11,6 +11,7 @@
 use Inpsyde\Assets\Exception\InvalidResourceException;
 use Inpsyde\Assets\Script;
 use Inpsyde\Assets\Style;
+use Inpsyde\Assets\ScriptModule;
 
 abstract class AbstractWebpackLoader implements LoaderInterface
 {
@@ -110,20 +111,26 @@ protected function buildAsset(string $handle, string $fileUrl, string $filePath)
         $extensionsToClass = [
             'css' => Style::class,
             'js' => Script::class,
+            'module.js' => ScriptModule::class,
         ];
 
         /** @var array{filename?:string, extension?:string} $pathInfo */
         $pathInfo = pathinfo($filePath);
+        $baseName = $pathInfo['basename'] ?? '';
         $filename = $pathInfo['filename'] ?? '';
         $extension = $pathInfo['extension'] ?? '';
 
+        if (self::isModule($baseName)) {
+            $extension = 'module.js';
+        }
+
         if (!in_array($extension, array_keys($extensionsToClass), true)) {
             return null;
         }
 
         $class = $extensionsToClass[$extension];
 
-        /** @var Style|Script $asset */
+        /** @var Style|Script|ScriptModule $asset */
         $asset = new $class($handle, $fileUrl, $this->resolveLocation($filename));
         $asset->withFilePath($filePath);
         $asset->canEnqueue(true);
@@ -137,6 +144,11 @@ protected function buildAsset(string $handle, string $fileUrl, string $filePath)
         return $asset;
     }
 
+    protected static function isModule(string $fileName): bool
+    {
+        return str_ends_with($fileName, '.module.js');
+    }
+
     /**
      * The "file"-value can contain:
      *  - URL

src/Loader/WebpackManifestLoader.php

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