feat(helper): watching config files for changes (#396)

* feat(helper): make manifest-helper to a package and consume it inside vite helper

* feat(helper): watching config files for changes

* feat(helper): splitting printing functions

* feat(helper): add check file name and directory level

* feat(helper): update consistent names

* feat(helper): remove comment

Author: BibiSebi

packages/field-plugin/helpers/vite/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "dependencies": {
+    "@storyblok/manifest-helper": "workspace:*",
     "kleur": "4.1.5"
   },
   "devDependencies": {

packages/field-plugin/helpers/vite/src/plugins.ts

@@ -1,7 +1,21 @@
-import type { PluginOption } from 'vite'
+import type { PluginOption, ViteDevServer } from 'vite'
 import { generateSandboxUrl } from './sandbox'
 import { bold, green } from './utils/text'
 import { arrows } from './utils/arrows'
+import { MANIFEST_FILE_NAME } from '@storyblok/manifest-helper'
+import path from 'path'
+
+export function watchConfigFile(): PluginOption {
+  return {
+    name: 'storyblok-field-plugin-watch-config-file',
+    handleHotUpdate({ file, server }) {
+      // NOTE: This condition checks if the file is on the same directory level as where the command has been executed and checks the file name
+      if (isFileInSameLevel(file) && getFileName(file) === MANIFEST_FILE_NAME) {
+        printSandboxUrl(server)
+      }
+    },
+  }
+}
 
 export function printProd(): PluginOption {
   return {
@@ -28,13 +42,21 @@ export function printDev(): PluginOption {
     configureServer(server) {
       // Overrides the message that Vite prints out when the server is started. To reduce complexity, it does not include color
       server.printUrls = () => {
-        if (!server.resolvedUrls) {
-          return
-        }
-        const localUrl = server.resolvedUrls.local[0]
-        const networkUrl = server.resolvedUrls.network[0]
+        printServerUrls(server)
+        printSandboxUrl(server)
+      }
+    },
+  }
+}
+
+function printServerUrls(server: ViteDevServer) {
+  if (!server.resolvedUrls) {
+    return
+  }
+  const localUrl = server.resolvedUrls.local[0]
+  const networkUrl = server.resolvedUrls.network[0]
 
-        console.log(`
+  console.log(`
     ${arrows.green}  ${bold(
       'Partner Portal',
     )}:  https://app.storyblok.com/#/partner/fields
@@ -44,14 +66,29 @@ export function printDev(): PluginOption {
      
     ${arrows.green}  ${bold('Local')}:    ${localUrl}
     ${arrows.green}  ${bold('Network')}:  ${networkUrl}
-        
-  See the plugin in action on 
-     
-    ${arrows.green}  ${bold('Sandbox')}: ${generateSandboxUrl(localUrl)}
           `)
-      }
-    },
+}
+
+function printSandboxUrl(server: ViteDevServer) {
+  if (!server.resolvedUrls) {
+    return
   }
+  const localUrl = server.resolvedUrls.local[0]
+
+  console.log(`  See the plugin in action on 
+     
+    ${arrows.green}  ${bold('Sandbox')}: ${generateSandboxUrl(localUrl)}`)
 }
 
-export const plugins = [printProd(), printDev()]
+export const plugins = [printProd(), printDev(), watchConfigFile()]
+
+function getFileName(file: string) {
+  return path.basename(file)
+}
+
+function isFileInSameLevel(file: string): boolean {
+  const currentDir = process.cwd()
+  const filePath = path.resolve(currentDir, file)
+  const fileDir = path.dirname(filePath)
+  return currentDir === fileDir
+}