feat(sandbox): validating manifest options (#394)

* feat(sandbox): validating manifest, specifically option object and showing steps to correct

* feat(sandbox): move validation to a better place -> manifest.ts

* feat(sandbox): reset sandbox file

* feat(sandbox): remove empty string check and mark todo in a duplicate code

* feat(sandbox): add red color to error message

* feat(helper): add logic also to manifest-helper

* feat(helper): catch expected empty cases

* feat(helper): fix tests

* feat(helper): fix and add tests

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

* feat(helper): add concurrent building process for manifest helper

* feat(helper): remove comment and adjust check for when manifest is not defined to remove it from query params

* feat(helper): switch dependency to the package

* feat(helper): add check for empty options

* 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/cli/package.json

@@ -36,6 +36,7 @@
     "walkdir": "^0.4.1"
   },
   "devDependencies": {
+    "@storyblok/manifest-helper": "workspace:*",
     "@types/execa": "2.0.0",
     "@types/fs-extra": "11.0.4",
     "@types/prompts": "2.4.9",

packages/cli/src/commands/deploy/helper.ts

@@ -14,13 +14,13 @@ import {
   StoryClientType,
   StoryblokClient,
 } from '../../storyblok/storyblok-client'
-import { getErrorMessage } from '@storyblok/manifest-helper/src/utils'
 import {
   load,
   Manifest,
   MANIFEST_FILE_NAME,
   ManifestOption,
-} from '@storyblok/manifest-helper/src/manifest'
+  getErrorMessage,
+} from '@storyblok/manifest-helper'
 
 const packageNameMessage =
   'How would you like to call the deployed field-plugin?\n  (Lowercase alphanumeric and dash are allowed.)'
@@ -256,7 +256,7 @@ export const confirmOptionsUpdate = async (
 }
 
 export const printManifestOptions = (options: ManifestOption[] | undefined) => {
-  if (options?.length === 0) {
+  if (options?.length === 0 || options === undefined) {
     return
   }
 
@@ -351,10 +351,8 @@ export const loadManifest = (): Manifest | undefined => {
 
     return load()
   } catch (err) {
-    console.log(bold(red('[ERROR]')), `Error while loading the manifest file`)
     console.log(`path: ${MANIFEST_FILE_NAME}`)
-    console.log(`error: ${getErrorMessage(err)}`)
-
+    console.log(red(`${bold('[ERROR]:')} ${getErrorMessage(err)}`))
     return undefined
   }
 }

packages/cli/src/storyblok/storyblok-client.ts

@@ -1,6 +1,6 @@
 import { red } from 'kleur/colors'
 import type { Response } from 'node-fetch'
-import { ManifestOption } from '@storyblok/manifest-helper/src/manifest'
+import { ManifestOption } from '@storyblok/manifest-helper'
 
 export type FieldType = {
   id: number

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

@@ -3,10 +3,12 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "devDependencies": {
-    "typescript": "^5.3.3"
-  },
   "dependencies": {
+    "@storyblok/manifest-helper": "workspace:*",
     "kleur": "4.1.5"
+  },
+  "devDependencies": {
+    "@storyblok/manifest-helper": "workspace:*",
+    "typescript": "^5.3.3"
   }
 }

packages/field-plugin/helpers/vite/src/manifest.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
+}

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

@@ -1,22 +1,26 @@
 import * as querystring from 'querystring'
-import { bold } from './utils/text'
+import { red, bold } from './utils/text'
 import { arrows } from './utils/arrows'
-import { load, manifestExists, MANIFEST_FILE_NAME } from './manifest'
-import type { Manifest } from './manifest'
+import {
+  load,
+  manifestExists,
+  MANIFEST_FILE_NAME,
+  Manifest,
+} from '@storyblok/manifest-helper'
 
 export const SANDBOX_BASE_URL = `https://plugin-sandbox.storyblok.com/field-plugin`
 
 export type SandboxQueryParams = {
   url: string
-  manifest: Manifest | null
+  manifest: Manifest | undefined
 }
 
 export const buildQueryString = (params: SandboxQueryParams) => {
   const queryParams: querystring.ParsedUrlQueryInput = {
     url: params.url,
   }
 
-  if (params.manifest !== null) {
+  if (params.manifest !== undefined) {
     queryParams.manifest = JSON.stringify(params.manifest)
   }
 
@@ -36,14 +40,12 @@ export const generateSandboxUrl = (fieldPluginUrl: string) => {
   return `${SANDBOX_BASE_URL}?${queryString}`
 }
 
-const loadManifest = (): Manifest | null => {
-  if (!manifestExists()) return null
-
+const loadManifest = (): Manifest | undefined => {
   try {
     return load()
   } catch (err) {
     displayManifestErrorLoading(err as Error)
-    return null
+    return undefined
   }
 }
 
@@ -58,4 +60,4 @@ const displayManifestChecking = () => {
 }
 
 const displayManifestErrorLoading = (err: Error) =>
-  console.log(`${arrows.red} ${bold(`${err.message}`)}`)
+  console.log(`${arrows.red} ${red(`${err.message}`)}`)

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

@@ -40,8 +40,9 @@
     "check:types": "tsc --noEmit",
     "dev": "vite build --watch",
     "test": "jest",
-    "build": "unbuild && yarn build:helpers",
-    "build:helpers": "cd helpers && unbuild"
+    "build": "yarn build:manifest-helper && unbuild && yarn build:helpers",
+    "build:helpers": "cd helpers && unbuild",
+    "build:manifest-helper": "cd ../manifest-helper && yarn build"
   },
   "devDependencies": {
     "@types/core-js": "2.5.8",

packages/field-plugin/package.json

@@ -0,0 +1,10 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: ['./src/index.ts'],
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+  },
+  failOnWarn: false,
+})

packages/manifest-helper/build.config.ts

@@ -2,12 +2,22 @@
   "name": "@storyblok/manifest-helper",
   "version": "0.0.1",
   "type": "module",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
   "license": "MIT",
   "scripts": {
     "test": "vitest run",
-    "watch": "vitest watch"
+    "watch": "vitest watch",
+    "build": "unbuild"
   },
   "devDependencies": {
+    "unbuild": "2.0.0",
     "vite": "^5.1.3",
     "vitest": "1.3.0"
   }