Skip to content

Commit

Permalink
Readme updated
Browse files Browse the repository at this point in the history
Notable changes:
- mention support for Vite v3 and v4
- default port update for development server from 3000 to 5173
  • Loading branch information
dakujem committed Dec 28, 2022
1 parent b08f0f3 commit 08e49c0
Showing 1 changed file with 18 additions and 15 deletions.
33 changes: 18 additions & 15 deletions readme.md
Original file line number Diff line number Diff line change
@@ -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`
Expand All @@ -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_.

Expand All @@ -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.\
Expand All @@ -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.


Expand Down Expand Up @@ -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
Expand All @@ -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',
Expand All @@ -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',
);
```

Expand All @@ -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
Expand Down

0 comments on commit 08e49c0

Please sign in to comment.