Merge branch 'release/5.0.1' into v5

Author: khalwat

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file.
 
+## 5.0.1 - 2024.08.13
+### Added
+* Added a `craft.vite.integrity()` method that will extract the integrity hash (for building a Content Security Policy)
+* Added an `includeScriptOnloadHandler` config setting that allows you to disable the adding of an `onload` handler on the `<script>` tags (useful when implementing a Content Security Policy)
+
+### Changed
+* Filter out empty attributes so they don't render on the `<script>` tags
+
+### Fixed
+* Use `strrpos` instead of `strpos` when attempting to extract a file name without the hash ([#28](https://github.com/nystudio107/craft-plugin-vite/pull/28))
+
 ## 5.0.0 - 2024.04.16
 ### Added
 * Stable release for Craft CMS 5

Makefile

@@ -0,0 +1,24 @@
+MAJOR_VERSION?=5
+PLUGINDEV_PROJECT_DIR?=/Users/andrew/webdev/sites/plugindev/cms_v${MAJOR_VERSION}/
+VENDOR?=nystudio107
+PROJECT_PATH?=${VENDOR}/$(shell basename $(CURDIR))
+
+.PHONY: dev release
+
+# Start up the buildchain dev server
+dev:
+# Start up the docs dev server
+docs:
+	${MAKE} -C docs/ dev
+# Run code quality tools, tests, and build the buildchain & docs in preparation for a release
+release: --code-quality --code-tests --buildchain-clean-build --docs-clean-build
+# The internal targets used by the dev & release targets
+--buildchain-clean-build:
+--code-quality:
+	${MAKE} -C ${PLUGINDEV_PROJECT_DIR} -- ecs check vendor/${PROJECT_PATH}/src --fix
+	${MAKE} -C ${PLUGINDEV_PROJECT_DIR} -- phpstan analyze -c vendor/${PROJECT_PATH}/phpstan.neon
+--code-tests:
+--docs-clean-build:
+	${MAKE} -C docs/ clean
+	${MAKE} -C docs/ image-build
+	${MAKE} -C docs/ fix

composer.json

@@ -2,7 +2,7 @@
   "name": "nystudio107/craft-vite",
   "description": "Allows the use of the Vite.js next generation frontend tooling with Craft CMS",
   "type": "craft-plugin",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "keywords": [
     "craft",
     "cms",
@@ -25,7 +25,7 @@
   "require": {
     "php": "^8.2",
     "craftcms/cms": "^5.0.0",
-    "nystudio107/craft-plugin-vite": "^5.0.0"
+    "nystudio107/craft-plugin-vite": "^5.0.2"
   },
   "require-dev": {
     "craftcms/cloud": "^2.0.0",

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
 
@@ -114,6 +114,7 @@ These are completely optional settings that you probably won’t need to change:
 * **`includeModulePreloadShim`** - whether or not
   the [shim for `modulepreload-polyfill`](https://vitejs.dev/guide/features.html#preload-directives-generation) should
   be included to polyfill `<link rel="modulepreload">`
+* **`includeScriptOnloadHandler`** - allows you to disable the adding of an `onload` handler on the `<script>` tags (useful when implementing a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP))
 
 If you’re using the [rollup-plugin-critical](https://github.com/nystudio107/rollup-plugin-critical) to
 generate [critical CSS](https://nystudio107.com/blog/implementing-critical-css), use these settings:
@@ -130,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'`
@@ -231,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
@@ -242,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
 
@@ -409,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
 
@@ -504,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) }}
 ```
@@ -564,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
 
@@ -725,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) }}
@@ -757,6 +758,26 @@ 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).
+
+You may need the hash to build your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), if you're using a [hash with `script-src`](https://content-security-policy.com/hash/) to do so..
+
+You pass in a relative path to the entry, just as you do for JavaScript files in Vite. For example:
+
+```twig
+    {{ craft.vite.integrity("src/js/app.ts") }}
+```
+
+This will return the integrity hash from the manifest:
+
+```
+sha384-OFM4tseEj4P0uGf60m1BYV0vqDU2Ljj2ugL5zZBvHlsEpYIoEbTPfQuRsz9lgr75
+```
+
+If there is no `integrity` hash, or the manifest entry is not found, it will return an empty string.
+
 ### The `.inline()` function
 
 The Vite plugin also includes a `.inline()` function that inlines the contents of a local file (via path) or remote
@@ -825,13 +846,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") }}