Merge branch 'release/4.2.0'

Author: ravorona

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [4.2.0](https://github.com/ravorona/sage/compare/4.1.1...4.2.0) (2023-04-26)
+
+
+### Features
+
+* Enable/Disable hot module replacement automatically ([c926f03](https://github.com/ravorona/sage/commit/c926f036d7b74193287126dc328e9d57b0ccb7de))
+
 ### [4.1.1](https://github.com/ravorona/sage/compare/4.1.0...4.1.1) (2023-04-26)
 
 

README.md

@@ -74,7 +74,7 @@ themes/your-theme-name/   # → Root of your Sage based theme
 
 ### Build commands
 
-- `yarn dev` — Start dev server
+- `yarn dev` — Start dev server and hot module replacement
 - `yarn build` — Compile assets
 - `yarn lint` — Lint stylesheets & javascripts
 - `yarn lint:css` — Lint stylesheets
@@ -87,19 +87,20 @@ themes/your-theme-name/   # → Root of your Sage based theme
 Add the following variables in your project `.env`
 
 ```sh
-# If true hot reload is active.
-# If not specified or set to false, and if the `public/manifest.json` file is missing, HMR is automatically enabled.
-HMR_ENABLED=true
-
 # Endpoint where the bundler serve your assets
-HMR_ENTRYPOINT=http://example.com:3000
+HMR_ENTRYPOINT=http://localhost:5173
 ```
 
 #### Theme side
 
 For advanced dev server configuration, copy `.env.example` according
 to [Vite naming convention and loading order](https://vitejs.dev/guide/env-and-mode.html#env-files) and update variables
 
+#### FYI
+
+Running HMR Mode remove the `public/manifest.json` file, so do not forget to re-run the assets compilation
+with `yarn build` if needed.
+
 ## Documentation
 
 - [Sage documentation](https://roots.io/sage/docs/)

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "ravorona/sage",
-    "version": "4.1.1",
+    "version": "4.2.0",
     "description": "Wordpress theme based on Sage starter theme using Vite",
     "license": "MIT",
     "authors": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ravorona/sage",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "Wordpress theme based on Sage starter theme using Vite",
   "license": "MIT",
   "scripts": {

vite.config.ts

@@ -19,11 +19,14 @@
  *  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { unlink } from 'fs'
 import * as path from 'path'
 import copy from 'rollup-plugin-copy'
 import outputManifest, { KeyValueDecorator, OutputManifestParam } from 'rollup-plugin-output-manifest'
 import { ConfigEnv, defineConfig, loadEnv, UserConfigExport } from 'vite'
 
+const publicDir = 'public'
+const manifestFile = 'manifest.json'
 const assets = {
     base: 'resources',
     scripts: 'resources/scripts',
@@ -56,7 +59,7 @@ export default defineConfig(({ mode }: ConfigEnv) => {
         build: {
             sourcemap: 'inline',
             manifest: false,
-            outDir: 'public',
+            outDir: publicDir,
             assetsDir: '',
             rollupOptions: {
                 input: {
@@ -68,7 +71,7 @@ export default defineConfig(({ mode }: ConfigEnv) => {
                 },
                 plugins: [
                     outputManifest({
-                        fileName: 'manifest.json',
+                        fileName: manifestFile,
                         generate:
                             (keyValueDecorator: KeyValueDecorator, seed: object, opt: OutputManifestParam) => chunks =>
                                 chunks.reduce((manifest, { name, fileName }) => {
@@ -114,15 +117,15 @@ export default defineConfig(({ mode }: ConfigEnv) => {
                         targets: [
                             {
                                 src: path.resolve(__dirname, `${assets.base}/images/**/*`),
-                                dest: 'public/images'
+                                dest: `${publicDir}/images`
                             },
                             {
                                 src: path.resolve(__dirname, `${assets.base}/svg/**/*`),
-                                dest: 'public/svg'
+                                dest: `${publicDir}/svg`
                             },
                             {
                                 src: path.resolve(__dirname, `${assets.base}/fonts/**/*`),
-                                dest: 'public/fonts'
+                                dest: `${publicDir}/fonts`
                             }
                         ]
                     })
@@ -137,6 +140,10 @@ export default defineConfig(({ mode }: ConfigEnv) => {
         const protocol = 'http'
         const https = !!(devServerConfig.HMR_HTTPS_KEY && devServerConfig.HMR_HTTPS_CERT)
 
+        unlink(`${publicDir}/${manifestFile}`, error =>
+            console.log(`🧹 Wipe ${manifestFile} :`, error ? `No ${manifestFile} in the public directory` : '✅')
+        )
+
         devServerConfig.HMR_HOST && (host = devServerConfig.HMR_HOST)
         devServerConfig.HMR_PORT && (port = parseInt(devServerConfig.HMR_PORT))