arnoson
diff --git a/‎.gitignore‎
Lines changed: 1 addition & 0 deletions b/‎.gitignore‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎README.md‎
Lines changed: 24 additions & 53 deletions b/‎README.md‎
Lines changed: 24 additions & 53 deletions
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules/
 .phpunit.result.cache
+.dev
 
 # Frontend
 /public/assets
 
@@ -18,7 +18,6 @@ Then inside your template files (or anywhere else) you can use the helper functi
 ```php
 <html>
   <head>
-    <?= vite()->client() ?>
     <?= vite()->css() ?>
   </head>
   <body>
@@ -37,35 +36,30 @@ If you want use the plugin without one of the starter kits, you can add it to yo
 composer require arnoson/kirby-vite
 ```
 
+```
+npm install vite-plugin-kirby
+```
+
 ### Folder structure
 
 Make sure you use a modern [public folder structure](https://getkirby.com/docs/guide/configuration#custom-folder-setup__public-folder-setup).
 
 ### Development VS Production modes
 
-In development, files are loaded from Vite dev server. In production, files are injected based on the `manifest.json` file generated by Vite.
+In development, files are loaded from Vite's dev server. In production, files are injected based on the `manifest.json` file generated by Vite.
 
-Kirby-Vite use a file named `.lock` in the `rootDir` (see [Options](#options) below) to dermine which mode to use:
+kirby-vite uses a file named `.dev` (created automatically by vite-plugin-kirby) to determine which mode to use:
 
 - when the file exists, it will run in development mode
 - when the file doesn’t exists, it will run in production mode
 
-For an example, have a look at the scripts in the `package.json`.
-
-Alternatively, you can use the `dev` option below to alter this behavior.
-
-### Static assets
-
-Ensure that Vite loads assets like images and fonts from its own server in development by setting `server.origin` to match Vite server host and port:
-
 ```js
+import kirby from 'vite-plugin-kirby'
+
 // vite.config.js
 export default {
   // ...
-  server: {
-    // ...
-    origin: 'http://localhost:3000',
-  }
+  plugins: [kirby()]
 }
 ```
 
@@ -76,29 +70,20 @@ See `vite.config.js` for a complete example.
 ```php
 'arnoson.kirby-vite' => [
   // The default entry that is used when calling `vite()->js()`
-  // Note: this has to match vite config's `build.rollupOptions.input`
+  // Note: this has to match Vite config's `build.rollupOptions.input`
   'entry' => 'index.js',
 
-  // The source directory for assets served by Vite
-  // Note: this has to match vite config's `root`
-  'rootDir' => '/src',
-
   // Wether or not to output legacy bundles automatically (see: Legacy build)
   'legacy' => false,
 
   // The output directory for the production assets (js, css, fonts, ...)
-  // Note: this has to match vite config's `base` and `build.outDir`
+  // Note: this has to match Vite config's `base` and `build.outDir`
   'outDir' => 'dist',
 
   // Wether or not to use modern es modules
   // Note: if you want to support older browsers you can still enabled es
   // modules but enabled the `legacy` option
-  'module' => true,
-
-  // Should be `true` in development to inject Vite client and load assets from
-  // Vite server; and `false` in production to load them from the manifest.json
-  // This will override the behavior based on the `.lock` file described above.
-  'dev' => true,
+  'module' => true
 ]
 ```
 
@@ -111,37 +96,36 @@ Therefore add the [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/ma
 'arnoson.kirby-vite.legacy' => true
 ```
 
-Now call kirby-vite's `js()` helper as usual and make sure to add the legacy polyfills:
+Now call kirby-vite's `js()` helper as usual.
 
 ```php
 <!-- your template -->
 <?= vite()->js() ?>
-<?= vite()->legacyPolyfills() ?>
 ```
 
 which will render:
 
 ```html
 <script
-  src="http://your-website.org/dist/assets/index.[hash].js"
-  type="module"
+  src="https://your-website.org/dist/assets/polyfills-legacy.[hash].js"
+  nomodule=""
 ></script>
 <script
-  src="http://your-website.org/dist/assets/index-legacy.[hash].js"
+  src="https://your-website.org/dist/assets/index-legacy.[hash].js"
   nomodule=""
 ></script>
 <script
-  src="http://your-website.org/dist/assets/polyfills-legacy.[hash].js"
-  nomodule=""
+  src="https://your-website.org/dist/assets/index.[hash].js"
+  type="module"
 ></script>
 ```
 
-If you want to have more control over where the legacy files are rendered, disable `arnoson.kirby-vite.legacy` and use kirby-vite's legacy helpers manually:
+If you want to have more control over where the legacy files are rendered, disable `arnoson.kirby-vite.legacy` and use Kirby-Vite's legacy helpers manually:
 
 ```php
-<?= vite()->js() ?>
-<?= vite()->legacyJs() ?>
 <?= vite()->legacyPolyfills() ?>
+<?= vite()->legacyJs() ?>
+<?= vite()->js() ?>
 ```
 
 ### Known issue
@@ -150,22 +134,9 @@ If you want to have more control over where the legacy files are rendered, disab
 
 ## Watch php files
 
-If you also want to live reload your site in development mode whenever you change something in kirby, install [vite-plugin-live-reload](https://github.com/arnoson/vite-plugin-live-reload). Then adjust your `vite.config.js`:
-
-```js
-// vite.config.js
-import liveReload from 'vite-plugin-live-reload'
-
-export default {
-  // ...
-  plugins: [
-    liveReload(
-      '../content/**/*',
-      '../public/site/(templates|snippets|controllers|models)/**/*.php'
-    ),
-  ],
-}
-```
+vite-plugin-kirby automatically uses vite-plugin-live-reload to watch the following paths:
+- `site/(templates|snippets|controllers|models|layouts)/**/*.php`
+- `content/**/*`
 
 ## Credits