From 08e49c0178023ab4caca33fbd6eb82e51f4f3418 Mon Sep 17 00:00:00 2001
From: Andrej Rypo <xrypak@gmail.com>
Date: Wed, 28 Dec 2022 11:12:40 +0100
Subject: [PATCH] Readme updated

Notable changes:
- mention support for Vite v3 and v4
- default port update for development server from 3000 to 5173
---
 readme.md | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/readme.md b/readme.md
index 7df4c64..51f5860 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
 # Peat
 
-PHP-vite bridge building tool, for any framework.
+PHP-Vite bridge building tool, for any framework.
 
 > 💿 `composer require dakujem/peat`
 
@@ -12,7 +12,7 @@ It provides a way to generate `<script>` and `<link>` tags to desired assets.
 
 ## Vite
 
-Vite consists of 2 parts:
+Vite (a.k.a. Vite.js) consists of 2 parts:
 - _development server_
 - and _bundler_.
 
@@ -27,8 +27,8 @@ To integrate a JS app, the backend must output snippets like these:
 - links to files served by _development server_
     ```html
     <!-- DEVELOPMENT -->
-    <script type="module" src="http://localhost:3000/@vite/client"></script>
-    <script type="module" src="http://localhost:3000/src/main.js"></script>
+    <script type="module" src="http://localhost:5173/@vite/client"></script>
+    <script type="module" src="http://localhost:5173/src/main.js"></script>
     ```
 
 For best development experience, we only want to care about `main.js` as the entry point of the JS app in both cases.\
@@ -41,8 +41,8 @@ Ideally, we want to achieve something like the following:
   {{ vite('main.js') }}
 ```
 
-To achieve this, we read a _manifest_ JSON file generated by Vite for each bundle.\
-In development, we simply serve the entrypoint (along with a supporting library),
+To achieve this, Peat reads the _manifest_ JSON file generated by Vite for each bundle.\
+In development, we simply serve the entrypoint (along with `@vite/client` supporting library),
 and the browser will load the rest of the files as ES modules.
 
 
@@ -84,7 +84,7 @@ as one of the build steps during the deployment/ci process.
 ## Example
 
 Assume JS sources are located in `<project>/js/src` and the public dir is `<project>/public`,
-`placeholder` may be replaced with any path.
+`my-js-widget` may be replaced with any path.
 
 Configure Vite like this:
 ```js
@@ -94,7 +94,7 @@ import {defineConfig} from "vite";
 export default defineConfig({
   build: {
     manifest: true,
-    outDir: '../public/placeholder', // output directly to the public dir
+    outDir: '../public/my-js-widget', // output directly to the public dir
     rollupOptions: {
       // overwrite default .html entrypoint
       input: 'src/main.js',
@@ -106,10 +106,10 @@ export default defineConfig({
 Register a service in your service container:
 ```php
 $bridgeService = new ViteBridge(
-    manifestFile: ROOT_DIR . '/public/placeholder/manifest.json',
+    manifestFile: ROOT_DIR . '/public/my-js-widget/manifest.json',
     cacheFile: TEMP_DIR . '/vite.php',   // can be any writable file
-    assetPath: 'placeholder',   // path from /public to the dir where the manifest is located
-    devServerUrl: 'http://localhost:3000',
+    assetPath: 'my-js-widget',   // path from /public to the dir where the manifest is located
+    devServerUrl: 'http://localhost:5173',
 );
 ```
 
@@ -134,11 +134,14 @@ $bridgeService->populateCache();
 
 Please note that this tool (Peat) is tightly coupled with the workings of Vite.
 
-Currently, Peat supports Vite version `^2`.
+Currently, Peat supports Vite versions `2` and above.
 
-| PHP       | Peat | Vite |
-|:----------|:-----|:-----|
-| 7.4 - 8.1 | 1.*  | 2.*  |
+| PHP       | Peat | Vite.js   |
+|:----------|:-----|:----------|
+| 7.4 - 8.* | 1.*  | 2.* - 4.* |
+
+> Unless there is a breaking change in the way Vite.js generates its `manifest.json` file,
+> Peat will remain compatible with future versions of Vite.js.
 
 
 ## Integrations