From 6162c1f8fb53782bb515e5018399d7351007eab2 Mon Sep 17 00:00:00 2001 From: Oh My Felix Date: Mon, 6 Jul 2026 15:36:14 +0000 Subject: [PATCH 1/2] Docs: move documentation to README Co-authored-by: Felix --- .docs/README.md | 153 -------------------------------------------- README.md | 164 +++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 155 insertions(+), 162 deletions(-) delete mode 100644 .docs/README.md diff --git a/.docs/README.md b/.docs/README.md deleted file mode 100644 index 29cd133..0000000 --- a/.docs/README.md +++ /dev/null @@ -1,153 +0,0 @@ -# Vite - -## Contents - -- [Setup](#setup) -- [Usage](#usage) -- [Config](#config) -- [Tracy](#tracy) -- [Vite](#vite) - -## Setup - -```bash -composer require contributte/vite -``` - -## Usage - -Register the extension in your config file, and optionally configure it. - -```neon -extensions: - vite: Contributte\Vite\Nette\Extension - -vite: - manifestFile: %wwwDir%/manifest.json -``` - - -Now you can use the `{vite}` filter in your templates. It automatically transforms assets paths located in manifest generated by Vite: - -```latte - - -``` - -Other static assets as `.png` or `.jpg` etc. can be also used with this filter. But you have to add `import.meta.glob('/src/assets/**')` somewhere in your javascript file. - -```latte - -``` - -## Config - -Here are the options you can change in the neon config. - -### server -- **Type:** `string` -- **Default:** `http://localhost:5173` - -Url under which your Vite server is running. You can change this if you use https or different port in Vite. - -### cookie -- **Type:** `string` -- **Default:** `contributte/vite` - -Cookie name for the Tracy integration. You might wan to change this if you have more than one nette application on the same domain. - -### debugMode -- **Type:** `bool` -- **Default:** `$this->getContainerBuilder()->parameters['debugMode'] ?? false` - -If set to false, then the vite assets are always loaded via manifest and tracy integration is disabled. - -### manifestFile -- **Type:** `string` - -Path to your manifest file. By default, it's auto-resolved from `wwwDir`. - -### filterName -- **Type:** `string` -- **Default:** `vite` - -Name for the latte filter, you can change this for example to `asset`, like so the assets are written like this `{='/src/styles/main.css'|asset}`. - -### templateProperty -- **Type:** `string` -- **Default:** `vite` - -Name that is used in templates as variable for the service. - -### wwwDir -- **Type:** `string` -- **Default:** `getcwd()` - -Path to your public `www` dir. By default it's where `index.php` is executed. - -### basePath -- **Type:** `string` - -## Tracy -You can enable and disable vite dev server via Tracy with Vite button. If enabled, then all assets with `{vite}` filter are loaded from the local vite dev server for fast development without build. -To use this, you have to run vite with `vite` command first. By default, Vite runs on `http://localhost:5173`, you can change this url in neon config or vite config. -

-![Tracy](tracy.png) - -You have to also include `@vite/client` script in your layout if you want to benefit from all the features of vite, like HMR and auto-reload. - -```latte -{if $vite->isEnabled()} - -{/if} -``` - -## Vite -Learn more how to configure Vite [here](https://vitejs.dev/config/). Basic config in your project should look like this. - -```javascript -// vite.config.js - -const reload = { - name: 'reload', - handleHotUpdate({ file, server }) { - if (!file.includes('temp') && file.endsWith(".php") || file.endsWith(".latte")) { - server.ws.send({ - type: 'full-reload', - path: '*', - }); - } - } -} - -export default { - plugins: [reload], // include this little plugin if you want to enable browser auto-reload upon chaning .php and .latte files, or not up to you - server: { - watch: { - usePolling: true // should be on on Windows devices - }, - hmr: { - host: 'localhost' // use if you want to use vite dev server on remote server - } - }, - build: { - manifest: true, // generates manifest files in /www - outDir: "www", // output dir for build - emptyOutDir: false, // must be false, we dont want to delete any files in /www dir - rollupOptions: { - input: FastGlob.sync(['./src/scripts/*.{js,ts}', './src/styles/*.css']).map(entry => resolve(process.cwd(), entry)) - // location for your asset files, can be glob for script (js, ts, etc.) and styles (css, scss, etc.) files - // for use of sass or less you have to install them first (otherwise only postcss is used), eg. npm i sass --save-dev - } - } -} -``` - -### Vite basics - -* `vite` - to run vite dev server -* `vite build` - to build your assets for production - -That's it, pretty simple right? - -You can learn more about Vite on the official website at [vitejs.dev](https://vitejs.dev/) diff --git a/README.md b/README.md index e4e4db4..5480a58 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,18 @@ Website 🚀 contributte.org | Contact 👨🏻‍💻 f3l1x.io | Twitter 🐦 @contributte

-## Usage +# Vite + +Vite integration for Nette Framework. + +## Version + +| State | Version | Branch | Nette | PHP | +|--------|---------|----------|--------|---------| +| dev | `^0.3` | `master` | `3.2+` | `>=8.2` | +| stable | `^0.2` | `master` | `3.2+` | `>=8.1` | + +## Installation To install the latest version of `contributte/vite` use [Composer](https://getcomposer.org). @@ -26,23 +37,158 @@ To install the latest version of `contributte/vite` use [Composer](https://getco composer require contributte/vite ``` -## Documentation +## Usage -For details on how to use this package, check out our [documentation](.docs). +Register the extension in your config file, and optionally configure it. +```neon +extensions: + vite: Contributte\Vite\Nette\Extension -## Version +vite: + manifestFile: %wwwDir%/manifest.json +``` -| State | Version | Branch | Nette | PHP | -|--------|---------|----------|--------|---------| -| dev | `^0.3` | `master` | `3.2+` | `>=8.1` | -| stable | `^0.2` | `master` | `3.2+` | `>=8.1` | +Now you can use the `{vite}` filter in your templates. It automatically transforms asset paths located in the manifest generated by Vite: + +```latte + + +``` + +Other static assets as `.png` or `.jpg` etc. can be also used with this filter. But you have to add `import.meta.glob('/src/assets/**')` somewhere in your javascript file. + +```latte + +``` + +## Configuration + +Here are the options you can change in the NEON config. + +### server + +- **Type:** `string` +- **Default:** `http://localhost:5173` + +URL under which your Vite server is running. You can change this if you use HTTPS or different port in Vite. + +### cookie + +- **Type:** `string` +- **Default:** `contributte/vite` + +Cookie name for the Tracy integration. You might want to change this if you have more than one Nette application on the same domain. + +### debugMode + +- **Type:** `bool` +- **Default:** `$this->getContainerBuilder()->parameters['debugMode'] ?? false` + +If set to false, the Vite assets are always loaded via manifest and Tracy integration is disabled. + +### manifestFile + +- **Type:** `string` + +Path to your manifest file. By default, it's auto-resolved from `wwwDir`. + +### filterName + +- **Type:** `string` +- **Default:** `vite` + +Name for the Latte filter. You can change this, for example, to `asset`, so assets are written like this: `{='/src/styles/main.css'|asset}`. + +### templateProperty + +- **Type:** `string` +- **Default:** `vite` + +Name that is used in templates as variable for the service. + +### wwwDir + +- **Type:** `string` +- **Default:** `getcwd()` + +Path to your public `www` dir. By default it's where `index.php` is executed. + +### basePath + +- **Type:** `string` + +## Tracy + +You can enable and disable Vite dev server via Tracy with Vite button. If enabled, all assets with `{vite}` filter are loaded from the local Vite dev server for fast development without build. +To use this, you have to run Vite with `vite` command first. By default, Vite runs on `http://localhost:5173`; you can change this URL in NEON config or Vite config. + +![Tracy](.docs/tracy.png) + +You have to also include `@vite/client` script in your layout if you want to benefit from all the features of Vite, like HMR and auto-reload. + +```latte +{if $vite->isEnabled()} + +{/if} +``` + +## Vite + +Learn more how to configure Vite [here](https://vitejs.dev/config/). Basic config in your project should look like this. + +```javascript +// vite.config.js + +const reload = { + name: 'reload', + handleHotUpdate({ file, server }) { + if (!file.includes('temp') && file.endsWith('.php') || file.endsWith('.latte')) { + server.ws.send({ + type: 'full-reload', + path: '*', + }); + } + } +} + +export default { + plugins: [reload], // include this little plugin if you want to enable browser auto-reload upon changing .php and .latte files, or not up to you + server: { + watch: { + usePolling: true // should be on on Windows devices + }, + hmr: { + host: 'localhost' // use if you want to use vite dev server on remote server + } + }, + build: { + manifest: true, // generates manifest files in /www + outDir: 'www', // output dir for build + emptyOutDir: false, // must be false, we dont want to delete any files in /www dir + rollupOptions: { + input: FastGlob.sync(['./src/scripts/*.{js,ts}', './src/styles/*.css']).map(entry => resolve(process.cwd(), entry)) + // location for your asset files, can be glob for script (js, ts, etc.) and styles (css, scss, etc.) files + // for use of sass or less you have to install them first (otherwise only postcss is used), eg. npm i sass --save-dev + } + } +} +``` + +### Vite basics + +- `vite` - to run Vite dev server +- `vite build` - to build your assets for production + +That's it, pretty simple right? + +You can learn more about Vite on the official website at [vitejs.dev](https://vitejs.dev/). ## Development See [how to contribute](https://contributte.org/contributing.html) to this package. -This package is currently maintaining by these authors. +This package is currently maintained by these authors. From 7398c7018e6e90fdbec7fdb997b3c2a7a1831b46 Mon Sep 17 00:00:00 2001 From: Oh My Felix Date: Tue, 7 Jul 2026 17:04:16 +0000 Subject: [PATCH 2/2] Docs: polish README migration --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 5480a58..9794ec5 100644 --- a/README.md +++ b/README.md @@ -18,11 +18,9 @@ Website 🚀 contributte.org | Contact 👨🏻‍💻 f3l1x.io | Twitter 🐦 @contributte

-# Vite - Vite integration for Nette Framework. -## Version +## Versions | State | Version | Branch | Nette | PHP | |--------|---------|----------|--------|---------| @@ -180,7 +178,7 @@ export default { - `vite` - to run Vite dev server - `vite build` - to build your assets for production -That's it, pretty simple right? +That's the basic setup. You can learn more about Vite on the official website at [vitejs.dev](https://vitejs.dev/).