Merge branch 'release/4.0.9' into v4

.github/workflows/code-analysis.yaml

@@ -23,12 +23,20 @@ jobs:
     name: ${{ matrix.actions.name }}
     runs-on: ubuntu-latest
     steps:
-      -   uses: actions/checkout@v4
-      # see https://github.com/shivammathur/setup-php
-      -   uses: shivammathur/setup-php@v2
-          with:
-            php-version: 8.0
-            coverage: none
-      # composer install cache - https://github.com/ramsey/composer-install
-      -   uses: "ramsey/composer-install@v2"
-      -   run: ${{ matrix.actions.run }}
+      - uses: actions/checkout@v4
+      - name: Cache Composer dependencies
+        uses: actions/cache@v4
+        with:
+          path: /tmp/composer-cache
+          key: ${{ runner.os }}-${{ hashFiles('**/composer.lock') }}
+      - name: Setup PHP
+        id: setup-php
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: 8.2
+          extensions: 'ctype,curl,dom,iconv,imagick,intl,json,mbstring,openssl,pcre,pdo,reflection,spl,zip'
+          ini-values: post_max_size=256M, max_execution_time=180, memory_limit=512M
+          tools: composer:v2
+      - name: Install Composer dependencies
+        run: composer install --no-interaction --no-ansi --no-progress
+      - run: ${{ matrix.actions.run }}

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file.
 
+## 4.0.9 - 2024.03.02
+### Added
+* Add documentation for Craft Cloud usage with Vite ([#83](https://github.com/nystudio107/craft-vite/pull/83))
+* Add support for clearing Vite caches in response to Craft Cloud's `UpController::EVENT_AFTER_UP` event ([#83](https://github.com/nystudio107/craft-vite/pull/83))
+
+### Fixed
+* Fixed an issue where the wrong CSS hash would be returned if you were using Vite 3 or earlier ([#80](https://github.com/nystudio107/craft-vite/issues/80))
+* Fixed an issue where `craft.vite.entry()` would fail if you were using Vite 5 or later, due to the `ManifestHelper::fileNameWithoutHash()` function not working correctly ([#24](https://github.com/nystudio107/craft-plugin-vite/issues/24))
+
 ## 4.0.8 - 2024.01.30
 ### Added
 * If the `devServer` is running, the `ViteService::fetch()` method will try to use the `devServerInternal` URL first, falling back on the `devServerPublic` so that `craft.vite.inline()` can pull from the `devServer` if it is running ([#22](https://github.com/nystudio107/craft-plugin-vite/issues/22))

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": "4.0.8",
+  "version": "4.0.9",
   "keywords": [
     "craft",
     "cms",
@@ -24,15 +24,16 @@
   ],
   "require": {
     "craftcms/cms": "^4.0.0",
-    "nystudio107/craft-plugin-vite": "^4.0.9"
+    "nystudio107/craft-plugin-vite": "^4.0.10"
   },
   "require-dev": {
+    "craftcms/cloud": "^1.41.0",
     "craftcms/ecs": "dev-main",
     "craftcms/phpstan": "dev-main",
     "craftcms/rector": "dev-main"
   },
   "scripts": {
-    "phpstan": "vendor/bin/phpstan --ansi --memory-limit=1G",
+    "phpstan": "phpstan --ansi --memory-limit=1G",
     "check-cs": "ecs check --ansi",
     "fix-cs": "ecs check --fix --ansi"
   },

docs/docs/index.md

@@ -359,8 +359,8 @@ services:
     expose:
       - '3000'
     environment:
-      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,3001:3000
-      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3000:3000
+      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILPIT_PORT}:8025,3001:3000
+      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILPIT_HTTPS_PORT}:8025,3000:3000
 ```
 
 In your `vite.config.js`, the `server.host` should to be set to `0.0.0.0`, and `server.port` set to `3000`:
@@ -501,8 +501,16 @@ JavaScript file via Twig in a `<script>` tag, you instead do:
     {{ craft.vite.script("src/js/app.ts") }}
 ```
 
-Note that Vite automatically also supports the direct linking to TypeScript (as in the above example), JSX, and other
-files via plugins. You just link directly to them, that’s it.
+Vite automatically supports the direct linking to TypeScript (as in the above example), JavaScript, JSX, and other
+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`:
+```twig
+    {{ craft.vite.script("src/js/app.ts", false) }}
+```
+See the **[Other Options](#other-options)** section below for details
+:::
 
 ##### Development
 
@@ -586,16 +594,7 @@ import '/src/css/app.pcss';
 The Vite plugin will take care of automatically generating the `<link rel="stylesheet">` tag for you in production.
 
 By default, it loads the [CSS asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/), but you can
-configure this. See the **Other Options** section.
-
-#### Polyfills
-
-To work properly, you must also import the [Vite Polyfill](https://vitejs.dev/config/#build-polyfilldynamicimport) in
-your `build.input` JavaScript file entries listed in the `vite.config.js`, for example:
-
-```js
-import "vite/dynamic-import-polyfill";
-```
+configure this. See the **[Other Options](#other-options)** section.
 
 #### Legacy
 
@@ -911,6 +910,53 @@ So for example:
     ) }}
 ```
 
+## Craft Cloud
+
+During a [build](https://craftcms.com/knowledge-base/cloud-builds), Craft Cloud deploys static assets to a CDN, so you’ll need to configure the plugin to use the appropriate URLs:
+
+```php
+<?php
+// config/vite.php
+
+use craft\cloud\Helper as CloudHelper;
+
+return [
+    'manifestPath' => CloudHelper::artifactUrl('dist/.vite/manifest.json'),
+    'serverPublic' => CloudHelper::artifactUrl('dist/'),
+];
+```
+
+This helper function returns a CDN URL that includes your project and environment identifiers, like this:
+
+```
+https://cdn.craft.com/{project-uuid}/builds/{environment-uuid}/artifacts/dist/
+```
+
+Outside of Cloud, this behaves as though it were prepended with `@web`.
+
+If you’d prefer to use an on-disk `manifestPath` when working locally (instead of a URL), the `CloudHelper::isCraftCloud()` function lets you switch based on the environment:
+
+```php
+<?php
+// config/vite.php
+
+use craft\cloud\Helper as CloudHelper;
+
+return [
+    'manifestPath' => CloudHelper::isCraftCloud() ? CloudHelper::artifactUrl('dist/.vite/manifest.json') : '@webroot/dist/.vite/manifest.json',
+    'serverPublic' => CloudHelper::artifactUrl('dist/'),
+];
+```
+
+Additionally, your Vite config should have [public `base`](https://vitejs.dev/guide/build.html#public-base-path) set to use the same CDN URL. In Craft Cloud’s build pipeline, this is exposed as an [`CRAFT_CLOUD_ARTIFACT_BASE_URL` environment variable](https://craftcms.com/knowledge-base/cloud-builds#build-command):
+
+```javascript
+// vite.config.js
+export default ({ command }) => ({
+  base: command === 'serve' ? '' : `${process.env.CRAFT_CLOUD_ARTIFACT_BASE_URL || ''}/dist/`,
+})
+```
+
 ## Vite Roadmap
 
 Some things to do, and ideas for potential features: