Docs: move documentation to README

README.md

@@ -18,31 +18,175 @@
 Website 🚀 <a href="https://contributte.org">contributte.org</a> | Contact 👨🏻‍💻 <a href="https://f3l1x.io">f3l1x.io</a> | Twitter 🐦 <a href="https://twitter.com/contributte">@contributte</a>
 </p>
 
-## Usage
+Vite integration for Nette Framework.
+
+## Versions
+
+| 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).
 
 ```bash
 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
+<link rel="stylesheet" href="{='/src/styles/main.css'|vite}">
+<script src="{='/src/scripts/main.js'|vite}" type="module"></script>
+```
+
+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
+<img src="{='/src/assets/logo.png'|vite}">
+```
+
+## 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()}
+    <script type="module" src="{='@vite/client'|vite}"></script>
+{/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 the basic setup.
+
+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.
 
 <a href="https://github.com/lubomirblazekcz">
   <img width="80" height="80" src="https://avatars.githubusercontent.com/u/6872956?v=4">