diff --git a/docs/docs/index.md b/docs/docs/index.md index b5f9c2b..ef14812 100755 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -32,7 +32,7 @@ To install the plugin, follow these instructions. 3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Vite. -4. Install Vite. Vite's *[Getting Started Guide](https://vitejs.dev/guide/)* provides various installation options. +4. Install Vite. Vite’s *[Getting Started Guide](https://vitejs.dev/guide/)* provides various installation options. ## Vite Overview @@ -131,9 +131,9 @@ hosted on a CDN or such. ### Vite 5.0 or later -As of Vite 5.0 or later, there's been a [change to where the `manifest.json`](https://vitejs.dev/guide/migration#manifest-files-are-now-generated-in-vite-directory-by-default) is generated by default. +As of Vite 5.0 or later, there’s been a [change to where the `manifest.json`](https://vitejs.dev/guide/migration#manifest-files-are-now-generated-in-vite-directory-by-default) is generated by default. -It is now placed inside a `.vite/` directory by default. You can accomodate this in either of the following ways: +It is now placed inside a `.vite/` directory by default. You can accommodate this in either of the following ways: * Change the `manifest` setting in your `vite.config.js` file to `manifest.json` (it can not either be a `bool` or a file path `string`) * Change the `manifestPath` setting in your `config/vite.php` file to `'@webroot/dist/.vite/manifest.json'` @@ -232,7 +232,7 @@ the [module/nomodule](https://philipwalton.com/articles/deploying-es2015-code-in Your entry scripts are what you list in the `build.rollupOptions.input` section of the config. -Vite is typically used with frameworks which take care of the HMR via the dev server. However, in order to get your entry scripts to HMR you need to add this snippet to each entry script: +Vite is typically used with frameworks which take care of the HMR via the dev server. However, to get your entry scripts to HMR you need to add this snippet to each entry script: ```js // Accept HMR as per: https://vitejs.dev/guide/api-hmr.html @@ -243,9 +243,9 @@ if (import.meta.hot) { } ``` -If you don't do the above, you'll get a full page reload whenever you modify one of your entry scripts. +If you don’t do the above, you’ll get a full page reload whenever you modify one of your entry scripts. -Anything your scripts import will be automatically HMR'd by the dev server. +Anything your scripts import will be automatically HMR’d by the dev server. #### Live Reload of Twig Config @@ -410,7 +410,7 @@ web_environment: Then be sure to set `criticalUrl` to `http://localhost` as part of your rollup configuration. -Finally note that as of DDEV 1.19 you are able to specify Node (and Composer) versions directly via `/.ddev/config.yaml`. See more at https://ddev.readthedocs.io/en/stable/users/cli-usage/#nodejs-npm-nvm-and-yarn +Finally note that as of DDEV 1.19 you are able to specify Node.js (and Composer) versions directly via `/.ddev/config.yaml`. See more at https://ddev.readthedocs.io/en/stable/users/cli-usage/#nodejs-npm-nvm-and-yarn ### Vite-Processed Assets @@ -505,7 +505,7 @@ Vite automatically supports the direct linking to TypeScript (as in the above ex files formats via plugins. You just link directly to them, that’s it. ::: tip CSS is Asynchronous by default -By default, the Vite plugin will load your [CSS asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/). If you are **not** using Critical CSS, you'll want to change that to avoid Flash Of Unstyled Content (FOUC) by setting the setting the second argument to `false`: +By default, the Vite plugin will load your [CSS asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/). If you are **not** using Critical CSS, you’ll want to change that to avoid Flash Of Unstyled Content (FOUC) by setting the setting the second argument to `false`: ```twig {{ craft.vite.script("src/js/app.ts", false) }} ``` @@ -565,7 +565,7 @@ resource must match. **N.B.:** If you use a service such as [CloudFlare](https://www.cloudflare.com/) with **Auto Minify** enabled, this alters the payload that is being delivered dynamically, which will cause the SRI check to fail, and your files will not load. -The same is true for any modifications to the built JavaScript. External changes to the built files is exactly what SRI is designed to thwart. So you will need to either disable any options that dynamically alter your built files, or don't use SRI. +The same is true for any modifications to the built JavaScript. External changes to the built files is exactly what SRI is designed to thwart. So you will need to either disable any options that dynamically alter your built files, or don’t use SRI. ##### Script `onload` events @@ -726,7 +726,7 @@ export default ({command}) => ({ }); ``` -If you need to access assets that are in the `public/` directory from Twig, there is a second parameter you can pass to `craft.vite.asset` to inidicate that the asset is coming from the `public/` directory: +To access assets that are in the `public/` directory from Twig, there is a second parameter you can pass to `craft.vite.asset` to inidicate that the asset is coming from the `public/` directory: ```twig {{ craft.vite.asset("src/images/quote-open.svg", true) }} @@ -760,7 +760,7 @@ This assumes your `vite.config.js` looks something like this: ### The `.integrity()` function -The Vite plugin includes an `.integrity()` function that will return the `integrity` hash if you're using the [vite-plugin-manifest-sri](https://www.npmjs.com/package/vite-plugin-manifest-sri) plugin for [sub-resource integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) and you need the hash to build your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). +The Vite plugin includes an `.integrity()` function that will return the `integrity` hash if you’re using the [vite-plugin-manifest-sri](https://www.npmjs.com/package/vite-plugin-manifest-sri) plugin for [sub-resource integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) and you need the hash to build your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). You pass in a relative path to the entry, just as you do for JavaScript files in Vite. For example: @@ -844,13 +844,13 @@ If `null` is passed in as the first parameter, it’ll use the automatic templat ### The `.getCssInlineTags()` function -If you want to inline an existing CSS file by URL or path, you do it by path: +To inline an existing CSS file by URL or path, you do it by path: ```twig {{ craft.vite.getCssInlineTags("@webroot/path/to/css/file.css") }} ``` -or by URL (but keep in mind, this will generate an additional blocking XHR): +Or by URL (but keep in mind, this will generate an additional blocking XHR): ```twig {{ craft.vite.getCssInlineTags("@web/path/to/css/file.css") }}