diff --git a/packages/field-plugin/helpers/vite/package.json b/packages/field-plugin/helpers/vite/package.json index 2d094992..76b1cfd4 100644 --- a/packages/field-plugin/helpers/vite/package.json +++ b/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": { diff --git a/packages/field-plugin/helpers/vite/src/plugins.ts b/packages/field-plugin/helpers/vite/src/plugins.ts index a31cc85c..c398fcac 100644 --- a/packages/field-plugin/helpers/vite/src/plugins.ts +++ b/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 +}