Vite 2!

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 node_modules
+public/assets

README.md

@@ -14,7 +14,7 @@ A bare-minimum setup to serve as example to adapt to other scenarios ([WordPress
 
 ### Note about the development host
 
-A characteristic of this setup is that you'll run your project from your own local server, for exemple http://vite-php-setup.test. Vite will be running at http://localhost:3000 where our script and styles will be loaded from, but accesing http://localhost:3000 directly will be empty.
+A characteristic of this setup is that you'll run your project from your own local server, for exemple http://vite-php-setup.test. Vite will be running at http://localhost:3000 where our script and styles will be served from, but accesing http://localhost:3000 directly will be empty.
 
 Of course, HMR and styles will work just fine! And fast!
 
@@ -38,7 +38,5 @@ You may find the need to handle multiple entries, for example, one js/css for th
 
 So you can have:
 
-- Completely separeted Vite setups, with different dependencies, different configs and problably even different teams developing each part.
-- A single and shared Vite setup, outputing different files in separated build steps.
-
-For the former it should be self explanatory. For the later, you can have a look into [this setup](https://github.com/wp-bond/boilerplate/blob/master/app/themes/boilerplate/package.json).
+- A single Vite [multi-page setup](https://vitejs.dev/guide/build.html#multi-page-app).
+- A shared Vite setup, but outputing different entries in separated build steps, [example here](https://github.com/wp-bond/boilerplate/blob/master/app/themes/boilerplate/package.json).

public/dist/manifest.json

@@ -0,0 +1,19 @@
+{
+  "main.js": {
+    "file": "assets/main.13a1cd52.js",
+    "src": "main.js",
+    "isEntry": true,
+    "imports": [
+      "_vendor.7580ca5a.js"
+    ],
+    "css": [
+      "assets/main.5924f01a.css"
+    ],
+    "assets": [
+      "assets/logo.3b714202.png"
+    ]
+  },
+  "_vendor.7580ca5a.js": {
+    "file": "assets/vendor.7580ca5a.js"
+  }
+}

public/helpers.php

@@ -1,59 +1,114 @@
 <?php
 // Helpers here serve as example. Change to suit your needs.
 
-// For a real-world example check here https://github.com/wp-bond/bond/blob/master/src/Tooling/Vite.php
+// For a real-world example check here:
+// https://github.com/wp-bond/bond/blob/master/src/Tooling/Vite.php
+// https://github.com/wp-bond/boilerplate/tree/master/app/themes/boilerplate
 
+// on the links above there is also example for @vitejs/plugin-legacy
 
 
 // Some dev/prod mechanism would exist in your project
 // Handling manualy here, change to test both cases
 define('IS_DEVELOPMENT', true);
 
 
-// Vite Client that must be loaded during development
-function viteClient(): string
+function vite($entry): string
 {
-    // not required on production
-    if (!IS_DEVELOPMENT) {
+    return jsTag($entry)
+        . jsPreloadImports($entry)
+        . cssTag($entry);
+}
+
+
+// Helpers to print tags
+
+function jsTag(string $entry): string
+{
+    $url = IS_DEVELOPMENT
+        ? 'http://localhost:3000/' . $entry
+        : assetUrl($entry);
+
+    if (!$url) {
         return '';
     }
-    return '<script type="module">import "http://localhost:3000/vite/client"</script>';
+    return '<script type="module" crossorigin src="'
+        . $url
+        . '"></script>';
 }
 
+function jsPreloadImports(string $entry): string
+{
+    if (IS_DEVELOPMENT) {
+        return '';
+    }
 
-// Helper to output style tag
-function viteCss(string $name): string
+    $res = '';
+    foreach (importsUrls($entry) as $url) {
+        $res .= '<link rel="modulepreload" href="'
+            . $url
+            . '">';
+    }
+    return $res;
+}
+
+function cssTag(string $entry): string
 {
     // not needed on dev, it's inject by Vite
     if (IS_DEVELOPMENT) {
         return '';
     }
-    return '<link rel="stylesheet" href="' .
-        viteAsset($name . '.css')
-        . '">';
+
+    $tags = '';
+    foreach (cssUrls($entry) as $url) {
+        $tags .= '<link rel="stylesheet" href="'
+            . $url
+            . '">';
+    }
+    return $tags;
 }
 
-// Helper to output the script tag
-function viteJs(string $name): string
+
+// Helpers to locate files
+
+function getManifest(): array
 {
-    return '<script type="module" src="' .
-        viteAsset($name . '.js')
-        . '"></script>';
+    $content = file_get_contents(__DIR__ . '/dist/manifest.json');
+
+    return json_decode($content, true);
 }
 
-// Helper to locate files
-function viteAsset(string $filename): string
+function assetUrl(string $entry): string
 {
-    // Let Vite handle during dev
-    if (IS_DEVELOPMENT) {
-        return 'http://localhost:3000/src/' . $filename;
+    $manifest = getManifest();
+
+    return isset($manifest[$entry])
+        ? '/dist/' . $manifest[$entry]['file']
+        : '';
+}
+
+function importsUrls(string $entry): array
+{
+    $urls = [];
+    $manifest = getManifest();
+
+    if (!empty($manifest[$entry]['imports'])) {
+        foreach ($manifest[$entry]['imports'] as $imports) {
+            $urls[] = '/dist/' . $manifest[$imports]['file'];
+        }
     }
+    return $urls;
+}
 
-    // Locate hashed files in production
-    $manifest = json_decode(file_get_contents(
-        __DIR__ . '/dist/_assets/manifest.json'
-    ), true);
+function cssUrls(string $entry): array
+{
+    $urls = [];
+    $manifest = getManifest();
 
-    return '/dist/_assets/'
-        . ($manifest[$filename] ?? $filename);
+    if (!empty($manifest[$entry]['css'])) {
+        foreach ($manifest[$entry]['css'] as $file) {
+            $urls[] = '/dist/' . $file;
+        }
+    }
+    return $urls;
 }

public/index.php

@@ -15,9 +15,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
 
-    <?= viteClient() ?>
-    <?= viteCss('style') ?>
-    <?= viteJs('index') ?>
+    <?= vite('main.js') ?>
+
 </head>
 
 <body>