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

Author: BibiSebi

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

@@ -1,8 +1,9 @@
 import * as querystring from 'querystring'
-import { bold } from './utils/text'
+import { bold, red } from './utils/text'
 import { arrows } from './utils/arrows'
 import { load, manifestExists, MANIFEST_FILE_NAME } from './manifest'
 import type { Manifest } from './manifest'
+import { isFieldPluginOption } from '@storyblok/field-plugin'
 
 export const SANDBOX_BASE_URL = `https://plugin-sandbox.storyblok.com/field-plugin`
 
@@ -11,16 +12,61 @@ export type SandboxQueryParams = {
   manifest: Manifest | null
 }
 
+const areOptionsValid = (options: unknown): boolean => {
+  if (!Array.isArray(options) || options.length === 0) {
+    displayManifestErrorLoading(
+      new Error('ERROR: Manifest options must be an array of objects'),
+    )
+    return false
+  }
+
+  const incorrectValues: string[] = []
+
+  for (const option of options) {
+    if (!isFieldPluginOption(option)) {
+      incorrectValues.push(JSON.stringify(option))
+    }
+  }
+
+  if (incorrectValues.length > 0) {
+    displayManifestErrorLoading(
+      new Error(
+        'ERROR: Each option must be an object with string properties "name" and "value". The following values need to be corrected: \n ' +
+          incorrectValues.join(',\n '),
+      ),
+    )
+    return false
+  }
+
+  return true
+}
+
+const isManifestValid = (manifest: unknown): boolean => {
+  if (typeof manifest !== 'object' || manifest === null) {
+    return false
+  }
+
+  if ('options' in manifest && manifest.options !== null) {
+    return areOptionsValid(manifest.options)
+  }
+
+  return true
+}
+
 export const buildQueryString = (params: SandboxQueryParams) => {
   const queryParams: querystring.ParsedUrlQueryInput = {
     url: params.url,
   }
 
-  if (params.manifest !== null) {
-    queryParams.manifest = JSON.stringify(params.manifest)
+  if (params.manifest === null) {
+    return querystring.stringify(queryParams)
+  }
+
+  if (!isManifestValid(params.manifest)) {
+    throw Error('Invalid manifest')
   }
 
-  return querystring.stringify(queryParams)
+  queryParams.manifest = JSON.stringify(params.manifest)
 }
 
 export const generateSandboxUrl = (fieldPluginUrl: string) => {
@@ -58,4 +104,4 @@ const displayManifestChecking = () => {
 }
 
 const displayManifestErrorLoading = (err: Error) =>
-  console.log(`${arrows.red} ${bold(`${err.message}`)}`)
+  console.log(`${arrows.red} ${red(`${err.message}`)}`)